[v3] Climate component (#114)

esphome · Jul 23, 2024 · 0e8dbcf · 0e8dbcf
1 parent adce439
commit 0e8dbcf
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 52 deletions.
diff --git a/packages/v3/src/css/app.ts b/packages/v3/src/css/app.ts
@@ -3,7 +3,7 @@ import { css } from "lit";
 export default css`
   .flex-grid-half {
     display: grid;
-    grid-template-columns: 600px 2fr;
+    grid-template-columns: 700px 2fr;
   }
   .flex-grid-half.expanded_entity,
   .flex-grid-half.expanded_logs {

diff --git a/packages/v3/src/css/esp-entity-table.ts b/packages/v3/src/css/esp-entity-table.ts
@@ -72,7 +72,24 @@ export default css`
     margin: auto;
     display: flex;
   }
-
+  .climate-wrap{
+    width: 100%;
+    margin: 10px 0 10px 0;
+  }
+  .climate-row {
+    width: 100%;
+    display: inline-flex;
+    flex-wrap: wrap;
+    text-align: left;
+  }
+  .climate-row > select{
+    width: 50%;
+  }
+  .climate-row > label{
+    align-content: center;
+    width: 150px;
+  }
+    
   input[type="color"]::-webkit-color-swatch-wrapper {
     padding: 0 !important;
   }

diff --git a/packages/v3/src/esp-entity-table.ts b/packages/v3/src/esp-entity-table.ts
@@ -621,65 +621,73 @@ class ActionRenderer {
 
   render_climate() {
     if (!this.entity) return;
-    let target_temp_slider, target_temp_label;
+    let target_temp_slider, target_temp_label, target_temp;
+    let current_temp = html`<div class="climate-row" style="padding-bottom: 10px";>
+                              <label>Current:&nbsp;${this.entity.current_temperature} °C</label>
+                            </div>`;
+
     if (
       this.entity.target_temperature_low !== undefined &&
       this.entity.target_temperature_high !== undefined
     ) {
-      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
-        )}
-      `;
+      target_temp = html`
+        <div class="climate-row">
+          <label>Target Low:&nbsp;</label>
+          ${this._range(
+            this.entity,
+            "set",
+            "target_temperature_low",
+            this.entity.target_temperature_low,
+            this.entity.min_temp,
+            this.entity.max_temp,
+            this.entity.step
+          )}
+        </div>
+        <div class="climate-row">
+          <label>Target High:&nbsp;</label>
+          ${this._range(
+            this.entity,
+            "set",
+            "target_temperature_high",
+            this.entity.target_temperature_high,
+            this.entity.min_temp,
+            this.entity.max_temp,
+            this.entity.step
+          )}
+        </div>`;
     } 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
-        )}
-      `;
+      target_temp = html`
+        <div class="climate-row">
+          <label>Target:&nbsp;</label>
+          ${this._range(
+            this.entity,
+            "set",
+            "target_temperature",
+            this.entity.target_temperature!!,
+            this.entity.min_temp,
+            this.entity.max_temp,
+            this.entity.step
+          )}
+        </div>`;
     }
     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`
+        <div class="climate-row">
+          <label>Mode:&nbsp;</label>
+          ${this._select(
+            this.entity,
+            "set",
+            "mode",
+            this.entity.modes || [],
+            this.entity.mode || ""
+          )}
+        </div>`;
     }
     return html`
-      <label
-        >Current:&nbsp;${this.entity.current_temperature},
-        Target:&nbsp;${target_temp_label}</label
-      >
-      ${target_temp_slider} ${modes}
+      <div class="climate-wrap">
+        ${current_temp} ${target_temp} ${modes}
+      </div>
     `;
   }
 }
diff --git a/packages/v3/src/esp-range-slider.ts b/packages/v3/src/esp-range-slider.ts
@@ -186,7 +186,8 @@ export class EspRangeSlider extends LitElement {
       cssReset,
       css`
         :host {
-          width: 100%;
+          min-width: 150px;
+          flex: 1;
         }
         input[type=range] {
           background: transparent;