From 8a6bd04543447bcbf2123444d3077889ec8a7f41 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 30 Mar 2020 16:08:36 +0200 Subject: [PATCH] Add default dashboard selection to profile page (#5360) * Add default dashboard selection to profile page * Comments * Console.bye --- src/components/ha-sidebar.ts | 11 ++- src/data/panel.ts | 17 ++-- src/fake_data/provide_hass.ts | 2 + src/layouts/home-assistant.ts | 4 +- .../dialog-lovelace-dashboard-detail.ts | 19 ++-- .../ha-config-lovelace-dashboards.ts | 6 +- src/panels/profile/ha-panel-profile.ts | 5 ++ src/panels/profile/ha-pick-dashboard-row.ts | 86 +++++++++++++++++++ src/state/connection-mixin.ts | 3 +- src/state/sidebar-mixin.ts | 14 +++ src/translations/en.json | 5 ++ src/types.ts | 1 + src/util/ha-pref-storage.ts | 1 + 13 files changed, 146 insertions(+), 28 deletions(-) create mode 100644 src/panels/profile/ha-pick-dashboard-row.ts diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index dd27336fa8..743037a7ba 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -32,7 +32,7 @@ import { classMap } from "lit-html/directives/class-map"; import { PaperIconItemElement } from "@polymer/paper-item/paper-icon-item"; import { computeRTL } from "../common/util/compute_rtl"; import { compare } from "../common/string/compare"; -import { getDefaultPanelUrlPath, getDefaultPanel } from "../data/panel"; +import { getDefaultPanel } from "../data/panel"; const SHOW_AFTER_SPACER = ["config", "developer-tools", "hassio"]; @@ -87,10 +87,8 @@ const computePanels = (hass: HomeAssistant): [PanelInfo[], PanelInfo[]] => { const beforeSpacer: PanelInfo[] = []; const afterSpacer: PanelInfo[] = []; - const defaultPage = getDefaultPanelUrlPath(); - Object.values(panels).forEach((panel) => { - if (!panel.title || panel.url_path === defaultPage) { + if (!panel.title || panel.url_path === hass.defaultPanel) { return; } (SHOW_AFTER_SPACER.includes(panel.url_path) @@ -143,7 +141,7 @@ class HaSidebar extends LitElement { } } - const defaultPanel = getDefaultPanel(hass.panels); + const defaultPanel = getDefaultPanel(hass); return html`
@@ -297,7 +295,8 @@ class HaSidebar extends LitElement { hass.panelUrl !== oldHass.panelUrl || hass.user !== oldHass.user || hass.localize !== oldHass.localize || - hass.states !== oldHass.states + hass.states !== oldHass.states || + hass.defaultPanel !== oldHass.defaultPanel ); } diff --git a/src/data/panel.ts b/src/data/panel.ts index 079ebe884c..23abea278b 100644 --- a/src/data/panel.ts +++ b/src/data/panel.ts @@ -1,13 +1,20 @@ import { HomeAssistant, PanelInfo } from "../types"; +import { fireEvent } from "../common/dom/fire_event"; /** Panel to show when no panel is picked. */ -const DEFAULT_PANEL = "lovelace"; +export const DEFAULT_PANEL = "lovelace"; -export const getDefaultPanelUrlPath = () => - localStorage.defaultPage || DEFAULT_PANEL; +export const getStorageDefaultPanelUrlPath = () => + localStorage.defaultPanel + ? JSON.parse(localStorage.defaultPanel) + : DEFAULT_PANEL; -export const getDefaultPanel = (panels: HomeAssistant["panels"]) => - panels[localStorage.defaultPage] || panels[DEFAULT_PANEL]; +export const setDefaultPanel = (element: HTMLElement, urlPath: string) => { + fireEvent(element, "hass-default-panel", { defaultPanel: urlPath }); +}; + +export const getDefaultPanel = (hass: HomeAssistant) => + hass.panels[hass.defaultPanel]; export const getPanelTitle = (hass: HomeAssistant): string | undefined => { if (!hass.panels) { diff --git a/src/fake_data/provide_hass.ts b/src/fake_data/provide_hass.ts index d09149b72b..56b33b9b14 100644 --- a/src/fake_data/provide_hass.ts +++ b/src/fake_data/provide_hass.ts @@ -11,6 +11,7 @@ import { HomeAssistant } from "../types"; import { HassEntities } from "home-assistant-js-websocket"; import { getLocalLanguage } from "../util/hass-translation"; import { translationMetadata } from "../resources/translations-metadata"; +import { DEFAULT_PANEL } from "../data/panel"; const ensureArray = (val: T | T[]): T[] => Array.isArray(val) ? val : [val]; @@ -172,6 +173,7 @@ export const provideHass = ( name: "Demo User", }, panelUrl: "lovelace", + defaultPanel: DEFAULT_PANEL, language: localLanguage, selectedLanguage: localLanguage, diff --git a/src/layouts/home-assistant.ts b/src/layouts/home-assistant.ts index 9aebd605dc..2159a47b0a 100644 --- a/src/layouts/home-assistant.ts +++ b/src/layouts/home-assistant.ts @@ -10,7 +10,7 @@ import { registerServiceWorker } from "../util/register-service-worker"; import { Route, HomeAssistant } from "../types"; import { navigate } from "../common/navigate"; import { HassElement } from "../state/hass-element"; -import { getDefaultPanelUrlPath } from "../data/panel"; +import { getStorageDefaultPanelUrlPath } from "../data/panel"; export class HomeAssistantAppEl extends HassElement { @property() private _route?: Route; @@ -86,7 +86,7 @@ export class HomeAssistantAppEl extends HassElement { this._route === undefined && (route.path === "" || route.path === "/") ) { - navigate(window, `/${getDefaultPanelUrlPath()}`, true); + navigate(window, getStorageDefaultPanelUrlPath(), true); return; } diff --git a/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts b/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts index 1fd50e288f..f393113eca 100644 --- a/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts +++ b/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts @@ -19,6 +19,7 @@ import { PolymerChangedEvent } from "../../../../polymer-types"; import { HaSwitch } from "../../../../components/ha-switch"; import { createCloseHeading } from "../../../../components/ha-dialog"; import { haStyleDialog } from "../../../../resources/styles"; +import { setDefaultPanel, DEFAULT_PANEL } from "../../../../data/panel"; @customElement("dialog-lovelace-dashboard-detail") export class DialogLovelaceDashboardDetail extends LitElement { @@ -57,6 +58,7 @@ export class DialogLovelaceDashboardDetail extends LitElement { if (!this._params) { return html``; } + const defaultPanelUrlPath = this.hass.defaultPanel; const urlInvalid = this._params.urlPath !== "lovelace" && !/^[a-zA-Z0-9_-]+-[a-zA-Z0-9_-]+$/.test(this._urlPath); @@ -169,12 +171,9 @@ export class DialogLovelaceDashboardDetail extends LitElement { slot="secondaryAction" @click=${this._toggleDefault} .disabled=${this._params.urlPath === "lovelace" && - (!localStorage.defaultPage || - localStorage.defaultPage === "lovelace")} + defaultPanelUrlPath === "lovelace"} > - ${this._params.urlPath === localStorage.defaultPage || - (this._params.urlPath === "lovelace" && - !localStorage.defaultPage) + ${this._params.urlPath === defaultPanelUrlPath ? this.hass.localize( "ui.panel.config.lovelace.dashboards.detail.remove_default" ) @@ -244,12 +243,10 @@ export class DialogLovelaceDashboardDetail extends LitElement { if (!urlPath) { return; } - if (urlPath === localStorage.defaultPage) { - delete localStorage.defaultPage; - } else { - localStorage.defaultPage = urlPath; - } - location.reload(); + setDefaultPanel( + this, + urlPath === this.hass.defaultPanel ? DEFAULT_PANEL : urlPath + ); } private async _updateDashboard() { diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts index 69f0621b4b..7d05ce4ee7 100644 --- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts +++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts @@ -184,8 +184,8 @@ export class HaConfigLovelaceDashboards extends LitElement { private _getItems = memoize((dashboards: LovelaceDashboard[]) => { const defaultMode = (this.hass.panels?.lovelace ?.config as LovelacePanelConfig).mode; - const isDefault = - !localStorage.defaultPage || localStorage.defaultPage === "lovelace"; + const defaultUrlPath = this.hass.defaultPanel; + const isDefault = defaultUrlPath === "lovelace"; return [ { icon: "hass:view-dashboard", @@ -201,7 +201,7 @@ export class HaConfigLovelaceDashboards extends LitElement { return { filename: "", ...dashboard, - default: localStorage.defaultPage === dashboard.url_path, + default: defaultUrlPath === dashboard.url_path, }; }), ]; diff --git a/src/panels/profile/ha-panel-profile.ts b/src/panels/profile/ha-panel-profile.ts index 8f1443f898..f30509d8a2 100644 --- a/src/panels/profile/ha-panel-profile.ts +++ b/src/panels/profile/ha-panel-profile.ts @@ -20,6 +20,7 @@ import "./ha-long-lived-access-tokens-card"; import "./ha-advanced-mode-row"; import "./ha-pick-language-row"; import "./ha-pick-theme-row"; +import "./ha-pick-dashboard-row"; import "./ha-push-notifications-row"; import "./ha-force-narrow-row"; import "./ha-set-vibrate-row"; @@ -98,6 +99,10 @@ class HaPanelProfile extends LitElement { .narrow=${this.narrow} .hass=${this.hass} > + ${this.hass.dockedSidebar !== "auto" || !this.narrow ? html` + + ${this.hass.localize("ui.panel.profile.dashboard.header")} + + + ${this.hass.localize("ui.panel.profile.dashboard.description")} + + + + default + ${this._dashboards.map((dashboard) => { + if (!this.hass.user!.is_admin && dashboard.require_admin) { + return ""; + } + return html` + ${dashboard.title} + `; + })} + + + + `; + } + + private async _getDashboards() { + this._dashboards = await fetchDashboards(this.hass); + } + + private _dashboardChanged(ev: CustomEvent) { + const urlPath = ev.detail.item.getAttribute("url-path"); + if (!urlPath || urlPath === this.hass.defaultPanel) { + return; + } + setDefaultPanel(this, urlPath); + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-pick-dashboard-row": HaPickDashboardRow; + } +} diff --git a/src/state/connection-mixin.ts b/src/state/connection-mixin.ts index 789df39348..1c8b8b2fa1 100644 --- a/src/state/connection-mixin.ts +++ b/src/state/connection-mixin.ts @@ -21,6 +21,7 @@ import { Constructor, ServiceCallResponse } from "../types"; import { HassBaseEl } from "./hass-base-mixin"; import { broadcastConnectionStatus } from "../data/connection-status"; import { subscribeFrontendUserData } from "../data/frontend"; +import { DEFAULT_PANEL } from "../data/panel"; export const connectionMixin = >( superClass: T @@ -38,7 +39,7 @@ export const connectionMixin = >( services: null as any, user: null as any, panelUrl: (this as any)._panelUrl, - + defaultPanel: DEFAULT_PANEL, language: getLocalLanguage(), selectedLanguage: null, resources: null as any, diff --git a/src/state/sidebar-mixin.ts b/src/state/sidebar-mixin.ts index 456ec7120b..1e08fc7463 100644 --- a/src/state/sidebar-mixin.ts +++ b/src/state/sidebar-mixin.ts @@ -7,15 +7,25 @@ interface DockSidebarParams { dock: HomeAssistant["dockedSidebar"]; } +interface DefaultPanelParams { + defaultPanel: HomeAssistant["defaultPanel"]; +} + declare global { // for fire event interface HASSDomEvents { "hass-dock-sidebar": DockSidebarParams; } + interface HASSDomEvents { + "hass-default-panel": DefaultPanelParams; + } // for add event listener interface HTMLElementEventMap { "hass-dock-sidebar": HASSDomEvent; } + interface HTMLElementEventMap { + "hass-default-panel": HASSDomEvent; + } } export default >(superClass: T) => @@ -26,5 +36,9 @@ export default >(superClass: T) => this._updateHass({ dockedSidebar: ev.detail.dock }); storeState(this.hass!); }); + this.addEventListener("hass-default-panel", (ev) => { + this._updateHass({ defaultPanel: ev.detail.defaultPanel }); + storeState(this.hass!); + }); } }; diff --git a/src/translations/en.json b/src/translations/en.json index 74f55b6c0a..78753b6138 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -2209,6 +2209,11 @@ "link_promo": "Learn about themes", "dropdown_label": "Theme" }, + "dashboard": { + "header": "Dashboard", + "description": "Pick a default dashboard for this device.", + "dropdown_label": "Dashboard" + }, "change_password": { "header": "Change Password", "current_password": "Current Password", diff --git a/src/types.ts b/src/types.ts index 9976999ce9..348577ef0a 100644 --- a/src/types.ts +++ b/src/types.ts @@ -154,6 +154,7 @@ export interface HomeAssistant { vibrate: boolean; dockedSidebar: "docked" | "always_hidden" | "auto"; + defaultPanel: string; moreInfoEntityId: string | null; user?: CurrentUser; userData?: CoreFrontendUserData | null; diff --git a/src/util/ha-pref-storage.ts b/src/util/ha-pref-storage.ts index 0b2ed29f0f..74e0d7f84c 100644 --- a/src/util/ha-pref-storage.ts +++ b/src/util/ha-pref-storage.ts @@ -5,6 +5,7 @@ const STORED_STATE = [ "selectedTheme", "selectedLanguage", "vibrate", + "defaultPanel", ]; const STORAGE = window.localStorage || {};