✨ Added cover-image (Closes #103)

frontend/src/lib/editor/card.svelte

@@ -10,7 +10,6 @@
 	import { reach } from 'yup';
 	import { dataSchema } from '$lib/yupSchemas';
 	import Spinner from '../Spinner.svelte';
-	import { mint } from '$lib/hashcash';
 	import { createTippy } from 'svelte-tippy';
 	import { getLocalization } from '$lib/i18n';
 
@@ -26,25 +25,10 @@
 	export let selected_question: number;
 	export let edit_id: string;
 	export let pow_data;
-	let pow_salt: string;
+	export let pow_salt: string;
 
 	let uppyOpen = false;
 
-	const computePOW = async (salt: string) => {
-		if (pow_salt === undefined) {
-			return;
-		}
-		console.log('Computing POW');
-		pow_data = await mint(salt, 16, '', 8, false);
-		pow_salt = undefined;
-		return;
-	};
-
-	$: {
-		pow_salt;
-		computePOW(pow_salt);
-	}
-
 	/*eslint no-unused-vars: ["error", { "argsIgnorePattern": "^_" }]*/
 	const correctTimeInput = (_) => {
 		let time = data.questions[selected_question].time;

frontend/src/lib/editor/settings-card.svelte

@@ -6,9 +6,16 @@
 <script lang="ts">
 	import type { EditorData } from '$lib/quiz_types';
 	import { getLocalization } from '$lib/i18n';
+	import Spinner from '$lib/Spinner.svelte';
+	export let pow_data;
+	export let pow_salt;
 
 	const { t } = getLocalization();
 
+	let uppyOpen = false;
+
+	export let edit_id: string;
+
 	export let data: EditorData;
 </script>
 
@@ -42,6 +49,36 @@
 					class="p-3 rounded-lg border-gray-500 border text-center w-1/3 h-20 resize-none dark:bg-gray-500"
 				/>
 			</div>
+
+			{#if data.cover_image != undefined && data.cover_image !== ''}
+				<div class="flex justify-center pt-10 w-full max-h-72 w-full">
+					<img
+						src={data.cover_image}
+						alt="not available"
+						class="max-h-72 h-auto w-auto"
+						on:contextmenu|preventDefault={() => {
+							data.cover_image = '';
+						}}
+					/>
+				</div>
+			{:else if pow_data === undefined}
+				<a href="/docs/pow" target="_blank" class="cursor-help">
+					<Spinner />
+				</a>
+			{:else}
+				{#await import('$lib/editor/uploader.svelte')}
+					<Spinner />
+				{:then c}
+					<svelte:component
+						this={c.default}
+						bind:modalOpen={uppyOpen}
+						bind:edit_id
+						bind:data
+						bind:pow_data
+						bind:pow_salt
+					/>
+				{/await}
+			{/if}
 			<div class="pt-10 w-full flex justify-center">
 				<button
 					type="button"

frontend/src/lib/editor/uploader.svelte

@@ -61,9 +61,15 @@
 	});
 	uppy.on('complete', (_) => {
 		console.log(pow_data);
-		data.questions[
-			selected_question
-		].image = `${window.location.origin}/api/v1/storage/download/${image_id}`;
+		if (selected_question === undefined) {
+			data.cover_image = `${window.location.origin}/api/v1/storage/download/${image_id}`;
+		} else {
+			data.questions[
+				selected_question
+			].image = `${window.location.origin}/api/v1/storage/download/${image_id}`;
+		}
+		console.log(selected_question, data);
+
 		modalOpen = false;
 	});
 	console.log(edit_id);