Merge pull request #59 from ProLoser/copilot/fade-out-ended-events

Author: ProLoser

map.js

@@ -137,6 +137,28 @@ async function initialize() {
 }
 
 let options = {};
+
+function isEventEnded(event) {
+  if (!event.time || !event.date_text) return false;
+  const timeParts = event.time.split(' to ');
+  const start = new Date(`${event.date_text} ${timeParts[0]}`);
+  if (isNaN(start.getTime())) return false;
+  let end;
+  if (timeParts[1]) {
+    const startDate = start.toLocaleDateString('sv-SE');
+    if (timeParts[1].slice(-2) === 'am' && timeParts[0].slice(-2) === 'pm') {
+      const endDate = new Date(start);
+      endDate.setDate(endDate.getDate() + 1);
+      end = new Date(`${endDate.toLocaleDateString('sv-SE').replace(/-/gi, '/')} ${timeParts[1]}`);
+    } else {
+      end = new Date(`${startDate.replace(/-/gi, '/')} ${timeParts[1]}`);
+    }
+  } else {
+    end = new Date(start.getTime() + 60 * 60 * 1000);
+  }
+  return end < new Date();
+}
+
 /**
  * Callback for datepicker, filters all visible events to specified date and category
  * @param {object} filters
@@ -150,6 +172,11 @@ window.filter = async function (filters = {}) {
     date = options.date.replace(/-/gi, '/');
     date = new Date(date);
   }
+  const today = new Date();
+  const isToday = date &&
+    date.getFullYear() === today.getFullYear() &&
+    date.getMonth() === today.getMonth() &&
+    date.getDate() === today.getDate();
   let categories = [];
   if (options.category) {
     categories = options.category.split(CATEGORY_DELIMITER)
@@ -230,6 +257,11 @@ window.filter = async function (filters = {}) {
         if (event.marker.content.style.opacity === '0') {
           intersectionObserver.observe(event.marker.content);
         }
+        if (isToday && isEventEnded(event)) {
+          event.marker.content.classList.add('event-ended');
+        } else {
+          event.marker.content.classList.remove('event-ended');
+        }
       }
     } else {
       // Multiple events at same location - create cluster marker

style.css

@@ -273,3 +273,7 @@ html, body, #map-canvas {
   border-top: 1px solid #e0e0e0;
   margin: 10px 0;
 }
+
+.event-ended {
+  opacity: 0.5 !important;
+}