Files

85 lines
2.4 KiB
TypeScript

import "../public/css/theme.css";
import "../public/css/base.css";
import "../public/css/layout.css";
import { siteHeader } from "./components/siteHeader";
import { siteFooter } from "./components/siteFooter";
import { overviewTitle, renderOverviewPage, initOverviewPage } from "./pages/overview";
import { blocksTitle, renderBlocksPage, initBlocksPage } from "./pages/blocks";
import { transactionsTitle, renderTransactionsPage, initTransactionsPage } from "./pages/transactions";
import { addressesTitle, renderAddressesPage, initAddressesPage } from "./pages/addresses";
import { receiptsTitle, renderReceiptsPage, initReceiptsPage } from "./pages/receipts";
import { initDataModeToggle } from "./components/dataModeToggle";
import { getDataMode } from "./lib/mockData";
import { initNotifications } from "./components/notifications";
type PageConfig = {
title: string;
render: () => string;
init?: () => void | Promise<void>;
};
const overviewConfig: PageConfig = {
title: overviewTitle,
render: renderOverviewPage,
init: initOverviewPage,
};
const routes: Record<string, PageConfig> = {
"/": overviewConfig,
"/index.html": overviewConfig,
"/blocks": {
title: blocksTitle,
render: renderBlocksPage,
init: initBlocksPage,
},
"/transactions": {
title: transactionsTitle,
render: renderTransactionsPage,
init: initTransactionsPage,
},
"/addresses": {
title: addressesTitle,
render: renderAddressesPage,
init: initAddressesPage,
},
"/receipts": {
title: receiptsTitle,
render: renderReceiptsPage,
init: initReceiptsPage,
},
};
function render(): void {
initNotifications();
const root = document.querySelector<HTMLDivElement>("#app");
if (!root) {
console.warn("[Explorer] Missing #app root element");
return;
}
const currentPath = window.location.pathname.replace(/\/$/, "");
const normalizedPath = currentPath === "" ? "/" : currentPath;
const page = routes[normalizedPath] ?? null;
root.innerHTML = `
${siteHeader(page?.title ?? "Explorer")}
<main class="page">${(page ?? notFoundPageConfig).render()}</main>
${siteFooter()}
`;
initDataModeToggle(render);
void page?.init?.();
}
const notFoundPageConfig: PageConfig = {
title: "Not Found",
render: () => `
<section class="not-found">
<h2>Page Not Found</h2>
<p>The requested view is not available yet.</p>
</section>
`,
};
document.addEventListener("DOMContentLoaded", render);