mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-29 04:06:35 +00:00
Convert Z-Wave panel to TS/Lit (#3345)
* Convert zwave-network to typescript/lit * Convert zwave-network to ts/lit * Updates per code review * missed one (hass? => hass!) * Remove constructor
This commit is contained in:
Charles Garwood
Paulus Schoutsen
parent
5d8e34e8be
commit
60c2bcc483
@ -1,6 +1,17 @@
|
||||
import "@polymer/paper-icon-button/paper-icon-button";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
customElement,
|
||||
html,
|
||||
LitElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
|
||||
import "../../../components/buttons/ha-call-api-button";
|
||||
import "../../../components/buttons/ha-call-service-button";
|
||||
@ -8,10 +19,184 @@ import "../../../components/ha-service-description";
|
||||
import "../../../components/ha-card";
|
||||
import "../ha-config-section";
|
||||
|
||||
class ZwaveNetwork extends PolymerElement {
|
||||
static get template() {
|
||||
@customElement("zwave-network")
|
||||
export class ZwaveNetwork extends LitElement {
|
||||
@property() public hass!: HomeAssistant;
|
||||
@property() public isWide!: boolean;
|
||||
@property() private _showHelp = false;
|
||||
|
||||
protected render(): TemplateResult | void {
|
||||
return html`
|
||||
<style include="iron-flex ha-style">
|
||||
<ha-config-section .isWide="${this.isWide}">
|
||||
<div style="position: relative" slot="header">
|
||||
<span>Z-Wave Network Management</span>
|
||||
<paper-icon-button
|
||||
class="toggle-help-icon"
|
||||
@click="${this._onHelpTap}"
|
||||
icon="hass:help-circle"
|
||||
></paper-icon-button>
|
||||
</div>
|
||||
<span slot="introduction">
|
||||
Run commands that affect the Z-Wave network. You won't get feedback on
|
||||
whether the command succeeded, but you can look in the OZW Log to try
|
||||
to figure out.
|
||||
</span>
|
||||
|
||||
<ha-card class="content">
|
||||
<div class="card-actions">
|
||||
<ha-call-service-button
|
||||
.hass=${this.hass}
|
||||
domain="zwave"
|
||||
service="add_node_secure"
|
||||
>
|
||||
Add Node Secure
|
||||
</ha-call-service-button>
|
||||
<ha-service-description
|
||||
.hass=${this.hass}
|
||||
domain="zwave"
|
||||
service="add_node_secure"
|
||||
?hidden=${!this._showHelp}
|
||||
>
|
||||
</ha-service-description>
|
||||
|
||||
<ha-call-service-button
|
||||
.hass=${this.hass}
|
||||
domain="zwave"
|
||||
service="add_node"
|
||||
>
|
||||
Add Node
|
||||
</ha-call-service-button>
|
||||
<ha-service-description
|
||||
.hass=${this.hass}
|
||||
domain="zwave"
|
||||
service="add_node"
|
||||
?hidden=${!this._showHelp}
|
||||
>
|
||||
</ha-service-description>
|
||||
|
||||
<ha-call-service-button
|
||||
.hass=${this.hass}
|
||||
domain="zwave"
|
||||
service="remove_node"
|
||||
>
|
||||
Remove Node
|
||||
</ha-call-service-button>
|
||||
<ha-service-description
|
||||
.hass=${this.hass}
|
||||
domain="zwave"
|
||||
service="remove_node"
|
||||
?hidden=${!this._showHelp}
|
||||
>
|
||||
</ha-service-description>
|
||||
</div>
|
||||
<div class="card-actions warning">
|
||||
<ha-call-service-button
|
||||
.hass=${this.hass}
|
||||
domain="zwave"
|
||||
service="cancel_command"
|
||||
>
|
||||
Cancel Command
|
||||
</ha-call-service-button>
|
||||
<ha-service-description
|
||||
.hass=${this.hass}
|
||||
domain="zwave"
|
||||
service="cancel_command"
|
||||
?hidden=${!this._showHelp}
|
||||
>
|
||||
</ha-service-description>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<ha-call-service-button
|
||||
.hass=${this.hass}
|
||||
domain="zwave"
|
||||
service="heal_network"
|
||||
>
|
||||
Heal Network
|
||||
</ha-call-service-button>
|
||||
<ha-service-description
|
||||
.hass=${this.hass}
|
||||
domain="zwave"
|
||||
service="heal_network"
|
||||
?hidden=${!this._showHelp}
|
||||
></ha-service-description>
|
||||
|
||||
<ha-call-service-button
|
||||
.hass=${this.hass}
|
||||
domain="zwave"
|
||||
service="start_network"
|
||||
>
|
||||
Start Network
|
||||
</ha-call-service-button>
|
||||
<ha-service-description
|
||||
.hass=${this.hass}
|
||||
domain="zwave"
|
||||
service="start_network"
|
||||
?hidden=${!this._showHelp}
|
||||
>
|
||||
</ha-service-description>
|
||||
|
||||
<ha-call-service-button
|
||||
.hass=${this.hass}
|
||||
domain="zwave"
|
||||
service="stop_network"
|
||||
>
|
||||
Stop Network
|
||||
</ha-call-service-button>
|
||||
<ha-service-description
|
||||
.hass=${this.hass}
|
||||
domain="zwave"
|
||||
service="stop_network"
|
||||
?hidden=${!this._showHelp}
|
||||
>
|
||||
</ha-service-description>
|
||||
|
||||
<ha-call-service-button
|
||||
.hass=${this.hass}
|
||||
domain="zwave"
|
||||
service="soft_reset"
|
||||
>
|
||||
Soft Reset
|
||||
</ha-call-service-button>
|
||||
<ha-service-description
|
||||
.hass=${this.hass}
|
||||
domain="zwave"
|
||||
service="soft_reset"
|
||||
?hidden=${!this._showHelp}
|
||||
>
|
||||
</ha-service-description>
|
||||
|
||||
<ha-call-service-button
|
||||
.hass=${this.hass}
|
||||
domain="zwave"
|
||||
service="test_network"
|
||||
>
|
||||
Test Network
|
||||
</ha-call-service-button>
|
||||
<ha-service-description
|
||||
.hass=${this.hass}
|
||||
domain="zwave"
|
||||
service="test_network"
|
||||
?hidden=${!this._showHelp}
|
||||
>
|
||||
</ha-service-description>
|
||||
|
||||
<ha-call-api-button .hass=${this.hass} path="zwave/saveconfig">
|
||||
Save Config
|
||||
</ha-call-api-button>
|
||||
</div>
|
||||
</ha-card>
|
||||
</ha-config-section>
|
||||
`;
|
||||
}
|
||||
|
||||
private _onHelpTap(): void {
|
||||
this._showHelp = !this._showHelp;
|
||||
}
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
haStyle,
|
||||
css`
|
||||
.content {
|
||||
margin-top: 24px;
|
||||
}
|
||||
@ -35,187 +220,19 @@ class ZwaveNetwork extends PolymerElement {
|
||||
ha-service-description {
|
||||
display: block;
|
||||
color: grey;
|
||||
padding: 0 8px 12px;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<ha-config-section is-wide="[[isWide]]">
|
||||
<div style="position: relative" slot="header">
|
||||
<span>Z-Wave Network Management</span>
|
||||
<paper-icon-button
|
||||
class="toggle-help-icon"
|
||||
on-click="helpTap"
|
||||
icon="hass:help-circle"
|
||||
></paper-icon-button>
|
||||
</div>
|
||||
<span slot="introduction">
|
||||
Run commands that affect the Z-Wave network. You won't get feedback on
|
||||
whether the command succeeded, but you can look in the OZW Log to try
|
||||
to figure out.
|
||||
</span>
|
||||
|
||||
<ha-card class="content">
|
||||
<div class="card-actions">
|
||||
<ha-call-service-button
|
||||
hass="[[hass]]"
|
||||
domain="zwave"
|
||||
service="add_node_secure"
|
||||
>
|
||||
Add Node Secure
|
||||
</ha-call-service-button>
|
||||
<ha-service-description
|
||||
hass="[[hass]]"
|
||||
domain="zwave"
|
||||
service="add_node_secure"
|
||||
hidden$="[[!showDescription]]"
|
||||
>
|
||||
</ha-service-description>
|
||||
|
||||
<ha-call-service-button
|
||||
hass="[[hass]]"
|
||||
domain="zwave"
|
||||
service="add_node"
|
||||
>
|
||||
Add Node
|
||||
</ha-call-service-button>
|
||||
<ha-service-description
|
||||
hass="[[hass]]"
|
||||
domain="zwave"
|
||||
service="add_node"
|
||||
hidden$="[[!showDescription]]"
|
||||
>
|
||||
</ha-service-description>
|
||||
|
||||
<ha-call-service-button
|
||||
hass="[[hass]]"
|
||||
domain="zwave"
|
||||
service="remove_node"
|
||||
>
|
||||
Remove Node
|
||||
</ha-call-service-button>
|
||||
<ha-service-description
|
||||
hass="[[hass]]"
|
||||
domain="zwave"
|
||||
service="remove_node"
|
||||
hidden$="[[!showDescription]]"
|
||||
>
|
||||
</ha-service-description>
|
||||
</div>
|
||||
<div class="card-actions warning">
|
||||
<ha-call-service-button
|
||||
hass="[[hass]]"
|
||||
domain="zwave"
|
||||
service="cancel_command"
|
||||
>
|
||||
Cancel Command
|
||||
</ha-call-service-button>
|
||||
<ha-service-description
|
||||
hass="[[hass]]"
|
||||
domain="zwave"
|
||||
service="cancel_command"
|
||||
hidden$="[[!showDescription]]"
|
||||
>
|
||||
</ha-service-description>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<ha-call-service-button
|
||||
hass="[[hass]]"
|
||||
domain="zwave"
|
||||
service="heal_network"
|
||||
>
|
||||
Heal Network
|
||||
</ha-call-service-button>
|
||||
|
||||
<ha-call-service-button
|
||||
hass="[[hass]]"
|
||||
domain="zwave"
|
||||
service="start_network"
|
||||
>
|
||||
Start Network
|
||||
</ha-call-service-button>
|
||||
<ha-service-description
|
||||
hass="[[hass]]"
|
||||
domain="zwave"
|
||||
service="start_network"
|
||||
hidden$="[[!showDescription]]"
|
||||
>
|
||||
</ha-service-description>
|
||||
|
||||
<ha-call-service-button
|
||||
hass="[[hass]]"
|
||||
domain="zwave"
|
||||
service="stop_network"
|
||||
>
|
||||
Stop Network
|
||||
</ha-call-service-button>
|
||||
<ha-service-description
|
||||
hass="[[hass]]"
|
||||
domain="zwave"
|
||||
service="stop_network"
|
||||
hidden$="[[!showDescription]]"
|
||||
>
|
||||
</ha-service-description>
|
||||
|
||||
<ha-call-service-button
|
||||
hass="[[hass]]"
|
||||
domain="zwave"
|
||||
service="soft_reset"
|
||||
>
|
||||
Soft Reset
|
||||
</ha-call-service-button>
|
||||
<ha-service-description
|
||||
hass="[[hass]]"
|
||||
domain="zwave"
|
||||
service="soft_reset"
|
||||
hidden$="[[!showDescription]]"
|
||||
>
|
||||
</ha-service-description>
|
||||
|
||||
<ha-call-service-button
|
||||
hass="[[hass]]"
|
||||
domain="zwave"
|
||||
service="test_network"
|
||||
>
|
||||
Test Network
|
||||
</ha-call-service-button>
|
||||
<ha-service-description
|
||||
hass="[[hass]]"
|
||||
domain="zwave"
|
||||
service="test_network"
|
||||
hidden$="[[!showDescription]]"
|
||||
>
|
||||
</ha-service-description>
|
||||
|
||||
<ha-call-api-button hass="[[hass]]" path="zwave/saveconfig">
|
||||
Save Config
|
||||
</ha-call-api-button>
|
||||
</div>
|
||||
</ha-card>
|
||||
</ha-config-section>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
hass: Object,
|
||||
|
||||
isWide: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
showDescription: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
helpTap() {
|
||||
this.showDescription = !this.showDescription;
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("zwave-network", ZwaveNetwork);
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"zwave-network": ZwaveNetwork;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user