orosmatthew/bw-hspc-contest-env
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[web] Cleanup UI

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
web/src/routes/admin/contests/+page.svelte
View File

@ -14,13 +14,36 @@
<a href="/admin/contests/create" class="btn btn-outline-success">Create</a>
</div>
<div class="mt-3 list-group">
{#each data.contests as contest}
<a
href={'/admin/contests/' + contest.id.toString()}
class={`list-group-item list-group-item-action ${
contest.activeTeams === 0 ? '' : ' list-group-item-success'
}`}>{contest.name}</a
>
{/each}
<div class="mt-3 table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Status</th>
<th>Actions</th>
</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>

4
web/src/routes/admin/contests/[contestId]/+page.svelte
View File

@ -11,12 +11,12 @@
</script>
<svelte:head>
<title>{data.name}</title>
<title>Contest - {data.name}</title>
</svelte:head>
<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 />

6
web/src/routes/admin/contests/[contestId]/logins/+page.svelte
View File

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

9
web/src/routes/admin/contests/create/+page.svelte
View File

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

32
web/src/routes/admin/problems/+page.svelte
View File

@ -19,11 +19,29 @@
{#if data.problems.length === 0}
<div class="alert alert-warning">No problems</div>
{/if}
<div class="list-group">
{#each data.problems as problem}
<a
href={'/admin/problems/' + problem.id.toString()}
class="list-group-item list-group-item-action">{problem.friendlyName}</a
>
{/each}
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Id</th>
<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>

4
web/src/routes/admin/problems/[problemId]/+page.svelte
View File

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

1
web/src/routes/admin/submissions/+page.server.ts
View File

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

117
web/src/routes/admin/submissions/+page.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import type { PageData } from './$types';
import { goto, invalidateAll } from '$app/navigation';
import { invalidateAll } from '$app/navigation';
import { onDestroy, onMount } from 'svelte';
export let data: PageData;
@ -44,61 +44,62 @@
<strong>Last Updated: </strong>{data.timestamp.toLocaleTimeString()}
</div>
</div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Team</th>
<th>Problem</th>
<th>Submit Time</th>
<th>Graded Time</th>
<th>Message</th>
</tr>
</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>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Team</th>
<th>Problem</th>
<th>State</th>
<th>Submit Time</th>
<th>Graded Time</th>
<th>Actions</th>
</tr>
{/each}
</tbody>
</table>
<style>
.submission-row:hover {
cursor: pointer;
}
</style>
</thead>
<tbody>
{#each data.submissions as submission}
<tr>
<td>
{#if submission.teamName}
{submission.teamName}
{/if}
</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>

92
web/src/routes/admin/submissions/[submissionId]/+page.svelte
View File

@ -31,12 +31,14 @@
</script>
<svelte:head>
<title>Submission</title>
<title>Submission - {data.teamName} - {data.problemName}</title>
</svelte:head>
<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}
<div class="alert alert-danger">Error</div>
@ -64,46 +66,52 @@
</div>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Team</th>
<th>Problem</th>
<th>Submit Time</th>
<th>Graded Time</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<tr
class={(data.state == 'InReview'
? 'table-warning'
: data.state == 'Correct'
? 'table-success'
: data.state == 'Incorrect'
? 'table-danger'
: '') + ' submission-row'}
>
<td>
{#if data.teamName}
{data.teamName}
{/if}
</td>
<td>
{#if data.problemName}
{data.problemName}
{/if}
</td>
<td>{data.submitTime.toLocaleDateString() + ' ' + data.submitTime.toLocaleTimeString()}</td>
<td>
{#if data.gradedTime}
{data.gradedTime.toLocaleDateString() + ' ' + data.gradedTime.toLocaleTimeString()}
{/if}
</td>
<td>{data.message ? data.message : ''}</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Team</th>
<th>Problem</th>
<th>Status</th>
<th>Submit Time</th>
<th>Graded Time</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<tr>
<td>
{#if data.teamName}
{data.teamName}
{/if}
</td>
<td>
{#if data.problemName}
{data.problemName}
{/if}
</td>
<td>
{#if data.state === 'Queued'}
<span class="badge bg-secondary">Queued</span>
{:else if data.state === 'InReview'}
<span class="badge bg-warning">In Review</span>
{:else if data.state === 'Correct'}
<span class="badge bg-success">Correct</span>
{:else if data.state === 'Incorrect'}
<span class="badge bg-danger">Incorrect</span>
{/if}
</td>
<td>{data.submitTime.toLocaleDateString() + ' ' + data.submitTime.toLocaleTimeString()}</td>
<td>
{#if data.gradedTime}
{data.gradedTime.toLocaleDateString() + ' ' + data.gradedTime.toLocaleTimeString()}
{/if}
</td>
<td>{data.message ? data.message : ''}</td>
</tr>
</tbody>
</table>
</div>
{#if data.state == 'InReview'}
<div class="row">

29
web/src/routes/admin/teams/+page.svelte
View File

@ -55,10 +55,27 @@
</form>
{/if}
<div class="list-group">
{#each data.teams as team}
<a href={'/admin/teams/' + team.id.toString()} class="list-group-item list-group-item-action">
{team.name}
</a>
{/each}
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Id</th>
<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>

6
web/src/routes/admin/teams/[teamId]/+page.svelte
View File

@ -22,12 +22,12 @@
</script>
<svelte:head>
<title>Team</title>
<title>Team - {data.team.name}</title>
</svelte:head>
<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="col-6">
@ -51,7 +51,7 @@
</div>
</div>
<table class="table table-bordered table-striped">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>