From e17fc29fe694a5a137137b9d24a3fe725948e4b3 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Wed, 1 Jan 2020 10:27:08 +0000 Subject: [PATCH] Rework repository banners --- src/LoadUIElements.ts | 6 +- .../buttons/HacsButtonGoToIntegrations.ts | 31 ++++ .../buttons/HacsButtonRestartHomeAssistant.ts | 39 +++-- .../repositorybanner/HacsRepositoryBanner.ts | 55 +++++++ .../IntegrationFirstInstall.ts | 34 ++++ .../IntegrationPendingRestart.ts | 26 +++ .../repositorybanner/PluginNotLoaded.ts | 34 ++++ src/localize/languages/en.json | 3 + src/misc/RepositoryBannerNote.ts | 152 +++++------------- src/types.ts | 15 ++ 10 files changed, 266 insertions(+), 129 deletions(-) create mode 100644 src/components/buttons/HacsButtonGoToIntegrations.ts create mode 100644 src/components/repositorybanner/HacsRepositoryBanner.ts create mode 100644 src/components/repositorybanner/IntegrationFirstInstall.ts create mode 100644 src/components/repositorybanner/IntegrationPendingRestart.ts create mode 100644 src/components/repositorybanner/PluginNotLoaded.ts diff --git a/src/LoadUIElements.ts b/src/LoadUIElements.ts index b7ffd07c..0a75495a 100644 --- 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 new file mode 100644 index 00000000..800a2c4b --- /dev/null +++ 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` + + ${this.hacs.localize("repository.goto_integrations")} + + `; + } + + 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 index 9f612b9a..84f8410b 100644 --- a/src/components/buttons/HacsButtonRestartHomeAssistant.ts +++ b/src/components/buttons/HacsButtonRestartHomeAssistant.ts @@ -1,10 +1,16 @@ -import { customElement, TemplateResult, html, property } from "lit-element"; +import { + customElement, + css, + CSSResultArray, + TemplateResult, + html, + property +} from "lit-element"; import swal from "sweetalert"; import { HacsRepositoryButton } from "./HacsRepositoryButton"; import { HACS } from "../../Hacs"; import { Route } from "../../types"; -import { localize } from "../../localize/localize"; @customElement("hacs-button-restart-home-assistant") export class HacsButtonRestartHomeAssistant extends HacsRepositoryButton { @@ -12,8 +18,6 @@ export class HacsButtonRestartHomeAssistant extends HacsRepositoryButton { @property({ type: Object }) public route!: Route; render(): TemplateResult | void { - if (!this.repository.installed) return html``; - return html` ${this.hacs.localize("repository.restart_home_assistant")} @@ -21,25 +25,26 @@ export class HacsButtonRestartHomeAssistant 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 }, - bubbles: true, - composed: true - }) - ); + 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 new file mode 100644 index 00000000..d8d15ee3 --- /dev/null +++ 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 new file mode 100644 index 00000000..bb8a0470 --- /dev/null +++ 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` + +
+ ${this.hacs.localize("repository_banner.restart")} +

+ ${this.hacs.localize("repository_banner.restart")} + ${this.hacs.localize("repository_banner.config_flow")} +
+ ${this.hacs.localize("repository_banner.no_restart_required")} 🎉 +
+
+ + +
+ + `; + } +} diff --git a/src/components/repositorybanner/IntegrationPendingRestart.ts b/src/components/repositorybanner/IntegrationPendingRestart.ts new file mode 100644 index 00000000..6638cc12 --- /dev/null +++ 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` + +
+ ${this.hacs.localize("repository_banner.restart")} +
+
+ +
+ + `; + } +} diff --git a/src/components/repositorybanner/PluginNotLoaded.ts b/src/components/repositorybanner/PluginNotLoaded.ts new file mode 100644 index 00000000..860156ef --- /dev/null +++ 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` + +
+ ${this.hacs.localize("repository_banner.plugin_not_loaded")} +
+
+ +
+ + `; + } +} diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json index a2d1a260..21f25d77 100644 --- 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/RepositoryBannerNote.ts b/src/misc/RepositoryBannerNote.ts index 5a79c715..5bb3e872 100644 --- a/src/misc/RepositoryBannerNote.ts +++ b/src/misc/RepositoryBannerNote.ts @@ -1,42 +1,20 @@ import { LitElement, customElement, - CSSResultArray, - css, TemplateResult, html, property } from "lit-element"; -import { HacsStyle } from "../style/hacs-style"; import { RepositoryData, Configuration, + HacsBanner, Status, Route, LovelaceConfig } from "../types"; import { HACS } from "../Hacs"; -import { AddedToLovelace } from "./AddedToLovelace"; import { HomeAssistant } from "custom-card-helpers"; -import { localize } from "../localize/localize"; - -interface CustomHACard extends HTMLElement { - header?: string; -} - -interface RestartHomeAssistant extends HTMLElement { - hacs?: HACS; - hass?: HomeAssistant; - repository?: RepositoryData; - route?: Route; -} - -interface AddedToLovelace extends HTMLElement { - hass?: HomeAssistant; - configuration?: Configuration; - lovelaceconfig?: LovelaceConfig; - repository?: RepositoryData; -} @customElement("hacs-repository-banner-note") export class RepositoryBannerNote extends LitElement { @@ -50,100 +28,52 @@ export class RepositoryBannerNote extends LitElement { protected render(): TemplateResult | void { if (!this.repository.installed) return html``; - var message: string = ""; - var title: string = ""; - var type: "alert" | "warning" | "info" | "" = ""; - if (this.repository.status == "pending-restart") { - type = "alert"; - title = localize("repository_banner.restart_pending"); - message = localize("repository_banner.restart"); - } else if (this.repository.category == "plugin") { - if (this.lovelaceconfig !== undefined && !this.status.background_task) { - var loaded: boolean = AddedToLovelace( - this.repository, - this.lovelaceconfig, - this.status - ); + let banner: HacsBanner; - if (!loaded) { - type = "warning"; - title = localize("repository_banner.not_loaded"); - message = localize("repository_banner.plugin_not_loaded"); - } + 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" + ); + banner.hacs = this.hacs; + banner.hass = this.hass; + banner.repository = this.repository; + banner.route = this.route; + return html` + ${banner} + `; + } else if (this.repository.status === "pending-restart") { + banner = document.createElement( + "hacs-repository-banner-integration-pending-restart" + ); + banner.hacs = this.hacs; + banner.hass = this.hass; + banner.repository = this.repository; + banner.route = this.route; + return html` + ${banner} + `; } } - if (message.length === 0) return html``; - - const wrapper: CustomHACard = document.createElement("ha-card"); - wrapper.className = type; - wrapper.header = title; - - const content = document.createElement("div"); - content.className = "card-content"; - content.innerText = message; - wrapper.appendChild(content); if (this.repository.category === "plugin") { - const actions = document.createElement("div"); - actions.className = "card-actions"; - - const addedToLovelace: AddedToLovelace = document.createElement( - "hacs-button-add-to-lovelace" - ); - addedToLovelace.hass = this.hass; - addedToLovelace.configuration = this.configuration; - addedToLovelace.repository = this.repository; - addedToLovelace.lovelaceconfig = this.lovelaceconfig; - actions.appendChild(addedToLovelace); - wrapper.appendChild(actions); - } else if ( - this.repository.status == "pending-restart" && - this.repository.category == "integration" - ) { - const actions = document.createElement("div"); - actions.className = "card-actions"; - - const restartHomeAssistant: RestartHomeAssistant = document.createElement( - "hacs-button-restart-home-assistant" - ); - restartHomeAssistant.hacs = this.hacs; - restartHomeAssistant.hass = this.hass; - restartHomeAssistant.repository = this.repository; - restartHomeAssistant.route = this.route; - actions.appendChild(restartHomeAssistant); - wrapper.appendChild(actions); + if (this.lovelaceconfig !== undefined && !this.status.background_task) { + banner = document.createElement( + "hacs-repository-banner-plugin-not-loaded" + ); + banner.hacs = this.hacs; + banner.hass = this.hass; + banner.configuration = this.configuration; + banner.lovelaceconfig = this.lovelaceconfig; + banner.status = this.status; + banner.repository = this.repository; + return html` + ${banner} + `; + } } - - return html` - ${wrapper} - `; - } - - static get styles(): CSSResultArray { - return [ - HacsStyle, - css` - ha-card { - width: 90%; - margin-left: 5%; - } - .alert { - background-color: var( - --hacs-status-pending-restart, - var(--google-red-500) - ); - color: var(--text-primary-color); - } - .warning { - background-color: var(--hacs-status-pending-update); - color: var(--primary-text-color); - } - .info { - background-color: var(--primary-background-color); - color: var(--primary-text-color); - } - ` - ]; + return html``; } } diff --git a/src/types.ts b/src/types.ts index 26f03c5c..9532ced7 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,3 +1,6 @@ +import { HomeAssistant } from "custom-card-helpers"; +import { HACS } from "./Hacs"; + export interface Route { path: string; prefix: string; @@ -42,6 +45,7 @@ export interface RepositoryData { beta: boolean; can_install: boolean; category: string; + config_flow: boolean; country: string; custom: boolean; default_branch: string; @@ -49,6 +53,7 @@ export interface RepositoryData { domain: string; downloads: number; file_name: string; + first_install: boolean; full_name: string; hide: boolean; hide_default_branch: boolean; @@ -139,3 +144,13 @@ export interface LovelaceResourceConfig { type: "css" | "js" | "module" | "html"; url: string; } + +export interface HacsBanner extends HTMLElement { + hacs?: HACS; + hass?: HomeAssistant; + repository?: RepositoryData; + configuration?: Configuration; + route?: Route; + lovelaceconfig?: LovelaceConfig; + status?: Status; +}