bandolier-website/admin/pages/Routes.svelte

<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" /></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>