@@ -41,7 +41,7 @@ export class HuiConfiguratorNotificationItem extends LitElement {
`state.configurator.${this.notification.state}`
)}
-
+
`;
}
@@ -54,6 +54,6 @@ export class HuiConfiguratorNotificationItem extends LitElement {
declare global {
interface HTMLElementTagNameMap {
- "hui-configurator-notification-item": HuiConfiguratorNotificationItem;
+ "configurator-notification-item": HuiConfiguratorNotificationItem;
}
}
diff --git a/src/panels/lovelace/components/notifications/hui-notification-drawer.js b/src/dialogs/notifications/notification-drawer.js
similarity index 72%
rename from src/panels/lovelace/components/notifications/hui-notification-drawer.js
rename to src/dialogs/notifications/notification-drawer.js
index a77d6c4165..f86ce08a4e 100644
--- a/src/panels/lovelace/components/notifications/hui-notification-drawer.js
+++ b/src/dialogs/notifications/notification-drawer.js
@@ -5,13 +5,14 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "./hui-notification-item";
-import "../../../../components/ha-paper-icon-button-next";
-
-import { EventsMixin } from "../../../../mixins/events-mixin";
-import LocalizeMixin from "../../../../mixins/localize-mixin";
-import { computeRTL } from "../../../../common/util/compute_rtl";
+import "./notification-item";
+import "../../components/ha-paper-icon-button-next";
+import { EventsMixin } from "../../mixins/events-mixin";
+import LocalizeMixin from "../../mixins/localize-mixin";
+import { computeRTL } from "../../common/util/compute_rtl";
+import { subscribeNotifications } from "../../data/persistent_notification";
+import computeDomain from "../../common/entity/compute_domain";
/*
* @appliesMixin EventsMixin
* @appliesMixin LocalizeMixin
@@ -129,7 +130,7 @@ export class HuiNotificationDrawer extends EventsMixin(
-
+
@@ -160,6 +161,10 @@ export class HuiNotificationDrawer extends EventsMixin(
reflectToAttribute: true,
},
notifications: {
+ type: Array,
+ computed: "_computeNotifications(open, hass, _notificationsBackend)",
+ },
+ _notificationsBackend: {
type: Array,
value: [],
},
@@ -171,6 +176,16 @@ export class HuiNotificationDrawer extends EventsMixin(
};
}
+ ready() {
+ super.ready();
+ window.addEventListener("location-changed", () => {
+ // close drawer when we navigate away.
+ if (this.open) {
+ this.open = false;
+ }
+ });
+ }
+
_closeDrawer(ev) {
ev.stopPropagation();
this.open = false;
@@ -188,17 +203,44 @@ export class HuiNotificationDrawer extends EventsMixin(
this._openTimer = setTimeout(() => {
this.classList.add("open");
}, 50);
+ this._unsubNotifications = subscribeNotifications(
+ this.hass.connection,
+ (notifications) => {
+ this._notificationsBackend = notifications;
+ }
+ );
} else {
// Animate closed then hide
this.classList.remove("open");
this._openTimer = setTimeout(() => {
this.hidden = true;
}, 250);
+ if (this._unsubNotifications) {
+ this._unsubNotifications();
+ this._unsubNotifications = undefined;
+ }
}
}
_computeRTL(hass) {
return computeRTL(hass);
}
+
+ _computeNotifications(open, hass, notificationsBackend) {
+ if (!open) {
+ return [];
+ }
+
+ const configuratorEntities = Object.keys(hass.states)
+ .filter((entityId) => computeDomain(entityId) === "configurator")
+ .map((entityId) => hass.states[entityId]);
+
+ return notificationsBackend.concat(configuratorEntities);
+ }
+
+ showDialog({ narrow }) {
+ this.open = true;
+ this.narrow = narrow;
+ }
}
-customElements.define("hui-notification-drawer", HuiNotificationDrawer);
+customElements.define("notification-drawer", HuiNotificationDrawer);
diff --git a/src/panels/lovelace/components/notifications/hui-notification-item-template.ts b/src/dialogs/notifications/notification-item-template.ts
similarity index 89%
rename from src/panels/lovelace/components/notifications/hui-notification-item-template.ts
rename to src/dialogs/notifications/notification-item-template.ts
index 601eaa2b1b..ec1aa7c639 100644
--- a/src/panels/lovelace/components/notifications/hui-notification-item-template.ts
+++ b/src/dialogs/notifications/notification-item-template.ts
@@ -7,9 +7,9 @@ import {
CSSResult,
} from "lit-element";
-import "../../../../components/ha-card";
+import "../../components/ha-card";
-@customElement("hui-notification-item-template")
+@customElement("notification-item-template")
export class HuiNotificationItemTemplate extends LitElement {
protected render(): TemplateResult | void {
return html`
@@ -60,6 +60,6 @@ export class HuiNotificationItemTemplate extends LitElement {
declare global {
interface HTMLElementTagNameMap {
- "hui-notification-item-template": HuiNotificationItemTemplate;
+ "notification-item-template": HuiNotificationItemTemplate;
}
}
diff --git a/src/panels/lovelace/components/notifications/hui-notification-item.ts b/src/dialogs/notifications/notification-item.ts
similarity index 56%
rename from src/panels/lovelace/components/notifications/hui-notification-item.ts
rename to src/dialogs/notifications/notification-item.ts
index 6d16335a51..541b1b4121 100644
--- a/src/panels/lovelace/components/notifications/hui-notification-item.ts
+++ b/src/dialogs/notifications/notification-item.ts
@@ -6,18 +6,19 @@ import {
TemplateResult,
html,
} from "lit-element";
+import { HassEntity } from "home-assistant-js-websocket";
-import "./hui-configurator-notification-item";
-import "./hui-persistent-notification-item";
+import "./configurator-notification-item";
+import "./persistent-notification-item";
-import { HomeAssistant } from "../../../../types";
-import { HassNotification } from "./types";
+import { HomeAssistant } from "../../types";
+import { PersistentNotification } from "../../data/persistent_notification";
-@customElement("hui-notification-item")
+@customElement("notification-item")
export class HuiNotificationItem extends LitElement {
@property() public hass?: HomeAssistant;
- @property() public notification?: HassNotification;
+ @property() public notification?: HassEntity | PersistentNotification;
protected shouldUpdate(changedProps: PropertyValues): boolean {
if (!this.hass || !this.notification || changedProps.has("notification")) {
@@ -32,24 +33,24 @@ export class HuiNotificationItem extends LitElement {
return html``;
}
- return this.notification.entity_id
+ return "entity_id" in this.notification
? html`
-
+ >
`
: html`
-
+ >
`;
}
}
declare global {
interface HTMLElementTagNameMap {
- "hui-notification-item": HuiNotificationItem;
+ "notification-item": HuiNotificationItem;
}
}
diff --git a/src/panels/lovelace/components/notifications/hui-persistent-notification-item.ts b/src/dialogs/notifications/persistent-notification-item.ts
similarity index 73%
rename from src/panels/lovelace/components/notifications/hui-persistent-notification-item.ts
rename to src/dialogs/notifications/persistent-notification-item.ts
index c03ec6fbc6..b40a743203 100644
--- a/src/panels/lovelace/components/notifications/hui-persistent-notification-item.ts
+++ b/src/dialogs/notifications/persistent-notification-item.ts
@@ -10,18 +10,18 @@ import {
import "@material/mwc-button";
import "@polymer/paper-tooltip/paper-tooltip";
-import "../../../../components/ha-relative-time";
-import "../../../../components/ha-markdown";
-import "./hui-notification-item-template";
+import "../../components/ha-relative-time";
+import "../../components/ha-markdown";
+import "./notification-item-template";
-import { HomeAssistant } from "../../../../types";
-import { HassNotification } from "./types";
+import { HomeAssistant } from "../../types";
+import { PersistentNotification } from "../../data/persistent_notification";
-@customElement("hui-persistent-notification-item")
+@customElement("persistent-notification-item")
export class HuiPersistentNotificationItem extends LitElement {
@property() public hass?: HomeAssistant;
- @property() public notification?: HassNotification;
+ @property() public notification?: PersistentNotification;
protected render(): TemplateResult | void {
if (!this.hass || !this.notification) {
@@ -29,8 +29,10 @@ export class HuiPersistentNotificationItem extends LitElement {
}
return html`
-
- ${this._computeTitle(this.notification)}
+
+
+ ${this.notification.title || this.notification.notification_id}
+
@@ -54,7 +56,7 @@ export class HuiPersistentNotificationItem extends LitElement {
"ui.card.persistent_notification.dismiss"
)}
-
+
`;
}
@@ -80,13 +82,9 @@ export class HuiPersistentNotificationItem extends LitElement {
});
}
- private _computeTitle(notification: HassNotification): string | undefined {
- return notification.title || notification.notification_id;
- }
-
private _computeTooltip(
hass: HomeAssistant,
- notification: HassNotification
+ notification: PersistentNotification
): string | undefined {
if (!hass || !notification) {
return undefined;
@@ -105,6 +103,6 @@ export class HuiPersistentNotificationItem extends LitElement {
declare global {
interface HTMLElementTagNameMap {
- "hui-persistent-notification-item": HuiPersistentNotificationItem;
+ "persistent-notification-item": HuiPersistentNotificationItem;
}
}
diff --git a/src/dialogs/notifications/show-notification-drawer.ts b/src/dialogs/notifications/show-notification-drawer.ts
new file mode 100644
index 0000000000..5d4902f64a
--- /dev/null
+++ b/src/dialogs/notifications/show-notification-drawer.ts
@@ -0,0 +1,16 @@
+import { fireEvent } from "../../common/dom/fire_event";
+
+export interface NotificationDrawerParams {
+ narrow: boolean;
+}
+
+export const showNotificationDrawer = (
+ element: HTMLElement,
+ dialogParams: NotificationDrawerParams
+): void => {
+ fireEvent(element, "show-dialog", {
+ dialogTag: "notification-drawer" as any, // Not in TS yet
+ dialogImport: () => import("./notification-drawer"),
+ dialogParams,
+ });
+};
diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts
index d2631cd825..480b8cc4f4 100644
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -20,6 +20,7 @@ import { fireEvent } from "../common/dom/fire_event";
import { PolymerChangedEvent } from "../polymer-types";
// tslint:disable-next-line: no-duplicate-imports
import { AppDrawerLayoutElement } from "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
+import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
const NON_SWIPABLE_PANELS = ["kiosk", "map"];
@@ -27,6 +28,7 @@ declare global {
// for fire event
interface HASSDomEvents {
"hass-toggle-menu": undefined;
+ "hass-show-notifications": undefined;
}
}
@@ -66,6 +68,7 @@ class HomeAssistantMain extends LitElement {
>
@@ -96,6 +99,12 @@ class HomeAssistantMain extends LitElement {
setTimeout(() => this.appLayout.resetLayout());
}
});
+
+ this.addEventListener("hass-show-notifications", () => {
+ showNotificationDrawer(this, {
+ narrow: this.narrow!,
+ });
+ });
}
protected updated(changedProps: PropertyValues) {
diff --git a/src/panels/lovelace/common/compute-notifications.ts b/src/panels/lovelace/common/compute-notifications.ts
deleted file mode 100644
index 5bfb1c4f61..0000000000
--- a/src/panels/lovelace/common/compute-notifications.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { HassEntities, HassEntity } from "home-assistant-js-websocket";
-
-import computeDomain from "../../../common/entity/compute_domain";
-
-export const computeNotifications = (states: HassEntities): HassEntity[] => {
- return Object.keys(states)
- .filter((entityId) => computeDomain(entityId) === "configurator")
- .map((entityId) => states[entityId]);
-};
diff --git a/src/panels/lovelace/components/notifications/hui-notifications-button.ts b/src/panels/lovelace/components/notifications/hui-notifications-button.ts
deleted file mode 100644
index 023764e8a9..0000000000
--- a/src/panels/lovelace/components/notifications/hui-notifications-button.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import {
- html,
- LitElement,
- TemplateResult,
- css,
- CSSResult,
- property,
-} from "lit-element";
-import "@polymer/paper-icon-button/paper-icon-button";
-import { fireEvent } from "../../../../common/dom/fire_event";
-
-declare global {
- // tslint:disable-next-line
- interface HASSDomEvents {
- "opened-changed": { value: boolean };
- }
-}
-
-class HuiNotificationsButton extends LitElement {
- @property() public notifications?: string[];
- @property() public opened?: boolean;
-
- protected render(): TemplateResult | void {
- return html`
-
- ${this.notifications && this.notifications.length > 0
- ? html`
-
- ${this.notifications.length}
-
- `
- : ""}
- `;
- }
-
- static get styles(): CSSResult[] {
- return [
- css`
- :host {
- position: relative;
- }
-
- .indicator {
- position: absolute;
- top: 0px;
- right: -3px;
- width: 20px;
- height: 20px;
- border-radius: 50%;
- background: var(--accent-color);
- pointer-events: none;
- z-index: 1;
- }
-
- .indicator > div {
- right: 7px;
- top: 3px;
- position: absolute;
- font-size: 0.55em;
- }
- `,
- ];
- }
-
- private _clicked() {
- this.opened = true;
- fireEvent(this, "opened-changed", { value: this.opened });
- }
-}
-
-declare global {
- interface HTMLElementTagNameMap {
- "hui-notifications-button": HuiNotificationsButton;
- }
-}
-
-customElements.define("hui-notifications-button", HuiNotificationsButton);
diff --git a/src/panels/lovelace/components/notifications/types.ts b/src/panels/lovelace/components/notifications/types.ts
deleted file mode 100644
index c2062c905f..0000000000
--- a/src/panels/lovelace/components/notifications/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { HassEntity } from "home-assistant-js-websocket";
-
-export declare type HassNotification = HassEntity & {
- notification_id?: string;
- created_at?: string;
- title?: string;
- message?: string;
-};
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 53c7467b93..014fd58aa6 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -20,7 +20,6 @@ import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-menu-button/paper-menu-button";
import "@polymer/paper-tabs/paper-tab";
import "@polymer/paper-tabs/paper-tabs";
-import { HassEntities } from "home-assistant-js-websocket";
import scrollToTarget from "../../common/dom/scroll-to-target";
@@ -30,17 +29,13 @@ import "../../components/ha-paper-icon-button-arrow-next";
import "../../components/ha-paper-icon-button-arrow-prev";
import "../../components/ha-icon";
import { loadModule, loadCSS, loadJS } from "../../common/dom/load_resource";
-import { subscribeNotifications } from "../../data/ws-notifications";
import { debounce } from "../../common/util/debounce";
import { HomeAssistant } from "../../types";
import { LovelaceConfig } from "../../data/lovelace";
import { navigate } from "../../common/navigate";
import { fireEvent } from "../../common/dom/fire_event";
-import { computeNotifications } from "./common/compute-notifications";
import { swapView } from "./editor/config-util";
-import "./components/notifications/hui-notification-drawer";
-import "./components/notifications/hui-notifications-button";
import "./hui-view";
// Not a duplicate import, this one is for type
// tslint:disable-next-line
@@ -65,12 +60,9 @@ class HUIRoot extends LitElement {
@property() public route?: { path: string; prefix: string };
@property() private _routeData?: { view: string };
@property() private _curView?: number | "hass-unused-entities";
- @property() private _notificationsOpen = false;
- @property() private _persistentNotifications?: Notification[];
private _viewCache?: { [viewId: string]: HUIView };
private _debouncedConfigChanged: () => void;
- private _unsubNotifications?: () => void;
constructor() {
super();
@@ -83,35 +75,11 @@ class HUIRoot extends LitElement {
);
}
- public connectedCallback(): void {
- super.connectedCallback();
- this._unsubNotifications = subscribeNotifications(
- this.hass!.connection,
- (notifications) => {
- this._persistentNotifications = notifications;
- }
- );
- }
-
- public disconnectedCallback(): void {
- super.disconnectedCallback();
- if (this._unsubNotifications) {
- this._unsubNotifications();
- }
- }
-
protected render(): TemplateResult | void {
return html`
-
${this.config.title || "Home Assistant"}
-
@@ -449,13 +411,6 @@ class HUIRoot extends LitElement {
}
}
- private get _notifications() {
- return this._updateNotifications(
- this.hass!.states,
- this._persistentNotifications! || []
- );
- }
-
private get config(): LovelaceConfig {
return this.lovelace!.config;
}
@@ -480,18 +435,6 @@ class HUIRoot extends LitElement {
this._routeData = ev.detail.value;
}
- private _handleNotificationsOpenChanged(ev): void {
- this._notificationsOpen = ev.detail.value;
- }
-
- private _updateNotifications(
- states: HassEntities,
- persistent: unknown[]
- ): unknown[] {
- const configurator = computeNotifications(states);
- return persistent.concat(configurator);
- }
-
private _handleRefresh(): void {
fireEvent(this, "config-refresh");
}