From a22cf647fd9091474b3837af61813c7e8aceeff4 Mon Sep 17 00:00:00 2001
From: Mawoka <mawoka@e.email>
Date: Thu, 16 Jun 2022 18:02:01 +0200
Subject: [PATCH] :construction: Progress on new editor

---
 frontend/src/lib/editor.svelte               | 221 ++-----------------
 frontend/src/lib/editor/settings-card.svelte |  32 +++
 frontend/src/lib/editor/sidebar.svelte       | 192 ++++++++++++++++
 frontend/src/lib/quiz_types.ts               |   7 +
 frontend/src/routes/create.svelte            |   3 +-
 frontend/src/routes/edit.svelte              |   2 +-
 6 files changed, 249 insertions(+), 208 deletions(-)
 create mode 100644 frontend/src/lib/editor/settings-card.svelte
 create mode 100644 frontend/src/lib/editor/sidebar.svelte

diff --git a/frontend/src/lib/editor.svelte b/frontend/src/lib/editor.svelte
index 8396fcc..3c3fd5a 100644
--- a/frontend/src/lib/editor.svelte
+++ b/frontend/src/lib/editor.svelte
@@ -2,33 +2,18 @@
 	import { getLocalization } from '$lib/i18n';
 	import * as yup from 'yup';
 	import { dataSchema } from '$lib/yupSchemas';
+	import type { EditorData, Question, Answer } from './quiz_types';
+	import Sidebar from '$lib/editor/sidebar.svelte';
+	import SettingsCard from '$lib/editor/settings-card.svelte';
 
 	const { t } = getLocalization();
 
 	let schemaInvalid = false;
 	let yupErrorMessage = '';
 
-	interface Data {
-		public: boolean;
-		title: string;
-		description: string;
-		questions: Question[];
-	}
-
-	interface Question {
-		question: string;
-		time: string;
-		image?: string;
-		answers: Answer[];
-	}
-
-	interface Answer {
-		right: boolean;
-		answer: string;
-	}
-
-	export let data: Data;
+	export let data: EditorData;
 	export let submit_button_text = 'Create';
+	let selected_question = -1;
 	let imgur_links_valid = false;
 
 	const empty_question: Question = {
@@ -43,7 +28,7 @@
 		]
 	};
 
-	const validateInput = async (data: Data) => {
+	const validateInput = async (data: EditorData) => {
 		try {
 			await dataSchema.validate(data, { abortEarly: false });
 			schemaInvalid = false;
@@ -79,189 +64,13 @@
 	};
 </script>
 
-<label class="pl-2 w-2/6 flex gap-2 flex-row">
-	<input type="checkbox" class="w-fit" bind:checked={data.public} />
-	<span class="w-fit">{$t('words.public')}?</span>
-</label>
-<label class="pl-2 flex flex-row gap-2 w-3/5">
-	<span class="w-fit">{$t('words.title')}:</span>
-	<input
-		type="text"
-		placeholder={$t('words.title')}
-		bind:value={data.title}
-		class="text-black bg-inherit border-dotted border-b-2 border-black w-full dark:text-gray-200"
-		class:border-red-600={!yup.reach(dataSchema, 'title').isValidSync(data.title)}
-		class:border-solid={!yup.reach(dataSchema, 'title').isValidSync(data.title)}
-		class:border-2={!yup.reach(dataSchema, 'title').isValidSync(data.title)}
-	/>
-</label>
-<label class="pl-2 flex flex-row gap-2 w-3/5">
-	{$t('words.description')}:
-	<textarea
-		placeholder={$t('words.description')}
-		bind:value={data.description}
-		class="text-black w-full dark:text-gray-200 dark:bg-gray-800 rounded-lg p-1"
-		class:border-red-600={!yup.reach(dataSchema, 'description').isValidSync(data.description)}
-		class:border-solid={!yup.reach(dataSchema, 'description').isValidSync(data.description)}
-		class:border-2={!yup.reach(dataSchema, 'description').isValidSync(data.description)}
-	/>
-</label>
-{#each data.questions as question, index_question}
-	<div class="ml-8 grid grid-cols-1 gap-2 m-2 border border-black border-2">
-		<h1 class="text-3xl m-1">{$t('words.question')} {index_question + 1}</h1>
-
-		<label class="m-1 flex flex-row gap-2 w-3/5">
-			{$t('words.question')}:
-			<input
-				type="text"
-				placeholder={$t('words.question')}
-				bind:value={question.question}
-				class="text-black w-full bg-inherit border-dotted border-b-2 border-black dark:text-gray-200"
-				class:border-red-600={!yup
-					.reach(dataSchema, 'questions[].question')
-					.isValidSync(question.question)}
-				class:border-solid={!yup
-					.reach(dataSchema, 'questions[].question')
-					.isValidSync(question.question)}
-				class:border-2={!yup
-					.reach(dataSchema, 'questions[].question')
-					.isValidSync(question.question)}
-			/>
-		</label>
-		<label class="m-1 flex flex-row gap-2 w-3/5">
-			{$t('words.image')}:
-			<input
-				type="text"
-				placeholder="https://i.imgur.com/kSPCidY.png"
-				bind:value={question.image}
-				class="text-black w-full bg-inherit border-dotted border-b-2 border-black dark:text-gray-200"
-				class:border-red-600={!yup
-					.reach(dataSchema, 'questions[].image')
-					.isValidSync(question.image)}
-				class:border-solid={!yup
-					.reach(dataSchema, 'questions[].image')
-					.isValidSync(question.image)}
-				class:border-2={!yup
-					.reach(dataSchema, 'questions[].image')
-					.isValidSync(question.image)}
-			/>
-		</label>
-		<label class="m-1 flex flex-row gap-2 w-3/5 flex-nowrap whitespace-nowrap">
-			{$t('editor.time_in_seconds')}:
-			<input
-				type="text"
-				placeholder="20"
-				bind:value={question.time}
-				class="text-black w-full bg-inherit border-dotted border-b-2 border-black dark:text-gray-200"
-				class:border-red-600={!yup
-					.reach(dataSchema, 'questions[].time')
-					.isValidSync(question.time)}
-				class:border-solid={!yup
-					.reach(dataSchema, 'questions[].time')
-					.isValidSync(question.time)}
-				class:border-2={!yup
-					.reach(dataSchema, 'questions[].time')
-					.isValidSync(question.time)}
-			/>
-		</label>
-		{#each question.answers as answer, index_answer}
-			<div class="ml-8 grid grid-cols-1 gap-2 m-2 border border-black border-2 m-1">
-				<h1 class="text-3xl m-1">{$t('words.answer')} {index_answer + 1}</h1>
-				<p class="m-1">
-					{$t('words.answer')}: {index_answer + 1}
-					{$t('words.question')}: {index_question + 1}
-				</p>
-				<label class="m-1 flex flex-row gap-2 w-3/5 flex-nowrap whitespace-nowrap">
-					{$t('words.answer')}:
-					<input
-						type="text"
-						placeholder={$t('words.answer')}
-						bind:value={data.questions[index_question].answers[index_answer].answer}
-						class="text-black w-full bg-inherit border-dotted border-b-2 border-black dark:text-gray-200"
-						class:border-red-600={!yup
-							.reach(dataSchema, 'questions[].answers[].answer')
-							.isValidSync(
-								data.questions[index_question].answers[index_answer].answer
-							)}
-						class:border-solid={!yup
-							.reach(dataSchema, 'questions[].answers[].answer')
-							.isValidSync(
-								data.questions[index_question].answers[index_answer].answer
-							)}
-						class:border-2={!yup
-							.reach(dataSchema, 'questions[].answers[].answer')
-							.isValidSync(
-								data.questions[index_question].answers[index_answer].answer
-							)}
-					/>
-				</label>
-				<label class="m-1 flex flex-row gap-2 w-2/6 flex-nowrap whitespace-nowrap">
-					<input
-						type="checkbox"
-						bind:checked={answer.right}
-						class="text-black w-fit dark:text-gray-200"
-					/>
-					<span class="w-fit">{$t('editor.right_or_true?')}</span>
-				</label>
-
-				<button
-					class="text-left border-yellow-500 border-2 w-fit m-1"
-					type="button"
-					on:click={() => {
-						data.questions[index_question].answers.splice(index_answer, 1);
-						data.questions[index_question].answers =
-							data.questions[index_question].answers;
-					}}
-				>
-					{$t('editor.delete_answer')}
-				</button>
-			</div>
-		{/each}
-		<button
-			class="text-left border-green-500 border-2 w-fit m-1"
-			type="button"
-			on:click={() => {
-				data.questions[index_question].answers = [
-					...data.questions[index_question].answers,
-					{ ...empty_answer }
-				];
-			}}
-		>
-			{$t('editor.add_new_answer')}
-		</button>
-		<button
-			class="text-left border-red-500 border-2 w-fit m-1"
-			type="button"
-			on:click={() => {
-				data.questions.splice(index_question, 1);
-				data.questions = data.questions;
-			}}
-		>
-			{$t('editor.delete_question')}
-		</button>
+<div class="grid grid-cols-6 h-screen w-screen">
+	<div>
+		<Sidebar bind:data bind:selected_question />
 	</div>
-{/each}
-<button
-	class="text-left"
-	type="button"
-	on:click={() => {
-		data.questions = [...data.questions, { ...empty_question }];
-	}}
->
-	{$t('editor.add_new_question')}
-</button>
-{#if imgur_links_valid}
-	<p class="text-blue-600 text-xl text-center w-fit mx-auto">
-		{$t('editor.not_all_links_imgur_links')}
-	</p>
-{/if}
-{#if schemaInvalid}
-	<p class="text-blue-600 text-xl text-center w-fit mx-auto">
-		{yupErrorMessage}
-	</p>
-{/if}
-<button
-	type="submit"
-	class="text-xl disabled:cursor-not-allowed disabled:border disabled:border-red-500 w-fit mx-auto"
-	disabled={imgur_links_valid || schemaInvalid}>{submit_button_text}</button
->
+	<div class="col-span-5">
+		{#if selected_question === -1}
+			<SettingsCard bind:data />
+		{/if}
+	</div>
+</div>
diff --git a/frontend/src/lib/editor/settings-card.svelte b/frontend/src/lib/editor/settings-card.svelte
new file mode 100644
index 0000000..9707d8d
--- /dev/null
+++ b/frontend/src/lib/editor/settings-card.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { EditorData } from '$lib/quiz_types';
+
+	export let data: EditorData;
+</script>
+
+<div class="w-full h-full p-20">
+	<div class="rounded-lg bg-white w-full h-full border-gray-500">
+		<div class="h-fit bg-gray-300 rounded-t-lg">
+			<div class="flex align-middle p-4 gap-3">
+				<span
+					class="inline-block bg-gray-600 w-4 h-4 rounded-full hover:bg-red-400 transition"
+				/>
+				<span
+					class="inline-block bg-gray-600 w-4 h-4 rounded-full hover:bg-yellow-400 transition"
+				/>
+				<span
+					class="inline-block bg-gray-600 w-4 h-4 rounded-full hover:bg-green-400 transition"
+				/>
+			</div>
+		</div>
+		<div>
+			<div class="flex justify-center pt-10 w-full">
+				<input
+					type="text"
+					bind:value={data.title}
+					class="p-3 rounded-lg border-gray-500 border text-center w-1/3"
+				/>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/lib/editor/sidebar.svelte b/frontend/src/lib/editor/sidebar.svelte
new file mode 100644
index 0000000..205f54c
--- /dev/null
+++ b/frontend/src/lib/editor/sidebar.svelte
@@ -0,0 +1,192 @@
+<script lang="ts">
+	import type { EditorData, Question } from '../quiz_types';
+	import { reach } from 'yup';
+	import { dataSchema } from '../yupSchemas';
+
+	export let data: EditorData;
+	export let selected_question = -1;
+
+	import { createTippy } from 'svelte-tippy';
+	import 'tippy.js/animations/perspective-subtle.css';
+	import 'tippy.js/dist/tippy.css';
+
+	const tippy = createTippy({
+		arrow: true,
+		animation: 'perspective-subtle',
+		placement: 'right'
+	});
+	let arr_of_cards = Array(data.questions.length);
+	let propertyCard;
+	const empty_question: Question = {
+		question: '',
+		time: '20',
+		image: '',
+		answers: []
+	};
+
+	const setSelectedQuestion = (index: number): void => {
+		selected_question = index;
+		if (index === -1) {
+			propertyCard.scrollIntoView({
+				behavior: 'smooth'
+			});
+		} else {
+			arr_of_cards[index].scrollIntoView({
+				behavior: 'smooth'
+			});
+		}
+	};
+	/*	onMount(() => {
+			propertyCard.scrollIntoView({
+				behavior: 'smooth'
+			});
+		});*/
+</script>
+
+<div class="h-screen border-r-2 pt-6 px-6 overflow-scroll">
+	<div
+		class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500"
+		bind:this={propertyCard}
+		class:bg-green-300={selected_question === -1}
+		on:click={() => setSelectedQuestion(-1)}
+	>
+		<div
+			use:tippy={{ content: data.title === '' ? "It's empty!" : data.title }}
+			class="m-1 border border-gray-500 rounded-lg p-0.5"
+			class:border-red-600={!reach(dataSchema, 'title').isValidSync(data.title)}
+			class:border-solid={!reach(dataSchema, 'title').isValidSync(data.title)}
+			class:border-2={!reach(dataSchema, 'title').isValidSync(data.title)}
+		>
+			<input
+				type="text"
+				class="whitespace-nowrap truncate text-center w-full bg-transparent rounded"
+				bind:value={data.title}
+			/>
+		</div>
+		<div
+			use:tippy={{ content: data.description === '' ? "It's empty!" : data.description }}
+			class="m-1 border border-gray-500 rounded-lg p-0.5"
+			class:border-red-600={!reach(dataSchema, 'description').isValidSync(data.description)}
+			class:border-solid={!reach(dataSchema, 'description').isValidSync(data.description)}
+			class:border-2={!reach(dataSchema, 'description').isValidSync(data.description)}
+		>
+			<textarea
+				bind:value={data.description}
+				class="bg-transparent resize-none w-full rounded text-sm"
+			/>
+		</div>
+		<button
+			type="button"
+			on:click={() => {
+				data.public = !data.public;
+			}}
+			class="text-center w-full"
+		>
+			{#if data.public}
+				<svg
+					class="w-5 h-5 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="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+				<span>Public</span>
+			{:else}
+				<svg
+					class="w-5 h-5 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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+					/>
+				</svg>
+				<span>Private</span>
+			{/if}
+		</button>
+	</div>
+	{#each data.questions as question, index}
+		<div
+			class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500"
+			class:bg-green-300={index === selected_question}
+			on:click={() => {
+				setSelectedQuestion(index);
+			}}
+			bind:this={arr_of_cards[index]}
+		>
+			<div
+				use:tippy={{ content: question.question === '' ? 'No title' : question.question }}
+				class="m-1 border border-gray-500 rounded-lg p-0.5"
+			>
+				<h1 class="whitespace-nowrap truncate text-center">
+					{#if question.question === ''}
+						<span class="italic text-gray-500">No title...</span>
+					{:else}
+						{question.question}
+					{/if}
+				</h1>
+			</div>
+			{#if question.image}
+				<div class="flex justify-center align-middle">
+					<img
+						src={question.image}
+						class="h-10 border rounded-lg"
+						alt="Not available"
+						use:tippy={{
+							content: `<img src='${question.image}' alt='Not available' class='rounded'>`,
+							allowHTML: true
+						}}
+					/>
+				</div>
+			{/if}
+			<div class="grid grid-cols-2 gap-2">
+				{#each question.answers as answer}
+					<span
+						class="whitespace-nowrap truncate rounded-lg p-0.5 text-sm text-center"
+						class:bg-green-500={answer.right}
+						class:bg-red-500={!answer.right}
+						use:tippy={{ content: answer.answer }}>{answer.answer}</span
+					>
+				{/each}
+			</div>
+		</div>
+	{/each}
+	<div
+		class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500"
+	>
+		<button
+			type="button"
+			class="h-full flex justify-center w-full"
+			on:click={() => {
+				data.questions = [...data.questions, { ...empty_question }];
+			}}
+		>
+			<svg
+				class="h-full"
+				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 6v6m0 0v6m0-6h6m-6 0H6"
+				/>
+			</svg>
+		</button>
+	</div>
+</div>
diff --git a/frontend/src/lib/quiz_types.ts b/frontend/src/lib/quiz_types.ts
index 35b87b9..2ab7cce 100644
--- a/frontend/src/lib/quiz_types.ts
+++ b/frontend/src/lib/quiz_types.ts
@@ -20,6 +20,13 @@ export interface Answer {
 	answer: string;
 }
 
+export interface EditorData {
+	public: boolean;
+	title: string;
+	description: string;
+	questions: Question[];
+}
+
 // TODO Keep an eye on this shit
 // export interface Answer {
 // 	username: string;
diff --git a/frontend/src/routes/create.svelte b/frontend/src/routes/create.svelte
index a801af3..acf1e8c 100644
--- a/frontend/src/routes/create.svelte
+++ b/frontend/src/routes/create.svelte
@@ -11,6 +11,7 @@
 		if (session.authenticated) {
 			signedIn.set(true);
 		}
+		return {};
 	}
 </script>
 
@@ -21,7 +22,7 @@
 	import { navbarVisible } from '$lib/stores';
 	import { dataSchema } from '$lib/yupSchemas';
 
-	navbarVisible.set(true);
+	navbarVisible.set(false);
 
 	const { t } = getLocalization();
 
diff --git a/frontend/src/routes/edit.svelte b/frontend/src/routes/edit.svelte
index 31475ca..e809c80 100644
--- a/frontend/src/routes/edit.svelte
+++ b/frontend/src/routes/edit.svelte
@@ -32,7 +32,7 @@
 	import { navbarVisible } from '$lib/stores';
 	import { dataSchema } from '$lib/yupSchemas';
 
-	navbarVisible.set(true);
+	navbarVisible.set(false);
 
 	const { t } = getLocalization();