jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 09:16:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Set min height to thermostat card (#2416)

Browse Source 
* Set min height

* Set min height on #root

* Add min-height on firstUpdated and remove after roundSlider is loaded

* Move back to #thermostat
This commit is contained in:
Bram Kragten 2019-01-08 20:27:01 +01:00 committed by Paulus Schoutsen
parent ddb050d1fd
commit 64b405dd4d
1 changed files with 72 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -190,6 +190,13 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
}
private async _initialLoad(): Promise<void> {
const radius = this.clientWidth / 3;
this._broadCard = this.clientWidth > 390;
(this.shadowRoot!.querySelector(
"#thermostat"
)! as HTMLElement).style.minHeight = radius * 2 + "px";
const loaded = await loadRoundslider();
await new Promise((resolve) => afterNextRender(resolve));
@ -206,13 +213,14 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
const [sliderValue, uiValue] = this._genSliderValue(stateObj);
const step = computeTemperatureStepSize(this.hass!, this._config!);
this._broadCard = this.clientWidth > 390;
this._jQuery("#thermostat", this.shadowRoot).roundSlider({
...thermostatConfig,
radius: this.clientWidth / 3,
radius,
min: stateObj.attributes.min_temp,
max: stateObj.attributes.max_temp,
sliderType: _sliderType,
create: () => this._loaded(),
change: (value) => this._setTemperature(value),
drag: (value) => this._dragEvent(value),
value: sliderValue,
@ -244,6 +252,68 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
return [sliderValue, uiValue];
}
private _loaded(): void {
(this.shadowRoot!.querySelector(
"#thermostat"
)! as HTMLElement).style.minHeight = null;
}
private _updateSetTemp(value: string): void {
this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = value;
}
private _dragEvent(e): void {
this._updateSetTemp(formatTemp(String(e.value).split(",")));
}
private _setTemperature(e): void {
const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
if (
stateObj.attributes.target_temp_low &&
stateObj.attributes.target_temp_high
) {
if (e.handle.index === 1) {
this.hass!.callService("climate", "set_temperature", {
entity_id: this._config!.entity,
target_temp_low: e.handle.value,
target_temp_high: stateObj.attributes.target_temp_high,
});
} else {
this.hass!.callService("climate", "set_temperature", {
entity_id: this._config!.entity,
target_temp_low: stateObj.attributes.target_temp_low,
target_temp_high: e.handle.value,
});
}
} else {
this.hass!.callService("climate", "set_temperature", {
entity_id: this._config!.entity,
temperature: e.value,
});
}
}
private _renderIcon(mode: string, currentMode: string): TemplateResult {
if (!modeIcons[mode]) {
return html``;
}
return html`
<ha-icon
class="${classMap({ "selected-icon": currentMode === mode })}"
.mode="${mode}"
.icon="${modeIcons[mode]}"
@click="${this._handleModeClick}"
></ha-icon>
`;
}
private _handleModeClick(e: MouseEvent): void {
this.hass!.callService("climate", "set_operation_mode", {
entity_id: this._config!.entity,
operation_mode: (e.currentTarget as any).mode,
});
}
private renderStyle(): TemplateResult {
return html`
${this._roundSliderStyle}
@ -419,62 +489,6 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
</style>
`;
}
private _updateSetTemp(value: string): void {
this.shadowRoot!.querySelector("#set-temperature")!.innerHTML = value;
}
private _dragEvent(e): void {
this._updateSetTemp(formatTemp(String(e.value).split(",")));
}
private _setTemperature(e): void {
const stateObj = this.hass!.states[this._config!.entity] as ClimateEntity;
if (
stateObj.attributes.target_temp_low &&
stateObj.attributes.target_temp_high
) {
if (e.handle.index === 1) {
this.hass!.callService("climate", "set_temperature", {
entity_id: this._config!.entity,
target_temp_low: e.handle.value,
target_temp_high: stateObj.attributes.target_temp_high,
});
} else {
this.hass!.callService("climate", "set_temperature", {
entity_id: this._config!.entity,
target_temp_low: stateObj.attributes.target_temp_low,
target_temp_high: e.handle.value,
});
}
} else {
this.hass!.callService("climate", "set_temperature", {
entity_id: this._config!.entity,
temperature: e.value,
});
}
}
private _renderIcon(mode: string, currentMode: string): TemplateResult {
if (!modeIcons[mode]) {
return html``;
}
return html`
<ha-icon
class="${classMap({ "selected-icon": currentMode === mode })}"
.mode="${mode}"
.icon="${modeIcons[mode]}"
@click="${this._handleModeClick}"
></ha-icon>
`;
}
private _handleModeClick(e: MouseEvent): void {
this.hass!.callService("climate", "set_operation_mode", {
entity_id: this._config!.entity,
operation_mode: (e.currentTarget as any).mode,
});
}
}
declare global {