-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add overview page * Remove configure button * Reorganize files * Add backups summary * Add settings overview * Fixes * Update wording * Setup onboarding before creating a backup
- Loading branch information
Showing
15 changed files
with
681 additions
and
189 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 7 additions & 7 deletions
14
...onents/ha-backup-config-encryption-key.ts → ...config/ha-backup-config-encryption-key.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
122 changes: 122 additions & 0 deletions
122
src/panels/config/backup/components/overview/ha-backup-overview-backups.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,122 @@ | ||
import type { CSSResultGroup } from "lit"; | ||
import { css, html, LitElement } from "lit"; | ||
import { customElement, property } from "lit/decorators"; | ||
import memoizeOne from "memoize-one"; | ||
import { navigate } from "../../../../../common/navigate"; | ||
import "../../../../../components/ha-button"; | ||
import "../../../../../components/ha-card"; | ||
import "../../../../../components/ha-icon-next"; | ||
import "../../../../../components/ha-md-list"; | ||
import "../../../../../components/ha-md-list-item"; | ||
import type { BackupContent } from "../../../../../data/backup"; | ||
import { haStyle } from "../../../../../resources/styles"; | ||
import type { HomeAssistant } from "../../../../../types"; | ||
import { bytesToString } from "../../../../../util/bytes-to-string"; | ||
|
||
type BackupStats = { | ||
count: number; | ||
size: number; | ||
}; | ||
|
||
const computeBackupStats = (backups: BackupContent[]): BackupStats => | ||
backups.reduce( | ||
(stats, backup) => { | ||
stats.count++; | ||
stats.size += backup.size; | ||
return stats; | ||
}, | ||
{ count: 0, size: 0 } | ||
); | ||
|
||
@customElement("ha-backup-overview-backups") | ||
class HaBackupOverviewBackups extends LitElement { | ||
@property({ attribute: false }) public hass!: HomeAssistant; | ||
|
||
@property({ attribute: false }) public backups: BackupContent[] = []; | ||
|
||
private _showAll() { | ||
navigate("/config/backup/backups"); | ||
} | ||
|
||
private _automaticStats = memoizeOne((backups: BackupContent[]) => { | ||
const automaticBackups = backups.filter( | ||
(backup) => backup.with_automatic_settings | ||
); | ||
return computeBackupStats(automaticBackups); | ||
}); | ||
|
||
private _manualStats = memoizeOne((backups: BackupContent[]) => { | ||
const manualBackups = backups.filter( | ||
(backup) => !backup.with_automatic_settings | ||
); | ||
return computeBackupStats(manualBackups); | ||
}); | ||
|
||
render() { | ||
const automaticStats = this._automaticStats(this.backups); | ||
const manualStats = this._manualStats(this.backups); | ||
|
||
return html` | ||
<ha-card class="my-backups"> | ||
<div class="card-header">My backups</div> | ||
<div class="card-content"> | ||
<ha-md-list> | ||
<ha-md-list-item type="link" href="/config/backup/backups"> | ||
<div slot="headline"> | ||
${automaticStats.count} automatic backups | ||
</div> | ||
<div slot="supporting-text"> | ||
${bytesToString(automaticStats.size, 1)} in total | ||
</div> | ||
<ha-icon-next slot="end"></ha-icon-next> | ||
</ha-md-list-item> | ||
<ha-md-list-item type="link" href="/config/backup/backups"> | ||
<div slot="headline">${manualStats.count} manual backups</div> | ||
<div slot="supporting-text"> | ||
${bytesToString(manualStats.size, 1)} in total | ||
</div> | ||
<ha-icon-next slot="end"></ha-icon-next> | ||
</ha-md-list-item> | ||
</ha-md-list> | ||
</div> | ||
<div class="card-actions"> | ||
<ha-button href="/config/backup/backups" @click=${this._showAll}> | ||
Show all backups | ||
</ha-button> | ||
</div> | ||
</ha-card> | ||
`; | ||
} | ||
|
||
static get styles(): CSSResultGroup { | ||
return [ | ||
haStyle, | ||
css` | ||
.content { | ||
padding: 28px 20px 0; | ||
max-width: 690px; | ||
margin: 0 auto; | ||
gap: 24px; | ||
display: flex; | ||
flex-direction: column; | ||
margin-bottom: 24px; | ||
margin-bottom: 72px; | ||
} | ||
.card-actions { | ||
display: flex; | ||
justify-content: flex-end; | ||
} | ||
.card-content { | ||
padding-left: 0; | ||
padding-right: 0; | ||
} | ||
`, | ||
]; | ||
} | ||
} | ||
|
||
declare global { | ||
interface HTMLElementTagNameMap { | ||
"ha-backup-overview-backups": HaBackupOverviewBackups; | ||
} | ||
} |
Oops, something went wrong.