[web] Cleanup UI
This commit is contained in:
parent
1c8ca53e45
commit
7f1c1c2dfb
@ -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>
|
||||||
|
|||||||
@ -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 />
|
||||||
|
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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">
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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">
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user