web: start implementing notifications
This commit is contained in:
parent
7f5caf901d
commit
2579e168c3
|
@ -103,6 +103,9 @@ select[multiple] {
|
|||
.pf-c-page {
|
||||
--pf-c-page--BackgroundColor: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-drawer__content {
|
||||
--pf-c-drawer__content--BackgroundColor: var(--ak-dark-background);
|
||||
}
|
||||
.pf-c-title {
|
||||
color: var(--ak-dark-foreground);
|
||||
}
|
||||
|
|
92
web/src/elements/notifications/NotificationDrawer.ts
Normal file
92
web/src/elements/notifications/NotificationDrawer.ts
Normal file
|
@ -0,0 +1,92 @@
|
|||
import { gettext } from "django";
|
||||
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
||||
import { PBResponse } from "../../api/Client";
|
||||
import { Notification } from "../../api/EventNotification";
|
||||
import { COMMON_STYLES } from "../../common/styles";
|
||||
|
||||
@customElement("ak-notification-drawer")
|
||||
export class NotificationDrawer extends LitElement {
|
||||
|
||||
@property({attribute: false})
|
||||
notifications?: PBResponse<Notification>;
|
||||
|
||||
@property({type: Number})
|
||||
unread = 0;
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return COMMON_STYLES.concat(
|
||||
css`
|
||||
.pf-c-notification-drawer__header {
|
||||
height: 82px;
|
||||
padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
|
||||
}
|
||||
`
|
||||
);
|
||||
}
|
||||
|
||||
firstUpdated(): void {
|
||||
Notification.list().then(r => {
|
||||
this.notifications = r;
|
||||
this.unread = r.results.filter((n) => n.seen).length;
|
||||
});
|
||||
}
|
||||
|
||||
renderItem(item: Notification): TemplateResult {
|
||||
const delta = Date.now() - parseInt(item.created, 10);
|
||||
const age = `${Math.round(delta / 1000 / 3600)} Hours ago`;
|
||||
let level = "";
|
||||
switch (item.severity) {
|
||||
case "notice":
|
||||
level = "pf-m-info";
|
||||
break;
|
||||
case "warning":
|
||||
level = "pf-m-warning";
|
||||
break;
|
||||
case "alert":
|
||||
level = "pf-m-danger";
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return html`<li class="pf-c-notification-drawer__list-item pf-m-read ${level}">
|
||||
<div class="pf-c-notification-drawer__list-item-header">
|
||||
<span class="pf-c-notification-drawer__list-item-header-icon">
|
||||
<i class="fas fa-info-circle" aria-hidden="true"></i>
|
||||
</span>
|
||||
<h2 class="pf-c-notification-drawer__list-item-header-title">
|
||||
${item.event?.action}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="pf-c-notification-drawer__list-item-description">
|
||||
${item.body.substring(0, 75)}
|
||||
</div>
|
||||
<div class="pf-c-notification-drawer__list-item-timestamp">
|
||||
${age}
|
||||
</div>
|
||||
</li>`;
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
if (!this.notifications) {
|
||||
return html``;
|
||||
}
|
||||
return html`<div class="pf-c-drawer__body pf-m-no-padding">
|
||||
<div class="pf-c-notification-drawer">
|
||||
<div class="pf-c-notification-drawer__header">
|
||||
<h1 class="pf-c-notification-drawer__header-title">
|
||||
${gettext("Notifications")}
|
||||
</h1>
|
||||
<span class="pf-c-notification-drawer__header-status">
|
||||
${gettext(`${this.unread} unread`)}
|
||||
</span>
|
||||
</div>
|
||||
<div class="pf-c-notification-drawer__body">
|
||||
<ul class="pf-c-notification-drawer__list">
|
||||
${this.notifications.results.map(n => this.renderItem(n))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
}
|
22
web/src/elements/notifications/NotificationTrigger.ts
Normal file
22
web/src/elements/notifications/NotificationTrigger.ts
Normal file
|
@ -0,0 +1,22 @@
|
|||
import { customElement, html, LitElement, TemplateResult } from "lit-element";
|
||||
|
||||
@customElement("ak-notification-trigger")
|
||||
export class NotificationTrigger extends LitElement {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.addEventListener("click", () => {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("ak-notification-toggle", {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<slot></slot>`;
|
||||
}
|
||||
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
||||
import { css, CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
|
||||
// @ts-ignore
|
||||
import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
|
||||
// @ts-ignore
|
||||
|
|
|
@ -5,7 +5,7 @@ import { SidebarItem } from "../elements/sidebar/Sidebar";
|
|||
import "../elements/router/RouterOutlet";
|
||||
import "../elements/messages/MessageContainer";
|
||||
import "../elements/sidebar/SidebarHamburger";
|
||||
import "../elements/notifications/NotificationDrawer"
|
||||
import "../elements/notifications/NotificationDrawer";
|
||||
|
||||
export abstract class Interface extends LitElement {
|
||||
@property({type: Boolean})
|
||||
|
|
Reference in a new issue