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

✨ New dashboard done

Browse Source
This commit is contained in:
Mawoka
2023-05-14 11:27:46 +02:00
parent 75d736c0ad
commit fd9e5dec38
8 changed files with 139 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/buttons/brown.svelte
+6 -2
View File
@@ -18,7 +18,11 @@
<a
{href}
{target}
class="text-black hover:bg-opacity-80 w-full px-4 py-2 leading-5 text-black transition-all duration-200 transform bg-[#B07156] rounded text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 outline-none"
{disabled}
class:opacity-50={disabled}
class:cursor-not-allowed={disabled}
class:pointer-events-none={disabled}
class="text-black hover:bg-opacity-80 w-full px-4 py-2 leading-5 transition-all duration-200 transform bg-[#B07156] rounded text-center outline-none"
on:click
class:flex
class:justify-center={flex}
@@ -29,7 +33,7 @@
<button
{disabled}
{type}
class="text-black hover:opacity-80 w-full px-4 py-2 leading-5 text-black transition-all duration-200 transform bg-[#B07156] rounded text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 outline-none"
class="text-black hover:opacity-80 w-full px-4 py-2 leading-5 transition-all duration-200 transform bg-[#B07156] rounded text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 outline-none"
on:click
class:flex
class:justify-center={flex}
frontend/src/lib/i18n/locales/en.json
+28 -1
View File
@@ -169,7 +169,12 @@
"point_plural": "Points",
"back": "Back",
"finish": "Finish",
"normal": "Normal"
"normal": "Normal",
"selected": "Selected",
"select": "Select",
"quiz": "Quiz",
"quiztivity": "Quiztivity",
"next": "Next"
},
"editor": {
"time_in_seconds": "Time in seconds",
@@ -344,5 +349,27 @@
"old_school_mode": "Old-School",
"old_school_mode_description": "Questions and images will be shown on both admins screen and on the screen of the players",
"start_game": "Start Game"
},
"quiztivity": {
"editor": {
"select_page_type": "Select Page Type",
"move_left": "Move left",
"move_right": "Move right",
"title_placeholder": "Enter title here",
"add_new": "Add new",
"delete": "Delete"
},
"memory": {
"editor": {
"add_card": "Add card",
"upload_image": "Upload image",
"add_pair": "Add pair"
}
},
"play": {
"memory": {
"try_count": "Tries: {{try_count}}"
}
}
}
}
frontend/src/lib/quiztivity/add_new_slide.svelte
+2 -2
View File
@@ -12,12 +12,12 @@
export let type: QuizTivityTypes | undefined;
const PageTypes = [
{
/* {
name: 'Pdf',
description: 'Upload a PDF!',
type: QuizTivityTypes.PDF,
svg: undefined
},
},*/
{
name: 'Memory',
description: 'Matching Pairs game',
frontend/src/lib/quiztivity/editor.svelte
+2 -1
View File
@@ -41,7 +41,8 @@
$: handle_slide_add(selected_type);
const delete_slide = () => {
data.pages.slice(selected_slide, 1);
console.log(selected_slide);
data.pages.splice(selected_slide, 1);
data.pages = data.pages;
};
frontend/src/routes/dashboard/+page.svelte
+79 -40
View File
@@ -11,6 +11,8 @@
// import Spinner from "$lib/Spinner.svelte";
import Fuse from 'fuse.js';
import BrownButton from '$lib/components/buttons/brown.svelte';
import type { PageData } from './$types';
import { fly } from 'svelte/transition';
// import GrayButton from "$lib/components/buttons/gray.svelte";
@@ -25,60 +27,73 @@
questions: Question[];
}
export let data: PageData;
let search_term = '';
let start_game = null;
signedIn.set(true);
navbarVisible.set(true);
const { t } = getLocalization();
let quizzes_to_show = [];
let quizzes: Array<any>;
let items_to_show = [];
let all_items: Array<any>;
let fuse;
/* const minisearch = new MiniSearch({
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?page_size=100');
quizzes_to_show = await res.json();
fuse = new Fuse(quizzes_to_show, {
keys: ['title', 'description', 'questions.question'],
items_to_show = [];
for (let i = 0; i < data.quizzes.length; i++) {
items_to_show.push({ ...data.quizzes[i], type: 'quiz' });
}
for (let i = 0; i < data.quiztivities.length; i++) {
items_to_show.push({ ...data.quiztivities[i], type: 'quiztivity' });
}
fuse = new Fuse(items_to_show, {
keys: ['title', 'description', 'questions.title'],
findAllMatches: true
});
quizzes = quizzes_to_show;
for (let i = 0; i < quizzes.length; i++) {
id_to_position_map[quizzes[i].id] = i;
all_items = items_to_show;
for (let i = 0; i < all_items.length; i++) {
id_to_position_map[all_items[i].id] = i;
}
return quizzes_to_show;
return all_items;
};
let suggestions = [];
const search = () => {
if (search_term === '') {
quizzes_to_show = [];
quizzes_to_show = quizzes;
quizzes_to_show = quizzes_to_show;
items_to_show = all_items;
} else {
const res = fuse.search(search_term);
console.log(res, 'search_res');
quizzes_to_show = [];
items_to_show = [];
for (const quiz_data of res) {
quizzes_to_show.push(quiz_data.item);
items_to_show.push(quiz_data.item);
}
quizzes_to_show = quizzes_to_show;
items_to_show = items_to_show;
}
};
$: {
search_term;
// console.log(search_term);
search();
}
const deleteQuiz = async (to_delete: string, type: 'quiz' | 'quiztivity') => {
if (!confirm('Do you really want to delete this quiz?')) {
return;
}
if (type === 'quiz') {
await fetch(`/api/v1/quiz/delete/${to_delete}`, {
method: 'DELETE'
});
} else {
await fetch(`/api/v1/quiztivity/${to_delete}`, {
method: 'DELETE'
});
}
window.location.reload();
};
let create_button_clicked = false;
</script>
<svelte:head>
@@ -104,7 +119,19 @@
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>
{#if create_button_clicked}
<div class="flex gap-2" transition:fly={{ y: 10 }}>
<BrownButton href="/create">{$t('words.quiz')}</BrownButton>
<BrownButton href="/quiztivity/create">{$t('words.quiztivity')}</BrownButton
>
</div>
{:else}
<BrownButton
on:click={() => {
create_button_clicked = true;
}}>{$t('words.create')}</BrownButton
>
{/if}
<BrownButton href="/import">{$t('words.import')}</BrownButton>
<BrownButton href="/results">{$t('words.results')}</BrownButton>
<BrownButton href="/account/settings">
@@ -123,8 +150,7 @@
<button
on:click={() => {
search_term = '';
quizzes_to_show = quizzes;
suggestions = [];
items_to_show = all_items;
}}
>
<svg
@@ -146,7 +172,7 @@
</div>
</div>
<div class="flex flex-col gap-4 mt-4 px-2">
{#each quizzes_to_show as quiz}
{#each items_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]"
>
@@ -160,28 +186,38 @@
/>
{/if}
</div>
<div class="my-auto mx-auto max-h-full">
<div class="my-auto mx-auto max-h-full overflow-hidden">
<p class="text-xl text-center">{@html quiz.title}</p>
<p class="text-sm text-center text-clip overflow-hidden">
{@html quiz.description}
{@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}"
<BrownButton
href={quiz.type === 'quiz'
? `/edit?quiz_id=${quiz.id}`
: `/quiztivity/edit?id=${quiz.id}`}
>{$t('words.edit')}</BrownButton
>
{#if quiz.type === 'quiz'}
<BrownButton
on:click={() => {
start_game = quiz.id;
}}
>
{$t('words.start')}
</BrownButton>
{:else}
<BrownButton href="/quiztivity/play?id={quiz.id}">
{$t('words.play')}
</BrownButton>
{/if}
<BrownButton
on:click={() => {
start_game = quiz.id;
}}
>
{$t('words.start')}
</BrownButton>
<BrownButton
on:click={() => {
// deleteQuiz(quiz.id);
deleteQuiz(quiz.id, quiz.type);
}}
flex={true}
>
@@ -201,7 +237,10 @@
/>
</svg>
</BrownButton>
<BrownButton href="/api/v1/eximport/{quiz.id}" flex={true}
<BrownButton
href="/api/v1/eximport/{quiz.id}"
flex={true}
disabled={quiz.type !== 'quiz'}
><!-- heroicons/download -->
<svg
class="w-5 h-5"
frontend/src/routes/dashboard/+page.ts
+18
View File
@@ -0,0 +1,18 @@
/*
* 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 quiz_res = await fetch('/api/v1/quiz/list?page_size=100');
const quizzes = await quiz_res.json();
const quiztivity_res = await fetch('/api/v1/quiztivity/');
const quiztivities = await quiztivity_res.json();
return {
quizzes,
quiztivities
};
}) satisfies PageLoad;
frontend/src/routes/quiztivity/create/+page.svelte
+2 -1
View File
@@ -6,6 +6,7 @@
<script lang="ts">
import type { Data } from '$lib/quiztivity/types';
import Editor from '$lib/quiztivity/editor.svelte';
import { goto } from '$app/navigation';
let data: Data = { pages: [], id: undefined, title: '' };
let saving = false;
@@ -24,7 +25,7 @@
body: stringification
});
if (res.ok) {
// await goto("/dashboard")
await goto('/dashboard');
} else {
alert("Couldn't save");
}
frontend/src/routes/quiztivity/edit/+page.svelte
+2 -1
View File
@@ -6,6 +6,7 @@
<script lang="ts">
import type { PageData } from './$types';
import Editor from '../../../lib/quiztivity/editor.svelte';
import { goto } from '$app/navigation';
export let data: PageData;
@@ -25,7 +26,7 @@
body: stringification
});
if (res.ok) {
// await goto("/dashboard")
await goto('/dashboard');
} else {
alert("Couldn't save");
}