diff --git a/build-scripts/gulp/webpack.js b/build-scripts/gulp/webpack.js index ed07ea7f3c..a9e39c7bd5 100644 --- a/build-scripts/gulp/webpack.js +++ b/build-scripts/gulp/webpack.js @@ -28,7 +28,7 @@ const runDevServer = ({ open: true, watchContentBase: true, contentBase, - }).listen(port, listenHost, function(err) { + }).listen(port, listenHost, function (err) { if (err) { throw err; } diff --git a/hassio/src/addon-view/hassio-addon-audio.ts b/hassio/src/addon-view/config/hassio-addon-audio.ts similarity index 90% rename from hassio/src/addon-view/hassio-addon-audio.ts rename to hassio/src/addon-view/config/hassio-addon-audio.ts index 2a087ff351..c59ff8fcef 100644 --- a/hassio/src/addon-view/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 new file mode 100644 index 0000000000..ba5e857b50 --- /dev/null +++ b/hassio/src/addon-view/config/hassio-addon-config-tab.ts @@ -0,0 +1,82 @@ +import "@polymer/paper-spinner/paper-spinner-lite"; +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-tab") +class HassioAddonConfigDashboard extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ attribute: false }) 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` + @media screen and (min-width: 1024px) { + .content { + width: 50%; + margin: auto; + } + } + hassio-addon-network, + hassio-addon-audio, + hassio-addon-config { + margin-bottom: 24px; + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hassio-addon-config-tab": HassioAddonConfigDashboard; + } +} diff --git a/hassio/src/addon-view/hassio-addon-config.ts b/hassio/src/addon-view/config/hassio-addon-config.ts similarity index 86% rename from hassio/src/addon-view/hassio-addon-config.ts rename to hassio/src/addon-view/config/hassio-addon-config.ts index 5d18556ecc..0699b4654e 100644 --- a/hassio/src/addon-view/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/hassio-addon-network.ts b/hassio/src/addon-view/config/hassio-addon-network.ts similarity index 91% rename from hassio/src/addon-view/hassio-addon-network.ts rename to hassio/src/addon-view/config/hassio-addon-network.ts index 914157438f..5d6e705a2a 100644 --- a/hassio/src/addon-view/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-view.ts b/hassio/src/addon-view/hassio-addon-dashboard.ts similarity index 51% rename from hassio/src/addon-view/hassio-addon-view.ts rename to hassio/src/addon-view/hassio-addon-dashboard.ts index a26c31b416..c6955f28a1 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 { @@ -12,6 +9,7 @@ import { property, TemplateResult, } from "lit-element"; +import memoizeOne from "memoize-one"; import { fetchHassioAddonInfo, HassioAddonDetails, @@ -19,65 +17,86 @@ 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"; -@customElement("hassio-addon-view") -class HassioAddonView extends LitElement { - @property() public hass!: HomeAssistant; +import "./hassio-addon-router"; - @property() public route!: Route; +@customElement("hassio-addon-dashboard") +class HassioAddonDashboard extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; - @property() public addon?: HassioAddonDetails; + @property({ attribute: false }) public route!: Route; + + @property({ attribute: false }) public addon?: HassioAddonDetails; + + @property({ type: Boolean }) 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` `; } + + const addonTabs: PageNavigation[] = [ + { + name: "Info", + path: `/hassio/addon/${this.addon.slug}/info`, + icon: "mdi:information-variant", + }, + ]; + + 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 = this._computeTail(this.route); + return html` - -
- - - ${this.addon && this.addon.version - ? html` - - - ${this.addon.audio - ? html` - - ` - : ""} - ${this.addon.network - ? html` - - ` - : ""} - - - ` - : ""} -
- + + ${this.addon.name} + + `; } @@ -141,7 +160,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; @@ -153,6 +172,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 0000000000..d0f8284c44 --- /dev/null +++ b/hassio/src/addon-view/hassio-addon-router.ts @@ -0,0 +1,49 @@ +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-tab"; +import "./config/hassio-addon-config-tab"; +import "./log/hassio-addon-log-tab"; +import { HassioAddonDetails } from "../../../src/data/hassio/addon"; + +@customElement("hassio-addon-router") +class HassioAddonRouter extends HassRouterPage { + @property({ type: Boolean }) public narrow = false; + + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ attribute: false }) public addon!: HassioAddonDetails; + + protected routerOptions: RouterOptions = { + defaultPage: "info", + showLoading: true, + routes: { + info: { + tag: "hassio-addon-info-tab", + }, + config: { + tag: "hassio-addon-config-tab", + }, + logs: { + tag: "hassio-addon-log-tab", + }, + }, + }; + + protected updatePageEl(el) { + el.route = this.routeTail; + el.hass = this.hass; + el.addon = this.addon; + el.narrow = this.narrow; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hassio-addon-router": HassioAddonRouter; + } +} diff --git a/hassio/src/addon-view/info/hassio-addon-info-tab.ts b/hassio/src/addon-view/info/hassio-addon-info-tab.ts new file mode 100644 index 0000000000..e74e735372 --- /dev/null +++ b/hassio/src/addon-view/info/hassio-addon-info-tab.ts @@ -0,0 +1,63 @@ +import "@polymer/paper-spinner/paper-spinner-lite"; +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-tab") +class HassioAddonInfoDashboard extends LitElement { + @property({ type: Boolean }) public narrow!: boolean; + + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ attribute: false }) public addon?: HassioAddonDetails; + + protected render(): TemplateResult { + if (!this.addon) { + return html` `; + } + + return html` +
+ +
+ `; + } + + static get styles(): CSSResult[] { + return [ + haStyle, + hassioStyle, + css` + @media screen and (min-width: 1024px) { + .content { + width: 50%; + margin-left: 25%; + } + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hassio-addon-info-tab": HassioAddonInfoDashboard; + } +} diff --git a/hassio/src/addon-view/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts similarity index 95% rename from hassio/src/addon-view/hassio-addon-info.ts rename to hassio/src/addon-view/info/hassio-addon-info.ts index 1395a3ee43..ef83fe9160 100644 --- a/hassio/src/addon-view/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: { @@ -91,9 +91,11 @@ const PERMIS_DESC = { @customElement("hassio-addon-info") class HassioAddonInfo extends LitElement { - @property() public hass!: HomeAssistant; + @property({ type: Boolean }) public narrow!: boolean; - @property() public addon!: HassioAddonDetails; + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ attribute: false }) public addon!: HassioAddonDetails; @property() private _error?: string; @@ -158,7 +160,7 @@ class HassioAddonInfo extends LitElement {
- ${this.addon.name} + ${!this.narrow ? this.addon.name : ""}
${this.addon.version ? html` @@ -185,7 +187,7 @@ class HassioAddonInfo extends LitElement {
${this.addon.description}.
Visit - + ${this.addon.name} page for details. @@ -193,7 +195,7 @@ class HassioAddonInfo extends LitElement { ${this.addon.logo ? html`