N22/dashboards/views/04c_madplan.yaml

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://anneclaus.dk:9925/g/home/r/' + slug;
          }
          return 'http://anneclaus.dk: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: |
            [[[
              if (!entity || !entity.attributes || !entity.attributes.items)
                return 'Ingen madplan data';
              const items = entity.attributes.items;
              const dayNames = ['Søndag','Mandag','Tirsdag','Onsdag','Torsdag','Fredag','Lørdag'];
              const today = new Date().toISOString().slice(0,10);
              const meals = {};
              items.forEach(function(item) {
                if (item.recipe && item.recipe.name) {
                  meals[item.date] = { name: item.recipe.name, slug: item.recipe.slug || '' };
                }
              });
              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://anneclaus.dk:9925/g/home/r/' + slug : '';
                const cursor = slug ? 'pointer' : 'default';
                const clickAttr = slug ? ' onclick="window.open(\'' + link + '\',\'_blank\')"' : '';
                html += '<div style="display:flex;align-items:center;padding:10px 12px;'
                  + 'background:' + bg + ';border-radius:' + radius + ';'
                  + 'border-bottom:' + border + ';cursor:' + cursor + '"'
                  + clickAttr + '>'
                  + '<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%;
          }