mirror of
https://github.com/home-assistant/frontend.git
synced 2025-08-01 13:37:47 +00:00
LitElement
This commit is contained in:
Denis Shulyaka
parent
404d0b8d05
commit
faea8c9f4c
61
src/components/entity/ha-entity-humidifier.ts
Normal file
61
src/components/entity/ha-entity-humidifier.ts
Normal file
@ -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`
|
||||
<div class="target">
|
||||
${this.stateObj.attributes.mode
|
||||
? html`<span class="state-label">
|
||||
${this.hass!.localize(
|
||||
`state_attributes.humidifier.mode.${this.stateObj.attributes.mode}`
|
||||
) || this.stateObj.attributes.mode}
|
||||
</span>`
|
||||
: ""}
|
||||
<div class="unit">
|
||||
${this.stateObj.attributes.humidity
|
||||
? html`${this.stateObj.attributes.humidity} %`
|
||||
: ""}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${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);
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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`
|
||||
<style include="iron-flex iron-flex-alignment"></style>
|
||||
<style>
|
||||
/* local DOM styles go here */
|
||||
:host {
|
||||
@apply --layout-flex;
|
||||
@apply --layout-horizontal;
|
||||
@apply --layout-justified;
|
||||
}
|
||||
.in-flux#humidity {
|
||||
color: var(--google-red-500);
|
||||
}
|
||||
#humidity {
|
||||
@apply --layout-self-center;
|
||||
font-size: 200%;
|
||||
direction: ltr;
|
||||
}
|
||||
.control-buttons {
|
||||
font-size: 200%;
|
||||
text-align: right;
|
||||
}
|
||||
ha-icon-button {
|
||||
--mdc-icon-size: 32px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- local DOM goes here -->
|
||||
<div id="humidity">[[value]] [[units]]</div>
|
||||
<div class="control-buttons">
|
||||
<div>
|
||||
<ha-icon-button
|
||||
icon="hass:chevron-up"
|
||||
on-click="incrementValue"
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
<div>
|
||||
<ha-icon-button
|
||||
icon="hass:chevron-down"
|
||||
on-click="decrementValue"
|
||||
></ha-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
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);
|
||||
@ -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`
|
||||
<style>
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="target">
|
||||
<template is="dom-if" if="[[_hasKnownState(stateObj.state)]]">
|
||||
<span class="state-label">
|
||||
[[_localizeState(localize, stateObj.state)]]
|
||||
<template is="dom-if" if="[[_renderMode(stateObj.attributes)]]">
|
||||
- [[_localizeMode(localize, stateObj.attributes.mode)]]
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
<div class="unit">[[computeTarget(stateObj.attributes.humidity)]]</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
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);
|
||||
@ -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";
|
||||
|
||||
@ -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`
|
||||
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
|
||||
<ha-humidifier-state
|
||||
<ha-entity-humidifier
|
||||
.hass=${this.hass}
|
||||
.stateObj=${stateObj}
|
||||
></ha-humidifier-state>
|
||||
></ha-entity-humidifier>
|
||||
</hui-generic-entity-row>
|
||||
`;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user