This repository has been archived on 2024-05-31. You can view files and clone it, but cannot push or open issues or pull requests.
authentik/passbook/static/static/src/pages/RouterOutlet.ts

83 lines
2 KiB
TypeScript
Raw Normal View History

import {
customElement,
html,
LitElement,
property,
TemplateResult,
} from "lit-element";
// @ts-ignore
import PF from "@patternfly/patternfly/patternfly.css";
// @ts-ignore
import PFAddons from "@patternfly/patternfly/patternfly-addons.css";
// @ts-ignore
import PBGlobal from "../../passbook/passbook.css";
export interface Route {
url: RegExp;
element: TemplateResult;
}
export const ROUTES: Route[] = [
{
url: new RegExp("^overview$"),
element: html`<pb-site-shell url="/overview/"
><div slot="body"></div
></pb-site-shell>`,
},
// {
// url: new RegExp("^applications$"),
// element: html`<h1>test2</h1>`,
// },
];
@customElement("pb-router-outlet")
export class RouterOutlet extends LitElement {
@property()
activeRoute?: Route;
2020-11-22 12:13:45 +00:00
@property()
defaultUrl?: string;
static get styles() {
return [PF, PFAddons, PBGlobal];
}
constructor() {
super();
window.addEventListener("hashchange", (e) => this.navigate());
}
2020-11-22 12:13:45 +00:00
firstUpdated() {
this.navigate();
}
navigate() {
2020-11-22 12:13:45 +00:00
let activeUrl = window.location.hash.slice(1, Infinity);
if (activeUrl === "") {
activeUrl = this.defaultUrl!;
}
ROUTES.forEach((route) => {
let selectedRoute: Route | null = null;
if (route.url.exec(activeUrl)) {
selectedRoute = route;
}
if (!selectedRoute) {
console.log(
`passbook/router: route "${activeUrl}" not defined, defaulting to shell`
);
selectedRoute = {
url: RegExp(""),
element: html`<pb-site-shell url=${activeUrl}
><div slot="body"></div
></pb-site-shell>`,
};
}
this.activeRoute = selectedRoute;
});
}
render() {
return this.activeRoute?.element;
}
}