🚧 Last change

frontend/src/lib/editor/card.svelte

@@ -3,9 +3,11 @@
 	import CheckerBg from '$lib/editor/checker-bg.svg';
 	import { reach } from 'yup';
 	import { dataSchema } from '$lib/yupSchemas';
+	import Spinner from '../Spinner.svelte';
 
 	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];
@@ -13,11 +15,14 @@
 		right: false,
 		answer: ''
 	};
+	console.log(question.image);
+	let uppyOpen = false;
+	$: console.log(uppyOpen);
 </script>
 
 <div class="w-full h-full pb-20 px-20">
-	<div class="rounded-lg bg-white w-full h-full border-gray-500 drop-shadow-2xl">
-		<div class="h-fit bg-gray-300 rounded-t-lg">
+	<div class="rounded-lg bg-white w-full h-full border-gray-500 drop-shadow-2xl dark:bg-gray-700">
+		<div class="h-fit bg-gray-300 rounded-t-lg dark:bg-gray-500">
 			<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"
@@ -36,15 +41,28 @@
 					type="text"
 					bind:value={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"
+					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
 					)}
 				/>
 			</div>
-			<div class="flex justify-center pt-10 w-full max-h-72 w-full">
-				<img src={question.image} alt="not available" class="max-h-72 h-auto w-auto" />
-			</div>
+			{#if question.image != undefined && question.image !== ''}
+				<div class="flex justify-center pt-10 w-full max-h-72 w-full">
+					<img src={question.image} alt="not available" class="max-h-72 h-auto w-auto" />
+				</div>
+			{:else}
+				{#await import('$lib/editor/uploader.svelte')}
+					<Spinner />
+				{:then c}
+					<svelte:component
+						this={c.default}
+						bind:modalOpen={uppyOpen}
+						bind:edit_id
+						bind:data
+					/>
+				{/await}
+			{/if}
 			<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}
@@ -109,8 +127,7 @@
 					{/each}
 					{#if question.answers.length < 4}
 						<button
-							class="p-4 rounded-lg bg-transparent"
-							style="background-image: url({CheckerBg})"
+							class="p-4 rounded-lg bg-transparent border-gray-500 border-2"
 							type="button"
 							on:click={() => {
 								question.answers = [...question.answers, { empty_answer }];
@@ -125,3 +142,6 @@
 		</div>
 	</div>
 </div>
+{#if uppyOpen}
+	<span class="fixed w-screen h-screen bg-opacity-60 z-10">1</span>
+{/if}