New themese and night/day mode

Aberwyn/wwwroot/js/menu.js

@@ -1,4 +1,9 @@
-angular.module('mealMenuApp', ['ngSanitize'])
+function setTheme(mode) {
+    document.documentElement.setAttribute('data-theme', mode);
+    localStorage.setItem('theme', mode);
+}
+
+angular.module('mealMenuApp', ['ngSanitize'])
     .controller('MealMenuController', function ($scope, $http, $sce) {
         console.log("Controller initierad");
 
@@ -17,6 +22,7 @@
                 .then(res => {
                     console.log("Måltider hämtade:", res.data);
                     $scope.meals = res.data;
+                    console.log("Alla måltider med bilder:", $scope.meals);
                     return res;
                 })
                 .catch(err => console.error("Fel vid hämtning av måltider:", err));
@@ -53,8 +59,10 @@
                             $scope.menu[day][type + 'MealId'] = item[idKey];
                             $scope.menu[day][type + 'MealName'] = m?.Name || item[nameKey] || 'Okänd rätt';
 
-                            if (m?.ImageUrl) {
-                                $scope.menu[day].imageUrl = m.ImageUrl;
+                            if (m?.ImageUrl && !$scope.menu[day].imageUrl) {
+                                $scope.menu[day].imageUrl = m.ImageUrl.startsWith('/')
+                                    ? m.ImageUrl
+                                    : '/' + m.ImageUrl;
                             }
                         }
                     });
@@ -71,7 +79,17 @@
 
         $scope.getDayImage = function (day) {
             const item = $scope.menu[day];
-            return (item && item.imageUrl) || '/images/default-meal.jpg';
+            const img = item?.imageUrl;
+
+            if (img && img.startsWith('/')) {
+                return img;
+            }
+
+            if (img && !img.startsWith('/')) {
+                return '/' + img; // Fixa ev. saknad inledande snedstreck
+            }
+
+            return '/images/default-meal.jpg';
         };
 
         $scope.getMealIdByDay = function (day) {
@@ -106,10 +124,57 @@
             const yearStart = new Date(d.getFullYear(), 0, 1);
             return Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
         }
+        $scope.getViewIcon = function () {
+            return $scope.viewMode === 'list' ? '🗒️' : '▣';
+        };
+
+        $scope.toggleView = function () {
+            $scope.viewMode = $scope.viewMode === 'list' ? 'card' : 'list';
+            // Uppdatera knappens ikon
+            setTimeout(() => {
+                const btn = document.getElementById('toggle-view');
+                if (btn) {
+                    btn.textContent = $scope.getViewIcon();
+                }
+            }, 0);
+        };
+
 
         console.log("Initierar måltidsladdning...");
         $scope.loadMeals().then(() => {
             console.log("Laddar meny efter måltider...");
             $scope.loadMenu();
+            setTimeout(() => {
+                const viewBtn = document.getElementById('toggle-view');
+                if (viewBtn) viewBtn.textContent = $scope.getViewIcon();
+            }, 0);
+
         });
     });
+document.addEventListener("DOMContentLoaded", function () {
+    const themeBtn = document.getElementById('toggle-theme');
+    const viewBtn = document.getElementById('toggle-view');
+
+    if (themeBtn) {
+        themeBtn.addEventListener('click', () => {
+            const current = document.documentElement.getAttribute('data-theme');
+            const newTheme = current === 'dark' ? 'light' : 'dark';
+            setTheme(newTheme);
+            themeBtn.textContent = newTheme === 'dark' ? '🌙' : '☀️';
+        });
+    }
+
+    const saved = localStorage.getItem('theme');
+    if (saved) {
+        setTheme(saved);
+    } else {
+        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        setTheme(systemPrefersDark ? 'dark' : 'light');
+    }
+
+    // Initiera ikon för vy
+    const scope = angular.element(document.body).scope();
+    if (viewBtn && scope) {
+        viewBtn.textContent = scope.viewMode === 'list' ? '🗒️' : '▣';
+    }
+});