From e8027288ea2b0d8d09c4c6c693e4895e5ce93cc1 Mon Sep 17 00:00:00 2001
From: Matt Green <email@mattgreen.co.uk>
Date: Sun, 21 Apr 2024 19:55:46 +0000
Subject: [PATCH] Inital commit of Climate Component for V3

---
 packages/v3/src/css/esp-entity-table.ts |  10 ++
 packages/v3/src/esp-entity-table.ts     | 192 +++++++++++++++---------
 2 files changed, 131 insertions(+), 71 deletions(-)

diff --git a/packages/v3/src/css/esp-entity-table.ts b/packages/v3/src/css/esp-entity-table.ts
index ee62f5a..66015f1 100644
--- a/packages/v3/src/css/esp-entity-table.ts
+++ b/packages/v3/src/css/esp-entity-table.ts
@@ -72,4 +72,14 @@ export default css`
   input[type="color"]::-webkit-color-swatch-wrapper {
     padding: 0 !important;
   }
+
+  .climate {
+    width: 100%;
+    display: grid;
+    text-align: center;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 6px;
+    padding: 10px;
+    align-items: center;
+  }
 `;
diff --git a/packages/v3/src/esp-entity-table.ts b/packages/v3/src/esp-entity-table.ts
index 3f9814d..355af41 100644
--- a/packages/v3/src/esp-entity-table.ts
+++ b/packages/v3/src/esp-entity-table.ts
@@ -38,6 +38,8 @@ interface entityConfig {
   current_temperature?: number;
   modes?: number[];
   mode?: number;
+  presets?: number[];
+  preset?: number;
   speed_count?: number;
   speed_level?: number;
   speed: string;
@@ -91,8 +93,12 @@ export class EntityTable extends LitElement implements RestAction {
           unique_id: data.id,
           id: parts.slice(1).join("-"),
           entity_category: data.entity_category,
-          value_numeric_history: [data.value],
         } as entityConfig;
+        if (typeof data.value === "number") {
+          entity.value_numeric_history = [data.value];
+        } else if (data.current_temperature) {
+          entity.value_numeric_history = [Number(data.current_temperature)];
+        }
         entity.has_action = this.hasAction(entity);
         if (entity.has_action) {
           this.has_controls = true;
@@ -109,11 +115,13 @@ export class EntityTable extends LitElement implements RestAction {
         );
         this.requestUpdate();
       } else {
+        let history = [...this.entities[idx].value_numeric_history];
         if (typeof data.value === "number") {
-          let history = [...this.entities[idx].value_numeric_history];
           history.push(data.value);
-          this.entities[idx].value_numeric_history = history.splice(-50);
+        } else if (data.current_temperature) {
+          history.push(Number(data.current_temperature));
         }
+        this.entities[idx].value_numeric_history = history.splice(-50);
 
         delete data.id;
         delete data.domain;
@@ -211,7 +219,8 @@ export class EntityTable extends LitElement implements RestAction {
                         ? this.control(component)
                         : html`<div>${component.state}</div>`}
                     </div>
-                    ${component.domain === "sensor"
+                    ${component.domain === "sensor" ||
+                    component.domain === "climate"
                       ? html`<esp-entity-chart
                           .chartdata="${component.value_numeric_history}"
                         ></esp-entity-chart>`
@@ -232,7 +241,10 @@ export class EntityTable extends LitElement implements RestAction {
   }
 
   _handleEntityRowClick(e: any) {
-    if (e?.currentTarget?.domain === "sensor") {
+    if (
+      e?.currentTarget?.domain === "sensor" ||
+      e?.currentTarget?.domain === "climate"
+    ) {
       if (!e?.ctrlKey) e.stopPropagation();
       e?.currentTarget?.classList.toggle(
         "expanded",
@@ -271,30 +283,75 @@ class ActionRenderer {
     </button>`;
   }
 
+  private _tempSelector(entity: entityConfig, target: string) {
+    if (!entity) return;
+    let targetTemp =
+      target === "high"
+        ? entity.target_temperature_high
+        : entity.target_temperature || entity.target_temperature_low;
+    let upValue =
+      target === "high"
+        ? Number(entity.target_temperature_high) + Number(entity.step)
+        : Number(entity.target_temperature || entity.target_temperature_low) +
+          Number(entity.step);
+    let downValue =
+      target === "high"
+        ? Number(entity.target_temperature_high) - Number(entity.step)
+        : Number(entity.target_temperature || entity.target_temperature_low) -
+          Number(entity.step);
+    upValue =
+      upValue > Number(entity.max_temp) ? Number(entity.max_temp) : upValue;
+    downValue =
+      downValue > Number(entity.max_temp) ? Number(entity.max_temp) : downValue;
+
+    let upAction = target
+      ? `set?target_temperature_${target}=${upValue}`
+      : `set?target_temperature=${upValue}`;
+    let downAction = target
+      ? `set?target_temperature_${target}=${downValue}`
+      : `set?target_temperature=${downValue}`;
+
+    return html`<button
+        class="abutton"
+        @click=${(e: Event) => {
+          e.stopPropagation();
+          this.actioner?.restAction(entity, upAction);
+        }}
+      >
+        🔺</button
+      ><br />
+      <label>${targetTemp}</label><br />
+      <button
+        class="abutton"
+        @click=${(e: Event) => {
+          e.stopPropagation();
+          this.actioner?.restAction(entity, downAction);
+        }}
+      >
+        🔻
+      </button> `;
+  }
+
   private _date(
     entity: entityConfig,
     action: string,
     opt: string,
-    value: string,
+    value: string
   ) {
     return html`
-      <input 
-        type="date" 
+      <input
+        type="date"
         name="${entity.unique_id}"
         id="${entity.unique_id}"
         value="${value}"
         @change="${(e: Event) => {
           const val = (<HTMLTextAreaElement>e.target)?.value;
-          this.actioner?.restAction(
-            entity,
-            `${action}?${opt}=${val}`
-          );
+          this.actioner?.restAction(entity, `${action}?${opt}=${val}`);
         }}"
       />
     `;
   }
 
-
   private _switch(entity: entityConfig) {
     return html`<esp-switch
       color="var(--primary-color,currentColor)"
@@ -314,7 +371,11 @@ class ActionRenderer {
     val: string | number | undefined
   ) {
     return html`<select
+      @click=${(e: Event) => {
+        e.stopPropagation();
+      }}
       @change="${(e: Event) => {
+        e.stopPropagation();
         const val = (<HTMLTextAreaElement>e.target)?.value;
         this.actioner?.restAction(
           entity,
@@ -342,7 +403,7 @@ class ActionRenderer {
     max?: string | undefined,
     step = 1
   ) {
-    if(entity.mode == 1) {
+    if (entity.mode == 1) {
       return html`<div class="range">
         <label>${min || 0}</label>
         <input
@@ -359,22 +420,23 @@ class ActionRenderer {
           }}"
         />
         <label>${max || 100}</label>
-      </div>`;      
+      </div>`;
     } else {
-      return html`    
-      <esp-range-slider
+      return html` <esp-range-slider
         name="${entity.unique_id}"
         step="${step}"
         min="${min}"
         max="${max}"
         value="${value}"
         @state="${(e: CustomEvent) => {
-            const val = (<HTMLTextAreaElement>e.target)?.value;
-            this.actioner?.restAction(entity, `${action}?${opt}=${e.detail.state}`);
-          }}"
+          const val = (<HTMLTextAreaElement>e.target)?.value;
+          this.actioner?.restAction(
+            entity,
+            `${action}?${opt}=${e.detail.state}`
+          );
+        }}"
       ></esp-range-slider>`;
     }
-
   }
 
   private _textinput(
@@ -444,12 +506,7 @@ class ActionRenderer {
   render_date() {
     if (!this.entity) return;
     return html`
-      ${this._date(
-        this.entity,
-        "set",
-        "value",
-        this.entity.value,
-      )}
+      ${this._date(this.entity, "set", "value", this.entity.value)}
       ${this.entity.uom}
     `;
   }
@@ -584,57 +641,50 @@ class ActionRenderer {
       target_temp_label = html`${this.entity
         .target_temperature_low}&nbsp;..&nbsp;${this.entity
         .target_temperature_high}`;
-      target_temp_slider = html`
-        ${this._range(
-          this.entity,
-          "set",
-          "target_temperature_low",
-          this.entity.target_temperature_low,
-          this.entity.min_temp,
-          this.entity.max_temp,
-          this.entity.step
-        )}
-        ${this._range(
-          this.entity,
-          "set",
-          "target_temperature_high",
-          this.entity.target_temperature_high,
-          this.entity.min_temp,
-          this.entity.max_temp,
-          this.entity.step
-        )}
-      `;
     } else {
       target_temp_label = html`${this.entity.target_temperature}`;
-      target_temp_slider = html`
-        ${this._range(
-          this.entity,
-          "set",
-          "target_temperature",
-          this.entity.target_temperature!!,
-          this.entity.min_temp,
-          this.entity.max_temp,
-          this.entity.step
-        )}
-      `;
     }
     let modes = html``;
     if ((this.entity.modes ? this.entity.modes.length : 0) > 0) {
-      modes = html`Mode:<br />
-        ${this._select(
-          this.entity,
-          "set",
-          "mode",
-          this.entity.modes || [],
-          this.entity.mode || ""
-        )}`;
+      modes = html` ${this._select(
+        this.entity,
+        "set",
+        "mode",
+        this.entity.modes || [],
+        this.entity.mode || ""
+      )}`;
+    }
+    let presets = html``;
+    if ((this.entity.presets ? this.entity.presets.length : 0) > 0) {
+      presets = html` ${this._select(
+        this.entity,
+        "set",
+        "preset",
+        this.entity.presets || [],
+        this.entity.preset || ""
+      )}`;
     }
+
     return html`
-      <label
-        >Current:&nbsp;${this.entity.current_temperature},
-        Target:&nbsp;${target_temp_label}</label
-      >
-      ${target_temp_slider} ${modes}
+      <section class="climate">
+        <div>
+          ${this._tempSelector(
+            this.entity,
+            this.entity.target_temperature_low ? "low" : ""
+          )}
+        </div>
+        <div>
+          <label><strong>${this.entity.current_temperature}</strong></label>
+        </div>
+        <div>
+          ${this.entity.target_temperature_high
+            ? this._tempSelector(this.entity, "high")
+            : ""}
+        </div>
+        <div>${modes}</div>
+        <div>${this.entity.state}</div>
+        <div>${presets}</div>
+      </section>
     `;
   }
 }