6e9e28274c
Links til opskrifter bruger nu eksternt domæne så de virker udefra.
149 lines
4.9 KiB
YAML
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://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: >
|
|
[[[
|
|
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://anneclaus.dk: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%;
|
|
}
|