Use hass-tabs-subpage in add-on view (#5483)

This commit is contained in:
Joakim Sørensen 2020-05-01 11:34:52 +02:00 committed by GitHub
parent 2084ecc4c6
commit 6847830575
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 389 additions and 114 deletions

View File

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

View File

@ -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) => {

View File

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

View File

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

View File

@ -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>

View File

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

View File

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

View File

@ -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` <paper-spinner-lite active></paper-spinner-lite> `;
}
return html`
<div class="content">
<hassio-addon-info
.narrow=${this.narrow}
.hass=${this.hass}
.addon=${this.addon}
></hassio-addon-info>
</div>
`;
}
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;
}
}

View File

@ -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 {
<paper-card>
<div class="card-content">
<div class="addon-header">
${this.addon.name}
${!this.narrow ? this.addon.name : ""}
<div class="addon-version light-color">
${this.addon.version
? html`
@ -185,7 +187,7 @@ class HassioAddonInfo extends LitElement {
<div class="description light-color">
${this.addon.description}.<br />
Visit
<a href="${this.addon.url}" target="_blank" rel="noreferrer">
<a href="${this.addon.url!}" target="_blank" rel="noreferrer">
${this.addon.name} page</a
>
for details.
@ -193,7 +195,7 @@ class HassioAddonInfo extends LitElement {
${this.addon.logo
? html`
<a
href="${this.addon.url}"
href="${this.addon.url!}"
target="_blank"
class="logo"
rel="noreferrer"
@ -425,7 +427,7 @@ class HassioAddonInfo extends LitElement {
${this._computeShowWebUI
? html`
<a
.href=${this._pathWebui}
href=${this._pathWebui!}
tabindex="-1"
target="_blank"
class="right"

View File

@ -0,0 +1,60 @@
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-logs";
@customElement("hassio-addon-log-tab")
class HassioAddonLogDashboard 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-logs
.hass=${this.hass}
.addon=${this.addon}
></hassio-addon-logs>
</div>
`;
}
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-log-tab": HassioAddonLogDashboard;
}
}

View File

@ -12,11 +12,11 @@ import {
import {
fetchHassioAddonLogs,
HassioAddonDetails,
} from "../../../src/data/hassio/addon";
import { haStyle } from "../../../src/resources/styles";
import { HomeAssistant } from "../../../src/types";
import "../components/hassio-ansi-to-html";
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-ansi-to-html";
import { hassioStyle } from "../../resources/hassio-style";
@customElement("hassio-addon-logs")
class HassioAddonLogs extends LitElement {

View File

@ -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 {

View File

@ -62,10 +62,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: {
@ -231,7 +231,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;

View File

@ -82,7 +82,7 @@ class HassTabsSubpage extends LitElement {
<span class="name"
>${page.translationKey
? this.hass.localize(page.translationKey)
: name}</span
: page.name}</span
>
`
: ""}
@ -97,7 +97,7 @@ class HassTabsSubpage extends LitElement {
super.updated(changedProperties);
if (changedProperties.has("route")) {
this._activeTab = this.tabs.find((tab) =>
this.route.prefix.includes(tab.path)
`${this.route.prefix}${this.route.path}`.includes(tab.path)
);
}
}