Update cookcli-recipe-strategy.js

dist/cookcli-recipe-strategy.js

@@ -55,30 +55,8 @@ class CookCliDashboardStrategy extends HTMLElement {
     return { title: "Recettes", icon: "mdi:chef-hat" };
   }
 
-  static getConfigForm() {
+  static getConfigElement() {
-    return {
+    return document.createElement("cookcli-strategy-editor");
-      schema: [
-        { name: "title", selector: { text: {} }, label: "Titre" },
-        {
-          name: "timer_entity",
-          selector: { entity: { domain: "timer" } },
-          label: "Entité minuteur",
-          helper: "Ex: timer.recette_en_cours",
-        },
-        {
-          name: "step_entity",
-          selector: { entity: { domain: "input_number" } },
-          label: "Entité étape",
-          helper: "Ex: input_number.recette_etape",
-        },
-        {
-          name: "entry_id",
-          selector: { text: {} },
-          label: "Entry ID",
-          helper: "Optionnel — si plusieurs serveurs CookCLI",
-        },
-      ],
-    };
   }
 
   static configRequired = true;
@@ -405,8 +383,96 @@ 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();
+    }
+  }
+
+  // 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 c = this._config || {};
+
+    this.innerHTML = `
+      <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="${c.timer_entity || ""}"
+          data-config-key="timer_entity"
+          helper="Ex: timer.recette_en_cours"
+          style="width: 100%;"
+        ></ha-textfield>
+
+        <ha-textfield
+          label="Entité étape"
+          value="${c.step_entity || ""}"
+          data-config-key="step_entity"
+          helper="Ex: input_number.recette_etape"
+          style="width: 100%;"
+        ></ha-textfield>
+
+        <ha-textfield
+          label="Entry ID (optionnel)"
+          value="${c.entry_id || ""}"
+          data-config-key="entry_id"
+          helper="Laisser vide si un seul serveur CookCLI"
+          style="width: 100%;"
+        ></ha-textfield>
+      </div>
+    `;
+
+    // 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 },
+          })
+        );
+      });
+    });
+  }
+}
+
 customElements.define("ll-strategy-dashboard-cookcli", CookCliDashboardStrategy);
 customElements.define("ll-strategy-view-cookcli-recipe", CookCliRecipeViewStrategy);
+customElements.define("cookcli-strategy-editor", CookcliStrategyEditor);
 
 window.customStrategies = window.customStrategies || [];
 window.customStrategies.push({