jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-11 19:36:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Thermostat fix (#1867)

Browse Source 
* Thermostat fix

* Fix for unknown operation mode

* No title for you

* I suck at removing unnecessary things

* Fixing pointless Ternary operator
This commit is contained in:
Zack Arnett 2018-10-27 04:59:33 -04:00 committed by Paulus Schoutsen
parent 13c5724d7c
commit 0b504c7df2
1 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/panels/lovelace/cards/hui-thermostat-card.ts
View File

@ -9,6 +9,7 @@ import { roundSliderStyle } from "../../../resources/jquery.roundslider";
import { HomeAssistant } from "../../../types.js"; import { HomeAssistant } from "../../../types.js";
import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
import { LovelaceCard, LovelaceConfig } from "../types.js"; import { LovelaceCard, LovelaceConfig } from "../types.js";
import computeStateName from "../../../common/entity/compute_state_name.js";
const thermostatConfig = { const thermostatConfig = {
radius: 150, radius: 150,
@ -66,18 +67,21 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
} }
const stateObj = this.hass.states[this.config.entity]; const stateObj = this.hass.states[this.config.entity];
const broadCard = this.clientWidth > 390; const broadCard = this.clientWidth > 390;
const mode = modeIcons[stateObj.attributes.operation_mode]
? stateObj.attributes.operation_mode
: "unknown-mode";
return html` return html`
${this.renderStyle()} ${this.renderStyle()}
<ha-card <ha-card
class="${classMap({ class="${classMap({
[stateObj.attributes.operation_mode]: true, [mode]: true,
large: broadCard, large: broadCard,
small: !broadCard, small: !broadCard,
})}"> })}">
<div id="root"> <div id="root">
<div id="thermostat"></div> <div id="thermostat"></div>
<div id="tooltip"> <div id="tooltip">
<div class="title">Upstairs</div> <div class="title">${computeStateName(stateObj)}</div>
<div class="current-temperature"> <div class="current-temperature">
<span class="current-temperature-text">${ <span class="current-temperature-text">${
stateObj.attributes.current_temperature stateObj.attributes.current_temperature
@ -94,7 +98,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
)}</div> )}</div>
<div class="modes"> <div class="modes">
${stateObj.attributes.operation_list.map((modeItem) => ${stateObj.attributes.operation_list.map((modeItem) =>
this._renderIcon(modeItem, stateObj.attributes.operation_mode) this._renderIcon(modeItem, mode)
)} )}
</div> </div>
</div> </div>
@ -105,10 +109,10 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
protected shouldUpdate(changedProps) { protected shouldUpdate(changedProps) {
if (changedProps.get("hass")) { if (changedProps.get("hass")) {
return changedProps.get("hass").states[this.config!.entity] !== return (
changedProps.get("hass").states[this.config!.entity] !==
this.hass!.states[this.config!.entity] this.hass!.states[this.config!.entity]
? true );
: false;
} }
return changedProps; return changedProps;
} }
@ -178,6 +182,12 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
.off { .off {
--mode-color: #8a8a8a; --mode-color: #8a8a8a;
} }
.unknown-mode {
--mode-color: #bac;
}
.no-title {
--title-margin-top: 33% !important;
}
.large { .large {
--thermostat-padding-top: 25px; --thermostat-padding-top: 25px;
--thermostat-margin-bottom: 25px; --thermostat-margin-bottom: 25px;
@ -324,6 +334,9 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
} }
private _renderIcon(mode, currentMode) { private _renderIcon(mode, currentMode) {
if (!modeIcons[mode]) {
return html``;
}
return html`<ha-icon return html`<ha-icon
class="${classMap({ "selected-icon": currentMode === mode })}" class="${classMap({ "selected-icon": currentMode === mode })}"
.mode="${mode}" .mode="${mode}"