added configurable timer values

dmatik · Dec 29, 2024 · 4901293 · 4901293
1 parent cf309b2
commit 4901293
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 10 deletions.
diff --git a/dist/switcher-boiler-card-editor.js b/dist/switcher-boiler-card-editor.js
@@ -12,6 +12,12 @@ const SCHEMA = [
   { name: "time_left", selector: { entity: { domain: ["sensor"] } } },
   { name: "sensor_1", selector: { entity: { domain: ["sensor"] } } },
   { name: "sensor_2", selector: { entity: { domain: ["sensor"] } } },
+  {
+    name: "timer_values",
+    selector: {
+
+    },
+  }
 ];
 
 const fireEvent = (node, type, detail, options) => {
@@ -33,7 +39,10 @@ class SwitcherBoilerCardEditor extends LitElement {
   };
 
   setConfig(config) {
-    this._config = config;
+    this._config = {
+      ...config,
+      timer_values: (config.timer_values || ["15", "30", "45", "60"]).sort((a, b) => parseInt(a) - parseInt(b)),
+    };    
   }
 
   render() {
@@ -45,13 +54,65 @@ class SwitcherBoilerCardEditor extends LitElement {
       <ha-form
         .hass=${this.hass}
         .data=${this._config}
-        .schema=${SCHEMA}
+        .schema=${SCHEMA.filter((field) => field.name !== "timer_values")}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
-      />
+      ></ha-form>
+      ${this._renderTimerValues()}
+    `;
+  }
+
+  _renderTimerValues() {
+    const timerValues = [
+      { value: "15", label: "15" },
+      { value: "30", label: "30" },
+      { value: "45", label: "45" },
+      { value: "60", label: "60" },
+      { value: "75", label: "75" },
+      { value: "90", label: "90" },
+      { value: "105", label: "105" },
+      { value: "120", label: "120" },
+      { value: "135", label: "135" },
+      { value: "150", label: "150" },
+    ];
+
+    const selectedValues = this._config.timer_values || [];
+
+    return html`
+      <div class="timer-values-label">Timer Values (Minutes) (Optional)</div>
+      <div class="timer-values">
+        ${timerValues.map(
+          (option) => html`
+            <label>
+              <input
+                type="checkbox"
+                value="${option.value}"
+                ?checked=${selectedValues.includes(option.value)}
+                @change=${this._onTimerValueChanged}
+              />
+              ${option.label}
+            </label>
+          `
+        )}
+      </div>
     `;
   }
 
+  _onTimerValueChanged(e) {
+    const value = e.target.value;
+    const checked = e.target.checked;
+    const currentValues = this._config.timer_values || [];
+    const updatedValues = checked
+      ? [...currentValues, value]
+      : currentValues.filter((v) => v !== value);
+
+    const sortedValues = updatedValues.sort((a, b) => parseInt(a) - parseInt(b));
+
+    this._valueChanged({
+      detail: { value: { ...this._config, timer_values: sortedValues } },
+    });
+  }
+
   _valueChanged = (ev) =>
     fireEvent(this, "config-changed", { config: ev.detail.value });
 
@@ -103,6 +164,23 @@ class SwitcherBoilerCardEditor extends LitElement {
       margin-top: 8px;
       display: block;
     }
+    .timer-values {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      gap: 8px;
+      margin-top: 16px;
+    }
+    .timer-values label {
+      display: flex;
+      align-items: center;
+    }
+    .timer-values input {
+      margin-right: 8px;
+    }
+    .timer-values-label {
+      margin-top: 24px;
+      margin-bottom: 8px;
+    }      
   `;
 }
 

diff --git a/dist/switcher-boiler-card.js b/dist/switcher-boiler-card.js
@@ -9,13 +9,13 @@ class SwitcherBoilerCard extends LitElement {
   static properties = {
     hass: {},
     config: {},
-    timerValue: { type: Number },
+    timerValue: { type: String },
   };
 
   constructor() {
     super();
     this.hasError = false;
-    this.timerValue = 15;
+    this.timerValue = '15';
   }
 
   static getConfigElement() {
@@ -39,6 +39,7 @@ class SwitcherBoilerCard extends LitElement {
       throw new Error("You need to define an entity");
     }
     this.config = config;
+    this.timerValue = this.config.timer_values? this.config.timer_values[0] : '15';
   }
 
   render() {
@@ -349,8 +350,6 @@ class SwitcherBoilerCard extends LitElement {
       width: 100%;
     }
 
-
-
   `;
 
   _toggleBoiler(event) {
@@ -374,9 +373,15 @@ class SwitcherBoilerCard extends LitElement {
   _cycleTimerValue(event) {
     event.stopPropagation();
     event.preventDefault(); 
-    const timerValues = [15, 30, 45, 60];
+
+    const timerValues = this.config.timer_values ? this.config.timer_values : ['15', '30', '45', '60']; // Array of string values
     const currentIndex = timerValues.indexOf(this.timerValue);
-    this.timerValue = timerValues[(currentIndex + 1) % timerValues.length];
+
+    // Fallback to the first value if currentValue is not in the array
+    this.timerValue =
+      currentIndex === -1
+        ? timerValues[0]
+        : timerValues[(currentIndex + 1) % timerValues.length];
 
     this._rippleEffect(event);
   }
@@ -401,7 +406,7 @@ class SwitcherBoilerCard extends LitElement {
 
     // Append ripple and remove after animation
     button.appendChild(ripple);
-    setTimeout(() => ripple.remove(), 600); // Matches animation duration 
+    setTimeout(() => ripple.remove(), 1000); // Matches animation duration 
   }
 
   _showMoreInfo(event) {