diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts
index fd78be112f..d97bcd275c 100644
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/hassio/src/addon-store/hassio-addon-store.ts
@@ -13,11 +13,14 @@ import {
reloadHassioAddons,
} from "../../../src/data/hassio/addon";
import "../../../src/layouts/loading-screen";
-import { HomeAssistant } from "../../../src/types";
+import "../../../src/layouts/hass-tabs-subpage";
+import { HomeAssistant, Route } from "../../../src/types";
import "../components/hassio-search-input";
import "./hassio-addon-repository";
import "./hassio-repositories-editor";
+import { supervisorTabs } from "../hassio-panel";
+
const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
if (a.slug === "local") {
return -1;
@@ -35,11 +38,15 @@ const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
};
class HassioAddonStore extends LitElement {
- @property() public hass!: HomeAssistant;
+ @property({ attribute: false }) public hass!: HomeAssistant;
- @property() private _addons?: HassioAddonInfo[];
+ @property({ type: Boolean }) public narrow!: boolean;
- @property() private _repos?: HassioAddonRepository[];
+ @property({ attribute: false }) public route!: Route;
+
+ @property({ attribute: false }) private _addons?: HassioAddonInfo[];
+
+ @property({ attribute: false }) private _repos?: HassioAddonRepository[];
@property() private _filter?: string;
@@ -52,42 +59,61 @@ class HassioAddonStore extends LitElement {
}
protected render(): TemplateResult {
- if (!this._addons || !this._repos) {
- return html` `;
- }
const repos: TemplateResult[] = [];
- for (const repo of this._repos) {
- const addons = this._addons!.filter(
- (addon) => addon.repository === repo.slug
- );
+ if (this._repos) {
+ for (const repo of this._repos) {
+ const addons = this._addons!.filter(
+ (addon) => addon.repository === repo.slug
+ );
- if (addons.length === 0) {
- continue;
+ if (addons.length === 0) {
+ continue;
+ }
+
+ repos.push(html`
+
+ `);
}
-
- repos.push(html`
-
- `);
}
return html`
-
+ .narrow=${this.narrow}
+ .route=${this.route}
+ hassio
+ .tabs=${supervisorTabs}
+ >
+ Add-on store
+
-
+ ${repos.length === 0
+ ? html``
+ : html`
+
- ${repos}
+
+
+ ${repos}
+ `}
+
`;
}
diff --git a/hassio/src/addon-view/hassio-addon-dashboard.ts b/hassio/src/addon-view/hassio-addon-dashboard.ts
index c614aced17..241f199685 100644
--- a/hassio/src/addon-view/hassio-addon-dashboard.ts
+++ b/hassio/src/addon-view/hassio-addon-dashboard.ts
@@ -59,7 +59,7 @@ class HassioAddonDashboard extends LitElement {
{
name: "Info",
path: `/hassio/addon/${this.addon.slug}/info`,
- icon: "mdi:information-variant",
+ icon: "hassio:information-variant",
},
];
@@ -67,7 +67,7 @@ class HassioAddonDashboard extends LitElement {
addonTabs.push({
name: "Documentation",
path: `/hassio/addon/${this.addon.slug}/documentation`,
- icon: "mdi:file-document",
+ icon: "hassio:file-document",
});
}
@@ -76,12 +76,12 @@ class HassioAddonDashboard extends LitElement {
{
name: "Configuration",
path: `/hassio/addon/${this.addon.slug}/config`,
- icon: "mdi:cogs",
+ icon: "hassio:cogs",
},
{
name: "Log",
path: `/hassio/addon/${this.addon.slug}/logs`,
- icon: "mdi:math-log",
+ icon: "hassio:math-log",
}
);
}
@@ -94,7 +94,7 @@ class HassioAddonDashboard extends LitElement {
.narrow=${this.narrow}
.backPath=${this.addon.version ? "/hassio/dashboard" : "/hassio/store"}
.route=${route}
- .hassio=${true}
+ hassio
.tabs=${addonTabs}
>
${this.addon.name}
diff --git a/hassio/src/dashboard/hassio-dashboard.ts b/hassio/src/dashboard/hassio-dashboard.ts
index c847e3bc26..12d31988b1 100644
--- a/hassio/src/dashboard/hassio-dashboard.ts
+++ b/hassio/src/dashboard/hassio-dashboard.ts
@@ -13,34 +13,50 @@ import {
HassioSupervisorInfo,
} from "../../../src/data/hassio/supervisor";
import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
+import { HomeAssistant, Route } from "../../../src/types";
+import "../../../src/layouts/hass-tabs-subpage";
import "./hassio-addons";
import "./hassio-update";
+import { supervisorTabs } from "../hassio-panel";
+
@customElement("hassio-dashboard")
class HassioDashboard extends LitElement {
- @property() public hass!: HomeAssistant;
+ @property({ attribute: false }) public hass!: HomeAssistant;
- @property() public supervisorInfo!: HassioSupervisorInfo;
+ @property({ type: Boolean }) public narrow!: boolean;
- @property() public hassInfo!: HassioHomeAssistantInfo;
+ @property({ attribute: false }) public route!: Route;
- @property() public hassOsInfo!: HassioHassOSInfo;
+ @property({ attribute: false }) public supervisorInfo!: HassioSupervisorInfo;
+
+ @property({ attribute: false }) public hassInfo!: HassioHomeAssistantInfo;
+
+ @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;
protected render(): TemplateResult {
return html`
-
-
-
-
+
+ Dashboard
+
+
+
+
+
`;
}
diff --git a/hassio/src/hassio-panel-router.ts b/hassio/src/hassio-panel-router.ts
index fbfcda1b4b..3025fe2f9a 100644
--- a/hassio/src/hassio-panel-router.ts
+++ b/hassio/src/hassio-panel-router.ts
@@ -8,7 +8,7 @@ import {
HassRouterPage,
RouterOptions,
} from "../../src/layouts/hass-router-page";
-import { HomeAssistant } from "../../src/types";
+import { HomeAssistant, Route } from "../../src/types";
import "./addon-store/hassio-addon-store";
// Don't codesplit it, that way the dashboard always loads fast.
import "./dashboard/hassio-dashboard";
@@ -20,6 +20,10 @@ import "./system/hassio-system";
class HassioPanelRouter extends HassRouterPage {
@property({ attribute: false }) public hass!: HomeAssistant;
+ @property({ attribute: false }) public route!: Route;
+
+ @property({ type: Boolean }) public narrow!: boolean;
+
@property({ attribute: false }) public supervisorInfo: HassioSupervisorInfo;
@property({ attribute: false }) public hostInfo: HassioHostInfo;
@@ -47,6 +51,8 @@ class HassioPanelRouter extends HassRouterPage {
protected updatePageEl(el) {
el.hass = this.hass;
+ el.route = this.route;
+ el.narrow = this.narrow;
el.supervisorInfo = this.supervisorInfo;
el.hostInfo = this.hostInfo;
el.hassInfo = this.hassInfo;
diff --git a/hassio/src/hassio-panel.ts b/hassio/src/hassio-panel.ts
index 16a75af7ff..0d8ed62d18 100644
--- a/hassio/src/hassio-panel.ts
+++ b/hassio/src/hassio-panel.ts
@@ -15,7 +15,29 @@ import "../../src/resources/ha-style";
import { HomeAssistant, Route } from "../../src/types";
import "./hassio-panel-router";
import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
-import "../../src/layouts/hass-tabs-subpage";
+
+export const supervisorTabs: PageNavigation[] = [
+ {
+ name: "Dashboard",
+ path: `/hassio/dashboard`,
+ icon: "hassio:view-dashboard",
+ },
+ {
+ name: "Add-on store",
+ path: `/hassio/store`,
+ icon: "hassio:store",
+ },
+ {
+ name: "Snapshots",
+ path: `/hassio/snapshots`,
+ icon: "hassio:backup-restore",
+ },
+ {
+ name: "System",
+ path: `/hassio/system`,
+ icon: "hassio:cogs",
+ },
+];
@customElement("hassio-panel")
class HassioPanel extends LitElement {
@@ -34,46 +56,16 @@ class HassioPanel extends LitElement {
@property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;
protected render(): TemplateResult {
- const supervisorTabs: PageNavigation[] = [
- {
- name: "Dashboard",
- path: `/hassio/dashboard`,
- icon: "mdi:view-dashboard",
- },
- {
- name: "Add-on store",
- path: `/hassio/store`,
- icon: "mdi:store",
- },
- {
- name: "Snapshots",
- path: `/hassio/snapshots`,
- icon: "mdi:backup-restore",
- },
- {
- name: "System",
- path: `/hassio/system`,
- icon: "mdi:cogs",
- },
- ];
-
return html`
-
- Supervisor
-
-
+ .supervisorInfo=${this.supervisorInfo}
+ .hostInfo=${this.hostInfo}
+ .hassInfo=${this.hassInfo}
+ .hassOsInfo=${this.hassOsInfo}
+ >
`;
}
}
diff --git a/hassio/src/snapshots/hassio-snapshots.ts b/hassio/src/snapshots/hassio-snapshots.ts
index dac771dc3d..cfd6901de2 100644
--- a/hassio/src/snapshots/hassio-snapshots.ts
+++ b/hassio/src/snapshots/hassio-snapshots.ts
@@ -30,11 +30,14 @@ import {
import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
import { PolymerChangedEvent } from "../../../src/polymer-types";
import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
+import { HomeAssistant, Route } from "../../../src/types";
+import "../../../src/layouts/hass-tabs-subpage";
import "../components/hassio-card-content";
import { showHassioSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-snapshot";
import { hassioStyle } from "../resources/hassio-style";
+import { supervisorTabs } from "../hassio-panel";
+
interface CheckboxItem {
slug: string;
name: string;
@@ -43,9 +46,13 @@ interface CheckboxItem {
@customElement("hassio-snapshots")
class HassioSnapshots extends LitElement {
- @property() public hass!: HomeAssistant;
+ @property({ attribute: false }) public hass!: HomeAssistant;
- @property() public supervisorInfo!: HassioSupervisorInfo;
+ @property({ type: Boolean }) public narrow!: boolean;
+
+ @property({ attribute: false }) public route!: Route;
+
+ @property({ attribute: false }) public supervisorInfo!: HassioSupervisorInfo;
@property() private _snapshotName = "";
@@ -81,135 +88,152 @@ class HassioSnapshots extends LitElement {
protected render(): TemplateResult {
return html`
-
-
- Create snapshot
-
-
- Snapshots allow you to easily backup and restore all data of your Home
- Assistant instance.
-
-
-
-
-
- Type:
-
-
- Full snapshot
-
-
- Partial snapshot
-
-
- ${this._snapshotType === "full"
- ? undefined
- : html`
- Folders:
- ${this._folderList.map(
- (folder, idx) => html`
-
- ${folder.name}
-
- `
- )}
- Add-ons:
- ${this._addonList.map(
- (addon, idx) => html`
-
- ${addon.name}
-
- `
- )}
- `}
- Security:
-
- Password protection
-
- ${this._snapshotHasPassword
- ? html`
-
- `
- : undefined}
- ${this._error !== ""
- ? html`
${this._error}
`
- : undefined}
-
-
-
- Create
-
-
-
-
+
+ Snapshots
- Available snapshots
-
- ${this._snapshots === undefined
- ? undefined
- : this._snapshots.length === 0
- ? html`
-
-
- You don't have any snapshots yet.
-
-
- `
- : this._snapshots.map(
- (snapshot) => html`
-
+
+
+
+
+ Create snapshot
+
+
+ Snapshots allow you to easily backup and restore all data of your
+ Home Assistant instance.
+
+
+
+
+
+ Type:
+
+
+ Full snapshot
+
+
+ Partial snapshot
+
+
+ ${this._snapshotType === "full"
+ ? undefined
+ : html`
+ Folders:
+ ${this._folderList.map(
+ (folder, idx) => html`
+
+ ${folder.name}
+
+ `
+ )}
+ Add-ons:
+ ${this._addonList.map(
+ (addon, idx) => html`
+
+ ${addon.name}
+
+ `
+ )}
+ `}
+ Security:
+
+ Password protection
+
+ ${this._snapshotHasPassword
+ ? html`
+
+ `
+ : undefined}
+ ${this._error !== ""
+ ? html`
${this._error}
`
+ : undefined}
+
+
+
+ Create
+
+
+
+
+
+
Available snapshots
+
+ ${this._snapshots === undefined
+ ? undefined
+ : this._snapshots.length === 0
+ ? html`
+
-
+ You don't have any snapshots yet.
`
- )}
+ : this._snapshots.map(
+ (snapshot) => html`
+
+
+
+
+
+ `
+ )}
+
-
+
`;
}
diff --git a/hassio/src/system/hassio-system.ts b/hassio/src/system/hassio-system.ts
index ea60843d8c..da2b55b243 100644
--- a/hassio/src/system/hassio-system.ts
+++ b/hassio/src/system/hassio-system.ts
@@ -14,15 +14,22 @@ import {
} from "../../../src/data/hassio/host";
import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
+import "../../../src/layouts/hass-tabs-subpage";
+import { HomeAssistant, Route } from "../../../src/types";
import { hassioStyle } from "../resources/hassio-style";
import "./hassio-host-info";
import "./hassio-supervisor-info";
import "./hassio-supervisor-log";
+import { supervisorTabs } from "../hassio-panel";
+
@customElement("hassio-system")
class HassioSystem extends LitElement {
- @property() public hass!: HomeAssistant;
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ type: Boolean }) public narrow!: boolean;
+
+ @property({ attribute: false }) public route!: Route;
@property() public supervisorInfo!: HassioSupervisorInfo;
@@ -32,22 +39,31 @@ class HassioSystem extends LitElement {
public render(): TemplateResult | void {
return html`
-
-
Information
-
-
-
+
+ System
+
+
Information
+
+
+
+
+
System log
+
- System log
-
-
+
`;
}