TheThomaas/ha-cookcli-strategy
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Update cookcli-recipe-strategy.js

Browse source
This commit is contained in:
TheThomaas 2026-09-16 16:36:44 +02:00
parent 22bee99cff
commit 3a6fef38a5
1 changed files with 55 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
dist/cookcli-recipe-strategy.js vendored
View file

@ -386,72 +386,87 @@ class CookCliRecipeViewStrategy extends HTMLElement {
class CookcliStrategyEditor extends HTMLElement { class CookcliStrategyEditor extends HTMLElement {
setConfig(config) { setConfig(config) {
this._config = config; this._config = config;
if (this.isConnected) {
this._render();
}
} }
set hass(hass) { set hass(hass) {
this._hass = hass; this._hass = hass;
if (this.isConnected) {
this._render();
}
} }
// Méthode appelée quand l'utilisateur modifie un champ // Appelé automatiquement quand l'élément est inséré dans le DOM
_valueChanged(ev) { connectedCallback() {
if (!this._config || !this._hass) { this._render();
}
_render() {
// On attend d'avoir hass avant de rendre : ha-textfield en a besoin
// pour son thème et ses styles.
if (!this._hass) {
this.innerHTML = `<div style="padding:16px">Chargement…</div>`;
return; return;
} }
const target = ev.target;
const newConfig = { ...this._config };
// Mettre à jour la clé correspondant au nom du champ const c = this._config || {};
newConfig[target.configValue] = target.value;
// Informer Home Assistant du changement
this.dispatchEvent(
new CustomEvent("config-changed", {
bubbles: true,
composed: true,
detail: { config: newConfig },
})
);
}
// Méthode de rendu (obligatoire pour afficher le formulaire)
connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<div style="padding: 16px;"> <div style="padding: 16px; display: flex; flex-direction: column; gap: 16px;">
<ha-textfield
label="Titre du dashboard"
value="${c.title || ""}"
data-config-key="title"
helper="Titre affiché dans l'onglet"
style="width: 100%;"
></ha-textfield>
<ha-textfield <ha-textfield
label="Entité minuteur" label="Entité minuteur"
.value="${this._config.timer_entity || ''}" value="${c.timer_entity || ""}"
configValue="timer_entity" data-config-key="timer_entity"
@change="${this._valueChanged.bind(this)}"
helper="Ex: timer.recette_en_cours" helper="Ex: timer.recette_en_cours"
style="width: 100%; margin-bottom: 16px;" style="width: 100%;"
></ha-textfield> ></ha-textfield>
<ha-textfield <ha-textfield
label="Entité étape" label="Entité étape"
.value="${this._config.step_entity || ''}" value="${c.step_entity || ""}"
configValue="step_entity" data-config-key="step_entity"
@change="${this._valueChanged.bind(this)}"
helper="Ex: input_number.recette_etape" helper="Ex: input_number.recette_etape"
style="width: 100%; margin-bottom: 16px;" style="width: 100%;"
></ha-textfield> ></ha-textfield>
<ha-textfield <ha-textfield
label="Entry ID (optionnel)" label="Entry ID (optionnel)"
.value="${this._config.entry_id || ''}" value="${c.entry_id || ""}"
configValue="entry_id" data-config-key="entry_id"
@change="${this._valueChanged.bind(this)}" helper="Laisser vide si un seul serveur CookCLI"
style="width: 100%;" style="width: 100%;"
></ha-textfield> ></ha-textfield>
</div> </div>
`; `;
}
configChanged(newConfig) { // On attache les écouteurs en JS natif, car la syntaxe @change de Lit
this.dispatchEvent( // n'est pas interprétée dans un innerHTML classique.
new CustomEvent("config-changed", { this.querySelectorAll("[data-config-key]").forEach((champ) => {
bubbles: true, champ.addEventListener("change", (ev) => {
composed: true, const cle = ev.target.dataset.configKey;
detail: { config: newConfig }, const nouvelleConfig = { ...this._config, [cle]: ev.target.value };
}) this._config = nouvelleConfig;
);
// On notifie HA du changement : il met à jour la config du dashboard
this.dispatchEvent(
new CustomEvent("config-changed", {
bubbles: true,
composed: true,
detail: { config: nouvelleConfig },
})
);
});
});
} }
} }