static: improve router, add redirect support

This commit is contained in:
Jens Langhammer 2020-11-24 23:02:10 +01:00
parent 3f67da8f54
commit 7c73d2c2fb
4 changed files with 62 additions and 38 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -96,11 +96,15 @@ export class ModalButton extends LitElement {
this.querySelector(
"[slot=modal]"
)!.innerHTML = data;
console.log(`passbook/modalbutton: re-showing form`);
console.log(
`passbook/modalbutton: re-showing form`
);
this.updateHandlers();
} else {
this.open = false;
console.log(`passbook/modalbutton: successful submit`);
console.log(
`passbook/modalbutton: successful submit`
);
this.dispatchEvent(
new CustomEvent("hashchange", {
bubbles: true,

View file

@ -19,22 +19,41 @@ import CodeMirrorStyle from "codemirror/lib/codemirror.css";
import CodeMirrorTheme from "codemirror/theme/monokai.css";
import { ColorStyles } from "../constants";
export interface Route {
export class Route {
url: RegExp;
element: TemplateResult;
private element?: TemplateResult;
private callback?: () => TemplateResult;
constructor(url: RegExp, element?: TemplateResult) {
this.url = url;
this.element = element;
}
redirect(to: string): Route {
this.callback = () => {
console.log(`passbook/router: redirecting ${to}`);
window.location.hash = `#${to}`;
return html``;
};
return this;
}
render(): TemplateResult {
if (this.callback) {
return this.callback();
}
if (this.element) {
return this.element;
}
throw new Error("Route does not have callback or element");
}
}
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>`,
// },
// Prevent infinite Shell loops
new Route(new RegExp("^/$")).redirect("/-/overview/"),
new Route(new RegExp("^/applications/$"), html`<h1>test</h1>`),
];
@customElement("pb-router-outlet")
@ -73,27 +92,28 @@ export class RouterOutlet extends LitElement {
window.location.hash = `#${activeUrl}`;
return;
}
let selectedRoute: Route | null = null;
ROUTES.forEach((route) => {
let selectedRoute: Route | null = null;
if (route.url.exec(activeUrl)) {
selectedRoute = route;
return;
}
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;
});
if (!selectedRoute) {
console.log(
`passbook/router: route "${activeUrl}" not defined, defaulting to shell`
);
selectedRoute = new Route(
RegExp(""),
html`<pb-site-shell url=${activeUrl}
><div slot="body"></div
></pb-site-shell>`
);
}
this.activeRoute = selectedRoute;
}
render() {
return this.activeRoute?.element;
return this.activeRoute?.render();
}
}