Add buttons header-footer

src/panels/lovelace/cards/hui-entities-card.ts

@@ -14,7 +14,11 @@ import "../components/hui-entities-toggle";
 
 import { HomeAssistant } from "../../../types";
 import { LovelaceRow } from "../entity-rows/types";
-import { LovelaceCard, LovelaceCardEditor } from "../types";
+import {
+  LovelaceCard,
+  LovelaceCardEditor,
+  LovelaceHeaderFooter,
+} from "../types";
 import { processConfigEntities } from "../common/process-config-entities";
 import { createRowElement } from "../create-element/create-row-element";
 import { EntitiesCardConfig, EntitiesCardEntityConfig } from "./types";
@@ -48,6 +52,11 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
         (element as LovelaceRow).hass = hass;
       }
     );
+    this.shadowRoot!.querySelectorAll(".header-footer > *").forEach(
+      (element: unknown) => {
+        (element as LovelaceHeaderFooter).hass = hass;
+      }
+    );
     const entitiesToggle = this.shadowRoot!.querySelector(
       "hui-entities-toggle"
     );
@@ -135,6 +144,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
             this.renderEntity(entityConf)
           )}
         </div>
+
         ${this._config.footer
           ? this.renderHeaderFooter(this._config.footer, "footer")
           : ""}
@@ -192,7 +202,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
       element.hass = this._hass;
     }
     return html`
-      <div class=${className}>${element}</div>
+      <div class=${"header-footer " + className}>${element}</div>
     `;
   }
 

src/panels/lovelace/create-element/create-header-footer-element.ts

@@ -1,8 +1,9 @@
 import "../header-footer/hui-picture-header-footer";
+import "../header-footer/hui-buttons-header-footer";
 import { LovelaceHeaderFooterConfig } from "../header-footer/types";
 import { createLovelaceElement } from "./create-element-base";
 
-const SPECIAL_TYPES = new Set(["picture"]);
+const SPECIAL_TYPES = new Set(["picture", "buttons"]);
 
 export const createHeaderFooterElement = (config: LovelaceHeaderFooterConfig) =>
   createLovelaceElement("header-footer", config, SPECIAL_TYPES);

src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts

@@ -31,16 +31,16 @@ import {
   EntitiesCardConfig,
   EntitiesCardEntityConfig,
 } from "../../cards/types";
-import { pictureHeaderFooterConfigStruct } from "../../header-footer/types";
+import { headerFooterConfigStructs } from "../../header-footer/types";
 
 const cardConfigStruct = struct({
   type: "string",
   title: "string|number?",
   theme: "string?",
   show_header_toggle: "boolean?",
   entities: [entitiesConfigStruct],
-  header: struct.optional(pictureHeaderFooterConfigStruct),
-  footer: struct.optional(pictureHeaderFooterConfigStruct),
+  header: struct.optional(headerFooterConfigStructs),
+  footer: struct.optional(headerFooterConfigStructs),
 });
 
 @customElement("hui-entities-card-editor")

src/panels/lovelace/header-footer/hui-buttons-header-footer.ts

@@ -0,0 +1,127 @@
+import {
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
+} from "lit-element";
+import "@material/mwc-ripple";
+
+import "../../../components/entity/state-badge";
+import "../../../components/ha-card";
+import "../../../components/ha-icon";
+import "../components/hui-warning-element";
+
+import { HomeAssistant } from "../../../types";
+import { LovelaceHeaderFooter } from "../types";
+import { ButtonsHeaderFooterConfig } from "./types";
+import { turnOnOffEntity } from "../common/entity/turn-on-off-entity";
+import { EntityConfig } from "../entity-rows/types";
+import { processConfigEntities } from "../common/process-config-entities";
+
+@customElement("hui-buttons-header-footer")
+export class HuiGlanceCard extends LitElement implements LovelaceHeaderFooter {
+  public static getStubConfig(): object {
+    return { entities: [] };
+  }
+
+  @property() public hass?: HomeAssistant;
+
+  @property() private _config?: ButtonsHeaderFooterConfig;
+
+  private _configEntities?: EntityConfig[];
+
+  public setConfig(config: ButtonsHeaderFooterConfig): void {
+    if (!config || !Array.isArray(config.entities)) {
+      throw new Error("Entities needs to be a list of entity IDs");
+    }
+    this._config = config;
+    this._configEntities = processConfigEntities(config.entities);
+
+    if (this.hass) {
+      this.requestUpdate();
+    }
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.has("_config")) {
+      return true;
+    }
+
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+
+    if (
+      !oldHass ||
+      oldHass.themes !== this.hass!.themes ||
+      oldHass.language !== this.hass!.language
+    ) {
+      return true;
+    }
+
+    for (const entity of this._configEntities!) {
+      if (oldHass.states[entity.entity] !== this.hass!.states[entity.entity]) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  protected render(): TemplateResult | void {
+    if (!this._config || !this.hass) {
+      return html``;
+    }
+
+    return html`
+      ${this._configEntities!.map((entityConf) => {
+        const stateObj = this.hass!.states[entityConf.entity];
+        if (!stateObj) {
+          return html`<div class='missing'><iron-icon icon="hass:alert"></div>`;
+        }
+
+        return html`
+          <div>
+            <state-badge
+              @click=${this._toggle}
+              .hass=${this.hass}
+              .stateObj=${stateObj}
+              .overrideIcon=${entityConf.icon}
+              .overrideImage=${entityConf.image}
+              stateColor
+              tabindex="0"
+            ></state-badge>
+            <mwc-ripple unbounded></mwc-ripple>
+          </div>
+        `;
+      })}
+    `;
+  }
+
+  private async _toggle(ev) {
+    await turnOnOffEntity(this.hass!, ev.target.stateObj.entity_id);
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: flex;
+        justify-content: space-evenly;
+      }
+      .missing {
+        color: #fce588;
+      }
+      state-badge {
+        cursor: pointer;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-buttons-header-footer": HuiGlanceCard;
+  }
+}

src/panels/lovelace/header-footer/types.ts

@@ -1,11 +1,15 @@
 import { ActionConfig } from "../../../data/lovelace";
 import { struct } from "../common/structs/struct";
-import { actionConfigStruct } from "../editor/types";
+import { actionConfigStruct, entitiesConfigStruct } from "../editor/types";
 
 export interface LovelaceHeaderFooterConfig {
   type: string;
 }
 
+export interface ButtonsHeaderFooterConfig extends LovelaceHeaderFooterConfig {
+  entities: string[];
+}
+
 export interface PictureHeaderFooterConfig extends LovelaceHeaderFooterConfig {
   image: string;
   tap_action?: ActionConfig;
@@ -20,3 +24,13 @@ export const pictureHeaderFooterConfigStruct = struct({
   hold_action: struct.optional(actionConfigStruct),
   double_tap_action: struct.optional(actionConfigStruct),
 });
+
+export const buttonsHeaderFooterConfigStruct = struct({
+  type: "string",
+  entities: [entitiesConfigStruct],
+});
+
+export const headerFooterConfigStructs = struct.union([
+  pictureHeaderFooterConfigStruct,
+  buttonsHeaderFooterConfigStruct,
+]);