Clean up hassio panel (#3067)

* Clean up hassio panel

* Extract dialog manager code

* Convert markdown dialog to show-dialog

* Extract snapshot dialog
This commit is contained in:
Paulus Schoutsen 2019-04-07 08:45:56 -07:00 committed by Pascal Vizeli
parent 31e351c75c
commit cda29fcd07
21 changed files with 466 additions and 432 deletions

View File

@ -12,6 +12,7 @@ import "../../../src/resources/ha-style";
import EventsMixin from "../../../src/mixins/events-mixin";
import { navigate } from "../../../src/common/navigate";
import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
import "../components/hassio-card-content";
const PERMIS_DESC = {
@ -517,7 +518,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
showMoreInfo(e) {
const id = e.target.getAttribute("id");
this.fire("hassio-markdown-dialog", {
showHassioMarkdownDialog(this, {
title: PERMIS_DESC[id].title,
content: PERMIS_DESC[id].description,
});
@ -528,7 +529,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
.callApi("get", `hassio/addons/${this.addonSlug}/changelog`)
.then((resp) => resp, () => "Error getting changelog")
.then((content) => {
this.fire("hassio-markdown-dialog", {
showHassioMarkdownDialog(this, {
title: "Changelog",
content: content,
});

View File

@ -1,14 +1,11 @@
import "@polymer/app-layout/app-header-layout/app-header-layout";
import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/app-route/app-route";
import "@polymer/paper-icon-button/paper-icon-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../src/components/ha-menu-button";
import "../../../src/resources/ha-style";
import "../hassio-markdown-dialog";
import "./hassio-addon-audio";
import "./hassio-addon-config";
import "./hassio-addon-info";
@ -51,16 +48,9 @@ class HassioAddonView extends PolymerElement {
}
}
</style>
<app-route
route="[[route]]"
pattern="/addon/:slug"
data="{{routeData}}"
active="{{routeMatches}}"
></app-route>
<app-header-layout has-scrolling-region="">
<app-header fixed="" slot="header">
<app-toolbar>
<ha-menu-button hassio></ha-menu-button>
<paper-icon-button
icon="hassio:arrow-left"
on-click="backTapped"
@ -72,14 +62,14 @@ class HassioAddonView extends PolymerElement {
<hassio-addon-info
hass="[[hass]]"
addon="[[addon]]"
addon-slug="[[routeData.slug]]"
addon-slug="[[addonSlug]]"
></hassio-addon-info>
<template is="dom-if" if="[[addon.version]]">
<hassio-addon-config
hass="[[hass]]"
addon="[[addon]]"
addon-slug="[[routeData.slug]]"
addon-slug="[[addonSlug]]"
></hassio-addon-config>
<template is="dom-if" if="[[addon.audio]]">
@ -93,50 +83,38 @@ class HassioAddonView extends PolymerElement {
<hassio-addon-network
hass="[[hass]]"
addon="[[addon]]"
addon-slug="[[routeData.slug]]"
addon-slug="[[addonSlug]]"
></hassio-addon-network>
</template>
<hassio-addon-logs
hass="[[hass]]"
addon-slug="[[routeData.slug]]"
addon-slug="[[addonSlug]]"
></hassio-addon-logs>
</template>
</div>
</app-header-layout>
<hassio-markdown-dialog
title="[[markdownTitle]]"
content="[[markdownContent]]"
></hassio-markdown-dialog>
`;
}
static get properties() {
return {
hass: Object,
route: Object,
routeData: {
route: {
type: Object,
observer: "routeDataChanged",
},
routeMatches: Boolean,
addon: Object,
markdownTitle: String,
markdownContent: {
addonSlug: {
type: String,
value: "",
computed: "_computeSlug(route)",
},
addon: Object,
};
}
ready() {
super.ready();
this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
this.addEventListener("hassio-markdown-dialog", (ev) =>
this.openMarkdown(ev)
);
}
apiCalled(ev) {
@ -147,13 +125,13 @@ class HassioAddonView extends PolymerElement {
if (path.substr(path.lastIndexOf("/") + 1) === "uninstall") {
this.backTapped();
} else {
this.routeDataChanged(this.routeData);
this.routeDataChanged(this.route);
}
}
routeDataChanged(routeData) {
if (!this.routeMatches || !routeData || !routeData.slug) return;
this.hass.callApi("get", `hassio/addons/${routeData.slug}/info`).then(
const addon = routeData.path.substr(1);
this.hass.callApi("get", `hassio/addons/${addon}/info`).then(
(info) => {
this.addon = info.data;
},
@ -167,12 +145,8 @@ class HassioAddonView extends PolymerElement {
history.back();
}
openMarkdown(ev) {
this.setProperties({
markdownTitle: ev.detail.title,
markdownContent: ev.detail.content,
});
this.shadowRoot.querySelector("hassio-markdown-dialog").openDialog();
_computeSlug(route) {
return route.path.substr(1);
}
}

View File

@ -4,10 +4,13 @@ import "@polymer/paper-icon-button/paper-icon-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../src/components/ha-markdown";
import "../../src/resources/ha-style";
import "../../src/components/dialog/ha-paper-dialog";
import "../../../../src/components/ha-markdown";
import "../../../../src/resources/ha-style";
import "../../../../src/components/dialog/ha-paper-dialog";
import { customElement } from "lit-element";
import { PaperDialogElement } from "@polymer/paper-dialog";
@customElement("dialog-hassio-markdown")
class HassioMarkdownDialog extends PolymerElement {
static get template() {
return html`
@ -72,8 +75,14 @@ class HassioMarkdownDialog extends PolymerElement {
};
}
openDialog() {
this.$.dialog.open();
public showDialog(params) {
this.setProperties(params);
(this.$.dialog as PaperDialogElement).open();
}
}
declare global {
interface HTMLElementTagNameMap {
"dialog-hassio-markdown": HassioMarkdownDialog;
}
}
customElements.define("hassio-markdown-dialog", HassioMarkdownDialog);

View File

@ -0,0 +1,18 @@
import { fireEvent } from "../../../../src/common/dom/fire_event";
export interface HassioMarkdownDialogParams {
title: string;
content: string;
}
export const showHassioMarkdownDialog = (
element: HTMLElement,
dialogParams: HassioMarkdownDialogParams
): void => {
fireEvent(element, "show-dialog", {
dialogTag: "dialog-hassio-markdown",
dialogImport: () =>
import(/* webpackChunkName: "dialog-hassio-markdown" */ "./dialog-hassio-markdown"),
dialogParams,
});
};

View File

@ -6,12 +6,24 @@ import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-input/paper-input";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import { getSignedPath } from "../../../src/auth/data";
import { getSignedPath } from "../../../../src/auth/data";
import "../../../src/resources/ha-style";
import "../../../src/components/dialog/ha-paper-dialog";
import "../../../../src/resources/ha-style";
import "../../../../src/components/dialog/ha-paper-dialog";
import { customElement } from "lit-element";
import { HomeAssistant } from "../../../../src/types";
import { PaperDialogElement } from "@polymer/paper-dialog";
import { HassioSnapshotDialogParams } from "./show-dialog-hassio-snapshot";
@customElement("dialog-hassio-snapshot")
class HassioSnapshotDialog extends PolymerElement {
public hass!: HomeAssistant;
protected error?: string;
private snapshot?: any;
private dialogParams?: HassioSnapshotDialogParams;
private restoreHass!: boolean;
private snapshotPassword!: string;
class HassioSnapshot extends PolymerElement {
static get template() {
return html`
<style include="ha-style-dialog">
@ -139,15 +151,6 @@ class HassioSnapshot extends PolymerElement {
static get properties() {
return {
hass: Object,
snapshotSlug: {
type: String,
notify: true,
observer: "_snapshotSlugChanged",
},
snapshotDeleted: {
type: Boolean,
notify: true,
},
snapshot: Object,
restoreHass: {
type: Boolean,
@ -158,39 +161,43 @@ class HassioSnapshot extends PolymerElement {
};
}
_snapshotSlugChanged(snapshotSlug) {
if (!snapshotSlug || snapshotSlug === "update") return;
this.hass.callApi("get", `hassio/snapshots/${snapshotSlug}/info`).then(
(info) => {
public showDialog(params: HassioSnapshotDialogParams) {
this.dialogParams = params;
this.hass.callApi("GET", `hassio/snapshots/${params.slug}/info`).then(
(info: any) => {
info.data.folders = this._computeFolders(info.data.folders);
info.data.addons = this._computeAddons(info.data.addons);
this.snapshot = info.data;
this.$.dialog.open();
this.setProperties({ snapshot: info.data });
(this.$.dialog as PaperDialogElement).open();
},
() => {
this.snapshot = null;
this.dialogParams = undefined;
}
);
}
_computeFolders(folders) {
const list = [];
if (folders.includes("homeassistant"))
protected _computeFolders(folders) {
const list: Array<{ slug: string; name: string; checked: boolean }> = [];
if (folders.includes("homeassistant")) {
list.push({
slug: "homeassistant",
name: "Home Assistant configuration",
checked: true,
});
if (folders.includes("ssl"))
}
if (folders.includes("ssl")) {
list.push({ slug: "ssl", name: "SSL", checked: true });
if (folders.includes("share"))
}
if (folders.includes("share")) {
list.push({ slug: "share", name: "Share", checked: true });
if (folders.includes("addons/local"))
}
if (folders.includes("addons/local")) {
list.push({ slug: "addons/local", name: "Local add-ons", checked: true });
}
return list;
}
_computeAddons(addons) {
protected _computeAddons(addons) {
return addons.map((addon) => ({
slug: addon.slug,
name: addon.name,
@ -199,11 +206,11 @@ class HassioSnapshot extends PolymerElement {
}));
}
_isFullSnapshot(type) {
protected _isFullSnapshot(type) {
return type === "full";
}
_partialRestoreClicked() {
protected _partialRestoreClicked() {
if (!confirm("Are you sure you want to restore this snapshot?")) {
return;
}
@ -216,21 +223,24 @@ class HassioSnapshot extends PolymerElement {
const data = {
homeassistant: this.restoreHass,
addons: addons,
folders: folders,
addons,
folders,
};
if (this.snapshot.protected) data.password = this.snapshotPassword;
if (this.snapshot.protected) {
// @ts-ignore
data.password = this.snapshotPassword;
}
this.hass
.callApi(
"post",
`hassio/snapshots/${this.snapshotSlug}/restore/partial`,
"POST",
`hassio/snapshots/${this.dialogParams!.slug}/restore/partial`,
data
)
.then(
() => {
alert("Snapshot restored!");
this.$.dialog.close();
(this.$.dialog as PaperDialogElement).close();
},
(error) => {
this.error = error.body.message;
@ -238,23 +248,23 @@ class HassioSnapshot extends PolymerElement {
);
}
_fullRestoreClicked() {
protected _fullRestoreClicked() {
if (!confirm("Are you sure you want to restore this snapshot?")) {
return;
}
const data = this.snapshot.protected
? { password: this.snapshotPassword }
: null;
: undefined;
this.hass
.callApi(
"post",
`hassio/snapshots/${this.snapshotSlug}/restore/full`,
"POST",
`hassio/snapshots/${this.dialogParams!.slug}/restore/full`,
data
)
.then(
() => {
alert("Snapshot restored!");
this.$.dialog.close();
(this.$.dialog as PaperDialogElement).close();
},
(error) => {
this.error = error.body.message;
@ -262,16 +272,16 @@ class HassioSnapshot extends PolymerElement {
);
}
_deleteClicked() {
protected _deleteClicked() {
if (!confirm("Are you sure you want to delete this snapshot?")) {
return;
}
this.hass
.callApi("post", `hassio/snapshots/${this.snapshotSlug}/remove`)
.callApi("POST", `hassio/snapshots/${this.dialogParams!.slug}/remove`)
.then(
() => {
this.$.dialog.close();
this.snapshotDeleted = true;
(this.$.dialog as PaperDialogElement).close();
this.dialogParams!.onDelete();
},
(error) => {
this.error = error.body.message;
@ -279,19 +289,19 @@ class HassioSnapshot extends PolymerElement {
);
}
async _downloadClicked() {
protected async _downloadClicked() {
let signedPath;
try {
signedPath = await getSignedPath(
this.hass,
`/api/hassio/snapshots/${this.snapshotSlug}/download`
`/api/hassio/snapshots/${this.dialogParams!.slug}/download`
);
} catch (err) {
alert(`Error: ${err.message}`);
return;
}
const name = this._computeName(this.snapshot).replace(/[^a-z0-9]+/gi, "_");
const a = document.createElement("A");
const a = document.createElement("a");
a.href = signedPath.path;
a.download = `Hass_io_${name}.tar`;
this.$.dialog.appendChild(a);
@ -299,23 +309,23 @@ class HassioSnapshot extends PolymerElement {
this.$.dialog.removeChild(a);
}
_computeName(snapshot) {
protected _computeName(snapshot) {
return snapshot.name || snapshot.slug;
}
_computeType(type) {
protected _computeType(type) {
return type === "full" ? "Full snapshot" : "Partial snapshot";
}
_computeSize(size) {
protected _computeSize(size) {
return Math.ceil(size * 10) / 10 + " MB";
}
_sortAddons(a, b) {
protected _sortAddons(a, b) {
return a.name < b.name ? -1 : 1;
}
_formatDatetime(datetime) {
protected _formatDatetime(datetime) {
return new Date(datetime).toLocaleDateString(navigator.language, {
weekday: "long",
year: "numeric",
@ -326,8 +336,14 @@ class HassioSnapshot extends PolymerElement {
});
}
_dialogClosed() {
this.snapshotSlug = null;
protected _dialogClosed() {
this.dialogParams = undefined;
this.snapshot = undefined;
}
}
declare global {
interface HTMLElementTagNameMap {
"dialog-hassio-snapshot": HassioSnapshotDialog;
}
}
customElements.define("hassio-snapshot", HassioSnapshot);

View File

@ -0,0 +1,18 @@
import { fireEvent } from "../../../../src/common/dom/fire_event";
export interface HassioSnapshotDialogParams {
slug: string;
onDelete: () => void;
}
export const showHassioSnapshotDialog = (
element: HTMLElement,
dialogParams: HassioSnapshotDialogParams
): void => {
fireEvent(element, "show-dialog", {
dialogTag: "dialog-hassio-snapshot",
dialogImport: () =>
import(/* webpackChunkName: "dialog-hassio-snapshot" */ "./dialog-hassio-snapshot"),
dialogParams,
});
};

View File

@ -1,6 +1,6 @@
window.loadES5Adapter().then(() => {
import(/* webpackChunkName: "hassio-icons" */ "./resources/hassio-icons.js");
import(/* webpackChunkName: "hassio-main" */ "./hassio-main.js");
import(/* webpackChunkName: "hassio-icons" */ "./resources/hassio-icons");
import(/* webpackChunkName: "hassio-main" */ "./hassio-main");
});
const styleEl = document.createElement("style");
styleEl.innerHTML = `

View File

@ -1,59 +0,0 @@
import { PolymerElement } from "@polymer/polymer/polymer-element";
class HassioData extends PolymerElement {
static get properties() {
return {
hass: Object,
supervisor: {
type: Object,
notify: true,
},
host: {
type: Object,
notify: true,
},
homeassistant: {
type: Object,
notify: true,
},
};
}
connectedCallback() {
super.connectedCallback();
this.refresh();
}
refresh() {
return Promise.all([
this.fetchSupervisorInfo(),
this.fetchHostInfo(),
this.fetchHassInfo(),
]);
}
fetchSupervisorInfo() {
return this.hass.callApi("get", "hassio/supervisor/info").then((info) => {
this.supervisor = info.data;
});
}
fetchHostInfo() {
return this.hass.callApi("get", "hassio/host/info").then((info) => {
this.host = info.data;
});
}
fetchHassInfo() {
return this.hass
.callApi("get", "hassio/homeassistant/info")
.then((info) => {
this.homeassistant = info.data;
});
}
}
customElements.define("hassio-data", HassioData);

View File

@ -1,158 +0,0 @@
import "@polymer/app-route/app-route";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../src/layouts/hass-loading-screen";
import "./addon-view/hassio-addon-view";
import "./ingress-view/hassio-ingress-view";
import "./hassio-data";
import "./hassio-pages-with-tabs";
import "../../src/resources/ha-style";
import applyThemesOnElement from "../../src/common/dom/apply_themes_on_element";
import EventsMixin from "../../src/mixins/events-mixin";
import NavigateMixin from "../../src/mixins/navigate-mixin";
import { fireEvent } from "../../src/common/dom/fire_event";
class HassioMain extends EventsMixin(NavigateMixin(PolymerElement)) {
static get template() {
return html`
<app-route
route="[[route]]"
pattern="/:page"
data="{{routeData}}"
></app-route>
<hassio-data
id="data"
hass="[[hass]]"
supervisor="{{supervisorInfo}}"
homeassistant="{{hassInfo}}"
host="{{hostInfo}}"
></hassio-data>
<template is="dom-if" if="[[!loaded]]">
<hass-loading-screen></hass-loading-screen>
</template>
<template is="dom-if" if="[[loaded]]">
<template is="dom-if" if="[[equalsDashboard(routeData.page)]]">
<hassio-pages-with-tabs
hass="[[hass]]"
page="[[routeData.page]]"
supervisor-info="[[supervisorInfo]]"
hass-info="[[hassInfo]]"
host-info="[[hostInfo]]"
></hassio-pages-with-tabs>
</template>
<template is="dom-if" if="[[equalsAddon(routeData.page)]]">
<hassio-addon-view
hass="[[hass]]"
route="[[route]]"
></hassio-addon-view>
</template>
<template is="dom-if" if="[[equalsIngress(routeData.page)]]">
<hassio-ingress-view
hass="[[hass]]"
route="[[route]]"
></hassio-ingress-view>
</template>
</template>
`;
}
static get properties() {
return {
hass: Object,
route: {
type: Object,
// Fake route object
value: {
prefix: "/hassio",
path: "/dashboard",
__queryParams: {},
},
observer: "routeChanged",
},
routeData: Object,
supervisorInfo: Object,
hostInfo: Object,
hassInfo: Object,
loaded: {
type: Boolean,
computed: "computeIsLoaded(supervisorInfo, hostInfo, hassInfo)",
},
};
}
ready() {
super.ready();
applyThemesOnElement(this, this.hass.themes, this.hass.selectedTheme, true);
this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
// Paulus - March 17, 2019
// We went to a single hass-toggle-menu event in HA 0.90. However, the
// supervisor UI can also run under older versions of Home Assistant.
// So here we are going to translate toggle events into the appropriate
// open and close events. These events are a no-op in newer versions of
// Home Assistant.
this.addEventListener("hass-toggle-menu", () => {
fireEvent(
window.parent.customPanel,
this.hass.dockedSidebar ? "hass-close-menu" : "hass-open-menu"
);
});
// Paulus - March 19, 2019
// We changed the navigate event to fire directly on the window, as that's
// where we are listening for it. However, the older panel_custom will
// listen on this element for navigation events, so we need to forward them.
window.addEventListener("location-changed", (ev) =>
fireEvent(this, ev.type, ev.detail, {
bubbles: false,
})
);
}
connectedCallback() {
super.connectedCallback();
this.routeChanged(this.route);
}
apiCalled(ev) {
if (ev.detail.success) {
let tries = 1;
const tryUpdate = () => {
this.$.data.refresh().catch(function() {
tries += 1;
setTimeout(tryUpdate, Math.min(tries, 5) * 1000);
});
};
tryUpdate();
}
}
computeIsLoaded(supervisorInfo, hostInfo, hassInfo) {
return supervisorInfo !== null && hostInfo !== null && hassInfo !== null;
}
routeChanged(route) {
if (route.path === "" && route.prefix === "/hassio") {
this.navigate("/hassio/dashboard", true);
}
fireEvent(this, "iron-resize");
}
equalsAddon(page) {
return page && page === "addon";
}
equalsDashboard(page) {
return !page || !["addon", "ingress"].includes(page);
}
equalsIngress(page) {
return page && page === "ingress";
}
}
customElements.define("hassio-main", HassioMain);

138
hassio/src/hassio-main.ts Normal file
View File

@ -0,0 +1,138 @@
import { customElement, PropertyValues, property } from "lit-element";
import { PolymerElement } from "@polymer/polymer";
import "../../src/resources/ha-style";
import applyThemesOnElement from "../../src/common/dom/apply_themes_on_element";
import { fireEvent } from "../../src/common/dom/fire_event";
import {
HassRouterPage,
RouterOptions,
} from "../../src/layouts/hass-router-page";
import { HomeAssistant } from "../../src/types";
import {
fetchHassioSupervisorInfo,
fetchHassioHostInfo,
fetchHassioHomeAssistantInfo,
} from "../../src/data/hassio";
import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
@customElement("hassio-main")
class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
@property() public hass!: HomeAssistant;
protected routerOptions: RouterOptions = {
// Hass.io has a page with tabs, so we route all non-matching routes to it.
defaultPage: "dashboard",
initialLoad: () => this._fetchData(),
routes: {
dashboard: {
tag: "hassio-pages-with-tabs",
load: () => import("./hassio-pages-with-tabs"),
cache: true,
},
snapshots: "dashboard",
store: "dashboard",
system: "dashboard",
addon: {
tag: "hassio-addon-view",
load: () => import("./addon-view/hassio-addon-view"),
},
ingress: {
tag: "hassio-ingress-view",
load: () => import("./ingress-view/hassio-ingress-view"),
},
},
};
@property() private _supervisorInfo: any;
@property() private _hostInfo: any;
@property() private _hassInfo: any;
protected firstUpdated(changedProps: PropertyValues) {
super.firstUpdated(changedProps);
applyThemesOnElement(this, this.hass.themes, this.hass.selectedTheme, true);
this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
// Paulus - March 17, 2019
// We went to a single hass-toggle-menu event in HA 0.90. However, the
// supervisor UI can also run under older versions of Home Assistant.
// So here we are going to translate toggle events into the appropriate
// open and close events. These events are a no-op in newer versions of
// Home Assistant.
this.addEventListener("hass-toggle-menu", () => {
fireEvent(
(window.parent as any).customPanel,
// @ts-ignore
this.hass.dockedSidebar ? "hass-close-menu" : "hass-open-menu"
);
});
// Paulus - March 19, 2019
// We changed the navigate event to fire directly on the window, as that's
// where we are listening for it. However, the older panel_custom will
// listen on this element for navigation events, so we need to forward them.
window.addEventListener("location-changed", (ev) =>
// @ts-ignore
fireEvent(this, ev.type, ev.detail, {
bubbles: false,
})
);
makeDialogManager(this, document.body);
}
protected updatePageEl(el) {
if ("setProperties" in el) {
// As long as we have Polymer pages
(el as PolymerElement).setProperties({
hass: this.hass,
supervisorInfo: this._supervisorInfo,
hostInfo: this._hostInfo,
hassInfo: this._hassInfo,
// @ts-ignore not fighting TS today
route: this.routeTail,
});
} else {
el.hass = this.hass;
el.supervisorInfo = this._supervisorInfo;
el.hostInfo = this._hostInfo;
el.hassInfo = this._hassInfo;
// @ts-ignore not fighting TS today
el.route = this.routeTail;
}
}
private async _fetchData() {
const [supervisorInfo, hostInfo, hassInfo] = await Promise.all([
fetchHassioSupervisorInfo(this.hass),
fetchHassioHostInfo(this.hass),
fetchHassioHomeAssistantInfo(this.hass),
]);
this._supervisorInfo = supervisorInfo;
this._hostInfo = hostInfo;
this._hassInfo = hassInfo;
}
private _apiCalled(ev) {
if (!ev.detail.success) {
return;
}
let tries = 1;
const tryUpdate = () => {
this._fetchData().catch(() => {
tries += 1;
setTimeout(tryUpdate, Math.min(tries, 5) * 1000);
});
};
tryUpdate();
}
}
declare global {
interface HTMLElementTagNameMap {
"hassio-main": HassioMain;
}
}

View File

@ -11,8 +11,6 @@ import "../../src/components/ha-menu-button";
import "../../src/resources/ha-style";
import "./addon-store/hassio-addon-store";
import "./dashboard/hassio-dashboard";
import "./hassio-markdown-dialog";
import "./snapshots/hassio-snapshot";
import "./snapshots/hassio-snapshots";
import "./system/hassio-system";
@ -69,8 +67,6 @@ class HassioPagesWithTabs extends NavigateMixin(PolymerElement) {
<hassio-snapshots
hass="[[hass]]"
installed-addons="[[supervisorInfo.addons]]"
snapshot-slug="{{snapshotSlug}}"
snapshot-deleted="{{snapshotDeleted}}"
></hassio-snapshots>
</template>
<template is="dom-if" if='[[equals(page, "store")]]'>
@ -84,47 +80,23 @@ class HassioPagesWithTabs extends NavigateMixin(PolymerElement) {
></hassio-system>
</template>
</app-header-layout>
<hassio-markdown-dialog
title="[[markdownTitle]]"
content="[[markdownContent]]"
></hassio-markdown-dialog>
<template is="dom-if" if='[[equals(page, "snapshots")]]'>
<hassio-snapshot
hass="[[hass]]"
snapshot-slug="{{snapshotSlug}}"
snapshot-deleted="{{snapshotDeleted}}"
></hassio-snapshot>
</template>
`;
}
static get properties() {
return {
hass: Object,
page: String,
page: {
type: String,
computed: "_computePage(route)",
},
route: Object,
supervisorInfo: Object,
hostInfo: Object,
hassInfo: Object,
snapshotSlug: String,
snapshotDeleted: Boolean,
markdownTitle: String,
markdownContent: {
type: String,
value: "",
},
};
}
ready() {
super.ready();
this.addEventListener("hassio-markdown-dialog", (ev) =>
this.openMarkdown(ev)
);
}
handlePageSelected(ev) {
const newPage = ev.detail.item.getAttribute("page-name");
if (newPage !== this.page) {
@ -149,12 +121,8 @@ class HassioPagesWithTabs extends NavigateMixin(PolymerElement) {
}
}
openMarkdown(ev) {
this.setProperties({
markdownTitle: ev.detail.title,
markdownContent: ev.detail.content,
});
this.shadowRoot.querySelector("hassio-markdown-dialog").openDialog();
_computePage(route) {
return route.prefix.substr(route.prefix.indexOf("/", 1) + 1);
}
}

View File

@ -17,14 +17,6 @@ import {
import "../../../src/layouts/hass-loading-screen";
import "../../../src/layouts/hass-subpage";
const extractAddon = (path: string) => {
path = path.substr("/ingress".length);
const subpathStart = path.indexOf("/", 1);
return subpathStart === -1
? path.substr(1)
: path.substr(1, subpathStart - 1);
};
@customElement("hassio-ingress-view")
class HassioIngressView extends LitElement {
@property() public hass!: HomeAssistant;
@ -55,10 +47,10 @@ class HassioIngressView extends LitElement {
return;
}
const addon = extractAddon(this.route.path);
const addon = this.route.path.substr(1);
const oldRoute = changedProps.get("route") as this["route"] | undefined;
const oldAddon = oldRoute ? extractAddon(oldRoute.path) : undefined;
const oldAddon = oldRoute ? oldRoute.path.substr(1) : undefined;
if (addon && addon !== oldAddon) {
this._createSession();

View File

@ -11,6 +11,8 @@ import "../components/hassio-card-content";
import "../resources/hassio-style";
import EventsMixin from "../../../src/mixins/events-mixin";
import { showHassioSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-snapshot";
class HassioSnapshots extends EventsMixin(PolymerElement) {
static get template() {
return html`
@ -287,6 +289,10 @@ class HassioSnapshots extends EventsMixin(PolymerElement) {
}
_snapshotClicked(ev) {
showHassioSnapshotDialog(this, {
slug: ev.model.snapshot.slug,
onDelete: () => this._updateSnapshots(),
});
this.snapshotSlug = ev.model.snapshot.slug;
}
@ -294,13 +300,6 @@ class HassioSnapshots extends EventsMixin(PolymerElement) {
return type === "full";
}
_snapshotDeletedChanged(snapshotDeleted) {
if (snapshotDeleted) {
this._updateSnapshots();
this.snapshotDeleted = false;
}
}
refreshData() {
this.hass.callApi("post", "hassio/snapshots/reload").then(() => {
this._updateSnapshots();

View File

@ -6,6 +6,8 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../src/components/buttons/ha-call-api-button";
import EventsMixin from "../../../src/mixins/events-mixin";
import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
class HassioHostInfo extends EventsMixin(PolymerElement) {
static get template() {
return html`
@ -173,7 +175,7 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
() => "Error getting hardware info"
)
.then((content) => {
this.fire("hassio-markdown-dialog", {
showHassioMarkdownDialog(this, {
title: "Hardware",
content: content,
});

View File

@ -77,10 +77,22 @@ export const createHassioSession = async (hass: HomeAssistant) => {
};path=/api/hassio_ingress/`;
};
export const fetchHassioAddonInfo = async (
hass: HomeAssistant,
addon: string
) =>
export const fetchHassioAddonInfo = (hass: HomeAssistant, addon: string) =>
hass
.callApi<HassioResponse<HassioAddon>>("GET", `hassio/addons/${addon}/info`)
.then(hassioApiResultExtractor);
export const fetchHassioSupervisorInfo = (hass: HomeAssistant) =>
hass
.callApi<HassioResponse<any>>("GET", "hassio/supervisor/info")
.then(hassioApiResultExtractor);
export const fetchHassioHostInfo = (hass: HomeAssistant) =>
hass
.callApi<HassioResponse<any>>("GET", "hassio/host/info")
.then(hassioApiResultExtractor);
export const fetchHassioHomeAssistantInfo = (hass: HomeAssistant) =>
hass
.callApi<HassioResponse<any>>("GET", "hassio/homeassistant/info")
.then(hassioApiResultExtractor);

View File

@ -0,0 +1,57 @@
import { HASSDomEvent, ValidHassDomEvent } from "../common/dom/fire_event";
import { ProvideHassElement } from "../mixins/provide-hass-lit-mixin";
declare global {
// for fire event
interface HASSDomEvents {
"show-dialog": ShowDialogParams<unknown>;
}
// for add event listener
interface HTMLElementEventMap {
"show-dialog": HASSDomEvent<ShowDialogParams<unknown>>;
}
}
interface HassDialog<T = HASSDomEvents[ValidHassDomEvent]> extends HTMLElement {
showDialog(params: T);
}
interface ShowDialogParams<T> {
dialogTag: keyof HTMLElementTagNameMap;
dialogImport: () => Promise<unknown>;
dialogParams: T;
}
const LOADED = {};
export const showDialog = async (
element: HTMLElement & ProvideHassElement,
root: ShadowRoot | HTMLElement,
dialogImport: () => Promise<unknown>,
dialogTag: string,
dialogParams: unknown
) => {
if (!(dialogTag in LOADED)) {
LOADED[dialogTag] = dialogImport().then(() => {
const dialogEl = document.createElement(dialogTag) as HassDialog;
element.provideHass(dialogEl);
root.appendChild(dialogEl);
return dialogEl;
});
}
const dialogElement = await LOADED[dialogTag];
dialogElement.showDialog(dialogParams);
};
export const makeDialogManager = (
element: HTMLElement & ProvideHassElement,
root: ShadowRoot | HTMLElement
) => {
element.addEventListener(
"show-dialog",
async (e: HASSDomEvent<ShowDialogParams<unknown>>) => {
const { dialogTag, dialogImport, dialogParams } = e.detail;
showDialog(element, root, dialogImport, dialogTag, dialogParams);
}
);
};

View File

@ -1,6 +1,10 @@
import { Constructor, LitElement } from "lit-element";
import { HASSDomEvent, ValidHassDomEvent } from "../../common/dom/fire_event";
import { HASSDomEvent } from "../../common/dom/fire_event";
import { HassBaseEl } from "./hass-base-mixin";
import {
makeDialogManager,
showDialog,
} from "../../dialogs/make-dialog-manager";
interface RegisterDialogParams {
dialogShowEvent: keyof HASSDomEvents;
@ -8,31 +12,17 @@ interface RegisterDialogParams {
dialogImport: () => Promise<unknown>;
}
interface ShowDialogParams<T> {
dialogTag: keyof HTMLElementTagNameMap;
dialogImport: () => Promise<unknown>;
dialogParams: T;
}
interface HassDialog<T = HASSDomEvents[ValidHassDomEvent]> extends HTMLElement {
showDialog(params: T);
}
declare global {
// for fire event
interface HASSDomEvents {
"register-dialog": RegisterDialogParams;
"show-dialog": ShowDialogParams<unknown>;
}
// for add event listener
interface HTMLElementEventMap {
"register-dialog": HASSDomEvent<RegisterDialogParams>;
"show-dialog": HASSDomEvent<ShowDialogParams<unknown>>;
}
}
const LOADED = {};
export const dialogManagerMixin = (
superClass: Constructor<LitElement & HassBaseEl>
) =>
@ -43,13 +33,7 @@ export const dialogManagerMixin = (
this.addEventListener("register-dialog", (e) =>
this.registerDialog(e.detail)
);
this.addEventListener(
"show-dialog",
async (e: HASSDomEvent<ShowDialogParams<unknown>>) => {
const { dialogTag, dialogImport, dialogParams } = e.detail;
this._showDialog(dialogImport, dialogTag, dialogParams);
}
);
makeDialogManager(this, this.shadowRoot!);
}
private registerDialog({
@ -58,28 +42,13 @@ export const dialogManagerMixin = (
dialogImport,
}: RegisterDialogParams) {
this.addEventListener(dialogShowEvent, (showEv) => {
this._showDialog(
showDialog(
this,
this.shadowRoot!,
dialogImport,
dialogTag,
(showEv as HASSDomEvent<unknown>).detail
);
});
}
private async _showDialog(
dialogImport: () => Promise<unknown>,
dialogTag: string,
dialogParams: unknown
) {
if (!(dialogTag in LOADED)) {
LOADED[dialogTag] = dialogImport().then(() => {
const dialogEl = document.createElement(dialogTag) as HassDialog;
this.provideHass(dialogEl);
this.shadowRoot!.appendChild(dialogEl);
return dialogEl;
});
}
const element = await LOADED[dialogTag];
element.showDialog(dialogParams);
}
};

View File

@ -14,7 +14,7 @@ export class HassBaseEl {
protected hassDisconnected() {}
protected hassChanged(_hass: HomeAssistant, _oldHass?: HomeAssistant) {}
protected panelUrlChanged(_newPanelUrl: string) {}
protected provideHass(_el: HTMLElement) {}
public provideHass(_el: HTMLElement) {}
protected _updateHass(_obj: Partial<HomeAssistant>) {}
}
@ -48,7 +48,7 @@ export default <T>(superClass: Constructor<T>): Constructor<T & HassBaseEl> =>
});
}
protected provideHass(el) {
public provideHass(el) {
this.__provideHass.push(el);
el.hass = this.hass;
}

View File

@ -1,5 +1,6 @@
import { UpdatingElement, property, PropertyValues } from "lit-element";
import "./hass-error-screen";
import "./hass-loading-screen";
import { Route } from "../types";
import { navigate } from "../common/navigate";
import memoizeOne from "memoize-one";
@ -15,18 +16,27 @@ const extractPage = (path: string, defaultPage: string) => {
};
export interface RouteOptions {
// HTML tag of the route page.
tag: string;
// Function to load the page.
load: () => Promise<unknown>;
cache?: boolean;
}
export interface RouterOptions {
// The default route to show if path does not define a page.
defaultPage?: string;
// If all routes should be preloaded
preloadAll?: boolean;
// If a route has been shown, should we keep the element in memory
cacheAll?: boolean;
// Should we show a loading spinner while we load the element for the route
showLoading?: boolean;
// Promise that resolves when the initial data is loaded which is needed to show any route.
initialLoad?: () => Promise<unknown>;
routes: {
[route: string]: RouteOptions;
// If it's a string, it is another route whose options should be adopted.
[route: string]: RouteOptions | string;
};
}
@ -48,6 +58,7 @@ export class HassRouterPage extends UpdatingElement {
private _currentPage = "";
private _currentLoadProm?: Promise<void>;
private _cache = {};
private _initialLoadDone = false;
private _computeTail = memoizeOne((route: Route) => {
const dividerPos = route.path.indexOf("/", 1);
return dividerPos === -1
@ -64,6 +75,12 @@ export class HassRouterPage extends UpdatingElement {
protected update(changedProps: PropertyValues) {
super.update(changedProps);
const routerOptions = this.routerOptions || { routes: {} };
if (routerOptions && routerOptions.initialLoad && !this._initialLoadDone) {
return;
}
if (!changedProps.has("route")) {
// Do not update if we have a currentLoadProm, because that means
// that there is still an old panel shown and we're moving to a new one.
@ -74,14 +91,20 @@ export class HassRouterPage extends UpdatingElement {
}
const route = this.route;
const routerOptions = this.routerOptions || { routes: {} };
const defaultPage = routerOptions.defaultPage || "";
if (route && route.path === "") {
navigate(this, `${route.prefix}/${defaultPage}`, true);
}
const newPage = route ? extractPage(route.path, defaultPage) : "not_found";
let newPage = route ? extractPage(route.path, defaultPage) : "not_found";
let routeOptions = routerOptions.routes[newPage];
// Handle redirects
while (typeof routeOptions === "string") {
newPage = routeOptions;
routeOptions = routerOptions.routes[newPage];
}
if (this._currentPage === newPage) {
if (this.lastChild) {
@ -90,8 +113,6 @@ export class HassRouterPage extends UpdatingElement {
return;
}
const routeOptions = routerOptions.routes[newPage];
if (!routeOptions) {
this._currentPage = "";
if (this.lastChild) {
@ -151,7 +172,12 @@ export class HassRouterPage extends UpdatingElement {
}
created = true;
this._createPanel(routerOptions, newPage, routeOptions);
this._createPanel(
routerOptions,
newPage,
// @ts-ignore TS forgot this is not a string.
routeOptions
);
},
() => {
this._currentLoadProm = undefined;
@ -164,10 +190,28 @@ export class HassRouterPage extends UpdatingElement {
const options = this.routerOptions;
if (options && options.preloadAll) {
Object.values(options.routes).forEach((route) => route.load());
if (!options) {
return;
}
if (options.preloadAll) {
Object.values(options.routes).forEach(
(route) => typeof route === "object" && route.load()
);
}
if (options.initialLoad) {
setTimeout(() => {
if (!this._initialLoadDone) {
this.appendChild(this.createLoadingScreen());
}
}, LOADING_SCREEN_THRESHOLD);
options.initialLoad().then(() => {
this._initialLoadDone = true;
this.requestUpdate("route");
});
}
}
protected createLoadingScreen() {

View File

@ -74,6 +74,8 @@ class PartialPanelResolver extends HassRouterPage {
@property() public narrow?: boolean;
protected updated(changedProps: PropertyValues) {
super.updated(changedProps);
if (!changedProps.has("hass")) {
return;
}

View File

@ -0,0 +1,32 @@
import { UpdatingElement, Constructor, PropertyValues } from "lit-element";
import { HomeAssistant } from "../types";
export interface ProvideHassElement {
provideHass(element: HTMLElement);
}
/* tslint:disable */
export const ProvideHassLitMixin = <T extends UpdatingElement>(
superClass: Constructor<T>
): Constructor<T & ProvideHassElement> =>
// @ts-ignore
class extends superClass {
protected hass!: HomeAssistant;
private __provideHass: HTMLElement[] = [];
public provideHass(el) {
this.__provideHass.push(el);
el.hass = this.hass;
}
protected updated(changedProps: PropertyValues) {
super.updated(changedProps);
if (changedProps.has("hass")) {
this.__provideHass.forEach((el) => {
(el as any).hass = this.hass;
});
}
}
};