mirror of
https://github.com/home-assistant/frontend.git
synced 2025-08-04 06:57:47 +00:00
Improve Z-Wave JS config dashboard styling (#26368)
This commit is contained in:
Jan-Philipp Benecke
GitHub
parent
343aa40bc8
commit
8fd70b3ae6
@ -157,380 +157,382 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
|
|||||||
.path=${mdiRefresh}
|
.path=${mdiRefresh}
|
||||||
.label=${this.hass!.localize("ui.common.refresh")}
|
.label=${this.hass!.localize("ui.common.refresh")}
|
||||||
></ha-icon-button>
|
></ha-icon-button>
|
||||||
${this._network
|
<div class="container">
|
||||||
? html`
|
${this._network
|
||||||
<ha-card class="content network-status">
|
? html`
|
||||||
<div class="card-content">
|
<ha-card class="content network-status">
|
||||||
<div class="heading">
|
<div class="card-content">
|
||||||
<div class="icon">
|
<div class="heading">
|
||||||
${this._status === "disconnected"
|
<div class="icon">
|
||||||
? html`<ha-spinner></ha-spinner>`
|
${this._status === "disconnected"
|
||||||
: html`
|
? html`<ha-spinner></ha-spinner>`
|
||||||
<ha-svg-icon
|
: html`
|
||||||
.path=${this._icon}
|
<ha-svg-icon
|
||||||
class="network-status-icon ${classMap({
|
.path=${this._icon}
|
||||||
[this._status!]: true,
|
class="network-status-icon ${classMap({
|
||||||
})}"
|
[this._status!]: true,
|
||||||
slot="item-icon"
|
})}"
|
||||||
></ha-svg-icon>
|
slot="item-icon"
|
||||||
`}
|
></ha-svg-icon>
|
||||||
</div>
|
`}
|
||||||
${this._status !== "disconnected"
|
</div>
|
||||||
? html`
|
${this._status !== "disconnected"
|
||||||
<div class="details">
|
? html`
|
||||||
Z-Wave
|
<div class="details">
|
||||||
${this.hass.localize(
|
Z-Wave
|
||||||
"ui.panel.config.zwave_js.common.network"
|
|
||||||
)}
|
|
||||||
${this.hass.localize(
|
|
||||||
`ui.panel.config.zwave_js.network_status.${this._status}`
|
|
||||||
)}<br />
|
|
||||||
<small>
|
|
||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
`ui.panel.config.zwave_js.dashboard.devices`,
|
"ui.panel.config.zwave_js.common.network"
|
||||||
{
|
|
||||||
count:
|
|
||||||
this._network.controller.nodes.length +
|
|
||||||
provisioningDevices,
|
|
||||||
}
|
|
||||||
)}
|
)}
|
||||||
${notReadyDevices > 0
|
${this.hass.localize(
|
||||||
? html`(${this.hass.localize(
|
`ui.panel.config.zwave_js.network_status.${this._status}`
|
||||||
`ui.panel.config.zwave_js.dashboard.not_ready`,
|
)}<br />
|
||||||
{ count: notReadyDevices }
|
<small>
|
||||||
)})`
|
${this.hass.localize(
|
||||||
: nothing}
|
`ui.panel.config.zwave_js.dashboard.devices`,
|
||||||
</small>
|
{
|
||||||
</div>
|
count:
|
||||||
`
|
this._network.controller.nodes.length +
|
||||||
|
provisioningDevices,
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
${notReadyDevices > 0
|
||||||
|
? html`(${this.hass.localize(
|
||||||
|
`ui.panel.config.zwave_js.dashboard.not_ready`,
|
||||||
|
{ count: notReadyDevices }
|
||||||
|
)})`
|
||||||
|
: nothing}
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
: nothing}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-actions">
|
||||||
|
<ha-button
|
||||||
|
appearance="plain"
|
||||||
|
href=${`/config/devices/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
|
||||||
|
>
|
||||||
|
${this.hass.localize("ui.panel.config.devices.caption")}
|
||||||
|
</ha-button>
|
||||||
|
<ha-button
|
||||||
|
appearance="plain"
|
||||||
|
href=${`/config/entities/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
|
||||||
|
>
|
||||||
|
${this.hass.localize("ui.panel.config.entities.caption")}
|
||||||
|
</ha-button>
|
||||||
|
${this._provisioningEntries?.length
|
||||||
|
? html`<ha-button
|
||||||
|
appearance="plain"
|
||||||
|
href=${`provisioned?config_entry=${this.configEntryId}`}
|
||||||
|
>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.provisioned_devices"
|
||||||
|
)}
|
||||||
|
</ha-button>`
|
||||||
: nothing}
|
: nothing}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</ha-card>
|
||||||
<div class="card-actions">
|
<ha-card header="Diagnostics">
|
||||||
<ha-button
|
<div class="card-content">
|
||||||
appearance="plain"
|
<div class="row">
|
||||||
href=${`/config/devices/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
|
<span>
|
||||||
>
|
|
||||||
${this.hass.localize("ui.panel.config.devices.caption")}
|
|
||||||
</ha-button>
|
|
||||||
<ha-button
|
|
||||||
appearance="plain"
|
|
||||||
href=${`/config/entities/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
|
|
||||||
>
|
|
||||||
${this.hass.localize("ui.panel.config.entities.caption")}
|
|
||||||
</ha-button>
|
|
||||||
${this._provisioningEntries?.length
|
|
||||||
? html`<ha-button
|
|
||||||
appearance="plain"
|
|
||||||
href=${`provisioned?config_entry=${this.configEntryId}`}
|
|
||||||
>
|
|
||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
"ui.panel.config.zwave_js.dashboard.provisioned_devices"
|
"ui.panel.config.zwave_js.dashboard.driver_version"
|
||||||
)}
|
)}:
|
||||||
</ha-button>`
|
</span>
|
||||||
: nothing}
|
<span>${this._network.client.driver_version}</span>
|
||||||
</div>
|
</div>
|
||||||
</ha-card>
|
<div class="row">
|
||||||
<ha-card header="Diagnostics">
|
<span>
|
||||||
<div class="card-content">
|
|
||||||
<div class="row">
|
|
||||||
<span>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.driver_version"
|
|
||||||
)}:
|
|
||||||
</span>
|
|
||||||
<span>${this._network.client.driver_version}</span>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<span>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.server_version"
|
|
||||||
)}:
|
|
||||||
</span>
|
|
||||||
<span>${this._network.client.server_version}</span>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<span>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.home_id"
|
|
||||||
)}:
|
|
||||||
</span>
|
|
||||||
<span>${this._network.controller.home_id}</span>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<span>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.server_url"
|
|
||||||
)}:
|
|
||||||
</span>
|
|
||||||
<span>${this._network.client.ws_server_url}</span>
|
|
||||||
</div>
|
|
||||||
<br />
|
|
||||||
<ha-expansion-panel
|
|
||||||
.header=${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.title"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<ha-list noninteractive>
|
|
||||||
<ha-list-item twoline hasmeta>
|
|
||||||
<span>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.messages_tx.label"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span slot="secondary">
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.messages_tx.tooltip"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span slot="meta"
|
|
||||||
>${this._statistics?.messages_tx ?? 0}</span
|
|
||||||
>
|
|
||||||
</ha-list-item>
|
|
||||||
<ha-list-item twoline hasmeta>
|
|
||||||
<span>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.messages_rx.label"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span slot="secondary">
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.messages_rx.tooltip"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span slot="meta"
|
|
||||||
>${this._statistics?.messages_rx ?? 0}</span
|
|
||||||
>
|
|
||||||
</ha-list-item>
|
|
||||||
<ha-list-item twoline hasmeta>
|
|
||||||
<span>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_tx.label"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span slot="secondary">
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_tx.tooltip"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span slot="meta"
|
|
||||||
>${this._statistics?.messages_dropped_tx ?? 0}</span
|
|
||||||
>
|
|
||||||
</ha-list-item>
|
|
||||||
<ha-list-item twoline hasmeta>
|
|
||||||
<span>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_rx.label"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span slot="secondary">
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_rx.tooltip"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span slot="meta"
|
|
||||||
>${this._statistics?.messages_dropped_rx ?? 0}</span
|
|
||||||
>
|
|
||||||
</ha-list-item>
|
|
||||||
<ha-list-item twoline hasmeta>
|
|
||||||
<span>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.nak.label"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span slot="secondary">
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.nak.tooltip"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span slot="meta">${this._statistics?.nak ?? 0}</span>
|
|
||||||
</ha-list-item>
|
|
||||||
<ha-list-item twoline hasmeta>
|
|
||||||
<span>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.can.label"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span slot="secondary">
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.can.tooltip"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span slot="meta">${this._statistics?.can ?? 0}</span>
|
|
||||||
</ha-list-item>
|
|
||||||
<ha-list-item twoline hasmeta>
|
|
||||||
<span>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.timeout_ack.label"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span slot="secondary">
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.timeout_ack.tooltip"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span slot="meta"
|
|
||||||
>${this._statistics?.timeout_ack ?? 0}</span
|
|
||||||
>
|
|
||||||
</ha-list-item>
|
|
||||||
<ha-list-item twoline hasmeta>
|
|
||||||
<span>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.timeout_response.label"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span slot="secondary">
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.timeout_response.tooltip"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span slot="meta"
|
|
||||||
>${this._statistics?.timeout_response ?? 0}</span
|
|
||||||
>
|
|
||||||
</ha-list-item>
|
|
||||||
<ha-list-item twoline hasmeta>
|
|
||||||
<span>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.timeout_callback.label"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span slot="secondary">
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.statistics.timeout_callback.tooltip"
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span slot="meta"
|
|
||||||
>${this._statistics?.timeout_callback ?? 0}</span
|
|
||||||
>
|
|
||||||
</ha-list-item>
|
|
||||||
</ha-list>
|
|
||||||
</ha-expansion-panel>
|
|
||||||
</div>
|
|
||||||
<div class="card-actions">
|
|
||||||
<ha-button
|
|
||||||
appearance="plain"
|
|
||||||
@click=${this._removeNodeClicked}
|
|
||||||
.disabled=${this._status !== "connected" ||
|
|
||||||
(this._network?.controller.inclusion_state !==
|
|
||||||
InclusionState.Idle &&
|
|
||||||
this._network?.controller.inclusion_state !==
|
|
||||||
InclusionState.SmartStart)}
|
|
||||||
>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.common.remove_a_node"
|
|
||||||
)}
|
|
||||||
</ha-button>
|
|
||||||
<ha-button
|
|
||||||
appearance="plain"
|
|
||||||
@click=${this._rebuildNetworkRoutesClicked}
|
|
||||||
.disabled=${this._status === "disconnected"}
|
|
||||||
>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.common.rebuild_network_routes"
|
|
||||||
)}
|
|
||||||
</ha-button>
|
|
||||||
</div>
|
|
||||||
</ha-card>
|
|
||||||
<ha-card>
|
|
||||||
<div class="card-header">
|
|
||||||
<h1>Third-party data reporting</h1>
|
|
||||||
${this._dataCollectionOptIn !== undefined
|
|
||||||
? html`
|
|
||||||
<ha-switch
|
|
||||||
.checked=${this._dataCollectionOptIn === true}
|
|
||||||
@change=${this._dataCollectionToggled}
|
|
||||||
></ha-switch>
|
|
||||||
`
|
|
||||||
: html` <ha-spinner size="small"></ha-spinner> `}
|
|
||||||
</div>
|
|
||||||
<div class="card-content">
|
|
||||||
<p>
|
|
||||||
Enable the reporting of anonymized telemetry and statistics
|
|
||||||
to the <em>Z-Wave JS organization</em>. This data will be
|
|
||||||
used to focus development efforts and improve the user
|
|
||||||
experience. Information about the data that is collected and
|
|
||||||
how it is used, including an example of the data collected,
|
|
||||||
can be found in the
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
href="https://zwave-js.github.io/node-zwave-js/#/data-collection/data-collection"
|
|
||||||
>Z-Wave JS data collection documentation</a
|
|
||||||
>.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</ha-card>
|
|
||||||
<ha-card
|
|
||||||
.header=${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.nvm_backup.title"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div class="card-content">
|
|
||||||
<p>
|
|
||||||
${this.hass.localize(
|
|
||||||
"ui.panel.config.zwave_js.dashboard.nvm_backup.description"
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="card-actions">
|
|
||||||
${this._backupProgress !== undefined
|
|
||||||
? html`<ha-progress-ring
|
|
||||||
size="small"
|
|
||||||
.value=${this._backupProgress}
|
|
||||||
></ha-progress-ring>
|
|
||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
"ui.panel.config.zwave_js.dashboard.nvm_backup.creating"
|
"ui.panel.config.zwave_js.dashboard.server_version"
|
||||||
)}
|
)}:
|
||||||
${this._backupProgress}%`
|
</span>
|
||||||
: this._restoreProgress !== undefined
|
<span>${this._network.client.server_version}</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.home_id"
|
||||||
|
)}:
|
||||||
|
</span>
|
||||||
|
<span>${this._network.controller.home_id}</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.server_url"
|
||||||
|
)}:
|
||||||
|
</span>
|
||||||
|
<span>${this._network.client.ws_server_url}</span>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<ha-expansion-panel
|
||||||
|
.header=${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.title"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<ha-list noninteractive>
|
||||||
|
<ha-list-item twoline hasmeta>
|
||||||
|
<span>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.messages_tx.label"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span slot="secondary">
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.messages_tx.tooltip"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span slot="meta"
|
||||||
|
>${this._statistics?.messages_tx ?? 0}</span
|
||||||
|
>
|
||||||
|
</ha-list-item>
|
||||||
|
<ha-list-item twoline hasmeta>
|
||||||
|
<span>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.messages_rx.label"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span slot="secondary">
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.messages_rx.tooltip"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span slot="meta"
|
||||||
|
>${this._statistics?.messages_rx ?? 0}</span
|
||||||
|
>
|
||||||
|
</ha-list-item>
|
||||||
|
<ha-list-item twoline hasmeta>
|
||||||
|
<span>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_tx.label"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span slot="secondary">
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_tx.tooltip"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span slot="meta"
|
||||||
|
>${this._statistics?.messages_dropped_tx ?? 0}</span
|
||||||
|
>
|
||||||
|
</ha-list-item>
|
||||||
|
<ha-list-item twoline hasmeta>
|
||||||
|
<span>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_rx.label"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span slot="secondary">
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_rx.tooltip"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span slot="meta"
|
||||||
|
>${this._statistics?.messages_dropped_rx ?? 0}</span
|
||||||
|
>
|
||||||
|
</ha-list-item>
|
||||||
|
<ha-list-item twoline hasmeta>
|
||||||
|
<span>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.nak.label"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span slot="secondary">
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.nak.tooltip"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span slot="meta">${this._statistics?.nak ?? 0}</span>
|
||||||
|
</ha-list-item>
|
||||||
|
<ha-list-item twoline hasmeta>
|
||||||
|
<span>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.can.label"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span slot="secondary">
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.can.tooltip"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span slot="meta">${this._statistics?.can ?? 0}</span>
|
||||||
|
</ha-list-item>
|
||||||
|
<ha-list-item twoline hasmeta>
|
||||||
|
<span>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.timeout_ack.label"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span slot="secondary">
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.timeout_ack.tooltip"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span slot="meta"
|
||||||
|
>${this._statistics?.timeout_ack ?? 0}</span
|
||||||
|
>
|
||||||
|
</ha-list-item>
|
||||||
|
<ha-list-item twoline hasmeta>
|
||||||
|
<span>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.timeout_response.label"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span slot="secondary">
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.timeout_response.tooltip"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span slot="meta"
|
||||||
|
>${this._statistics?.timeout_response ?? 0}</span
|
||||||
|
>
|
||||||
|
</ha-list-item>
|
||||||
|
<ha-list-item twoline hasmeta>
|
||||||
|
<span>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.timeout_callback.label"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span slot="secondary">
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.statistics.timeout_callback.tooltip"
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span slot="meta"
|
||||||
|
>${this._statistics?.timeout_callback ?? 0}</span
|
||||||
|
>
|
||||||
|
</ha-list-item>
|
||||||
|
</ha-list>
|
||||||
|
</ha-expansion-panel>
|
||||||
|
</div>
|
||||||
|
<div class="card-actions">
|
||||||
|
<ha-button
|
||||||
|
appearance="plain"
|
||||||
|
@click=${this._removeNodeClicked}
|
||||||
|
.disabled=${this._status !== "connected" ||
|
||||||
|
(this._network?.controller.inclusion_state !==
|
||||||
|
InclusionState.Idle &&
|
||||||
|
this._network?.controller.inclusion_state !==
|
||||||
|
InclusionState.SmartStart)}
|
||||||
|
>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.common.remove_a_node"
|
||||||
|
)}
|
||||||
|
</ha-button>
|
||||||
|
<ha-button
|
||||||
|
appearance="plain"
|
||||||
|
@click=${this._rebuildNetworkRoutesClicked}
|
||||||
|
.disabled=${this._status === "disconnected"}
|
||||||
|
>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.common.rebuild_network_routes"
|
||||||
|
)}
|
||||||
|
</ha-button>
|
||||||
|
</div>
|
||||||
|
</ha-card>
|
||||||
|
<ha-card>
|
||||||
|
<div class="card-header">
|
||||||
|
<h1>Third-party data reporting</h1>
|
||||||
|
${this._dataCollectionOptIn !== undefined
|
||||||
|
? html`
|
||||||
|
<ha-switch
|
||||||
|
.checked=${this._dataCollectionOptIn === true}
|
||||||
|
@change=${this._dataCollectionToggled}
|
||||||
|
></ha-switch>
|
||||||
|
`
|
||||||
|
: html` <ha-spinner size="small"></ha-spinner> `}
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<p>
|
||||||
|
Enable the reporting of anonymized telemetry and
|
||||||
|
statistics to the <em>Z-Wave JS organization</em>. This
|
||||||
|
data will be used to focus development efforts and improve
|
||||||
|
the user experience. Information about the data that is
|
||||||
|
collected and how it is used, including an example of the
|
||||||
|
data collected, can be found in the
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
href="https://zwave-js.github.io/node-zwave-js/#/data-collection/data-collection"
|
||||||
|
>Z-Wave JS data collection documentation</a
|
||||||
|
>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</ha-card>
|
||||||
|
<ha-card
|
||||||
|
.header=${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.nvm_backup.title"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div class="card-content">
|
||||||
|
<p>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.nvm_backup.description"
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-actions">
|
||||||
|
${this._backupProgress !== undefined
|
||||||
? html`<ha-progress-ring
|
? html`<ha-progress-ring
|
||||||
size="small"
|
size="small"
|
||||||
.value=${this._restoreProgress}
|
.value=${this._backupProgress}
|
||||||
></ha-progress-ring>
|
></ha-progress-ring>
|
||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
"ui.panel.config.zwave_js.dashboard.nvm_backup.restoring"
|
"ui.panel.config.zwave_js.dashboard.nvm_backup.creating"
|
||||||
)}
|
)}
|
||||||
${this._restoreProgress}%`
|
${this._backupProgress}%`
|
||||||
: html`<ha-button
|
: this._restoreProgress !== undefined
|
||||||
appearance="plain"
|
? html`<ha-progress-ring
|
||||||
@click=${this._downloadBackup}
|
size="small"
|
||||||
>
|
.value=${this._restoreProgress}
|
||||||
|
></ha-progress-ring>
|
||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
"ui.panel.config.zwave_js.dashboard.nvm_backup.download_backup"
|
"ui.panel.config.zwave_js.dashboard.nvm_backup.restoring"
|
||||||
)}
|
)}
|
||||||
</ha-button>
|
${this._restoreProgress}%`
|
||||||
<div class="upload-button">
|
: html`<ha-button
|
||||||
<ha-button
|
|
||||||
appearance="plain"
|
appearance="plain"
|
||||||
@click=${this._restoreButtonClick}
|
@click=${this._downloadBackup}
|
||||||
variant="danger"
|
|
||||||
>
|
>
|
||||||
<span class="button-content">
|
${this.hass.localize(
|
||||||
${this.hass.localize(
|
"ui.panel.config.zwave_js.dashboard.nvm_backup.download_backup"
|
||||||
"ui.panel.config.zwave_js.dashboard.nvm_backup.restore_backup"
|
)}
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</ha-button>
|
</ha-button>
|
||||||
<input
|
<div class="upload-button">
|
||||||
type="file"
|
<ha-button
|
||||||
id="nvm-restore-file"
|
appearance="plain"
|
||||||
accept=".bin"
|
@click=${this._restoreButtonClick}
|
||||||
@change=${this._handleRestoreFileSelected}
|
variant="danger"
|
||||||
style="display: none"
|
>
|
||||||
/>
|
<span class="button-content">
|
||||||
</div>
|
${this.hass.localize(
|
||||||
<ha-button
|
"ui.panel.config.zwave_js.dashboard.nvm_backup.restore_backup"
|
||||||
variant="danger"
|
)}
|
||||||
@click=${this._openConfigFlow}
|
</span>
|
||||||
class="migrate-button"
|
</ha-button>
|
||||||
>
|
<input
|
||||||
${this.hass.localize(
|
type="file"
|
||||||
"ui.panel.config.zwave_js.dashboard.nvm_backup.migrate"
|
id="nvm-restore-file"
|
||||||
)}
|
accept=".bin"
|
||||||
</ha-button>`}
|
@change=${this._handleRestoreFileSelected}
|
||||||
</div>
|
style="display: none"
|
||||||
</ha-card>
|
/>
|
||||||
`
|
</div>
|
||||||
: nothing}
|
<ha-button
|
||||||
|
variant="danger"
|
||||||
|
@click=${this._openConfigFlow}
|
||||||
|
class="migrate-button"
|
||||||
|
>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.zwave_js.dashboard.nvm_backup.migrate"
|
||||||
|
)}
|
||||||
|
</ha-button>`}
|
||||||
|
</div>
|
||||||
|
</ha-card>
|
||||||
|
`
|
||||||
|
: nothing}
|
||||||
|
</div>
|
||||||
<ha-fab
|
<ha-fab
|
||||||
slot="fab"
|
slot="fab"
|
||||||
.label=${this.hass.localize(
|
.label=${this.hass.localize(
|
||||||
@ -957,6 +959,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
|
|||||||
.card-actions {
|
.card-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-actions ha-progress-ring {
|
.card-actions ha-progress-ring {
|
||||||
@ -984,6 +987,10 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
|
|||||||
.migrate-button {
|
.migrate-button {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 8px 16px 16px;
|
||||||
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user