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: custom:button-card
    entity: sensor.mealie_madplan_ugen
    name: Ugens madplan
    show_icon: false
    show_name: true
    show_state: false
    styles:
      card:
        - padding: 0
        - border-radius: 12px
      name:
        - font-size: 16px
        - font-weight: bold
        - padding: 12px 12px 4px 12px
        - justify-self: start
    custom_fields:
      week: |
        [[[
          if (!entity || !entity.attributes || !entity.attributes.items)
            return '<div>Ingen madplan data</div>';
          var items = entity.attributes.items;
          var dayNames = ['Søndag','Mandag','Tirsdag','Onsdag','Torsdag','Fredag','Lørdag'];
          var today = new Date().toISOString().slice(0,10);
          var meals = {};
          for (var j = 0; j < items.length; j++) {
            var it = items[j];
            if (it.recipe && it.recipe.name) {
              meals[it.date] = { name: it.recipe.name, slug: it.recipe.slug || '' };
            }
          }
          var now = new Date();
          var dow = now.getDay();
          var monday = new Date(now);
          monday.setDate(now.getDate() - (dow === 0 ? 6 : dow - 1));
          var html = '<div style="width:100%">';
          for (var i = 0; i < 7; i++) {
            var d = new Date(monday);
            d.setDate(monday.getDate() + i);
            var dateStr = d.toISOString().slice(0,10);
            var dayName = dayNames[d.getDay()];
            var meal = meals[dateStr];
            var isToday = dateStr === today;
            var bg = isToday ? 'var(--primary-color)' : 'transparent';
            var tc = isToday ? 'white' : 'var(--primary-text-color)';
            var dc = isToday ? 'rgba(255,255,255,0.7)' : 'var(--secondary-text-color)';
            var fw = isToday ? 'bold' : 'normal';
            var br = isToday ? '8px' : '0';
            var bb = isToday ? 'none' : '1px solid var(--divider-color)';
            var mn = meal ? meal.name : '-';
            var sl = meal ? meal.slug : '';
            var lnk = sl ? 'http://anneclaus.dk:9925/g/home/r/' + sl : '';
            var cur = sl ? 'pointer' : 'default';
            var oc = sl ? ' onclick="window.open(\x27' + lnk + '\x27,\x27_blank\x27)"' : '';
            html += '<div style="display:flex;align-items:center;padding:10px 12px;background:' + bg + ';border-radius:' + br + ';border-bottom:' + bb + ';cursor:' + cur + '"' + oc + '>';
            html += '<div style="width:70px;font-size:12px;color:' + dc + ';text-transform:uppercase;font-weight:600">' + dayName + '</div>';
            html += '<div style="flex:1;font-size:15px;color:' + tc + ';font-weight:' + fw + '">' + mn + '</div>';
            html += '</div>';
          }
          html += '</div>';
          return html;
        ]]]
    extra_styles: |
      #week {
        width: 100%;
      }