diff --git a/web/src/elements/sidebar/Sidebar.ts b/web/src/elements/sidebar/Sidebar.ts index 570b55d44..667d3c371 100644 --- a/web/src/elements/sidebar/Sidebar.ts +++ b/web/src/elements/sidebar/Sidebar.ts @@ -32,7 +32,7 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [ children: [ { name: "Overview", - path: ["/administration/overview/"], + path: ["/administration/overview-ng/"], }, { name: "System Tasks", diff --git a/web/src/main.ts b/web/src/main.ts index e860307d8..3d27f2dac 100644 --- a/web/src/main.ts +++ b/web/src/main.ts @@ -1,23 +1,29 @@ import "construct-style-sheets-polyfill"; -import "./elements/AdminLoginsChart"; import "./elements/buttons/ActionButton"; import "./elements/buttons/Dropdown"; import "./elements/buttons/ModalButton"; import "./elements/buttons/SpinnerButton"; import "./elements/buttons/TokenCopyButton"; -import "./elements/CodeMirror"; -import "./elements/Messages"; + import "./elements/sidebar/Sidebar"; import "./elements/sidebar/SidebarBrand"; import "./elements/sidebar/SidebarUser"; -import "./elements/Tabs"; -import "./elements/Spinner"; + import "./elements/table/TablePagination"; -import "./pages/applications/ApplicationViewPage"; -import "./pages/applications/ApplicationListPage"; + +import "./elements/AdminLoginsChart"; +import "./elements/CodeMirror"; +import "./elements/Messages"; +import "./elements/Spinner"; +import "./elements/Tabs"; + +import "./pages/generic/FlowShellCard"; +import "./pages/generic/SiteShell"; + +import "./pages/router/RouterOutlet"; + import "./pages/AdminOverviewPage"; +import "./pages/applications/ApplicationListPage"; +import "./pages/applications/ApplicationViewPage"; import "./pages/LibraryPage"; -import "./pages/FlowShellCard"; -import "./pages/RouterOutlet"; -import "./pages/SiteShell"; diff --git a/web/src/pages/LibraryPage.ts b/web/src/pages/LibraryPage.ts index 68dcfa7f6..adf376c76 100644 --- a/web/src/pages/LibraryPage.ts +++ b/web/src/pages/LibraryPage.ts @@ -15,6 +15,9 @@ export class ApplicationViewPage extends LitElement { img.pf-icon { max-height: 24px; } + .pf-c-avatar { + --pf-c-avatar--BorderRadius: 0; + } ` ); } diff --git a/web/src/pages/FlowShellCard.ts b/web/src/pages/generic/FlowShellCard.ts similarity index 100% rename from web/src/pages/FlowShellCard.ts rename to web/src/pages/generic/FlowShellCard.ts diff --git a/web/src/pages/SiteShell.ts b/web/src/pages/generic/SiteShell.ts similarity index 100% rename from web/src/pages/SiteShell.ts rename to web/src/pages/generic/SiteShell.ts diff --git a/web/src/pages/router/Route.ts b/web/src/pages/router/Route.ts new file mode 100644 index 000000000..97a8c5d46 --- /dev/null +++ b/web/src/pages/router/Route.ts @@ -0,0 +1,43 @@ +import { html, TemplateResult } from "lit-html"; + +export const SLUG_REGEX = "[-a-zA-Z0-9_]+"; + +export class Route { + url: RegExp; + + private element?: TemplateResult; + private callback?: (args: { [key: string]: string }) => TemplateResult; + + constructor(url: RegExp, element?: TemplateResult) { + this.url = url; + this.element = element; + } + + redirect(to: string): Route { + this.callback = () => { + console.debug(`passbook/router: redirecting ${to}`); + window.location.hash = `#${to}`; + return html``; + }; + return this; + } + + then(render: (args: { [key: string]: string }) => TemplateResult): Route { + this.callback = render; + return this; + } + + render(args: { [key: string]: string }): TemplateResult { + if (this.callback) { + return this.callback(args); + } + if (this.element) { + return this.element; + } + throw new Error("Route does not have callback or element"); + } + + toString(): string { + return ``; + } +} diff --git a/web/src/pages/router/RouteMatch.ts b/web/src/pages/router/RouteMatch.ts new file mode 100644 index 000000000..5062d45d3 --- /dev/null +++ b/web/src/pages/router/RouteMatch.ts @@ -0,0 +1,21 @@ +import { TemplateResult } from "lit-html"; +import { Route } from "./Route"; + +export class RouteMatch { + route: Route; + arguments: { [key: string]: string; }; + fullUrl?: string; + + constructor(route: Route) { + this.route = route; + this.arguments = {}; + } + + render(): TemplateResult { + return this.route.render(this.arguments); + } + + toString(): string { + return ``; + } +} diff --git a/web/src/pages/RouterOutlet.ts b/web/src/pages/router/RouterOutlet.ts similarity index 52% rename from web/src/pages/RouterOutlet.ts rename to web/src/pages/router/RouterOutlet.ts index e726121e5..6dd07d79b 100644 --- a/web/src/pages/RouterOutlet.ts +++ b/web/src/pages/router/RouterOutlet.ts @@ -3,80 +3,11 @@ import { css, CSSResult, customElement, html, LitElement, property, TemplateResu import CodeMirrorStyle from "codemirror/lib/codemirror.css"; // @ts-ignore import CodeMirrorTheme from "codemirror/theme/monokai.css"; -import { ColorStyles } from "../constants"; -import { COMMON_STYLES } from "../common/styles"; - -export class Route { - url: RegExp; - - private element?: TemplateResult; - private callback?: (args: { [key: string]: string }) => TemplateResult; - - constructor(url: RegExp, element?: TemplateResult) { - this.url = url; - this.element = element; - } - - redirect(to: string): Route { - this.callback = () => { - console.debug(`passbook/router: redirecting ${to}`); - window.location.hash = `#${to}`; - return html``; - }; - return this; - } - - then(render: (args: { [key: string]: string }) => TemplateResult): Route { - this.callback = render; - return this; - } - - render(args: { [key: string]: string }): TemplateResult { - if (this.callback) { - return this.callback(args); - } - if (this.element) { - return this.element; - } - throw new Error("Route does not have callback or element"); - } - - toString(): string { - return ``; - } -} - -export const SLUG_REGEX = "[-a-zA-Z0-9_]+"; -export const ROUTES: Route[] = [ - // Prevent infinite Shell loops - new Route(new RegExp("^/$")).redirect("/library/"), - new Route(new RegExp("^#.*")).redirect("/library/"), - new Route(new RegExp("^/library/$"), html``), - new Route(new RegExp("^/administration/overview/$"), html``), - new Route(new RegExp("^/applications/$"), html``), - new Route(new RegExp(`^/applications/(?${SLUG_REGEX})/$`)).then((args) => { - return html``; - }), -]; - -class RouteMatch { - route: Route; - arguments: { [key: string]: string; }; - fullUrl?: string; - - constructor(route: Route) { - this.route = route; - this.arguments = {}; - } - - render(): TemplateResult { - return this.route.render(this.arguments); - } - - toString(): string { - return ``; - } -} +import { ColorStyles } from "../../constants"; +import { COMMON_STYLES } from "../../common/styles"; +import { Route } from "./Route"; +import { ROUTES } from "../../routes"; +import { RouteMatch } from "./RouteMatch"; @customElement("pb-router-outlet") export class RouterOutlet extends LitElement { diff --git a/web/src/routes.ts b/web/src/routes.ts new file mode 100644 index 000000000..a3a0c29e5 --- /dev/null +++ b/web/src/routes.ts @@ -0,0 +1,14 @@ +import { html } from "lit-html"; +import { Route, SLUG_REGEX } from "./pages/router/Route"; + +export const ROUTES: Route[] = [ + // Prevent infinite Shell loops + new Route(new RegExp("^/$")).redirect("/library/"), + new Route(new RegExp("^#.*")).redirect("/library/"), + new Route(new RegExp("^/library/$"), html``), + new Route(new RegExp("^/administration/overview-ng/$"), html``), + new Route(new RegExp("^/applications/$"), html``), + new Route(new RegExp(`^/applications/(?${SLUG_REGEX})/$`)).then((args) => { + return html``; + }), +];