web: start implementing notifications

This commit is contained in:
Jens Langhammer 2021-01-14 22:02:21 +01:00
parent 7f5caf901d
commit 2579e168c3
5 changed files with 119 additions and 2 deletions

View file

@ -103,6 +103,9 @@ select[multiple] {
.pf-c-page { .pf-c-page {
--pf-c-page--BackgroundColor: var(--ak-dark-background); --pf-c-page--BackgroundColor: var(--ak-dark-background);
} }
.pf-c-drawer__content {
--pf-c-drawer__content--BackgroundColor: var(--ak-dark-background);
}
.pf-c-title { .pf-c-title {
color: var(--ak-dark-foreground); color: var(--ak-dark-foreground);
} }

View 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>`;
}
}

View 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>`;
}
}

View file

@ -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 // @ts-ignore
import NavStyle from "@patternfly/patternfly/components/Nav/nav.css"; import NavStyle from "@patternfly/patternfly/components/Nav/nav.css";
// @ts-ignore // @ts-ignore

View file

@ -5,7 +5,7 @@ import { SidebarItem } from "../elements/sidebar/Sidebar";
import "../elements/router/RouterOutlet"; import "../elements/router/RouterOutlet";
import "../elements/messages/MessageContainer"; import "../elements/messages/MessageContainer";
import "../elements/sidebar/SidebarHamburger"; import "../elements/sidebar/SidebarHamburger";
import "../elements/notifications/NotificationDrawer" import "../elements/notifications/NotificationDrawer";
export abstract class Interface extends LitElement { export abstract class Interface extends LitElement {
@property({type: Boolean}) @property({type: Boolean})