diff --git a/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts b/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts index be852ac7ec..ac01d694ec 100644 --- a/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts +++ b/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts @@ -60,6 +60,75 @@ class HassioDatadiskDialog extends LitElement { if (!this.dialogParams) { return html``; } + let heading: string; + let content: TemplateResult; + + if (this.moving) { + heading = this.dialogParams.supervisor.localize( + "dialog.datadisk_move.moving" + ); + content = html` + + +

+ ${this.dialogParams.supervisor.localize( + "dialog.datadisk_move.moving_desc" + )} +

+ `; + } else { + heading = this.dialogParams.supervisor.localize( + "dialog.datadisk_move.title" + ); + content = html` + ${this.devices?.length + ? html` + ${this.dialogParams.supervisor.localize( + "dialog.datadisk_move.description", + { + current_path: this.dialogParams.supervisor.os.data_disk, + time: calculateMoveTime(this.dialogParams.supervisor), + } + )} +

+ + + + ${this.devices.map( + (device) => html`${device}` + )} + + + ` + : this.devices === undefined + ? this.dialogParams.supervisor.localize( + "dialog.datadisk_move.loading_devices" + ) + : this.dialogParams.supervisor.localize( + "dialog.datadisk_move.no_devices" + )} + + + ${this.dialogParams.supervisor.localize( + "dialog.datadisk_move.cancel" + )} + + + + ${this.dialogParams.supervisor.localize("dialog.datadisk_move.move")} + + `; + } + return html` - ${this.moving - ? html` -

- ${this.dialogParams.supervisor.localize( - "dialog.datadisk_move.moving" - )} -

-
- - -

- ${this.dialogParams.supervisor.localize( - "dialog.datadisk_move.moving_desc" - )} -

` - : html` -

- ${this.dialogParams.supervisor.localize( - "dialog.datadisk_move.title" - )} -

-
- ${this.devices?.length - ? html` - ${this.dialogParams.supervisor.localize( - "dialog.datadisk_move.description", - { - current_path: this.dialogParams.supervisor.os.data_disk, - time: calculateMoveTime(this.dialogParams.supervisor), - } - )} -

- - - - ${this.devices.map( - (device) => html`${device}` - )} - - - ` - : this.devices === undefined - ? this.dialogParams.supervisor.localize( - "dialog.datadisk_move.loading_devices" - ) - : this.dialogParams.supervisor.localize( - "dialog.datadisk_move.no_devices" - )} - - - ${this.dialogParams.supervisor.localize( - "dialog.datadisk_move.cancel" - )} - - - - ${this.dialogParams.supervisor.localize( - "dialog.datadisk_move.move" - )} - `} + ${content}
`; }