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.
103 lines
2.8 KiB
103 lines
2.8 KiB
<script>
|
|
import { onMount } from 'svelte';
|
|
import Icon from '$/client/components/Icon.svelte';
|
|
import { link } from 'svelte-spa-router';
|
|
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";
|
|
|
|
let errors;
|
|
let error_selected;
|
|
|
|
const load_promise = defer();
|
|
|
|
const load_info = async () => {
|
|
let [status, data] = await api.get('/api/devtools/info');
|
|
|
|
if(status == 200) {
|
|
errors = data.errors;
|
|
|
|
if(errors.length > 0) {
|
|
error_selected = errors[0];
|
|
}
|
|
|
|
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-errors">
|
|
{#await load_promise}
|
|
<Spinner />
|
|
{:then}
|
|
<content>
|
|
<sidebar class="fixed">
|
|
<top>
|
|
<h3><a href="/" use:link><Icon name="arrow-left-circle" size="36"/></a> Errors</h3>
|
|
</top>
|
|
<items>
|
|
{#each errors as error}
|
|
<a on:click={ () => error_selected = error }>{ error.location.file}</a>
|
|
{:else}
|
|
<h3>No Errors</h3>
|
|
<span>You currently have no errors that are shown. Try refreshing.</span>
|
|
{/each}
|
|
</items>
|
|
</sidebar>
|
|
|
|
<display>
|
|
{#if error_selected}
|
|
<h1>{error_selected.location.file} <Icon name="alert-circle" size="36" /></h1>
|
|
<h3>{ error_selected.text }</h3>
|
|
<pre>
|
|
<code>
|
|
{#each error_selected.location.lineText.split('\n') as line, i}
|
|
<span class:error={ error_selected.location.line === i + 1}>{ `${line}\n` }</span>
|
|
{/each}
|
|
</code>
|
|
</pre>
|
|
|
|
<h1>Notes</h1>
|
|
{#each error_selected.notes as note}
|
|
<h3>{note.location.file}</h3>
|
|
<p>{note.text}</p>
|
|
<pre>
|
|
<code>
|
|
{ note.location.line}: {note.location.lineText}
|
|
</code>
|
|
</pre>
|
|
{/each}
|
|
{/if}
|
|
</display>
|
|
</content>
|
|
{/await}
|
|
</Layout>
|
|
|