Fix ugens madplan: standalone button-card i stedet for entities-nested
- button-card som entity-row i entities-kort understøtter ikke custom_fields korrekt - Bruger nu standalone custom:button-card direkte under cards - Forenklet JS: var i stedet for const/let, \x27 i stedet for escaped quotes - Undgår em-dash og andre special chars
This commit is contained in:
@@ -65,71 +65,68 @@ cards:
|
|||||||
service: script.mad_announcement
|
service: script.mad_announcement
|
||||||
|
|
||||||
# 📅 Ugens madplan
|
# 📅 Ugens madplan
|
||||||
- type: entities
|
- type: custom:button-card
|
||||||
title: Ugens madplan
|
entity: sensor.mealie_madplan_ugen
|
||||||
show_header_toggle: false
|
name: Ugens madplan
|
||||||
entities:
|
show_icon: false
|
||||||
- type: custom:button-card
|
show_name: true
|
||||||
entity: sensor.mealie_madplan_ugen
|
show_state: false
|
||||||
show_icon: false
|
styles:
|
||||||
show_name: false
|
card:
|
||||||
show_state: false
|
- padding: 0
|
||||||
styles:
|
- border-radius: 12px
|
||||||
card:
|
name:
|
||||||
- padding: 0
|
- font-size: 16px
|
||||||
- background: none
|
- font-weight: bold
|
||||||
- box-shadow: none
|
- padding: 12px 12px 4px 12px
|
||||||
custom_fields:
|
- justify-self: start
|
||||||
week: |
|
custom_fields:
|
||||||
[[[
|
week: |
|
||||||
if (!entity || !entity.attributes || !entity.attributes.items)
|
[[[
|
||||||
return 'Ingen madplan data';
|
if (!entity || !entity.attributes || !entity.attributes.items)
|
||||||
const items = entity.attributes.items;
|
return '<div>Ingen madplan data</div>';
|
||||||
const dayNames = ['Søndag','Mandag','Tirsdag','Onsdag','Torsdag','Fredag','Lørdag'];
|
var items = entity.attributes.items;
|
||||||
const today = new Date().toISOString().slice(0,10);
|
var dayNames = ['Søndag','Mandag','Tirsdag','Onsdag','Torsdag','Fredag','Lørdag'];
|
||||||
const meals = {};
|
var today = new Date().toISOString().slice(0,10);
|
||||||
items.forEach(function(item) {
|
var meals = {};
|
||||||
if (item.recipe && item.recipe.name) {
|
for (var j = 0; j < items.length; j++) {
|
||||||
meals[item.date] = { name: item.recipe.name, slug: item.recipe.slug || '' };
|
var it = items[j];
|
||||||
}
|
if (it.recipe && it.recipe.name) {
|
||||||
});
|
meals[it.date] = { name: it.recipe.name, slug: it.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%;
|
|
||||||
}
|
}
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user