110 lines
3.0 KiB
TypeScript
110 lines
3.0 KiB
TypeScript
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
|
|
import "@polymer/paper-item/paper-item";
|
|
import "@polymer/paper-listbox/paper-listbox";
|
|
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
|
import { customElement, property, state } from "lit/decorators";
|
|
import "../../../../../components/buttons/ha-call-service-button";
|
|
import "../../../../../components/ha-card";
|
|
import { ZWaveValue } from "../../../../../data/zwave";
|
|
import { haStyle } from "../../../../../resources/styles";
|
|
import { HomeAssistant } from "../../../../../types";
|
|
|
|
@customElement("zwave-values")
|
|
export class ZwaveValues extends LitElement {
|
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
|
|
|
@property() public values: ZWaveValue[] = [];
|
|
|
|
@state() private _selectedValue = -1;
|
|
|
|
protected render(): TemplateResult {
|
|
return html`
|
|
<div class="content">
|
|
<ha-card
|
|
.header=${this.hass.localize("ui.panel.config.zwave.values.header")}
|
|
>
|
|
<div class="device-picker">
|
|
<paper-dropdown-menu
|
|
.label=${this.hass.localize("ui.panel.config.zwave.common.value")}
|
|
dynamic-align
|
|
class="flex"
|
|
>
|
|
<paper-listbox
|
|
slot="dropdown-content"
|
|
.selected=${this._selectedValue}
|
|
>
|
|
${this.values.map(
|
|
(item) => html`
|
|
<paper-item> ${this._computeCaption(item)} </paper-item>
|
|
`
|
|
)}
|
|
</paper-listbox>
|
|
</paper-dropdown-menu>
|
|
</div>
|
|
</ha-card>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
static get styles(): CSSResultGroup {
|
|
return [
|
|
haStyle,
|
|
css`
|
|
.content {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
ha-card {
|
|
margin: 0 auto;
|
|
max-width: 600px;
|
|
}
|
|
|
|
.device-picker {
|
|
@apply --layout-horizontal;
|
|
@apply --layout-center-center;
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-ms-flex-direction: row;
|
|
-webkit-flex-direction: row;
|
|
flex-direction: row;
|
|
-ms-flex-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
padding-bottom: 24px;
|
|
}
|
|
|
|
.flex {
|
|
-ms-flex: 1 1 0.000000001px;
|
|
-webkit-flex: 1;
|
|
flex: 1;
|
|
-webkit-flex-basis: 0.000000001px;
|
|
flex-basis: 0.000000001px;
|
|
}
|
|
|
|
.help-text {
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
}
|
|
`,
|
|
];
|
|
}
|
|
|
|
private _computeCaption(item) {
|
|
let out = `${item.value.label}`;
|
|
out += ` (${this.hass.localize("ui.panel.config.zwave.common.instance")}:`;
|
|
out += ` ${item.value.instance},`;
|
|
out += ` ${this.hass.localize("ui.panel.config.zwave.common.index")}:`;
|
|
out += ` ${item.value.index})`;
|
|
return out;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"zwave-values": ZwaveValues;
|
|
}
|
|
}
|