web: add EventInfoPage
This commit is contained in:
parent
9f478bb46a
commit
580d59e921
|
@ -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">
|
||||
|
|
|
@ -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>`;
|
||||
}
|
||||
|
||||
}
|
|
@ -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>`),
|
||||
|
|
Reference in New Issue