From 5b9504863484e9b66b7499b68929d1502b3e3c26 Mon Sep 17 00:00:00 2001
From: Ariestya Dibyanugraha <ariestya.dibyanugraha@gmail.com>
Date: Tue, 29 Oct 2024 10:07:25 +0700
Subject: [PATCH] Implement better tooltip, bump version to v1.0.2.0

---
 app.json                                      |  2 +-
 sources/control_addins/scripts/startup.js     | 49 +++++++++++--------
 sources/control_addins/stylesheets/styles.css |  5 ++
 3 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/app.json b/app.json
index baf506f..dffc79d 100644
--- a/app.json
+++ b/app.json
@@ -2,7 +2,7 @@
   "id": "73343d99-da2a-49d6-a899-0cff0d064d61",
   "name": "Dynamics 365 Business Central ToastUI Control Add-in",
   "publisher": "Ariestya Dibyanugraha",
-  "version": "1.0.1.0",
+  "version": "1.0.2.0",
   "brief": "A simple yet fully working Dynamics 365 Business Central control add-in demonstrating capabilities of ToastUI Calendar",
   "description": "A simple yet fully working Dynamics 365 Business Central control add-in demonstrating capabilities of ToastUI Calendar",
   "privacyStatement": "",
diff --git a/sources/control_addins/scripts/startup.js b/sources/control_addins/scripts/startup.js
index 4300200..7645f62 100644
--- a/sources/control_addins/scripts/startup.js
+++ b/sources/control_addins/scripts/startup.js
@@ -28,7 +28,7 @@ controlAddIn.innerHTML = "<nav class='navbar'> \
   <span id='calendarDateRange' class='subtitle is-3'></span> \
 </nav> \
 <div id='calendarFrame' style='height: 650px;'></div> \
-<div class='notification is-success is-light' id='tooltip' hidden><button class='delete'></button></div>"
+<div id='tooltip-message' hidden><article class='message is-info is-small'><div id='tooltip-header' class='message-header'></div><div id='tooltip-body' class='message-body'></div></article></div>"
 
 calendar = new tuiCalendar('#calendarFrame', options);
 let dateStart = new Date(calendar.getDateRangeStart());
@@ -90,25 +90,30 @@ calendar.on('beforeCreateEvent', (eventObj) => {
   ]);
 });
 
-const tooltip = document.querySelector('#tooltip');
-console.log("tooltip", tooltip);
+const tooltip = document.querySelector('#tooltip-message');
+const tooltip_header = document.querySelector('#tooltip-header');
+const tooltip_body = document.querySelector('#tooltip-body');
+
 // This event listener should be debounced or it may affect the performance.
 document.addEventListener('mouseover', (e) => {
   const el = e.target;
-  console.log("mouseover", e);
 
   // You need to choose a different selector for schedules in the other view.
-  const scheduleAllDay = el.closest('.toastui-calendar-weekday-event');
-  console.log("mouseover", scheduleAllDay);
-
-  if (scheduleAllDay) {
-    console.log("mouseover", scheduleAllDay);
-    scheduleAllDay.addEventListener(
+  const eventAllDay = el.closest('.toastui-calendar-weekday-event');
+
+  if (eventAllDay) {
+    let eventTitleSpan = '';
+    let calData = {};
+    const selectors = eventAllDay.querySelectorAll('span');
+    eventTitleSpan = [...selectors].map(span => span.innerText);//.replace(/"/g,""));
+    calData = calendarData.find((el) => el.title === eventTitleSpan[2]);
+    tooltip_header.innerHTML = calData.title;
+    tooltip_body.innerHTML = new Date(calData.start).toLocaleString() + "<br>" + new Date(calData.end).toLocaleString();
+    
+    eventAllDay.addEventListener(
       'mouseleave',
       () => {
         tooltip.hidden = true;
-        tooltip.innerHTML = scheduleAllDay.innerHTML;
-        console.log("mouseleave", tooltip);
       },
       { once: true }
     );
@@ -116,15 +121,11 @@ document.addEventListener('mouseover', (e) => {
     const {
       x,
       width,
-      bottom: scheduleBottom,
-      y,
-
-    } = scheduleAllDay.getBoundingClientRect();
+      bottom
+    } = eventAllDay.getBoundingClientRect();
     tooltip.hidden = false;
-    tooltip.innerHTML = scheduleAllDay.innerHTML;
-    console.log("mouseover", tooltip);
     Object.assign(tooltip.style, {
-      top: `${scheduleBottom}px`,
+      top: `${bottom}px`,
       left: `${x + Math.round(width / 2)}px`,
     });
   }
@@ -132,11 +133,18 @@ document.addEventListener('mouseover', (e) => {
   const calEvent = el.closest('.toastui-calendar-event-time');
 
   if (calEvent) {
+    let eventTitleSpan = '';
+    let calData = {};
+    const selectors = calEvent.querySelectorAll('span');
+    eventTitleSpan = [...selectors].map(span => span.innerText);//.replace(/"/g,""));
+    calData = calendarData.find((el) => el.title === eventTitleSpan[1]);
+    tooltip_header.innerHTML = calData.title;
+    tooltip_body.innerHTML = new Date(calData.start).toLocaleString() + "<br>" + new Date(calData.end).toLocaleString();
+
     calEvent.addEventListener(
       'mouseleave',
       () => {
         tooltip.hidden = true;
-        tooltip.innerHTML = calEvent.innerHTML;
       },
       { once: true }
     );
@@ -148,7 +156,6 @@ document.addEventListener('mouseover', (e) => {
       height 
     } = calEvent.getBoundingClientRect();
     tooltip.hidden = false;
-    tooltip.innerHTML = calEvent.innerHTML;
     Object.assign(tooltip.style, {
       top: `${y + height/2}px`,
       left: `${x + Math.round(width / 2)}px`,
diff --git a/sources/control_addins/stylesheets/styles.css b/sources/control_addins/stylesheets/styles.css
index 46a0b21..49489f6 100644
--- a/sources/control_addins/stylesheets/styles.css
+++ b/sources/control_addins/stylesheets/styles.css
@@ -1,4 +1,9 @@
 #tooltip {
     position: absolute;
     padding: 0.5rem;
+  }
+  
+#tooltip-message {
+    position: absolute;
+    padding: 0.5rem;
   }
\ No newline at end of file