mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 10:56:34 +00:00
Codesplit Supervisor panel icons (#5809)
This commit is contained in:
parent
20203f7bdb
commit
3febf059ec
@ -1,4 +1,4 @@
|
|||||||
import "@polymer/paper-card/paper-card";
|
import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResultArray,
|
CSSResultArray,
|
||||||
@ -10,6 +10,7 @@ import {
|
|||||||
import memoizeOne from "memoize-one";
|
import memoizeOne from "memoize-one";
|
||||||
import { atLeastVersion } from "../../../src/common/config/version";
|
import { atLeastVersion } from "../../../src/common/config/version";
|
||||||
import { navigate } from "../../../src/common/navigate";
|
import { navigate } from "../../../src/common/navigate";
|
||||||
|
import "../../../src/components/ha-card";
|
||||||
import {
|
import {
|
||||||
HassioAddonInfo,
|
HassioAddonInfo,
|
||||||
HassioAddonRepository,
|
HassioAddonRepository,
|
||||||
@ -66,7 +67,7 @@ class HassioAddonRepositoryEl extends LitElement {
|
|||||||
<div class="card-group">
|
<div class="card-group">
|
||||||
${addons.map(
|
${addons.map(
|
||||||
(addon) => html`
|
(addon) => html`
|
||||||
<paper-card
|
<ha-card
|
||||||
.addon=${addon}
|
.addon=${addon}
|
||||||
class=${addon.available ? "" : "not_available"}
|
class=${addon.available ? "" : "not_available"}
|
||||||
@click=${this._addonTapped}
|
@click=${this._addonTapped}
|
||||||
@ -78,8 +79,8 @@ class HassioAddonRepositoryEl extends LitElement {
|
|||||||
.description=${addon.description}
|
.description=${addon.description}
|
||||||
.available=${addon.available}
|
.available=${addon.available}
|
||||||
.icon=${addon.installed && addon.installed !== addon.version
|
.icon=${addon.installed && addon.installed !== addon.version
|
||||||
? "hassio:arrow-up-bold-circle"
|
? mdiArrowUpBoldCircle
|
||||||
: "hassio:puzzle"}
|
: mdiPuzzle}
|
||||||
.iconTitle=${addon.installed
|
.iconTitle=${addon.installed
|
||||||
? addon.installed !== addon.version
|
? addon.installed !== addon.version
|
||||||
? "New version available"
|
? "New version available"
|
||||||
@ -111,7 +112,7 @@ class HassioAddonRepositoryEl extends LitElement {
|
|||||||
: ""}
|
: ""}
|
||||||
></hassio-card-content>
|
></hassio-card-content>
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
`
|
`
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@ -127,7 +128,7 @@ class HassioAddonRepositoryEl extends LitElement {
|
|||||||
return [
|
return [
|
||||||
hassioStyle,
|
hassioStyle,
|
||||||
css`
|
css`
|
||||||
paper-card {
|
ha-card {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.not_available {
|
.not_available {
|
||||||
|
@ -1,3 +1,6 @@
|
|||||||
|
import "@material/mwc-icon-button/mwc-icon-button";
|
||||||
|
import "@material/mwc-list/mwc-list-item";
|
||||||
|
import { mdiDotsVertical } from "@mdi/js";
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResult,
|
CSSResult,
|
||||||
@ -6,22 +9,21 @@ import {
|
|||||||
PropertyValues,
|
PropertyValues,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
import { html, TemplateResult } from "lit-html";
|
import { html, TemplateResult } from "lit-html";
|
||||||
|
import "../../../src/common/search/search-input";
|
||||||
|
import "../../../src/components/ha-button-menu";
|
||||||
|
import "../../../src/components/ha-svg-icon";
|
||||||
import {
|
import {
|
||||||
fetchHassioAddonsInfo,
|
fetchHassioAddonsInfo,
|
||||||
HassioAddonInfo,
|
HassioAddonInfo,
|
||||||
HassioAddonRepository,
|
HassioAddonRepository,
|
||||||
reloadHassioAddons,
|
reloadHassioAddons,
|
||||||
} from "../../../src/data/hassio/addon";
|
} from "../../../src/data/hassio/addon";
|
||||||
import "../../../src/components/ha-icon-button";
|
|
||||||
import "../../../src/layouts/loading-screen";
|
|
||||||
import "../../../src/layouts/hass-tabs-subpage";
|
import "../../../src/layouts/hass-tabs-subpage";
|
||||||
|
import "../../../src/layouts/loading-screen";
|
||||||
import { HomeAssistant, Route } from "../../../src/types";
|
import { HomeAssistant, Route } from "../../../src/types";
|
||||||
import "../../../src/common/search/search-input";
|
|
||||||
import "./hassio-addon-repository";
|
|
||||||
|
|
||||||
import { supervisorTabs } from "../hassio-panel";
|
|
||||||
|
|
||||||
import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories";
|
import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories";
|
||||||
|
import { supervisorTabs } from "../hassio-panel";
|
||||||
|
import "./hassio-addon-repository";
|
||||||
|
|
||||||
const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
|
const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
|
||||||
if (a.slug === "local") {
|
if (a.slug === "local") {
|
||||||
@ -94,27 +96,17 @@ class HassioAddonStore extends LitElement {
|
|||||||
.tabs=${supervisorTabs}
|
.tabs=${supervisorTabs}
|
||||||
>
|
>
|
||||||
<span slot="header">Add-on store</span>
|
<span slot="header">Add-on store</span>
|
||||||
<paper-menu-button
|
<ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
|
||||||
close-on-activate
|
<mwc-icon-button slot="trigger" alt="menu">
|
||||||
no-animations
|
<ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
|
||||||
horizontal-align="right"
|
</mwc-icon-button>
|
||||||
horizontal-offset="-5"
|
<mwc-list-item @tap=${this._manageRepositories}>
|
||||||
slot="toolbar-icon"
|
Repositories
|
||||||
>
|
</mwc-list-item>
|
||||||
<ha-icon-button
|
<mwc-list-item @tap=${this.refreshData}>
|
||||||
icon="hassio:dots-vertical"
|
Reload
|
||||||
slot="dropdown-trigger"
|
</mwc-list-item>
|
||||||
alt="menu"
|
</ha-button-menu>
|
||||||
></ha-icon-button>
|
|
||||||
<paper-listbox slot="dropdown-content" role="listbox">
|
|
||||||
<paper-item @tap=${this._manageRepositories}>
|
|
||||||
Repositories
|
|
||||||
</paper-item>
|
|
||||||
<paper-item @tap=${this.refreshData}>
|
|
||||||
Reload
|
|
||||||
</paper-item>
|
|
||||||
</paper-listbox>
|
|
||||||
</paper-menu-button>
|
|
||||||
${repos.length === 0
|
${repos.length === 0
|
||||||
? html`<loading-screen></loading-screen>`
|
? html`<loading-screen></loading-screen>`
|
||||||
: html`
|
: html`
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import "@material/mwc-button";
|
import "@material/mwc-button";
|
||||||
import "@polymer/paper-card/paper-card";
|
|
||||||
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
|
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
|
||||||
import "@polymer/paper-item/paper-item";
|
import "@polymer/paper-item/paper-item";
|
||||||
import "@polymer/paper-listbox/paper-listbox";
|
import "@polymer/paper-listbox/paper-listbox";
|
||||||
@ -14,6 +13,7 @@ import {
|
|||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
import "web-animations-js/web-animations-next-lite.min";
|
import "web-animations-js/web-animations-next-lite.min";
|
||||||
|
import "../../../../src/components/ha-card";
|
||||||
import {
|
import {
|
||||||
HassioAddonDetails,
|
HassioAddonDetails,
|
||||||
HassioAddonSetOptionParams,
|
HassioAddonSetOptionParams,
|
||||||
@ -23,9 +23,9 @@ import {
|
|||||||
fetchHassioHardwareAudio,
|
fetchHassioHardwareAudio,
|
||||||
HassioHardwareAudioDevice,
|
HassioHardwareAudioDevice,
|
||||||
} from "../../../../src/data/hassio/hardware";
|
} from "../../../../src/data/hassio/hardware";
|
||||||
import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
|
|
||||||
import { haStyle } from "../../../../src/resources/styles";
|
import { haStyle } from "../../../../src/resources/styles";
|
||||||
import { HomeAssistant } from "../../../../src/types";
|
import { HomeAssistant } from "../../../../src/types";
|
||||||
|
import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
|
||||||
import { hassioStyle } from "../../resources/hassio-style";
|
import { hassioStyle } from "../../resources/hassio-style";
|
||||||
|
|
||||||
@customElement("hassio-addon-audio")
|
@customElement("hassio-addon-audio")
|
||||||
@ -46,7 +46,7 @@ class HassioAddonAudio extends LitElement {
|
|||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
<paper-card heading="Audio">
|
<ha-card header="Audio">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
|
${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
|
||||||
|
|
||||||
@ -92,7 +92,7 @@ class HassioAddonAudio extends LitElement {
|
|||||||
<div class="card-actions">
|
<div class="card-actions">
|
||||||
<mwc-button @click=${this._saveSettings}>Save</mwc-button>
|
<mwc-button @click=${this._saveSettings}>Save</mwc-button>
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -102,7 +102,7 @@ class HassioAddonAudio extends LitElement {
|
|||||||
hassioStyle,
|
hassioStyle,
|
||||||
css`
|
css`
|
||||||
:host,
|
:host,
|
||||||
paper-card,
|
ha-card,
|
||||||
paper-dropdown-menu {
|
paper-dropdown-menu {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
@ -8,12 +8,10 @@ import {
|
|||||||
property,
|
property,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
|
|
||||||
import { HomeAssistant } from "../../../../src/types";
|
|
||||||
import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
|
import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
|
||||||
import { hassioStyle } from "../../resources/hassio-style";
|
|
||||||
import { haStyle } from "../../../../src/resources/styles";
|
import { haStyle } from "../../../../src/resources/styles";
|
||||||
|
import { HomeAssistant } from "../../../../src/types";
|
||||||
|
import { hassioStyle } from "../../resources/hassio-style";
|
||||||
import "./hassio-addon-audio";
|
import "./hassio-addon-audio";
|
||||||
import "./hassio-addon-config";
|
import "./hassio-addon-config";
|
||||||
import "./hassio-addon-network";
|
import "./hassio-addon-network";
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
import "@material/mwc-button";
|
import "@material/mwc-button";
|
||||||
import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
|
import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
|
||||||
import "@polymer/paper-card/paper-card";
|
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResult,
|
CSSResult,
|
||||||
@ -13,6 +12,7 @@ import {
|
|||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
import { fireEvent } from "../../../../src/common/dom/fire_event";
|
import { fireEvent } from "../../../../src/common/dom/fire_event";
|
||||||
|
import "../../../../src/components/ha-card";
|
||||||
import "../../../../src/components/ha-yaml-editor";
|
import "../../../../src/components/ha-yaml-editor";
|
||||||
import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor";
|
import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor";
|
||||||
import {
|
import {
|
||||||
@ -23,9 +23,8 @@ import {
|
|||||||
import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
|
import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
|
||||||
import { haStyle } from "../../../../src/resources/styles";
|
import { haStyle } from "../../../../src/resources/styles";
|
||||||
import type { HomeAssistant } from "../../../../src/types";
|
import type { HomeAssistant } from "../../../../src/types";
|
||||||
import { hassioStyle } from "../../resources/hassio-style";
|
|
||||||
|
|
||||||
import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
|
import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
|
||||||
|
import { hassioStyle } from "../../resources/hassio-style";
|
||||||
|
|
||||||
@customElement("hassio-addon-config")
|
@customElement("hassio-addon-config")
|
||||||
class HassioAddonConfig extends LitElement {
|
class HassioAddonConfig extends LitElement {
|
||||||
@ -46,7 +45,7 @@ class HassioAddonConfig extends LitElement {
|
|||||||
|
|
||||||
return html`
|
return html`
|
||||||
<h1>${this.addon.name}</h1>
|
<h1>${this.addon.name}</h1>
|
||||||
<paper-card heading="Configuration">
|
<ha-card header="Configuration">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<ha-yaml-editor
|
<ha-yaml-editor
|
||||||
@value-changed=${this._configChanged}
|
@value-changed=${this._configChanged}
|
||||||
@ -65,7 +64,7 @@ class HassioAddonConfig extends LitElement {
|
|||||||
Save
|
Save
|
||||||
</mwc-button>
|
</mwc-button>
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -77,7 +76,7 @@ class HassioAddonConfig extends LitElement {
|
|||||||
:host {
|
:host {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
paper-card {
|
ha-card {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.card-actions {
|
.card-actions {
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import "@polymer/paper-card/paper-card";
|
|
||||||
import { PaperInputElement } from "@polymer/paper-input/paper-input";
|
import { PaperInputElement } from "@polymer/paper-input/paper-input";
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
@ -11,15 +10,15 @@ import {
|
|||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
import { fireEvent } from "../../../../src/common/dom/fire_event";
|
import { fireEvent } from "../../../../src/common/dom/fire_event";
|
||||||
|
import "../../../../src/components/ha-card";
|
||||||
import {
|
import {
|
||||||
HassioAddonDetails,
|
HassioAddonDetails,
|
||||||
HassioAddonSetOptionParams,
|
HassioAddonSetOptionParams,
|
||||||
setHassioAddonOption,
|
setHassioAddonOption,
|
||||||
} from "../../../../src/data/hassio/addon";
|
} from "../../../../src/data/hassio/addon";
|
||||||
import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
|
|
||||||
|
|
||||||
import { haStyle } from "../../../../src/resources/styles";
|
import { haStyle } from "../../../../src/resources/styles";
|
||||||
import { HomeAssistant } from "../../../../src/types";
|
import { HomeAssistant } from "../../../../src/types";
|
||||||
|
import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
|
||||||
import { hassioStyle } from "../../resources/hassio-style";
|
import { hassioStyle } from "../../resources/hassio-style";
|
||||||
|
|
||||||
interface NetworkItem {
|
interface NetworkItem {
|
||||||
@ -53,7 +52,7 @@ class HassioAddonNetwork extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<paper-card heading="Network">
|
<ha-card header="Network">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
|
${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
|
||||||
|
|
||||||
@ -90,7 +89,7 @@ class HassioAddonNetwork extends LitElement {
|
|||||||
</mwc-button>
|
</mwc-button>
|
||||||
<mwc-button @click=${this._saveTapped}>Save</mwc-button>
|
<mwc-button @click=${this._saveTapped}>Save</mwc-button>
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -102,7 +101,7 @@ class HassioAddonNetwork extends LitElement {
|
|||||||
:host {
|
:host {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
paper-card {
|
ha-card {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.errors {
|
.errors {
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import "@polymer/paper-spinner/paper-spinner-lite";
|
import "@polymer/paper-spinner/paper-spinner-lite";
|
||||||
import "@polymer/paper-card/paper-card";
|
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResult,
|
CSSResult,
|
||||||
@ -9,16 +8,15 @@ import {
|
|||||||
property,
|
property,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
|
|
||||||
import { HomeAssistant } from "../../../../src/types";
|
|
||||||
import {
|
|
||||||
HassioAddonDetails,
|
|
||||||
fetchHassioAddonDocumentation,
|
|
||||||
} from "../../../../src/data/hassio/addon";
|
|
||||||
import "../../../../src/components/ha-markdown";
|
import "../../../../src/components/ha-markdown";
|
||||||
|
import {
|
||||||
|
fetchHassioAddonDocumentation,
|
||||||
|
HassioAddonDetails,
|
||||||
|
} from "../../../../src/data/hassio/addon";
|
||||||
import "../../../../src/layouts/loading-screen";
|
import "../../../../src/layouts/loading-screen";
|
||||||
import { hassioStyle } from "../../resources/hassio-style";
|
|
||||||
import { haStyle } from "../../../../src/resources/styles";
|
import { haStyle } from "../../../../src/resources/styles";
|
||||||
|
import { HomeAssistant } from "../../../../src/types";
|
||||||
|
import { hassioStyle } from "../../resources/hassio-style";
|
||||||
|
|
||||||
@customElement("hassio-addon-documentation-tab")
|
@customElement("hassio-addon-documentation-tab")
|
||||||
class HassioAddonDocumentationDashboard extends LitElement {
|
class HassioAddonDocumentationDashboard extends LitElement {
|
||||||
@ -41,14 +39,14 @@ class HassioAddonDocumentationDashboard extends LitElement {
|
|||||||
}
|
}
|
||||||
return html`
|
return html`
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<paper-card>
|
<ha-card>
|
||||||
${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
|
${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
${this._content
|
${this._content
|
||||||
? html`<ha-markdown .content=${this._content}></ha-markdown>`
|
? html`<ha-markdown .content=${this._content}></ha-markdown>`
|
||||||
: html`<loading-screen></loading-screen>`}
|
: html`<loading-screen></loading-screen>`}
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
@ -58,7 +56,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
|
|||||||
haStyle,
|
haStyle,
|
||||||
hassioStyle,
|
hassioStyle,
|
||||||
css`
|
css`
|
||||||
paper-card {
|
ha-card {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
|
@ -1,4 +1,9 @@
|
|||||||
import "../../../src/components/ha-icon-button";
|
import {
|
||||||
|
mdiCogs,
|
||||||
|
mdiFileDocument,
|
||||||
|
mdiInformationVariant,
|
||||||
|
mdiMathLog,
|
||||||
|
} from "@mdi/js";
|
||||||
import "@polymer/paper-spinner/paper-spinner-lite";
|
import "@polymer/paper-spinner/paper-spinner-lite";
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
@ -14,18 +19,17 @@ import {
|
|||||||
fetchHassioAddonInfo,
|
fetchHassioAddonInfo,
|
||||||
HassioAddonDetails,
|
HassioAddonDetails,
|
||||||
} from "../../../src/data/hassio/addon";
|
} from "../../../src/data/hassio/addon";
|
||||||
|
import "../../../src/layouts/hass-tabs-subpage";
|
||||||
|
import type { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
|
||||||
import { haStyle } from "../../../src/resources/styles";
|
import { haStyle } from "../../../src/resources/styles";
|
||||||
import { HomeAssistant, Route } from "../../../src/types";
|
import { HomeAssistant, Route } from "../../../src/types";
|
||||||
import { hassioStyle } from "../resources/hassio-style";
|
import { hassioStyle } from "../resources/hassio-style";
|
||||||
import "./config/hassio-addon-audio";
|
import "./config/hassio-addon-audio";
|
||||||
import "./config/hassio-addon-config";
|
import "./config/hassio-addon-config";
|
||||||
|
import "./config/hassio-addon-network";
|
||||||
|
import "./hassio-addon-router";
|
||||||
import "./info/hassio-addon-info";
|
import "./info/hassio-addon-info";
|
||||||
import "./log/hassio-addon-logs";
|
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")
|
@customElement("hassio-addon-dashboard")
|
||||||
class HassioAddonDashboard extends LitElement {
|
class HassioAddonDashboard extends LitElement {
|
||||||
@ -59,7 +63,7 @@ class HassioAddonDashboard extends LitElement {
|
|||||||
{
|
{
|
||||||
name: "Info",
|
name: "Info",
|
||||||
path: `/hassio/addon/${this.addon.slug}/info`,
|
path: `/hassio/addon/${this.addon.slug}/info`,
|
||||||
icon: "hassio:information-variant",
|
iconPath: mdiInformationVariant,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -67,7 +71,7 @@ class HassioAddonDashboard extends LitElement {
|
|||||||
addonTabs.push({
|
addonTabs.push({
|
||||||
name: "Documentation",
|
name: "Documentation",
|
||||||
path: `/hassio/addon/${this.addon.slug}/documentation`,
|
path: `/hassio/addon/${this.addon.slug}/documentation`,
|
||||||
icon: "hassio:file-document",
|
iconPath: mdiFileDocument,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -76,12 +80,12 @@ class HassioAddonDashboard extends LitElement {
|
|||||||
{
|
{
|
||||||
name: "Configuration",
|
name: "Configuration",
|
||||||
path: `/hassio/addon/${this.addon.slug}/config`,
|
path: `/hassio/addon/${this.addon.slug}/config`,
|
||||||
icon: "hassio:cogs",
|
iconPath: mdiCogs,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Log",
|
name: "Log",
|
||||||
path: `/hassio/addon/${this.addon.slug}/logs`,
|
path: `/hassio/addon/${this.addon.slug}/logs`,
|
||||||
icon: "hassio:math-log",
|
iconPath: mdiMathLog,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -115,7 +119,6 @@ class HassioAddonDashboard extends LitElement {
|
|||||||
css`
|
css`
|
||||||
:host {
|
:host {
|
||||||
color: var(--primary-text-color);
|
color: var(--primary-text-color);
|
||||||
--paper-card-header-color: var(--primary-text-color);
|
|
||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
padding: 24px 0 32px;
|
padding: 24px 0 32px;
|
||||||
|
@ -1,15 +1,15 @@
|
|||||||
|
import { customElement, property } from "lit-element";
|
||||||
|
import { HassioAddonDetails } from "../../../src/data/hassio/addon";
|
||||||
import {
|
import {
|
||||||
HassRouterPage,
|
HassRouterPage,
|
||||||
RouterOptions,
|
RouterOptions,
|
||||||
} from "../../../src/layouts/hass-router-page";
|
} from "../../../src/layouts/hass-router-page";
|
||||||
import { customElement, property } from "lit-element";
|
|
||||||
import { HomeAssistant } from "../../../src/types";
|
import { HomeAssistant } from "../../../src/types";
|
||||||
|
import "./config/hassio-addon-config-tab";
|
||||||
|
import "./documentation/hassio-addon-documentation-tab";
|
||||||
// Don't codesplit the others, because it breaks the UI when pushed to a Pi
|
// Don't codesplit the others, because it breaks the UI when pushed to a Pi
|
||||||
import "./info/hassio-addon-info-tab";
|
import "./info/hassio-addon-info-tab";
|
||||||
import "./config/hassio-addon-config-tab";
|
|
||||||
import "./log/hassio-addon-log-tab";
|
import "./log/hassio-addon-log-tab";
|
||||||
import "./documentation/hassio-addon-documentation-tab";
|
|
||||||
import { HassioAddonDetails } from "../../../src/data/hassio/addon";
|
|
||||||
|
|
||||||
@customElement("hassio-addon-router")
|
@customElement("hassio-addon-router")
|
||||||
class HassioAddonRouter extends HassRouterPage {
|
class HassioAddonRouter extends HassRouterPage {
|
||||||
|
@ -8,12 +8,10 @@ import {
|
|||||||
property,
|
property,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
|
|
||||||
import { HomeAssistant } from "../../../../src/types";
|
|
||||||
import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
|
import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
|
||||||
import { hassioStyle } from "../../resources/hassio-style";
|
|
||||||
import { haStyle } from "../../../../src/resources/styles";
|
import { haStyle } from "../../../../src/resources/styles";
|
||||||
|
import { HomeAssistant } from "../../../../src/types";
|
||||||
|
import { hassioStyle } from "../../resources/hassio-style";
|
||||||
import "./hassio-addon-info";
|
import "./hassio-addon-info";
|
||||||
|
|
||||||
@customElement("hassio-addon-info-tab")
|
@customElement("hassio-addon-info-tab")
|
||||||
|
@ -1,5 +1,20 @@
|
|||||||
import "@material/mwc-button";
|
import "@material/mwc-button";
|
||||||
import "@polymer/paper-card/paper-card";
|
import {
|
||||||
|
mdiArrowUpBoldCircle,
|
||||||
|
mdiCheckCircle,
|
||||||
|
mdiChip,
|
||||||
|
mdiCircle,
|
||||||
|
mdiCursorDefaultClickOutline,
|
||||||
|
mdiDocker,
|
||||||
|
mdiExclamationThick,
|
||||||
|
mdiFlask,
|
||||||
|
mdiHomeAssistant,
|
||||||
|
mdiInformation,
|
||||||
|
mdiKey,
|
||||||
|
mdiNetwork,
|
||||||
|
mdiPound,
|
||||||
|
mdiShield,
|
||||||
|
} from "@mdi/js";
|
||||||
import "@polymer/paper-tooltip/paper-tooltip";
|
import "@polymer/paper-tooltip/paper-tooltip";
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
@ -16,10 +31,11 @@ import { fireEvent } from "../../../../src/common/dom/fire_event";
|
|||||||
import { navigate } from "../../../../src/common/navigate";
|
import { navigate } from "../../../../src/common/navigate";
|
||||||
import "../../../../src/components/buttons/ha-call-api-button";
|
import "../../../../src/components/buttons/ha-call-api-button";
|
||||||
import "../../../../src/components/buttons/ha-progress-button";
|
import "../../../../src/components/buttons/ha-progress-button";
|
||||||
|
import "../../../../src/components/ha-card";
|
||||||
import "../../../../src/components/ha-label-badge";
|
import "../../../../src/components/ha-label-badge";
|
||||||
import "../../../../src/components/ha-markdown";
|
import "../../../../src/components/ha-markdown";
|
||||||
|
import "../../../../src/components/ha-svg-icon";
|
||||||
import "../../../../src/components/ha-switch";
|
import "../../../../src/components/ha-switch";
|
||||||
import "../../../../src/components/ha-icon";
|
|
||||||
import {
|
import {
|
||||||
fetchHassioAddonChangelog,
|
fetchHassioAddonChangelog,
|
||||||
HassioAddonDetails,
|
HassioAddonDetails,
|
||||||
@ -30,23 +46,23 @@ import {
|
|||||||
setHassioAddonSecurity,
|
setHassioAddonSecurity,
|
||||||
uninstallHassioAddon,
|
uninstallHassioAddon,
|
||||||
} from "../../../../src/data/hassio/addon";
|
} from "../../../../src/data/hassio/addon";
|
||||||
|
import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
|
||||||
import { haStyle } from "../../../../src/resources/styles";
|
import { haStyle } from "../../../../src/resources/styles";
|
||||||
import { HomeAssistant } from "../../../../src/types";
|
import { HomeAssistant } from "../../../../src/types";
|
||||||
import "../../components/hassio-card-content";
|
import "../../components/hassio-card-content";
|
||||||
import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
|
import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
|
||||||
import { hassioStyle } from "../../resources/hassio-style";
|
import { hassioStyle } from "../../resources/hassio-style";
|
||||||
import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
|
|
||||||
|
|
||||||
const STAGE_ICON = {
|
const STAGE_ICON = {
|
||||||
stable: "mdi:check-circle",
|
stable: mdiCheckCircle,
|
||||||
experimental: "mdi:flask",
|
experimental: mdiFlask,
|
||||||
deprecated: "mdi:exclamation-thick",
|
deprecated: mdiExclamationThick,
|
||||||
};
|
};
|
||||||
|
|
||||||
const PERMIS_DESC = {
|
const PERMIS_DESC = {
|
||||||
stage: {
|
stage: {
|
||||||
title: "Add-on Stage",
|
title: "Add-on Stage",
|
||||||
description: `Add-ons can have one of three stages:\n\n<ha-icon icon='${STAGE_ICON.stable}'></ha-icon>**Stable**: These are add-ons ready to be used in production.\n<ha-icon icon='${STAGE_ICON.experimental}'></ha-icon>**Experimental**: These may contain bugs, and may be unfinished.\n<ha-icon icon='${STAGE_ICON.deprecated}'></ha-icon>**Deprecated**: These add-ons will no longer receive any updates.`,
|
description: `Add-ons can have one of three stages:\n\n<ha-svg-icon path='${STAGE_ICON.stable}'></ha-svg-icon> **Stable**: These are add-ons ready to be used in production.\n\n<ha-svg-icon path='${STAGE_ICON.experimental}'></ha-svg-icon> **Experimental**: These may contain bugs, and may be unfinished.\n\n<ha-svg-icon path='${STAGE_ICON.deprecated}'></ha-svg-icon> **Deprecated**: These add-ons will no longer receive any updates.`,
|
||||||
},
|
},
|
||||||
rating: {
|
rating: {
|
||||||
title: "Add-on Security Rating",
|
title: "Add-on Security Rating",
|
||||||
@ -116,7 +132,7 @@ class HassioAddonInfo extends LitElement {
|
|||||||
return html`
|
return html`
|
||||||
${this._computeUpdateAvailable
|
${this._computeUpdateAvailable
|
||||||
? html`
|
? html`
|
||||||
<paper-card heading="Update available! 🎉">
|
<ha-card header="Update available! 🎉">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<hassio-card-content
|
<hassio-card-content
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
@ -124,7 +140,7 @@ class HassioAddonInfo extends LitElement {
|
|||||||
.version_latest} is available"
|
.version_latest} is available"
|
||||||
.description="You are currently running version ${this.addon
|
.description="You are currently running version ${this.addon
|
||||||
.version}"
|
.version}"
|
||||||
icon="hassio:arrow-up-bold-circle"
|
icon=${mdiArrowUpBoldCircle}
|
||||||
iconClass="update"
|
iconClass="update"
|
||||||
></hassio-card-content>
|
></hassio-card-content>
|
||||||
${!this.addon.available
|
${!this.addon.available
|
||||||
@ -151,12 +167,13 @@ class HassioAddonInfo extends LitElement {
|
|||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
${!this.addon.protected
|
${!this.addon.protected
|
||||||
? html`
|
? html`
|
||||||
<paper-card heading="Warning: Protection mode is disabled!" class="warning">
|
<ha-card class="warning">
|
||||||
|
<div class="card-header">Warning: Protection mode is disabled!</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
Protection mode on this add-on is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this add-on.
|
Protection mode on this add-on is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this add-on.
|
||||||
</div>
|
</div>
|
||||||
@ -164,11 +181,11 @@ class HassioAddonInfo extends LitElement {
|
|||||||
<mwc-button @click=${this._protectionToggled}>Enable Protection mode</mwc-button>
|
<mwc-button @click=${this._protectionToggled}>Enable Protection mode</mwc-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
|
|
||||||
<paper-card>
|
<ha-card>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="addon-header">
|
<div class="addon-header">
|
||||||
${!this.narrow ? this.addon.name : ""}
|
${!this.narrow ? this.addon.name : ""}
|
||||||
@ -177,18 +194,18 @@ class HassioAddonInfo extends LitElement {
|
|||||||
? html`
|
? html`
|
||||||
${this._computeIsRunning
|
${this._computeIsRunning
|
||||||
? html`
|
? html`
|
||||||
<ha-icon
|
<ha-svg-icon
|
||||||
title="Add-on is running"
|
title="Add-on is running"
|
||||||
class="running"
|
class="running"
|
||||||
icon="hassio:circle"
|
path=${mdiCircle}
|
||||||
></ha-icon>
|
></ha-svg-icon>
|
||||||
`
|
`
|
||||||
: html`
|
: html`
|
||||||
<ha-icon
|
<ha-svg-icon
|
||||||
title="Add-on is stopped"
|
title="Add-on is stopped"
|
||||||
class="stopped"
|
class="stopped"
|
||||||
icon="hassio:circle"
|
path=${mdiCircle}
|
||||||
></ha-icon>
|
></ha-svg-icon>
|
||||||
`}
|
`}
|
||||||
`
|
`
|
||||||
: html` ${this.addon.version_latest} `}
|
: html` ${this.addon.version_latest} `}
|
||||||
@ -232,10 +249,11 @@ class HassioAddonInfo extends LitElement {
|
|||||||
})}
|
})}
|
||||||
@click=${this._showMoreInfo}
|
@click=${this._showMoreInfo}
|
||||||
id="stage"
|
id="stage"
|
||||||
.icon=${STAGE_ICON[this.addon.stage]}
|
|
||||||
label="stage"
|
label="stage"
|
||||||
description=""
|
description=""
|
||||||
></ha-label-badge>
|
>
|
||||||
|
<ha-svg-icon .path=${STAGE_ICON[this.addon.stage]}></ha-svg-icon>
|
||||||
|
</ha-label-badge>
|
||||||
<ha-label-badge
|
<ha-label-badge
|
||||||
class=${classMap({
|
class=${classMap({
|
||||||
green: [5, 6].includes(Number(this.addon.rating)),
|
green: [5, 6].includes(Number(this.addon.rating)),
|
||||||
@ -253,10 +271,11 @@ class HassioAddonInfo extends LitElement {
|
|||||||
<ha-label-badge
|
<ha-label-badge
|
||||||
@click=${this._showMoreInfo}
|
@click=${this._showMoreInfo}
|
||||||
id="host_network"
|
id="host_network"
|
||||||
icon="hassio:network"
|
|
||||||
label="host"
|
label="host"
|
||||||
description=""
|
description=""
|
||||||
></ha-label-badge>
|
>
|
||||||
|
<ha-svg-icon path=${mdiNetwork}></ha-svg-icon>
|
||||||
|
</ha-label-badge>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
${this.addon.full_access
|
${this.addon.full_access
|
||||||
@ -264,10 +283,11 @@ class HassioAddonInfo extends LitElement {
|
|||||||
<ha-label-badge
|
<ha-label-badge
|
||||||
@click=${this._showMoreInfo}
|
@click=${this._showMoreInfo}
|
||||||
id="full_access"
|
id="full_access"
|
||||||
icon="hassio:chip"
|
|
||||||
label="hardware"
|
label="hardware"
|
||||||
description=""
|
description=""
|
||||||
></ha-label-badge>
|
>
|
||||||
|
<ha-svg-icon path=${mdiChip}></ha-svg-icon>
|
||||||
|
</ha-label-badge>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
${this.addon.homeassistant_api
|
${this.addon.homeassistant_api
|
||||||
@ -275,10 +295,11 @@ class HassioAddonInfo extends LitElement {
|
|||||||
<ha-label-badge
|
<ha-label-badge
|
||||||
@click=${this._showMoreInfo}
|
@click=${this._showMoreInfo}
|
||||||
id="homeassistant_api"
|
id="homeassistant_api"
|
||||||
icon="hassio:home-assistant"
|
|
||||||
label="hass"
|
label="hass"
|
||||||
description=""
|
description=""
|
||||||
></ha-label-badge>
|
>
|
||||||
|
<ha-svg-icon path=${mdiHomeAssistant}></ha-svg-icon>
|
||||||
|
</ha-label-badge>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
${this._computeHassioApi
|
${this._computeHassioApi
|
||||||
@ -286,10 +307,11 @@ class HassioAddonInfo extends LitElement {
|
|||||||
<ha-label-badge
|
<ha-label-badge
|
||||||
@click=${this._showMoreInfo}
|
@click=${this._showMoreInfo}
|
||||||
id="hassio_api"
|
id="hassio_api"
|
||||||
icon="hassio:home-assistant"
|
|
||||||
label="hassio"
|
label="hassio"
|
||||||
.description=${this.addon.hassio_role}
|
.description=${this.addon.hassio_role}
|
||||||
></ha-label-badge>
|
>
|
||||||
|
<ha-svg-icon path=${mdiHomeAssistant}></ha-svg-icon>
|
||||||
|
</ha-label-badge>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
${this.addon.docker_api
|
${this.addon.docker_api
|
||||||
@ -297,10 +319,11 @@ class HassioAddonInfo extends LitElement {
|
|||||||
<ha-label-badge
|
<ha-label-badge
|
||||||
@click=${this._showMoreInfo}
|
@click=${this._showMoreInfo}
|
||||||
id="docker_api"
|
id="docker_api"
|
||||||
icon="hassio:docker"
|
|
||||||
label="docker"
|
label="docker"
|
||||||
description=""
|
description=""
|
||||||
></ha-label-badge>
|
>
|
||||||
|
<ha-svg-icon path=${mdiDocker}></ha-svg-icon>
|
||||||
|
</ha-label-badge>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
${this.addon.host_pid
|
${this.addon.host_pid
|
||||||
@ -308,10 +331,11 @@ class HassioAddonInfo extends LitElement {
|
|||||||
<ha-label-badge
|
<ha-label-badge
|
||||||
@click=${this._showMoreInfo}
|
@click=${this._showMoreInfo}
|
||||||
id="host_pid"
|
id="host_pid"
|
||||||
icon="hassio:pound"
|
|
||||||
label="host pid"
|
label="host pid"
|
||||||
description=""
|
description=""
|
||||||
></ha-label-badge>
|
>
|
||||||
|
<ha-svg-icon path=${mdiPound}></ha-svg-icon>
|
||||||
|
</ha-label-badge>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
${this.addon.apparmor
|
${this.addon.apparmor
|
||||||
@ -320,10 +344,11 @@ class HassioAddonInfo extends LitElement {
|
|||||||
@click=${this._showMoreInfo}
|
@click=${this._showMoreInfo}
|
||||||
class=${this._computeApparmorClassName}
|
class=${this._computeApparmorClassName}
|
||||||
id="apparmor"
|
id="apparmor"
|
||||||
icon="hassio:shield"
|
|
||||||
label="apparmor"
|
label="apparmor"
|
||||||
description=""
|
description=""
|
||||||
></ha-label-badge>
|
>
|
||||||
|
<ha-svg-icon path=${mdiShield}></ha-svg-icon>
|
||||||
|
</ha-label-badge>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
${this.addon.auth_api
|
${this.addon.auth_api
|
||||||
@ -331,10 +356,11 @@ class HassioAddonInfo extends LitElement {
|
|||||||
<ha-label-badge
|
<ha-label-badge
|
||||||
@click=${this._showMoreInfo}
|
@click=${this._showMoreInfo}
|
||||||
id="auth_api"
|
id="auth_api"
|
||||||
icon="hassio:key"
|
|
||||||
label="auth"
|
label="auth"
|
||||||
description=""
|
description=""
|
||||||
></ha-label-badge>
|
>
|
||||||
|
<ha-svg-icon path=${mdiKey}></ha-svg-icon>
|
||||||
|
</ha-label-badge>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
${this.addon.ingress
|
${this.addon.ingress
|
||||||
@ -342,10 +368,13 @@ class HassioAddonInfo extends LitElement {
|
|||||||
<ha-label-badge
|
<ha-label-badge
|
||||||
@click=${this._showMoreInfo}
|
@click=${this._showMoreInfo}
|
||||||
id="ingress"
|
id="ingress"
|
||||||
icon="hassio:cursor-default-click-outline"
|
|
||||||
label="ingress"
|
label="ingress"
|
||||||
description=""
|
description=""
|
||||||
></ha-label-badge>
|
>
|
||||||
|
<ha-svg-icon
|
||||||
|
path=${mdiCursorDefaultClickOutline}
|
||||||
|
></ha-svg-icon>
|
||||||
|
</ha-label-badge>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
</div>
|
</div>
|
||||||
@ -399,7 +428,7 @@ class HassioAddonInfo extends LitElement {
|
|||||||
<div>
|
<div>
|
||||||
Protection mode
|
Protection mode
|
||||||
<span>
|
<span>
|
||||||
<ha-icon icon="hassio:information"></ha-icon>
|
<ha-svg-icon path=${mdiInformation}></ha-svg-icon>
|
||||||
<paper-tooltip>
|
<paper-tooltip>
|
||||||
Grant the add-on elevated system access.
|
Grant the add-on elevated system access.
|
||||||
</paper-tooltip>
|
</paper-tooltip>
|
||||||
@ -502,17 +531,17 @@ class HassioAddonInfo extends LitElement {
|
|||||||
</ha-progress-button>
|
</ha-progress-button>
|
||||||
`}
|
`}
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
|
|
||||||
${this.addon.long_description
|
${this.addon.long_description
|
||||||
? html`
|
? html`
|
||||||
<paper-card>
|
<ha-card>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<ha-markdown
|
<ha-markdown
|
||||||
.content=${this.addon.long_description}
|
.content=${this.addon.long_description}
|
||||||
></ha-markdown>
|
></ha-markdown>
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
`;
|
`;
|
||||||
@ -526,16 +555,21 @@ class HassioAddonInfo extends LitElement {
|
|||||||
:host {
|
:host {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
paper-card {
|
ha-card {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
paper-card.warning {
|
ha-card.warning {
|
||||||
background-color: var(--google-red-500);
|
background-color: var(--google-red-500);
|
||||||
color: white;
|
color: white;
|
||||||
--paper-card-header-color: white;
|
|
||||||
}
|
}
|
||||||
paper-card.warning mwc-button {
|
ha-card.warning .card-header {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
ha-card.warning .card-content {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
ha-card.warning mwc-button {
|
||||||
--mdc-theme-primary: white !important;
|
--mdc-theme-primary: white !important;
|
||||||
}
|
}
|
||||||
.warning {
|
.warning {
|
||||||
@ -548,7 +582,7 @@ class HassioAddonInfo extends LitElement {
|
|||||||
.addon-header {
|
.addon-header {
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color: var(--paper-card-header-color, --primary-text-color);
|
color: var(--ha-card-header-color, --primary-text-color);
|
||||||
}
|
}
|
||||||
.addon-version {
|
.addon-version {
|
||||||
float: right;
|
float: right;
|
||||||
@ -575,7 +609,7 @@ class HassioAddonInfo extends LitElement {
|
|||||||
width: 180px;
|
width: 180px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.state ha-icon {
|
.state ha-svg-icon {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
@ -583,10 +617,10 @@ class HassioAddonInfo extends LitElement {
|
|||||||
ha-switch {
|
ha-switch {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
ha-icon.running {
|
ha-svg-icon.running {
|
||||||
color: var(--paper-green-400);
|
color: var(--paper-green-400);
|
||||||
}
|
}
|
||||||
ha-icon.stopped {
|
ha-svg-icon.stopped {
|
||||||
color: var(--google-red-300);
|
color: var(--google-red-300);
|
||||||
}
|
}
|
||||||
ha-call-api-button {
|
ha-call-api-button {
|
||||||
@ -664,7 +698,7 @@ class HassioAddonInfo extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private _showMoreInfo(ev): void {
|
private _showMoreInfo(ev): void {
|
||||||
const id = ev.target.getAttribute("id");
|
const id = ev.currentTarget.id;
|
||||||
showHassioMarkdownDialog(this, {
|
showHassioMarkdownDialog(this, {
|
||||||
title: PERMIS_DESC[id].title,
|
title: PERMIS_DESC[id].title,
|
||||||
content: PERMIS_DESC[id].description,
|
content: PERMIS_DESC[id].description,
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import "@polymer/paper-spinner/paper-spinner-lite";
|
import "@polymer/paper-spinner/paper-spinner-lite";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResult,
|
CSSResult,
|
||||||
@ -9,12 +8,10 @@ import {
|
|||||||
property,
|
property,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
|
|
||||||
import { HomeAssistant } from "../../../../src/types";
|
|
||||||
import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
|
import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
|
||||||
import { hassioStyle } from "../../resources/hassio-style";
|
|
||||||
import { haStyle } from "../../../../src/resources/styles";
|
import { haStyle } from "../../../../src/resources/styles";
|
||||||
|
import { HomeAssistant } from "../../../../src/types";
|
||||||
|
import { hassioStyle } from "../../resources/hassio-style";
|
||||||
import "./hassio-addon-logs";
|
import "./hassio-addon-logs";
|
||||||
|
|
||||||
@customElement("hassio-addon-log-tab")
|
@customElement("hassio-addon-log-tab")
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import "@material/mwc-button";
|
import "@material/mwc-button";
|
||||||
import "@polymer/paper-card/paper-card";
|
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResult,
|
CSSResult,
|
||||||
@ -9,6 +8,7 @@ import {
|
|||||||
property,
|
property,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
|
import "../../../../src/components/ha-card";
|
||||||
import {
|
import {
|
||||||
fetchHassioAddonLogs,
|
fetchHassioAddonLogs,
|
||||||
HassioAddonDetails,
|
HassioAddonDetails,
|
||||||
@ -36,7 +36,7 @@ class HassioAddonLogs extends LitElement {
|
|||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
<h1>${this.addon.name}</h1>
|
<h1>${this.addon.name}</h1>
|
||||||
<paper-card>
|
<ha-card>
|
||||||
${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
|
${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
${this._content
|
${this._content
|
||||||
@ -48,7 +48,7 @@ class HassioAddonLogs extends LitElement {
|
|||||||
<div class="card-actions">
|
<div class="card-actions">
|
||||||
<mwc-button @click=${this._refresh}>Refresh</mwc-button>
|
<mwc-button @click=${this._refresh}>Refresh</mwc-button>
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -58,7 +58,7 @@ class HassioAddonLogs extends LitElement {
|
|||||||
hassioStyle,
|
hassioStyle,
|
||||||
css`
|
css`
|
||||||
:host,
|
:host,
|
||||||
paper-card {
|
ha-card {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.errors {
|
.errors {
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import { mdiHelpCircle } from "@mdi/js";
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResult,
|
CSSResult,
|
||||||
@ -8,7 +9,7 @@ import {
|
|||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
import "../../../src/components/ha-relative-time";
|
import "../../../src/components/ha-relative-time";
|
||||||
import "../../../src/components/ha-icon";
|
import "../../../src/components/ha-svg-icon";
|
||||||
import { HomeAssistant } from "../../../src/types";
|
import { HomeAssistant } from "../../../src/types";
|
||||||
|
|
||||||
@customElement("hassio-card-content")
|
@customElement("hassio-card-content")
|
||||||
@ -31,7 +32,7 @@ class HassioCardContent extends LitElement {
|
|||||||
|
|
||||||
@property() public iconClass?: string;
|
@property() public iconClass?: string;
|
||||||
|
|
||||||
@property() public icon = "hass:help-circle";
|
@property() public icon = mdiHelpCircle;
|
||||||
|
|
||||||
@property() public iconImage?: string;
|
@property() public iconImage?: string;
|
||||||
|
|
||||||
@ -48,11 +49,11 @@ class HassioCardContent extends LitElement {
|
|||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
: html`
|
: html`
|
||||||
<ha-icon
|
<ha-svg-icon
|
||||||
class=${this.iconClass}
|
class=${this.iconClass}
|
||||||
.icon=${this.icon}
|
.path=${this.icon}
|
||||||
.title=${this.iconTitle}
|
.title=${this.iconTitle}
|
||||||
></ha-icon>
|
></ha-svg-icon>
|
||||||
`}
|
`}
|
||||||
<div>
|
<div>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
@ -78,25 +79,25 @@ class HassioCardContent extends LitElement {
|
|||||||
|
|
||||||
static get styles(): CSSResult {
|
static get styles(): CSSResult {
|
||||||
return css`
|
return css`
|
||||||
ha-icon {
|
ha-svg-icon {
|
||||||
margin-right: 24px;
|
margin-right: 24px;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
float: left;
|
float: left;
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
}
|
}
|
||||||
ha-icon.update {
|
ha-svg-icon.update {
|
||||||
color: var(--paper-orange-400);
|
color: var(--paper-orange-400);
|
||||||
}
|
}
|
||||||
ha-icon.running,
|
ha-svg-icon.running,
|
||||||
ha-icon.installed {
|
ha-svg-icon.installed {
|
||||||
color: var(--paper-green-400);
|
color: var(--paper-green-400);
|
||||||
}
|
}
|
||||||
ha-icon.hassupdate,
|
ha-svg-icon.hassupdate,
|
||||||
ha-icon.snapshot {
|
ha-svg-icon.snapshot {
|
||||||
color: var(--paper-item-icon-color);
|
color: var(--paper-item-icon-color);
|
||||||
}
|
}
|
||||||
ha-icon.not_available {
|
ha-svg-icon.not_available {
|
||||||
color: var(--google-red-500);
|
color: var(--google-red-500);
|
||||||
}
|
}
|
||||||
.title {
|
.title {
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import "@polymer/paper-card/paper-card";
|
import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResult,
|
CSSResult,
|
||||||
@ -10,6 +10,7 @@ import {
|
|||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
import { atLeastVersion } from "../../../src/common/config/version";
|
import { atLeastVersion } from "../../../src/common/config/version";
|
||||||
import { navigate } from "../../../src/common/navigate";
|
import { navigate } from "../../../src/common/navigate";
|
||||||
|
import "../../../src/components/ha-card";
|
||||||
import { HassioAddonInfo } from "../../../src/data/hassio/addon";
|
import { HassioAddonInfo } from "../../../src/data/hassio/addon";
|
||||||
import { haStyle } from "../../../src/resources/styles";
|
import { haStyle } from "../../../src/resources/styles";
|
||||||
import { HomeAssistant } from "../../../src/types";
|
import { HomeAssistant } from "../../../src/types";
|
||||||
@ -29,19 +30,19 @@ class HassioAddons extends LitElement {
|
|||||||
<div class="card-group">
|
<div class="card-group">
|
||||||
${!this.addons
|
${!this.addons
|
||||||
? html`
|
? html`
|
||||||
<paper-card>
|
<ha-card>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
You don't have any add-ons installed yet. Head over to
|
You don't have any add-ons installed yet. Head over to
|
||||||
<a href="#" @click=${this._openStore}>the add-on store</a>
|
<a href="#" @click=${this._openStore}>the add-on store</a>
|
||||||
to get started!
|
to get started!
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
`
|
`
|
||||||
: this.addons
|
: this.addons
|
||||||
.sort((a, b) => (a.name > b.name ? 1 : -1))
|
.sort((a, b) => (a.name > b.name ? 1 : -1))
|
||||||
.map(
|
.map(
|
||||||
(addon) => html`
|
(addon) => html`
|
||||||
<paper-card .addon=${addon} @click=${this._addonTapped}>
|
<ha-card .addon=${addon} @click=${this._addonTapped}>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<hassio-card-content
|
<hassio-card-content
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
@ -51,8 +52,8 @@ class HassioAddons extends LitElement {
|
|||||||
.showTopbar=${addon.installed !== addon.version}
|
.showTopbar=${addon.installed !== addon.version}
|
||||||
topbarClass="update"
|
topbarClass="update"
|
||||||
.icon=${addon.installed !== addon.version
|
.icon=${addon.installed !== addon.version
|
||||||
? "hassio:arrow-up-bold-circle"
|
? mdiArrowUpBoldCircle
|
||||||
: "hassio:puzzle"}
|
: mdiPuzzle}
|
||||||
.iconTitle=${addon.state !== "started"
|
.iconTitle=${addon.state !== "started"
|
||||||
? "Add-on is stopped"
|
? "Add-on is stopped"
|
||||||
: addon.installed !== addon.version
|
: addon.installed !== addon.version
|
||||||
@ -75,7 +76,7 @@ class HassioAddons extends LitElement {
|
|||||||
: undefined}
|
: undefined}
|
||||||
></hassio-card-content>
|
></hassio-card-content>
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
`
|
`
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@ -88,7 +89,7 @@ class HassioAddons extends LitElement {
|
|||||||
haStyle,
|
haStyle,
|
||||||
hassioStyle,
|
hassioStyle,
|
||||||
css`
|
css`
|
||||||
paper-card {
|
ha-card {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
|
@ -12,14 +12,13 @@ import {
|
|||||||
HassioHomeAssistantInfo,
|
HassioHomeAssistantInfo,
|
||||||
HassioSupervisorInfo,
|
HassioSupervisorInfo,
|
||||||
} from "../../../src/data/hassio/supervisor";
|
} from "../../../src/data/hassio/supervisor";
|
||||||
|
import "../../../src/layouts/hass-tabs-subpage";
|
||||||
import { haStyle } from "../../../src/resources/styles";
|
import { haStyle } from "../../../src/resources/styles";
|
||||||
import { HomeAssistant, Route } from "../../../src/types";
|
import { HomeAssistant, Route } from "../../../src/types";
|
||||||
import "../../../src/layouts/hass-tabs-subpage";
|
import { supervisorTabs } from "../hassio-panel";
|
||||||
import "./hassio-addons";
|
import "./hassio-addons";
|
||||||
import "./hassio-update";
|
import "./hassio-update";
|
||||||
|
|
||||||
import { supervisorTabs } from "../hassio-panel";
|
|
||||||
|
|
||||||
@customElement("hassio-dashboard")
|
@customElement("hassio-dashboard")
|
||||||
class HassioDashboard extends LitElement {
|
class HassioDashboard extends LitElement {
|
||||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import "@material/mwc-button";
|
import "@material/mwc-button";
|
||||||
import "@polymer/paper-card/paper-card";
|
import { mdiHomeAssistant } from "@mdi/js";
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResult,
|
CSSResult,
|
||||||
@ -10,15 +10,15 @@ import {
|
|||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
import "../../../src/components/buttons/ha-call-api-button";
|
import "../../../src/components/buttons/ha-call-api-button";
|
||||||
|
import "../../../src/components/ha-card";
|
||||||
|
import "../../../src/components/ha-svg-icon";
|
||||||
import { HassioHassOSInfo } from "../../../src/data/hassio/host";
|
import { HassioHassOSInfo } from "../../../src/data/hassio/host";
|
||||||
import {
|
import {
|
||||||
HassioHomeAssistantInfo,
|
HassioHomeAssistantInfo,
|
||||||
HassioSupervisorInfo,
|
HassioSupervisorInfo,
|
||||||
} from "../../../src/data/hassio/supervisor";
|
} from "../../../src/data/hassio/supervisor";
|
||||||
import { haStyle } from "../../../src/resources/styles";
|
import { haStyle } from "../../../src/resources/styles";
|
||||||
import "../../../src/components/ha-icon";
|
|
||||||
import { HomeAssistant } from "../../../src/types";
|
import { HomeAssistant } from "../../../src/types";
|
||||||
import "../components/hassio-card-content";
|
|
||||||
import { hassioStyle } from "../resources/hassio-style";
|
import { hassioStyle } from "../resources/hassio-style";
|
||||||
|
|
||||||
@customElement("hassio-update")
|
@customElement("hassio-update")
|
||||||
@ -72,7 +72,7 @@ export class HassioUpdate extends LitElement {
|
|||||||
`https://${
|
`https://${
|
||||||
this.hassInfo.version_latest.includes("b") ? "rc" : "www"
|
this.hassInfo.version_latest.includes("b") ? "rc" : "www"
|
||||||
}.home-assistant.io/latest-release-notes/`,
|
}.home-assistant.io/latest-release-notes/`,
|
||||||
"hassio:home-assistant"
|
mdiHomeAssistant
|
||||||
)}
|
)}
|
||||||
${this._renderUpdateCard(
|
${this._renderUpdateCard(
|
||||||
"Supervisor",
|
"Supervisor",
|
||||||
@ -107,12 +107,12 @@ export class HassioUpdate extends LitElement {
|
|||||||
return html``;
|
return html``;
|
||||||
}
|
}
|
||||||
return html`
|
return html`
|
||||||
<paper-card>
|
<ha-card>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
${icon
|
${icon
|
||||||
? html`
|
? html`
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<ha-icon .icon=${icon}></ha-icon>
|
<ha-svg-icon .path=${icon}></ha-svg-icon>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
@ -133,7 +133,7 @@ export class HassioUpdate extends LitElement {
|
|||||||
Update
|
Update
|
||||||
</ha-call-api-button>
|
</ha-call-api-button>
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,7 +1,3 @@
|
|||||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
|
||||||
import { PaperDialogElement } from "@polymer/paper-dialog";
|
|
||||||
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
|
|
||||||
import "../../../../src/components/ha-icon-button";
|
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResult,
|
CSSResult,
|
||||||
@ -9,46 +5,50 @@ import {
|
|||||||
html,
|
html,
|
||||||
LitElement,
|
LitElement,
|
||||||
property,
|
property,
|
||||||
query,
|
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
import "../../../../src/components/dialog/ha-paper-dialog";
|
import { createCloseHeading } from "../../../../src/components/ha-dialog";
|
||||||
import "../../../../src/components/ha-markdown";
|
import "../../../../src/components/ha-markdown";
|
||||||
import { haStyleDialog } from "../../../../src/resources/styles";
|
import { haStyleDialog } from "../../../../src/resources/styles";
|
||||||
|
import { HomeAssistant } from "../../../../src/types";
|
||||||
import { hassioStyle } from "../../resources/hassio-style";
|
import { hassioStyle } from "../../resources/hassio-style";
|
||||||
import { HassioMarkdownDialogParams } from "./show-dialog-hassio-markdown";
|
import { HassioMarkdownDialogParams } from "./show-dialog-hassio-markdown";
|
||||||
|
|
||||||
@customElement("dialog-hassio-markdown")
|
@customElement("dialog-hassio-markdown")
|
||||||
class HassioMarkdownDialog extends LitElement {
|
class HassioMarkdownDialog extends LitElement {
|
||||||
|
@property() public hass!: HomeAssistant;
|
||||||
|
|
||||||
@property() public title!: string;
|
@property() public title!: string;
|
||||||
|
|
||||||
@property() public content!: string;
|
@property() public content!: string;
|
||||||
|
|
||||||
@query("#dialog") private _dialog!: PaperDialogElement;
|
@property() private _opened = false;
|
||||||
|
|
||||||
public showDialog(params: HassioMarkdownDialogParams) {
|
public showDialog(params: HassioMarkdownDialogParams) {
|
||||||
this.title = params.title;
|
this.title = params.title;
|
||||||
this.content = params.content;
|
this.content = params.content;
|
||||||
this._dialog.open();
|
this._opened = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
|
if (!this._opened) {
|
||||||
|
return html``;
|
||||||
|
}
|
||||||
return html`
|
return html`
|
||||||
<ha-paper-dialog id="dialog" with-backdrop="">
|
<ha-dialog
|
||||||
<app-toolbar>
|
open
|
||||||
<ha-icon-button
|
@closing=${this._closeDialog}
|
||||||
icon="hassio:close"
|
.heading=${createCloseHeading(this.hass, this.title)}
|
||||||
dialog-dismiss=""
|
>
|
||||||
></ha-icon-button>
|
<ha-markdown .content=${this.content || ""}></ha-markdown>
|
||||||
<div main-title="">${this.title}</div>
|
</ha-dialog>
|
||||||
</app-toolbar>
|
|
||||||
<paper-dialog-scrollable>
|
|
||||||
<ha-markdown .content=${this.content || ""}></ha-markdown>
|
|
||||||
</paper-dialog-scrollable>
|
|
||||||
</ha-paper-dialog>
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _closeDialog(): void {
|
||||||
|
this._opened = false;
|
||||||
|
}
|
||||||
|
|
||||||
static get styles(): CSSResult[] {
|
static get styles(): CSSResult[] {
|
||||||
return [
|
return [
|
||||||
haStyleDialog,
|
haStyleDialog,
|
||||||
|
@ -1,9 +1,11 @@
|
|||||||
import "@material/mwc-button/mwc-button";
|
import "@material/mwc-button/mwc-button";
|
||||||
|
import "@material/mwc-icon-button/mwc-icon-button";
|
||||||
|
import { mdiDelete } from "@mdi/js";
|
||||||
import "@polymer/paper-input/paper-input";
|
import "@polymer/paper-input/paper-input";
|
||||||
import "@polymer/paper-spinner/paper-spinner";
|
|
||||||
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
|
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
|
||||||
import "@polymer/paper-item/paper-item";
|
import "@polymer/paper-item/paper-item";
|
||||||
import "@polymer/paper-item/paper-item-body";
|
import "@polymer/paper-item/paper-item-body";
|
||||||
|
import "@polymer/paper-spinner/paper-spinner";
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResult,
|
CSSResult,
|
||||||
@ -16,16 +18,14 @@ import {
|
|||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
import memoizeOne from "memoize-one";
|
import memoizeOne from "memoize-one";
|
||||||
import "../../../../src/components/ha-dialog";
|
import "../../../../src/components/ha-dialog";
|
||||||
import "../../../../src/components/ha-icon-button";
|
import "../../../../src/components/ha-svg-icon";
|
||||||
|
import {
|
||||||
|
fetchHassioAddonsInfo,
|
||||||
|
HassioAddonRepository,
|
||||||
|
} from "../../../../src/data/hassio/addon";
|
||||||
|
import { setSupervisorOption } from "../../../../src/data/hassio/supervisor";
|
||||||
import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
|
import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
|
||||||
import type { HomeAssistant } from "../../../../src/types";
|
import type { HomeAssistant } from "../../../../src/types";
|
||||||
import {
|
|
||||||
HassioAddonRepository,
|
|
||||||
fetchHassioAddonsInfo,
|
|
||||||
} from "../../../../src/data/hassio/addon";
|
|
||||||
|
|
||||||
import { setSupervisorOption } from "../../../../src/data/hassio/supervisor";
|
|
||||||
import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
|
import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
|
||||||
|
|
||||||
@customElement("dialog-hassio-repositories")
|
@customElement("dialog-hassio-repositories")
|
||||||
@ -84,12 +84,13 @@ class HassioRepositoriesDialog extends LitElement {
|
|||||||
<div secondary>${repo.maintainer}</div>
|
<div secondary>${repo.maintainer}</div>
|
||||||
<div secondary>${repo.url}</div>
|
<div secondary>${repo.url}</div>
|
||||||
</paper-item-body>
|
</paper-item-body>
|
||||||
<ha-icon-button
|
<mwc-icon-button
|
||||||
.slug=${repo.slug}
|
.slug=${repo.slug}
|
||||||
title="Remove"
|
title="Remove"
|
||||||
@click=${this._removeRepository}
|
@click=${this._removeRepository}
|
||||||
icon="hassio:delete"
|
>
|
||||||
></ha-icon-button>
|
<ha-svg-icon path=${mdiDelete}></ha-svg-icon>
|
||||||
|
</mwc-icon-button>
|
||||||
</paper-item>
|
</paper-item>
|
||||||
`;
|
`;
|
||||||
})
|
})
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { fireEvent } from "../../../../src/common/dom/fire_event";
|
import { fireEvent } from "../../../../src/common/dom/fire_event";
|
||||||
import "./dialog-hassio-repositories";
|
|
||||||
import { HassioAddonRepository } from "../../../../src/data/hassio/addon";
|
import { HassioAddonRepository } from "../../../../src/data/hassio/addon";
|
||||||
|
import "./dialog-hassio-repositories";
|
||||||
|
|
||||||
export interface HassioRepositoryDialogParams {
|
export interface HassioRepositoryDialogParams {
|
||||||
repos: HassioAddonRepository[];
|
repos: HassioAddonRepository[];
|
||||||
|
@ -1,10 +1,6 @@
|
|||||||
import "@material/mwc-button";
|
import "@material/mwc-button";
|
||||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
import { mdiDelete, mdiDownload, mdiHistory } from "@mdi/js";
|
||||||
import { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
|
import { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
|
||||||
import { PaperDialogElement } from "@polymer/paper-dialog";
|
|
||||||
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
|
|
||||||
import "../../../../src/components/ha-icon-button";
|
|
||||||
import "../../../../src/components/ha-icon";
|
|
||||||
import "@polymer/paper-input/paper-input";
|
import "@polymer/paper-input/paper-input";
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
@ -13,10 +9,10 @@ import {
|
|||||||
html,
|
html,
|
||||||
LitElement,
|
LitElement,
|
||||||
property,
|
property,
|
||||||
query,
|
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
import "../../../../src/components/dialog/ha-paper-dialog";
|
import { createCloseHeading } from "../../../../src/components/ha-dialog";
|
||||||
|
import "../../../../src/components/ha-svg-icon";
|
||||||
import { getSignedPath } from "../../../../src/data/auth";
|
import { getSignedPath } from "../../../../src/data/auth";
|
||||||
import {
|
import {
|
||||||
fetchHassioSnapshotInfo,
|
fetchHassioSnapshotInfo,
|
||||||
@ -76,7 +72,7 @@ class HassioSnapshotDialog extends LitElement {
|
|||||||
|
|
||||||
@property() private _error?: string;
|
@property() private _error?: string;
|
||||||
|
|
||||||
@property() private snapshot?: HassioSnapshotDetail;
|
@property() private _snapshot?: HassioSnapshotDetail;
|
||||||
|
|
||||||
@property() private _folders!: FolderItem[];
|
@property() private _folders!: FolderItem[];
|
||||||
|
|
||||||
@ -88,49 +84,35 @@ class HassioSnapshotDialog extends LitElement {
|
|||||||
|
|
||||||
@property() private _restoreHass: boolean | null | undefined = true;
|
@property() private _restoreHass: boolean | null | undefined = true;
|
||||||
|
|
||||||
@query("#dialog") private _dialog!: PaperDialogElement;
|
|
||||||
|
|
||||||
public async showDialog(params: HassioSnapshotDialogParams) {
|
public async showDialog(params: HassioSnapshotDialogParams) {
|
||||||
this.snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
|
this._snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
|
||||||
this._folders = _computeFolders(
|
this._folders = _computeFolders(
|
||||||
this.snapshot.folders
|
this._snapshot.folders
|
||||||
).sort((a: FolderItem, b: FolderItem) => (a.name > b.name ? 1 : -1));
|
).sort((a: FolderItem, b: FolderItem) => (a.name > b.name ? 1 : -1));
|
||||||
this._addons = _computeAddons(
|
this._addons = _computeAddons(
|
||||||
this.snapshot.addons
|
this._snapshot.addons
|
||||||
).sort((a: AddonItem, b: AddonItem) => (a.name > b.name ? 1 : -1));
|
).sort((a: AddonItem, b: AddonItem) => (a.name > b.name ? 1 : -1));
|
||||||
|
|
||||||
this._dialogParams = params;
|
this._dialogParams = params;
|
||||||
|
|
||||||
try {
|
|
||||||
this._dialog.open();
|
|
||||||
} catch {
|
|
||||||
await this.showDialog(params);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
if (!this.snapshot) {
|
if (!this._dialogParams || !this._snapshot) {
|
||||||
return html``;
|
return html``;
|
||||||
}
|
}
|
||||||
return html`
|
return html`
|
||||||
<ha-paper-dialog
|
<ha-dialog
|
||||||
id="dialog"
|
open
|
||||||
with-backdrop=""
|
stacked
|
||||||
.on-iron-overlay-closed=${this._dialogClosed}
|
@closing=${this._closeDialog}
|
||||||
|
.heading=${createCloseHeading(this.hass, this._computeName)}
|
||||||
>
|
>
|
||||||
<app-toolbar>
|
|
||||||
<ha-icon-button
|
|
||||||
icon="hassio:close"
|
|
||||||
dialog-dismiss=""
|
|
||||||
></ha-icon-button>
|
|
||||||
<div main-title="">${this._computeName}</div>
|
|
||||||
</app-toolbar>
|
|
||||||
<div class="details">
|
<div class="details">
|
||||||
${this.snapshot.type === "full"
|
${this._snapshot.type === "full"
|
||||||
? "Full snapshot"
|
? "Full snapshot"
|
||||||
: "Partial snapshot"}
|
: "Partial snapshot"}
|
||||||
(${this._computeSize})<br />
|
(${this._computeSize})<br />
|
||||||
${this._formatDatetime(this.snapshot.date)}
|
${this._formatDatetime(this._snapshot.date)}
|
||||||
</div>
|
</div>
|
||||||
<div>Home Assistant:</div>
|
<div>Home Assistant:</div>
|
||||||
<paper-checkbox
|
<paper-checkbox
|
||||||
@ -139,7 +121,7 @@ class HassioSnapshotDialog extends LitElement {
|
|||||||
this._restoreHass = (ev.target as PaperCheckboxElement).checked;
|
this._restoreHass = (ev.target as PaperCheckboxElement).checked;
|
||||||
}}"
|
}}"
|
||||||
>
|
>
|
||||||
Home Assistant ${this.snapshot.homeassistant}
|
Home Assistant ${this._snapshot.homeassistant}
|
||||||
</paper-checkbox>
|
</paper-checkbox>
|
||||||
${this._folders.length
|
${this._folders.length
|
||||||
? html`
|
? html`
|
||||||
@ -183,7 +165,7 @@ class HassioSnapshotDialog extends LitElement {
|
|||||||
</paper-dialog-scrollable>
|
</paper-dialog-scrollable>
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
${this.snapshot.protected
|
${this._snapshot.protected
|
||||||
? html`
|
? html`
|
||||||
<paper-input
|
<paper-input
|
||||||
autofocus=""
|
autofocus=""
|
||||||
@ -197,37 +179,35 @@ class HassioSnapshotDialog extends LitElement {
|
|||||||
${this._error ? html` <p class="error">Error: ${this._error}</p> ` : ""}
|
${this._error ? html` <p class="error">Error: ${this._error}</p> ` : ""}
|
||||||
|
|
||||||
<div>Actions:</div>
|
<div>Actions:</div>
|
||||||
<ul class="buttons">
|
|
||||||
<li>
|
<mwc-button @click=${this._downloadClicked} slot="primaryAction">
|
||||||
<mwc-button @click=${this._downloadClicked}>
|
<ha-svg-icon path=${mdiDownload} class="icon"></ha-svg-icon>
|
||||||
<ha-icon icon="hassio:download" class="icon"></ha-icon>
|
Download Snapshot
|
||||||
Download Snapshot
|
</mwc-button>
|
||||||
</mwc-button>
|
|
||||||
</li>
|
<mwc-button
|
||||||
<li>
|
@click=${this._partialRestoreClicked}
|
||||||
<mwc-button @click=${this._partialRestoreClicked}>
|
slot="secondaryAction"
|
||||||
<ha-icon icon="hassio:history" class="icon"> </ha-icon>
|
>
|
||||||
Restore Selected
|
<ha-svg-icon path=${mdiHistory} class="icon"></ha-svg-icon>
|
||||||
</mwc-button>
|
Restore Selected
|
||||||
</li>
|
</mwc-button>
|
||||||
${this.snapshot.type === "full"
|
${this._snapshot.type === "full"
|
||||||
? html`
|
? html`
|
||||||
<li>
|
<mwc-button
|
||||||
<mwc-button @click=${this._fullRestoreClicked}>
|
@click=${this._fullRestoreClicked}
|
||||||
<ha-icon icon="hassio:history" class="icon"> </ha-icon>
|
slot="secondaryAction"
|
||||||
Wipe & restore
|
>
|
||||||
</mwc-button>
|
<ha-svg-icon path=${mdiHistory} class="icon"></ha-svg-icon>
|
||||||
</li>
|
Wipe & restore
|
||||||
`
|
</mwc-button>
|
||||||
: ""}
|
`
|
||||||
<li>
|
: ""}
|
||||||
<mwc-button @click=${this._deleteClicked}>
|
<mwc-button @click=${this._deleteClicked} slot="secondaryAction">
|
||||||
<ha-icon icon="hassio:delete" class="icon warning"> </ha-icon>
|
<ha-svg-icon path=${mdiDelete} class="icon warning"></ha-svg-icon>
|
||||||
<span class="warning">Delete Snapshot</span>
|
<span class="warning">Delete Snapshot</span>
|
||||||
</mwc-button>
|
</mwc-button>
|
||||||
</li>
|
</ha-dialog>
|
||||||
</ul>
|
|
||||||
</ha-paper-dialog>
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -235,37 +215,10 @@ class HassioSnapshotDialog extends LitElement {
|
|||||||
return [
|
return [
|
||||||
haStyleDialog,
|
haStyleDialog,
|
||||||
css`
|
css`
|
||||||
ha-paper-dialog {
|
|
||||||
min-width: 350px;
|
|
||||||
font-size: 14px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
app-toolbar {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0 16px;
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
background-color: var(--secondary-background-color);
|
|
||||||
}
|
|
||||||
app-toolbar [main-title] {
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
ha-paper-dialog-scrollable {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
paper-checkbox {
|
paper-checkbox {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
}
|
}
|
||||||
@media all and (max-width: 450px), all and (max-height: 500px) {
|
|
||||||
ha-paper-dialog {
|
|
||||||
max-height: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
app-toolbar {
|
|
||||||
color: var(--text-primary-color);
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.details {
|
.details {
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
}
|
}
|
||||||
@ -336,7 +289,7 @@ class HassioSnapshotDialog extends LitElement {
|
|||||||
folders,
|
folders,
|
||||||
};
|
};
|
||||||
|
|
||||||
if (this.snapshot!.protected) {
|
if (this._snapshot!.protected) {
|
||||||
data.password = this._snapshotPassword;
|
data.password = this._snapshotPassword;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -344,13 +297,13 @@ class HassioSnapshotDialog extends LitElement {
|
|||||||
.callApi(
|
.callApi(
|
||||||
"POST",
|
"POST",
|
||||||
|
|
||||||
`hassio/snapshots/${this.snapshot!.slug}/restore/partial`,
|
`hassio/snapshots/${this._snapshot!.slug}/restore/partial`,
|
||||||
data
|
data
|
||||||
)
|
)
|
||||||
.then(
|
.then(
|
||||||
() => {
|
() => {
|
||||||
alert("Snapshot restored!");
|
alert("Snapshot restored!");
|
||||||
this._dialog.close();
|
this._closeDialog();
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
this._error = error.body.message;
|
this._error = error.body.message;
|
||||||
@ -363,20 +316,20 @@ class HassioSnapshotDialog extends LitElement {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const data = this.snapshot!.protected
|
const data = this._snapshot!.protected
|
||||||
? { password: this._snapshotPassword }
|
? { password: this._snapshotPassword }
|
||||||
: undefined;
|
: undefined;
|
||||||
|
|
||||||
this.hass
|
this.hass
|
||||||
.callApi(
|
.callApi(
|
||||||
"POST",
|
"POST",
|
||||||
`hassio/snapshots/${this.snapshot!.slug}/restore/full`,
|
`hassio/snapshots/${this._snapshot!.slug}/restore/full`,
|
||||||
data
|
data
|
||||||
)
|
)
|
||||||
.then(
|
.then(
|
||||||
() => {
|
() => {
|
||||||
alert("Snapshot restored!");
|
alert("Snapshot restored!");
|
||||||
this._dialog.close();
|
this._closeDialog();
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
this._error = error.body.message;
|
this._error = error.body.message;
|
||||||
@ -391,11 +344,11 @@ class HassioSnapshotDialog extends LitElement {
|
|||||||
|
|
||||||
this.hass
|
this.hass
|
||||||
|
|
||||||
.callApi("POST", `hassio/snapshots/${this.snapshot!.slug}/remove`)
|
.callApi("POST", `hassio/snapshots/${this._snapshot!.slug}/remove`)
|
||||||
.then(
|
.then(
|
||||||
() => {
|
() => {
|
||||||
this._dialog.close();
|
|
||||||
this._dialogParams!.onDelete();
|
this._dialogParams!.onDelete();
|
||||||
|
this._closeDialog();
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
this._error = error.body.message;
|
this._error = error.body.message;
|
||||||
@ -408,7 +361,7 @@ class HassioSnapshotDialog extends LitElement {
|
|||||||
try {
|
try {
|
||||||
signedPath = await getSignedPath(
|
signedPath = await getSignedPath(
|
||||||
this.hass,
|
this.hass,
|
||||||
`/api/hassio/snapshots/${this.snapshot!.slug}/download`
|
`/api/hassio/snapshots/${this._snapshot!.slug}/download`
|
||||||
);
|
);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
alert(`Error: ${err.message}`);
|
alert(`Error: ${err.message}`);
|
||||||
@ -419,19 +372,19 @@ class HassioSnapshotDialog extends LitElement {
|
|||||||
const a = document.createElement("a");
|
const a = document.createElement("a");
|
||||||
a.href = signedPath.path;
|
a.href = signedPath.path;
|
||||||
a.download = `Hass_io_${name}.tar`;
|
a.download = `Hass_io_${name}.tar`;
|
||||||
this._dialog.appendChild(a);
|
this.shadowRoot!.appendChild(a);
|
||||||
a.click();
|
a.click();
|
||||||
this._dialog.removeChild(a);
|
this.shadowRoot!.removeChild(a);
|
||||||
}
|
}
|
||||||
|
|
||||||
private get _computeName() {
|
private get _computeName() {
|
||||||
return this.snapshot
|
return this._snapshot
|
||||||
? this.snapshot.name || this.snapshot.slug
|
? this._snapshot.name || this._snapshot.slug
|
||||||
: "Unnamed snapshot";
|
: "Unnamed snapshot";
|
||||||
}
|
}
|
||||||
|
|
||||||
private get _computeSize() {
|
private get _computeSize() {
|
||||||
return Math.ceil(this.snapshot!.size * 10) / 10 + " MB";
|
return Math.ceil(this._snapshot!.size * 10) / 10 + " MB";
|
||||||
}
|
}
|
||||||
|
|
||||||
private _formatDatetime(datetime) {
|
private _formatDatetime(datetime) {
|
||||||
@ -445,9 +398,9 @@ class HassioSnapshotDialog extends LitElement {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private _dialogClosed() {
|
private _closeDialog() {
|
||||||
this._dialogParams = undefined;
|
this._dialogParams = undefined;
|
||||||
this.snapshot = undefined;
|
this._snapshot = undefined;
|
||||||
this._snapshotPassword = "";
|
this._snapshotPassword = "";
|
||||||
this._folders = [];
|
this._folders = [];
|
||||||
this._addons = [];
|
this._addons = [];
|
||||||
|
@ -3,11 +3,11 @@ import {
|
|||||||
HassioAddonDetails,
|
HassioAddonDetails,
|
||||||
restartHassioAddon,
|
restartHassioAddon,
|
||||||
} from "../../../src/data/hassio/addon";
|
} from "../../../src/data/hassio/addon";
|
||||||
import { HomeAssistant } from "../../../src/types";
|
|
||||||
import {
|
import {
|
||||||
showConfirmationDialog,
|
|
||||||
showAlertDialog,
|
showAlertDialog,
|
||||||
|
showConfirmationDialog,
|
||||||
} from "../../../src/dialogs/generic/show-dialog-box";
|
} from "../../../src/dialogs/generic/show-dialog-box";
|
||||||
|
import { HomeAssistant } from "../../../src/types";
|
||||||
|
|
||||||
export const suggestAddonRestart = async (
|
export const suggestAddonRestart = async (
|
||||||
element: LitElement,
|
element: LitElement,
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import "../../src/components/ha-icon-button";
|
|
||||||
import { PolymerElement } from "@polymer/polymer";
|
import { PolymerElement } from "@polymer/polymer";
|
||||||
import { customElement, property, PropertyValues } from "lit-element";
|
import { customElement, property, PropertyValues } from "lit-element";
|
||||||
import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
|
import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
|
||||||
@ -34,12 +33,6 @@ import { HomeAssistant } from "../../src/types";
|
|||||||
// Don't codesplit it, that way the dashboard always loads fast.
|
// Don't codesplit it, that way the dashboard always loads fast.
|
||||||
import "./hassio-panel";
|
import "./hassio-panel";
|
||||||
|
|
||||||
// The register callback of the IronA11yKeysBehavior inside ha-icon-button
|
|
||||||
// is not called, causing _keyBindings to be uninitiliazed for ha-icon-button,
|
|
||||||
// causing an exception when added to DOM. When transpiled to ES5, this will
|
|
||||||
// break the build.
|
|
||||||
customElements.get("ha-icon-button").prototype._keyBindings = {};
|
|
||||||
|
|
||||||
@customElement("hassio-main")
|
@customElement("hassio-main")
|
||||||
class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
|
class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
|
||||||
@property() public hass!: HomeAssistant;
|
@property() public hass!: HomeAssistant;
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import { mdiBackupRestore, mdiCogs, mdiStore, mdiViewDashboard } from "@mdi/js";
|
||||||
import {
|
import {
|
||||||
customElement,
|
customElement,
|
||||||
html,
|
html,
|
||||||
@ -5,37 +6,36 @@ import {
|
|||||||
property,
|
property,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
|
|
||||||
import { HassioHassOSInfo, HassioHostInfo } from "../../src/data/hassio/host";
|
import { HassioHassOSInfo, HassioHostInfo } from "../../src/data/hassio/host";
|
||||||
import {
|
import {
|
||||||
HassioHomeAssistantInfo,
|
HassioHomeAssistantInfo,
|
||||||
HassioSupervisorInfo,
|
HassioSupervisorInfo,
|
||||||
} from "../../src/data/hassio/supervisor";
|
} from "../../src/data/hassio/supervisor";
|
||||||
|
import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
|
||||||
import "../../src/resources/ha-style";
|
import "../../src/resources/ha-style";
|
||||||
import { HomeAssistant, Route } from "../../src/types";
|
import { HomeAssistant, Route } from "../../src/types";
|
||||||
import "./hassio-panel-router";
|
import "./hassio-panel-router";
|
||||||
import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
|
|
||||||
|
|
||||||
export const supervisorTabs: PageNavigation[] = [
|
export const supervisorTabs: PageNavigation[] = [
|
||||||
{
|
{
|
||||||
name: "Dashboard",
|
name: "Dashboard",
|
||||||
path: `/hassio/dashboard`,
|
path: `/hassio/dashboard`,
|
||||||
icon: "hassio:view-dashboard",
|
iconPath: mdiViewDashboard,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Add-on store",
|
name: "Add-on store",
|
||||||
path: `/hassio/store`,
|
path: `/hassio/store`,
|
||||||
icon: "hassio:store",
|
iconPath: mdiStore,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Snapshots",
|
name: "Snapshots",
|
||||||
path: `/hassio/snapshots`,
|
path: `/hassio/snapshots`,
|
||||||
icon: "hassio:backup-restore",
|
iconPath: mdiBackupRestore,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "System",
|
name: "System",
|
||||||
path: `/hassio/system`,
|
path: `/hassio/system`,
|
||||||
icon: "hassio:cogs",
|
iconPath: mdiCogs,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
@ -86,9 +86,6 @@ class HassioIngressView extends LitElement {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
ha-icon-button {
|
|
||||||
color: var(--text-primary-color);
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import "@material/mwc-button";
|
import "@material/mwc-button";
|
||||||
import "@polymer/paper-card/paper-card";
|
import "@material/mwc-icon-button";
|
||||||
|
import { mdiPackageVariant, mdiPackageVariantClosed, mdiReload } from "@mdi/js";
|
||||||
import "@polymer/paper-checkbox/paper-checkbox";
|
import "@polymer/paper-checkbox/paper-checkbox";
|
||||||
import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
|
import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
|
||||||
import "@polymer/paper-input/paper-input";
|
import "@polymer/paper-input/paper-input";
|
||||||
@ -18,6 +19,8 @@ import {
|
|||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
import { fireEvent } from "../../../src/common/dom/fire_event";
|
import { fireEvent } from "../../../src/common/dom/fire_event";
|
||||||
|
import "../../../src/components/ha-card";
|
||||||
|
import "../../../src/components/ha-svg-icon";
|
||||||
import {
|
import {
|
||||||
createHassioFullSnapshot,
|
createHassioFullSnapshot,
|
||||||
createHassioPartialSnapshot,
|
createHassioPartialSnapshot,
|
||||||
@ -28,15 +31,14 @@ import {
|
|||||||
reloadHassioSnapshots,
|
reloadHassioSnapshots,
|
||||||
} from "../../../src/data/hassio/snapshot";
|
} from "../../../src/data/hassio/snapshot";
|
||||||
import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
|
import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
|
||||||
|
import "../../../src/layouts/hass-tabs-subpage";
|
||||||
import { PolymerChangedEvent } from "../../../src/polymer-types";
|
import { PolymerChangedEvent } from "../../../src/polymer-types";
|
||||||
import { haStyle } from "../../../src/resources/styles";
|
import { haStyle } from "../../../src/resources/styles";
|
||||||
import { HomeAssistant, Route } from "../../../src/types";
|
import { HomeAssistant, Route } from "../../../src/types";
|
||||||
import "../../../src/layouts/hass-tabs-subpage";
|
|
||||||
import "../components/hassio-card-content";
|
import "../components/hassio-card-content";
|
||||||
import { showHassioSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-snapshot";
|
import { showHassioSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-snapshot";
|
||||||
import { hassioStyle } from "../resources/hassio-style";
|
|
||||||
|
|
||||||
import { supervisorTabs } from "../hassio-panel";
|
import { supervisorTabs } from "../hassio-panel";
|
||||||
|
import { hassioStyle } from "../resources/hassio-style";
|
||||||
|
|
||||||
interface CheckboxItem {
|
interface CheckboxItem {
|
||||||
slug: string;
|
slug: string;
|
||||||
@ -98,12 +100,13 @@ class HassioSnapshots extends LitElement {
|
|||||||
>
|
>
|
||||||
<span slot="header">Snapshots</span>
|
<span slot="header">Snapshots</span>
|
||||||
|
|
||||||
<ha-icon-button
|
<mwc-icon-button
|
||||||
icon="hassio:reload"
|
|
||||||
slot="toolbar-icon"
|
slot="toolbar-icon"
|
||||||
aria-label="Reload snapshots"
|
aria-label="Reload snapshots"
|
||||||
@click=${this.refreshData}
|
@click=${this.refreshData}
|
||||||
></ha-icon-button>
|
>
|
||||||
|
<ha-svg-icon path=${mdiReload}></ha-svg-icon>
|
||||||
|
</mwc-icon-button>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h1>
|
<h1>
|
||||||
@ -114,7 +117,7 @@ class HassioSnapshots extends LitElement {
|
|||||||
Home Assistant instance.
|
Home Assistant instance.
|
||||||
</p>
|
</p>
|
||||||
<div class="card-group">
|
<div class="card-group">
|
||||||
<paper-card>
|
<ha-card>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<paper-input
|
<paper-input
|
||||||
autofocus
|
autofocus
|
||||||
@ -195,7 +198,7 @@ class HassioSnapshots extends LitElement {
|
|||||||
Create
|
Create
|
||||||
</mwc-button>
|
</mwc-button>
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1>Available snapshots</h1>
|
<h1>Available snapshots</h1>
|
||||||
@ -204,15 +207,15 @@ class HassioSnapshots extends LitElement {
|
|||||||
? undefined
|
? undefined
|
||||||
: this._snapshots.length === 0
|
: this._snapshots.length === 0
|
||||||
? html`
|
? html`
|
||||||
<paper-card>
|
<ha-card>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
You don't have any snapshots yet.
|
You don't have any snapshots yet.
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
`
|
`
|
||||||
: this._snapshots.map(
|
: this._snapshots.map(
|
||||||
(snapshot) => html`
|
(snapshot) => html`
|
||||||
<paper-card
|
<ha-card
|
||||||
class="pointer"
|
class="pointer"
|
||||||
.snapshot=${snapshot}
|
.snapshot=${snapshot}
|
||||||
@click=${this._snapshotClicked}
|
@click=${this._snapshotClicked}
|
||||||
@ -224,12 +227,12 @@ class HassioSnapshots extends LitElement {
|
|||||||
.description=${this._computeDetails(snapshot)}
|
.description=${this._computeDetails(snapshot)}
|
||||||
.datetime=${snapshot.date}
|
.datetime=${snapshot.date}
|
||||||
.icon=${snapshot.type === "full"
|
.icon=${snapshot.type === "full"
|
||||||
? "hassio:package-variant-closed"
|
? mdiPackageVariantClosed
|
||||||
: "hassio:package-variant"}
|
: mdiPackageVariant}
|
||||||
.icon-class="snapshot"
|
.icon-class="snapshot"
|
||||||
></hassio-card-content>
|
></hassio-card-content>
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
`
|
`
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import "@material/mwc-button";
|
import "@material/mwc-button";
|
||||||
import "@polymer/paper-card/paper-card";
|
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResult,
|
CSSResult,
|
||||||
@ -12,23 +11,23 @@ import {
|
|||||||
import "../../../src/components/buttons/ha-call-api-button";
|
import "../../../src/components/buttons/ha-call-api-button";
|
||||||
import { fetchHassioHardwareInfo } from "../../../src/data/hassio/hardware";
|
import { fetchHassioHardwareInfo } from "../../../src/data/hassio/hardware";
|
||||||
import {
|
import {
|
||||||
|
changeHostOptions,
|
||||||
fetchHassioHostInfo,
|
fetchHassioHostInfo,
|
||||||
HassioHassOSInfo,
|
HassioHassOSInfo,
|
||||||
HassioHostInfo as HassioHostInfoType,
|
HassioHostInfo as HassioHostInfoType,
|
||||||
rebootHost,
|
rebootHost,
|
||||||
shutdownHost,
|
shutdownHost,
|
||||||
updateOS,
|
updateOS,
|
||||||
changeHostOptions,
|
|
||||||
} from "../../../src/data/hassio/host";
|
} from "../../../src/data/hassio/host";
|
||||||
|
import {
|
||||||
|
showAlertDialog,
|
||||||
|
showConfirmationDialog,
|
||||||
|
showPromptDialog,
|
||||||
|
} from "../../../src/dialogs/generic/show-dialog-box";
|
||||||
import { haStyle } from "../../../src/resources/styles";
|
import { haStyle } from "../../../src/resources/styles";
|
||||||
import { HomeAssistant } from "../../../src/types";
|
import { HomeAssistant } from "../../../src/types";
|
||||||
import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
|
import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
|
||||||
import { hassioStyle } from "../resources/hassio-style";
|
import { hassioStyle } from "../resources/hassio-style";
|
||||||
import {
|
|
||||||
showConfirmationDialog,
|
|
||||||
showAlertDialog,
|
|
||||||
showPromptDialog,
|
|
||||||
} from "../../../src/dialogs/generic/show-dialog-box";
|
|
||||||
|
|
||||||
@customElement("hassio-host-info")
|
@customElement("hassio-host-info")
|
||||||
class HassioHostInfo extends LitElement {
|
class HassioHostInfo extends LitElement {
|
||||||
@ -42,7 +41,7 @@ class HassioHostInfo extends LitElement {
|
|||||||
|
|
||||||
public render(): TemplateResult | void {
|
public render(): TemplateResult | void {
|
||||||
return html`
|
return html`
|
||||||
<paper-card>
|
<ha-card>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<h2>Host system</h2>
|
<h2>Host system</h2>
|
||||||
<table class="info">
|
<table class="info">
|
||||||
@ -113,7 +112,7 @@ class HassioHostInfo extends LitElement {
|
|||||||
? html` <mwc-button @click=${this._updateOS}>Update</mwc-button> `
|
? html` <mwc-button @click=${this._updateOS}>Update</mwc-button> `
|
||||||
: ""}
|
: ""}
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -122,7 +121,7 @@ class HassioHostInfo extends LitElement {
|
|||||||
haStyle,
|
haStyle,
|
||||||
hassioStyle,
|
hassioStyle,
|
||||||
css`
|
css`
|
||||||
paper-card {
|
ha-card {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import "@material/mwc-button";
|
import "@material/mwc-button";
|
||||||
import "@polymer/paper-card/paper-card";
|
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResult,
|
CSSResult,
|
||||||
@ -11,15 +10,16 @@ import {
|
|||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
import { fireEvent } from "../../../src/common/dom/fire_event";
|
import { fireEvent } from "../../../src/common/dom/fire_event";
|
||||||
import "../../../src/components/buttons/ha-call-api-button";
|
import "../../../src/components/buttons/ha-call-api-button";
|
||||||
|
import "../../../src/components/ha-card";
|
||||||
import {
|
import {
|
||||||
HassioSupervisorInfo as HassioSupervisorInfoType,
|
HassioSupervisorInfo as HassioSupervisorInfoType,
|
||||||
setSupervisorOption,
|
setSupervisorOption,
|
||||||
SupervisorOptions,
|
SupervisorOptions,
|
||||||
} from "../../../src/data/hassio/supervisor";
|
} from "../../../src/data/hassio/supervisor";
|
||||||
|
import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
|
||||||
import { haStyle } from "../../../src/resources/styles";
|
import { haStyle } from "../../../src/resources/styles";
|
||||||
import { HomeAssistant } from "../../../src/types";
|
import { HomeAssistant } from "../../../src/types";
|
||||||
import { hassioStyle } from "../resources/hassio-style";
|
import { hassioStyle } from "../resources/hassio-style";
|
||||||
import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
|
|
||||||
|
|
||||||
@customElement("hassio-supervisor-info")
|
@customElement("hassio-supervisor-info")
|
||||||
class HassioSupervisorInfo extends LitElement {
|
class HassioSupervisorInfo extends LitElement {
|
||||||
@ -31,7 +31,7 @@ class HassioSupervisorInfo extends LitElement {
|
|||||||
|
|
||||||
public render(): TemplateResult | void {
|
public render(): TemplateResult | void {
|
||||||
return html`
|
return html`
|
||||||
<paper-card>
|
<ha-card>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<h2>Supervisor</h2>
|
<h2>Supervisor</h2>
|
||||||
<table class="info">
|
<table class="info">
|
||||||
@ -92,7 +92,7 @@ class HassioSupervisorInfo extends LitElement {
|
|||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -101,7 +101,7 @@ class HassioSupervisorInfo extends LitElement {
|
|||||||
haStyle,
|
haStyle,
|
||||||
hassioStyle,
|
hassioStyle,
|
||||||
css`
|
css`
|
||||||
paper-card {
|
ha-card {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -2,7 +2,6 @@ import "@material/mwc-button";
|
|||||||
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
|
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
|
||||||
import "@polymer/paper-item/paper-item";
|
import "@polymer/paper-item/paper-item";
|
||||||
import "@polymer/paper-listbox/paper-listbox";
|
import "@polymer/paper-listbox/paper-listbox";
|
||||||
import "@polymer/paper-card/paper-card";
|
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResult,
|
CSSResult,
|
||||||
@ -12,14 +11,13 @@ import {
|
|||||||
property,
|
property,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
|
import "../../../src/components/ha-card";
|
||||||
|
import { fetchHassioLogs } from "../../../src/data/hassio/supervisor";
|
||||||
|
import "../../../src/layouts/loading-screen";
|
||||||
import { haStyle } from "../../../src/resources/styles";
|
import { haStyle } from "../../../src/resources/styles";
|
||||||
import { HomeAssistant } from "../../../src/types";
|
import { HomeAssistant } from "../../../src/types";
|
||||||
|
|
||||||
import { fetchHassioLogs } from "../../../src/data/hassio/supervisor";
|
|
||||||
|
|
||||||
import "../components/hassio-ansi-to-html";
|
import "../components/hassio-ansi-to-html";
|
||||||
import { hassioStyle } from "../resources/hassio-style";
|
import { hassioStyle } from "../resources/hassio-style";
|
||||||
import "../../../src/layouts/loading-screen";
|
|
||||||
|
|
||||||
interface LogProvider {
|
interface LogProvider {
|
||||||
key: string;
|
key: string;
|
||||||
@ -70,7 +68,7 @@ class HassioSupervisorLog extends LitElement {
|
|||||||
|
|
||||||
public render(): TemplateResult | void {
|
public render(): TemplateResult | void {
|
||||||
return html`
|
return html`
|
||||||
<paper-card>
|
<ha-card>
|
||||||
${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
|
${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
|
||||||
${this.hass.userData?.showAdvanced
|
${this.hass.userData?.showAdvanced
|
||||||
? html`
|
? html`
|
||||||
@ -105,7 +103,7 @@ class HassioSupervisorLog extends LitElement {
|
|||||||
<div class="card-actions">
|
<div class="card-actions">
|
||||||
<mwc-button @click=${this._refresh}>Refresh</mwc-button>
|
<mwc-button @click=${this._refresh}>Refresh</mwc-button>
|
||||||
</div>
|
</div>
|
||||||
</paper-card>
|
</ha-card>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -114,7 +112,7 @@ class HassioSupervisorLog extends LitElement {
|
|||||||
haStyle,
|
haStyle,
|
||||||
hassioStyle,
|
hassioStyle,
|
||||||
css`
|
css`
|
||||||
paper-card {
|
ha-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
pre {
|
pre {
|
||||||
|
@ -13,16 +13,15 @@ import {
|
|||||||
HassioHostInfo,
|
HassioHostInfo,
|
||||||
} from "../../../src/data/hassio/host";
|
} from "../../../src/data/hassio/host";
|
||||||
import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
|
import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
|
||||||
import { haStyle } from "../../../src/resources/styles";
|
|
||||||
import "../../../src/layouts/hass-tabs-subpage";
|
import "../../../src/layouts/hass-tabs-subpage";
|
||||||
|
import { haStyle } from "../../../src/resources/styles";
|
||||||
import { HomeAssistant, Route } from "../../../src/types";
|
import { HomeAssistant, Route } from "../../../src/types";
|
||||||
|
import { supervisorTabs } from "../hassio-panel";
|
||||||
import { hassioStyle } from "../resources/hassio-style";
|
import { hassioStyle } from "../resources/hassio-style";
|
||||||
import "./hassio-host-info";
|
import "./hassio-host-info";
|
||||||
import "./hassio-supervisor-info";
|
import "./hassio-supervisor-info";
|
||||||
import "./hassio-supervisor-log";
|
import "./hassio-supervisor-log";
|
||||||
|
|
||||||
import { supervisorTabs } from "../hassio-panel";
|
|
||||||
|
|
||||||
@customElement("hassio-system")
|
@customElement("hassio-system")
|
||||||
class HassioSystem extends LitElement {
|
class HassioSystem extends LitElement {
|
||||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import "../../components/ha-icon-button";
|
|
||||||
import "@polymer/paper-input/paper-input";
|
import "@polymer/paper-input/paper-input";
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
@ -9,8 +8,10 @@ import {
|
|||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
import { html, TemplateResult } from "lit-html";
|
import { html, TemplateResult } from "lit-html";
|
||||||
import { classMap } from "lit-html/directives/class-map";
|
import { classMap } from "lit-html/directives/class-map";
|
||||||
import "../../components/ha-icon";
|
import "../../components/ha-svg-icon";
|
||||||
import { fireEvent } from "../dom/fire_event";
|
import { fireEvent } from "../dom/fire_event";
|
||||||
|
import { mdiMagnify, mdiClose } from "@mdi/js";
|
||||||
|
import "@material/mwc-icon-button/mwc-icon-button";
|
||||||
|
|
||||||
@customElement("search-input")
|
@customElement("search-input")
|
||||||
class SearchInput extends LitElement {
|
class SearchInput extends LitElement {
|
||||||
@ -47,17 +48,22 @@ class SearchInput extends LitElement {
|
|||||||
@value-changed=${this._filterInputChanged}
|
@value-changed=${this._filterInputChanged}
|
||||||
.noLabelFloat=${this.noLabelFloat}
|
.noLabelFloat=${this.noLabelFloat}
|
||||||
>
|
>
|
||||||
<ha-icon icon="hass:magnify" slot="prefix" class="prefix"></ha-icon>
|
<ha-svg-icon
|
||||||
|
path=${mdiMagnify}
|
||||||
|
slot="prefix"
|
||||||
|
class="prefix"
|
||||||
|
></ha-svg-icon>
|
||||||
${this.filter &&
|
${this.filter &&
|
||||||
html`
|
html`
|
||||||
<ha-icon-button
|
<mwc-icon-button
|
||||||
slot="suffix"
|
slot="suffix"
|
||||||
class="suffix"
|
class="suffix"
|
||||||
@click=${this._clearSearch}
|
@click=${this._clearSearch}
|
||||||
icon="hass:close"
|
|
||||||
alt="Clear"
|
alt="Clear"
|
||||||
title="Clear"
|
title="Clear"
|
||||||
></ha-icon-button>
|
>
|
||||||
|
<ha-svg-icon path=${mdiClose}></ha-svg-icon>
|
||||||
|
</mwc-icon-button>
|
||||||
`}
|
`}
|
||||||
</paper-input>
|
</paper-input>
|
||||||
`;
|
`;
|
||||||
@ -77,11 +83,14 @@ class SearchInput extends LitElement {
|
|||||||
|
|
||||||
static get styles(): CSSResult {
|
static get styles(): CSSResult {
|
||||||
return css`
|
return css`
|
||||||
ha-icon,
|
ha-svg-icon,
|
||||||
ha-icon-button {
|
mwc-icon-button {
|
||||||
color: var(--primary-text-color);
|
color: var(--primary-text-color);
|
||||||
}
|
}
|
||||||
ha-icon {
|
mwc-icon-button {
|
||||||
|
--mdc-icon-button-size: 24px;
|
||||||
|
}
|
||||||
|
ha-svg-icon.prefix {
|
||||||
margin: 8px;
|
margin: 8px;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -6,18 +6,19 @@ import {
|
|||||||
CSSResult,
|
CSSResult,
|
||||||
css,
|
css,
|
||||||
query,
|
query,
|
||||||
|
property,
|
||||||
} from "lit-element";
|
} from "lit-element";
|
||||||
import "@material/mwc-button";
|
import "@material/mwc-button";
|
||||||
import "@material/mwc-menu";
|
import "@material/mwc-menu";
|
||||||
import "@material/mwc-list/mwc-list-item";
|
import "@material/mwc-list/mwc-list-item";
|
||||||
import type { Menu } from "@material/mwc-menu";
|
import type { Menu, Corner } from "@material/mwc-menu";
|
||||||
|
|
||||||
import { haStyle } from "../resources/styles";
|
|
||||||
|
|
||||||
import "./ha-icon-button";
|
import "./ha-icon-button";
|
||||||
|
|
||||||
@customElement("ha-button-menu")
|
@customElement("ha-button-menu")
|
||||||
export class HaButtonMenu extends LitElement {
|
export class HaButtonMenu extends LitElement {
|
||||||
|
@property() public corner: Corner = "TOP_START";
|
||||||
|
|
||||||
@query("mwc-menu") private _menu?: Menu;
|
@query("mwc-menu") private _menu?: Menu;
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
@ -25,7 +26,7 @@ export class HaButtonMenu extends LitElement {
|
|||||||
<div @click=${this._handleClick}>
|
<div @click=${this._handleClick}>
|
||||||
<slot name="trigger"></slot>
|
<slot name="trigger"></slot>
|
||||||
</div>
|
</div>
|
||||||
<mwc-menu>
|
<mwc-menu .corner=${this.corner}>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</mwc-menu>
|
</mwc-menu>
|
||||||
`;
|
`;
|
||||||
@ -36,15 +37,13 @@ export class HaButtonMenu extends LitElement {
|
|||||||
this._menu!.show();
|
this._menu!.show();
|
||||||
}
|
}
|
||||||
|
|
||||||
static get styles(): CSSResult[] {
|
static get styles(): CSSResult {
|
||||||
return [
|
return css`
|
||||||
haStyle,
|
:host {
|
||||||
css`
|
display: block;
|
||||||
:host {
|
position: relative;
|
||||||
position: relative;
|
}
|
||||||
}
|
`;
|
||||||
`,
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -4,17 +4,19 @@ import { style } from "@material/mwc-dialog/mwc-dialog-css";
|
|||||||
import "./ha-icon-button";
|
import "./ha-icon-button";
|
||||||
import { css, CSSResult, customElement, html } from "lit-element";
|
import { css, CSSResult, customElement, html } from "lit-element";
|
||||||
import type { Constructor, HomeAssistant } from "../types";
|
import type { Constructor, HomeAssistant } from "../types";
|
||||||
|
import { mdiClose } from "@mdi/js";
|
||||||
|
|
||||||
const MwcDialog = customElements.get("mwc-dialog") as Constructor<Dialog>;
|
const MwcDialog = customElements.get("mwc-dialog") as Constructor<Dialog>;
|
||||||
|
|
||||||
export const createCloseHeading = (hass: HomeAssistant, title: string) => html`
|
export const createCloseHeading = (hass: HomeAssistant, title: string) => html`
|
||||||
${title}
|
${title}
|
||||||
<ha-icon-button
|
<mwc-icon-button
|
||||||
aria-label=${hass.localize("ui.dialogs.generic.close")}
|
aria-label=${hass.localize("ui.dialogs.generic.close")}
|
||||||
icon="hass:close"
|
|
||||||
dialogAction="close"
|
dialogAction="close"
|
||||||
class="close_button"
|
class="close_button"
|
||||||
></ha-icon-button>
|
>
|
||||||
|
<ha-svg-icon path=${mdiClose}></ha-svg-icon>
|
||||||
|
</mwc-icon-button>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@customElement("ha-dialog")
|
@customElement("ha-dialog")
|
||||||
|
@ -1,17 +1,28 @@
|
|||||||
import { HaIconButton } from "./ha-icon-button";
|
import { LitElement, property, TemplateResult, html } from "lit-element";
|
||||||
|
import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
|
||||||
|
import "@material/mwc-icon-button/mwc-icon-button";
|
||||||
|
import "./ha-svg-icon";
|
||||||
|
|
||||||
|
export class HaIconButtonArrowPrev extends LitElement {
|
||||||
|
@property() private _icon = mdiArrowLeft;
|
||||||
|
|
||||||
export class HaIconButtonArrowPrev extends HaIconButton {
|
|
||||||
public connectedCallback() {
|
public connectedCallback() {
|
||||||
super.connectedCallback();
|
super.connectedCallback();
|
||||||
|
|
||||||
// wait to check for direction since otherwise direction is wrong even though top level is RTL
|
// wait to check for direction since otherwise direction is wrong even though top level is RTL
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.icon =
|
this._icon =
|
||||||
window.getComputedStyle(this).direction === "ltr"
|
window.getComputedStyle(this).direction === "ltr"
|
||||||
? "hass:arrow-left"
|
? mdiArrowLeft
|
||||||
: "hass:arrow-right";
|
: mdiArrowRight;
|
||||||
}, 100);
|
}, 100);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
protected render(): TemplateResult {
|
||||||
|
return html`<mwc-icon-button>
|
||||||
|
<ha-svg-icon .path=${this._icon}></ha-svg-icon>
|
||||||
|
</mwc-icon-button> `;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
|
@ -31,12 +31,14 @@ class HaLabelBadge extends LitElement {
|
|||||||
big: Boolean(this.value && this.value.length > 4),
|
big: Boolean(this.value && this.value.length > 4),
|
||||||
})}"
|
})}"
|
||||||
>
|
>
|
||||||
${this.icon && !this.value && !this.image
|
<slot>
|
||||||
? html` <ha-icon .icon="${this.icon}"></ha-icon> `
|
${this.icon && !this.value && !this.image
|
||||||
: ""}
|
? html` <ha-icon .icon=${this.icon}></ha-icon> `
|
||||||
${this.value && !this.image
|
: ""}
|
||||||
? html` <span>${this.value}</span> `
|
${this.value && !this.image
|
||||||
: ""}
|
? html` <span>${this.value}</span> `
|
||||||
|
: ""}
|
||||||
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
${this.label
|
${this.label
|
||||||
? html`
|
? html`
|
||||||
|
@ -13,6 +13,7 @@ import { computeDomain } from "../common/entity/compute_domain";
|
|||||||
import { subscribeNotifications } from "../data/persistent_notification";
|
import { subscribeNotifications } from "../data/persistent_notification";
|
||||||
import { HomeAssistant } from "../types";
|
import { HomeAssistant } from "../types";
|
||||||
import "./ha-icon-button";
|
import "./ha-icon-button";
|
||||||
|
import { mdiMenu } from "@mdi/js";
|
||||||
|
|
||||||
@customElement("ha-menu-button")
|
@customElement("ha-menu-button")
|
||||||
class HaMenuButton extends LitElement {
|
class HaMenuButton extends LitElement {
|
||||||
@ -55,11 +56,12 @@ class HaMenuButton extends LitElement {
|
|||||||
(entityId) => computeDomain(entityId) === "configurator"
|
(entityId) => computeDomain(entityId) === "configurator"
|
||||||
));
|
));
|
||||||
return html`
|
return html`
|
||||||
<ha-icon-button
|
<mwc-icon-button
|
||||||
aria-label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
|
aria-label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
|
||||||
icon="hass:menu"
|
|
||||||
@click=${this._toggleMenu}
|
@click=${this._toggleMenu}
|
||||||
></ha-icon-button>
|
>
|
||||||
|
<ha-svg-icon path=${mdiMenu}></ha-svg-icon>
|
||||||
|
</mwc-icon-button>
|
||||||
${hasNotifications ? html` <div class="dot"></div> ` : ""}
|
${hasNotifications ? html` <div class="dot"></div> ` : ""}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
@ -133,8 +135,8 @@ class HaMenuButton extends LitElement {
|
|||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color);
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
top: 5px;
|
top: 9px;
|
||||||
right: 2px;
|
right: 7px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2px solid var(--app-header-background-color);
|
border: 2px solid var(--app-header-background-color);
|
||||||
}
|
}
|
||||||
|
@ -16,6 +16,7 @@ import { navigate } from "../common/navigate";
|
|||||||
import "../components/ha-menu-button";
|
import "../components/ha-menu-button";
|
||||||
import "../components/ha-icon-button-arrow-prev";
|
import "../components/ha-icon-button-arrow-prev";
|
||||||
import { HomeAssistant, Route } from "../types";
|
import { HomeAssistant, Route } from "../types";
|
||||||
|
import "../components/ha-svg-icon";
|
||||||
import "../components/ha-icon";
|
import "../components/ha-icon";
|
||||||
|
|
||||||
export interface PageNavigation {
|
export interface PageNavigation {
|
||||||
@ -26,6 +27,7 @@ export interface PageNavigation {
|
|||||||
core?: boolean;
|
core?: boolean;
|
||||||
advancedOnly?: boolean;
|
advancedOnly?: boolean;
|
||||||
icon?: string;
|
icon?: string;
|
||||||
|
iconPath?: string;
|
||||||
info?: any;
|
info?: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -33,12 +35,12 @@ export interface PageNavigation {
|
|||||||
class HassTabsSubpage extends LitElement {
|
class HassTabsSubpage extends LitElement {
|
||||||
@property() public hass!: HomeAssistant;
|
@property() public hass!: HomeAssistant;
|
||||||
|
|
||||||
|
@property({ type: Boolean }) public hassio = false;
|
||||||
|
|
||||||
@property({ type: String, attribute: "back-path" }) public backPath?: string;
|
@property({ type: String, attribute: "back-path" }) public backPath?: string;
|
||||||
|
|
||||||
@property() public backCallback?: () => void;
|
@property() public backCallback?: () => void;
|
||||||
|
|
||||||
@property({ type: Boolean }) public hassio = false;
|
|
||||||
|
|
||||||
@property({ type: Boolean, attribute: "main-page" }) public mainPage = false;
|
@property({ type: Boolean, attribute: "main-page" }) public mainPage = false;
|
||||||
|
|
||||||
@property() public route!: Route;
|
@property() public route!: Route;
|
||||||
@ -77,7 +79,9 @@ class HassTabsSubpage extends LitElement {
|
|||||||
.path=${page.path}
|
.path=${page.path}
|
||||||
>
|
>
|
||||||
${this.narrow
|
${this.narrow
|
||||||
? html` <ha-icon .icon=${page.icon}></ha-icon> `
|
? page.iconPath
|
||||||
|
? html`<ha-svg-icon .path=${page.iconPath}></ha-svg-icon>`
|
||||||
|
: html`<ha-icon .icon=${page.icon}></ha-icon>`
|
||||||
: ""}
|
: ""}
|
||||||
${!this.narrow || page === activeTab
|
${!this.narrow || page === activeTab
|
||||||
? html`
|
? html`
|
||||||
@ -119,8 +123,8 @@ class HassTabsSubpage extends LitElement {
|
|||||||
${this.mainPage
|
${this.mainPage
|
||||||
? html`
|
? html`
|
||||||
<ha-menu-button
|
<ha-menu-button
|
||||||
.hass=${this.hass}
|
|
||||||
.hassio=${this.hassio}
|
.hassio=${this.hassio}
|
||||||
|
.hass=${this.hass}
|
||||||
.narrow=${this.narrow}
|
.narrow=${this.narrow}
|
||||||
></ha-menu-button>
|
></ha-menu-button>
|
||||||
`
|
`
|
||||||
@ -174,6 +178,10 @@ class HassTabsSubpage extends LitElement {
|
|||||||
background-color: var(--primary-background-color);
|
background-color: var(--primary-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ha-menu-button {
|
||||||
|
margin-right: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
.toolbar {
|
.toolbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -21,6 +21,7 @@ export const renderMarkdown = (
|
|||||||
whiteListNormal = {
|
whiteListNormal = {
|
||||||
...filterXSS.whiteList,
|
...filterXSS.whiteList,
|
||||||
"ha-icon": ["icon"],
|
"ha-icon": ["icon"],
|
||||||
|
"ha-svg-icon": ["path"],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user