From df2e1a0af2913001e489a5772a2231da67beea41 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Sun, 5 Apr 2020 13:27:54 +0000 Subject: [PATCH 01/16] Initial move to hass-tabs-subpage for addon view --- .../{ => config}/hassio-addon-audio.ts | 10 +- .../config/hassio-addon-config-dashboard.ts | 78 +++++++++++++ .../{ => config}/hassio-addon-config.ts | 16 +-- .../{ => config}/hassio-addon-network.ts | 10 +- ...ddon-view.ts => hassio-addon-dashboard.ts} | 104 +++++++++--------- hassio/src/addon-view/hassio-addon-router.ts | 45 ++++++++ .../info/hassio-addon-info-dashboard.ts | 55 +++++++++ .../{ => info}/hassio-addon-info.ts | 28 ++--- .../log/hassio-addon-log-dashboard.ts | 55 +++++++++ .../addon-view/{ => log}/hassio-addon-logs.ts | 10 +- hassio/src/dashboard/hassio-addons.ts | 2 +- hassio/src/hassio-main.ts | 6 +- src/layouts/hass-tabs-subpage.ts | 2 +- 13 files changed, 330 insertions(+), 91 deletions(-) rename hassio/src/addon-view/{ => config}/hassio-addon-audio.ts (95%) create mode 100644 hassio/src/addon-view/config/hassio-addon-config-dashboard.ts rename hassio/src/addon-view/{ => config}/hassio-addon-config.ts (89%) rename hassio/src/addon-view/{ => config}/hassio-addon-network.ts (94%) rename hassio/src/addon-view/{hassio-addon-view.ts => hassio-addon-dashboard.ts} (59%) create mode 100644 hassio/src/addon-view/hassio-addon-router.ts create mode 100644 hassio/src/addon-view/info/hassio-addon-info-dashboard.ts rename hassio/src/addon-view/{ => info}/hassio-addon-info.ts (97%) create mode 100644 hassio/src/addon-view/log/hassio-addon-log-dashboard.ts rename hassio/src/addon-view/{ => log}/hassio-addon-logs.ts (87%) diff --git a/hassio/src/addon-view/hassio-addon-audio.ts b/hassio/src/addon-view/config/hassio-addon-audio.ts similarity index 95% rename from hassio/src/addon-view/hassio-addon-audio.ts rename to hassio/src/addon-view/config/hassio-addon-audio.ts index eeda1084a5a2..68054945389c 100644 --- a/hassio/src/addon-view/hassio-addon-audio.ts +++ b/hassio/src/addon-view/config/hassio-addon-audio.ts @@ -16,18 +16,18 @@ import { TemplateResult, } from "lit-element"; -import { HomeAssistant } from "../../../src/types"; +import { HomeAssistant } from "../../../../src/types"; import { HassioAddonDetails, setHassioAddonOption, HassioAddonSetOptionParams, -} from "../../../src/data/hassio/addon"; +} from "../../../../src/data/hassio/addon"; import { HassioHardwareAudioDevice, fetchHassioHardwareAudio, -} from "../../../src/data/hassio/hardware"; -import { hassioStyle } from "../resources/hassio-style"; -import { haStyle } from "../../../src/resources/styles"; +} from "../../../../src/data/hassio/hardware"; +import { hassioStyle } from "../../resources/hassio-style"; +import { haStyle } from "../../../../src/resources/styles"; @customElement("hassio-addon-audio") class HassioAddonAudio extends LitElement { diff --git a/hassio/src/addon-view/config/hassio-addon-config-dashboard.ts b/hassio/src/addon-view/config/hassio-addon-config-dashboard.ts new file mode 100644 index 000000000000..72b385c1340c --- /dev/null +++ b/hassio/src/addon-view/config/hassio-addon-config-dashboard.ts @@ -0,0 +1,78 @@ +import { + css, + CSSResult, + customElement, + html, + LitElement, + property, + TemplateResult, +} from "lit-element"; + +import { HomeAssistant } from "../../../../src/types"; +import { HassioAddonDetails } from "../../../../src/data/hassio/addon"; +import { hassioStyle } from "../../resources/hassio-style"; +import { haStyle } from "../../../../src/resources/styles"; + +import "./hassio-addon-audio"; +import "./hassio-addon-config"; +import "./hassio-addon-network"; + +@customElement("hassio-addon-config-dashboard") +class HassioAddonConfigDashboard extends LitElement { + @property() public hass!: HomeAssistant; + @property() public addon?: HassioAddonDetails; + + protected render(): TemplateResult { + if (!this.addon) { + return html` + + `; + } + return html` +
+ + ${this.addon.network + ? html` + + ` + : ""} + ${this.addon.audio + ? html` + + ` + : ""} +
+ `; + } + + static get styles(): CSSResult[] { + return [ + haStyle, + hassioStyle, + css` + .content { + } + hassio-addon-network, + hassio-addon-audio, + hassio-addon-config { + margin-bottom: 24px; + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hassio-addon-config-dashboard": HassioAddonConfigDashboard; + } +} diff --git a/hassio/src/addon-view/hassio-addon-config.ts b/hassio/src/addon-view/config/hassio-addon-config.ts similarity index 89% rename from hassio/src/addon-view/hassio-addon-config.ts rename to hassio/src/addon-view/config/hassio-addon-config.ts index 1a91052163b2..672583d2fc8e 100644 --- a/hassio/src/addon-view/hassio-addon-config.ts +++ b/hassio/src/addon-view/config/hassio-addon-config.ts @@ -13,19 +13,19 @@ import { query, } from "lit-element"; -import { HomeAssistant } from "../../../src/types"; +import { HomeAssistant } from "../../../../src/types"; import { HassioAddonDetails, setHassioAddonOption, HassioAddonSetOptionParams, -} from "../../../src/data/hassio/addon"; -import { hassioStyle } from "../resources/hassio-style"; -import { haStyle } from "../../../src/resources/styles"; -import { fireEvent } from "../../../src/common/dom/fire_event"; -import "../../../src/components/ha-yaml-editor"; +} from "../../../../src/data/hassio/addon"; +import { hassioStyle } from "../../resources/hassio-style"; +import { haStyle } from "../../../../src/resources/styles"; +import { fireEvent } from "../../../../src/common/dom/fire_event"; +import "../../../../src/components/ha-yaml-editor"; // tslint:disable-next-line: no-duplicate-imports -import { HaYamlEditor } from "../../../src/components/ha-yaml-editor"; -import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box"; +import { HaYamlEditor } from "../../../../src/components/ha-yaml-editor"; +import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box"; @customElement("hassio-addon-config") class HassioAddonConfig extends LitElement { diff --git a/hassio/src/addon-view/hassio-addon-network.ts b/hassio/src/addon-view/config/hassio-addon-network.ts similarity index 94% rename from hassio/src/addon-view/hassio-addon-network.ts rename to hassio/src/addon-view/config/hassio-addon-network.ts index 2ad9e008a7c4..d5a2af89d737 100644 --- a/hassio/src/addon-view/hassio-addon-network.ts +++ b/hassio/src/addon-view/config/hassio-addon-network.ts @@ -12,15 +12,15 @@ import { import { PaperInputElement } from "@polymer/paper-input/paper-input"; -import { HomeAssistant } from "../../../src/types"; +import { HomeAssistant } from "../../../../src/types"; import { HassioAddonDetails, HassioAddonSetOptionParams, setHassioAddonOption, -} from "../../../src/data/hassio/addon"; -import { hassioStyle } from "../resources/hassio-style"; -import { haStyle } from "../../../src/resources/styles"; -import { fireEvent } from "../../../src/common/dom/fire_event"; +} from "../../../../src/data/hassio/addon"; +import { hassioStyle } from "../../resources/hassio-style"; +import { haStyle } from "../../../../src/resources/styles"; +import { fireEvent } from "../../../../src/common/dom/fire_event"; interface NetworkItem { description: string; diff --git a/hassio/src/addon-view/hassio-addon-view.ts b/hassio/src/addon-view/hassio-addon-dashboard.ts similarity index 59% rename from hassio/src/addon-view/hassio-addon-view.ts rename to hassio/src/addon-view/hassio-addon-dashboard.ts index 4f5b2cfd70c7..15aebd7a1c1c 100644 --- a/hassio/src/addon-view/hassio-addon-view.ts +++ b/hassio/src/addon-view/hassio-addon-dashboard.ts @@ -1,6 +1,3 @@ -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/paper-icon-button/paper-icon-button"; import "@polymer/paper-spinner/paper-spinner-lite"; import { @@ -20,18 +17,24 @@ import { } from "../../../src/data/hassio/addon"; import { hassioStyle } from "../resources/hassio-style"; import { haStyle } from "../../../src/resources/styles"; +import "../../../src/layouts/hass-tabs-subpage"; -import "./hassio-addon-audio"; -import "./hassio-addon-config"; -import "./hassio-addon-info"; -import "./hassio-addon-logs"; -import "./hassio-addon-network"; +// tslint:disable-next-line +import { PageNavigation } from "../../../src/layouts/hass-tabs-subpage"; -@customElement("hassio-addon-view") -class HassioAddonView extends LitElement { +import "./config/hassio-addon-audio"; +import "./config/hassio-addon-config"; +import "./info/hassio-addon-info"; +import "./log/hassio-addon-logs"; +import "./config/hassio-addon-network"; +import "./hassio-addon-router"; + +@customElement("hassio-addon-dashboard") +class HassioAddonDashboard extends LitElement { @property() public hass!: HomeAssistant; @property() public route!: Route; @property() public addon?: HassioAddonDetails; + @property({ type: Boolean, reflect: true }) public narrow!: boolean; protected render(): TemplateResult { if (!this.addon) { @@ -39,46 +42,49 @@ class HassioAddonView extends LitElement { `; } - return html` - -
- - ${this.addon && this.addon.version - ? html` - + const addonTabs: PageNavigation[] = [ + { + name: "Info", + path: `/hassio/addon/${this.addon.slug}/info`, + icon: "mdi:information-variant", + }, + ]; - ${this.addon.audio - ? html` - - ` - : ""} - ${this.addon.network - ? html` - - ` - : ""} + if (this.addon.version) { + addonTabs.push( + { + name: "Configuration", + path: `/hassio/addon/${this.addon.slug}/config`, + icon: "mdi:cogs", + }, + { + name: "Log", + path: `/hassio/addon/${this.addon.slug}/logs`, + icon: "mdi:math-log", + } + ); + } - - ` - : ""} -
- + const route: Route = { + prefix: `${this.route.prefix}/${this.addon.slug}`, + path: `/${this.route.path.split("/").pop() || "info"}`, + }; + return html` + + + `; } @@ -142,7 +148,7 @@ class HassioAddonView extends LitElement { } private async _routeDataChanged(routeData: Route): Promise { - const addon = routeData.path.substr(1); + const addon = routeData.path.split("/")[1]; try { const addoninfo = await fetchHassioAddonInfo(this.hass, addon); this.addon = addoninfo; @@ -154,6 +160,6 @@ class HassioAddonView extends LitElement { declare global { interface HTMLElementTagNameMap { - "hassio-addon-view": HassioAddonView; + "hassio-addon-dashboard": HassioAddonDashboard; } } diff --git a/hassio/src/addon-view/hassio-addon-router.ts b/hassio/src/addon-view/hassio-addon-router.ts new file mode 100644 index 000000000000..0287da296497 --- /dev/null +++ b/hassio/src/addon-view/hassio-addon-router.ts @@ -0,0 +1,45 @@ +import { + HassRouterPage, + RouterOptions, +} from "../../../src/layouts/hass-router-page"; +import { customElement, property } from "lit-element"; +import { HomeAssistant } from "../../../src/types"; +// Don't codesplit the others, because it breaks the UI when pushed to a Pi +import "./info/hassio-addon-info-dashboard"; +import "./config/hassio-addon-config-dashboard"; +import "./log/hassio-addon-log-dashboard"; +import { HassioAddonDetails } from "../../../src/data/hassio/addon"; + +@customElement("hassio-addon-router") +class HassioAddonRouter extends HassRouterPage { + @property() public hass!: HomeAssistant; + @property() public addon!: HassioAddonDetails; + + protected routerOptions: RouterOptions = { + defaultPage: "info", + showLoading: true, + routes: { + info: { + tag: "hassio-addon-info-dashboard", + }, + config: { + tag: "hassio-addon-config-dashboard", + }, + logs: { + tag: "hassio-addon-log-dashboard", + }, + }, + }; + + protected updatePageEl(el) { + el.hass = this.hass; + el.addon = this.addon; + el.route = this.routeTail; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hassio-addon-router": HassioAddonRouter; + } +} diff --git a/hassio/src/addon-view/info/hassio-addon-info-dashboard.ts b/hassio/src/addon-view/info/hassio-addon-info-dashboard.ts new file mode 100644 index 000000000000..97fbe824fc4c --- /dev/null +++ b/hassio/src/addon-view/info/hassio-addon-info-dashboard.ts @@ -0,0 +1,55 @@ +import { + css, + CSSResult, + customElement, + html, + LitElement, + property, + TemplateResult, +} from "lit-element"; + +import { HomeAssistant } from "../../../../src/types"; +import { HassioAddonDetails } from "../../../../src/data/hassio/addon"; +import { hassioStyle } from "../../resources/hassio-style"; +import { haStyle } from "../../../../src/resources/styles"; + +import "./hassio-addon-info"; + +@customElement("hassio-addon-info-dashboard") +class HassioAddonInfoDashboard extends LitElement { + @property() public hass!: HomeAssistant; + @property() public addon?: HassioAddonDetails; + + protected render(): TemplateResult { + if (!this.addon) { + return html` + + `; + } + return html` +
+ +
+ `; + } + + static get styles(): CSSResult[] { + return [ + haStyle, + hassioStyle, + css` + .content { + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hassio-addon-info-dashboard": HassioAddonInfoDashboard; + } +} diff --git a/hassio/src/addon-view/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts similarity index 97% rename from hassio/src/addon-view/hassio-addon-info.ts rename to hassio/src/addon-view/info/hassio-addon-info.ts index 04b736f34f7f..8eb743c15446 100644 --- a/hassio/src/addon-view/hassio-addon-info.ts +++ b/hassio/src/addon-view/info/hassio-addon-info.ts @@ -13,14 +13,14 @@ import { } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; -import "../../../src/components/buttons/ha-call-api-button"; -import "../../../src/components/buttons/ha-progress-button"; -import "../../../src/components/ha-label-badge"; -import "../../../src/components/ha-markdown"; -import "../../../src/components/ha-switch"; -import "../components/hassio-card-content"; +import "../../../../src/components/buttons/ha-call-api-button"; +import "../../../../src/components/buttons/ha-progress-button"; +import "../../../../src/components/ha-label-badge"; +import "../../../../src/components/ha-markdown"; +import "../../../../src/components/ha-switch"; +import "../../components/hassio-card-content"; -import { fireEvent } from "../../../src/common/dom/fire_event"; +import { fireEvent } from "../../../../src/common/dom/fire_event"; import { HassioAddonDetails, HassioAddonSetOptionParams, @@ -30,13 +30,13 @@ import { uninstallHassioAddon, installHassioAddon, fetchHassioAddonChangelog, -} from "../../../src/data/hassio/addon"; -import { hassioStyle } from "../resources/hassio-style"; -import { haStyle } from "../../../src/resources/styles"; -import { HomeAssistant } from "../../../src/types"; -import { navigate } from "../../../src/common/navigate"; -import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown"; -import { atLeastVersion } from "../../../src/common/config/version"; +} from "../../../../src/data/hassio/addon"; +import { hassioStyle } from "../../resources/hassio-style"; +import { haStyle } from "../../../../src/resources/styles"; +import { HomeAssistant } from "../../../../src/types"; +import { navigate } from "../../../../src/common/navigate"; +import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown"; +import { atLeastVersion } from "../../../../src/common/config/version"; const PERMIS_DESC = { rating: { diff --git a/hassio/src/addon-view/log/hassio-addon-log-dashboard.ts b/hassio/src/addon-view/log/hassio-addon-log-dashboard.ts new file mode 100644 index 000000000000..a10b30fc7958 --- /dev/null +++ b/hassio/src/addon-view/log/hassio-addon-log-dashboard.ts @@ -0,0 +1,55 @@ +import { + css, + CSSResult, + customElement, + html, + LitElement, + property, + TemplateResult, +} from "lit-element"; + +import { HomeAssistant } from "../../../../src/types"; +import { HassioAddonDetails } from "../../../../src/data/hassio/addon"; +import { hassioStyle } from "../../resources/hassio-style"; +import { haStyle } from "../../../../src/resources/styles"; + +import "./hassio-addon-logs"; + +@customElement("hassio-addon-log-dashboard") +class HassioAddonLogDashboard extends LitElement { + @property() public hass!: HomeAssistant; + @property() public addon?: HassioAddonDetails; + + protected render(): TemplateResult { + if (!this.addon) { + return html` + + `; + } + return html` +
+ +
+ `; + } + + static get styles(): CSSResult[] { + return [ + haStyle, + hassioStyle, + css` + .content { + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hassio-addon-log-dashboard": HassioAddonLogDashboard; + } +} diff --git a/hassio/src/addon-view/hassio-addon-logs.ts b/hassio/src/addon-view/log/hassio-addon-logs.ts similarity index 87% rename from hassio/src/addon-view/hassio-addon-logs.ts rename to hassio/src/addon-view/log/hassio-addon-logs.ts index 0f568df2c774..914d9c396db5 100644 --- a/hassio/src/addon-view/hassio-addon-logs.ts +++ b/hassio/src/addon-view/log/hassio-addon-logs.ts @@ -10,14 +10,14 @@ import { TemplateResult, query, } from "lit-element"; -import { HomeAssistant } from "../../../src/types"; +import { HomeAssistant } from "../../../../src/types"; import { HassioAddonDetails, fetchHassioAddonLogs, -} from "../../../src/data/hassio/addon"; -import { ANSI_HTML_STYLE, parseTextToColoredPre } from "../ansi-to-html"; -import { hassioStyle } from "../resources/hassio-style"; -import { haStyle } from "../../../src/resources/styles"; +} from "../../../../src/data/hassio/addon"; +import { ANSI_HTML_STYLE, parseTextToColoredPre } from "../../ansi-to-html"; +import { hassioStyle } from "../../resources/hassio-style"; +import { haStyle } from "../../../../src/resources/styles"; @customElement("hassio-addon-logs") class HassioAddonLogs extends LitElement { diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts index c59edcfc5e28..b4fa77bc7822 100644 --- a/hassio/src/dashboard/hassio-addons.ts +++ b/hassio/src/dashboard/hassio-addons.ts @@ -96,7 +96,7 @@ class HassioAddons extends LitElement { } private _addonTapped(ev: any): void { - navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`); + navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}/info`); } private _openStore(): void { diff --git a/hassio/src/hassio-main.ts b/hassio/src/hassio-main.ts index ff5def6b41fa..08efd7bbbf58 100644 --- a/hassio/src/hassio-main.ts +++ b/hassio/src/hassio-main.ts @@ -61,10 +61,10 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) { store: "dashboard", system: "dashboard", addon: { - tag: "hassio-addon-view", + tag: "hassio-addon-dashboard", load: () => import( - /* webpackChunkName: "hassio-addon-view" */ "./addon-view/hassio-addon-view" + /* webpackChunkName: "hassio-addon-dashboard" */ "./addon-view/hassio-addon-dashboard" ), }, ingress: { @@ -226,7 +226,7 @@ class HassioMain extends ProvideHassLitMixin(HassRouterPage) { text: "Add-on is not running. Please start it first", title: addon.name, }, - () => navigate(this, `/hassio/addon/${addon.slug}`, true) + () => navigate(this, `/hassio/addon/${addon.slug}/info`, true) ); return; diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts index 2198acf49b9a..fdac62351405 100644 --- a/src/layouts/hass-tabs-subpage.ts +++ b/src/layouts/hass-tabs-subpage.ts @@ -76,7 +76,7 @@ class HassTabsSubpage extends LitElement { ${page.translationKey ? this.hass.localize(page.translationKey) - : name} ` : ""} From e76a577d07c4c2afaa3d5f21b5226f151de4f531 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Tue, 7 Apr 2020 09:28:35 +0000 Subject: [PATCH 02/16] Adds _computeTail --- .../src/addon-view/hassio-addon-dashboard.ts | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/hassio/src/addon-view/hassio-addon-dashboard.ts b/hassio/src/addon-view/hassio-addon-dashboard.ts index 15aebd7a1c1c..0c83fdf63bfa 100644 --- a/hassio/src/addon-view/hassio-addon-dashboard.ts +++ b/hassio/src/addon-view/hassio-addon-dashboard.ts @@ -9,7 +9,7 @@ import { property, TemplateResult, } from "lit-element"; - +import memoizeOne from "memoize-one"; import { HomeAssistant, Route } from "../../../src/types"; import { HassioAddonDetails, @@ -36,6 +36,19 @@ class HassioAddonDashboard extends LitElement { @property() public addon?: HassioAddonDetails; @property({ type: Boolean, reflect: true }) public narrow!: boolean; + private _computeTail = memoizeOne((route: Route) => { + const dividerPos = route.path.indexOf("/", 1); + return dividerPos === -1 + ? { + prefix: route.prefix + route.path, + path: "", + } + : { + prefix: route.prefix + route.path.substr(0, dividerPos), + path: route.path.substr(dividerPos), + }; + }); + protected render(): TemplateResult { if (!this.addon) { return html` @@ -66,10 +79,8 @@ class HassioAddonDashboard extends LitElement { ); } - const route: Route = { - prefix: `${this.route.prefix}/${this.addon.slug}`, - path: `/${this.route.path.split("/").pop() || "info"}`, - }; + const route = this._computeTail(this.route); + return html` Date: Tue, 7 Apr 2020 13:06:49 +0000 Subject: [PATCH 03/16] Fix tab active for simple pages --- src/layouts/hass-tabs-subpage.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts index fdac62351405..ec740e777fe0 100644 --- a/src/layouts/hass-tabs-subpage.ts +++ b/src/layouts/hass-tabs-subpage.ts @@ -90,8 +90,9 @@ class HassTabsSubpage extends LitElement { protected updated(changedProperties: PropertyValues) { super.updated(changedProperties); if (changedProperties.has("route")) { + console.log(this.route); this._activeTab = this.tabs.find((tab) => - this.route.prefix.includes(tab.path) + `${this.route.prefix}${this.route.path}`.includes(tab.path) ); } } From c8d2862c442b35716b43603ed6fd3ff0dea12595 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Tue, 7 Apr 2020 13:07:50 +0000 Subject: [PATCH 04/16] Console.Bye --- src/layouts/hass-tabs-subpage.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts index ec740e777fe0..e5a87b5c774c 100644 --- a/src/layouts/hass-tabs-subpage.ts +++ b/src/layouts/hass-tabs-subpage.ts @@ -90,7 +90,6 @@ class HassTabsSubpage extends LitElement { protected updated(changedProperties: PropertyValues) { super.updated(changedProperties); if (changedProperties.has("route")) { - console.log(this.route); this._activeTab = this.tabs.find((tab) => `${this.route.prefix}${this.route.path}`.includes(tab.path) ); From fad3f7742e843d7149f9994aea51d33f3e8342ab Mon Sep 17 00:00:00 2001 From: ludeeus Date: Tue, 7 Apr 2020 13:18:31 +0000 Subject: [PATCH 05/16] rename dashboard -> tab --- ...onfig-dashboard.ts => hassio-addon-config-tab.ts} | 4 ++-- hassio/src/addon-view/hassio-addon-router.ts | 12 ++++++------ ...on-info-dashboard.ts => hassio-addon-info-tab.ts} | 4 ++-- ...ddon-log-dashboard.ts => hassio-addon-log-tab.ts} | 4 ++-- 4 files changed, 12 insertions(+), 12 deletions(-) rename hassio/src/addon-view/config/{hassio-addon-config-dashboard.ts => hassio-addon-config-tab.ts} (93%) rename hassio/src/addon-view/info/{hassio-addon-info-dashboard.ts => hassio-addon-info-tab.ts} (91%) rename hassio/src/addon-view/log/{hassio-addon-log-dashboard.ts => hassio-addon-log-tab.ts} (91%) diff --git a/hassio/src/addon-view/config/hassio-addon-config-dashboard.ts b/hassio/src/addon-view/config/hassio-addon-config-tab.ts similarity index 93% rename from hassio/src/addon-view/config/hassio-addon-config-dashboard.ts rename to hassio/src/addon-view/config/hassio-addon-config-tab.ts index 72b385c1340c..0af4f10c3399 100644 --- a/hassio/src/addon-view/config/hassio-addon-config-dashboard.ts +++ b/hassio/src/addon-view/config/hassio-addon-config-tab.ts @@ -17,7 +17,7 @@ import "./hassio-addon-audio"; import "./hassio-addon-config"; import "./hassio-addon-network"; -@customElement("hassio-addon-config-dashboard") +@customElement("hassio-addon-config-tab") class HassioAddonConfigDashboard extends LitElement { @property() public hass!: HomeAssistant; @property() public addon?: HassioAddonDetails; @@ -73,6 +73,6 @@ class HassioAddonConfigDashboard extends LitElement { declare global { interface HTMLElementTagNameMap { - "hassio-addon-config-dashboard": HassioAddonConfigDashboard; + "hassio-addon-config-tab": HassioAddonConfigDashboard; } } diff --git a/hassio/src/addon-view/hassio-addon-router.ts b/hassio/src/addon-view/hassio-addon-router.ts index 0287da296497..b58a71a7903a 100644 --- a/hassio/src/addon-view/hassio-addon-router.ts +++ b/hassio/src/addon-view/hassio-addon-router.ts @@ -5,9 +5,9 @@ import { import { customElement, property } from "lit-element"; import { HomeAssistant } from "../../../src/types"; // Don't codesplit the others, because it breaks the UI when pushed to a Pi -import "./info/hassio-addon-info-dashboard"; -import "./config/hassio-addon-config-dashboard"; -import "./log/hassio-addon-log-dashboard"; +import "./info/hassio-addon-info-tab"; +import "./config/hassio-addon-config-tab"; +import "./log/hassio-addon-log-tab"; import { HassioAddonDetails } from "../../../src/data/hassio/addon"; @customElement("hassio-addon-router") @@ -20,13 +20,13 @@ class HassioAddonRouter extends HassRouterPage { showLoading: true, routes: { info: { - tag: "hassio-addon-info-dashboard", + tag: "hassio-addon-info-tab", }, config: { - tag: "hassio-addon-config-dashboard", + tag: "hassio-addon-config-tab", }, logs: { - tag: "hassio-addon-log-dashboard", + tag: "hassio-addon-log-tab", }, }, }; diff --git a/hassio/src/addon-view/info/hassio-addon-info-dashboard.ts b/hassio/src/addon-view/info/hassio-addon-info-tab.ts similarity index 91% rename from hassio/src/addon-view/info/hassio-addon-info-dashboard.ts rename to hassio/src/addon-view/info/hassio-addon-info-tab.ts index 97fbe824fc4c..964b5b751453 100644 --- a/hassio/src/addon-view/info/hassio-addon-info-dashboard.ts +++ b/hassio/src/addon-view/info/hassio-addon-info-tab.ts @@ -15,7 +15,7 @@ import { haStyle } from "../../../../src/resources/styles"; import "./hassio-addon-info"; -@customElement("hassio-addon-info-dashboard") +@customElement("hassio-addon-info-tab") class HassioAddonInfoDashboard extends LitElement { @property() public hass!: HomeAssistant; @property() public addon?: HassioAddonDetails; @@ -50,6 +50,6 @@ class HassioAddonInfoDashboard extends LitElement { declare global { interface HTMLElementTagNameMap { - "hassio-addon-info-dashboard": HassioAddonInfoDashboard; + "hassio-addon-info-tab": HassioAddonInfoDashboard; } } diff --git a/hassio/src/addon-view/log/hassio-addon-log-dashboard.ts b/hassio/src/addon-view/log/hassio-addon-log-tab.ts similarity index 91% rename from hassio/src/addon-view/log/hassio-addon-log-dashboard.ts rename to hassio/src/addon-view/log/hassio-addon-log-tab.ts index a10b30fc7958..97981aee0459 100644 --- a/hassio/src/addon-view/log/hassio-addon-log-dashboard.ts +++ b/hassio/src/addon-view/log/hassio-addon-log-tab.ts @@ -15,7 +15,7 @@ import { haStyle } from "../../../../src/resources/styles"; import "./hassio-addon-logs"; -@customElement("hassio-addon-log-dashboard") +@customElement("hassio-addon-log-tab") class HassioAddonLogDashboard extends LitElement { @property() public hass!: HomeAssistant; @property() public addon?: HassioAddonDetails; @@ -50,6 +50,6 @@ class HassioAddonLogDashboard extends LitElement { declare global { interface HTMLElementTagNameMap { - "hassio-addon-log-dashboard": HassioAddonLogDashboard; + "hassio-addon-log-tab": HassioAddonLogDashboard; } } From 1e78a7ddcbd7f7465e732a7a280eef64cb096251 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Tue, 7 Apr 2020 13:31:45 +0000 Subject: [PATCH 06/16] Add header for mobile --- hassio/src/addon-view/hassio-addon-dashboard.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/hassio/src/addon-view/hassio-addon-dashboard.ts b/hassio/src/addon-view/hassio-addon-dashboard.ts index 0c83fdf63bfa..e91c34ffe053 100644 --- a/hassio/src/addon-view/hassio-addon-dashboard.ts +++ b/hassio/src/addon-view/hassio-addon-dashboard.ts @@ -90,6 +90,7 @@ class HassioAddonDashboard extends LitElement { .hassio=${true} .tabs=${addonTabs} > + ${this.addon.name} Date: Tue, 7 Apr 2020 15:07:03 +0000 Subject: [PATCH 07/16] Hide header in card if narrow --- hassio/src/addon-view/hassio-addon-dashboard.ts | 1 + hassio/src/addon-view/hassio-addon-router.ts | 4 +++- hassio/src/addon-view/info/hassio-addon-info-tab.ts | 13 ++++--------- hassio/src/addon-view/info/hassio-addon-info.ts | 3 ++- 4 files changed, 10 insertions(+), 11 deletions(-) diff --git a/hassio/src/addon-view/hassio-addon-dashboard.ts b/hassio/src/addon-view/hassio-addon-dashboard.ts index e91c34ffe053..1d601e439dcb 100644 --- a/hassio/src/addon-view/hassio-addon-dashboard.ts +++ b/hassio/src/addon-view/hassio-addon-dashboard.ts @@ -93,6 +93,7 @@ class HassioAddonDashboard extends LitElement { ${this.addon.name} diff --git a/hassio/src/addon-view/hassio-addon-router.ts b/hassio/src/addon-view/hassio-addon-router.ts index b58a71a7903a..9967c4938461 100644 --- a/hassio/src/addon-view/hassio-addon-router.ts +++ b/hassio/src/addon-view/hassio-addon-router.ts @@ -12,6 +12,7 @@ import { HassioAddonDetails } from "../../../src/data/hassio/addon"; @customElement("hassio-addon-router") class HassioAddonRouter extends HassRouterPage { + @property({ type: Boolean, reflect: true }) public narrow = false; @property() public hass!: HomeAssistant; @property() public addon!: HassioAddonDetails; @@ -32,9 +33,10 @@ class HassioAddonRouter extends HassRouterPage { }; protected updatePageEl(el) { + el.route = this.routeTail; el.hass = this.hass; el.addon = this.addon; - el.route = this.routeTail; + el.narrow = this.narrow; } } diff --git a/hassio/src/addon-view/info/hassio-addon-info-tab.ts b/hassio/src/addon-view/info/hassio-addon-info-tab.ts index 964b5b751453..a2ba4e5f00e8 100644 --- a/hassio/src/addon-view/info/hassio-addon-info-tab.ts +++ b/hassio/src/addon-view/info/hassio-addon-info-tab.ts @@ -1,5 +1,4 @@ import { - css, CSSResult, customElement, html, @@ -17,6 +16,7 @@ import "./hassio-addon-info"; @customElement("hassio-addon-info-tab") class HassioAddonInfoDashboard extends LitElement { + @property({ type: Boolean, reflect: true }) public narrow!: boolean; @property() public hass!: HomeAssistant; @property() public addon?: HassioAddonDetails; @@ -26,9 +26,11 @@ class HassioAddonInfoDashboard extends LitElement { `; } + console.log(this.narrow); return html`
@@ -37,14 +39,7 @@ class HassioAddonInfoDashboard extends LitElement { } static get styles(): CSSResult[] { - return [ - haStyle, - hassioStyle, - css` - .content { - } - `, - ]; + return [haStyle, hassioStyle]; } } diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts index 8eb743c15446..b4c1f5fc6ff2 100644 --- a/hassio/src/addon-view/info/hassio-addon-info.ts +++ b/hassio/src/addon-view/info/hassio-addon-info.ts @@ -93,6 +93,7 @@ const PERMIS_DESC = { @customElement("hassio-addon-info") class HassioAddonInfo extends LitElement { + @property({ type: Boolean, reflect: true }) public narrow!: boolean; @property() public hass!: HomeAssistant; @property() public addon!: HassioAddonDetails; @property() private _error?: string; @@ -157,7 +158,7 @@ class HassioAddonInfo extends LitElement {
- ${this.addon.name} + ${!this.narrow ? this.addon.name : ""}
${this.addon.version ? html` From 30eb85c1af5ebe95a057e069d291e8f6220158e4 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Tue, 7 Apr 2020 15:07:26 +0000 Subject: [PATCH 08/16] Console.Bye --- hassio/src/addon-view/info/hassio-addon-info-tab.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hassio/src/addon-view/info/hassio-addon-info-tab.ts b/hassio/src/addon-view/info/hassio-addon-info-tab.ts index a2ba4e5f00e8..434b233a4294 100644 --- a/hassio/src/addon-view/info/hassio-addon-info-tab.ts +++ b/hassio/src/addon-view/info/hassio-addon-info-tab.ts @@ -26,7 +26,7 @@ class HassioAddonInfoDashboard extends LitElement { `; } - console.log(this.narrow); + return html`
Date: Thu, 30 Apr 2020 18:57:38 +0000 Subject: [PATCH 09/16] Fix issues after bad rebase --- .../addon-view/config/hassio-addon-audio.ts | 18 ++++----- .../config/hassio-addon-config-tab.ts | 9 ++--- .../addon-view/config/hassio-addon-config.ts | 20 +++++----- .../addon-view/config/hassio-addon-network.ts | 16 ++++---- .../src/addon-view/hassio-addon-dashboard.ts | 24 ++++++----- hassio/src/addon-view/hassio-addon-router.ts | 6 ++- .../addon-view/info/hassio-addon-info-tab.ts | 10 ++--- .../src/addon-view/info/hassio-addon-info.ts | 40 ++++++++++--------- .../addon-view/log/hassio-addon-log-tab.ts | 9 ++--- .../src/addon-view/log/hassio-addon-logs.ts | 10 ++--- 10 files changed, 84 insertions(+), 78 deletions(-) diff --git a/hassio/src/addon-view/config/hassio-addon-audio.ts b/hassio/src/addon-view/config/hassio-addon-audio.ts index 2a087ff35101..c59ff8fceff2 100644 --- a/hassio/src/addon-view/config/hassio-addon-audio.ts +++ b/hassio/src/addon-view/config/hassio-addon-audio.ts @@ -18,20 +18,20 @@ import { HassioAddonDetails, HassioAddonSetOptionParams, setHassioAddonOption, -} from "../../../src/data/hassio/addon"; +} from "../../../../src/data/hassio/addon"; import { fetchHassioHardwareAudio, HassioHardwareAudioDevice, -} from "../../../src/data/hassio/hardware"; -import { haStyle } from "../../../src/resources/styles"; -import { HomeAssistant } from "../../../src/types"; -import { hassioStyle } from "../resources/hassio-style"; +} from "../../../../src/data/hassio/hardware"; +import { haStyle } from "../../../../src/resources/styles"; +import { HomeAssistant } from "../../../../src/types"; +import { hassioStyle } from "../../resources/hassio-style"; @customElement("hassio-addon-audio") class HassioAddonAudio extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() public addon!: HassioAddonDetails; + @property({ attribute: false }) public addon!: HassioAddonDetails; @property() private _error?: string; @@ -56,7 +56,7 @@ class HassioAddonAudio extends LitElement { ${this._inputDevices && this._inputDevices.map((item) => { @@ -75,7 +75,7 @@ class HassioAddonAudio extends LitElement { ${this._outputDevices && this._outputDevices.map((item) => { diff --git a/hassio/src/addon-view/config/hassio-addon-config-tab.ts b/hassio/src/addon-view/config/hassio-addon-config-tab.ts index 0af4f10c3399..04469dfc1a60 100644 --- a/hassio/src/addon-view/config/hassio-addon-config-tab.ts +++ b/hassio/src/addon-view/config/hassio-addon-config-tab.ts @@ -19,14 +19,13 @@ import "./hassio-addon-network"; @customElement("hassio-addon-config-tab") class HassioAddonConfigDashboard extends LitElement { - @property() public hass!: HomeAssistant; - @property() public addon?: HassioAddonDetails; + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ attribute: false }) public addon?: HassioAddonDetails; protected render(): TemplateResult { if (!this.addon) { - return html` - - `; + return html` `; } return html`
diff --git a/hassio/src/addon-view/config/hassio-addon-config.ts b/hassio/src/addon-view/config/hassio-addon-config.ts index 5d18556ecc56..0699b4654e9c 100644 --- a/hassio/src/addon-view/config/hassio-addon-config.ts +++ b/hassio/src/addon-view/config/hassio-addon-config.ts @@ -12,24 +12,24 @@ import { query, TemplateResult, } from "lit-element"; -import { fireEvent } from "../../../src/common/dom/fire_event"; -import "../../../src/components/ha-yaml-editor"; -import type { HaYamlEditor } from "../../../src/components/ha-yaml-editor"; +import { fireEvent } from "../../../../src/common/dom/fire_event"; +import "../../../../src/components/ha-yaml-editor"; +import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor"; import { HassioAddonDetails, HassioAddonSetOptionParams, setHassioAddonOption, -} from "../../../src/data/hassio/addon"; -import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box"; -import { haStyle } from "../../../src/resources/styles"; -import type { HomeAssistant } from "../../../src/types"; -import { hassioStyle } from "../resources/hassio-style"; +} from "../../../../src/data/hassio/addon"; +import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box"; +import { haStyle } from "../../../../src/resources/styles"; +import type { HomeAssistant } from "../../../../src/types"; +import { hassioStyle } from "../../resources/hassio-style"; @customElement("hassio-addon-config") class HassioAddonConfig extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() public addon!: HassioAddonDetails; + @property({ attribute: false }) public addon!: HassioAddonDetails; @property() private _error?: string; diff --git a/hassio/src/addon-view/config/hassio-addon-network.ts b/hassio/src/addon-view/config/hassio-addon-network.ts index 914157438fa2..5d6e705a2aa5 100644 --- a/hassio/src/addon-view/config/hassio-addon-network.ts +++ b/hassio/src/addon-view/config/hassio-addon-network.ts @@ -10,15 +10,15 @@ import { PropertyValues, TemplateResult, } from "lit-element"; -import { fireEvent } from "../../../src/common/dom/fire_event"; +import { fireEvent } from "../../../../src/common/dom/fire_event"; import { HassioAddonDetails, HassioAddonSetOptionParams, setHassioAddonOption, -} from "../../../src/data/hassio/addon"; -import { haStyle } from "../../../src/resources/styles"; -import { HomeAssistant } from "../../../src/types"; -import { hassioStyle } from "../resources/hassio-style"; +} from "../../../../src/data/hassio/addon"; +import { haStyle } from "../../../../src/resources/styles"; +import { HomeAssistant } from "../../../../src/types"; +import { hassioStyle } from "../../resources/hassio-style"; interface NetworkItem { description: string; @@ -32,9 +32,9 @@ interface NetworkItemInput extends PaperInputElement { @customElement("hassio-addon-network") class HassioAddonNetwork extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() public addon!: HassioAddonDetails; + @property({ attribute: false }) public addon!: HassioAddonDetails; @property() private _error?: string; @@ -70,7 +70,7 @@ class HassioAddonNetwork extends LitElement { diff --git a/hassio/src/addon-view/hassio-addon-dashboard.ts b/hassio/src/addon-view/hassio-addon-dashboard.ts index 61493e41ec77..8d020c7545ca 100644 --- a/hassio/src/addon-view/hassio-addon-dashboard.ts +++ b/hassio/src/addon-view/hassio-addon-dashboard.ts @@ -9,6 +9,7 @@ import { property, TemplateResult, } from "lit-element"; +import memoizeOne from "memoize-one"; import { fetchHassioAddonInfo, HassioAddonDetails, @@ -16,20 +17,23 @@ import { import { haStyle } from "../../../src/resources/styles"; import { HomeAssistant, Route } from "../../../src/types"; import { hassioStyle } from "../resources/hassio-style"; -import "./hassio-addon-audio"; -import "./hassio-addon-config"; -import "./hassio-addon-info"; -import "./hassio-addon-logs"; -import "./hassio-addon-network"; -import "../../../src/layouts/hass-subpage"; - +import "./config/hassio-addon-audio"; +import "./config/hassio-addon-config"; +import "./info/hassio-addon-info"; +import "./log/hassio-addon-logs"; +import "./config/hassio-addon-network"; +import type { PageNavigation } from "../../../src/layouts/hass-tabs-subpage"; +import "../../../src/layouts/hass-tabs-subpage"; + +import "./hassio-addon-router"; @customElement("hassio-addon-dashboard") class HassioAddonDashboard extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ attribute: false }) public route!: Route; - @property() public route!: Route; + @property({ attribute: false }) public addon?: HassioAddonDetails; - @property() public addon?: HassioAddonDetails; @property({ type: Boolean, reflect: true }) public narrow!: boolean; private _computeTail = memoizeOne((route: Route) => { diff --git a/hassio/src/addon-view/hassio-addon-router.ts b/hassio/src/addon-view/hassio-addon-router.ts index 9967c4938461..b1d8d6a91cb9 100644 --- a/hassio/src/addon-view/hassio-addon-router.ts +++ b/hassio/src/addon-view/hassio-addon-router.ts @@ -13,8 +13,10 @@ import { HassioAddonDetails } from "../../../src/data/hassio/addon"; @customElement("hassio-addon-router") class HassioAddonRouter extends HassRouterPage { @property({ type: Boolean, reflect: true }) public narrow = false; - @property() public hass!: HomeAssistant; - @property() public addon!: HassioAddonDetails; + + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ attribute: false }) public addon!: HassioAddonDetails; protected routerOptions: RouterOptions = { defaultPage: "info", diff --git a/hassio/src/addon-view/info/hassio-addon-info-tab.ts b/hassio/src/addon-view/info/hassio-addon-info-tab.ts index 434b233a4294..41e1db64d26a 100644 --- a/hassio/src/addon-view/info/hassio-addon-info-tab.ts +++ b/hassio/src/addon-view/info/hassio-addon-info-tab.ts @@ -17,14 +17,14 @@ import "./hassio-addon-info"; @customElement("hassio-addon-info-tab") class HassioAddonInfoDashboard extends LitElement { @property({ type: Boolean, reflect: true }) public narrow!: boolean; - @property() public hass!: HomeAssistant; - @property() public addon?: HassioAddonDetails; + + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ attribute: false }) public addon?: HassioAddonDetails; protected render(): TemplateResult { if (!this.addon) { - return html` - - `; + return html` `; } return html` diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts index 3722727445cf..e4245c6d5696 100644 --- a/hassio/src/addon-view/info/hassio-addon-info.ts +++ b/hassio/src/addon-view/info/hassio-addon-info.ts @@ -12,14 +12,14 @@ import { TemplateResult, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; -import { atLeastVersion } from "../../../src/common/config/version"; -import { fireEvent } from "../../../src/common/dom/fire_event"; -import { navigate } from "../../../src/common/navigate"; -import "../../../src/components/buttons/ha-call-api-button"; -import "../../../src/components/buttons/ha-progress-button"; -import "../../../src/components/ha-label-badge"; -import "../../../src/components/ha-markdown"; -import "../../../src/components/ha-switch"; +import { atLeastVersion } from "../../../../src/common/config/version"; +import { fireEvent } from "../../../../src/common/dom/fire_event"; +import { navigate } from "../../../../src/common/navigate"; +import "../../../../src/components/buttons/ha-call-api-button"; +import "../../../../src/components/buttons/ha-progress-button"; +import "../../../../src/components/ha-label-badge"; +import "../../../../src/components/ha-markdown"; +import "../../../../src/components/ha-switch"; import { fetchHassioAddonChangelog, HassioAddonDetails, @@ -29,12 +29,12 @@ import { setHassioAddonOption, setHassioAddonSecurity, uninstallHassioAddon, -} from "../../../src/data/hassio/addon"; -import { haStyle } from "../../../src/resources/styles"; -import { HomeAssistant } from "../../../src/types"; -import "../components/hassio-card-content"; -import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown"; -import { hassioStyle } from "../resources/hassio-style"; +} from "../../../../src/data/hassio/addon"; +import { haStyle } from "../../../../src/resources/styles"; +import { HomeAssistant } from "../../../../src/types"; +import "../../components/hassio-card-content"; +import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown"; +import { hassioStyle } from "../../resources/hassio-style"; const PERMIS_DESC = { rating: { @@ -92,15 +92,17 @@ const PERMIS_DESC = { @customElement("hassio-addon-info") class HassioAddonInfo extends LitElement { @property({ type: Boolean, reflect: true }) public narrow!: boolean; - @property() public hass!: HomeAssistant; - @property() public addon!: HassioAddonDetails; + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ attribute: false }) public addon!: HassioAddonDetails; @property() private _error?: string; @property({ type: Boolean }) private _installing = false; protected render(): TemplateResult { + console.log("addon-info"); return html` ${this._computeUpdateAvailable ? html` @@ -186,7 +188,7 @@ class HassioAddonInfo extends LitElement {
${this.addon.description}.
Visit - + ${this.addon.name} page for details. @@ -194,7 +196,7 @@ class HassioAddonInfo extends LitElement { ${this.addon.logo ? html`