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.
117 lines
3.6 KiB
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>
|
|
|