Merge pull request #62 from hacs/integrations

Repository banners and theme changes
hacs · Jan 1, 2020 · b2111c0 · b2111c0
2 parents 596c53d + e17fc29
commit b2111c0
Show file tree

Hide file tree

Showing 16 changed files with 284 additions and 128 deletions.
diff --git a/src/HacsFrontend.ts b/src/HacsFrontend.ts
@@ -397,8 +397,10 @@ class HacsFrontendBase extends LitElement {
 
   locationChanged(ev): void {
     this.route = (ev as LocationChangedEvent).detail.value;
+    const force = (ev as LocationChangedEvent).detail.force;
     this.hacs.navigate(this, `${this.route.prefix}${this.route.path}`);
-    this.requestUpdate();
+    if (force) window.location.reload();
+    else this.requestUpdate();
   }
 
   onboardingDone(): void {

diff --git a/src/LoadUIElements.ts b/src/LoadUIElements.ts
@@ -8,15 +8,19 @@ import "./panels/store";
 import "./components/buttons/HacsButtonAddToLovelace";
 import "./components/buttons/HacsButtonChangelog";
 import "./components/buttons/HacsButtonClearNew";
+import "./components/buttons/HacsButtonGoToIntegrations";
 import "./components/buttons/HacsButtonMainAction";
 import "./components/buttons/HacsButtonOpenPlugin";
 import "./components/buttons/HacsButtonOpenRepository";
 import "./components/buttons/HacsButtonRestartHomeAssistant";
 import "./components/buttons/HacsButtonUninstall";
+import "./components/repositorybanner/IntegrationFirstInstall";
+import "./components/repositorybanner/IntegrationPendingRestart";
+import "./components/repositorybanner/PluginNotLoaded";
 import "./components/HacsBody";
 import "./components/HacsLink";
-import "./misc/HacsMenu";
 import "./components/HacsProgressbar";
+import "./misc/HacsMenu";
 
 import "./misc/CustomRepositories";
 import "./misc/HacsCritical";

diff --git a/src/components/buttons/HacsButtonGoToIntegrations.ts b/src/components/buttons/HacsButtonGoToIntegrations.ts
@@ -0,0 +1,31 @@
+import { customElement, TemplateResult, html, property } from "lit-element";
+
+import { HacsRepositoryButton } from "./HacsRepositoryButton";
+import { HACS } from "../../Hacs";
+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`
+      <mwc-button @click=${this.GoToIntegrations}>
+        ${this.hacs.localize("repository.goto_integrations")}
+      </mwc-button>
+    `;
+  }
+
+  GoToIntegrations() {
+    this.route.prefix = `/config`;
+    this.route.path = `/integrations/dashboard`;
+    this.dispatchEvent(
+      new CustomEvent("hacs-location-change", {
+        detail: { value: this.route, force: true },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+}
diff --git a/src/components/buttons/HacsButtonRestartHomeAssistant.ts b/src/components/buttons/HacsButtonRestartHomeAssistant.ts
@@ -1,33 +1,50 @@
-import { customElement, TemplateResult, html, property } from "lit-element";
+import {
+  customElement,
+  css,
+  CSSResultArray,
+  TemplateResult,
+  html,
+  property
+} from "lit-element";
 import swal from "sweetalert";
-import { HomeAssistant } from "custom-card-helpers";
 
 import { HacsRepositoryButton } from "./HacsRepositoryButton";
 import { HACS } from "../../Hacs";
-import { localize } from "../../localize/localize";
+import { Route } from "../../types";
 
 @customElement("hacs-button-restart-home-assistant")
 export class HacsButtonRestartHomeAssistant extends HacsRepositoryButton {
   @property({ type: Object }) public hacs!: HACS;
-  @property({ type: Object }) public hass!: HomeAssistant;
+  @property({ type: Object }) public route!: Route;
 
   render(): TemplateResult | void {
-    if (!this.repository.installed) return html``;
-
     return html`
       <mwc-button @click=${this.RestartHomeAssistant}>
         ${this.hacs.localize("repository.restart_home_assistant")}
       </mwc-button>
     `;
   }
 
+  static get styles(): CSSResultArray {
+    return [
+      css`
+        mwc-button {
+          --mdc-theme-primary: var(--google-red-500);
+        }
+      `
+    ];
+  }
+
   RestartHomeAssistant() {
-    swal(localize("confirm.restart_home_assistant"), {
-      buttons: [localize("confirm.no"), localize("confirm.yes")]
+    swal(this.hacs.localize("confirm.restart_home_assistant"), {
+      buttons: [
+        this.hacs.localize("confirm.no"),
+        this.hacs.localize("confirm.yes")
+      ]
     }).then(value => {
       if (value !== null) {
         this.hass.callService("homeassistant", "restart");
-        swal(localize("confirm.home_assistant_is_restarting"));
+        swal(this.hacs.localize("confirm.home_assistant_is_restarting"));
       }
     });
   }

diff --git a/src/components/repositorybanner/HacsRepositoryBanner.ts b/src/components/repositorybanner/HacsRepositoryBanner.ts
@@ -0,0 +1,55 @@
+import {
+  LitElement,
+  customElement,
+  CSSResultArray,
+  css,
+  property
+} from "lit-element";
+import { HacsStyle } from "../../style/hacs-style";
+import {
+  RepositoryData,
+  Configuration,
+  Status,
+  Route,
+  LovelaceConfig
+} from "../../types";
+import { HACS } from "../../Hacs";
+import { HomeAssistant } from "custom-card-helpers";
+
+@customElement("hacs-repository-banner")
+export class HacsRepositoryBanner extends LitElement {
+  @property({ type: Object }) public hacs!: HACS;
+  @property({ type: Object }) public configuration: Configuration;
+  @property({ type: Object }) public hass!: HomeAssistant;
+  @property({ type: Object }) public lovelaceconfig: LovelaceConfig;
+  @property({ type: Object }) public repository!: RepositoryData;
+  @property({ type: Object }) public route!: Route;
+  @property({ type: Object }) public status!: Status;
+
+  static get styles(): CSSResultArray {
+    return [
+      HacsStyle,
+      css`
+        ha-card {
+          width: 90%;
+          margin-left: 5%;
+        }
+        ha-card.alert {
+          background-color: var(
+            --hacs-status-pending-restart,
+            var(--google-red-500)
+          );
+          color: var(--text-primary-color);
+        }
+        ha-card.warning {
+          background-color: var(--hacs-status-pending-update);
+          color: var(--primary-text-color);
+        }
+        ha-card.info {
+          background-color: var(--primary-background-color);
+          color: var(--primary-text-color);
+        }
+      `
+    ];
+  }
+}
diff --git a/src/components/repositorybanner/IntegrationFirstInstall.ts b/src/components/repositorybanner/IntegrationFirstInstall.ts
@@ -0,0 +1,34 @@
+import { customElement, TemplateResult, html } from "lit-element";
+
+import { HacsRepositoryBanner } from "./HacsRepositoryBanner";
+
+@customElement("hacs-repository-banner-integration-first-install")
+export class RepositoryBannerIntegrationFirstInstall extends HacsRepositoryBanner {
+  protected render(): TemplateResult | void {
+    const title = this.hacs.localize("repository_banner.restart_pending");
+
+    return html`
+      <ha-card class="info" .header="${title}">
+        <div class="card-content">
+          ${this.hacs.localize("repository_banner.restart")}
+          </br></br>
+          ${this.hacs.localize("repository_banner.restart")}
+          ${this.hacs.localize("repository_banner.config_flow")}
+          </br>
+          ${this.hacs.localize("repository_banner.no_restart_required")} 🎉
+        </div>
+        <div class="card-actions">
+          <hacs-button-restart-home-assistant
+            .hacs=${this.hacs}
+            .hass=${this.hass}
+            .route=${this.route}
+          ></hacs-button-restart-home-assistant>
+          <hacs-button-goto-integrations
+            .hacs=${this.hacs}
+            .route=${this.route}
+          ></hacs-button-goto-integrations>
+        </div>
+      </ha-card>
+    `;
+  }
+}
diff --git a/src/components/repositorybanner/IntegrationPendingRestart.ts b/src/components/repositorybanner/IntegrationPendingRestart.ts
@@ -0,0 +1,26 @@
+import { customElement, TemplateResult, html } from "lit-element";
+
+import { HacsRepositoryBanner } from "./HacsRepositoryBanner";
+
+@customElement("hacs-repository-banner-integration-pending-restart")
+export class RepositoryBannerIntegrationPendingRestart extends HacsRepositoryBanner {
+  protected render(): TemplateResult | void {
+    const title = this.hacs.localize("repository_banner.restart_pending");
+
+    return html`
+      <ha-card class="info" .header="${title}">
+        <div class="card-content">
+          ${this.hacs.localize("repository_banner.restart")}
+        </div>
+        <div class="card-actions">
+          <hacs-button-restart-home-assistant
+            .hacs=${this.hacs}
+            .hass=${this.hass}
+            .repository=${this.repository}
+            .route=${this.route}
+          ></hacs-button-restart-home-assistant>
+        </div>
+      </ha-card>
+    `;
+  }
+}
diff --git a/src/components/repositorybanner/PluginNotLoaded.ts b/src/components/repositorybanner/PluginNotLoaded.ts
@@ -0,0 +1,34 @@
+import { customElement, TemplateResult, html } from "lit-element";
+
+import { HacsRepositoryBanner } from "./HacsRepositoryBanner";
+import { AddedToLovelace } from "../../misc/AddedToLovelace";
+
+@customElement("hacs-repository-banner-plugin-not-loaded")
+export class RepositoryBannerPluginNotLoaded extends HacsRepositoryBanner {
+  protected render(): TemplateResult | void {
+    const title = this.hacs.localize("repository_banner.not_loaded");
+    const loaded: boolean = AddedToLovelace(
+      this.repository,
+      this.lovelaceconfig,
+      this.status
+    );
+
+    if (loaded) return html``;
+
+    return html`
+      <ha-card class="info" .header="${title}">
+        <div class="card-content">
+          ${this.hacs.localize("repository_banner.plugin_not_loaded")}
+        </div>
+        <div class="card-actions">
+          <hacs-button-add-to-lovelace
+            .hacs=${this.hacs}
+            .hass=${this.hass}
+            .repository=${this.repository}
+            .route=${this.route}
+          ></hacs-button-add-to-lovelace>
+        </div>
+      </ha-card>
+    `;
+  }
+}
diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json
@@ -53,6 +53,7 @@
     "flag_this": "Flag this",
     "frontend_version": "Frontend version",
     "github_stars": "GitHub stars",
+    "goto_integrations": "Go to integrations",
     "hide_beta": "Hide beta",
     "hide": "Hide",
     "install": "Install",
@@ -76,6 +77,8 @@
     "upgrade": "Update"
   },
   "repository_banner": {
+    "config_flow": "This integration supports config_flow, that means that you now can go to the integration section of your UI to configure it.",
+    "no_restart_required": "No restart required",
     "not_loaded": "Not loaded",
     "plugin_not_loaded": "This plugin is not added to your Lovelace resources.",
     "restart_pending": "Restart pending",

diff --git a/src/misc/CustomRepositories.ts b/src/misc/CustomRepositories.ts
@@ -223,14 +223,14 @@ export class CustomRepositories extends LitElement {
           bottom: 5px;
         }
         .saveicon {
-          color: var(--primary-color);
+          color: var(--hacs-badge-color, --accent-color);
           position: absolute;
           right: 0;
           bottom: 24px;
           cursor: pointer;
         }
         .listicon {
-          color: var(--primary-color);
+          color: var(--hacs-badge-color, --accent-color);
           right: 0px;
           position: absolute;
           cursor: pointer;

diff --git a/src/misc/HiddenRepositories.ts b/src/misc/HiddenRepositories.ts
@@ -77,7 +77,7 @@ export class HiddenRepositories extends LitElement {
           display: flex;
         }
         .listicon {
-          color: var(--primary-color);
+          color: var(--hacs-badge-color, --accent-color);
           left: 0px;
         }
       `