@matter-server/dashboard 0.3.6 → 0.3.7

package/src/components/dialogs/commission-node-dialog/commission-node-wifi.ts

@@ -40,16 +40,24 @@ export class CommissionNodeWifi extends LitElement {
                 <br />
                 <md-outlined-button @click=${handleAsync(() => this._setWifiCredentials())} .disabled="${this._loading}"
                     >Set WiFi Credentials</md-outlined-button
-                >${this._loading
-                    ? html`<md-circular-progress indeterminate .visible="${this._loading}"></md-circular-progress>`
-                    : nothing}`;
+                >${
+                    this._loading
+                        ? html`<md-circular-progress indeterminate .visible="${this._loading}"></md-circular-progress>`
+                        : nothing
+                }`;
         }
         return html`<md-outlined-text-field label="Pairing code" .disabled="${this._loading}"> </md-outlined-text-field>
             <br />
             <br />
             <md-outlined-button @click=${handleAsync(() => this._commissionNode())} .disabled="${this._loading}"
                 >Commission</md-outlined-button
-            >${this._loading ? html`<md-circular-progress indeterminate></md-circular-progress>` : nothing}`;
+            >${
+                this._loading
+                    ? html`
+                          <md-circular-progress indeterminate></md-circular-progress>
+                      `
+                    : nothing
+            }`;
     }
 
     private async _setWifiCredentials() {

package/src/components/dialogs/settings/log-level-dialog.ts

@@ -92,9 +92,12 @@ export class LogLevelDialog extends LitElement {
             <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
                 <div slot="headline">Server Log Settings</div>
                 <div slot="content">
-                    ${this._loading
-                        ? html`<p class="loading">Loading...</p>`
-                        : html`
+                    ${
+                        this._loading
+                            ? html`
+                                  <p class="loading">Loading...</p>
+                              `
+                            : html`
                               <p class="hint">Changes are temporary and will be reset on the next server restart.</p>
                               <div class="form-field">
                                   <label>Console Log Level</label>
@@ -111,8 +114,9 @@ export class LogLevelDialog extends LitElement {
                                       )}
                                   </md-outlined-select>
                               </div>
-                              ${this._fileLevel !== null
-                                  ? html`
+                              ${
+                                  this._fileLevel !== null
+                                      ? html`
                                         <div class="form-field">
                                             <label>File Log Level</label>
                                             <md-outlined-select name="file" .value=${this._fileLevel}>
@@ -129,8 +133,10 @@ export class LogLevelDialog extends LitElement {
                                             </md-outlined-select>
                                         </div>
                                     `
-                                  : nothing}
-                          `}
+                                      : nothing
+                              }
+                          `
+                    }
                 </div>
                 <div slot="actions">
                     <md-text-button @click=${this._close}>Cancel</md-text-button>

package/src/pages/cluster-commands/clusters/basic-information-commands.ts

@@ -74,9 +74,13 @@ export class BasicInformationClusterCommands extends BaseClusterCommands {
             <details class="command-panel">
                 <summary>Node Label</summary>
                 <div class="command-content">
-                    ${!this._isNodeAvailable
-                        ? html`<div class="offline-warning">Node is offline - cannot edit label</div>`
-                        : nothing}
+                    ${
+                        !this._isNodeAvailable
+                            ? html`
+                                  <div class="offline-warning">Node is offline - cannot edit label</div>
+                              `
+                            : nothing
+                    }
                     <div class="command-row">
                         <md-outlined-text-field
                             label="Node Label"

package/src/pages/components/footer.ts

@@ -13,9 +13,7 @@ export class DashboardFooter extends LitElement {
         return html`
             <div class="footer">
                 The OHF Matter Server is a project by the Open Home Foundation.
-                <a href="https://www.openhomefoundation.org/structure/#support-our-work" target="_blank"
-                    >Support development</a
-                >
+                <a href="https://www.openhomefoundation.org/structure/#support-our-work" target="_blank">Support development</a>
             </div>
         `;
     }

package/src/pages/components/header.ts

@@ -107,22 +107,26 @@ export class DashboardHeader extends LitElement {
                     aria-current=${this.activeView === "nodes" ? "page" : nothing}
                     >Nodes</a
                 >
-                ${showThreadTab
-                    ? html`<a
+                ${
+                    showThreadTab
+                        ? html`<a
                           href="#thread"
                           class="nav-tab ${this.activeView === "thread" ? "active" : ""}"
                           aria-current=${this.activeView === "thread" ? "page" : nothing}
                           >Thread</a
                       >`
-                    : nothing}
-                ${showWifiTab
-                    ? html`<a
+                        : nothing
+                }
+                ${
+                    showWifiTab
+                        ? html`<a
                           href="#wifi"
                           class="nav-tab ${this.activeView === "wifi" ? "active" : ""}"
                           aria-current=${this.activeView === "wifi" ? "page" : nothing}
                           >WiFi</a
                       >`
-                    : nothing}
+                        : nothing
+                }
             </nav>
         `;
     }
@@ -131,13 +135,15 @@ export class DashboardHeader extends LitElement {
         return html`
             <div class="header">
                 <!-- optional back button -->
-                ${this.backButton
-                    ? html` <a .href=${this.backButton}>
+                ${
+                    this.backButton
+                        ? html` <a .href=${this.backButton}>
                           <md-icon-button>
                               <ha-svg-icon .path=${mdiArrowLeft}></ha-svg-icon>
                           </md-icon-button>
                       </a>`
-                    : ""}
+                        : ""
+                }
 
                 <div class="title">${this.title ?? ""}</div>
                 ${this._renderNavTabs()}
@@ -150,25 +156,29 @@ export class DashboardHeader extends LitElement {
                         `;
                     })}
                     <!-- settings button (only when connected) -->
-                    ${this.client
-                        ? html`
+                    ${
+                        this.client
+                            ? html`
                               <md-icon-button @click=${this._openSettings} title="Server Settings">
                                   <ha-svg-icon .path=${mdiCog}></ha-svg-icon>
                               </md-icon-button>
                           `
-                        : nothing}
+                            : nothing
+                    }
                     <!-- theme toggle button -->
                     <md-icon-button @click=${this._cycleTheme} .title=${this._getThemeTooltip()}>
                         <ha-svg-icon .path=${this._getThemeIcon()}></ha-svg-icon>
                     </md-icon-button>
                     <!-- optional logout button (only when client exists and not in production) -->
-                    ${this.client && !this.client.isProduction
-                        ? html`
+                    ${
+                        this.client && !this.client.isProduction
+                            ? html`
                               <md-icon-button @click=${this.client.disconnect}>
                                   <ha-svg-icon .path=${mdiLogout}></ha-svg-icon>
                               </md-icon-button>
                           `
-                        : nothing}
+                            : nothing
+                    }
                 </div>
             </div>
         `;

package/src/pages/components/node-details.ts

@@ -11,18 +11,17 @@ import "@material/web/divider/divider";
 import "@material/web/iconbutton/icon-button";
 import "@material/web/list/list";
 import "@material/web/list/list-item";
-import { mdiChatProcessing, mdiLink, mdiShareVariant, mdiTrashCan, mdiUpdate } from "@mdi/js";
-import { getDeviceIcon } from "../../util/device-icons.js";
-
 import { consume } from "@lit/context";
 import { MatterClient, MatterNode } from "@matter-server/ws-client";
+import { mdiChatProcessing, mdiLink, mdiShareVariant, mdiTrashCan, mdiUpdate } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { DeviceType } from "../../client/models/descriptions.js";
 import { showAlertDialog, showPromptDialog } from "../../components/dialog-box/show-dialog-box.js";
 import { showNodeBindingDialog } from "../../components/dialogs/binding/show-node-binding-dialog.js";
-import "../../components/ha-svg-icon";
 import { handleAsync } from "../../util/async-handler.js";
+import "../../components/ha-svg-icon";
+import { getDeviceIcon } from "../../util/device-icons.js";
 import { getEndpointDeviceTypes } from "../matter-endpoint-view.js";
 import { bindingContext } from "./context.js";
 
@@ -82,7 +81,13 @@ export class NodeDetails extends LitElement {
                     <ha-svg-icon slot="start" class="device-icon" .path=${getDeviceIcon(this.node)}></ha-svg-icon>
                     <div slot="headline">
                         <b>${this.node.nodeLabel || "Node Info"}</b>
-                        ${this.node.available ? nothing : html`<span class="status">OFFLINE</span>`}
+                        ${
+                            this.node.available
+                                ? nothing
+                                : html`
+                                      <span class="status">OFFLINE</span>
+                                  `
+                        }
                     </div>
                 </md-list-item>
                 <md-list-item>
@@ -96,48 +101,56 @@ export class NodeDetails extends LitElement {
                     </div>
                     <div slot="supporting-text"><span class="left">Is bridge: </span>${this.node.is_bridge}</div>
                     <div slot="supporting-text"><span class="left">Serialnumber: </span>${this.node.serialNumber}</div>
-                    ${this.node.matter_version
-                        ? html`<div slot="supporting-text">
+                    ${
+                        this.node.matter_version
+                            ? html`<div slot="supporting-text">
                               <span class="left">Matter version: </span>${this.node.matter_version}
                           </div>`
-                        : nothing}
-                    ${this.node.is_bridge
-                        ? ""
-                        : html` <div slot="supporting-text">
+                            : nothing
+                    }
+                    ${
+                        this.node.is_bridge
+                            ? ""
+                            : html` <div slot="supporting-text">
                               <span class="left">All device types: </span>${getNodeDeviceTypes(this.node)
                                   .map(deviceType => {
                                       return deviceType.label;
                                   })
                                   .join(" / ")}
-                          </div>`}
+                          </div>`
+                    }
                 </md-list-item>
                 <md-list-item>
                     <div class="btn-row">
                         <md-outlined-button @click=${handleAsync(() => this._reinterview())}
                             >Interview<ha-svg-icon slot="icon" .path=${mdiChatProcessing}></ha-svg-icon
                         ></md-outlined-button>
-                        ${this._updateInitiated
-                            ? html` <md-outlined-button disabled
+                        ${
+                            this._updateInitiated
+                                ? html` <md-outlined-button disabled
                                   >Checking for updates<ha-svg-icon slot="icon" .path=${mdiUpdate}></ha-svg-icon
                               ></md-outlined-button>`
-                            : (this.node.updateState ?? 0) > 1
-                              ? html` <md-outlined-button disabled
+                                : (this.node.updateState ?? 0) > 1
+                                  ? html` <md-outlined-button disabled
                                     >${getUpdateStateLabel(
                                         this.node.updateState!,
                                         this.node.updateStateProgress,
                                     )}<ha-svg-icon slot="icon" .path=${mdiUpdate}></ha-svg-icon
                                 ></md-outlined-button>`
-                              : html`<md-outlined-button @click=${handleAsync(() => this._searchUpdate())}
+                                  : html`<md-outlined-button @click=${handleAsync(() => this._searchUpdate())}
                                     >Update<ha-svg-icon slot="icon" .path=${mdiUpdate}></ha-svg-icon
-                                ></md-outlined-button>`}
-                        ${bindings
-                            ? html`
+                                ></md-outlined-button>`
+                        }
+                        ${
+                            bindings
+                                ? html`
                                   <md-outlined-button @click=${handleAsync(() => this._binding())}>
                                       Binding
                                       <ha-svg-icon slot="icon" .path=${mdiLink}></ha-svg-icon>
                                   </md-outlined-button>
                               `
-                            : nothing}
+                                : nothing
+                        }
 
                         <md-outlined-button @click=${handleAsync(() => this._openCommissioningWindow())}
                             >Share<ha-svg-icon slot="icon" .path=${mdiShareVariant}></ha-svg-icon

package/src/pages/components/server-details.ts

@@ -32,7 +32,13 @@ export class ServerDetails extends LitElement {
         <md-list-item>
             <div slot="headline">
                 <b>Open Home Foundation Matter Server ${this.client.isProduction ? "" : `(${this.client.serverBaseAddress})`}</b>
-                ${this.client.connection.connected ? nothing : html`<span class="status">OFFLINE</span>`}
+                ${
+                    this.client.connection.connected
+                        ? nothing
+                        : html`
+                              <span class="status">OFFLINE</span>
+                          `
+                }
       </div>
         </md-list-item>
         <md-list-item>

package/src/pages/matter-cluster-view.ts

@@ -17,10 +17,10 @@ import { clusters } from "../client/models/descriptions.js";
 import { showAlertDialog } from "../components/dialog-box/show-dialog-box.js";
 import "../components/ha-svg-icon";
 import "../pages/components/node-details";
-import { bindingContext } from "./components/context.js";
 // Cluster command components (auto-register on import)
 import { formatHex, formatNodeAddress, getEffectiveFabricIndex } from "../util/format_hex.js";
 import { getClusterCommandsTag } from "./cluster-commands/index.js";
+import { bindingContext } from "./components/context.js";
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -118,23 +118,27 @@ class MatterClusterView extends LitElement {
                         (attribute, index) => html`
                             <md-list-item class=${index % 2 === 1 ? "alternate-row" : ""}>
                                 <div slot="headline">
-                                    ${clusters[this.cluster!]?.attributes[attribute.key]?.label ??
-                                    "Custom/Unknown Attribute"}
+                                    ${
+                                        clusters[this.cluster!]?.attributes[attribute.key]?.label ??
+                                        "Custom/Unknown Attribute"
+                                    }
                                 </div>
                                 <div slot="supporting-text">
                                     AttributeId: ${attribute.key} (${formatHex(attribute.key)}) - Value type:
                                     ${clusters[this.cluster!]?.attributes[attribute.key]?.type ?? "unknown"}
                                 </div>
                                 <div slot="end">
-                                    ${toBigIntAwareJson(attribute.value).length > 20
-                                        ? html`<button
+                                    ${
+                                        toBigIntAwareJson(attribute.value).length > 20
+                                            ? html`<button
                                               @click=${() => {
                                                   this._showAttributeValue(attribute.value);
                                               }}
                                           >
                                               Show value
                                           </button>`
-                                        : html`<code>${toBigIntAwareJson(attribute.value)}</code>`}
+                                            : html`<code>${toBigIntAwareJson(attribute.value)}</code>`
+                                    }
                                 </div>
                             </md-list-item>
                         `,

package/src/pages/matter-node-view.ts

@@ -75,14 +75,16 @@ class MatterNodeView extends LitElement {
                 <div class="node-title-bar">
                     <ha-svg-icon class="node-icon" .path=${getDeviceIcon(this.node)}></ha-svg-icon>
                     <h2>Node ${this.node.node_id} <span class="node-id-hex">${nodeHex}</span></h2>
-                    ${showGraphButton
-                        ? html`
+                    ${
+                        showGraphButton
+                            ? html`
                               <a href=${graphUrl} class="show-in-graph-button" title="Show in ${graphViewType} graph">
                                   <ha-svg-icon .path=${mdiGraphOutline}></ha-svg-icon>
                                   <span class="button-text">Show in graph</span>
                               </a>
                           `
-                        : ""}
+                            : ""
+                    }
                 </div>
                 <node-details .node=${this.node} .client=${this.client}></node-details>
             </div>

package/src/pages/matter-server-view.ts

@@ -97,7 +97,13 @@ class MatterServerView extends LitElement {
                                             node.node_id,
                                         )})</span
                                     >
-                                    ${node.available ? "" : html`<span class="status">OFFLINE</span>`}
+                                    ${
+                                        node.available
+                                            ? ""
+                                            : html`
+                                                  <span class="status">OFFLINE</span>
+                                              `
+                                    }
                                 </div>
                                 <div slot="supporting-text">
                                     ${node.nodeLabel ? `${node.nodeLabel} | ` : nothing} ${node.vendorName} |

package/src/pages/network/device-panel.ts

@@ -96,8 +96,9 @@ export class DevicePanel extends LitElement {
                         class="expand-icon"
                     ></ha-svg-icon>
                 </div>
-                ${this._isExpanded
-                    ? html`
+                ${
+                    this._isExpanded
+                        ? html`
                           <md-list class="device-list">
                               ${this.nodeIds.map(nodeId => {
                                   const node = this.nodes[nodeId.toString()];
@@ -113,7 +114,8 @@ export class DevicePanel extends LitElement {
                               })}
                           </md-list>
                       `
-                    : nothing}
+                        : nothing
+                }
             </div>
         `;
     }