Add grid support to climate card

piitaya · Feb 28, 2024 · d0e995e · d0e995e
1 parent 77c6305
commit d0e995e
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 26 deletions.
diff --git a/src/cards/climate-card/climate-card.ts b/src/cards/climate-card/climate-card.ts
@@ -70,7 +70,31 @@ export class ClimateCard extends MushroomBaseCard implements LovelaceCard {
 
     @state() private _activeControl?: ClimateCardControl;
 
-    @state() private _controls: ClimateCardControl[] = [];
+    @state() private _inGrid = false;
+
+    private get _stateObj(): ClimateEntity | undefined {
+        if (!this._config || !this.hass || !this._config.entity) return undefined;
+
+        const entityId = this._config.entity;
+        return this.hass.states[entityId] as ClimateEntity | undefined;
+    }
+
+    private get _controls(): ClimateCardControl[] {
+        if (!this._config || !this._stateObj) return [];
+
+        const stateObj = this._stateObj;
+        const controls: ClimateCardControl[] = [];
+
+        if (!this._config.collapsible_controls || isActive(stateObj)) {
+            if (isTemperatureControlVisible(stateObj) && this._config.show_temperature_control) {
+                controls.push("temperature_control");
+            }
+            if (isHvacModesVisible(stateObj, this._config.hvac_modes)) {
+                controls.push("hvac_mode_control");
+            }
+        }
+        return controls;
+    }
 
     _onControlTap(ctrl, e): void {
         e.stopPropagation();
@@ -91,39 +115,21 @@ export class ClimateCard extends MushroomBaseCard implements LovelaceCard {
             },
             ...config,
         };
-        this.updateControls();
+        this.updateActiveControl();
     }
 
     protected updated(changedProperties: PropertyValues) {
         super.updated(changedProperties);
         if (this.hass && changedProperties.has("hass")) {
-            this.updateControls();
+            this.updateActiveControl();
         }
     }
 
-    updateControls() {
-        if (!this._config || !this.hass || !this._config.entity) return;
-
-        const entityId = this._config.entity;
-        const stateObj = this.hass.states[entityId] as ClimateEntity | undefined;
-
-        if (!stateObj) return;
-
-        const controls: ClimateCardControl[] = [];
-        if (!this._config.collapsible_controls || isActive(stateObj)) {
-            if (isTemperatureControlVisible(stateObj) && this._config.show_temperature_control) {
-                controls.push("temperature_control");
-            }
-            if (isHvacModesVisible(stateObj, this._config.hvac_modes)) {
-                controls.push("hvac_mode_control");
-            }
-        }
-
-        this._controls = controls;
+    updateActiveControl() {
         const isActiveControlSupported = this._activeControl
-            ? controls.includes(this._activeControl)
+            ? this._controls.includes(this._activeControl)
             : false;
-        this._activeControl = isActiveControlSupported ? this._activeControl : controls[0];
+        this._activeControl = isActiveControlSupported ? this._activeControl : this._controls[0];
     }
 
     private _handleAction(ev: ActionHandlerEvent) {
@@ -167,7 +173,12 @@ export class ClimateCard extends MushroomBaseCard implements LovelaceCard {
         const rtl = computeRTL(this.hass);
 
         return html`
-            <ha-card class=${classMap({ "fill-container": appearance.fill_container })}>
+            <ha-card
+                class=${classMap({
+                    "fill-container": appearance.fill_container,
+                    "in-grid": this._inGrid,
+                })}
+            >
                 <mushroom-card .appearance=${appearance} ?rtl=${rtl}>
                     <mushroom-state-item
                         ?rtl=${rtl}
@@ -283,6 +294,26 @@ export class ClimateCard extends MushroomBaseCard implements LovelaceCard {
         }
     }
 
+    public getGridSize(): [number, number] {
+        this._inGrid = true;
+        let width = 2;
+        let height = 1;
+        if (!this._config) return [width, height];
+
+        const appearance = computeAppearance(this._config);
+        if (appearance.layout === "vertical") {
+            height += 1;
+        }
+        if (this._controls.length && !this._config?.collapsible_controls) {
+            if (appearance.layout === "horizontal") {
+                width = 4;
+            } else {
+                height += 1;
+            }
+        }
+        return [width, height];
+    }
+
     static get styles(): CSSResultGroup {
         return [
             super.styles,

diff --git a/src/shared/card.ts b/src/shared/card.ts
@@ -32,7 +32,8 @@ export class Card extends LitElement {
                 flex-shrink: 0;
                 flex-grow: 0;
                 box-sizing: border-box;
-                justify-content: center;
+                justify-content: space-between;
+                height: 100%;
             }
             .container > ::slotted(*:not(:last-child)) {
                 margin-bottom: var(--spacing);

diff --git a/src/utils/card-styles.ts b/src/utils/card-styles.ts
@@ -12,6 +12,12 @@ export const cardStyle = css`
     ha-card.fill-container {
         height: 100%;
     }
+    ha-card.in-grid {
+        height: 100%;
+    }
+    ha-card.in-grid mushroom-card {
+        height: 100%;
+    }
     .actions {
         display: flex;
         flex-direction: row;