trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web: add EventInfoPage

Browse source
This commit is contained in:
Jens Langhammer 2021-02-04 21:28:01 +01:00
parent 9f478bb46a
commit 580d59e921
3 changed files with 55 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
web/src/elements/table/TablePage.ts
View file

@ -1,3 +1,4 @@
import { gettext } from "django";
import { html, TemplateResult } from "lit-html";
import { ifDefined } from "lit-html/directives/if-defined";
import { Table } from "./Table";
@ -26,9 +27,9 @@ export abstract class TablePage<T> extends Table<T> {
<div class="pf-c-content">
<h1>
<i class="${this.pageIcon()}"></i>
${this.pageTitle()}
${gettext(this.pageTitle())}
</h1>
${description ? html`<p>${description}</p>` : html``}
${description ? html`<p>${gettext(description)}</p>` : html``}
</div>
</section>
<section class="pf-c-page__main-section pf-m-no-padding-mobile">

47
web/src/pages/events/EventInfoPage.ts Normal file
View file

@ -0,0 +1,47 @@
import { gettext } from "django";
import { css, CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import { Event } from "../../api/Events";
import { COMMON_STYLES } from "../../common/styles";
@customElement("ak-event-info-page")
export class EventInfoPage extends LitElement {
@property()
set args(value: { [key: string]: string }) {
this.eventID = value.id;
}
@property()
set eventID(value: string) {
Event.get(value).then((e) => (this.event = e));
}
@property({ attribute: false })
event?: Event;
static get styles(): CSSResult[] {
return COMMON_STYLES.concat(css`
.pf-c-card {
color: var(--ak-dark-foreground);
}
`);
}
render(): TemplateResult {
return html`<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
<h1>
<i class="pf-icon pf-icon-catalog"></i>
${gettext(`Event ${this.event?.pk || ""}`)}
</h1>
</div>
</section>
<section class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-c-card">
<div class="pf-c-card__body">
<ak-event-info .event=${this.event}></ak-event-info>
</div>
</div>
</section>`;
}
}

6
web/src/routes.ts
View file

@ -1,5 +1,5 @@
import { html } from "lit-html";
import { Route, SLUG_REGEX, ID_REGEX } from "./elements/router/Route";
import { Route, SLUG_REGEX, ID_REGEX, UUID_REGEX } from "./elements/router/Route";
import "./pages/LibraryPage";
import "./pages/admin-overview/AdminOverviewPage";
@ -8,6 +8,7 @@ import "./pages/applications/ApplicationViewPage";
import "./pages/sources/SourceViewPage";
import "./pages/flows/FlowViewPage";
import "./pages/events/EventListPage";
import "./pages/events/EventInfoPage";
import "./pages/events/TransportListPage";
import "./pages/events/RuleListPage";
import "./pages/providers/ProviderListPage";
@ -35,6 +36,9 @@ export const ROUTES: Route[] = [
return html`<ak-flow-view .args=${args}></ak-flow-view>`;
}),
new Route(new RegExp("^/events/log$"), html`<ak-event-list></ak-event-list>`),
new Route(new RegExp(`^/events/log/(?<id>${UUID_REGEX})$`)).then((args) => {
return html`<ak-event-info-page .args=${args}></ak-event-info-page>`;
}),
new Route(new RegExp("^/events/transports$"), html`<ak-event-transport-list></ak-event-transport-list>`),
new Route(new RegExp("^/events/rules$"), html`<ak-event-rule-list></ak-event-rule-list>`),
new Route(new RegExp("^/property-mappings$"), html`<ak-property-mapping-list></ak-property-mapping-list>`),