fix(cards): give the Family Goal and Photo Gallery cards a visual editor

custom_components/taskmate/www/editors/taskmate-family-goal-card-editor.js

@@ -0,0 +1,133 @@
+/**
+ * TaskMate family goal card editor (visual card editor).
+ *
+ * Loaded on demand by taskmate-family-goal-card.js getConfigElement(), so a dashboard
+ * never downloads or parses it until someone opens the card editor.
+ */
+
+const LitElement = customElements.get("hui-masonry-view")
+  ? Object.getPrototypeOf(customElements.get("hui-masonry-view"))
+  : Object.getPrototypeOf(customElements.get("hui-view"));
+
+const html = LitElement.prototype.html;
+const css = LitElement.prototype.css;
+
+// Shared with taskmate-family-goal-card.js; tests/frontend/taskmate-lazy-editors.test.cjs keeps the copies equal.
+const DEFAULT_ACCENT = "#16a085";
+
+class TaskMateFamilyGoalCardEditor extends LitElement {
+  static get properties() {
+    return { hass: { type: Object }, config: { type: Object } };
+  }
+
+  static get styles() {
+    return css`
+      :host { display: block; }
+      ha-form { display: block; margin-bottom: 16px; }
+    `;
+  }
+
+  _t(key, params) {
+    const fn = window.__taskmate_localize;
+    return fn ? fn(this.hass, key, params) : key;
+  }
+
+  setConfig(config) { this.config = config; }
+
+  _buildSchema() {
+    return [
+      { name: "entity", selector: { entity: { domain: "sensor" } } },
+      { name: "title", selector: { text: {} } },
+      {
+        name: "card_design",
+        selector: {
+          select: {
+            options: window.__taskmate_design
+              ? window.__taskmate_design.editorOptions(this._t.bind(this))
+              : [{ value: "global", label: "Use global default" }],
+            mode: "dropdown",
+          },
+        },
+      },
+    ];
+  }
+
+  _computeLabel = (entry) => {
+    const labels = {
+      entity: this._t("common.editor.overview_entity"),
+      title: this._t("common.editor.card_title"),
+      card_design: this._t("common.design.field_label"),
+    };
+    return labels[entry.name] ?? entry.name;
+  };
+
+  _computeHelper = (entry) => {
+    const helpers = {
+      entity: this._t("common.editor.overview_entity_helper"),
+      title: this._t("family_goal.editor.title_helper"),
+    };
+    return helpers[entry.name] ?? "";
+  };
+
+  render() {
+    if (!this.hass || !this.config) return html``;
+    const data = {
+      entity: this.config.entity || "",
+      title: this.config.title || "",
+      card_design: this.config.card_design || "global",
+    };
+    return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${data}
+        .schema=${this._buildSchema()}
+        .computeLabel=${this._computeLabel}
+        .computeHelper=${this._computeHelper}
+        @value-changed=${this._formChanged}
+      ></ha-form>
+      ${this._renderColourPicker("header_color", DEFAULT_ACCENT)}
+    `;
+  }
+
+  _renderColourPicker(key, defaultValue) {
+    const d = window.__taskmate_design;
+    const current = this.config[key] || defaultValue;
+    if (!d || !d.colourPicker) return html``;
+    return d.colourPicker({
+      defaultValue, current,
+      label: this._t("common.editor.header_colour"),
+      helper: this._t("common.editor.header_colour_helper"),
+      resetLabel: this._t("common.reset"),
+      onInput: (v) => this._updateConfig(key, v),
+      onPreset: (v) => this._updateConfig(key, v),
+      onReset: () => this._updateConfig(key, defaultValue),
+    });
+  }
+
+  _formChanged(e) {
+    const newValues = e.detail.value || {};
+    const newConfig = { ...this.config };
+    for (const [key, value] of Object.entries(newValues)) {
+      if (value === "" || value === null || value === undefined || (key === "card_design" && value === "global")) {
+        delete newConfig[key];
+      } else {
+        newConfig[key] = value;
+      }
+    }
+    this.dispatchEvent(new CustomEvent("config-changed", {
+      detail: { config: newConfig }, bubbles: true, composed: true,
+    }));
+  }
+
+  _updateConfig(key, value) {
+    const newConfig = { ...this.config, [key]: value };
+    if (value === null || value === "" || value === undefined) delete newConfig[key];
+    this.dispatchEvent(new CustomEvent("config-changed", {
+      detail: { config: newConfig }, bubbles: true, composed: true,
+    }));
+  }
+}
+
+if (!customElements.get("taskmate-family-goal-card-editor")) {
+  customElements.define("taskmate-family-goal-card-editor", TaskMateFamilyGoalCardEditor);
+}

custom_components/taskmate/www/editors/taskmate-photo-gallery-card-editor.js

@@ -0,0 +1,138 @@
+/**
+ * TaskMate photo gallery card editor (visual card editor).
+ *
+ * Loaded on demand by taskmate-photo-gallery-card.js getConfigElement(), so a dashboard
+ * never downloads or parses it until someone opens the card editor.
+ */
+
+const LitElement = customElements.get("hui-masonry-view")
+  ? Object.getPrototypeOf(customElements.get("hui-masonry-view"))
+  : Object.getPrototypeOf(customElements.get("hui-view"));
+
+const html = LitElement.prototype.html;
+const css = LitElement.prototype.css;
+
+// Shared with taskmate-photo-gallery-card.js; tests/frontend/taskmate-lazy-editors.test.cjs keeps the copies equal.
+const DEFAULT_ACCENT = "#5d6d7e";
+
+class TaskMatePhotoGalleryCardEditor extends LitElement {
+  static get properties() {
+    return { hass: { type: Object }, config: { type: Object } };
+  }
+
+  static get styles() {
+    return css`
+      :host { display: block; }
+      ha-form { display: block; margin-bottom: 16px; }
+    `;
+  }
+
+  _t(key, params) {
+    const fn = window.__taskmate_localize;
+    return fn ? fn(this.hass, key, params) : key;
+  }
+
+  setConfig(config) { this.config = config; }
+
+  _buildSchema() {
+    return [
+      { name: "entity", selector: { entity: { domain: "sensor" } } },
+      { name: "title", selector: { text: {} } },
+      { name: "max", selector: { number: { min: 1, max: 200, step: 1, mode: "box" } } },
+      {
+        name: "card_design",
+        selector: {
+          select: {
+            options: window.__taskmate_design
+              ? window.__taskmate_design.editorOptions(this._t.bind(this))
+              : [{ value: "global", label: "Use global default" }],
+            mode: "dropdown",
+          },
+        },
+      },
+    ];
+  }
+
+  _computeLabel = (entry) => {
+    const labels = {
+      entity: this._t("gallery.editor.entity"),
+      title: this._t("common.editor.card_title"),
+      max: this._t("gallery.editor.max"),
+      card_design: this._t("common.design.field_label"),
+    };
+    return labels[entry.name] ?? entry.name;
+  };
+
+  _computeHelper = (entry) => {
+    const helpers = {
+      entity: this._t("gallery.editor.entity_helper"),
+      title: this._t("gallery.editor.title_helper"),
+      max: this._t("gallery.editor.max_helper"),
+    };
+    return helpers[entry.name] ?? "";
+  };
+
+  render() {
+    if (!this.hass || !this.config) return html``;
+    const data = {
+      entity: this.config.entity || "",
+      title: this.config.title || "",
+      card_design: this.config.card_design || "global",
+    };
+    // Unset means every photo; ha-form shows an empty box rather than a number.
+    if (this.config.max) data.max = Number(this.config.max);
+    return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${data}
+        .schema=${this._buildSchema()}
+        .computeLabel=${this._computeLabel}
+        .computeHelper=${this._computeHelper}
+        @value-changed=${this._formChanged}
+      ></ha-form>
+      ${this._renderColourPicker("header_color", DEFAULT_ACCENT)}
+    `;
+  }
+
+  _renderColourPicker(key, defaultValue) {
+    const d = window.__taskmate_design;
+    const current = this.config[key] || defaultValue;
+    if (!d || !d.colourPicker) return html``;
+    return d.colourPicker({
+      defaultValue, current,
+      label: this._t("common.editor.header_colour"),
+      helper: this._t("common.editor.header_colour_helper"),
+      resetLabel: this._t("common.reset"),
+      onInput: (v) => this._updateConfig(key, v),
+      onPreset: (v) => this._updateConfig(key, v),
+      onReset: () => this._updateConfig(key, defaultValue),
+    });
+  }
+
+  _formChanged(e) {
+    const newValues = e.detail.value || {};
+    const newConfig = { ...this.config };
+    for (const [key, value] of Object.entries(newValues)) {
+      if (value === "" || value === null || value === undefined || (key === "card_design" && value === "global")) {
+        delete newConfig[key];
+      } else {
+        newConfig[key] = value;
+      }
+    }
+    this.dispatchEvent(new CustomEvent("config-changed", {
+      detail: { config: newConfig }, bubbles: true, composed: true,
+    }));
+  }
+
+  _updateConfig(key, value) {
+    const newConfig = { ...this.config, [key]: value };
+    if (value === null || value === "" || value === undefined) delete newConfig[key];
+    this.dispatchEvent(new CustomEvent("config-changed", {
+      detail: { config: newConfig }, bubbles: true, composed: true,
+    }));
+  }
+}
+
+if (!customElements.get("taskmate-photo-gallery-card-editor")) {
+  customElements.define("taskmate-photo-gallery-card-editor", TaskMatePhotoGalleryCardEditor);
+}

custom_components/taskmate/www/locales/da.json

@@ -2750,6 +2750,11 @@
   "gallery.default_title": "Billedgalleri",
   "gallery.empty": "Ingen bevisbilleder endnu",
   "gallery.pending": "afventer",
+  "gallery.editor.entity": "Aktivitetsentitet",
+  "gallery.editor.entity_helper": "TaskMate-aktivitetssensoren – billederne kommer fra dens historik",
+  "gallery.editor.max": "Antal billeder",
+  "gallery.editor.max_helper": "Lad feltet stå tomt for at vise alle billeder",
+  "gallery.editor.title_helper": "Lad feltet stå tomt for standardtitlen",
   "panel.allowance_title": "Lommepenge",
   "panel.allowance_hint": "Omregn point til lommepenge i rigtige penge. Registrer udbetalinger med servicen record_allowance_payout eller en knap på et dashboard.",
   "panel.allowance_enabled": "Slå udbetaling af lommepenge til",
@@ -2761,6 +2766,7 @@
   "family_goal.disabled": "Intet familiemål sat",
   "family_goal.reward_label": "Belønning: {reward}",
   "family_goal.reached": "Målet er nået! {reward}",
+  "family_goal.editor.title_helper": "Lad feltet stå tomt for at vise målets navn",
   "wishlist.title": "{name}s ønskeliste",
   "wishlist.subtitle": "Sparer op",
   "wishlist.add": "Tilføj et ønske",

custom_components/taskmate/www/locales/de.json

@@ -2806,6 +2806,11 @@
   "gallery.default_title": "Fotogalerie",
   "gallery.empty": "Noch keine Nachweisfotos",
   "gallery.pending": "ausstehend",
+  "gallery.editor.entity": "Aktivitätseinheit",
+  "gallery.editor.entity_helper": "Der TaskMate-Aktivitätssensor – aus seinem Verlauf stammen die Fotos",
+  "gallery.editor.max": "Anzahl Fotos",
+  "gallery.editor.max_helper": "Leer lassen, um alle Fotos anzuzeigen",
+  "gallery.editor.title_helper": "Leer lassen für den Standardtitel",
   "panel.allowance_title": "Taschengeld",
   "panel.allowance_hint": "Punkte in echtes Taschengeld umwandeln. Auszahlungen über den Dienst record_allowance_payout oder eine Dashboard-Schaltfläche erfassen.",
   "panel.allowance_enabled": "Taschengeld-Auszahlungen aktivieren",
@@ -2817,6 +2822,7 @@
   "family_goal.disabled": "Kein Familienziel festgelegt",
   "family_goal.reward_label": "Belohnung: {reward}",
   "family_goal.reached": "Ziel erreicht! {reward}",
+  "family_goal.editor.title_helper": "Leer lassen, um den Namen des Ziels anzuzeigen",
   "wishlist.title": "Wunschliste von {name}",
   "wishlist.subtitle": "Am Sparen",
   "wishlist.add": "Wunsch hinzufügen",

custom_components/taskmate/www/locales/en-GB.json

@@ -2811,6 +2811,11 @@
   "gallery.default_title": "Photo gallery",
   "gallery.empty": "No evidence photos yet",
   "gallery.pending": "pending",
+  "gallery.editor.entity": "Activity Entity",
+  "gallery.editor.entity_helper": "The TaskMate activity sensor — the photos come from its history",
+  "gallery.editor.max": "Photos to show",
+  "gallery.editor.max_helper": "Leave blank to show every photo",
+  "gallery.editor.title_helper": "Leave blank for the default title",
   "panel.allowance_title": "Allowance",
   "panel.allowance_hint": "Convert points to a real-money allowance. Record payouts via the record_allowance_payout service or a dashboard button.",
   "panel.allowance_enabled": "Enable allowance payouts",
@@ -2822,6 +2827,7 @@
   "family_goal.disabled": "No family goal set",
   "family_goal.reward_label": "Reward: {reward}",
   "family_goal.reached": "Goal reached! {reward}",
+  "family_goal.editor.title_helper": "Leave blank to show the goal's name",
   "wishlist.title": "{name}'s Wishlist",
   "wishlist.subtitle": "Saving up",
   "wishlist.add": "Add a wish",

custom_components/taskmate/www/locales/en.json

@@ -2811,6 +2811,11 @@
   "gallery.default_title": "Photo gallery",
   "gallery.empty": "No evidence photos yet",
   "gallery.pending": "pending",
+  "gallery.editor.entity": "Activity Entity",
+  "gallery.editor.entity_helper": "The TaskMate activity sensor — the photos come from its history",
+  "gallery.editor.max": "Photos to show",
+  "gallery.editor.max_helper": "Leave blank to show every photo",
+  "gallery.editor.title_helper": "Leave blank for the default title",
   "panel.allowance_title": "Allowance",
   "panel.allowance_hint": "Convert points to a real-money allowance. Record payouts via the record_allowance_payout service or a dashboard button.",
   "panel.allowance_enabled": "Enable allowance payouts",
@@ -2822,6 +2827,7 @@
   "family_goal.disabled": "No family goal set",
   "family_goal.reward_label": "Reward: {reward}",
   "family_goal.reached": "Goal reached! {reward}",
+  "family_goal.editor.title_helper": "Leave blank to show the goal's name",
   "wishlist.title": "{name}'s Wishlist",
   "wishlist.subtitle": "Saving up",
   "wishlist.add": "Add a wish",

custom_components/taskmate/www/locales/fr.json

@@ -2811,6 +2811,11 @@
   "gallery.default_title": "Galerie photo",
   "gallery.empty": "Aucune photo de preuve pour l'instant",
   "gallery.pending": "en attente",
+  "gallery.editor.entity": "Entité d'activité",
+  "gallery.editor.entity_helper": "Le capteur d'activité TaskMate — les photos viennent de son historique",
+  "gallery.editor.max": "Photos à afficher",
+  "gallery.editor.max_helper": "Laisser vide pour afficher toutes les photos",
+  "gallery.editor.title_helper": "Laisser vide pour le titre par défaut",
   "panel.allowance_title": "Argent de poche",
   "panel.allowance_hint": "Convertir les points en argent de poche réel. Enregistrez les versements via le service record_allowance_payout ou un bouton du tableau de bord.",
   "panel.allowance_enabled": "Activer les versements",
@@ -2822,6 +2827,7 @@
   "family_goal.disabled": "Aucun objectif familial défini",
   "family_goal.reward_label": "Récompense : {reward}",
   "family_goal.reached": "Objectif atteint ! {reward}",
+  "family_goal.editor.title_helper": "Laisser vide pour afficher le nom de l'objectif",
   "wishlist.title": "Liste de souhaits de {name}",
   "wishlist.subtitle": "J'économise",
   "wishlist.add": "Ajouter un souhait",

custom_components/taskmate/www/locales/nb.json

@@ -2811,6 +2811,11 @@
   "gallery.default_title": "Fotogalleri",
   "gallery.empty": "Ingen bevisbilder ennå",
   "gallery.pending": "venter",
+  "gallery.editor.entity": "Aktivitetsentitet",
+  "gallery.editor.entity_helper": "TaskMate-aktivitetssensoren – bildene hentes fra historikken",
+  "gallery.editor.max": "Antall bilder",
+  "gallery.editor.max_helper": "La stå tomt for å vise alle bilder",
+  "gallery.editor.title_helper": "La stå tomt for standardtittelen",
   "panel.allowance_title": "Lommepenger",
   "panel.allowance_hint": "Gjør poeng om til ekte lommepenger. Registrer utbetalinger via tjenesten record_allowance_payout eller en dashbord-knapp.",
   "panel.allowance_enabled": "Aktiver lommepenge-utbetalinger",
@@ -2822,6 +2827,7 @@
   "family_goal.disabled": "Ingen familiemål satt",
   "family_goal.reward_label": "Belønning: {reward}",
   "family_goal.reached": "Målet er nådd! {reward}",
+  "family_goal.editor.title_helper": "La stå tomt for å vise navnet på målet",
   "wishlist.title": "Ønskelisten til {name}",
   "wishlist.subtitle": "Sparer opp",
   "wishlist.add": "Legg til et ønske",