mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 01:06:35 +00:00
Convert hui-input-select-entity-row to TypeScript/LitElement (#2048)
* Convert hui-input-select-entity-row to TypeScript/LitElement * Address Travis issues * Address review comments * Return callService promise * Remove _selected
This commit is contained in:
parent
b8f048d96a
commit
a9704b110d
11
src/data/input-select.ts
Normal file
11
src/data/input-select.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { HomeAssistant } from "../types";
|
||||||
|
|
||||||
|
export const setOption = (
|
||||||
|
hass: HomeAssistant,
|
||||||
|
entity: string,
|
||||||
|
option: string
|
||||||
|
) =>
|
||||||
|
hass.callService("input_select", "select_option", {
|
||||||
|
option,
|
||||||
|
entity_id: entity,
|
||||||
|
});
|
@ -1,112 +0,0 @@
|
|||||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
|
||||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
|
||||||
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
|
|
||||||
import "@polymer/paper-item/paper-item";
|
|
||||||
import "@polymer/paper-listbox/paper-listbox";
|
|
||||||
|
|
||||||
import "../../../components/entity/state-badge";
|
|
||||||
|
|
||||||
import computeStateName from "../../../common/entity/compute_state_name";
|
|
||||||
|
|
||||||
import EventsMixin from "../../../mixins/events-mixin";
|
|
||||||
|
|
||||||
/*
|
|
||||||
* @appliesMixin EventsMixin
|
|
||||||
*/
|
|
||||||
class HuiInputSelectEntityRow extends EventsMixin(PolymerElement) {
|
|
||||||
static get template() {
|
|
||||||
return html`
|
|
||||||
${this.styleTemplate}
|
|
||||||
<template is="dom-if" if="[[_stateObj]]">
|
|
||||||
<state-badge state-obj="[[_stateObj]]"></state-badge>
|
|
||||||
<paper-dropdown-menu
|
|
||||||
on-click="_stopPropagation"
|
|
||||||
selected-item-label="{{_selected}}"
|
|
||||||
label="[[_computeName(_config.name, _stateObj)]]"
|
|
||||||
>
|
|
||||||
<paper-listbox
|
|
||||||
slot="dropdown-content"
|
|
||||||
selected="[[_computeSelected(_stateObj)]]"
|
|
||||||
>
|
|
||||||
<template is="dom-repeat" items="[[_stateObj.attributes.options]]">
|
|
||||||
<paper-item>[[item]]</paper-item>
|
|
||||||
</template>
|
|
||||||
</paper-listbox>
|
|
||||||
</paper-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
<template is="dom-if" if="[[!_stateObj]]">
|
|
||||||
<div class="not-found">Entity not available: [[_config.entity]]</div>
|
|
||||||
</template>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get styleTemplate() {
|
|
||||||
return html`
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
paper-dropdown-menu {
|
|
||||||
margin-left: 16px;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.not-found {
|
|
||||||
flex: 1;
|
|
||||||
background-color: yellow;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get properties() {
|
|
||||||
return {
|
|
||||||
hass: Object,
|
|
||||||
_config: Object,
|
|
||||||
_stateObj: {
|
|
||||||
type: Object,
|
|
||||||
computed: "_computeStateObj(hass.states, _config.entity)",
|
|
||||||
},
|
|
||||||
_selected: {
|
|
||||||
type: String,
|
|
||||||
observer: "_selectedChanged",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
setConfig(config) {
|
|
||||||
if (!config || !config.entity) {
|
|
||||||
throw new Error("Entity not configured.");
|
|
||||||
}
|
|
||||||
this._config = config;
|
|
||||||
}
|
|
||||||
|
|
||||||
_computeStateObj(states, entityId) {
|
|
||||||
return states && entityId in states ? states[entityId] : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
_computeName(name, stateObj) {
|
|
||||||
return name || computeStateName(stateObj);
|
|
||||||
}
|
|
||||||
|
|
||||||
_computeSelected(stateObj) {
|
|
||||||
return stateObj.attributes.options.indexOf(stateObj.state);
|
|
||||||
}
|
|
||||||
|
|
||||||
_selectedChanged(option) {
|
|
||||||
// Selected Option will transition to '' before transitioning to new value
|
|
||||||
if (option === "" || option === this._stateObj.state) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.hass.callService("input_select", "select_option", {
|
|
||||||
option: option,
|
|
||||||
entity_id: this._stateObj.entity_id,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
_stopPropagation(ev) {
|
|
||||||
ev.stopPropagation();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
customElements.define("hui-input-select-entity-row", HuiInputSelectEntityRow);
|
|
112
src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
Normal file
112
src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
|
||||||
|
import { repeat } from "lit-html/directives/repeat";
|
||||||
|
import { TemplateResult } from "lit-html";
|
||||||
|
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
|
||||||
|
import "@polymer/paper-item/paper-item";
|
||||||
|
import "@polymer/paper-listbox/paper-listbox";
|
||||||
|
|
||||||
|
import "../../../components/entity/state-badge";
|
||||||
|
import "./hui-error-entity-row";
|
||||||
|
|
||||||
|
import computeStateName from "../../../common/entity/compute_state_name";
|
||||||
|
import { HomeAssistant } from "../../../types";
|
||||||
|
import { EntityRow, EntityConfig } from "./types";
|
||||||
|
import { setOption } from "../../../data/input-select";
|
||||||
|
|
||||||
|
class HuiInputSelectEntityRow extends LitElement implements EntityRow {
|
||||||
|
public hass?: HomeAssistant;
|
||||||
|
private _config?: EntityConfig;
|
||||||
|
|
||||||
|
static get properties(): PropertyDeclarations {
|
||||||
|
return {
|
||||||
|
hass: {},
|
||||||
|
_config: {},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
public setConfig(config: EntityConfig): void {
|
||||||
|
if (!config || !config.entity) {
|
||||||
|
throw new Error("Invalid Configuration: 'entity' required");
|
||||||
|
}
|
||||||
|
|
||||||
|
this._config = config;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected render(): TemplateResult {
|
||||||
|
if (!this.hass || !this._config) {
|
||||||
|
return html``;
|
||||||
|
}
|
||||||
|
|
||||||
|
const stateObj = this.hass.states[this._config.entity];
|
||||||
|
|
||||||
|
if (!stateObj) {
|
||||||
|
return html`
|
||||||
|
<hui-error-entity-row
|
||||||
|
.entity="${this._config.entity}"
|
||||||
|
></hui-error-entity-row>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return html`
|
||||||
|
${this.renderStyle()}
|
||||||
|
<state-badge .stateObj="${stateObj}"></state-badge>
|
||||||
|
<paper-dropdown-menu
|
||||||
|
selected-item-label="${stateObj.state}"
|
||||||
|
@selected-item-label-changed="${this._selectedChanged}"
|
||||||
|
label="${this._config.name || computeStateName(stateObj)}"
|
||||||
|
>
|
||||||
|
<paper-listbox
|
||||||
|
slot="dropdown-content"
|
||||||
|
selected="${stateObj.attributes.options.indexOf(stateObj.state)}"
|
||||||
|
>
|
||||||
|
${
|
||||||
|
repeat(
|
||||||
|
stateObj.attributes.options,
|
||||||
|
(option) =>
|
||||||
|
html`
|
||||||
|
<paper-item>${option}</paper-item>
|
||||||
|
`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</paper-listbox>
|
||||||
|
</paper-dropdown-menu>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private renderStyle(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
paper-dropdown-menu {
|
||||||
|
margin-left: 16px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _selectedChanged(ev): void {
|
||||||
|
// Selected Option will transition to '' before transitioning to new value
|
||||||
|
const stateObj = this.hass!.states[this._config!.entity];
|
||||||
|
if (
|
||||||
|
!ev.target.selectedItem ||
|
||||||
|
ev.target.selectedItem.innerText === "" ||
|
||||||
|
ev.target.selectedItem.innerText === stateObj.state
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setOption(this.hass!, stateObj.entity_id, ev.target.selectedItem.innerText);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"hui-input-select-entity-row": HuiInputSelectEntityRow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("hui-input-select-entity-row", HuiInputSelectEntityRow);
|
Loading…
x
Reference in New Issue
Block a user