From 4b24c3b5be42b5a9803fdd2f5da87072a191fc8c Mon Sep 17 00:00:00 2001
From: Mawoka <mawoka@e.email>
Date: Fri, 17 Jun 2022 18:24:14 +0200
Subject: [PATCH] :sparkles: Added time-input to new editor

---
 classquiz/routers/editor.py         | 12 ++---
 frontend/src/lib/editor/card.svelte | 70 ++++++++++++++++++++++-------
 2 files changed, 62 insertions(+), 20 deletions(-)

diff --git a/classquiz/routers/editor.py b/classquiz/routers/editor.py
index 1f1740d..e6eaca5 100644
--- a/classquiz/routers/editor.py
+++ b/classquiz/routers/editor.py
@@ -96,11 +96,13 @@ async def finish_edit(edit_id: str, quiz_input: QuizInput):
     def mark_image_for_deletion(new: str | None, index: int, old_quiz: Quiz | None):
         if old_quiz is None:
             return
-        print(new, old_quiz.questions[index]["image"])
-        if new == old_quiz.questions[index]["image"]:
-            return
-        else:
-            images_to_delete.append(old_quiz.questions[index]["image"])
+        try:
+            if new == old_quiz.questions[index]["image"]:
+                return
+            else:
+                images_to_delete.append(old_quiz.questions[index]["image"])
+        except IndexError:
+            pass
 
     for i, question in enumerate(quiz_input.questions):
         image = question.image
diff --git a/frontend/src/lib/editor/card.svelte b/frontend/src/lib/editor/card.svelte
index 3258d87..d49dbec 100644
--- a/frontend/src/lib/editor/card.svelte
+++ b/frontend/src/lib/editor/card.svelte
@@ -9,16 +9,25 @@
 	export let data: EditorData;
 	export let selected_question: number;
 	export let edit_id: string;
-
-	let question = data.questions[selected_question];
-	$: question = data.questions[selected_question];
 	const empty_answer: Answer = {
 		right: false,
 		answer: ''
 	};
-	console.log(question.image);
 	let uppyOpen = false;
-	$: console.log(uppyOpen);
+
+	const correctTimeInput = (_) => {
+		let time = data.questions[selected_question].time;
+		if (time === null || time === undefined) {
+			data.questions[selected_question].time = '';
+			time = '';
+		}
+		if (data.questions[selected_question].time > 3) {
+			data.questions[selected_question].time = data.questions[selected_question].time
+				.toString()
+				.slice(0, 3);
+		}
+	};
+	$: correctTimeInput(data.questions[selected_question].time);
 </script>
 
 <div class="w-full h-full pb-20 px-20">
@@ -40,22 +49,22 @@
 			<div class="flex justify-center pt-10 w-full">
 				<input
 					type="text"
-					bind:value={question.question}
+					bind:value={data.questions[selected_question].question}
 					placeholder="No title..."
 					class="p-3 rounded-lg border-gray-500 border text-center w-2/3 text-lg font-semibold placeholder:italic placeholder:font-normal dark:bg-gray-500"
 					class:bg-yellow-500={!reach(dataSchema, 'questions[].question').isValidSync(
-						question.question
+						data.questions[selected_question].question
 					)}
 				/>
 			</div>
-			{#if question.image != undefined && question.image !== ''}
+			{#if data.questions[selected_question].image != undefined && data.questions[selected_question].image !== ''}
 				<div class="flex justify-center pt-10 w-full max-h-72 w-full">
 					<img
-						src={question.image}
+						src={data.questions[selected_question].image}
 						alt="not available"
 						class="max-h-72 h-auto w-auto"
 						on:contextmenu|preventDefault={() => {
-							question.image = '';
+							data.questions[selected_question].image = '';
 						}}
 					/>
 				</div>
@@ -72,13 +81,40 @@
 					/>
 				{/await}
 			{/if}
+			<div class="flex justify-center pt-10 w-full">
+				<div>
+					<svg
+						class="w-8 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+					<input
+						type="number"
+						max="999"
+						min="1"
+						class="w-20 bg-transparent rounded-lg text-lg border-2 border-gray-500 p-1"
+						bind:value={data.questions[selected_question].time}
+					/>
+				</div>
+			</div>
+
 			<div class="flex justify-center pt-10 w-full">
 				<div class="grid grid-cols-2 gap-4 w-full px-10">
-					{#each question.answers as answer, index}
+					{#each data.questions[selected_question].answers as answer, index}
 						<div
 							on:contextmenu|preventDefault={() => {
-								question.answers.splice(index, 1);
-								question.answers = question.answers;
+								data.questions[selected_question].answers.splice(index, 1);
+								data.questions[selected_question].answers =
+									data.questions[selected_question].answers;
 							}}
 							out:fade={{ duration: 150 }}
 							class="p-4 rounded-lg flex justify-center w-full transition"
@@ -99,6 +135,7 @@
 								type="button"
 								on:click={() => {
 									answer.right = !answer.right;
+									console.log(answer.right);
 								}}
 							>
 								{#if answer.right}
@@ -135,13 +172,16 @@
 							</button>
 						</div>
 					{/each}
-					{#if question.answers.length < 4}
+					{#if data.questions[selected_question].answers.length < 4}
 						<button
 							class="p-4 rounded-lg bg-transparent border-gray-500 border-2 hover:bg-gray-300 transition dark:hover:bg-gray-600"
 							type="button"
 							in:fade={{ duration: 150 }}
 							on:click={() => {
-								question.answers = [...question.answers, { empty_answer }];
+								data.questions[selected_question].answers = [
+									...data.questions[selected_question].answers,
+									{ ...empty_answer }
+								];
 							}}
 						>
 							<span class="italic text-center">Add an answer</span>