mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Fix broken numeric text entry in state-card-input_number (#14812)
fixes undefined
This commit is contained in:
karwosts
GitHub
parent
e175c7ba3c
commit
419f23879a
@ -1,200 +0,0 @@
|
||||
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
|
||||
import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior";
|
||||
import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
/* eslint-plugin-disable lit */
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import { computeStateDisplay } from "../common/entity/compute_state_display";
|
||||
import "../components/entity/state-info";
|
||||
import "../components/ha-slider";
|
||||
import "../components/ha-textfield";
|
||||
|
||||
class StateCardInputNumber extends mixinBehaviors(
|
||||
[IronResizableBehavior],
|
||||
PolymerElement
|
||||
) {
|
||||
static get template() {
|
||||
return html`
|
||||
<style include="iron-flex iron-flex-alignment"></style>
|
||||
<style>
|
||||
ha-slider {
|
||||
margin-left: auto;
|
||||
}
|
||||
.state {
|
||||
@apply --paper-font-body1;
|
||||
color: var(--primary-text-color);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
}
|
||||
.sliderstate {
|
||||
min-width: 45px;
|
||||
}
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
ha-textfield {
|
||||
text-align: right;
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="horizontal justified layout" id="input_number_card">
|
||||
${this.stateInfoTemplate}
|
||||
<ha-slider
|
||||
min="[[min]]"
|
||||
max="[[max]]"
|
||||
value="{{value}}"
|
||||
step="[[step]]"
|
||||
hidden="[[hiddenslider]]"
|
||||
pin
|
||||
on-change="selectedValueChanged"
|
||||
on-click="stopPropagation"
|
||||
id="slider"
|
||||
ignore-bar-touch=""
|
||||
>
|
||||
</ha-slider>
|
||||
<ha-textfield
|
||||
no-label-float=""
|
||||
auto-validate=""
|
||||
pattern="[0-9]+([\\.][0-9]+)?"
|
||||
step="[[step]]"
|
||||
min="[[min]]"
|
||||
max="[[max]]"
|
||||
value="[[value]]"
|
||||
type="number"
|
||||
on-change="selectedValueChanged"
|
||||
on-click="stopPropagation"
|
||||
on-input="onInput"
|
||||
hidden="[[hiddenbox]]"
|
||||
suffix="[[stateObj.attributes.unit_of_measurement]]"
|
||||
>
|
||||
</ha-textfield>
|
||||
<div
|
||||
id="sliderstate"
|
||||
class="state sliderstate"
|
||||
hidden="[[hiddenslider]]"
|
||||
>
|
||||
[[formattedState]]
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static get stateInfoTemplate() {
|
||||
return html`
|
||||
<state-info
|
||||
hass="[[hass]]"
|
||||
state-obj="[[stateObj]]"
|
||||
in-dialog="[[inDialog]]"
|
||||
></state-info>
|
||||
`;
|
||||
}
|
||||
|
||||
ready() {
|
||||
super.ready();
|
||||
if (typeof ResizeObserver === "function") {
|
||||
const ro = new ResizeObserver((entries) => {
|
||||
entries.forEach(() => {
|
||||
this.hiddenState();
|
||||
});
|
||||
});
|
||||
ro.observe(this.$.input_number_card);
|
||||
} else {
|
||||
this.addEventListener("iron-resize", this.hiddenState);
|
||||
}
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
hass: Object,
|
||||
hiddenbox: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
hiddenslider: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
inDialog: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
stateObj: {
|
||||
type: Object,
|
||||
observer: "stateObjectChanged",
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
value: 100,
|
||||
},
|
||||
maxlength: {
|
||||
type: Number,
|
||||
value: 3,
|
||||
},
|
||||
step: Number,
|
||||
value: Number,
|
||||
formattedState: String,
|
||||
mode: String,
|
||||
};
|
||||
}
|
||||
|
||||
hiddenState() {
|
||||
if (this.mode !== "slider") return;
|
||||
const sliderwidth = this.$.slider.offsetWidth;
|
||||
if (sliderwidth < 100) {
|
||||
this.$.sliderstate.hidden = true;
|
||||
} else if (sliderwidth >= 145) {
|
||||
this.$.sliderstate.hidden = false;
|
||||
}
|
||||
}
|
||||
|
||||
stateObjectChanged(newVal) {
|
||||
const prevMode = this.mode;
|
||||
this.setProperties({
|
||||
min: Number(newVal.attributes.min),
|
||||
max: Number(newVal.attributes.max),
|
||||
step: Number(newVal.attributes.step),
|
||||
value: Number(newVal.state),
|
||||
formattedState: computeStateDisplay(
|
||||
this.hass.localize,
|
||||
newVal,
|
||||
this.hass.locale,
|
||||
this.hass.entities,
|
||||
newVal.state
|
||||
),
|
||||
mode: String(newVal.attributes.mode),
|
||||
maxlength: String(newVal.attributes.max).length,
|
||||
hiddenbox: newVal.attributes.mode !== "box",
|
||||
hiddenslider: newVal.attributes.mode !== "slider",
|
||||
});
|
||||
if (this.mode === "slider" && prevMode !== "slider") {
|
||||
this.hiddenState();
|
||||
}
|
||||
}
|
||||
|
||||
onInput(ev) {
|
||||
this.value = ev.target.value;
|
||||
}
|
||||
|
||||
selectedValueChanged() {
|
||||
if (this.value === Number(this.stateObj.state)) {
|
||||
return;
|
||||
}
|
||||
this.hass.callService("input_number", "set_value", {
|
||||
value: this.value,
|
||||
entity_id: this.stateObj.entity_id,
|
||||
});
|
||||
}
|
||||
|
||||
stopPropagation(ev) {
|
||||
ev.stopPropagation();
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("state-card-input_number", StateCardInputNumber);
|
||||
169
src/state-summary/state-card-input_number.ts
Normal file
169
src/state-summary/state-card-input_number.ts
Normal file
@ -0,0 +1,169 @@
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { computeStateDisplay } from "../common/entity/compute_state_display";
|
||||
import { computeRTLDirection } from "../common/util/compute_rtl";
|
||||
import { debounce } from "../common/util/debounce";
|
||||
import "../components/ha-slider";
|
||||
import "../components/ha-textfield";
|
||||
import "../components/entity/state-info";
|
||||
import { isUnavailableState } from "../data/entity";
|
||||
import { setValue } from "../data/input_text";
|
||||
import { HomeAssistant } from "../types";
|
||||
import { installResizeObserver } from "../panels/lovelace/common/install-resize-observer";
|
||||
|
||||
@customElement("state-card-input_number")
|
||||
class StateCardInputNumber extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property() public stateObj!: HassEntity;
|
||||
|
||||
@property({ type: Boolean }) public inDialog = false;
|
||||
|
||||
private _loaded?: boolean;
|
||||
|
||||
private _updated?: boolean;
|
||||
|
||||
private _resizeObserver?: ResizeObserver;
|
||||
|
||||
public connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
if (this._updated && !this._loaded) {
|
||||
this._initialLoad();
|
||||
}
|
||||
this._attachObserver();
|
||||
}
|
||||
|
||||
public disconnectedCallback(): void {
|
||||
this._resizeObserver?.disconnect();
|
||||
}
|
||||
|
||||
protected firstUpdated(): void {
|
||||
this._updated = true;
|
||||
if (this.isConnected && !this._loaded) {
|
||||
this._initialLoad();
|
||||
}
|
||||
this._attachObserver();
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<state-info
|
||||
.hass=${this.hass}
|
||||
.stateObj=${this.stateObj}
|
||||
.inDialog=${this.inDialog}
|
||||
></state-info>
|
||||
${this.stateObj.attributes.mode === "slider"
|
||||
? html`
|
||||
<div class="flex">
|
||||
<ha-slider
|
||||
.disabled=${isUnavailableState(this.stateObj.state)}
|
||||
.dir=${computeRTLDirection(this.hass)}
|
||||
.step=${Number(this.stateObj.attributes.step)}
|
||||
.min=${Number(this.stateObj.attributes.min)}
|
||||
.max=${Number(this.stateObj.attributes.max)}
|
||||
.value=${this.stateObj.state}
|
||||
pin
|
||||
@change=${this._selectedValueChanged}
|
||||
ignore-bar-touch
|
||||
></ha-slider>
|
||||
<span class="state">
|
||||
${computeStateDisplay(
|
||||
this.hass.localize,
|
||||
this.stateObj,
|
||||
this.hass.locale,
|
||||
this.hass.entities,
|
||||
this.stateObj.state
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<div class="flex state">
|
||||
<ha-textfield
|
||||
.disabled=${isUnavailableState(this.stateObj.state)}
|
||||
pattern="[0-9]+([\\.][0-9]+)?"
|
||||
.step=${Number(this.stateObj.attributes.step)}
|
||||
.min=${Number(this.stateObj.attributes.min)}
|
||||
.max=${Number(this.stateObj.attributes.max)}
|
||||
.value=${Number(this.stateObj.state).toString()}
|
||||
.suffix=${this.stateObj.attributes.unit_of_measurement || ""}
|
||||
type="number"
|
||||
@change=${this._selectedValueChanged}
|
||||
>
|
||||
</ha-textfield>
|
||||
</div>
|
||||
`}
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return css`
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-grow: 2;
|
||||
}
|
||||
.state {
|
||||
min-width: 45px;
|
||||
text-align: end;
|
||||
}
|
||||
ha-textfield {
|
||||
text-align: end;
|
||||
}
|
||||
ha-slider {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
private async _initialLoad(): Promise<void> {
|
||||
this._loaded = true;
|
||||
await this.updateComplete;
|
||||
this._measureCard();
|
||||
}
|
||||
|
||||
private _measureCard() {
|
||||
if (!this.isConnected) {
|
||||
return;
|
||||
}
|
||||
const element = this.shadowRoot!.querySelector(".state") as HTMLElement;
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
element.hidden = this.clientWidth <= 300;
|
||||
}
|
||||
|
||||
private async _attachObserver(): Promise<void> {
|
||||
if (!this._resizeObserver) {
|
||||
await installResizeObserver();
|
||||
this._resizeObserver = new ResizeObserver(
|
||||
debounce(() => this._measureCard(), 250, false)
|
||||
);
|
||||
}
|
||||
if (this.isConnected) {
|
||||
this._resizeObserver.observe(this);
|
||||
}
|
||||
}
|
||||
|
||||
private _selectedValueChanged(ev: Event): void {
|
||||
if ((ev.target as HTMLInputElement).value !== this.stateObj.state) {
|
||||
setValue(
|
||||
this.hass!,
|
||||
this.stateObj.entity_id,
|
||||
(ev.target as HTMLInputElement).value
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"state-card-input_number": StateCardInputNumber;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user