From f398d497c4f11627af2182b67b697d45f772514c Mon Sep 17 00:00:00 2001 From: ludeeus Date: Wed, 1 Jan 2020 15:42:43 +0000 Subject: [PATCH] Use CustomEvent for location change --- src/HacsFrontend.ts | 133 +++++++++--------- .../buttons/HacsButtonGoToIntegrations.ts | 5 +- src/main.ts | 6 - src/misc/CustomRepositories.ts | 8 +- src/misc/HacsRepositoryMenu.ts | 3 +- src/misc/OviewItemBuilder.ts | 3 +- src/misc/RepositoryBannerNote.ts | 1 - src/panels/repository.ts | 3 +- src/types.ts | 1 + 9 files changed, 76 insertions(+), 87 deletions(-) diff --git a/src/HacsFrontend.ts b/src/HacsFrontend.ts index b49589dd..33f187cf 100644 --- a/src/HacsFrontend.ts +++ b/src/HacsFrontend.ts @@ -7,6 +7,7 @@ import { html, LitElement, property, + PropertyValues, TemplateResult } from "lit-element"; import { HACS, Hacs } from "./Hacs"; @@ -36,10 +37,54 @@ class HacsFrontendBase extends LitElement { @property({ type: Object }) public hass!: HomeAssistant; @property({ type: Object }) public lovelaceconfig: LovelaceConfig; @property({ type: Object }) public route!: Route; - @property() public panel!: string; - @property() public repository: string; - logger = new Logger("frontend"); + public logger = new Logger(); + + attributeChangedCallback(name, oldVal, newVal) { + console.log("attribute change: ", name, newVal); + super.attributeChangedCallback(name, oldVal, newVal); + } + + protected update(changedProperties: PropertyValues): void { + super.update(changedProperties); + this.hacs.logger.info(changedProperties); + } + + public connectedCallback() { + /* I have no idea why this is done, but without it shit breaks */ + super.connectedCallback(); + + /* Create the HACS object */ + this.hacs = new Hacs(this.configuration, this.repositories, this.status); + + /* Add handlers for custom HACS browser events */ + this.addEventListener("hacs-location-change", this.locationChanged); + this.addEventListener("hacs-repository-action", this.RepositoryAction); + this.addEventListener("hacs-onboarding-done", this.onboardingDone); + this.addEventListener("hacs-recreate", this._recreatehacs); + this.addEventListener("hacs-force-reload", this._reload); + + /* "steal" Lovelace elements */ + load_lovelace(); + + /* Backend event subscription */ + this.hass.connection.subscribeEvents(() => this.getConfig(), "hacs/config"); + this.hass.connection.subscribeEvents(() => this.getStatus(), "hacs/status"); + this.hass.connection.subscribeEvents(e => this._reload(e), "hacs/reload"); + this.hass.connection.subscribeEvents( + () => this.getRepos(), + "hacs/repository" + ); + this.hass.connection.subscribeEvents( + () => this.getLovelaceConfig(), + "lovelace_updated" + ); + + /* Reset local storage */ + localStorage.setItem("hacs-search", ""); + localStorage.setItem("hacs-sort", "name-desc"); + } + status: Status; configuration: Configuration; repositories: RepositoryData[]; @@ -58,7 +103,7 @@ class HacsFrontendBase extends LitElement { } private RepositoryAction(ev): void { - console.log(ev.detail); + if (this.configuration.debug) this.hacs.logger.info(ev.detail); const evdata: RepositoryActionData = ev.detail; this.hacs.RepositoryWebSocketAction( this.hass, @@ -68,7 +113,7 @@ class HacsFrontendBase extends LitElement { ); } - public getRepositories(): void { + public getRepos(): void { this.hass.connection .sendMessagePromise({ type: "hacs/repositories" @@ -153,48 +198,14 @@ class HacsFrontendBase extends LitElement { } protected firstUpdated() { - this.addEventListener("hacs-location-change", this.locationChanged); - this.addEventListener("hacs-repository-action", this.RepositoryAction); - this.addEventListener("hacs-onboarding-done", this.onboardingDone); - this.addEventListener("hacs-recreate", this._recreatehacs); - this.addEventListener("hacs-force-reload", this._reload); window.onpopstate = function() { window.location.reload(); }; - localStorage.setItem("hacs-search", ""); - localStorage.setItem("hacs-sort", "name-desc"); - this.panel = this._page; - this.getRepositories(); + this.getRepos(); this.getConfig(); this.getStatus(); this.getCritical(); this.getLovelaceConfig(); - - if (/repository\//i.test(this.route.path)) { - // How fun, this is a repository! - this.repository_view = true; - this.repository = this.route.path.split("/")[2]; - } else this.repository_view = false; - - // "steal" LL elements - load_lovelace(); - - // Event subscription - this.hass.connection.subscribeEvents( - () => this.getRepositories(), - "hacs/repository" - ); - - this.hass.connection.subscribeEvents(() => this.getConfig(), "hacs/config"); - - this.hass.connection.subscribeEvents(() => this.getStatus(), "hacs/status"); - - this.hass.connection.subscribeEvents(e => this._reload(e), "hacs/reload"); - - this.hass.connection.subscribeEvents( - () => this.getLovelaceConfig(), - "lovelace_updated" - ); } _reload(e: any) { @@ -208,11 +219,6 @@ class HacsFrontendBase extends LitElement { if (this.route.path === "" || this.route.path === undefined) { this.hacs.navigate(this, `${this.route.prefix}/installed`); this.route.path = "/installed"; - this.panel = this.route.path.split("/")[1]; - } - if (this.panel === "" || this.panel === undefined) { - this.hacs.navigate(this, `${this.route.prefix}${this.route.path}`); - this.panel = this.route.path.split("/")[1]; } if ( @@ -225,14 +231,6 @@ class HacsFrontendBase extends LitElement { `; } - if (/repository\//i.test(this.route.path)) { - this.repository_view = true; - this.repository = this.route.path.split("/")[2]; - this.panel = "repository"; - } else this.repository_view = false; - - const page = this.panel; - if ( (!this.configuration.onboarding_done && !this.status.disabled) || false @@ -286,7 +284,7 @@ class HacsFrontendBase extends LitElement { autoselect class="tabs" attr-for-selected="page-name" - .selected=${page} + .selected=${this._activeTab} @iron-activate=${this.handlePageSelected} >
diff --git a/src/misc/HacsRepositoryMenu.ts b/src/misc/HacsRepositoryMenu.ts index 8d287d96..e1575897 100644 --- a/src/misc/HacsRepositoryMenu.ts +++ b/src/misc/HacsRepositoryMenu.ts @@ -146,10 +146,9 @@ export class HacsRepositoryMenu extends LitElement { } else { RepositoryWebSocketAction(this.hass, this.repository.id, "hide"); } - this.route.path = `/${this.repository.category}`; this.dispatchEvent( new CustomEvent("hacs-location-change", { - detail: { value: this.route }, + detail: { value: this.repository.category }, bubbles: true, composed: true }) diff --git a/src/misc/OviewItemBuilder.ts b/src/misc/OviewItemBuilder.ts index ddd262cb..ea450250 100644 --- a/src/misc/OviewItemBuilder.ts +++ b/src/misc/OviewItemBuilder.ts @@ -118,10 +118,9 @@ export class OviewItemBuilder { RepoID = item.RepoID; } }); - this.route.path = `/repository/${RepoID}`; this.dispatchEvent( new CustomEvent("hacs-location-change", { - detail: { value: this.route }, + detail: { value: `repository/${RepoID}` }, bubbles: true, composed: true }) diff --git a/src/misc/RepositoryBannerNote.ts b/src/misc/RepositoryBannerNote.ts index 5bb3e872..f608d7c9 100644 --- a/src/misc/RepositoryBannerNote.ts +++ b/src/misc/RepositoryBannerNote.ts @@ -32,7 +32,6 @@ export class RepositoryBannerNote extends LitElement { let banner: HacsBanner; if (this.repository.category === "integration") { - console.log(this.repository); if (this.repository.first_install && this.repository.config_flow) { banner = document.createElement( "hacs-repository-banner-integration-first-install" diff --git a/src/panels/repository.ts b/src/panels/repository.ts index 583bc12c..d8778a35 100644 --- a/src/panels/repository.ts +++ b/src/panels/repository.ts @@ -273,10 +273,9 @@ export class HacsRepository extends LitElement { } else { this.panel = this.repo.category; } - this.route.path = `/${this.panel}`; this.dispatchEvent( new CustomEvent("hacs-location-change", { - detail: { value: this.route }, + detail: { value: this.panel }, bubbles: true, composed: true }) diff --git a/src/types.ts b/src/types.ts index d1cfde0c..928db518 100644 --- a/src/types.ts +++ b/src/types.ts @@ -20,6 +20,7 @@ export interface Configuration { categories: [string]; country: string; dev: string; + debug: boolean; experimental: boolean; frontend_compact: boolean; frontend_mode: string;