Move cool events

src/HacsFrontend.ts

@@ -40,14 +40,9 @@ class HacsFrontendBase extends LitElement {
 
   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);
+    this.hacs.logger.info("Changed properties", changedProperties);
   }
 
   public connectedCallback() {
@@ -109,7 +104,7 @@ class HacsFrontendBase extends LitElement {
       this.hass,
       evdata.repo,
       evdata.action,
-      evdata.category
+      evdata.data
     );
   }
 

src/misc/CustomRepositories.ts

@@ -100,7 +100,7 @@ export class CustomRepositories extends LitElement {
     var repo = ev.composedPath()[2].children[0].value;
     this.dispatchEvent(
       new CustomEvent("hacs-repository-action", {
-        detail: { repo: repo, action: "add", category: category },
+        detail: { repo: repo, action: "add", data: category },
         bubbles: true,
         composed: true
       })

src/misc/HacsRepositoryMenu.ts

@@ -111,26 +111,46 @@ export class HacsRepositoryMenu extends LitElement {
   }
 
   RepositoryReload() {
-    RepositoryWebSocketAction(
-      this.hass,
-      this.repository.id,
-      "set_state",
-      "other"
+    this.dispatchEvent(
+      new CustomEvent("hacs-repository-action", {
+        detail: { repo: this.repository, action: "set_state", data: "other" },
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.dispatchEvent(
+      new CustomEvent("hacs-repository-action", {
+        detail: { repo: this.repository, action: "update" },
+        bubbles: true,
+        composed: true
+      })
     );
-    RepositoryWebSocketAction(this.hass, this.repository.id, "update");
   }
 
   RepositoryBeta() {
-    RepositoryWebSocketAction(
-      this.hass,
-      this.repository.id,
-      "set_state",
-      "other"
+    this.dispatchEvent(
+      new CustomEvent("hacs-repository-action", {
+        detail: { repo: this.repository, action: "set_state", data: "other" },
+        bubbles: true,
+        composed: true
+      })
     );
     if (this.repository.beta) {
-      RepositoryWebSocketAction(this.hass, this.repository.id, "hide_beta");
+      this.dispatchEvent(
+        new CustomEvent("hacs-repository-action", {
+          detail: { repo: this.repository, action: "hide_beta" },
+          bubbles: true,
+          composed: true
+        })
+      );
     } else {
-      RepositoryWebSocketAction(this.hass, this.repository.id, "show_beta");
+      this.dispatchEvent(
+        new CustomEvent("hacs-repository-action", {
+          detail: { repo: this.repository, action: "show_beta" },
+          bubbles: true,
+          composed: true
+        })
+      );
     }
   }
 
@@ -142,9 +162,21 @@ export class HacsRepositoryMenu extends LitElement {
       "other"
     );
     if (this.repository.hide) {
-      RepositoryWebSocketAction(this.hass, this.repository.id, "unhide");
+      this.dispatchEvent(
+        new CustomEvent("hacs-repository-action", {
+          detail: { repo: this.repository, action: "unhide" },
+          bubbles: true,
+          composed: true
+        })
+      );
     } else {
-      RepositoryWebSocketAction(this.hass, this.repository.id, "hide");
+      this.dispatchEvent(
+        new CustomEvent("hacs-repository-action", {
+          detail: { repo: this.repository, action: "hide" },
+          bubbles: true,
+          composed: true
+        })
+      );
     }
     this.dispatchEvent(
       new CustomEvent("hacs-location-change", {

src/panels/repository.ts

@@ -5,6 +5,7 @@ import {
   TemplateResult,
   html,
   css,
+  PropertyValues,
   property
 } from "lit-element";
 import { HomeAssistant } from "custom-card-helpers";
@@ -37,28 +38,56 @@ export class HacsRepository extends LitElement {
   @property({ type: Object }) public lovelaceconfig: LovelaceConfig;
   @property({ type: Object }) public route!: Route;
   @property({ type: Object }) public status!: Status;
-  @property() public panel: string;
-  @property() public repository!: string;
+  public repository!: string;
+  private panel: string;
+
+  protected update(changedProperties: PropertyValues): void {
+    super.update(changedProperties);
+    if (this.hacs.configuration.debug) this.hacs.logger.info(changedProperties);
+  }
+
+  shouldUpdate(changedProperties: PropertyValues) {
+    changedProperties.forEach((_oldValue, propName) => {
+      if (propName === "repositories") {
+        const _repository = this.repository;
+        const _repositories = this.repositories.filter(function(repo) {
+          return repo.id === _repository;
+        });
+        const repo = _repositories[0];
+
+        if (!this.repo || JSON.stringify(repo) !== JSON.stringify(this.repo)) {
+          console.error("Setting repo");
+          this.repo = repo;
+        }
+      }
+    });
+    return changedProperties.has("repo");
+  }
 
   protected firstUpdated() {
     if (this.repo === undefined || !this.repo.updated_info) {
-      RepositoryWebSocketAction(
-        this.hass,
-        this.repository,
-        "set_state",
-        "other"
+      this.dispatchEvent(
+        new CustomEvent("hacs-repository-action", {
+          detail: {
+            repo: this.repository,
+            action: "set_state",
+            data: "other"
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
+      this.dispatchEvent(
+        new CustomEvent("hacs-repository-action", {
+          detail: { repo: this.repository, action: "update" },
+          bubbles: true,
+          composed: true
+        })
       );
-      RepositoryWebSocketAction(this.hass, this.repository, "update");
     }
   }
 
   render(): TemplateResult | void {
-    var _repository = this.repository;
-    var _repositories = this.repositories.filter(function(repo) {
-      return repo.id === _repository;
-    });
-    this.repo = _repositories[0];
-
     if (this.repo === undefined)
       return html`
         <div class="loader"><paper-spinner active></paper-spinner></div>
@@ -172,7 +201,7 @@ export class HacsRepository extends LitElement {
                 : html`
                     <div class="version-available-dropdown">
                       <paper-dropdown-menu
-                        @value-changed="${this.SetVersion}"
+                        @value-changed="${this.setRepositoryVersion}"
                         label="${this.hacs.localize(`repository.available`)}:
                      (${this.hacs.localize(`repository.newest`)}: ${this.repo
                           .releases[0]})"
@@ -254,14 +283,25 @@ export class HacsRepository extends LitElement {
     `;
   }
 
-  SetVersion(e: ValueChangedEvent) {
+  protected setRepositoryVersion(e: ValueChangedEvent) {
     if (e.detail.value.length > 0) {
-      RepositoryWebSocketAction(this.hass, this.repo.id, "set_state", "other");
-      RepositoryWebSocketAction(
-        this.hass,
-        this.repo.id,
-        "set_version",
-        e.detail.value
+      this.dispatchEvent(
+        new CustomEvent("hacs-repository-action", {
+          detail: { repo: this.repository, action: "set_state", data: "other" },
+          bubbles: true,
+          composed: true
+        })
+      );
+      this.dispatchEvent(
+        new CustomEvent("hacs-repository-action", {
+          detail: {
+            repo: this.repository,
+            action: "set_version",
+            data: e.detail.value
+          },
+          bubbles: true,
+          composed: true
+        })
       );
     }
   }

src/types.ts

@@ -159,5 +159,5 @@ export interface HacsBanner extends HTMLElement {
 export interface RepositoryActionData {
   repo: string;
   action: string;
-  category?: string;
+  data?: string;
 }