Show feedback for setting Z-Wave JS config parameters (#8956)

This commit is contained in:
Charles Garwood 2021-04-26 19:20:23 -04:00 committed by GitHub
parent 33703a3b53
commit 73bb346c00
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 102 additions and 14 deletions

View File

@ -29,6 +29,10 @@ export interface ZWaveJSNode {
} }
export interface ZWaveJSNodeConfigParams { export interface ZWaveJSNodeConfigParams {
[key: string]: ZWaveJSNodeConfigParam;
}
export interface ZWaveJSNodeConfigParam {
property: number; property: number;
value: any; value: any;
configuration_value_type: string; configuration_value_type: string;
@ -56,6 +60,12 @@ export interface ZWaveJSSetConfigParamData {
value: string | number; value: string | number;
} }
export interface ZWaveJSSetConfigParamResult {
value_id?: string;
status?: string;
error?: string;
}
export interface ZWaveJSDataCollectionStatus { export interface ZWaveJSDataCollectionStatus {
enabled: boolean; enabled: boolean;
opted_in: boolean; opted_in: boolean;
@ -115,7 +125,7 @@ export const fetchNodeConfigParameters = (
hass: HomeAssistant, hass: HomeAssistant,
entry_id: string, entry_id: string,
node_id: number node_id: number
): Promise<ZWaveJSNodeConfigParams[]> => ): Promise<ZWaveJSNodeConfigParams> =>
hass.callWS({ hass.callWS({
type: "zwave_js/get_config_parameters", type: "zwave_js/get_config_parameters",
entry_id, entry_id,
@ -129,7 +139,7 @@ export const setNodeConfigParameter = (
property: number, property: number,
value: number, value: number,
property_key?: number property_key?: number
): Promise<unknown> => { ): Promise<ZWaveJSSetConfigParamResult> => {
const data: ZWaveJSSetConfigParamData = { const data: ZWaveJSSetConfigParamData = {
type: "zwave_js/set_config_parameter", type: "zwave_js/set_config_parameter",
entry_id, entry_id,

View File

@ -1,3 +1,9 @@
import {
mdiCheckCircle,
mdiCircle,
mdiProgressClock,
mdiCloseCircle,
} from "@mdi/js";
import "../../../../../components/ha-settings-row"; import "../../../../../components/ha-settings-row";
import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox"; import "@polymer/paper-listbox/paper-listbox";
@ -24,6 +30,7 @@ import {
fetchNodeConfigParameters, fetchNodeConfigParameters,
setNodeConfigParameter, setNodeConfigParameter,
ZWaveJSNodeConfigParams, ZWaveJSNodeConfigParams,
ZWaveJSSetConfigParamResult,
} from "../../../../../data/zwave_js"; } from "../../../../../data/zwave_js";
import "../../../../../layouts/hass-tabs-subpage"; import "../../../../../layouts/hass-tabs-subpage";
import { haStyle } from "../../../../../resources/styles"; import { haStyle } from "../../../../../resources/styles";
@ -38,6 +45,13 @@ import {
import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin"; import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { UnsubscribeFunc } from "home-assistant-js-websocket";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { classMap } from "lit-html/directives/class-map";
const icons = {
accepted: mdiCheckCircle,
queued: mdiProgressClock,
error: mdiCloseCircle,
};
const getDevice = memoizeOne( const getDevice = memoizeOne(
( (
@ -77,7 +91,12 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
@property({ type: Array }) @property({ type: Array })
private _deviceRegistryEntries?: DeviceRegistryEntry[]; private _deviceRegistryEntries?: DeviceRegistryEntry[];
@internalProperty() private _config?: ZWaveJSNodeConfigParams[]; @internalProperty() private _config?: ZWaveJSNodeConfigParams;
@internalProperty() private _results: Record<
string,
ZWaveJSSetConfigParamResult
> = {};
@internalProperty() private _error?: string; @internalProperty() private _error?: string;
@ -178,6 +197,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
} }
private _generateConfigBox(id, item): TemplateResult { private _generateConfigBox(id, item): TemplateResult {
const result = this._results[id];
const labelAndDescription = html` const labelAndDescription = html`
<span slot="heading">${item.metadata.label}</span> <span slot="heading">${item.metadata.label}</span>
<span slot="description"> <span slot="description">
@ -192,6 +212,26 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
)} )}
</em>` </em>`
: ""} : ""}
${result?.status
? html` <p
class="result ${classMap({
[result.status]: true,
})}"
>
<ha-svg-icon
.path=${icons[result.status] ? icons[result.status] : mdiCircle}
class="result-icon"
slot="item-icon"
></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.zwave_js.node_config.set_param_" +
result.status
)}
${result.status === "error" && result.error
? html` <br /><em>${result.error}</em> `
: ""}
</p>`
: ""}
</span> </span>
`; `;
@ -293,6 +333,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
} }
private _switchToggled(ev) { private _switchToggled(ev) {
this.setResult(ev.target.key, undefined);
this._updateConfigParameter(ev.target, ev.target.checked ? 1 : 0); this._updateConfigParameter(ev.target, ev.target.checked ? 1 : 0);
} }
@ -303,6 +344,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
if (this._config![ev.target.key].value === ev.target.selected) { if (this._config![ev.target.key].value === ev.target.selected) {
return; return;
} }
this.setResult(ev.target.key, undefined);
this._updateConfigParameter(ev.target, Number(ev.target.selected)); this._updateConfigParameter(ev.target, Number(ev.target.selected));
} }
@ -321,20 +363,41 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
if (Number(this._config![ev.target.key].value) === value) { if (Number(this._config![ev.target.key].value) === value) {
return; return;
} }
this.setResult(ev.target.key, undefined);
this.debouncedUpdate(ev.target, value); this.debouncedUpdate(ev.target, value);
} }
private _updateConfigParameter(target, value) { private async _updateConfigParameter(target, value) {
const nodeId = getNodeId(this._device!); const nodeId = getNodeId(this._device!);
setNodeConfigParameter( try {
this.hass, const result = await setNodeConfigParameter(
this.configEntryId!, this.hass,
nodeId!, this.configEntryId!,
target.property, nodeId!,
value, target.property,
target.propertyKey ? target.propertyKey : undefined value,
); target.propertyKey ? target.propertyKey : undefined
this._config![target.key].value = value; );
this._config![target.key].value = value;
this.setResult(target.key, result.status);
} catch (error) {
this.setError(target.key, error.message);
}
}
private setResult(key: string, value: string | undefined) {
if (value === undefined) {
delete this._results[key];
this.requestUpdate();
} else {
this._results = { ...this._results, [key]: { status: value } };
}
}
private setError(key: string, message: string) {
const errorParam = { status: "error", error: message };
this._results = { ...this._results, [key]: errorParam };
} }
private get _device(): DeviceRegistryEntry | undefined { private get _device(): DeviceRegistryEntry | undefined {
@ -369,6 +432,18 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
return [ return [
haStyle, haStyle,
css` css`
.accepted {
color: var(--success-color);
}
.queued {
color: var(--warning-color);
}
.error {
color: var(--error-color);
}
.secondary { .secondary {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }

View File

@ -2606,7 +2606,10 @@
"zwave_js_device_database": "Z-Wave JS Device Database", "zwave_js_device_database": "Z-Wave JS Device Database",
"battery_device_notice": "Battery devices must be awake to update their config. Please refer to your device manual for instructions on how to wake the device.", "battery_device_notice": "Battery devices must be awake to update their config. Please refer to your device manual for instructions on how to wake the device.",
"parameter_is_read_only": "This parameter is read-only.", "parameter_is_read_only": "This parameter is read-only.",
"error_device_not_found": "Device not found" "error_device_not_found": "Device not found",
"set_param_accepted": "The parameter has been updated.",
"set_param_queued": "The parameter change has been queued, and will be updated when the device wakes up.",
"set_param_error": "An error occurred."
}, },
"node_status": { "node_status": {
"unknown": "Unknown", "unknown": "Unknown",