2020-11-21 23:06:25 +00:00
|
|
|
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";
|
2020-11-22 19:54:05 +00:00
|
|
|
// @ts-ignore
|
|
|
|
import PBGlobal from "../../passbook/passbook.css";
|
2020-11-21 23:06:25 +00:00
|
|
|
|
|
|
|
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;
|
|
|
|
|
2020-11-21 23:06:25 +00:00
|
|
|
static get styles() {
|
2020-11-22 19:54:05 +00:00
|
|
|
return [PF, PFAddons, PBGlobal];
|
2020-11-21 23:06:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
window.addEventListener("hashchange", (e) => this.navigate());
|
|
|
|
}
|
|
|
|
|
2020-11-22 12:13:45 +00:00
|
|
|
firstUpdated() {
|
|
|
|
this.navigate();
|
|
|
|
}
|
|
|
|
|
2020-11-21 23:06:25 +00:00
|
|
|
navigate() {
|
2020-11-22 12:13:45 +00:00
|
|
|
let activeUrl = window.location.hash.slice(1, Infinity);
|
|
|
|
if (activeUrl === "") {
|
|
|
|
activeUrl = this.defaultUrl!;
|
|
|
|
}
|
2020-11-21 23:06:25 +00:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
}
|