public onHover(event: HoverEventArgs): void {
this.tooltipObj.close();
this.menuObj.close();
if (!event.element || !event.event.target) {
return;
}
const hoverTarget: HTMLElement = closest((event.event.target as Element), '.e-appointment') as HTMLElement;
if (hoverTarget) {
this.closeNewAppointmentTooltip();
// We are hovering over an appointment
this.resetNewAppointmentBlock();
this.patientAppointment = this.scheduleObj.getEventDetails(hoverTarget) as ATIAppointment;
if (this.patientAppointment.apptStatus != 3) {
let location = this.locations.find(c => c.deptNum === this.patientAppointment.deptNum);
if (location) {
this.patientAppointment.location = location.locationName;
}
}
if (this.patientAppointment.apptStatus == 2) {
this.fetchCancelationReason();
}
this.setAttributes();
this.tooltipObj.open(event.element);
this.tooltipObj.open(hoverTarget);
}
else {
const hoverEmptyTarget: HTMLElement = closest((event.event.target as Element), '.e-work-cells') as HTMLElement;
if (hoverEmptyTarget) {
const newApptBlockId = 'newApptBlockId';
const newApptEllipseId = 'newApptEllipseId';
const existingNewApptBlock = document.getElementById(newApptBlockId);
if (existingNewApptBlock && hoverEmptyTarget.id !== newApptBlockId) {
existingNewApptBlock.outerHTML = this.emptyCellOuterHtml;
existingNewApptBlock.innerText = this.emptyCellInnerText;
this.closeNewAppointmentTooltip();
}
let height: string = hoverEmptyTarget.style.height;
if (hoverEmptyTarget.id !== newApptBlockId) {
this.emptyCellOuterHtml = hoverEmptyTarget.outerHTML;
this.emptyCellInnerText = hoverEmptyTarget.innerText;
hoverEmptyTarget.id = newApptBlockId;
hoverEmptyTarget.innerText = "";
const ele: any = this.scheduleObj.getCellDetails(hoverEmptyTarget);
let hasAppointments: Boolean = false;
if (!this.scheduleObj.isSlotAvailable(ele.startTime, ele.endTime, ele.groupIndex)) {
hasAppointments = true;
}
const elipse: string = '<div class="elipse-block-d" id="' + newApptEllipseId + '"><i class="fa fa-ellipsis-v elipse" id="elipseMenu"></i></div>';
const label: string = 'New Appointment ' + this.getTimeStringForEmptyCell(ele.startTime);
let newApptBlock: string = '<div class="template-wrap empty-cell-new-appt"><div class="new-appt-label-d"> <i class="fa fa-plus-circle plus-circle"></i>' + label + '</div>' + elipse + '</div>';
const htmlToUpdate = hoverEmptyTarget.outerHTML;
hoverEmptyTarget.outerHTML = htmlToUpdate.replace('</td>', newApptBlock + '</td>');
hoverEmptyTarget.style.maxHeight = height;
hoverEmptyTarget.style.height = height;
if (hasAppointments) {
document.getElementById(newApptEllipseId).addEventListener('mouseover', (event: MouseEvent) => {
this.createNewAppointmentTooltip(newApptEllipseId, this.getTimeStringForEmptyCell(ele.startTime));
});
}
document.getElementById(newApptEllipseId).addEventListener('click', (event: MouseEvent) => {
this.showContextMenuFromNewAppointmentBlock(event);
});
document.getElementById(newApptBlockId).addEventListener('dblclick', (event: MouseEvent) => {
this.showNewAppointment(event);
});
}
} else {
this.resetNewAppointmentBlock();
}
event.event.stopPropagation();
}
}
