Bonjour à tous,
Finalement, en trifouillant avec ChatGPT, il m’a pondu cette version:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.rte_tempo_couleur_actuelle
name: Aujourd'hui
show_label: label
label: |
[[[
var now = new Date();
var midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate());
var day = midnight.toLocaleString('fr-FR', { weekday: 'long' });
var dayOfMonth = ('0' + midnight.getDate()).slice(-2);
var month = midnight.toLocaleString('fr-FR', { month: 'long' }).replace('.', '');
var color = states['sensor.rte_tempo_couleur_actuelle'].state;
var hpPrice = states['input_number.tarif_edf_tempo_hp_' + color.toLowerCase()].state;
var hcPrice = states['input_number.tarif_edf_tempo_hc_' + color.toLowerCase()].state;
var joursRestants = states['sensor.rte_tempo_cycle_jours_restants_' + color.toLowerCase()].state;
var content = `<span style="font-size: 1.2em; margin: 10px 0;">${day} ${dayOfMonth} ${month}</span><br><span style="font-size: 0.9em; margin: 5px 0;">Jusqu'à 06h00</span><hr style="margin: 1px 0 8px; border-top: 1px solid rgba(0, 0, 0, 0.2);">il reste ${joursRestants} ${color}`;
content += `<br>Tarif HP: ${hpPrice} €/kWh<br>Tarif HC: ${hcPrice} €/kWh`;
return content;
]]]
styles:
card:
- height: 130px
- background-color: |
[[[
var color = states['sensor.rte_tempo_couleur_actuelle'].state.toLowerCase();
return (color === 'rouge') ? '#fe1b00' :
(color === 'blanc') ? 'white' :
(color === 'bleu') ? 'dodgerblue' :
'var(--card-background-color)';
]]]
- color: |
[[[
return (states['sensor.rte_tempo_couleur_actuelle'].state.toLowerCase() === 'blanc') ? 'black' : 'white';
]]]
- border-radius: 20px
- padding: 16px
- font-size: 1.2em
- text-align: center
- box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3)
grid:
- grid-template-areas: '"n" "l"'
- grid-template-rows: 1fr min-content
name:
- font-weight: bold
- font-size: 1.2em
label:
- font-size: 0.8em
- justify-self: center
- align-self: center
- margin-top: 10px
- type: custom:button-card
entity: sensor.rte_tempo_prochaine_couleur
name: Demain
show_label: true
label: |
[[[
var now = new Date();
var midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
var day = midnight.toLocaleString('fr-FR', { weekday: 'long' });
var dayOfMonth = ('0' + midnight.getDate()).slice(-2);
var month = midnight.toLocaleString('fr-FR', { month: 'long' }).replace('.', '');
var colorState = states['sensor.rte_tempo_prochaine_couleur'];
var color = (colorState && colorState.state) ? colorState.state : 'indisponible';
var hpPriceState = states['input_number.tarif_edf_tempo_hp_' + color.toLowerCase()];
var hcPriceState = states['input_number.tarif_edf_tempo_hc_' + color.toLowerCase()];
var joursRestantsState = states['sensor.rte_tempo_cycle_jours_restants_' + color.toLowerCase()];
if (colorState && hpPriceState && hcPriceState && joursRestantsState &&
colorState.state && hpPriceState.state && hcPriceState.state && joursRestantsState) {
var hpPrice = hpPriceState.state;
var hcPrice = hcPriceState.state;
var joursRestants = joursRestantsState.state;
var content = `<span style="font-size: 1.2em; margin: 10px 0;">${day} ${dayOfMonth} ${month}</span><br><span style="font-size: 0.9em; margin: 5px 0;">Jusqu'à 06h00</span><hr style="margin: 1px 0 8px; border-top: 1px solid rgba(0, 0, 0, 0.2);">il reste ${joursRestants} ${color}`;
content += `<br>Tarif HP: ${hpPrice} €/kWh<br>Tarif HC: ${hcPrice} €/kWh`;
return content;
} else {
// Orange si unavailable
return 'Jour non défini';
}
]]]
styles:
card:
- height: 130px
- background-color: |
[[[
var colorState = states['sensor.rte_tempo_prochaine_couleur'];
if (colorState && colorState.state) {
var color = colorState.state.toLowerCase();
return (color === 'rouge') ? '#fe1b00' :
(color === 'blanc') ? 'white' :
(color === 'bleu') ? 'dodgerblue' :
(color === 'unavailable') ? 'orange' :
'var(--card-background-color)';
} else {
// Sinon jaune (aucuns état ci dessus)
return 'yellow';
}
]]]
- color: |
[[[
var colorState = states['sensor.rte_tempo_prochaine_couleur'];
return (colorState && colorState.state && colorState.state.toLowerCase() === 'blanc') ? 'black' : 'white';
]]]
- border-radius: 20px
- padding: 16px
- font-size: 1.2em
- text-align: center
- box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3)
grid:
- grid-template-areas: '"n" "l"'
- grid-template-rows: 1fr min-content
name:
- font-weight: bold
- font-size: 1.2em
label:
- font-size: 0.8em
- justify-self: center
- align-self: center
- margin-top: 10px
Pour le coup, ça a l’air de fonctionner puisque maintenant j’ai bien toutes les infos pour le lendemain et normalement ça intègre la prise en charge de l’état indisponible.
A voir si c’est bien le cas quand on aura des changements de tarifs.
Son explication:
En tout cas, encore merci @chuppito pour le partage 
