diff --git a/src/components/entity/ha-entity-humidifier.ts b/src/components/entity/ha-entity-humidifier.ts new file mode 100644 index 0000000000..25588cb42a --- /dev/null +++ b/src/components/entity/ha-entity-humidifier.ts @@ -0,0 +1,61 @@ +import { css, CSSResult, html, TemplateResult } from "lit-element"; +import { HaEntityToggle } from "./ha-entity-toggle"; + +class HaEntityHumidifier extends HaEntityToggle { + protected render(): TemplateResult { + if (!this.stateObj) { + return super.render(); + } + + return html` +
+ ${this.stateObj.attributes.mode + ? html` + ${this.hass!.localize( + `state_attributes.humidifier.mode.${this.stateObj.attributes.mode}` + ) || this.stateObj.attributes.mode} + ` + : ""} +
+ ${this.stateObj.attributes.humidity + ? html`${this.stateObj.attributes.humidity} %` + : ""} +
+
+ + ${super.render()} + `; + } + + static get styles(): CSSResult { + return css` + :host { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + } + + .target { + color: var(--primary-text-color); + } + + .current { + color: var(--secondary-text-color); + } + + .state-label { + font-weight: bold; + text-transform: capitalize; + } + + .unit { + display: inline-block; + direction: ltr; + } + ${super.styles} + `; + } +} + +customElements.define("ha-entity-humidifier", HaEntityHumidifier); diff --git a/src/components/entity/ha-entity-toggle.ts b/src/components/entity/ha-entity-toggle.ts index 7b19129c7e..587f299641 100644 --- a/src/components/entity/ha-entity-toggle.ts +++ b/src/components/entity/ha-entity-toggle.ts @@ -22,7 +22,7 @@ const isOn = (stateObj?: HassEntity) => !STATES_OFF.includes(stateObj.state) && !UNAVAILABLE_STATES.includes(stateObj.state); -class HaEntityToggle extends LitElement { +export class HaEntityToggle extends LitElement { // hass is not a property so that we only re-render on stateObj changes public hass?: HomeAssistant; diff --git a/src/components/ha-humidifier-control.js b/src/components/ha-humidifier-control.js deleted file mode 100644 index 59d8ef1133..0000000000 --- a/src/components/ha-humidifier-control.js +++ /dev/null @@ -1,142 +0,0 @@ -import "@polymer/iron-flex-layout/iron-flex-layout-classes"; -import "./ha-icon-button"; -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; -import { EventsMixin } from "../mixins/events-mixin"; - -/* - * @appliesMixin EventsMixin - */ -class HaHumidifierControl extends EventsMixin(PolymerElement) { - static get template() { - return html` - - - - -
[[value]] [[units]]
-
-
- -
-
- -
-
- `; - } - - static get properties() { - return { - value: { - type: Number, - observer: "valueChanged", - }, - units: { - type: String, - }, - min: { - type: Number, - }, - max: { - type: Number, - }, - step: { - type: Number, - value: 1, - }, - }; - } - - humidityStateInFlux(inFlux) { - this.$.humidity.classList.toggle("in-flux", inFlux); - } - - _round(val) { - // round value to precision derived from step - // insired by https://github.com/soundar24/roundSlider/blob/master/src/roundslider.js - const s = this.step.toString().split("."); - return s[1] ? parseFloat(val.toFixed(s[1].length)) : Math.round(val); - } - - incrementValue() { - const newval = this._round(this.value + this.step); - if (this.value < this.max) { - this.last_changed = Date.now(); - this.humidityStateInFlux(true); - } - if (newval <= this.max) { - // If no initial humidity - // this forces control to start - // from the min configured instead of 0 - if (newval <= this.min) { - this.value = this.min; - } else { - this.value = newval; - } - } else { - this.value = this.max; - } - } - - decrementValue() { - const newval = this._round(this.value - this.step); - if (this.value > this.min) { - this.last_changed = Date.now(); - this.humidityStateInFlux(true); - } - if (newval >= this.min) { - this.value = newval; - } else { - this.value = this.min; - } - } - - valueChanged() { - // when the last_changed timestamp is changed, - // trigger a potential event fire in - // the future, as long as last changed is far enough in the - // past. - if (this.last_changed) { - window.setTimeout(() => { - const now = Date.now(); - if (now - this.last_changed >= 2000) { - this.fire("change"); - this.humidityStateInFlux(false); - this.last_changed = null; - } - }, 2010); - } - } -} - -customElements.define("ha-humidifier-control", HaHumidifierControl); diff --git a/src/components/ha-humidifier-state.js b/src/components/ha-humidifier-state.js deleted file mode 100644 index 2731b6451e..0000000000 --- a/src/components/ha-humidifier-state.js +++ /dev/null @@ -1,83 +0,0 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; -import LocalizeMixin from "../mixins/localize-mixin"; - -/* - * @appliesMixin LocalizeMixin - */ -class HaHumidifierState extends LocalizeMixin(PolymerElement) { - static get template() { - return html` - - -
- -
[[computeTarget(stateObj.attributes.humidity)]]
-
- `; - } - - static get properties() { - return { - stateObj: Object, - }; - } - - computeTarget(humidity) { - if (humidity != null) { - return `${humidity} %`; - } - - return ""; - } - - _hasKnownState(state) { - return state !== "unknown"; - } - - _localizeState(localize, state) { - return localize(`state.default.${state}`) || state; - } - - _localizeMode(localize, mode) { - return localize(`state_attributes.humidifier.mode.${mode}`) || mode; - } - - _renderMode(attributes) { - return attributes.mode; - } -} -customElements.define("ha-humidifier-state", HaHumidifierState); diff --git a/src/dialogs/more-info/controls/more-info-humidifier.ts b/src/dialogs/more-info/controls/more-info-humidifier.ts index 35a37908ab..6a3bbc1aad 100644 --- a/src/dialogs/more-info/controls/more-info-humidifier.ts +++ b/src/dialogs/more-info/controls/more-info-humidifier.ts @@ -14,7 +14,6 @@ import { classMap } from "lit-html/directives/class-map"; import { fireEvent } from "../../../common/dom/fire_event"; import { supportsFeature } from "../../../common/entity/supports-feature"; import { computeRTLDirection } from "../../../common/util/compute_rtl"; -import "../../../components/ha-humidifier-control"; import "../../../components/ha-paper-dropdown-menu"; import "../../../components/ha-paper-slider"; import "../../../components/ha-switch"; diff --git a/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts b/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts index 9a0e97522a..159f2d02ca 100644 --- a/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts @@ -8,7 +8,8 @@ import { PropertyValues, TemplateResult, } from "lit-element"; -import "../../../components/ha-humidifier-state"; +import "../../../components/entity/ha-entity-humidifier"; +import { UNAVAILABLE_STATES } from "../../../data/entity"; import { HomeAssistant } from "../../../types"; import { hasConfigOrEntityChanged } from "../common/has-changed"; import "../components/hui-generic-entity-row"; @@ -50,10 +51,10 @@ class HuiHumidifierEntityRow extends LitElement implements LovelaceRow { return html` - + > `; }