second commit

assets/js/app.js

@@ -34,6 +34,10 @@
         return value || fallback;
     }
 
+    function moodIconPath(sentiment) {
+        return `/assets/icons/mood-${sentiment}.svg`;
+    }
+
     function updateRangeOutputs() {
         document.querySelectorAll("[data-output-for]").forEach(output => {
             const input = document.querySelector(`[name="${output.dataset.outputFor}"]`);
@@ -50,6 +54,17 @@
         });
     }
 
+    function initHeaderDatePicker() {
+        document.querySelectorAll(".topbar-date-input").forEach(input => {
+            input.addEventListener("change", () => {
+                const form = input.closest("form");
+                if (form) {
+                    form.submit();
+                }
+            });
+        });
+    }
+
     function sleepDurationPoints(hours, points) {
         if (hours < 4) {
             return Number(points.lt4 || 0);
@@ -123,6 +138,35 @@
         return currentIndex > capIndex ? cap : current;
     }
 
+    function sentimentForLabel(label, ratings) {
+        const order = ratings.map(item => item.label);
+        const index = order.indexOf(label);
+
+        if (index === -1 || order.length <= 1) {
+            return "steady";
+        }
+
+        const ratio = index / Math.max(order.length - 1, 1);
+
+        if (ratio <= 0.1) {
+            return "storm";
+        }
+
+        if (ratio <= 0.35) {
+            return "heavy";
+        }
+
+        if (ratio <= 0.65) {
+            return "steady";
+        }
+
+        if (ratio <= 0.9) {
+            return "bright";
+        }
+
+        return "radiant";
+    }
+
     function evaluateEntry(entry, settings) {
         const ratings = sortedRatings(settings.ratings || []);
         const scoring = settings.scoring || {};
@@ -151,7 +195,7 @@
             }
         }
 
-        return { total, label, components };
+        return { total, label, components, sentiment: sentimentForLabel(label, ratings) };
     }
 
     function initTrackPreview() {
@@ -169,6 +213,7 @@
 
         const totalNode = card.querySelector("[data-preview-total]");
         const labelNode = card.querySelector("[data-preview-label]");
+        const iconNode = card.querySelector("[data-preview-icon]");
         const componentsNode = card.querySelector("[data-preview-components]");
         const componentLabels = {
             mood: "Stimmung",
@@ -196,6 +241,9 @@
             const result = evaluateEntry(collect(), payload.settings);
             totalNode.textContent = formatNumber(result.total);
             labelNode.textContent = result.label;
+            iconNode.src = moodIconPath(result.sentiment);
+            card.dataset.sentiment = result.sentiment;
+            document.body.dataset.trackMood = result.sentiment;
             componentsNode.innerHTML = Object.entries(result.components).map(([key, value]) => {
                 return `<div><dt>${componentLabels[key] || key}</dt><dd>${formatNumber(Number(value))}</dd></div>`;
             }).join("");
@@ -419,6 +467,7 @@
     }
 
     updateRangeOutputs();
+    initHeaderDatePicker();
     initTrackPreview();
     initDashboardCharts();
 })();