Improve Web view for Climate components (#10)

esphome · Aug 11, 2022 · f28c61a · f28c61a
1 parent bcdde1b
commit f28c61a
Showing 1 changed file with 47 additions and 12 deletions.
diff --git a/v2/esp-entity-table.ts b/v2/esp-entity-table.ts
@@ -15,6 +15,8 @@ interface entityConfig {
   icon?: string;
   option?: string[];
   target_temperature?: Number;
+  target_temperature_low?: Number;
+  target_temperature_high?: Number;
   current_temperature?: Number;
   mode?: Number;
   speed_count?: Number;
@@ -97,7 +99,7 @@ export class EntityTable extends LitElement {
     max: Number,
     step: Number
   ) {
-    return html`<label>${min || 0}</label>
+    return html`<div class=range><label>${min || 0}</label>
       <input
         type="${entity.mode == 1 ? "number" : "range"}"
         name="${entity.unique_id}"
@@ -111,7 +113,7 @@ export class EntityTable extends LitElement {
           this.restAction(entity, `${action}?${opt}=${val}`);
         }}"
       />
-      <label>${max || 100}</label>`;
+      <label>${max || 100}</label></div>`;
   }
 
   switch(entity: entityConfig) {
@@ -184,35 +186,63 @@ export class EntityTable extends LitElement {
         entity.step
       );
     }
-    if (entity.domain === "climate")
-      return html`
-        ${entity.state}
-        <label>${entity.current_temperature}</label>
-        ${entity.target_temperature_low} ${entity.target_temperature_high}
-        <div>
+    if (entity.domain === "climate") {
+      let target_temp_slider, target_temp_label;
+      if (entity.target_temperature_low !== undefined) {
+        target_temp_label= html`${entity.target_temperature_low} .. ${entity.target_temperature_high}`;
+        target_temp_slider = html`
+          ${this.range(
+            entity,
+            "set",
+            "target_temperature_low",
+            entity.target_temperature_low,
+            entity.min_temp,
+            entity.max_temp,
+            entity.step,
+            0
+          )}
+          ${this.range(
+             entity,
+            "set",
+            "target_temperature_high",
+            entity.target_temperature_high,
+            entity.min_temp,
+            entity.max_temp,
+            entity.step,
+            0
+          )}
+        `;
+      } else {
+        target_temp_label= html`${entity.target_temperature}`;
+        target_temp_slider = html`
           ${this.range(
             entity,
             "set",
             "target_temperature",
-            entity.value,
+            entity.target_temperature,
             entity.min_temp,
             entity.max_temp,
             entity.step,
             0
           )}
-        </div>
+        `;
+      }
+      return html`
+        <label>Current: ${entity.current_temperature}, &nbsp;Target: ${target_temp_label}</label>
+        ${target_temp_slider}
         <br /><label
           >Mode:
           ${entity.modes.map(
             (mode) => html`
-      <input type="radio" name="mode" @change="${(e: Event) => {
+      <input type="radio" name="${entity.unique_id}_mode" @change="${(e: Event) => {
         let val = e.target?.value;
         this.restAction(entity, `set?mode=${val}`);
       }}"
          value="${mode}" ?checked=${entity.mode === mode}>${mode}</input> `
           )}
         </label>
       `;
+    }
     return html``;
   }
 
@@ -290,8 +320,13 @@ export class EntityTable extends LitElement {
           background-color: var(--primary-color, currentColor);
         }
         input[type="range"] {
-          width: calc(100% - 4rem);
+          width: calc(100% - 8rem);
+          height: 0.75rem;
         }
+        .range {
+          text-align: center;
+        }
+
       `,
     ];
   }