Finish up config changes (#10710)
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
parent
6177d2b416
commit
43011179eb
|
@ -111,7 +111,7 @@ export class HassioUpdate extends LitElement {
|
|||
</div>
|
||||
<div class="card-actions">
|
||||
<a href="/hassio/update-available/${key}">
|
||||
<mwc-button .label=${this.supervisor.localize("common.review")}>
|
||||
<mwc-button .label=${this.supervisor.localize("common.show")}>
|
||||
</mwc-button>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
@ -71,7 +71,7 @@ class HassioCoreInfo extends LitElement {
|
|||
? html`
|
||||
<a href="/hassio/update-available/core">
|
||||
<mwc-button
|
||||
.label=${this.supervisor.localize("common.review")}
|
||||
.label=${this.supervisor.localize("common.show")}
|
||||
>
|
||||
</mwc-button>
|
||||
</a>
|
||||
|
|
|
@ -110,7 +110,7 @@ class HassioHostInfo extends LitElement {
|
|||
? html`
|
||||
<a href="/hassio/update-available/os">
|
||||
<mwc-button
|
||||
.label=${this.supervisor.localize("common.review")}
|
||||
.label=${this.supervisor.localize("common.show")}
|
||||
>
|
||||
</mwc-button>
|
||||
</a>
|
||||
|
|
|
@ -81,7 +81,7 @@ class HassioSupervisorInfo extends LitElement {
|
|||
? html`
|
||||
<a href="/hassio/update-available/supervisor">
|
||||
<mwc-button
|
||||
.label=${this.supervisor.localize("common.review")}
|
||||
.label=${this.supervisor.localize("common.show")}
|
||||
>
|
||||
</mwc-button>
|
||||
</a>
|
||||
|
|
|
@ -310,13 +310,13 @@ class UpdateAvailableCard extends LitElement {
|
|||
let backupArgs: HassioPartialBackupCreateParams;
|
||||
if (this._updateType === "addon") {
|
||||
backupArgs = {
|
||||
name: `addon_${this._updateType}_${this._addonInfo?.version}`,
|
||||
addons: [this._updateType!],
|
||||
name: `addon_${this.addonSlug}_${this._version}`,
|
||||
addons: [this.addonSlug!],
|
||||
homeassistant: false,
|
||||
};
|
||||
} else {
|
||||
backupArgs = {
|
||||
name: `${this._updateType}_${this._addonInfo?.version}`,
|
||||
name: `${this._updateType}_${this._version}`,
|
||||
folders: ["homeassistant"],
|
||||
homeassistant: true,
|
||||
};
|
||||
|
@ -334,7 +334,7 @@ class UpdateAvailableCard extends LitElement {
|
|||
this._action = "update";
|
||||
try {
|
||||
if (this._updateType === "addon") {
|
||||
await updateHassioAddon(this.hass, this._updateType!);
|
||||
await updateHassioAddon(this.hass, this.addonSlug!);
|
||||
} else if (this._updateType === "core") {
|
||||
await updateCore(this.hass);
|
||||
} else if (this._updateType === "os") {
|
||||
|
|
|
@ -7,7 +7,13 @@ export const canShowPage = (hass: HomeAssistant, page: PageNavigation) =>
|
|||
!hideAdvancedPage(hass, page);
|
||||
|
||||
const isLoadedIntegration = (hass: HomeAssistant, page: PageNavigation) =>
|
||||
!page.component || isComponentLoaded(hass, page.component);
|
||||
page.component
|
||||
? isComponentLoaded(hass, page.component)
|
||||
: page.components
|
||||
? page.components.some((integration) =>
|
||||
isComponentLoaded(hass, integration)
|
||||
)
|
||||
: true;
|
||||
const isCore = (page: PageNavigation) => page.core;
|
||||
const isAdvancedPage = (page: PageNavigation) => page.advancedOnly;
|
||||
const userWantsAdvanced = (hass: HomeAssistant) => hass.userData?.showAdvanced;
|
||||
|
|
|
@ -13,6 +13,8 @@ class HassSubpage extends LitElement {
|
|||
|
||||
@property({ type: Boolean, attribute: "main-page" }) public mainPage = false;
|
||||
|
||||
@property({ type: String, attribute: "back-path" }) public backPath?: string;
|
||||
|
||||
@property({ type: Boolean, reflect: true }) public narrow = false;
|
||||
|
||||
@property({ type: Boolean }) public supervisor = false;
|
||||
|
@ -31,6 +33,14 @@ class HassSubpage extends LitElement {
|
|||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
`
|
||||
: this.backPath
|
||||
? html`
|
||||
<a href=${this.backPath}>
|
||||
<ha-icon-button-arrow-prev
|
||||
.hass=${this.hass}
|
||||
></ha-icon-button-arrow-prev>
|
||||
</a>
|
||||
`
|
||||
: html`
|
||||
<ha-icon-button-arrow-prev
|
||||
.hass=${this.hass}
|
||||
|
@ -80,6 +90,10 @@ class HassSubpage extends LitElement {
|
|||
border-bottom: var(--app-header-border-bottom, none);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.toolbar a {
|
||||
color: var(--app-header-text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ha-menu-button,
|
||||
ha-icon-button-arrow-prev,
|
||||
|
|
|
@ -24,6 +24,7 @@ export interface PageNavigation {
|
|||
path: string;
|
||||
translationKey?: string;
|
||||
component?: string;
|
||||
components?: string[];
|
||||
name?: string;
|
||||
core?: boolean;
|
||||
advancedOnly?: boolean;
|
||||
|
|
|
@ -135,7 +135,7 @@ class HaConfigAreaPage extends LitElement {
|
|||
<hass-tabs-subpage
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.tabs=${configSections.integrations}
|
||||
.tabs=${configSections.devices}
|
||||
.route=${this.route}
|
||||
>
|
||||
${this.narrow
|
||||
|
|
|
@ -89,7 +89,7 @@ export class HaConfigAreasDashboard extends LitElement {
|
|||
.narrow=${this.narrow}
|
||||
.isWide=${this.isWide}
|
||||
back-path="/config"
|
||||
.tabs=${configSections.integrations}
|
||||
.tabs=${configSections.devices}
|
||||
.route=${this.route}
|
||||
>
|
||||
<ha-icon-button
|
||||
|
|
|
@ -114,7 +114,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
|||
.narrow=${this.narrow}
|
||||
.route=${this.route}
|
||||
.backCallback=${this._backTapped}
|
||||
.tabs=${configSections.automation}
|
||||
.tabs=${configSections.automations}
|
||||
>
|
||||
<ha-button-menu
|
||||
corner="BOTTOM_START"
|
||||
|
|
|
@ -225,7 +225,7 @@ class HaAutomationPicker extends LitElement {
|
|||
back-path="/config"
|
||||
id="entity_id"
|
||||
.route=${this.route}
|
||||
.tabs=${configSections.automation}
|
||||
.tabs=${configSections.automations}
|
||||
.activeFilters=${this._activeFilters}
|
||||
.columns=${this._columns(this.narrow, this.hass.locale)}
|
||||
.data=${this._automations(this.automations, this._filteredAutomations)}
|
||||
|
|
|
@ -112,7 +112,7 @@ export class HaAutomationTrace extends LitElement {
|
|||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.route=${this.route}
|
||||
.tabs=${configSections.automation}
|
||||
.tabs=${configSections.automations}
|
||||
>
|
||||
${this.narrow
|
||||
? html`<span slot="header">${title}</span>
|
||||
|
|
|
@ -224,7 +224,7 @@ class HaBlueprintOverview extends LitElement {
|
|||
.narrow=${this.narrow}
|
||||
back-path="/config"
|
||||
.route=${this.route}
|
||||
.tabs=${configSections.automation}
|
||||
.tabs=${configSections.automations}
|
||||
.columns=${this._columns(this.narrow, this.hass.language)}
|
||||
.data=${this._processedBlueprints(this.blueprints)}
|
||||
id="entity_id"
|
||||
|
|
|
@ -50,7 +50,7 @@ export class CloudLogin extends LitElement {
|
|||
header="Home Assistant Cloud"
|
||||
>
|
||||
<div class="content">
|
||||
<ha-config-section isWide=${this.isWide}>
|
||||
<ha-config-section .isWide=${this.isWide}>
|
||||
<span slot="header">Home Assistant Cloud</span>
|
||||
<div slot="introduction">
|
||||
<p>
|
||||
|
|
|
@ -15,6 +15,7 @@ import { HomeAssistant } from "../../../types";
|
|||
import "../ha-config-section";
|
||||
import { configSections } from "../ha-panel-config";
|
||||
import "./ha-config-navigation";
|
||||
import { SupervisorAvailableUpdates } from "../../../data/supervisor/supervisor";
|
||||
|
||||
@customElement("ha-config-dashboard")
|
||||
class HaConfigDashboard extends LitElement {
|
||||
|
@ -27,74 +28,11 @@ class HaConfigDashboard extends LitElement {
|
|||
|
||||
@property() public cloudStatus?: CloudStatus;
|
||||
|
||||
@property() public supervisorUpdates?: SupervisorAvailableUpdates[] | null;
|
||||
|
||||
@property() public showAdvanced!: boolean;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
const content = html` <ha-config-section
|
||||
.narrow=${this.narrow}
|
||||
.isWide=${this.isWide}
|
||||
>
|
||||
<div slot="header">${this.hass.localize("ui.panel.config.header")}</div>
|
||||
|
||||
<div class="intro" slot="introduction">
|
||||
${this.hass.localize("ui.panel.config.introduction")}
|
||||
</div>
|
||||
|
||||
${isComponentLoaded(this.hass, "hassio")
|
||||
? html`<ha-config-updates
|
||||
.hass=${this.hass}
|
||||
slot="introduction"
|
||||
></ha-config-updates>`
|
||||
: ""}
|
||||
${this.cloudStatus && isComponentLoaded(this.hass, "cloud")
|
||||
? html`
|
||||
<ha-card>
|
||||
<ha-config-navigation
|
||||
.hass=${this.hass}
|
||||
.showAdvanced=${this.showAdvanced}
|
||||
.pages=${[
|
||||
{
|
||||
component: "cloud",
|
||||
path: "/config/cloud",
|
||||
name: "Home Assistant Cloud",
|
||||
info: this.cloudStatus,
|
||||
iconPath: mdiCloudLock,
|
||||
iconColor: "#3B808E",
|
||||
},
|
||||
]}
|
||||
></ha-config-navigation>
|
||||
</ha-card>
|
||||
`
|
||||
: ""}
|
||||
${Object.values(configSections).map(
|
||||
(section) => html`
|
||||
<ha-card>
|
||||
<ha-config-navigation
|
||||
.hass=${this.hass}
|
||||
.showAdvanced=${this.showAdvanced}
|
||||
.pages=${section}
|
||||
></ha-config-navigation>
|
||||
</ha-card>
|
||||
`
|
||||
)}
|
||||
${!this.showAdvanced
|
||||
? html`
|
||||
<div class="promo-advanced">
|
||||
${this.hass.localize("ui.panel.config.advanced_mode.hint_enable")}
|
||||
<a href="/profile"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.advanced_mode.link_profile_page"
|
||||
)}</a
|
||||
>.
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
</ha-config-section>`;
|
||||
|
||||
if (!this.narrow && this.hass.dockedSidebar !== "always_hidden") {
|
||||
return content;
|
||||
}
|
||||
|
||||
return html`
|
||||
<ha-app-layout>
|
||||
<app-header fixed slot="header">
|
||||
|
@ -103,10 +41,72 @@ class HaConfigDashboard extends LitElement {
|
|||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
<div main-title>${this.hass.localize("panel.config")}</div>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
${content}
|
||||
<ha-config-section
|
||||
.narrow=${this.narrow}
|
||||
.isWide=${this.isWide}
|
||||
full-width
|
||||
>
|
||||
${isComponentLoaded(this.hass, "hassio") &&
|
||||
this.supervisorUpdates === undefined
|
||||
? html``
|
||||
: html`${this.supervisorUpdates !== null
|
||||
? html`<ha-card>
|
||||
<ha-config-updates
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.supervisorUpdates=${this.supervisorUpdates}
|
||||
></ha-config-updates>
|
||||
</ha-card>`
|
||||
: ""}
|
||||
<ha-card>
|
||||
${this.narrow && this.supervisorUpdates !== null
|
||||
? html`<div class="title">
|
||||
${this.hass.localize("panel.config")}
|
||||
</div>`
|
||||
: ""}
|
||||
${this.cloudStatus && isComponentLoaded(this.hass, "cloud")
|
||||
? html`
|
||||
<ha-config-navigation
|
||||
.hass=${this.hass}
|
||||
.showAdvanced=${this.showAdvanced}
|
||||
.pages=${[
|
||||
{
|
||||
component: "cloud",
|
||||
path: "/config/cloud",
|
||||
name: "Home Assistant Cloud",
|
||||
info: this.cloudStatus,
|
||||
iconPath: mdiCloudLock,
|
||||
iconColor: "#3B808E",
|
||||
},
|
||||
]}
|
||||
></ha-config-navigation>
|
||||
`
|
||||
: ""}
|
||||
<ha-config-navigation
|
||||
.hass=${this.hass}
|
||||
.showAdvanced=${this.showAdvanced}
|
||||
.pages=${configSections.dashboard}
|
||||
></ha-config-navigation>
|
||||
</ha-card>
|
||||
${!this.showAdvanced
|
||||
? html`
|
||||
<div class="promo-advanced">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.advanced_mode.hint_enable"
|
||||
)}
|
||||
<a href="/profile"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.advanced_mode.link_profile_page"
|
||||
)}</a
|
||||
>.
|
||||
</div>
|
||||
`
|
||||
: ""}`}
|
||||
</ha-config-section>
|
||||
</ha-app-layout>
|
||||
`;
|
||||
}
|
||||
|
@ -116,16 +116,16 @@ class HaConfigDashboard extends LitElement {
|
|||
haStyle,
|
||||
css`
|
||||
app-header {
|
||||
--app-header-background-color: var(--primary-background-color);
|
||||
border-bottom: var(--app-header-border-bottom);
|
||||
--header-height: 55px;
|
||||
}
|
||||
ha-card:last-child {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
ha-config-section {
|
||||
margin-top: -12px;
|
||||
}
|
||||
:host([narrow]) ha-config-section {
|
||||
margin-top: -20px;
|
||||
margin: auto;
|
||||
margin-top: -32px;
|
||||
max-width: 600px;
|
||||
}
|
||||
ha-card {
|
||||
overflow: hidden;
|
||||
|
@ -134,6 +134,11 @@ class HaConfigDashboard extends LitElement {
|
|||
text-decoration: none;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
.title {
|
||||
font-size: 16px;
|
||||
padding: 16px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.promo-advanced {
|
||||
text-align: center;
|
||||
color: var(--secondary-text-color);
|
||||
|
@ -142,8 +147,13 @@ class HaConfigDashboard extends LitElement {
|
|||
.promo-advanced a {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
.intro {
|
||||
margin-bottom: 24px;
|
||||
:host([narrow]) ha-card {
|
||||
background-color: var(--primary-background-color);
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
:host([narrow]) ha-config-section {
|
||||
margin-top: -42px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
|
|
@ -2,23 +2,13 @@ import "@material/mwc-button/mwc-button";
|
|||
import { mdiPackageVariant } from "@mdi/js";
|
||||
import "@polymer/paper-item/paper-icon-item";
|
||||
import "@polymer/paper-item/paper-item-body";
|
||||
import {
|
||||
css,
|
||||
CSSResultGroup,
|
||||
html,
|
||||
LitElement,
|
||||
PropertyValues,
|
||||
TemplateResult,
|
||||
} from "lit";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import "../../../components/ha-alert";
|
||||
import "../../../components/ha-logo-svg";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import { extractApiErrorMessage } from "../../../data/hassio/common";
|
||||
import {
|
||||
fetchSupervisorAvailableUpdates,
|
||||
SupervisorAvailableUpdates,
|
||||
} from "../../../data/supervisor/supervisor";
|
||||
import { SupervisorAvailableUpdates } from "../../../data/supervisor/supervisor";
|
||||
import { buttonLinkStyle } from "../../../resources/styles";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
|
||||
export const SUPERVISOR_UPDATE_NAMES = {
|
||||
|
@ -31,88 +21,117 @@ export const SUPERVISOR_UPDATE_NAMES = {
|
|||
class HaConfigUpdates extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@state() private _supervisorUpdates?: SupervisorAvailableUpdates[];
|
||||
@property({ type: Boolean }) public narrow!: boolean;
|
||||
|
||||
@state() private _error?: string;
|
||||
@property({ attribute: false })
|
||||
public supervisorUpdates?: SupervisorAvailableUpdates[] | null;
|
||||
|
||||
protected firstUpdated(changedProps: PropertyValues): void {
|
||||
super.firstUpdated(changedProps);
|
||||
this._loadSupervisorUpdates();
|
||||
}
|
||||
@state() private _showAll = false;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (!this.supervisorUpdates) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
const updates =
|
||||
this._showAll || this.supervisorUpdates.length <= 3
|
||||
? this.supervisorUpdates
|
||||
: this.supervisorUpdates.slice(0, 2);
|
||||
|
||||
return html`
|
||||
${this._error
|
||||
? html`<ha-alert
|
||||
.title=${this.hass.localize(
|
||||
"ui.panel.config.updates.unable_to_fetch"
|
||||
)}
|
||||
alert-type="error"
|
||||
>
|
||||
${this._error}
|
||||
</ha-alert>`
|
||||
: ""}
|
||||
${this._supervisorUpdates?.map(
|
||||
<div class="title">
|
||||
${this.hass.localize("ui.panel.config.updates.title", {
|
||||
count: this.supervisorUpdates.length,
|
||||
})}
|
||||
</div>
|
||||
${updates.map(
|
||||
(update) => html`
|
||||
<ha-alert
|
||||
.title=${update.update_type === "addon"
|
||||
? update.name
|
||||
: SUPERVISOR_UPDATE_NAMES[update.update_type!]}
|
||||
>
|
||||
<span slot="icon" class="icon">
|
||||
<paper-icon-item>
|
||||
<span slot="item-icon" class="icon">
|
||||
${update.update_type === "addon"
|
||||
? update.icon
|
||||
? html`<img src="/api/hassio${update.icon}" />`
|
||||
: html`<ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon>`
|
||||
: html`<ha-logo-svg></ha-logo-svg>`}
|
||||
</span>
|
||||
${this.hass.localize("ui.panel.config.updates.version_available", {
|
||||
version_available: update.version_latest,
|
||||
})}
|
||||
<a href="/hassio${update.panel_path}" slot="action">
|
||||
<paper-item-body two-line>
|
||||
${update.update_type === "addon"
|
||||
? update.name
|
||||
: SUPERVISOR_UPDATE_NAMES[update.update_type!]}
|
||||
<div secondary>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.updates.version_available",
|
||||
{
|
||||
version_available: update.version_latest,
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</paper-item-body>
|
||||
<a href="/hassio${update.panel_path}">
|
||||
<mwc-button
|
||||
.label=${this.hass.localize("ui.panel.config.updates.review")}
|
||||
.label=${this.hass.localize("ui.panel.config.updates.show")}
|
||||
>
|
||||
</mwc-button>
|
||||
</a>
|
||||
</ha-alert>
|
||||
</paper-icon-item>
|
||||
`
|
||||
)}
|
||||
${!this._showAll && !this.narrow ? html`<div class="divider"></div>` : ""}
|
||||
${!this._showAll && this.supervisorUpdates.length >= 4
|
||||
? html`
|
||||
<button class="link show-all" @click=${this._showAllClicked}>
|
||||
${this.hass.localize("ui.panel.config.updates.show_all_updates")}
|
||||
</button>
|
||||
`
|
||||
: ""}
|
||||
`;
|
||||
}
|
||||
|
||||
private async _loadSupervisorUpdates(): Promise<void> {
|
||||
try {
|
||||
this._supervisorUpdates = await fetchSupervisorAvailableUpdates(
|
||||
this.hass
|
||||
);
|
||||
} catch (err) {
|
||||
this._error = extractApiErrorMessage(err);
|
||||
}
|
||||
private _showAllClicked() {
|
||||
this._showAll = true;
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return css`
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
.icon {
|
||||
display: inline-flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
img,
|
||||
ha-svg-icon,
|
||||
ha-logo-svg {
|
||||
--mdc-icon-size: 32px;
|
||||
max-height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
ha-logo-svg {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
`;
|
||||
static get styles(): CSSResultGroup[] {
|
||||
return [
|
||||
buttonLinkStyle,
|
||||
css`
|
||||
.title {
|
||||
font-size: 16px;
|
||||
padding: 16px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
.icon {
|
||||
display: inline-flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
img,
|
||||
ha-svg-icon,
|
||||
ha-logo-svg {
|
||||
--mdc-icon-size: 32px;
|
||||
max-height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
ha-logo-svg {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
button.show-all {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
margin: 8px 16px;
|
||||
}
|
||||
.divider::before {
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 1px;
|
||||
background-color: var(--divider-color);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -218,7 +218,7 @@ export class HaConfigDevicePage extends LitElement {
|
|||
<hass-tabs-subpage
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.tabs=${configSections.integrations}
|
||||
.tabs=${configSections.devices}
|
||||
.route=${this.route}
|
||||
>
|
||||
${
|
||||
|
|
|
@ -375,7 +375,7 @@ export class HaConfigDeviceDashboard extends LitElement {
|
|||
.backPath=${this._searchParms.has("historyBack")
|
||||
? undefined
|
||||
: "/config"}
|
||||
.tabs=${configSections.integrations}
|
||||
.tabs=${configSections.devices}
|
||||
.route=${this.route}
|
||||
.activeFilters=${activeFilters}
|
||||
.numHidden=${this._numHiddenDevices}
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import "../../../layouts/hass-error-screen";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import {
|
||||
|
@ -9,11 +10,10 @@ import {
|
|||
getEnergyPreferences,
|
||||
} from "../../../data/energy";
|
||||
import "../../../layouts/hass-loading-screen";
|
||||
import "../../../layouts/hass-tabs-subpage";
|
||||
import "../../../layouts/hass-subpage";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import type { HomeAssistant, Route } from "../../../types";
|
||||
import "../../../components/ha-alert";
|
||||
import { configSections } from "../ha-panel-config";
|
||||
import "./components/ha-energy-device-settings";
|
||||
import "./components/ha-energy-grid-settings";
|
||||
import "./components/ha-energy-solar-settings";
|
||||
|
@ -68,14 +68,13 @@ class HaConfigEnergy extends LitElement {
|
|||
}
|
||||
|
||||
return html`
|
||||
<hass-tabs-subpage
|
||||
<hass-subpage
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.backPath=${this._searchParms.has("historyBack")
|
||||
? undefined
|
||||
: "/config"}
|
||||
.route=${this.route}
|
||||
.tabs=${configSections.experiences}
|
||||
.header=${this.hass.localize("ui.panel.config.energy.caption")}
|
||||
>
|
||||
<ha-alert>
|
||||
${this.hass.localize("ui.panel.config.energy.new_device_info")}
|
||||
|
@ -113,7 +112,7 @@ class HaConfigEnergy extends LitElement {
|
|||
@value-changed=${this._prefsChanged}
|
||||
></ha-energy-device-settings>
|
||||
</div>
|
||||
</hass-tabs-subpage>
|
||||
</hass-subpage>
|
||||
`;
|
||||
}
|
||||
|
||||
|
|
|
@ -478,7 +478,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
|
|||
? undefined
|
||||
: "/config"}
|
||||
.route=${this.route}
|
||||
.tabs=${configSections.integrations}
|
||||
.tabs=${configSections.devices}
|
||||
.columns=${this._columns(
|
||||
this.narrow,
|
||||
this.hass.language,
|
||||
|
|
|
@ -8,11 +8,15 @@ export class HaConfigSection extends LitElement {
|
|||
|
||||
@property({ type: Boolean }) public vertical = false;
|
||||
|
||||
@property({ type: Boolean, attribute: "full-width" })
|
||||
public fullWidth = false;
|
||||
|
||||
protected render() {
|
||||
return html`
|
||||
<div
|
||||
class="content ${classMap({
|
||||
narrow: !this.isWide,
|
||||
"full-width": this.fullWidth,
|
||||
})}"
|
||||
>
|
||||
<div class="header"><slot name="header"></slot></div>
|
||||
|
@ -111,6 +115,14 @@ export class HaConfigSection extends LitElement {
|
|||
margin-right: 0;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.full-width .layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import {
|
||||
mdiAccount,
|
||||
mdiBadgeAccountHorizontal,
|
||||
mdiCog,
|
||||
mdiDevices,
|
||||
mdiHomeAssistant,
|
||||
mdiInformation,
|
||||
|
@ -27,6 +28,10 @@ import { customElement, property, state } from "lit/decorators";
|
|||
import { isComponentLoaded } from "../../common/config/is_component_loaded";
|
||||
import { listenMediaQuery } from "../../common/dom/media_query";
|
||||
import { CloudStatus, fetchCloudStatus } from "../../data/cloud";
|
||||
import {
|
||||
fetchSupervisorAvailableUpdates,
|
||||
SupervisorAvailableUpdates,
|
||||
} from "../../data/supervisor/supervisor";
|
||||
import "../../layouts/hass-loading-screen";
|
||||
import { HassRouterPage, RouterOptions } from "../../layouts/hass-router-page";
|
||||
import { PageNavigation } from "../../layouts/hass-tabs-subpage";
|
||||
|
@ -40,7 +45,82 @@ declare global {
|
|||
}
|
||||
|
||||
export const configSections: { [name: string]: PageNavigation[] } = {
|
||||
integrations: [
|
||||
dashboard: [
|
||||
{
|
||||
path: "/config/integrations",
|
||||
name: "Devices & Services",
|
||||
description: "Integrations, devices, entities and areas",
|
||||
iconPath: mdiDevices,
|
||||
iconColor: "#2D338F",
|
||||
core: true,
|
||||
},
|
||||
{
|
||||
path: "/config/automation",
|
||||
name: "Automations",
|
||||
description: "Automations, bludprints, scenes and scripts",
|
||||
iconPath: mdiRobot,
|
||||
iconColor: "#518C43",
|
||||
components: ["automation", "blueprint", "scene", "script"],
|
||||
},
|
||||
{
|
||||
path: "/config/helpers",
|
||||
name: "Helpers",
|
||||
description: "Elements that help build automations",
|
||||
iconPath: mdiTools,
|
||||
iconColor: "#4D2EA4",
|
||||
core: true,
|
||||
},
|
||||
{
|
||||
path: "/hassio",
|
||||
name: "Add-ons & Backups",
|
||||
description: "Create backups, check logs or reboot your system",
|
||||
iconPath: mdiHomeAssistant,
|
||||
iconColor: "#4084CD",
|
||||
component: "hassio",
|
||||
},
|
||||
{
|
||||
path: "/config/lovelace/dashboards",
|
||||
name: "Dashboards",
|
||||
description: "Create customized sets of cards to control your home",
|
||||
iconPath: mdiViewDashboard,
|
||||
iconColor: "#B1345C",
|
||||
component: "lovelace",
|
||||
},
|
||||
{
|
||||
path: "/config/energy",
|
||||
name: "Energy",
|
||||
description: "Monitor your energy production and consumption",
|
||||
iconPath: mdiLightningBolt,
|
||||
iconColor: "#F1C447",
|
||||
component: "energy",
|
||||
},
|
||||
{
|
||||
path: "/config/tags",
|
||||
name: "Tags",
|
||||
description:
|
||||
"Trigger automations when a NFC tag, QR code, etc. is scanned",
|
||||
iconPath: mdiNfcVariant,
|
||||
iconColor: "#616161",
|
||||
component: "tag",
|
||||
},
|
||||
{
|
||||
path: "/config/person",
|
||||
name: "People & Zones",
|
||||
description: "Manage the people and zones that Home Assistant tracks",
|
||||
iconPath: mdiAccount,
|
||||
iconColor: "#E48629",
|
||||
components: ["person", "zone", "users"],
|
||||
},
|
||||
{
|
||||
path: "/config/core",
|
||||
name: "Settings",
|
||||
description: "Basic settings, server controls, logs and info",
|
||||
iconPath: mdiCog,
|
||||
iconColor: "#4A5963",
|
||||
core: true,
|
||||
},
|
||||
],
|
||||
devices: [
|
||||
{
|
||||
component: "integrations",
|
||||
path: "/config/integrations",
|
||||
|
@ -74,7 +154,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
|
|||
core: true,
|
||||
},
|
||||
],
|
||||
automation: [
|
||||
automations: [
|
||||
{
|
||||
component: "blueprint",
|
||||
path: "/config/blueprint",
|
||||
|
@ -114,7 +194,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
|
|||
core: true,
|
||||
},
|
||||
],
|
||||
experiences: [
|
||||
tags: [
|
||||
{
|
||||
component: "tag",
|
||||
path: "/config/tags",
|
||||
|
@ -122,6 +202,8 @@ export const configSections: { [name: string]: PageNavigation[] } = {
|
|||
iconPath: mdiNfcVariant,
|
||||
iconColor: "#616161",
|
||||
},
|
||||
],
|
||||
energy: [
|
||||
{
|
||||
component: "energy",
|
||||
path: "/config/energy",
|
||||
|
@ -335,6 +417,8 @@ class HaPanelConfig extends HassRouterPage {
|
|||
|
||||
@state() private _cloudStatus?: CloudStatus;
|
||||
|
||||
@state() private _supervisorUpdates?: SupervisorAvailableUpdates[] | null;
|
||||
|
||||
private _listeners: Array<() => void> = [];
|
||||
|
||||
public connectedCallback() {
|
||||
|
@ -364,6 +448,11 @@ class HaPanelConfig extends HassRouterPage {
|
|||
if (isComponentLoaded(this.hass, "cloud")) {
|
||||
this._updateCloudStatus();
|
||||
}
|
||||
if (isComponentLoaded(this.hass, "hassio")) {
|
||||
this._loadSupervisorUpdates();
|
||||
} else {
|
||||
this._supervisorUpdates = null;
|
||||
}
|
||||
this.addEventListener("ha-refresh-cloud-status", () =>
|
||||
this._updateCloudStatus()
|
||||
);
|
||||
|
@ -394,6 +483,7 @@ class HaPanelConfig extends HassRouterPage {
|
|||
isWide,
|
||||
narrow: this.narrow,
|
||||
cloudStatus: this._cloudStatus,
|
||||
supervisorUpdates: this._supervisorUpdates,
|
||||
});
|
||||
} else {
|
||||
el.route = this.routeTail;
|
||||
|
@ -402,6 +492,7 @@ class HaPanelConfig extends HassRouterPage {
|
|||
el.isWide = isWide;
|
||||
el.narrow = this.narrow;
|
||||
el.cloudStatus = this._cloudStatus;
|
||||
el.supervisorUpdates = this._supervisorUpdates;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -419,6 +510,16 @@ class HaPanelConfig extends HassRouterPage {
|
|||
setTimeout(() => this._updateCloudStatus(), 5000);
|
||||
}
|
||||
}
|
||||
|
||||
private async _loadSupervisorUpdates(): Promise<void> {
|
||||
try {
|
||||
this._supervisorUpdates = await fetchSupervisorAvailableUpdates(
|
||||
this.hass
|
||||
);
|
||||
} catch (err) {
|
||||
this._supervisorUpdates = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
|
|
@ -319,7 +319,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
|
|||
.narrow=${this.narrow}
|
||||
back-path="/config"
|
||||
.route=${this.route}
|
||||
.tabs=${configSections.integrations}
|
||||
.tabs=${configSections.devices}
|
||||
>
|
||||
${this.narrow
|
||||
? html`
|
||||
|
|
|
@ -147,7 +147,7 @@ class HaSceneDashboard extends LitElement {
|
|||
.narrow=${this.narrow}
|
||||
back-path="/config"
|
||||
.route=${this.route}
|
||||
.tabs=${configSections.automation}
|
||||
.tabs=${configSections.automations}
|
||||
.columns=${this._columns(this.hass.language)}
|
||||
id="entity_id"
|
||||
.data=${this._scenes(this.scenes, this._filteredScenes)}
|
||||
|
|
|
@ -202,7 +202,7 @@ export class HaSceneEditor extends SubscribeMixin(
|
|||
.narrow=${this.narrow}
|
||||
.route=${this.route}
|
||||
.backCallback=${this._backTapped}
|
||||
.tabs=${configSections.automation}
|
||||
.tabs=${configSections.automations}
|
||||
>
|
||||
<ha-button-menu
|
||||
corner="BOTTOM_START"
|
||||
|
|
|
@ -90,7 +90,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
|||
.narrow=${this.narrow}
|
||||
.route=${this.route}
|
||||
.backCallback=${this._backTapped}
|
||||
.tabs=${configSections.automation}
|
||||
.tabs=${configSections.automations}
|
||||
>
|
||||
<ha-button-menu
|
||||
corner="BOTTOM_START"
|
||||
|
|
|
@ -174,7 +174,7 @@ class HaScriptPicker extends LitElement {
|
|||
.narrow=${this.narrow}
|
||||
back-path="/config"
|
||||
.route=${this.route}
|
||||
.tabs=${configSections.automation}
|
||||
.tabs=${configSections.automations}
|
||||
.columns=${this._columns(this.narrow, this.hass.locale)}
|
||||
.data=${this._scripts(this.scripts, this._filteredScripts)}
|
||||
.activeFilters=${this._activeFilters}
|
||||
|
|
|
@ -108,7 +108,7 @@ export class HaScriptTrace extends LitElement {
|
|||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.route=${this.route}
|
||||
.tabs=${configSections.automation}
|
||||
.tabs=${configSections.automations}
|
||||
>
|
||||
${this.narrow
|
||||
? html`<span slot="header"> ${title} </span>
|
||||
|
|
|
@ -180,7 +180,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
|
|||
.narrow=${this.narrow}
|
||||
back-path="/config"
|
||||
.route=${this.route}
|
||||
.tabs=${configSections.experiences}
|
||||
.tabs=${configSections.tags}
|
||||
.columns=${this._columns(
|
||||
this.narrow,
|
||||
this._canWriteTags,
|
||||
|
|
|
@ -915,7 +915,6 @@
|
|||
},
|
||||
"config": {
|
||||
"header": "Configure Home Assistant",
|
||||
"introduction": "In this view it is possible to configure your components and Home Assistant. Not everything is possible to configure from the UI yet, but we're working on it.",
|
||||
"advanced_mode": {
|
||||
"hint_enable": "Missing config options? Enable advanced mode on",
|
||||
"link_profile_page": "your profile page"
|
||||
|
@ -927,9 +926,11 @@
|
|||
"learn_more": "Learn more"
|
||||
},
|
||||
"updates": {
|
||||
"title": "{count} {count, plural,\n one {update}\n other {updates}\n}",
|
||||
"unable_to_fetch": "Unable to fetch available updates",
|
||||
"version_available": "Version {version_available} is available",
|
||||
"review": "review"
|
||||
"show_all_updates": "Show all updates",
|
||||
"show": "show"
|
||||
},
|
||||
"areas": {
|
||||
"caption": "Areas",
|
||||
|
@ -4165,7 +4166,7 @@
|
|||
"save": "[%key:ui::common::save%]",
|
||||
"close": "[%key:ui::common::close%]",
|
||||
"menu": "[%key:ui::common::menu%]",
|
||||
"review": "[%key:ui::panel::config::updates::review%]",
|
||||
"show": "[%key:ui::panel::config::updates::show%]",
|
||||
"show_more": "Show more information about this",
|
||||
"update_available": "{count, plural,\n one {Update}\n other {{count} updates}\n} pending",
|
||||
"update": "Update",
|
||||
|
|
Loading…
Reference in New Issue