Madplan dashboard view + Mealie sensorer + mad_announcement med dagens ret

2026-04-16 19:14:39 +02:00
parent 42930ef2f0
commit 2c4f6c4308
5 changed files with 231 additions and 5 deletions
@@ -0,0 +1,148 @@
+title: Madplan
+path: madplan
+icon: mdi:chef-hat
+
+cards:
+
+  # 🍽️ Dagens ret - stort fremhævet kort med link til Mealie
+  - type: custom:button-card
+    entity: sensor.dagens_aftensmad
+    show_icon: true
+    show_name: true
+    show_state: true
+    icon: mdi:food-variant
+    name: I dag
+    tap_action:
+      action: url
+      url_path: >
+        [[[
+          var slug = states['sensor.dagens_aftensmad_slug'].state;
+          if (slug && slug !== '' && slug !== 'unknown') {
+            return 'http://10.0.0.142:9925/g/home/r/' + slug;
+          }
+          return 'http://10.0.0.142:9925';
+        ]]]
+    styles:
+      card:
+        - padding: 16px
+        - background: var(--primary-color)
+        - border-radius: 12px
+      icon:
+        - color: white
+        - width: 40px
+      name:
+        - font-size: 13px
+        - color: "rgba(255,255,255,0.7)"
+        - text-transform: uppercase
+        - letter-spacing: 1px
+      state:
+        - font-size: 22px
+        - font-weight: bold
+        - color: white
+        - padding-top: 4px
+
+  # 🎵 Musik i køkken + Der er mad
+  - type: grid
+    columns: 2
+    square: false
+    cards:
+      - type: button
+        name: Musik i køkken
+        icon: mdi:music-note-outline
+        tap_action:
+          action: call-service
+          service: media_player.select_source
+          target:
+            entity_id: media_player.kokken
+          data:
+            source: "1 Family Mix"
+
+      - type: button
+        name: Der er mad!
+        icon: mdi:silverware-fork-knife
+        tap_action:
+          action: call-service
+          service: script.mad_announcement
+
+  # 📅 Ugens madplan
+  - type: entities
+    title: Ugens madplan
+    show_header_toggle: false
+    entities:
+      - type: custom:button-card
+        entity: sensor.mealie_madplan_ugen
+        show_icon: false
+        show_name: false
+        show_state: false
+        styles:
+          card:
+            - padding: 0
+            - background: none
+            - box-shadow: none
+        custom_fields:
+          week: >
+            [[[
+              const items = entity.attributes.items || [];
+              const dayNames = ['Søndag','Mandag','Tirsdag','Onsdag','Torsdag','Fredag','Lørdag'];
+              const today = new Date().toISOString().slice(0,10);
+
+              // Build date->meal map
+              const meals = {};
+              items.forEach(item => {
+                if (item.recipe && item.recipe.name) {
+                  meals[item.date] = {
+                    name: item.recipe.name,
+                    slug: item.recipe.slug || ''
+                  };
+                }
+              });
+
+              // Generate 7 days starting from Monday of current week
+              const now = new Date();
+              const dayOfWeek = now.getDay();
+              const monday = new Date(now);
+              monday.setDate(now.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1));
+
+              let html = '<div style="width:100%">';
+              for (let i = 0; i < 7; i++) {
+                const d = new Date(monday);
+                d.setDate(monday.getDate() + i);
+                const dateStr = d.toISOString().slice(0,10);
+                const dayName = dayNames[d.getDay()];
+                const meal = meals[dateStr];
+                const isToday = dateStr === today;
+
+                const bg = isToday ? 'var(--primary-color)' : 'transparent';
+                const textColor = isToday ? 'white' : 'var(--primary-text-color)';
+                const dayColor = isToday ? 'rgba(255,255,255,0.7)' : 'var(--secondary-text-color)';
+                const weight = isToday ? 'bold' : 'normal';
+                const radius = isToday ? '8px' : '0';
+                const border = isToday ? 'none' : '1px solid var(--divider-color)';
+
+                const mealName = meal ? meal.name : '—';
+                const slug = meal ? meal.slug : '';
+                const link = slug ? 'http://10.0.0.142:9925/g/home/r/' + slug : '';
+                const cursor = slug ? 'pointer' : 'default';
+
+                html += `
+                  <div style="display:flex; align-items:center; padding:10px 12px;
+                              background:${bg}; border-radius:${radius};
+                              border-bottom:${border}; cursor:${cursor}"
+                       ${slug ? `onclick="window.open('${link}','_blank')"` : ''}>
+                    <div style="width:70px; font-size:12px; color:${dayColor};
+                                text-transform:uppercase; font-weight:600">
+                      ${dayName}
+                    </div>
+                    <div style="flex:1; font-size:15px; color:${textColor};
+                                font-weight:${weight}">
+                      ${mealName}
+                    </div>
+                  </div>`;
+              }
+              html += '</div>';
+              return html;
+            ]]]
+        extra_styles: |
+          #week {
+            width: 100%;
+          }