show state

esphome · Dec 23, 2024 · 3ada94f · 3ada94f
1 parent 0141c63
commit 3ada94f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/packages/v3/src/css/button.ts b/packages/v3/src/css/button.ts
@@ -27,4 +27,14 @@ export default css`
     background-color: rgba(127, 127, 127, 0.2);
     transition-duration: 1s;
   }
+
+  .abuttonIsState {
+    background-color: #28a745;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    font-size: 16px;
+    border-radius: 4px;
+    transition: background-color 0.3s ease;
+  }
 `;
diff --git a/packages/v3/src/esp-entity-table.ts b/packages/v3/src/esp-entity-table.ts
@@ -323,11 +323,12 @@ class ActionRenderer {
     return this[method]();
   }
 
-  private _actionButton(entity: entityConfig, label: string, action: string) {
+  private _actionButton(entity: entityConfig, label: string, action: string, isCurrentState: boolean = false) {
     if (!entity) return;
     let a = action || label.toLowerCase();
     return html`<button
-      class="abutton"
+      class="${isCurrentState ? 'abuttonIsState' : 'abutton'}"
+      ?disabled=${isCurrentState}
       @click=${() => this.actioner?.restAction(entity, a)}
     >
       ${label}
@@ -737,8 +738,9 @@ class ActionRenderer {
   }
   render_valve() {
     if (!this.entity) return;
-    return html`${this._actionButton(this.entity, "OPEN", "open")}
+    console.log(this.entity.state)
+    return html`${this._actionButton(this.entity, "OPEN", "open", this.entity.state === "OPEN")}
     ${this._actionButton(this.entity, "☐", "stop")}
-    ${this._actionButton(this.entity, "CLOSE", "close")}`;
+    ${this._actionButton(this.entity, "CLOSE", "close", this.entity.state === "CLOSED")}`;
   }
 }