Update cookcli-recipe-strategy.js

dist/cookcli-recipe-strategy.js

@@ -386,72 +386,87 @@ class CookCliRecipeViewStrategy extends HTMLElement {
 class CookcliStrategyEditor extends HTMLElement {
   setConfig(config) {
     this._config = config;
+    if (this.isConnected) {
+      this._render();
+    }
   }
 
   set hass(hass) {
     this._hass = hass;
+    if (this.isConnected) {
+      this._render();
+    }
   }
 
-  // Méthode appelée quand l'utilisateur modifie un champ
-  _valueChanged(ev) {
-    if (!this._config || !this._hass) {
+  // Appelé automatiquement quand l'élément est inséré dans le DOM
+  connectedCallback() {
+    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;
     }
-    const target = ev.target;
-    const newConfig = { ...this._config };
 
-    // Mettre à jour la clé correspondant au nom du champ
-    newConfig[target.configValue] = target.value;
+    const c = this._config || {};
 
-    // 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 = `
-      <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
           label="Entité minuteur"
-          .value="${this._config.timer_entity || ''}"
-          configValue="timer_entity"
-          @change="${this._valueChanged.bind(this)}"
+          value="${c.timer_entity || ""}"
+          data-config-key="timer_entity"
           helper="Ex: timer.recette_en_cours"
-          style="width: 100%; margin-bottom: 16px;"
+          style="width: 100%;"
         ></ha-textfield>
+
         <ha-textfield
           label="Entité étape"
-          .value="${this._config.step_entity || ''}"
-          configValue="step_entity"
-          @change="${this._valueChanged.bind(this)}"
+          value="${c.step_entity || ""}"
+          data-config-key="step_entity"
           helper="Ex: input_number.recette_etape"
-          style="width: 100%; margin-bottom: 16px;"
+          style="width: 100%;"
         ></ha-textfield>
+
         <ha-textfield
           label="Entry ID (optionnel)"
-          .value="${this._config.entry_id || ''}"
-          configValue="entry_id"
-          @change="${this._valueChanged.bind(this)}"
+          value="${c.entry_id || ""}"
+          data-config-key="entry_id"
+          helper="Laisser vide si un seul serveur CookCLI"
           style="width: 100%;"
         ></ha-textfield>
       </div>
     `;
-  }
 
-  configChanged(newConfig) {
-    this.dispatchEvent(
-      new CustomEvent("config-changed", {
-        bubbles: true,
-        composed: true,
-        detail: { config: newConfig },
-      })
-    );
+    // On attache les écouteurs en JS natif, car la syntaxe @change de Lit
+    // n'est pas interprétée dans un innerHTML classique.
+    this.querySelectorAll("[data-config-key]").forEach((champ) => {
+      champ.addEventListener("change", (ev) => {
+        const cle = ev.target.dataset.configKey;
+        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 },
+          })
+        );
+      });
+    });
   }
 }