mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-29 04:06:35 +00:00
Convert ha-entity-toggle to Lit/TS (#2639)
* Convert ha-entity-toggle to Lit/TS * Update src/components/entity/ha-entity-toggle.ts Co-Authored-By: balloob <paulus@home-assistant.io>
This commit is contained in:
Paulus Schoutsen
GitHub
parent
03f7a23540
commit
77935b7c7a
@ -1,168 +0,0 @@
|
||||
import "@polymer/paper-icon-button/paper-icon-button";
|
||||
import "@polymer/paper-toggle-button/paper-toggle-button";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
|
||||
import { STATES_OFF } from "../../common/const";
|
||||
import computeStateDomain from "../../common/entity/compute_state_domain";
|
||||
|
||||
class HaEntityToggle extends PolymerElement {
|
||||
static get template() {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
white-space: nowrap;
|
||||
min-width: 38px;
|
||||
}
|
||||
paper-icon-button {
|
||||
color: var(
|
||||
--paper-icon-button-inactive-color,
|
||||
var(--primary-text-color)
|
||||
);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
paper-icon-button[state-active] {
|
||||
color: var(--paper-icon-button-active-color, var(--primary-color));
|
||||
}
|
||||
paper-toggle-button {
|
||||
cursor: pointer;
|
||||
--paper-toggle-button-label-spacing: 0;
|
||||
padding: 13px 5px;
|
||||
margin: -4px -5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template is="dom-if" if="[[stateObj.attributes.assumed_state]]">
|
||||
<paper-icon-button
|
||||
icon="hass:flash-off"
|
||||
on-click="turnOff"
|
||||
state-active$="[[!isOn]]"
|
||||
></paper-icon-button>
|
||||
<paper-icon-button
|
||||
icon="hass:flash"
|
||||
on-click="turnOn"
|
||||
state-active$="[[isOn]]"
|
||||
></paper-icon-button>
|
||||
</template>
|
||||
<template is="dom-if" if="[[!stateObj.attributes.assumed_state]]">
|
||||
<paper-toggle-button
|
||||
checked="[[toggleChecked]]"
|
||||
on-change="toggleChanged"
|
||||
></paper-toggle-button>
|
||||
</template>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
hass: Object,
|
||||
stateObj: {
|
||||
type: Object,
|
||||
observer: "stateObjObserver",
|
||||
},
|
||||
|
||||
toggleChecked: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
isOn: {
|
||||
type: Boolean,
|
||||
computed: "computeIsOn(stateObj)",
|
||||
observer: "isOnChanged",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
ready() {
|
||||
super.ready();
|
||||
this.addEventListener("click", (ev) => this.onTap(ev));
|
||||
this.forceStateChange();
|
||||
}
|
||||
|
||||
onTap(ev) {
|
||||
ev.stopPropagation();
|
||||
}
|
||||
|
||||
toggleChanged(ev) {
|
||||
const newVal = ev.target.checked;
|
||||
|
||||
if (newVal && !this.isOn) {
|
||||
this.callService(true);
|
||||
} else if (!newVal && this.isOn) {
|
||||
this.callService(false);
|
||||
}
|
||||
}
|
||||
|
||||
isOnChanged(newVal) {
|
||||
this.toggleChecked = newVal;
|
||||
}
|
||||
|
||||
forceStateChange() {
|
||||
if (this.toggleChecked === this.isOn) {
|
||||
this.toggleChecked = !this.toggleChecked;
|
||||
}
|
||||
this.toggleChecked = this.isOn;
|
||||
}
|
||||
|
||||
turnOn() {
|
||||
this.callService(true);
|
||||
}
|
||||
|
||||
turnOff() {
|
||||
this.callService(false);
|
||||
}
|
||||
|
||||
computeIsOn(stateObj) {
|
||||
return stateObj && !STATES_OFF.includes(stateObj.state);
|
||||
}
|
||||
|
||||
stateObjObserver(newVal, oldVal) {
|
||||
if (!oldVal || !newVal) return;
|
||||
if (this.computeIsOn(newVal) === this.computeIsOn(oldVal)) {
|
||||
// stateObj changed but isOn is the same. Make sure toggle is in the right position.
|
||||
this.forceStateChange();
|
||||
}
|
||||
}
|
||||
|
||||
// We call updateToggle after a successful call to re-sync the toggle
|
||||
// with the state. It will be out of sync if our service call did not
|
||||
// result in the entity to be turned on. Since the state is not changing,
|
||||
// the resync is not called automatic.
|
||||
callService(turnOn) {
|
||||
const stateDomain = computeStateDomain(this.stateObj);
|
||||
let serviceDomain;
|
||||
let service;
|
||||
|
||||
if (stateDomain === "lock") {
|
||||
serviceDomain = "lock";
|
||||
service = turnOn ? "unlock" : "lock";
|
||||
} else if (stateDomain === "cover") {
|
||||
serviceDomain = "cover";
|
||||
service = turnOn ? "open_cover" : "close_cover";
|
||||
} else if (stateDomain === "group") {
|
||||
serviceDomain = "homeassistant";
|
||||
service = turnOn ? "turn_on" : "turn_off";
|
||||
} else {
|
||||
serviceDomain = stateDomain;
|
||||
service = turnOn ? "turn_on" : "turn_off";
|
||||
}
|
||||
|
||||
const currentState = this.stateObj;
|
||||
this.hass
|
||||
.callService(serviceDomain, service, {
|
||||
entity_id: this.stateObj.entity_id,
|
||||
})
|
||||
.then(() => {
|
||||
setTimeout(() => {
|
||||
// If after 2 seconds we have not received a state update
|
||||
// reset the switch to it's original state.
|
||||
if (this.stateObj === currentState) {
|
||||
this.forceStateChange();
|
||||
}
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-entity-toggle", HaEntityToggle);
|
||||
154
src/components/entity/ha-entity-toggle.ts
Normal file
154
src/components/entity/ha-entity-toggle.ts
Normal file
@ -0,0 +1,154 @@
|
||||
import "@polymer/paper-icon-button/paper-icon-button";
|
||||
import "@polymer/paper-toggle-button/paper-toggle-button";
|
||||
|
||||
import { STATES_OFF } from "../../common/const";
|
||||
import computeStateDomain from "../../common/entity/compute_state_domain";
|
||||
import {
|
||||
LitElement,
|
||||
TemplateResult,
|
||||
html,
|
||||
CSSResult,
|
||||
css,
|
||||
PropertyDeclarations,
|
||||
} from "lit-element";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
|
||||
class HaEntityToggle extends LitElement {
|
||||
// hass is not a property so that we only re-render on stateObj changes
|
||||
public hass?: HomeAssistant;
|
||||
public stateObj?: HassEntity;
|
||||
|
||||
protected render(): TemplateResult | void {
|
||||
if (!this.stateObj) {
|
||||
return html`
|
||||
<paper-toggle-button disabled></paper-toggle-button>
|
||||
`;
|
||||
}
|
||||
|
||||
const isOn = this._isOn;
|
||||
|
||||
if (this.stateObj.attributes.assumed_state) {
|
||||
return html`
|
||||
<paper-icon-button
|
||||
icon="hass:flash-off"
|
||||
@click=${this._turnOff}
|
||||
?state-active=${!isOn}
|
||||
></paper-icon-button>
|
||||
<paper-icon-button
|
||||
icon="hass:flash"
|
||||
@click=${this._turnOn}
|
||||
?state-active=${isOn}
|
||||
></paper-icon-button>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<paper-toggle-button
|
||||
.checked=${isOn}
|
||||
@change=${this._toggleChanged}
|
||||
></paper-toggle-button>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties(): PropertyDeclarations {
|
||||
return {
|
||||
stateObj: {},
|
||||
};
|
||||
}
|
||||
|
||||
protected firstUpdated(changedProps) {
|
||||
super.firstUpdated(changedProps);
|
||||
this.addEventListener("click", (ev) => ev.stopPropagation());
|
||||
}
|
||||
|
||||
private get _isOn(): boolean {
|
||||
return (
|
||||
this.stateObj !== undefined && !STATES_OFF.includes(this.stateObj.state)
|
||||
);
|
||||
}
|
||||
|
||||
private _toggleChanged(ev) {
|
||||
const newVal = ev.target.checked;
|
||||
|
||||
if (newVal !== this._isOn) {
|
||||
this._callService(newVal);
|
||||
}
|
||||
}
|
||||
|
||||
private _turnOn() {
|
||||
this._callService(true);
|
||||
}
|
||||
|
||||
private _turnOff() {
|
||||
this._callService(false);
|
||||
}
|
||||
|
||||
// We will force a re-render after a successful call to re-sync the toggle
|
||||
// with the state. It will be out of sync if our service call did not
|
||||
// result in the entity to be turned on. Since the state is not changing,
|
||||
// the resync is not called automatic.
|
||||
private async _callService(turnOn): Promise<void> {
|
||||
if (!this.hass || !this.stateObj) {
|
||||
return;
|
||||
}
|
||||
const stateDomain = computeStateDomain(this.stateObj);
|
||||
let serviceDomain;
|
||||
let service;
|
||||
|
||||
if (stateDomain === "lock") {
|
||||
serviceDomain = "lock";
|
||||
service = turnOn ? "unlock" : "lock";
|
||||
} else if (stateDomain === "cover") {
|
||||
serviceDomain = "cover";
|
||||
service = turnOn ? "open_cover" : "close_cover";
|
||||
} else if (stateDomain === "group") {
|
||||
serviceDomain = "homeassistant";
|
||||
service = turnOn ? "turn_on" : "turn_off";
|
||||
} else {
|
||||
serviceDomain = stateDomain;
|
||||
service = turnOn ? "turn_on" : "turn_off";
|
||||
}
|
||||
|
||||
const currentState = this.stateObj;
|
||||
|
||||
await this.hass.callService(serviceDomain, service, {
|
||||
entity_id: this.stateObj.entity_id,
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
// If after 2 seconds we have not received a state update
|
||||
// reset the switch to it's original state.
|
||||
if (this.stateObj === currentState) {
|
||||
this.requestUpdate();
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
:host {
|
||||
white-space: nowrap;
|
||||
min-width: 38px;
|
||||
}
|
||||
paper-icon-button {
|
||||
color: var(
|
||||
--paper-icon-button-inactive-color,
|
||||
var(--primary-text-color)
|
||||
);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
paper-icon-button[state-active] {
|
||||
color: var(--paper-icon-button-active-color, var(--primary-color));
|
||||
}
|
||||
paper-toggle-button {
|
||||
cursor: pointer;
|
||||
--paper-toggle-button-label-spacing: 0;
|
||||
padding: 13px 5px;
|
||||
margin: -4px -5px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-entity-toggle", HaEntityToggle);
|
||||
Loading…
x
Reference in New Issue
Block a user