martin
/
homeassistant-config
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Room glance card: optional three rows when too many scenes

This commit is contained in:
Martin Bauer 2020-04-19 11:20:24 +02:00
parent 44835e0fa2
commit b6b6b3cec6
2 changed files with 164 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
custom_frontend_sources/room-glance-card/dist/room-glance-card.js vendored
View File

File diff suppressed because one or more lines are too long

82
custom_frontend_sources/room-glance-card/src/room-glance-card.ts
View File

@ -26,12 +26,43 @@ export class RoomGlanceCard extends LitElement {
protected render(): TemplateResult | void { protected render(): TemplateResult | void {
const ratio = {'w': 16, 'h': 9};
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` return html`
<ha-card> <ha-card>
<img style="width: 100%; display: block" src="${this._config.image}"> <img style="width: 100%; display: block" src="${this._config.image}">
<div class="box box-upper"> <div class="box box-upper">
<div class="title"></div>
<div>${this._config.name}</div> <div>${this._config.name}</div>
<div> <div>
${this.renderCoverControl()} ${this.renderCoverControl()}
@ -42,7 +73,28 @@ export class RoomGlanceCard extends LitElement {
<div class="title"></div> <div class="title"></div>
<div> <div>
${this._config.scenes.map((sceneButtonCfg) => this.renderSceneButton(sceneButtonCfg))} ${this._config.scenes.map((sceneButtonCfg) => this.renderSceneButton(sceneButtonCfg))}
${this.renderLightControl()}
</div>
</div>
</ha-card>
`;
}
}
private renderSceneButton(buttonCfg: any) {
return html`
<paper-icon-button
icon="${buttonCfg.icon || "mdi:checkbox-blank"}"
style="color: ${buttonCfg.color || ""};"
title="${buttonCfg.name}"
@click=${this.serviceHandler("scene", "turn_on", {entity_id: buttonCfg.scene})}
></paper-icon-button>
`;
}
private renderLightControl() {
return html`
<paper-icon-button <paper-icon-button
icon="mdi:close-circle" icon="mdi:close-circle"
@click=${this.serviceHandler("light", "turn_off")} @click=${this.serviceHandler("light", "turn_off")}
@ -57,22 +109,7 @@ export class RoomGlanceCard extends LitElement {
icon="mdi:chevron-down" icon="mdi:chevron-down"
title="Dunkler" title="Dunkler"
@click=${this.serviceHandler("dimmer", "dim", {offset: -30})} @click=${this.serviceHandler("dimmer", "dim", {offset: -30})}
></paper-icon-button> ></paper-icon-button>`;
</div>
</div>
</ha-card>
`;
}
private renderSceneButton(buttonCfg: any) {
return html`
<paper-icon-button
icon="${buttonCfg.icon || "mdi:checkbox-blank"}"
style="color: ${buttonCfg.color || ""};"
title="${buttonCfg.name}"
@click=${this.serviceHandler("scene", "turn_on", {entity_id: buttonCfg.scene})}
></paper-icon-button>
`;
} }
private renderCoverControl() { private renderCoverControl() {
@ -163,10 +200,17 @@ export class RoomGlanceCard extends LitElement {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
.box-upper { .box-top {
bottom: 90px;
height:45px;
padding-top: 0px;
padding-bottom: 0;
}
.box-upper {
bottom: 45px; bottom: 45px;
padding-top: 4px; height:45px;
padding-top: 0px;
padding-bottom: 0; padding-bottom: 0;
} }
.box-lower { .box-lower {