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

src/data/zwave_js.ts

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

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts

@@ -1,3 +1,9 @@
+import {
+  mdiCheckCircle,
+  mdiCircle,
+  mdiProgressClock,
+  mdiCloseCircle,
+} from "@mdi/js";
 import "../../../../../components/ha-settings-row";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
@@ -24,6 +30,7 @@ import {
   fetchNodeConfigParameters,
   setNodeConfigParameter,
   ZWaveJSNodeConfigParams,
+  ZWaveJSSetConfigParamResult,
 } from "../../../../../data/zwave_js";
 import "../../../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../../../resources/styles";
@@ -38,6 +45,13 @@ import {
 import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import memoizeOne from "memoize-one";
+import { classMap } from "lit-html/directives/class-map";
+
+const icons = {
+  accepted: mdiCheckCircle,
+  queued: mdiProgressClock,
+  error: mdiCloseCircle,
+};
 
 const getDevice = memoizeOne(
   (
@@ -77,7 +91,12 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
   @property({ type: Array })
   private _deviceRegistryEntries?: DeviceRegistryEntry[];
 
-  @internalProperty() private _config?: ZWaveJSNodeConfigParams[];
+  @internalProperty() private _config?: ZWaveJSNodeConfigParams;
+
+  @internalProperty() private _results: Record<
+    string,
+    ZWaveJSSetConfigParamResult
+  > = {};
 
   @internalProperty() private _error?: string;
 
@@ -178,6 +197,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
   }
 
   private _generateConfigBox(id, item): TemplateResult {
+    const result = this._results[id];
     const labelAndDescription = html`
       <span slot="heading">${item.metadata.label}</span>
       <span slot="description">
@@ -192,6 +212,26 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
               )}
             </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>
     `;
 
@@ -293,6 +333,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
   }
 
   private _switchToggled(ev) {
+    this.setResult(ev.target.key, undefined);
     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) {
       return;
     }
+    this.setResult(ev.target.key, undefined);
 
     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) {
       return;
     }
+    this.setResult(ev.target.key, undefined);
     this.debouncedUpdate(ev.target, value);
   }
 
-  private _updateConfigParameter(target, value) {
+  private async _updateConfigParameter(target, value) {
     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 {
@@ -369,6 +432,18 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
     return [
       haStyle,
       css`
+        .accepted {
+          color: var(--success-color);
+        }
+
+        .queued {
+          color: var(--warning-color);
+        }
+
+        .error {
+          color: var(--error-color);
+        }
+
         .secondary {
           color: var(--secondary-text-color);
         }

src/translations/en.json

@@ -2606,7 +2606,10 @@
             "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.",
             "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": {
             "unknown": "Unknown",