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}
|
||||
.label=${this.hass!.localize("ui.common.refresh")}
|
||||
></ha-icon-button>
|
||||
${this._network
|
||||
? html`
|
||||
<ha-card class="content network-status">
|
||||
<div class="card-content">
|
||||
<div class="heading">
|
||||
<div class="icon">
|
||||
${this._status === "disconnected"
|
||||
? html`<ha-spinner></ha-spinner>`
|
||||
: html`
|
||||
<ha-svg-icon
|
||||
.path=${this._icon}
|
||||
class="network-status-icon ${classMap({
|
||||
[this._status!]: true,
|
||||
})}"
|
||||
slot="item-icon"
|
||||
></ha-svg-icon>
|
||||
`}
|
||||
</div>
|
||||
${this._status !== "disconnected"
|
||||
? html`
|
||||
<div class="details">
|
||||
Z-Wave
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.common.network"
|
||||
)}
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.zwave_js.network_status.${this._status}`
|
||||
)}<br />
|
||||
<small>
|
||||
<div class="container">
|
||||
${this._network
|
||||
? html`
|
||||
<ha-card class="content network-status">
|
||||
<div class="card-content">
|
||||
<div class="heading">
|
||||
<div class="icon">
|
||||
${this._status === "disconnected"
|
||||
? html`<ha-spinner></ha-spinner>`
|
||||
: html`
|
||||
<ha-svg-icon
|
||||
.path=${this._icon}
|
||||
class="network-status-icon ${classMap({
|
||||
[this._status!]: true,
|
||||
})}"
|
||||
slot="item-icon"
|
||||
></ha-svg-icon>
|
||||
`}
|
||||
</div>
|
||||
${this._status !== "disconnected"
|
||||
? html`
|
||||
<div class="details">
|
||||
Z-Wave
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.zwave_js.dashboard.devices`,
|
||||
{
|
||||
count:
|
||||
this._network.controller.nodes.length +
|
||||
provisioningDevices,
|
||||
}
|
||||
"ui.panel.config.zwave_js.common.network"
|
||||
)}
|
||||
${notReadyDevices > 0
|
||||
? html`(${this.hass.localize(
|
||||
`ui.panel.config.zwave_js.dashboard.not_ready`,
|
||||
{ count: notReadyDevices }
|
||||
)})`
|
||||
: nothing}
|
||||
</small>
|
||||
</div>
|
||||
`
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.zwave_js.network_status.${this._status}`
|
||||
)}<br />
|
||||
<small>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.zwave_js.dashboard.devices`,
|
||||
{
|
||||
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}
|
||||
</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}`}
|
||||
>
|
||||
</ha-card>
|
||||
<ha-card header="Diagnostics">
|
||||
<div class="card-content">
|
||||
<div class="row">
|
||||
<span>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.dashboard.provisioned_devices"
|
||||
)}
|
||||
</ha-button>`
|
||||
: nothing}
|
||||
</div>
|
||||
</ha-card>
|
||||
<ha-card header="Diagnostics">
|
||||
<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>
|
||||
"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.nvm_backup.creating"
|
||||
)}
|
||||
${this._backupProgress}%`
|
||||
: this._restoreProgress !== undefined
|
||||
"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._restoreProgress}
|
||||
.value=${this._backupProgress}
|
||||
></ha-progress-ring>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.dashboard.nvm_backup.restoring"
|
||||
"ui.panel.config.zwave_js.dashboard.nvm_backup.creating"
|
||||
)}
|
||||
${this._restoreProgress}%`
|
||||
: html`<ha-button
|
||||
appearance="plain"
|
||||
@click=${this._downloadBackup}
|
||||
>
|
||||
${this._backupProgress}%`
|
||||
: this._restoreProgress !== undefined
|
||||
? html`<ha-progress-ring
|
||||
size="small"
|
||||
.value=${this._restoreProgress}
|
||||
></ha-progress-ring>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.dashboard.nvm_backup.download_backup"
|
||||
"ui.panel.config.zwave_js.dashboard.nvm_backup.restoring"
|
||||
)}
|
||||
</ha-button>
|
||||
<div class="upload-button">
|
||||
<ha-button
|
||||
${this._restoreProgress}%`
|
||||
: html`<ha-button
|
||||
appearance="plain"
|
||||
@click=${this._restoreButtonClick}
|
||||
variant="danger"
|
||||
@click=${this._downloadBackup}
|
||||
>
|
||||
<span class="button-content">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.dashboard.nvm_backup.restore_backup"
|
||||
)}
|
||||
</span>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.dashboard.nvm_backup.download_backup"
|
||||
)}
|
||||
</ha-button>
|
||||
<input
|
||||
type="file"
|
||||
id="nvm-restore-file"
|
||||
accept=".bin"
|
||||
@change=${this._handleRestoreFileSelected}
|
||||
style="display: none"
|
||||
/>
|
||||
</div>
|
||||
<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 class="upload-button">
|
||||
<ha-button
|
||||
appearance="plain"
|
||||
@click=${this._restoreButtonClick}
|
||||
variant="danger"
|
||||
>
|
||||
<span class="button-content">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.zwave_js.dashboard.nvm_backup.restore_backup"
|
||||
)}
|
||||
</span>
|
||||
</ha-button>
|
||||
<input
|
||||
type="file"
|
||||
id="nvm-restore-file"
|
||||
accept=".bin"
|
||||
@change=${this._handleRestoreFileSelected}
|
||||
style="display: none"
|
||||
/>
|
||||
</div>
|
||||
<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
|
||||
slot="fab"
|
||||
.label=${this.hass.localize(
|
||||
@ -957,6 +959,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
|
||||
.card-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card-actions ha-progress-ring {
|
||||
@ -984,6 +987,10 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
|
||||
.migrate-button {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 8px 16px 16px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user