Rewrite the scheduler for Multi-day event

PonyFest · Feb 1, 2024 · 5458946 · 5458946
1 parent d3522ba
commit 5458946
Showing 1 changed file with 82 additions and 12 deletions.
diff --git a/static/scripts/schedule.js b/static/scripts/schedule.js
@@ -3,12 +3,15 @@
 
 document.addEventListener('DOMContentLoaded', async function() {
     const cellBlockHeight = 2; //em
+    const eventPopupOffset = 20;
+    const calSkipHeight = 2;
     const blockTimeUnit = pfoSchedInterval; // minutes
     const schedRoot = $('.schedule-main');
     if(schedRoot.length == 0) { return; }
 
     moment.locale();
     const userTz = moment.tz.guess();
+    let isClicked = false;
 
     let sched = null;
     try {
@@ -26,21 +29,53 @@ document.addEventListener('DOMContentLoaded', async function() {
 
     const makeColumn = function(extraClasses) { return $(`<div class="schedule-column ${extraClasses}"></div>`); };
     const makeCell = function(extraClasses){ return $(`<div class="schedule-cell ${extraClasses}"></div>`); };
-    const schedClick = function(e, event) {
+    const clickSchedule = function(e, event) {
+        isClicked = true;
+        showEvent(e,event);
+    }
+    const hoverSchedule = function(e, event) {
+        if(!isClicked) {
+            showEvent(e,event);
+        }
+    };
+    const showEvent = function(e, event) {
         $('.schedule-event-pop').hide();
         event.pop.show();
-        var targetCal = $(e.target).closest(".schedule-grid");
-        var calOffset = targetCal.offset();
-        var offsetX = e.pageX - calOffset.left;
-        var offsetY = e.pageY - calOffset.top;
+        const targetCal = $(e.target).closest(".schedule-grid");
+
+        // Calculate the window positions
+        let calOffset = targetCal.offset();
+        calOffset.right = calOffset.left + targetCal.width();
+        calOffset.width = calOffset.right - calOffset.left
+        calOffset.mid = calOffset.left + calOffset.width / 2
+
+        let offsetX = e.pageX - calOffset.left + eventPopupOffset;
+        if(e.clientX > calOffset.mid) {
+            offsetX = calOffset.right - e.pageX + eventPopupOffset;
+        }
+        // bounds checking to prevent it from going out
         offsetX = Math.min(offsetX, targetCal.width());
+
+        let offsetY = e.pageY - calOffset.top + eventPopupOffset;
         offsetY = Math.min(offsetY, targetCal.height() - event.pop.get()[0].getBoundingClientRect().height);
+
         const domPop = event.pop.get()[0]
-        domPop.style.left = offsetX;
+        console.log("offset", offsetX)
+        if(e.clientX < calOffset.mid) {
+            domPop.style.left = offsetX;
+        } else {
+            domPop.style.right = offsetX;
+        }
         domPop.style.top = offsetY;
     };
     const eventPopClick = function() {
         $('.schedule-event-pop').hide();
+        isClicked = false;
+    }
+    const eventPopHoover = function() {
+        if(!isClicked) {
+            $('.schedule-event-pop').hide();
+        }
     }
     const makeEventPop = function(myEvent, extraClasses) {
         const eventDesc = $(`<div class="schedule-event-pop ${extraClasses}"></div>`);
@@ -63,7 +98,7 @@ document.addEventListener('DOMContentLoaded', async function() {
 
         eventDesc.hide();
         eventDesc.click(eventPopClick);
-        eventDesc.hover(eventPopClick);
+        eventDesc.hover(eventPopHoover);
         return eventDesc;
     }
 
@@ -82,13 +117,42 @@ document.addEventListener('DOMContentLoaded', async function() {
             col.append(colhead);
         }
 
+        let timeSkip = 0
         for(let i = 0; i < times.length; i++) {
+            let printTime = true
             // convert times to moments
             times[i] = moment.tz(times[i], 'America/New_York');
 
-            const cell = makeCell('schedule-time-cell');
-            cell.text(times[i].tz(userTz).format('h:mm A'))
-            col.append(cell);
+            //if(times[i].tz. - times[i-1])
+            if (i != 0) {
+                let dur = moment.duration(times[i].diff(times[i-1]));
+                if(dur.asMinutes() > blockTimeUnit) {
+                    if(timeSkip < calSkipHeight) {
+                        // Skip a block for spacing on the schedule
+                        times.splice(i, 0, moment(times[i - 1]).add(Number(blockTimeUnit), 'minutes'))
+                        const cell = makeCell('schedule-time-cell');
+                        col.append(cell);
+                        printTime = false
+                        timeSkip++
+                    } else if (timeSkip === calSkipHeight) {
+                        // On the Skip Height, we add the date to differentiate the days
+                        times.splice(i, 0, moment(times[i - 1]).add(Number(blockTimeUnit), 'minutes'))
+                        const cell = makeCell('schedule-time-header');
+                        cell.text(times[i].tz(userTz).format('MMM Do'))
+                        col.append(cell);
+                        printTime = false
+                        timeSkip++
+                    } else {
+                        timeSkip=0
+                    }
+                }
+            }
+
+            if(printTime) {
+                const cell = makeCell('schedule-time-cell');
+                cell.text(times[i].tz(userTz).format('h:mm A'))
+                col.append(cell);
+            }
         }
 
         let colNum = 1;
@@ -152,11 +216,17 @@ document.addEventListener('DOMContentLoaded', async function() {
                     const height = cellBlockHeight * (moment.duration(block.endTime.diff(block.startTime)).asMinutes() / blockTimeUnit);
                     cell.height(`${height}em`);
                     if(block.id !== '-blank-') {
-                        cell.click( (e) => schedClick(e, block.event) );
-                        cell.hover( (e) => schedClick(e, block.event));
+                        cell.click( (e) => clickSchedule(e, block.event) );
+                        cell.hover( (e) => hoverSchedule(e, block.event));
                     }
                     roomCol.append(cell);
                 }
+
+                { // footer
+                    const foothead = makeCell('schedule-room-footer');
+                    foothead.text(key);
+                    roomCol.append(foothead);
+                }
             }
         }