[TASK] add new battery and disconnected devices info

Author: KartoffelToby

dist/better-thermostat-ui-card.js

@@ -1,6 +1,6 @@
 {
   "name": "better-thermostat-ui-card",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "Lovelace better-thermostat-ui",
   "keywords": [
     "home-assistant",
@@ -24,19 +24,19 @@
     "start:hass-cmd": "docker run --rm -p8123:8123 -v  %cd%/.hass_dev:/config homeassistant/home-assistant:beta"
   },
   "dependencies": {
-    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-env": "^7.22.7",
     "@mdi/js": "^7.2.96",
     "@svgdotjs/svg.js": "^3.2.0",
     "@types/gsap": "^3.0.0",
     "animejs": "^3.2.1",
     "custom-card-helpers": "^1.9.0",
     "gsap": "^3.12.2",
     "home-assistant-js-websocket": "^8.1.0",
-    "lit": "^2.7.5",
+    "lit": "^2.7.6",
     "memoize-one": "^6.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
+    "@babel/core": "^7.22.8",
     "@babel/preset-typescript": "^7.22.5",
     "@material/mwc-ripple": "^0.27.0",
     "@material/tab-bar": "^14.0.0",
@@ -47,10 +47,10 @@
     "@rollup/plugin-typescript": "^11.1.2",
     "@types/color": "^3.0.3",
     "@types/hammerjs": "^2.0.41",
-    "@types/node": "^20.3.3",
+    "@types/node": "^20.4.0",
     "eslint": "^8.44.0",
-    "prettier": "^2.8.8",
-    "rollup": "^3.26.0",
+    "prettier": "^3.0.0",
+    "rollup": "^3.26.2",
     "rollup-plugin-serve": "^2.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-import-css": "^3.3.1",

package-lock.json

@@ -33,7 +33,7 @@ const loadHaComponents = (version: string) => {
     }
 };
 
-const CLIMATE_LABELS = ["eco_temperature", "disable_window", "disable_summer", "disable_eco", "disable_heat", "disable_off", "set_current_as_main"] as string[];
+const CLIMATE_LABELS = ["eco_temperature", "disable_window", "disable_summer", "disable_eco", "disable_heat", "disable_off", "disable_menu", "set_current_as_main"] as string[];
 
 const computeSchema = memoizeOne(
     (): any[] => [
@@ -49,6 +49,7 @@ const computeSchema = memoizeOne(
                 { name: "disable_eco", selector: { boolean: {} } },
                 { name: "disable_heat", selector: { boolean: {} } },
                 { name: "disable_off", selector: { boolean: {} } },
+                { name: "disable_menu", selector: { boolean: {} } },
                 { name: "set_current_as_main", selector: { boolean: {} } },
             ],
         },

package.json

@@ -3,7 +3,6 @@ import {
   LitElement,
   html,
   css,
-  CSSResult,
   PropertyValueMap,
   svg,
   CSSResultGroup,
@@ -12,15 +11,12 @@ import {
 import {
   customElement,
   property,
-  query,
   state
 } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import {
   mdiWindowOpenVariant,
   mdiSunThermometer,
-  mdiPlus,
-  mdiMinus,
   mdiDotsVertical,
   mdiCalendarSync,
   mdiAutorenew,
@@ -31,32 +27,22 @@ import {
   mdiWaterPercent,
   mdiLeaf,
   mdiThermometer,
-  mdiHeatWave
+  mdiHeatWave,
+  mdiBatteryAlert,
+  mdiWifiStrengthOffOutline
 } from "@mdi/js";
 
-import {
-  HassEntity
-} from "home-assistant-js-websocket";
 import {
   CARD_VERSION
 } from './const';
 import {
   localize
 } from './localize/localize';
 import {
-  actionHandler,
-  ActionHandlerEvent,
   ClimateEntity,
-  computeRTL,
-  computeStateDisplay,
   fireEvent,
   formatNumber,
-  handleAction,
-  hasAction,
   HomeAssistant,
-  HvacMode,
-  isActive,
-  isAvailable,
   LovelaceCard,
   LovelaceCardEditor,
 } from "./ha";
@@ -170,6 +156,8 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
   private _display_bottom: number = 0;
   private _display_top: number = 0;
   private modes: any = [];
+  private lowBattery: any = {};
+  private error: any = [];
 
   @state() private _config?: ClimateCardConfig;
 
@@ -194,8 +182,11 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
           display: block;
           overflow: hidden;
           box-sizing: border-box;
+          position: relative;
+      }
+      .summer {
+        --mode-color: var(--label-badge-yellow)
       }
-
       ha-card {
         height: 100%;
         width: 100%;
@@ -207,6 +198,36 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
         box-sizing: border-box;
       }
 
+      .content.battery {
+        opacity: 0.5;
+        filter: blur(5px);
+        pointer-events: none;
+      }
+
+      .low_battery, .error {
+        position: absolute;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        place-content: center;
+        width: -webkit-fill-available;
+        height: -webkit-fill-available;
+        left: 0px;
+        top: 0px;
+        background: rgba(200, 200, 200, 0.16);
+        border-radius: var(--ha-card-border-radius,12px);
+        border-width: var(--ha-card-border-width,1px);
+        border-style: solid;
+        border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
+        pointer-events: all;
+        font-size: 22px;
+        text-align: center;
+        line-height: 40px;
+        padding: 1em;
+        --mdc-icon-size: 40px;
+
+      }
+
       .unavailable {
           opacity: 0.3;
       }
@@ -267,11 +288,7 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
       }
 
       .window_open {
-        --mode-color: var(--energy-grid-consumption-color)
-      }
-
-      .summer {
-        --mode-color: var(--label-badge-yellow)
+        --mode-color: #80a7c4
       }
 
       .auto,
@@ -392,7 +409,7 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
         fill: var(--label-badge-yellow);
       }
       .window.active {
-        fill: var(--energy-grid-consumption-color);
+        fill: #80a7c4;
       }
   `;
 
@@ -497,7 +514,7 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
   protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
     const that = this;
     const valueHandler: any = this?.shadowRoot?.querySelector(".value-handler");
-    const currentHandler: any = this?.shadowRoot?.querySelector(".current-handler")
+    const currentHandler: any = this?.shadowRoot?.querySelector(".current-handler");
     this?.shadowRoot?.querySelector("#c-minus")?.addEventListener("click", () => {
       clearTimeout(that._timeout);
       if (that._oldValueMin === 0) that._oldValueMin = that.value;
@@ -655,6 +672,12 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
       });
     }
     this._firstRender = false;
+
+    this?.shadowRoot?.querySelector('.low_battery')?.addEventListener('click', () => {
+      this?.shadowRoot?.querySelector('.low_battery')?.remove();
+      this?.shadowRoot?.querySelector('.content')?.classList.remove('battery');
+      this._vibrate(2);
+    });
   }
 
   public willUpdate(changedProps: PropertyValues) {
@@ -709,6 +732,27 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
           this._hasSummer = true;
           this.summer = !attributes.call_for_heat
         }
+        if (attributes?.batteries !== undefined) {
+          const batteries = Object.entries(JSON.parse(attributes.batteries));
+          const lowBatteries = batteries.filter((entity: any) => entity[1].battery < 10);
+          if (lowBatteries.length > 0) {
+            this.lowBattery = lowBatteries.map((data:any) => {return {"name": data[0], "battery": data[1].battery}})[0];
+          } else {
+            this.lowBattery = null;
+          }
+        } else {
+          this.lowBattery = null;
+        }
+        if (attributes?.errors !== undefined) {
+          const errors = JSON.parse(attributes.errors);
+          if (errors.length > 0) {
+            this.error = errors[0];
+          } else {
+            this.error = [];
+          }
+        } else {
+          this.error = [];
+        }
         this._updateDisplay();
       }
   }
@@ -782,6 +826,7 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
       [this.mode]: true,
     })}
     >
+    ${this._config?.disable_menu ? `` : html`
       <ha-icon-button
         class="more-info"
         .label=${this.hass!.localize(
@@ -791,8 +836,24 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
         @click=${this._handleMoreInfo}
         tabindex="0"
       ></ha-icon-button>
+      `}
       <div class="name">${this._config?.name}</div>
-      <div class="content ${this.window ? 'window_open': ''} ${this.summer ? 'summer': ''} ${(this?.stateObj?.attributes?.saved_temperature && this?.stateObj?.attributes?.saved_temperature !== null) ? 'eco' : ''}">
+      ${this.lowBattery !== null ? html`
+        <div class="low_battery">
+          <ha-icon-button class="alert" .path=${mdiBatteryAlert}>
+          </ha-icon-button>
+          <span>${this.lowBattery.name}</span>
+          <span>${this.lowBattery.battery}%</span>
+        </div>
+      ` : ``}
+      ${this.error.length > 0 ? html`
+        <div class="error">
+          <ha-icon-button class="alert" .path=${mdiWifiStrengthOffOutline}>
+          </ha-icon-button>
+          <span>${this.error}</span>
+        </div>
+      ` : ``}
+      <div class="content ${this.lowBattery !== null || this.error.length > 0 ? 'battery': ''} ${this.window ? 'window_open': ''}  ${(this?.stateObj?.attributes?.saved_temperature && this?.stateObj?.attributes?.saved_temperature !== null) ? 'eco' : ''} ${this.summer ? 'summer': ''} ">
             <svg id="main" viewbox="0 0 125 100">
               <g transform="translate(57.5,37) scale(0.35)">
                 ${(this._hasWindow && !this._config?.disable_window) ? svg`
@@ -887,7 +948,8 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
                 `}
 
               </div>
-      </div>
+            </div>
+          </div>
   </ha-card>
   `;
   };

src/better-thermostat-ui-card-editor.ts

@@ -33,6 +33,7 @@ export type ClimateCardConfig = LovelaceCardConfig &
         disable_eco?: boolean;
         disable_heat?: boolean;
         disable_off?: boolean;
+        disable_menu?: boolean;
         set_current_as_main?: boolean;
         eco_temperature?: number;
     };
@@ -48,5 +49,6 @@ export const climateCardConfigStruct = assign(
         disable_off: optional(boolean()),
         set_current_as_main: optional(boolean()),
         eco_temperature: optional(number()),
+        disable_menu: optional(boolean()),
     })
 );

src/better-thermostat-ui.ts

@@ -1 +1 @@
-export const CARD_VERSION = '1.0.5';
+export const CARD_VERSION = '1.1.0';

src/climate-card-config.ts

@@ -11,6 +11,7 @@
           "disable_eco": "Eco-Anzeige deaktivieren",
           "disable_heat": "Heiz-Anzeige deaktivieren",
           "disable_off": "Aus-Anzeige deaktivieren",
+          "disable_menu": "Menü deaktivieren",
           "eco_temperature": "Eco Temperatur",
           "set_current_as_main": "Zieltemperatur mit aktueller Temperatur tauschen"
         }

src/const.ts

@@ -11,6 +11,7 @@
         "disable_eco": "Disable eco",
         "disable_heat": "Disable heat",
         "disable_off": "Disable off",
+        "disable_menu": "Disable menu",
         "eco_temperature": "Eco temperature",
         "set_current_as_main": "Swap target with current temperature places"
       }