Files
N22/dashboards/views/04c_madplan.yaml
T

149 lines
4.9 KiB
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://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%;
}