homeassistant-config/custom_frontend_sources/room-glance-card/src/room-glance-card.ts

import {LitElement, html, css, customElement, property, TemplateResult, CSSResult} from "lit-element";
import {classMap} from "lit-html/directives/class-map";
import {styleMap} from "lit-html/directives/style-map";
import {HomeAssistant} from "./home-assistant-interface";
//import '@polymer/paper-icon-button/paper-icon-button.js';
//import '@polymer/iron-icons/iron-icons.js';

@customElement("room-glance-card")
export class RoomGlanceCard extends LitElement {

    @property() public hass?: HomeAssistant;
    @property() private _config?: any;


    public setConfig(config: any) {
        //if (!config || !config.entity) {
        //   throw new Error("Invalid configuration");
        //}
        console.log("Setting config", config);
        this._config = config;
    }


    public static getCardSize(): number {
        return 3;
    }


    protected render(): TemplateResult | void {

        if(this._config.scenes.length >= 5) {
            return html`
              <ha-card>
                <img style="width: 100%; display: block" src="${this._config.image}">
                
                
                <div class="box box-top">
                 <div>${this._config.name}</div>
                  <div>
                    ${this.renderCoverControl()}
                  </div>
                </div>
                
                <div class="box box-upper">
                   <div class="title"></div>
                   <div> ${this.renderLightControl()} </div>
                </div>
    
                <div class="box box-lower">
                 <div class="title"></div>
                  <div>
                    ${this._config.scenes.map((sceneButtonCfg) => this.renderSceneButton(sceneButtonCfg))}
                  </div>
                </div>
                
              </ha-card>
            `;
        }
        else
        {
            return html`
              <ha-card>
                <img style="width: 100%; display: block" src="${this._config.image}">
                
                <div class="box box-upper">
                   <div class="title"></div>
                  <div>${this._config.name}</div>
                  <div>
                    ${this.renderCoverControl()}
                  </div>
                </div>
    
                <div class="box box-lower">
                 <div class="title"></div>
                  <div>
                    ${this._config.scenes.map((sceneButtonCfg) => this.renderSceneButton(sceneButtonCfg))}
                    ${this.renderLightControl()}
                  </div>
                </div>
                
              </ha-card>
            `;
        }
    }

    private renderSceneButton(buttonCfg: any) {
        return html`
            <ha-icon-button
              icon="${buttonCfg.icon || "mdi:checkbox-blank"}"
              title="${buttonCfg.name}"
              @click=${this.serviceHandler("scene", "turn_on", {entity_id: buttonCfg.scene})}
            >
            <ha-icon style="color: ${buttonCfg.color || ""};"
                     icon="${buttonCfg.icon || "mdi:checkbox-blank"}"></ha-icon>
            </ha-icon-button>
        `;
    }

    private renderLightControl() {
        return html`
            <ha-icon-button
              icon="mdi:close-circle"
              @click=${this.serviceHandler("light", "turn_off")}
            >
            <ha-icon icon="mdi:close-circle"></ha-icon>
            </ha-icon-button>
    
            <ha-icon-button
              icon="mdi:chevron-up"
              title="Heller"
              @click=${this.serviceHandler("dimmer", "dim", {offset: 30})}
            >
            <ha-icon icon="mdi:chevron-up"></ha-icon>
            </ha-icon-button>
          <ha-icon-button
              icon="mdi:chevron-down"
              title="Dunkler"
              @click=${this.serviceHandler("dimmer", "dim", {offset: -30})}
            >
            <ha-icon icon="mdi:chevron-down"></ha-icon>
            </ha-icon-button>`;
    }

    private renderCoverControl() {
        return html`
            <ha-icon-button 
              icon="hass:menu"
              @click=${this.serviceHandler("cover_half", "set_half")}
            >
            <ha-icon icon="hass:menu"></ha-icon>
            </ha-icon-button>
            <ha-icon-button
              icon="hass:arrow-up"
              @click=${this.serviceHandler("cover", "open_cover")}
            >
            <ha-icon icon="hass:arrow-up"></ha-icon>
            </ha-icon-button>
            <ha-icon-button
              icon="hass:stop"
              @click=${this.serviceHandler("cover", "stop_cover")}
            >
            <ha-icon icon="hass:stop"></ha-icon>
            </ha-icon-button>
            <ha-icon-button
              icon="hass:arrow-down"
              @click=${this.serviceHandler("cover", "close_cover")}
            >
            <ha-icon icon="hass:arrow-down"></ha-icon>
            </ha-icon-button>
        `;
    }

    private serviceHandler(domain: string, service: string, serviceData: { [key: string]: any } = {}) {
        const thisObj = this;
        return function (ev) {
            ev.stopPropagation();
            thisObj.callServiceForAllEntities(domain, service, serviceData);
        }
    }

    private callServiceForAllEntities(domain: string, service: string, serviceData: { [key: string]: any } = {}) {

        if (!serviceData.hasOwnProperty('entity_id')) {
            for (let entity_id of this._config!.entities) {
                serviceData['entity_id'] = entity_id;
                console.log("Calling service", domain, service, serviceData);
                this.hass!.callService(domain, service, serviceData);
            }
        } else {
            console.log("Calling service with given entity_id", domain, service, serviceData);
            this.hass!.callService(domain, service, serviceData);
        }
    }

    private _handleTap() {
        console.log("Image tap");
    }

    private _handleHold() {
        console.log("Image hold");
    }


    static get styles(): CSSResult {
        return css`
      ha-card {
        position: relative;
        min-height: 48px;
        overflow: hidden;
      }

      my-image.clickable {
        cursor: pointer;
      }
      
      .box {
        /* start paper-font-common-nowrap style */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* end paper-font-common-nowrap style */

        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        
        padding-left: 8px;
        padding-right: 8px;
      
        font-size: 16px;
        line-height: 40px;
        color: white;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: rgba(0, 0, 0, 0.3);
      }
      
      .box-top {
        bottom: 90px;
        height:45px;
        padding-top: 0px;
        padding-bottom: 0;
      }      
       
      .box-upper {
        bottom: 45px;
        height:45px;
        padding-top: 0px;
        padding-bottom: 0;
      }
      .box-lower {
        bottom: 0;
        padding-top: 0;
        padding-bottom: 0px;
        height:45px;
      }      

      .box .title {
        font-weight: 500;
        margin-left: 8px;
      }

      ha-icon {
        height: auto;
      }

      ha-icon.state-on {
        color: white;
      }
    `;
    }


}