This is the code that runs https://bandolier.learnjsthehardway.com/ for you to review. It uses the https://git.learnjsthehardway.com/learn-javascript-the-hard-way/bandolier-template to create the documentation for the project.
https://bandolier.learnjsthehardway.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
3.2 KiB
104 lines
3.2 KiB
<script>
|
|
import { onMount } from 'svelte';
|
|
import Sidebar from "$/client/components/Sidebar.svelte";
|
|
import TableIndex from "$/admin/pages/TableIndex.svelte";
|
|
import EmailDNS from "$/admin/pages/EmailDNS.svelte";
|
|
import EmailSend from "$/admin/pages/EmailSend.svelte";
|
|
import Stats from "$/admin/pages/Stats.svelte";
|
|
import IconFinder from "$/admin/bando/IconFinder.svelte";
|
|
import Djenterator from "$/admin/bando/Djenterator.svelte";
|
|
import Layout from "$/admin/Layout.svelte";
|
|
import { replace } from "svelte-spa-router";
|
|
|
|
export let params={what: "tables"};
|
|
|
|
let panels = [
|
|
{url: "tables", title: "Tables", active: true, icon: "database", component: TableIndex},
|
|
{url: "errors", title: "Errors", active: false, icon: "alert-circle", href: "/admin/#/errors/"},
|
|
{url: "icons", title: "Icons", active: false, icon: "smile", component: IconFinder},
|
|
{url: "demos", title: "Components", active: false, icon: "component", href: "/admin/#/bando/components/"},
|
|
{url: "docs", title: "API Docs", active: false, icon: "book", href: "/admin/#/docs/"},
|
|
{url: "routes", title: "Routes", active: false, icon: "code-2", href: "/admin/#/routes/"},
|
|
{url: "djenterator", title: "Djenterator", active: false, icon: "layout-template", component: Djenterator},
|
|
{url: "email-dns", title: "Email DNS", active: false, icon: "mail-check", component: EmailDNS},
|
|
{url: "email-send", title: "Email Send", active: false, icon: "mails", component: EmailSend},
|
|
{url: "stats", title: "Stats", active: false, icon: "activity", component: Stats},
|
|
];
|
|
|
|
let selected = panels[0];
|
|
|
|
const sidebar_select = (event) => {
|
|
const { index, item } = event.detail;
|
|
|
|
selected = item;
|
|
|
|
replace(`/${ selected.url }/`);
|
|
|
|
panels = panels.map((x, i) => {
|
|
x.active = i == index;
|
|
return x;
|
|
});
|
|
}
|
|
|
|
const url_select = (url) => {
|
|
for(let panel of panels) {
|
|
if(url === panel.url) {
|
|
panel.active = true;
|
|
selected = panel;
|
|
} else {
|
|
panel.active = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
$:if(selected && params.what && params.what != selected.url) url_select(params.what);
|
|
|
|
onMount(() => {
|
|
if(params.what) {
|
|
url_select(params.what);
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<style>
|
|
right {
|
|
flex-direction: column;
|
|
padding: 0.5rem;
|
|
min-height: calc(100vh - var(--fixed-header-height));
|
|
max-height: calc(100vh - var(--fixed-header-height));
|
|
height: calc(100vh - var(--fixed-header-height));
|
|
min-width: calc(100% - 300px);
|
|
max-width: calc(100% - 300px);
|
|
width: calc(100% - 300px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
left {
|
|
display: flex;
|
|
max-width: min-content;
|
|
min-height: calc(100vh - var(--fixed-header-height));
|
|
max-height: calc(100vh - var(--fixed-header-height));
|
|
height: calc(100vh - var(--fixed-header-height));
|
|
}
|
|
|
|
content {
|
|
padding: 0px !important;
|
|
}
|
|
</style>
|
|
|
|
<Layout fullwidth={ true } fixed={ true } footer={false} authenticated={ true } testid="page-admin-{ params.what }">
|
|
<content>
|
|
<left>
|
|
<Sidebar on:select={ sidebar_select } menu={ panels }>
|
|
<div slot="top">
|
|
<h3>Admin Dashboard</h3>
|
|
</div>
|
|
</Sidebar>
|
|
</left>
|
|
|
|
<right>
|
|
<svelte:component this={selected.component} />
|
|
</right>
|
|
</content>
|
|
</Layout>
|
|
|