✨ Implemented in Editor

2022-10-04 12:38:04 +02:00
parent 4a54ed5bf8
commit 99bd6cc329
8 changed files with 162 additions and 14 deletions
@@ -0,0 +1,83 @@
+<!--
+  - 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 { EditorData, VotingAnswer } from '../quiz_types';
+	import { fade } from 'svelte/transition';
+	import { reach } from 'yup';
+	import { getLocalization } from '$lib/i18n';
+	import { VotingQuestionSchema } from '$lib/yupSchemas';
+
+	const { t } = getLocalization();
+
+	const empty_answer: VotingAnswer = {
+		answer: '',
+		image: undefined
+	};
+
+	export let selected_question: number;
+	export let data: EditorData;
+	if (!Array.isArray(data.questions[selected_question].answers)) {
+		data.questions[selected_question].answers = [];
+	}
+</script>
+
+<!--
+  - 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/.
+  -->
+
+<div class="grid grid-cols-2 gap-4 w-full px-10">
+	{#if Array.isArray(data.questions[selected_question].answers)}
+		{#each data.questions[selected_question].answers as answer, index}
+			<div
+				out:fade={{ duration: 150 }}
+				class="p-4 rounded-lg flex justify-center w-full transition"
+				class:bg-yellow-500={!reach(VotingQuestionSchema, 'answer').isValidSync(
+					answer.answer
+				)}
+				class:dark:bg-gray-500={answer.answer}
+				class:bg-gray-300={answer.answer}
+			>
+				<input
+					bind:value={answer.answer}
+					type="text"
+					on:contextmenu|preventDefault={() => {
+						data.questions[selected_question].answers.splice(index, 1);
+						data.questions[selected_question].answers =
+							data.questions[selected_question].answers;
+					}}
+					class="border-b-2 border-dotted w-5/6 text-center rounded-lg"
+					style="background-color: {answer.color ?? 'transparent'}"
+					placeholder="Empty..."
+				/>
+				<input
+					class="rounded-lg p-1"
+					type="color"
+					bind:value={answer.color}
+					on:contextmenu|preventDefault={() => {
+						answer.color = null;
+					}}
+				/>
+			</div>
+		{/each}
+	{/if}
+	{#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={() => {
+				data.questions[selected_question].answers = [
+					...data.questions[selected_question].answers,
+					{ ...empty_answer }
+				];
+			}}
+		>
+			<span class="italic text-center">{$t('editor_page.add_an_answer')}</span>
+		</button>
+	{/if}
+</div>