This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
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.
 
 
 
 
bandolier-template/admin/pages/Routes.svelte

117 lines
3.6 KiB

<script>
import { onMount } from 'svelte';
import Icon from '$/client/components/Icon.svelte';
import Code from '$/client/components/Code.svelte';
import Spinner from '$/client/components/Spinner.svelte';
import { log } from "$/client/logging.js";
import api from '$/client/api.js';
import Layout from "$/admin/Layout.svelte";
import { defer } from "$/client/helpers.js";
import { link } from 'svelte-spa-router';
let api_register;
let socket_register;
let api_selected;
let socket_selected;
const load_promise = defer();
const select_item = (maybe_api, maybe_socket) => {
api_selected = maybe_api;
socket_selected = maybe_socket;
}
const load_info = async () => {
let [status, data] = await api.get('/api/devtools/info');
if(status == 200) {
api_register = data.api;
socket_register = data.sockets;
load_promise.resolve();
} else {
log.debug("failed to get info", status);
}
}
onMount(async () => {
await load_info();
});
</script>
<style>
/** Sidebar style can be found in static/global.css */
sidebar.fixed {
overflow-y: auto;
max-height: calc(100vh - var(--fixed-header-height));
min-height: calc(100vh - var(--fixed-header-height));
height: calc(100vh - var(--fixed-header-height));
}
display {
padding-left: 1rem;
padding-right: 1rem;
width: 100%;
max-height: calc(100vh - var(--fixed-header-height));
min-height: calc(100vh - var(--fixed-header-height));
height: calc(100vh - var(--fixed-header-height));
overflow-y: auto;
}
</style>
<Layout fullwidth={ true } fixed={ true } footer={false} authenticated={ true } testid="page-admin-routes">
{#await load_promise}
<Spinner />
{:then}
<content>
<sidebar class="fixed">
<top>
<h3><a href="/" use:link><Icon name="arrow-left-circle" size="36"/></a> Routes</h3>
</top>
<items>
<h3>/api</h3>
{#each Object.entries(api_register) as [route, info]}
<a on:click={ () => select_item(info, false, false) }>{route}</a>
{/each}
<h3>sockets</h3>
{#each Object.entries(socket_register) as [route, info]}
<a on:click={ () => select_item(false, info, false) }>{route}</a>
{/each}
</items>
</sidebar>
<display>
{#if api_selected}
<route>
<h1>{ api_selected.name } <Icon name="share-2" size="36" /></h1>
{#each api_selected.functions as func}
<h1>{ func.name }</h1>
<Code language="javascript" content={ func.code.trim() } />
{/each}
</route>
{:else if socket_selected}
<h1>{ socket_selected.target_name } <Icon name="radio" size="36" /></h1>
<table>
<thead>
<tr><th>route_path</th><th>target_name</th><th>file_name</th></tr>
</thead>
<tbody>
<tr>
<td>{ socket_selected.route_path }</td>
<td>{ socket_selected.target_name }</td>
<td>{ socket_selected.file_name }</td>
</tr>
</tbody>
</table>
<h1>{ socket_selected.route_path }</h1>
<Code language="javascript" content={ socket_selected.code } />
{:else}
<h1>Nothing Selected</h1>
<p>Either you have no routes setup yet, or you haven't selected one on the left. To create a new JSON HTTP API route add a file to <code>api</code> with the file named after the route name you want. If you want a socket handler then create a file in <code>socket</code> instead. You can generate starter code each of these in the Djenterator.</p>
{/if}
</display>
</content>
{/await}
</Layout>