[web] Cleanup UI

This commit is contained in:
orosmatthew 2023-09-08 12:28:51 -04:00
parent 1c8ca53e45
commit 7f1c1c2dfb
11 changed files with 206 additions and 135 deletions

View File

@ -14,13 +14,36 @@
<a href="/admin/contests/create" class="btn btn-outline-success">Create</a> <a href="/admin/contests/create" class="btn btn-outline-success">Create</a>
</div> </div>
<div class="mt-3 list-group"> <div class="mt-3 table-responsive">
{#each data.contests as contest} <table class="table table-bordered table-hover">
<a <thead>
href={'/admin/contests/' + contest.id.toString()} <tr>
class={`list-group-item list-group-item-action ${ <th>Id</th>
contest.activeTeams === 0 ? '' : ' list-group-item-success' <th>Name</th>
}`}>{contest.name}</a <th>Status</th>
> <th>Actions</th>
{/each} </tr>
</thead>
<tbody>
{#each data.contests as contest}
<tr>
<td>{contest.id}</td>
<td>{contest.name}</td>
<td>
{#if contest.activeTeams === 0}
<span class="badge bg-secondary">Inactive</span>
{:else}
<span class="badge bg-success">Active</span>
{/if}
</td>
<td
><a
href={`/admin/contests/${contest.id.toString()}`}
class="btn btn-sm btn-outline-secondary">Details</a
></td
>
</tr>
{/each}
</tbody>
</table>
</div> </div>

View File

@ -11,12 +11,12 @@
</script> </script>
<svelte:head> <svelte:head>
<title>{data.name}</title> <title>Contest - {data.name}</title>
</svelte:head> </svelte:head>
<ConfirmModal bind:this={confirmModal} /> <ConfirmModal bind:this={confirmModal} />
<h1 style="text-align:center" class="mb-4">{data.name}</h1> <h1 style="text-align:center" class="mb-4"><i class="bi bi-flag"></i> Contest - {data.name}</h1>
<FormAlert /> <FormAlert />

View File

@ -4,8 +4,12 @@
export let data: PageData; export let data: PageData;
</script> </script>
<svelte:head>
<title>Printable Logins</title>
</svelte:head>
{#each data.teams as team} {#each data.teams as team}
<table class="table table-bordered table-striped"> <table class="table table-bordered">
<thead> <thead>
<tr> <tr>
<th>ID</th> <th>ID</th>

View File

@ -44,8 +44,6 @@
<FormAlert /> <FormAlert />
<a href="/admin/contests" class="mb-3 btn btn-outline-secondary">Cancel</a>
<form method="POST" action="?/create" use:enhance> <form method="POST" action="?/create" use:enhance>
<h4>Name</h4> <h4>Name</h4>
<input name="name" class="form-control" /> <input name="name" class="form-control" />
@ -106,9 +104,8 @@
{/each} {/each}
</div> </div>
</div> </div>
<div class="row"> <div class="d-flex flex-row justify-content-end gap-2">
<div class="text-end"> <a href="/admin/contests" class="btn btn-outline-secondary">Cancel</a>
<button type="submit" class="btn btn-success">Create</button> <button type="submit" class="btn btn-success">Create</button>
</div>
</div> </div>
</form> </form>

View File

@ -19,11 +19,29 @@
{#if data.problems.length === 0} {#if data.problems.length === 0}
<div class="alert alert-warning">No problems</div> <div class="alert alert-warning">No problems</div>
{/if} {/if}
<div class="list-group">
{#each data.problems as problem} <div class="table-responsive">
<a <table class="table table-bordered table-hover">
href={'/admin/problems/' + problem.id.toString()} <thead>
class="list-group-item list-group-item-action">{problem.friendlyName}</a <tr>
> <th>Id</th>
{/each} <th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{#each data.problems as problem}
<tr>
<td>{problem.id}</td>
<td>{problem.friendlyName}</td>
<td
><a
href={`/admin/problems/${problem.id.toString()}`}
class="btn btn-sm btn-outline-secondary">Details</a
></td
>
</tr>
{/each}
</tbody>
</table>
</div> </div>

View File

@ -28,6 +28,10 @@
let confirmModal: ConfirmModal; let confirmModal: ConfirmModal;
</script> </script>
<svelte:head>
<title>Problem - {data.problemData.friendlyName}</title>
</svelte:head>
<ConfirmModal bind:this={confirmModal} /> <ConfirmModal bind:this={confirmModal} />
<h1 style="text-align:center" class="mb-1"> <h1 style="text-align:center" class="mb-1">

View File

@ -12,7 +12,6 @@ export const load = (async () => {
id: row.id, id: row.id,
createdAt: row.createdAt, createdAt: row.createdAt,
gradedAt: row.gradedAt, gradedAt: row.gradedAt,
message: row.message,
state: row.state, state: row.state,
problemName: problems.find((problem) => { problemName: problems.find((problem) => {
return problem.id == row.problemId; return problem.id == row.problemId;

View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { PageData } from './$types'; import type { PageData } from './$types';
import { goto, invalidateAll } from '$app/navigation'; import { invalidateAll } from '$app/navigation';
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
export let data: PageData; export let data: PageData;
@ -44,61 +44,62 @@
<strong>Last Updated: </strong>{data.timestamp.toLocaleTimeString()} <strong>Last Updated: </strong>{data.timestamp.toLocaleTimeString()}
</div> </div>
</div> </div>
<div class="table-responsive">
<table class="table table-bordered table-hover"> <table class="table table-bordered table-hover">
<thead> <thead>
<tr> <tr>
<th>Team</th> <th>Team</th>
<th>Problem</th> <th>Problem</th>
<th>Submit Time</th> <th>State</th>
<th>Graded Time</th> <th>Submit Time</th>
<th>Message</th> <th>Graded Time</th>
</tr> <th>Actions</th>
</thead>
<tbody>
{#each data.submissions as submission}
<tr
on:click={() => {
goto('/admin/submissions/' + submission.id.toString());
}}
class={(submission.state == 'InReview'
? 'table-warning'
: submission.state == 'Correct'
? 'table-success'
: submission.state == 'Incorrect'
? 'table-danger'
: '') + ' submission-row'}
>
<td>
{#if submission.teamName}
{submission.teamName}
{/if}
</td>
<td>
{#if submission.problemName}
{submission.problemName}
{/if}
</td>
<td
>{submission.createdAt.toLocaleDateString() +
' ' +
submission.createdAt.toLocaleTimeString()}</td
>
<td>
{#if submission.gradedAt}
{submission.gradedAt.toLocaleDateString() +
' ' +
submission.gradedAt.toLocaleTimeString()}
{/if}
</td>
<td>{submission.message ? submission.message : ''}</td>
</tr> </tr>
{/each} </thead>
</tbody> <tbody>
</table> {#each data.submissions as submission}
<tr>
<style> <td>
.submission-row:hover { {#if submission.teamName}
cursor: pointer; {submission.teamName}
} {/if}
</style> </td>
<td>
{#if submission.problemName}
{submission.problemName}
{/if}
</td>
<td>
{#if submission.state === 'Queued'}
<span class="badge bg-secondary">Queued</span>
{:else if submission.state === 'InReview'}
<span class="badge bg-warning">In Review</span>
{:else if submission.state === 'Correct'}
<span class="badge bg-success">Correct</span>
{:else if submission.state === 'Incorrect'}
<span class="badge bg-danger">Incorrect</span>
{/if}
</td>
<td
>{submission.createdAt.toLocaleDateString() +
' ' +
submission.createdAt.toLocaleTimeString()}</td
>
<td>
{#if submission.gradedAt}
{submission.gradedAt.toLocaleDateString() +
' ' +
submission.gradedAt.toLocaleTimeString()}
{/if}
</td>
<td>
<a
href={`/admin/submissions/${submission.id.toString()}`}
class="btn btn-sm btn-outline-secondary">Details</a
>
</td>
</tr>
{/each}
</tbody>
</table>
</div>

View File

@ -31,12 +31,14 @@
</script> </script>
<svelte:head> <svelte:head>
<title>Submission</title> <title>Submission - {data.teamName} - {data.problemName}</title>
</svelte:head> </svelte:head>
<ConfirmModal bind:this={confirmModal} /> <ConfirmModal bind:this={confirmModal} />
<h1 style="text-align:center" class="mb-4">Submission</h1> <h1 style="text-align:center" class="mb-4">
<i class="bi bi-envelope-paper"></i> Submission - {data.teamName} - {data.problemName}
</h1>
{#if form && !form.success} {#if form && !form.success}
<div class="alert alert-danger">Error</div> <div class="alert alert-danger">Error</div>
@ -64,46 +66,52 @@
</div> </div>
</div> </div>
<table class="table table-bordered"> <div class="table-responsive">
<thead> <table class="table table-bordered">
<tr> <thead>
<th>Team</th> <tr>
<th>Problem</th> <th>Team</th>
<th>Submit Time</th> <th>Problem</th>
<th>Graded Time</th> <th>Status</th>
<th>Message</th> <th>Submit Time</th>
</tr> <th>Graded Time</th>
</thead> <th>Message</th>
<tbody> </tr>
<tr </thead>
class={(data.state == 'InReview' <tbody>
? 'table-warning' <tr>
: data.state == 'Correct' <td>
? 'table-success' {#if data.teamName}
: data.state == 'Incorrect' {data.teamName}
? 'table-danger' {/if}
: '') + ' submission-row'} </td>
> <td>
<td> {#if data.problemName}
{#if data.teamName} {data.problemName}
{data.teamName} {/if}
{/if} </td>
</td> <td>
<td> {#if data.state === 'Queued'}
{#if data.problemName} <span class="badge bg-secondary">Queued</span>
{data.problemName} {:else if data.state === 'InReview'}
{/if} <span class="badge bg-warning">In Review</span>
</td> {:else if data.state === 'Correct'}
<td>{data.submitTime.toLocaleDateString() + ' ' + data.submitTime.toLocaleTimeString()}</td> <span class="badge bg-success">Correct</span>
<td> {:else if data.state === 'Incorrect'}
{#if data.gradedTime} <span class="badge bg-danger">Incorrect</span>
{data.gradedTime.toLocaleDateString() + ' ' + data.gradedTime.toLocaleTimeString()} {/if}
{/if} </td>
</td> <td>{data.submitTime.toLocaleDateString() + ' ' + data.submitTime.toLocaleTimeString()}</td>
<td>{data.message ? data.message : ''}</td> <td>
</tr> {#if data.gradedTime}
</tbody> {data.gradedTime.toLocaleDateString() + ' ' + data.gradedTime.toLocaleTimeString()}
</table> {/if}
</td>
<td>{data.message ? data.message : ''}</td>
</tr>
</tbody>
</table>
</div>
{#if data.state == 'InReview'} {#if data.state == 'InReview'}
<div class="row"> <div class="row">

View File

@ -55,10 +55,27 @@
</form> </form>
{/if} {/if}
<div class="list-group"> <div class="table-responsive">
{#each data.teams as team} <table class="table table-bordered table-hover">
<a href={'/admin/teams/' + team.id.toString()} class="list-group-item list-group-item-action"> <thead>
{team.name} <tr>
</a> <th>Id</th>
{/each} <th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{#each data.teams as team}
<tr>
<td>{team.id}</td>
<td>{team.name}</td>
<td
><a href={`/admin/teams/${team.id.toString()}`} class="btn btn-sm btn-outline-secondary"
>Details</a
></td
>
</tr>
{/each}
</tbody>
</table>
</div> </div>

View File

@ -22,12 +22,12 @@
</script> </script>
<svelte:head> <svelte:head>
<title>Team</title> <title>Team - {data.team.name}</title>
</svelte:head> </svelte:head>
<ConfirmModal bind:this={confirmModal} /> <ConfirmModal bind:this={confirmModal} />
<h1 style="text-align:center" class="mb-4">{data.team.name}</h1> <h1 style="text-align:center" class="mb-4"><i class="bi bi-people"></i> Team - {data.team.name}</h1>
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
@ -51,7 +51,7 @@
</div> </div>
</div> </div>
<table class="table table-bordered table-striped"> <table class="table table-bordered">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>