Use hass-tabs-subpage in add-on view

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;
     }

hassio/src/addon-view/hassio-addon-audio.ts → 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 {
             <paper-listbox
               slot="dropdown-content"
               attr-for-selected="device"
-              .selected=${this._selectedInput}
+              .selected=${this._selectedInput!}
             >
               ${this._inputDevices &&
               this._inputDevices.map((item) => {
@@ -75,7 +75,7 @@ class HassioAddonAudio extends LitElement {
             <paper-listbox
               slot="dropdown-content"
               attr-for-selected="device"
-              .selected=${this._selectedOutput}
+              .selected=${this._selectedOutput!}
             >
               ${this._outputDevices &&
               this._outputDevices.map((item) => {

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` <paper-spinner-lite active></paper-spinner-lite> `;
+    }
+    return html`
+      <div class="content">
+        <hassio-addon-config
+          .hass=${this.hass}
+          .addon=${this.addon}
+        ></hassio-addon-config>
+        ${this.addon.network
+          ? html`
+              <hassio-addon-network
+                .hass=${this.hass}
+                .addon=${this.addon}
+              ></hassio-addon-network>
+            `
+          : ""}
+        ${this.addon.audio
+          ? html`
+              <hassio-addon-audio
+                .hass=${this.hass}
+                .addon=${this.addon}
+              ></hassio-addon-audio>
+            `
+          : ""}
+      </div>
+    `;
+  }
+
+  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;
+  }
+}

hassio/src/addon-view/hassio-addon-config.ts → 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;
 

hassio/src/addon-view/hassio-addon-network.ts → 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 {
                       <paper-input
                         @value-changed=${this._configChanged}
                         placeholder="disabled"
-                        .value=${item.host}
+                        .value=${String(item.host)}
                         .container=${item.container}
                         no-label-float
                       ></paper-input>

hassio/src/addon-view/hassio-addon-view.ts → 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,72 +9,94 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
+import memoizeOne from "memoize-one";
 import {
   fetchHassioAddonInfo,
   HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
 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` <paper-spinner-lite active></paper-spinner-lite> `;
     }
+
+    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`
-      <hass-subpage header="Hass.io: add-on details" hassio>
-        <div class="content">
-          <hassio-addon-info
-            .hass=${this.hass}
-            .addon=${this.addon}
-          ></hassio-addon-info>
-
-          ${this.addon && this.addon.version
-            ? html`
-                <hassio-addon-config
-                  .hass=${this.hass}
-                  .addon=${this.addon}
-                ></hassio-addon-config>
-
-                ${this.addon.audio
-                  ? html`
-                      <hassio-addon-audio
-                        .hass=${this.hass}
-                        .addon=${this.addon}
-                      ></hassio-addon-audio>
-                    `
-                  : ""}
-                ${this.addon.network
-                  ? html`
-                      <hassio-addon-network
-                        .hass=${this.hass}
-                        .addon=${this.addon}
-                      ></hassio-addon-network>
-                    `
-                  : ""}
-
-                <hassio-addon-logs
-                  .hass=${this.hass}
-                  .addon=${this.addon}
-                ></hassio-addon-logs>
-              `
-            : ""}
-        </div>
-      </hass-subpage>
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .backPath=${this.addon.version ? "/hassio/dashboard" : "/hassio/store"}
+        .route=${route}
+        .hassio=${true}
+        .tabs=${addonTabs}
+      >
+        <span slot="header">${this.addon.name}</span>
+        <hassio-addon-router
+          .route=${route}
+          .narrow=${this.narrow}
+          .hass=${this.hass}
+          .addon=${this.addon}
+        ></hassio-addon-router>
+      </hass-tabs-subpage>
     `;
   }
 
@@ -141,7 +160,7 @@ class HassioAddonView extends LitElement {
   }
 
   private async _routeDataChanged(routeData: Route): Promise<void> {
-    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;
   }
 }