Add visual timeline with moving indicator, now marker, and time labels

MMM-CombinedMap.js

@@ -351,28 +351,106 @@ Module.register("MMM-CombinedMap", {
     const container = document.getElementById("mmm-combinedmap-" + this.identifier);
     if (!container) return;
     
-    let timestampEl = container.querySelector(".radar-timestamp");
-    if (!timestampEl) {
-      timestampEl = document.createElement("div");
-      timestampEl.className = "radar-timestamp";
-      container.appendChild(timestampEl);
+    // Create or get timeline element
+    let timelineEl = container.querySelector(".radar-timeline");
+    if (!timelineEl) {
+      timelineEl = this.createTimelineElement();
+      container.appendChild(timelineEl);
     }
     
-    const time = layer.timestamp;
+    // Calculate position (0-100%)
+    const currentIndex = this.radarLayers.indexOf(layer);
+    const totalFrames = this.radarLayers.length;
+    const position = (currentIndex / (totalFrames - 1)) * 100;
+    
+    // Find "now" position
     const now = new Date();
-    const diffMinutes = Math.round((time - now) / 60000);
+    let nowIndex = 0;
+    for (let i = 0; i < this.radarLayers.length; i++) {
+      if (this.radarLayers[i].timestamp <= now) {
+        nowIndex = i;
+      }
+    }
+    const nowPosition = (nowIndex / (totalFrames - 1)) * 100;
     
-    let label;
-    if (Math.abs(diffMinutes) <= 2) {
-      label = "Now";
-    } else if (diffMinutes > 0) {
-      label = `+${diffMinutes} min`;
-    } else {
-      label = `${diffMinutes} min`;
+    // Update indicator position (30px offset on each side for labels)
+    const indicator = timelineEl.querySelector(".timeline-indicator");
+    const trackWidth = timelineEl.offsetWidth - 60; // 30px margin each side
+    if (indicator && trackWidth > 0) {
+      const pixelPos = 30 + (position / 100) * trackWidth;
+      indicator.style.left = pixelPos + "px";
     }
     
-    timestampEl.textContent = label;
-    timestampEl.classList.toggle("forecast", layer.isForecast);
+    // Update "now" marker position
+    const nowMarker = timelineEl.querySelector(".timeline-now span");
+    if (nowMarker && trackWidth > 0) {
+      const nowPixelPos = (nowPosition / 100) * 100;
+      nowMarker.style.left = nowPixelPos + "%";
+    }
+    
+    // Update time label
+    const timeLabel = timelineEl.querySelector(".timeline-time");
+    if (timeLabel) {
+      const diffMinutes = Math.round((layer.timestamp - now) / 60000);
+      if (Math.abs(diffMinutes) <= 2) {
+        timeLabel.textContent = "Now";
+      } else if (diffMinutes > 0) {
+        timeLabel.textContent = "+" + diffMinutes + "m";
+      } else {
+        timeLabel.textContent = diffMinutes + "m";
+      }
+      timeLabel.classList.toggle("forecast", layer.isForecast);
+    }
+  },
+  
+  createTimelineElement: function() {
+    const timeline = document.createElement("div");
+    timeline.className = "radar-timeline";
+    
+    // Track (the line)
+    const track = document.createElement("div");
+    track.className = "timeline-track";
+    
+    // Past section (darker)
+    const past = document.createElement("div");
+    past.className = "timeline-past";
+    
+    // Future section (highlighted)
+    const future = document.createElement("div");
+    future.className = "timeline-future";
+    
+    // "Now" marker
+    const nowMarker = document.createElement("div");
+    nowMarker.className = "timeline-now";
+    nowMarker.innerHTML = "<span>▼</span>";
+    
+    // Moving indicator
+    const indicator = document.createElement("div");
+    indicator.className = "timeline-indicator";
+    
+    // Time label
+    const timeLabel = document.createElement("div");
+    timeLabel.className = "timeline-time";
+    
+    // Labels for start/end
+    const startLabel = document.createElement("div");
+    startLabel.className = "timeline-label timeline-start";
+    startLabel.textContent = "-1h";
+    
+    const endLabel = document.createElement("div");
+    endLabel.className = "timeline-label timeline-end";
+    endLabel.textContent = "+2h";
+    
+    track.appendChild(past);
+    track.appendChild(future);
+    timeline.appendChild(track);
+    timeline.appendChild(nowMarker);
+    timeline.appendChild(indicator);
+    timeline.appendChild(timeLabel);
+    timeline.appendChild(startLabel);
+    timeline.appendChild(endLabel);
+    
+    return timeline;
   },
 
   refreshRadar: function() {