jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add overview settings link to backup settings sections

Browse Source
This commit is contained in:
Paul Bottein 2024-12-20 18:20:20 +01:00
parent b35f9944ea
commit fad435ea10
No known key found for this signature in database
3 changed files with 62 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/panels/config/backup/components/config/ha-backup-config-data.ts
View File

@ -53,6 +53,12 @@ export type BackupConfigData = {
include_addons?: string[];
};
declare global {
interface HASSDomEvents {
"backup-addons-fetched": void;
}
}
@customElement("ha-backup-config-data")
class HaBackupConfigData extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@ -89,6 +95,7 @@ class HaBackupConfigData extends LitElement {
private async _fetchAddons() {
const { addons } = await fetchHassioAddonsInfo(this.hass);
this._addons = addons;
fireEvent(this, "backup-addons-fetched");
}
private _hasLocalAddons(addons: BackupAddonItem[]): boolean {

36
src/panels/config/backup/components/overview/ha-backup-overview-settings.ts
View File

@ -5,6 +5,7 @@ import { customElement, property } from "lit/decorators";
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 "../../../../../components/ha-svg-icon";
@ -103,7 +104,10 @@ class HaBackupBackupsSummary extends LitElement {
<div class="card-header">Automatic backups</div>
<div class="card-content">
<ha-md-list>
<ha-md-list-item>
<ha-md-list-item
type="link"
href="/config/backup/settings#schedule"
>
<ha-svg-icon slot="start" .path=${mdiCalendar}></ha-svg-icon>
<div slot="headline">
${this._scheduleDescription(this.config)}
@ -111,8 +115,9 @@ class HaBackupBackupsSummary extends LitElement {
<div slot="supporting-text">
Schedule and number of backups to keep
</div>
<ha-icon-next slot="end"></ha-icon-next>
</ha-md-list-item>
<ha-md-list-item>
<ha-md-list-item type="link" href="/config/backup/settings#data">
<ha-svg-icon slot="start" .path=${mdiDatabase}></ha-svg-icon>
<div slot="headline">
${this.config.create_backup.include_database
@ -122,27 +127,34 @@ class HaBackupBackupsSummary extends LitElement {
<div slot="supporting-text">
Home Assistant data that is included
</div>
<ha-icon-next slot="end"></ha-icon-next>
</ha-md-list-item>
${isHassio
? html`
<ha-md-list-item>
<ha-md-list-item
type="link"
href="/config/backup/settings#data"
>
<ha-svg-icon slot="start" .path=${mdiPuzzle}></ha-svg-icon>
<div slot="headline">
${this._addonsDescription(this.config)}
</div>
<div slot="supporting-text">Add-ons that are included</div>
</ha-md-list-item>
<ha-md-list-item>
<ha-svg-icon slot="start" .path=${mdiUpload}></ha-svg-icon>
<div slot="headline">
${this._agentsDescription(this.config)}
</div>
<div slot="supporting-text">
Locations where backup is uploaded to
</div>
<ha-icon-next slot="end"></ha-icon-next>
</ha-md-list-item>
`
: nothing}
<ha-md-list-item
type="link"
href="/config/backup/settings#locations"
>
<ha-svg-icon slot="start" .path=${mdiUpload}></ha-svg-icon>
<div slot="headline">${this._agentsDescription(this.config)}</div>
<div slot="supporting-text">
Locations where backup is uploaded to
</div>
<ha-icon-next slot="end"></ha-icon-next>
</ha-md-list-item>
</ha-md-list>
</div>
<div class="card-actions">

34
src/panels/config/backup/ha-config-backup-settings.ts
View File

@ -3,6 +3,7 @@ import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import { debounce } from "../../../common/util/debounce";
import { nextRender } from "../../../common/util/render-status";
import "../../../components/ha-button";
import "../../../components/ha-card";
import "../../../components/ha-icon-next";
@ -38,6 +39,30 @@ class HaConfigBackupSettings extends LitElement {
}
}
protected firstUpdated(_changedProperties: PropertyValues): void {
super.firstUpdated(_changedProperties);
this._scrollTo();
}
private async _scrollTo() {
const hash = window.location.hash.substring(1);
if (hash === "locations") {
// Wait for the addons to be loaded before scrolling because the height can change
this.addEventListener("backup-addons-fetched", async () => {
await nextRender();
this._scrolltoHash(hash);
});
return;
}
this._scrolltoHash(hash);
}
private _scrolltoHash(hash: string) {
const element = this.shadowRoot!.getElementById(hash);
element?.scrollIntoView();
history.replaceState(null, "", window.location.pathname);
}
protected render() {
if (!this._config) {
return nothing;
@ -51,7 +76,7 @@ class HaConfigBackupSettings extends LitElement {
.header=${"Automatic backups"}
>
<div class="content">
<ha-card>
<ha-card id="schedule">
<div class="card-header">Automatic backups</div>
<div class="card-content">
<p>
@ -65,7 +90,7 @@ class HaConfigBackupSettings extends LitElement {
></ha-backup-config-schedule>
</div>
</ha-card>
<ha-card>
<ha-card id="data">
<div class="card-header">Backup data</div>
<div class="card-content">
<ha-backup-config-data
@ -78,7 +103,7 @@ class HaConfigBackupSettings extends LitElement {
</div>
</ha-card>
<ha-card class="agents">
<ha-card class="agents" id="locations">
<div class="card-header">Locations</div>
<div class="card-content">
<p>
@ -199,6 +224,9 @@ class HaConfigBackupSettings extends LitElement {
}
static styles = css`
ha-card {
scroll-margin-top: 16px;
}
.content {
padding: 28px 20px 0;
max-width: 690px;