This is a parody of leetcode.com for designers. It's being developed live on Twitch.tv/zedashaw to demonstrate how to make a parody of a website.
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.
pixelperfectionist/admin/pages/Errors.svelte

104 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>