✨ Started working on results-UI
This commit is contained in:
Mawoka
@@ -0,0 +1,47 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import type { PageData } from './$types';
|
||||
|
||||
export let data: PageData;
|
||||
</script>
|
||||
|
||||
<div class="w-full">
|
||||
<div class="flex justify-center w-full">
|
||||
<div class="w-11/12 m-auto">
|
||||
<table class="w-full">
|
||||
<tr class="border-b-2 dark:border-gray-500 text-left border-gray-300">
|
||||
<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300"
|
||||
>Quiz Title</th
|
||||
>
|
||||
<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300"
|
||||
>Date Played</th
|
||||
>
|
||||
<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300"
|
||||
>Player count</th
|
||||
>
|
||||
<th>Note</th>
|
||||
</tr>
|
||||
{#each data.results as result}
|
||||
<tr class="text-left">
|
||||
<td class="border-r dark:border-gray-500 p-1 border-gray-300"
|
||||
><a href="/results/{result.id}" class="underline text-lg"
|
||||
>{result.quiz.title}</a
|
||||
></td
|
||||
>
|
||||
<td class="border-r dark:border-gray-500 p-1 border-gray-300"
|
||||
>{new Date(result.timestamp).toLocaleString()}</td
|
||||
>
|
||||
<td class="border-r dark:border-gray-500 p-1 border-gray-300"
|
||||
>{Object.keys(result.player_scores).length}</td
|
||||
>
|
||||
<td>{result.note}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
/*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async ({ fetch }) => {
|
||||
const res = await fetch('/api/v1/results/list?include_quiz=true');
|
||||
let json;
|
||||
if (res.ok) {
|
||||
json = await res.json();
|
||||
} else {
|
||||
json = [];
|
||||
}
|
||||
return {
|
||||
results: json
|
||||
};
|
||||
}) satisfies PageLoad;
|
||||
@@ -0,0 +1,76 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import type { PageData } from './$types';
|
||||
import PlayerOverview from './player_overview.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
enum SelectedTab {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
Overview,
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
Players,
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
Questions
|
||||
}
|
||||
|
||||
let selected_tab: SelectedTab = SelectedTab.Overview;
|
||||
</script>
|
||||
|
||||
<div class="w-full">
|
||||
<div class="flex flex-row w-full justify-around border-b-2 border-gray-500 mb-4">
|
||||
<div
|
||||
class="w-full py-2 flex transition-all hover:opacity-100"
|
||||
class:text-lg={selected_tab === SelectedTab.Overview}
|
||||
class:opacity-60={selected_tab !== SelectedTab.Overview}
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
selected_tab = SelectedTab.Overview;
|
||||
}}
|
||||
class="m-auto w-full h-full"
|
||||
>Overview
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="w-full py-2 flex border-x-2 border-gray-500 transition-all hover:opacity-100"
|
||||
class:text-lg={selected_tab === SelectedTab.Players}
|
||||
class:opacity-60={selected_tab !== SelectedTab.Players}
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
selected_tab = SelectedTab.Players;
|
||||
}}
|
||||
class="m-auto w-full h-full"
|
||||
>
|
||||
Players
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="w-full py-2 flex transition-all hover:opacity-100"
|
||||
class:text-lg={selected_tab === SelectedTab.Questions}
|
||||
class:opacity-60={selected_tab !== SelectedTab.Questions}
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
selected_tab = SelectedTab.Questions;
|
||||
}}
|
||||
class="m-auto w-full h-full"
|
||||
>Questions
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{#if selected_tab === SelectedTab.Overview}{:else if selected_tab === SelectedTab.Questions}{:else if selected_tab === SelectedTab.Players}
|
||||
<div>
|
||||
<PlayerOverview
|
||||
custom_field={data.results.custom_field_data}
|
||||
scores={data.results.player_scores}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
/*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async ({ params, fetch }) => {
|
||||
const res = await fetch(`/api/v1/results/${params.result_id}?include_quiz=true`);
|
||||
let json;
|
||||
if (res.ok) {
|
||||
json = await res.json();
|
||||
} else {
|
||||
json = undefined;
|
||||
}
|
||||
return {
|
||||
results: json
|
||||
};
|
||||
}) satisfies PageLoad;
|
||||
@@ -0,0 +1,44 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<script lang="ts">
|
||||
export let scores: {
|
||||
[key: string]: string;
|
||||
};
|
||||
export let custom_field: {
|
||||
[key: string]: string;
|
||||
};
|
||||
|
||||
let usernames = Object.keys(scores);
|
||||
</script>
|
||||
|
||||
<div class="w-full">
|
||||
<div class="flex justify-center w-full">
|
||||
<table class="w-11/12 m-auto">
|
||||
<tr class="border-b-2 dark:border-gray-500 text-left border-gray-300">
|
||||
<th class="border-r dark:border-gray-500 p-1 mx-auto border-gray-300"
|
||||
>Player name</th
|
||||
>
|
||||
<th class="p-1 mx-auto">Player Score</th>
|
||||
{#if custom_field}
|
||||
<th class="border-l dark:border-gray-500 p-1 mx-auto border-gray-300"
|
||||
>Custom field</th
|
||||
>
|
||||
{/if}
|
||||
</tr>
|
||||
{#each usernames as uname}
|
||||
<tr class="text-left">
|
||||
<td class="border-r dark:border-gray-500 p-1 border-gray-300">{uname}</td>
|
||||
<td class="p-1">{scores[uname]}</td>
|
||||
{#if custom_field}
|
||||
<td class="border-l dark:border-gray-500 p-1 border-gray-300"
|
||||
>{custom_field[uname]}</td
|
||||
>
|
||||
{/if}
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
<!--
|
||||
- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import type { QuizData } from '$lib/quiz_types';
|
||||
|
||||
export let quiz: QuizData;
|
||||
export let answers: {
|
||||
username: string;
|
||||
answer: string;
|
||||
right: boolean;
|
||||
tike_taken: number;
|
||||
score: number;
|
||||
}[];
|
||||
</script>
|
||||
Reference in New Issue
Block a user