${this.hacs.localize("repository.restart_home_assistant")}
@@ -21,13 +25,26 @@ export class HacsButtonRestartHomeAssistant extends HacsRepositoryButton {
`;
}
+ 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 000000000..d8d15ee38
--- /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 000000000..bb8a04703
--- /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 000000000..6638cc127
--- /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 000000000..860156eff
--- /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 a2d1a2606..21f25d770 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/CustomRepositories.ts b/src/misc/CustomRepositories.ts
index 2e61c56d7..30c3046e6 100644
--- 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
index 6772fcca1..d4dca054b 100644
--- 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;
}
`
diff --git a/src/misc/RepositoryBannerNote.ts b/src/misc/RepositoryBannerNote.ts
index 36bcd7882..5bb3e8724 100644
--- a/src/misc/RepositoryBannerNote.ts
+++ b/src/misc/RepositoryBannerNote.ts
@@ -1,40 +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;
-}
-
-interface AddedToLovelace extends HTMLElement {
- hass?: HomeAssistant;
- configuration?: Configuration;
- lovelaceconfig?: LovelaceConfig;
- repository?: RepositoryData;
-}
@customElement("hacs-repository-banner-note")
export class RepositoryBannerNote extends LitElement {
@@ -43,103 +23,57 @@ export class RepositoryBannerNote extends LitElement {
@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;
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;
- 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/panels/repository.ts b/src/panels/repository.ts
index 4f48f98fb..583bc12c6 100644
--- a/src/panels/repository.ts
+++ b/src/panels/repository.ts
@@ -94,6 +94,7 @@ export class HacsRepository extends LitElement {
.hass=${this.hass}
.status=${this.status}
.repository=${this.repo}
+ .route=${this.route}
.lovelaceconfig=${this.lovelaceconfig}
.configuration=${this.configuration}
>
diff --git a/src/style/ha-style.ts b/src/style/ha-style.ts
index 219c35a35..2699f81c7 100644
--- a/src/style/ha-style.ts
+++ b/src/style/ha-style.ts
@@ -12,9 +12,9 @@ export const _haStyle = css`
app-header,
app-toolbar {
- background-color: var(--primary-color);
+ background-color: var(--app-header-background-color, var(--primary-color));
font-weight: 400;
- color: var(--text-primary-color, white);
+ color: var(--app-header-text-color, var(--text-primary-color, white));
}
app-toolbar ha-menu-button + [main-title],
diff --git a/src/style/nav-style.ts b/src/style/nav-style.ts
index 402b81869..5429e2bce 100644
--- a/src/style/nav-style.ts
+++ b/src/style/nav-style.ts
@@ -16,10 +16,10 @@ export const _navStyle = css`
app-header,
app-toolbar,
paper-tabs {
- background-color: var(--primary-color);
+ background-color: var(--app-header-background-color, var(--primary-color));
+ color: var(--app-header-text-color, var(--text-primary-color, white));
font-weight: 400;
text-transform: uppercase;
- color: var(--text-primary-color, white);
}
paper-tabs {
diff --git a/src/types.ts b/src/types.ts
index 6766296d6..9532ced70 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;
@@ -80,7 +85,7 @@ export interface ValueChangedEvent {
}
export interface LocationChangedEvent {
- detail?: { value: Route };
+ detail?: { value: Route; force?: boolean };
}
export interface RepositoryCategories {
@@ -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;
+}