LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ New dashboard

Browse Source
This commit is contained in:
Mawoka
2023-05-13 22:49:39 +02:00
parent f23fb4f625
commit 75d736c0ad
1 changed files with 106 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/dashboard/+page.svelte
+106 -31
View File
@@ -8,10 +8,12 @@
import { getLocalization } from '$lib/i18n';
import Footer from '$lib/footer.svelte';
import { navbarVisible, signedIn } from '$lib/stores';
import Spinner from '$lib/Spinner.svelte';
// import Spinner from "$lib/Spinner.svelte";
import Fuse from 'fuse.js';
import BrownButton from '$lib/components/buttons/brown.svelte';
// import GrayButton from "$lib/components/buttons/gray.svelte";
interface QuizData {
id: string;
public: boolean;
@@ -24,6 +26,7 @@
}
let search_term = '';
let start_game = null;
signedIn.set(true);
navbarVisible.set(true);
const { t } = getLocalization();
@@ -32,15 +35,15 @@
let quizzes: Array<any>;
let fuse;
/* const minisearch = new MiniSearch({
fields: ['title', 'description'],
idField: 'id',
storeFields: ['id']
})*/
fields: ['title', 'description'],
idField: 'id',
storeFields: ['id']
})*/
let id_to_position_map = {};
const getData = async (): Promise<Array<QuizData>> => {
const res = await fetch('/api/v1/quiz/list');
const res = await fetch('/api/v1/quiz/list?page_size=100');
quizzes_to_show = await res.json();
fuse = new Fuse(quizzes_to_show, {
keys: ['title', 'description', 'questions.question'],
@@ -95,12 +98,12 @@
/>
</svg>
{:then quizzes}
<div class="flex flex-col w-fit mx-auto">
<div class="flex flex-col w-full mx-auto">
<!-- <button
class='px-4 py-2 font-medium tracking-wide text-gray-500 whitespace-nowrap dark:text-gray-400 capitalize transition-colors dark:bg-gray-700 duration-200 transform bg-[#B07156] rounded-md hover:bg-green-600 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80'>
Primary
</button>-->
<div class="w-full grid grid-cols-4 gap-2">
class='px-4 py-2 font-medium tracking-wide text-gray-500 whitespace-nowrap dark:text-gray-400 capitalize transition-colors dark:bg-gray-700 duration-200 transform bg-[#B07156] rounded-md hover:bg-green-600 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80'>
Primary
</button>-->
<div class="w-full grid lg:grid-cols-4 gap-2 grid-cols-2 px-4">
<BrownButton href="/create">{$t('words.create')}</BrownButton>
<BrownButton href="/import">{$t('words.import')}</BrownButton>
<BrownButton href="/results">{$t('words.results')}</BrownButton>
@@ -109,26 +112,82 @@
</BrownButton>
</div>
{#if quizzes.length !== 0}
{#await import('$lib/dashboard/main_slider.svelte')}
<Spinner />
{:then c}
<div class="flex justify-center pt-4 w-full">
<div class="flex justify-center pt-4 w-full">
<div>
<div>
<div>
<input
bind:value={search_term}
class="p-2 rounded-lg outline-none text-center w-96 dark:bg-gray-700"
placeholder={$t('dashboard.search_for_own_quizzes')}
/>
<button
<input
bind:value={search_term}
class="p-2 rounded-lg outline-none text-center w-96 dark:bg-gray-700"
placeholder={$t('dashboard.search_for_own_quizzes')}
/>
<button
on:click={() => {
search_term = '';
quizzes_to_show = quizzes;
suggestions = [];
}}
>
<svg
class="h-8 inline-block"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div>
</div>
<div class="flex flex-col gap-4 mt-4 px-2">
{#each quizzes_to_show as quiz}
<div
class="grid grid-cols-2 lg:grid-cols-3 w-full rounded border-[#B07156] border-2 p-2 h-[20vh] overflow-hidden max-h-[20vh]"
>
<div class="hidden lg:flex w-auto h-full items-center relative">
{#if quiz.cover_image}
<img
src={quiz.cover_image}
alt="user provided"
loading="lazy"
class="shrink-0 max-w-full max-h-full absolute"
/>
{/if}
</div>
<div class="my-auto mx-auto max-h-full">
<p class="text-xl text-center">{@html quiz.title}</p>
<p class="text-sm text-center text-clip overflow-hidden">
{@html quiz.description}
</p>
</div>
<div
class="grid grid-cols-2 grid-rows-2 ml-auto gap-2 w-fit self-end my-auto"
>
<BrownButton href="/edit?quiz_id={quiz.id}"
>{$t('words.edit')}</BrownButton
>
<BrownButton
on:click={() => {
search_term = '';
quizzes_to_show = quizzes;
suggestions = [];
start_game = quiz.id;
}}
>
{$t('words.start')}
</BrownButton>
<BrownButton
on:click={() => {
// deleteQuiz(quiz.id);
}}
flex={true}
>
<!-- heroicons/trash -->
<svg
class="h-8 inline-block"
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -138,15 +197,31 @@
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
</button>
</BrownButton>
<BrownButton href="/api/v1/eximport/{quiz.id}" flex={true}
><!-- heroicons/download -->
<svg
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>
</BrownButton>
</div>
</div>
</div>
<svelte:component this={c.default} bind:quizzes={quizzes_to_show} />
{/await}
{/each}
</div>
{:else}
<p>
{$t('overview_page.no_quizzes')}