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

132
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

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

@ -26,42 +26,60 @@ export class RoomGlanceCard extends LitElement {
protected render(): TemplateResult | void {
const ratio = {'w': 16, 'h': 9};
return html`
<ha-card>
<img style="width: 100%; display: block" src="${this._config.image}">
<div class="box box-upper">
<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))}
if(this._config.scenes.length >= 5) {
return html`
<ha-card>
<img style="width: 100%; display: block" src="${this._config.image}">
<paper-icon-button
icon="mdi:close-circle"
@click=${this.serviceHandler("light", "turn_off")}
></paper-icon-button>
<paper-icon-button
icon="mdi:chevron-up"
title="Heller"
@click=${this.serviceHandler("dimmer", "dim", {offset: 30})}
></paper-icon-button>
<paper-icon-button
icon="mdi:chevron-down"
title="Dunkler"
@click=${this.serviceHandler("dimmer", "dim", {offset: -30})}
></paper-icon-button>
</div>
</div>
</ha-card>
`;
<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) {
@ -75,9 +93,28 @@ export class RoomGlanceCard extends LitElement {
`;
}
private renderCoverControl() {
private renderLightControl() {
return html`
<paper-icon-button
icon="mdi:close-circle"
@click=${this.serviceHandler("light", "turn_off")}
></paper-icon-button>
<paper-icon-button
icon="mdi:chevron-up"
title="Heller"
@click=${this.serviceHandler("dimmer", "dim", {offset: 30})}
></paper-icon-button>
<paper-icon-button
icon="mdi:chevron-down"
title="Dunkler"
@click=${this.serviceHandler("dimmer", "dim", {offset: -30})}
></paper-icon-button>`;
}
private renderCoverControl() {
return html`
<paper-icon-button
icon="hass:menu"
@click=${this.serviceHandler("cover_half", "set_half")}
></paper-icon-button>
@ -162,11 +199,18 @@ export class RoomGlanceCard extends LitElement {
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;
padding-top: 4px;
height:45px;
padding-top: 0px;
padding-bottom: 0;
}
.box-lower {