Tweak ZJS dashboard (#10772)
This commit is contained in:
Paulus Schoutsen
GitHub
parent
2100603cdc
commit
e99f20c4f3
|
|
@ -1,10 +1,17 @@
|
|||
import "@material/mwc-button/mwc-button";
|
||||
import { mdiAlertCircle, mdiCheckCircle, mdiCircle, mdiRefresh } from "@mdi/js";
|
||||
import {
|
||||
mdiAlertCircle,
|
||||
mdiCheckCircle,
|
||||
mdiCircle,
|
||||
mdiPlus,
|
||||
mdiRefresh,
|
||||
} from "@mdi/js";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import "../../../../../components/ha-card";
|
||||
import "../../../../../components/ha-icon-button";
|
||||
import "../../../../../components/ha-fab";
|
||||
import "../../../../../components/ha-icon-next";
|
||||
import "../../../../../components/ha-svg-icon";
|
||||
import { getSignedPath } from "../../../../../data/auth";
|
||||
|
|
@ -36,6 +43,7 @@ import { showZWaveJSHealNetworkDialog } from "./show-dialog-zwave_js-heal-networ
|
|||
import { showZWaveJSRemoveNodeDialog } from "./show-dialog-zwave_js-remove-node";
|
||||
import { configTabs } from "./zwave_js-config-router";
|
||||
import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-options-flow";
|
||||
import { computeRTL } from "../../../../../common/util/compute_rtl";
|
||||
|
||||
@customElement("zwave_js-config-dashboard")
|
||||
class ZWaveJSConfigDashboard extends LitElement {
|
||||
|
|
@ -76,6 +84,9 @@ class ZWaveJSConfigDashboard extends LitElement {
|
|||
return this._renderErrorScreen();
|
||||
}
|
||||
|
||||
const notReadyDevices =
|
||||
this._nodes?.filter((node) => node.ready).length ?? 0;
|
||||
|
||||
return html`
|
||||
<hass-tabs-subpage
|
||||
.hass=${this.hass}
|
||||
|
|
@ -128,32 +139,25 @@ class ZWaveJSConfigDashboard extends LitElement {
|
|||
${this.hass.localize(
|
||||
`ui.panel.config.zwave_js.network_status.${this._status}`
|
||||
)}<br />
|
||||
<small
|
||||
>${this._network.client.ws_server_url}</small
|
||||
>
|
||||
<small>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.zwave_js.dashboard.devices`,
|
||||
{
|
||||
count:
|
||||
this._network.controller.nodes.length,
|
||||
}
|
||||
)}
|
||||
${notReadyDevices > 0
|
||||
? html`(${this.hass.localize(
|
||||
`ui.panel.config.zwave_js.dashboard.not_ready`,
|
||||
{ count: notReadyDevices }
|
||||
)})`
|
||||
: ""}
|
||||
</small>
|
||||
</div>
|
||||
`
|
||||
: ``}
|
||||
</div>
|
||||
<div class="secondary">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.dashboard.driver_version"
|
||||
)}:
|
||||
${this._network.client.driver_version}<br />
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.dashboard.server_version"
|
||||
)}:
|
||||
${this._network.client.server_version}<br />
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.dashboard.home_id"
|
||||
)}:
|
||||
${this._network.controller.home_id}<br />
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.dashboard.nodes_ready"
|
||||
)}:
|
||||
${this._nodes?.filter((node) => node.ready).length ?? 0} /
|
||||
${this._network.controller.nodes.length}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<a
|
||||
|
|
@ -172,22 +176,56 @@ class ZWaveJSConfigDashboard extends LitElement {
|
|||
)}
|
||||
</mwc-button>
|
||||
</a>
|
||||
<mwc-button @click=${this._addNodeClicked}>
|
||||
</div>
|
||||
</ha-card>
|
||||
<ha-card header="Diagnostics">
|
||||
<div class="card-content">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.dashboard.driver_version"
|
||||
)}:
|
||||
${this._network.client.driver_version}<br />
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.dashboard.server_version"
|
||||
)}:
|
||||
${this._network.client.server_version}<br />
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.dashboard.home_id"
|
||||
)}:
|
||||
${this._network.controller.home_id}<br />
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.dashboard.server_url"
|
||||
)}:
|
||||
${this._network.client.ws_server_url}<br />
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<mwc-button
|
||||
@click=${this._dumpDebugClicked}
|
||||
.disabled=${this._status === "connecting"}
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.common.add_node"
|
||||
"ui.panel.config.zwave_js.dashboard.dump_debug"
|
||||
)}
|
||||
</mwc-button>
|
||||
<mwc-button @click=${this._removeNodeClicked}>
|
||||
<mwc-button
|
||||
@click=${this._removeNodeClicked}
|
||||
.disabled=${this._status === "connecting"}
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.common.remove_node"
|
||||
)}
|
||||
</mwc-button>
|
||||
<mwc-button @click=${this._healNetworkClicked}>
|
||||
<mwc-button
|
||||
@click=${this._healNetworkClicked}
|
||||
.disabled=${this._status === "connecting"}
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.common.heal_network"
|
||||
)}
|
||||
</mwc-button>
|
||||
<mwc-button @click=${this._openOptionFlow}>
|
||||
<mwc-button
|
||||
@click=${this._openOptionFlow}
|
||||
.disabled=${this._status === "connecting"}
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.common.reconfigure_server"
|
||||
)}
|
||||
|
|
@ -229,12 +267,19 @@ class ZWaveJSConfigDashboard extends LitElement {
|
|||
</ha-card>
|
||||
`
|
||||
: ``}
|
||||
<button class="link dump" @click=${this._dumpDebugClicked}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.dashboard.dump_debug"
|
||||
)}
|
||||
</button>
|
||||
</ha-config-section>
|
||||
<ha-fab
|
||||
slot="fab"
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.common.add_node"
|
||||
)}
|
||||
.disabled=${this._status === "connecting"}
|
||||
extended
|
||||
?rtl=${computeRTL(this.hass)}
|
||||
@click=${this._addNodeClicked}
|
||||
>
|
||||
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
|
||||
</ha-fab>
|
||||
</hass-tabs-subpage>
|
||||
`;
|
||||
}
|
||||
|
|
@ -486,7 +531,6 @@ class ZWaveJSConfigDashboard extends LitElement {
|
|||
.network-status div.heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.network-status div.heading .icon {
|
||||
|
|
|
|||
|
|
@ -2808,8 +2808,10 @@
|
|||
"driver_version": "Driver Version",
|
||||
"server_version": "Server Version",
|
||||
"home_id": "Home ID",
|
||||
"nodes_ready": "Devices ready",
|
||||
"dump_debug": "Download a dump of your network to help diagnose issues",
|
||||
"server_url": "Server URL",
|
||||
"devices": "{count} {count, plural,\n one {device}\n other {devices}\n}",
|
||||
"not_ready": "{count} not ready",
|
||||
"dump_debug": "Download data",
|
||||
"dump_dead_nodes_title": "Some of your devices are dead",
|
||||
"dump_dead_nodes_text": "Some of your devices didn't respond and are assumed dead. These will not be fully exported.",
|
||||
"dump_not_ready_title": "Not all devices are ready yet",
|
||||
|
|
|
|||
Loading…
Reference in New Issue