Use CustomEvent for location change

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}
             >
               <paper-tab page-name="installed"
@@ -411,12 +409,18 @@ class HacsFrontendBase extends LitElement {
     return this.route.path.split("/")[2];
   }
 
-  locationChanged(ev): void {
-    this.route = (ev as LocationChangedEvent).detail.value;
+  locationChanged(ev: any): void {
+    if (this.configuration.debug) this.hacs.logger.info(ev.type, ev.detail);
+    this.route.path = `/${(ev as LocationChangedEvent).detail.value}`;
     const force = (ev as LocationChangedEvent).detail.force;
     this.hacs.navigate(this, `${this.route.prefix}${this.route.path}`);
     if (force) window.location.reload();
     else this.requestUpdate();
+    this.hacs.scrollToTarget(
+      this,
+      // @ts-ignore
+      this.shadowRoot!.querySelector("app-header-layout").header.scrollTarget
+    );
   }
 
   onboardingDone(): void {
@@ -429,19 +433,16 @@ class HacsFrontendBase extends LitElement {
   }
 
   handlePageSelected(e: SelectedValue) {
-    this.repository_view = false;
-    const newPage = e.detail.selected;
-    this.panel = newPage;
-    this.route.path = `/${newPage}`;
-    this.hacs.navigate(this, `${this.route.prefix}${this.route.path}`);
-    this.hacs.scrollToTarget(
-      this,
-      // @ts-ignore
-      this.shadowRoot!.querySelector("app-header-layout").header.scrollTarget
+    this.dispatchEvent(
+      new CustomEvent("hacs-location-change", {
+        detail: { value: e.detail.selected },
+        bubbles: true,
+        composed: true
+      })
     );
   }
 
-  private get _page() {
+  private get _activeTab() {
     if (this.route.path.split("/")[1] === undefined) return "installed";
     return this.route.path.split("/")[1];
   }

src/components/buttons/HacsButtonGoToIntegrations.ts

@@ -7,7 +7,6 @@ import { Route } from "../../types";
 @customElement("hacs-button-goto-integrations")
 export class HacsButtonGoToIntegrations extends HacsRepositoryButton {
   @property({ type: Object }) public hacs!: HACS;
-  @property({ type: Object }) public route!: Route;
 
   render(): TemplateResult | void {
     return html`
@@ -18,11 +17,9 @@ export class HacsButtonGoToIntegrations extends HacsRepositoryButton {
   }
 
   GoToIntegrations() {
-    this.route.prefix = `/config`;
-    this.route.path = `/integrations/dashboard`;
     this.dispatchEvent(
       new CustomEvent("hacs-location-change", {
-        detail: { value: this.route, force: true },
+        detail: { value: "integrations/dashboard" },
         bubbles: true,
         composed: true
       })

src/main.ts

@@ -6,14 +6,12 @@ import {
   property
 } from "lit-element";
 import { HomeAssistant } from "custom-card-helpers";
-import { Hacs, HACS } from "./Hacs";
 import { Route } from "./types";
 import "./LoadUIElements";
 
 @customElement("hacs-frontend")
 class HacsFrontend extends LitElement {
   @property({ type: Boolean }) public narrow!: boolean;
-  @property({ type: Object }) public hacs!: HACS;
   @property({ type: Object }) public hass!: HomeAssistant;
   @property({ type: Object }) public route!: Route;
 
@@ -42,12 +40,8 @@ class HacsFrontend extends LitElement {
 
   protected render(): TemplateResult | void {
     this.setModalCSS();
-    if (this.hacs === undefined) {
-      this.hacs = new Hacs(undefined, undefined, undefined);
-    }
     return html`
       <hacs-frontendbase
-        .hacs=${this.hacs}
         .hass=${this.hass}
         .route=${this.route}
         .narrow=${this.narrow}

src/misc/CustomRepositories.ts

@@ -23,7 +23,7 @@ export class CustomRepositories extends LitElement {
 
   protected update(changedProperties: PropertyValues): void {
     super.update(changedProperties);
-    console.log(changedProperties);
+    if (this.hacs.configuration.debug) this.hacs.logger.info(changedProperties);
   }
 
   shouldUpdate(changedProperties: PropertyValues) {
@@ -125,10 +125,9 @@ export class CustomRepositories extends LitElement {
         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
       })
@@ -142,7 +141,8 @@ export class CustomRepositories extends LitElement {
       );
       return html``;
     }
-    console.log(`Render! ${new Date()}`);
+    if (this.hacs.configuration.debug)
+      this.hacs.logger.info(`Render! ${new Date()}`);
     return html`
       <ha-card header="${this.hacs.localize("settings.custom_repositories")}">
         <div class="card-content">

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
       })

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
       })

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"

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
       })

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;