✨ Added cover-image (Closes #103)

classquiz/db/models.py

@@ -99,6 +99,7 @@ class QuizInput(BaseModel):
     public: bool = False
     title: str
     description: str
+    cover_image: str | None
     questions: list[QuizQuestion]
 
 
@@ -112,6 +113,7 @@ class Quiz(ormar.Model):
     user_id: uuid.UUID = ormar.ForeignKey(User)
     questions: Json[list[QuizQuestion]] = ormar.JSON(nullable=False)
     imported_from_kahoot: Optional[bool] = ormar.Boolean(default=False, nullable=True)
+    cover_image: Optional[str] = ormar.Text(nullable=True, unique=False)
 
     class Meta:
         tablename = "quiz"
@@ -154,6 +156,7 @@ class PlayGame(BaseModel):
     game_pin: str
     started: bool = False
     captcha_enabled: bool = False
+    cover_image: str | None
 
 
 class GamePlayer(BaseModel):

classquiz/kahoot_importer/import_quiz.py

@@ -55,6 +55,12 @@ async def import_quiz(quiz_id: str, user: User) -> Quiz | str:
                 image=image,
             ).dict()
         )
+    cover = None
+    if quiz.kahoot.cover != "":
+        image_bytes = await _download_image(quiz.kahoot.cover)
+        image_name = f"{quiz_id}--{uuid.uuid4()}"
+        await storage.upload(file_name=image_name, file_data=image_bytes)
+        cover = f"{settings.root_address}/api/v1/storage/download/{image_name}"
     quiz_data = Quiz(
         id=quiz_id,
         public=True,
@@ -65,6 +71,7 @@ async def import_quiz(quiz_id: str, user: User) -> Quiz | str:
         user_id=user.id,
         questions=json.dumps(quiz_questions),
         imported_from_kahoot=True,
+        cover_image=cover,
     )
     meilisearch.index(settings.meilisearch_index).add_documents([await get_meili_data(quiz_data)])
     return await quiz_data.save()

classquiz/routers/editor.py

@@ -157,6 +157,13 @@ async def finish_edit(edit_id: str, quiz_input: QuizInput):
             mark_image_for_deletion(question.image, i, old_quiz_data)
         else:
             raise HTTPException(status_code=400, detail="Image URL(s) aren't valid!")
+
+    if quiz_input.cover_image == "":
+        quiz_input.cover_image = None
+
+    if quiz_input.cover_image is not None and not bool(re.match(server_regex, quiz_input.cover_image)):
+        raise HTTPException(status_code=400, detail="image url is not valid")
+
     if session_data.edit:
         quiz = old_quiz_data
         meilisearch.index(settings.meilisearch_index).update_documents([await get_meili_data(quiz)])
@@ -169,6 +176,7 @@ async def finish_edit(edit_id: str, quiz_input: QuizInput):
         quiz.description = quiz_input.description
         quiz.updated_at = datetime.now()
         quiz.questions = quiz_input.dict()["questions"]
+        quiz.cover_image = quiz_input.cover_image
         for image in images_to_delete:
             if image is not None:
                 try:

classquiz/routers/quiz.py

@@ -42,6 +42,11 @@ async def create_quiz_lol(quiz_input: QuizInput, user: User = Depends(get_curren
             and not re.match(server_regex, question.image)
         ):
             raise HTTPException(status_code=400, detail="image url is not valid")
+    if quiz_input.cover_image == "":
+        quiz_input.cover_image = None
+
+    if quiz_input.cover_image is not None and not bool(re.match(server_regex, quiz_input.cover_image)):
+        raise HTTPException(status_code=400, detail="image url is not valid")
     quiz = Quiz(**quiz_input.dict(), user_id=user.id, id=uuid.uuid4())
     await redis.delete("global_quiz_count")
     if quiz_input.public:
@@ -102,6 +107,7 @@ async def start_quiz(quiz_id: str, captcha_enabled: bool = True, user: User = De
         title=quiz.title,
         description=quiz.description,
         captcha_enabled=captcha_enabled,
+        cover_image=quiz.cover_image,
     )
     await redis.set(f"game:{str(game.game_pin)}", (game.json()), ex=18000)
     return {**quiz.dict(exclude={"id"}), **game.dict(exclude={"questions"})}
@@ -156,6 +162,15 @@ async def update_quiz(quiz_id: str, quiz_input: QuizInput, user: User = Depends(
         quiz_id = uuid.UUID(quiz_id)
     except ValueError:
         raise HTTPException(status_code=400, detail="badly formed quiz id")
+    ## Check Cover-Image
+
+    print(quiz_input.cover_image)
+    if quiz_input.cover_image == "":
+        quiz_input.cover_image = None
+
+    if quiz_input.cover_image is not None and not bool(re.match(server_regex, quiz_input.cover_image)):
+        raise HTTPException(status_code=400, detail="image url is not valid")
+
     quiz = await Quiz.objects.get_or_none(id=quiz_id, user_id=user.id)
     if quiz is None:
         return JSONResponse(status_code=404, content={"detail": "quiz not found"})
@@ -168,6 +183,7 @@ async def update_quiz(quiz_id: str, quiz_input: QuizInput, user: User = Depends(
         if not quiz.public and quiz_input.public:
             meilisearch.index(settings.meilisearch_index).add_documents([await get_meili_data(quiz)])
         quiz.title = quiz_input.title
+        quiz.cover_image = quiz_input.cover_image
         quiz.public = quiz_input.public
         quiz.description = quiz_input.description
         quiz.updated_at = datetime.now()

frontend/src/lib/dashboard/main_slider.svelte

@@ -71,9 +71,25 @@
 									>
 										{quiz.title}
 									</p>
-									<p class="text-center col-start-2 col-end-6">
+									<div class="col-start-2 col-end-6">
-										{quiz.description}
+										<p class="text-center">
-									</p>
+											{quiz.description}
+										</p>
+										{#if quiz.cover_image}
+											<div
+												class="flex justify-center align-middle items-center"
+											>
+												<div class="h-[20vh] m-auto w-auto">
+													<img
+														class="max-h-full max-w-full  block"
+														src={quiz.cover_image}
+														alt="Not provided"
+													/>
+												</div>
+											</div>
+										{/if}
+									</div>
+
 									<div class="flex justify-end">
 										<p
 											style="writing-mode: sideways-lr"
@@ -83,10 +99,12 @@
 										</p>
 									</div>
 								</div>
+
 								<p class="text-center">
 									{quiz.questions.length}
 									{$t('words.question', { count: quiz.questions.length })}
 								</p>
+
 								<div class="flex justify-center mt-8">
 									{#if quiz.public}
 										<svg

frontend/src/lib/editor.svelte

@@ -19,6 +19,22 @@
 	export let quiz_id: string | null;
 	let selected_question = -1;
 	let imgur_links_valid = false;
+	let pow_salt;
+
+	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);
+	}
 
 	const validateInput = async (data: EditorData) => {
 		try {
@@ -156,9 +172,15 @@
 				</div>
 				<div class="w-full h-full">
 					{#if selected_question === -1}
-						<SettingsCard bind:data />
+						<SettingsCard bind:data bind:pow_salt bind:edit_id bind:pow_data />
 					{:else}
-						<QuizCard bind:data bind:selected_question bind:edit_id bind:pow_data />
+						<QuizCard
+							bind:data
+							bind:selected_question
+							bind:edit_id
+							bind:pow_data
+							bind:pow_salt
+						/>
 					{/if}
 				</div>
 			</div>

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[
+		if (selected_question === undefined) {
-			selected_question
+			data.cover_image = `${window.location.origin}/api/v1/storage/download/${image_id}`;
-		].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);

frontend/src/lib/play/title.svelte

@@ -6,9 +6,17 @@
 <script lang="ts">
 	export let title: string;
 	export let description: string;
+	export let cover_image: string | undefined;
 </script>
 
 <div class="flex flex-col justify-center w-screen h-screen">
 	<h1 class="text-7xl text-center">{title}</h1>
 	<p class="text-3xl pt-8 text-center">{description}</p>
+	{#if cover_image}
+		<div class="flex justify-center align-middle items-center">
+			<div class="h-[30vh] m-auto w-auto mt-12">
+				<img class="max-h-full max-w-full  block" src={cover_image} alt="Not provided" />
+			</div>
+		</div>
+	{/if}
 </div>

frontend/src/lib/quiz_types.ts

@@ -12,6 +12,7 @@ export interface QuizData {
 	game_id: string;
 	game_pin: string;
 	started: boolean;
+	cover_image?: string;
 }
 
 export enum QuizQuestionType {
@@ -44,4 +45,5 @@ export interface EditorData {
 	title: string;
 	description: string;
 	questions: Question[];
+	cover_image?: string;
 }

frontend/src/routes/+page.svelte

@@ -200,10 +200,12 @@
 		</div>
 	</section>
 	<section>
+		<h2 class="text-center text-5xl mb-6">How does ClassQuiz even work?</h2>
+
 		<div class="flex justify-center w-full">
-			<h2 class="text-center text-3xl rounded-t-lg bg-opacity-40 bg-white py-2 px-6">
+			<h3 class="text-center text-3xl rounded-t-lg bg-opacity-40 bg-white py-2 px-6">
 				{$t('index_page.get_a_quiz')}
-			</h2>
+			</h3>
 		</div>
 		<div
 			class="grid grid-rows-2 lg:grid-rows-1 lg:grid-cols-2 bg-opacity-40 bg-white shadow-lg mb-12 lg:mx-12 mx-4 rounded-lg"

frontend/src/routes/play/+page.svelte

@@ -122,7 +122,11 @@
 	{:else if JSON.stringify(final_results) !== JSON.stringify([null])}
 		<ShowEndScreen bind:final_results bind:quiz_data={gameData} />
 	{:else if gameData !== undefined && question_index === ''}
-		<ShowTitle bind:title={gameData.title} bind:description={gameData.description} />
+		<ShowTitle
+			bind:title={gameData.title}
+			bind:description={gameData.description}
+			bind:cover_image={gameData.cover_image}
+		/>
 	{:else if gameMeta.started && gameData !== undefined && question_index !== '' && answer_results === undefined}
 		{#key unique}
 			<Question

frontend/src/routes/view/[quiz_id]/+page.svelte

@@ -55,6 +55,17 @@
 	<div class="text-center">
 		<p>{quiz.description}</p>
 	</div>
+	{#if quiz.cover_image}
+		<div class="flex justify-center align-middle items-center">
+			<div class="h-[15vh] m-auto w-auto my-3">
+				<img
+					class="max-h-full max-w-full  block"
+					src={quiz.cover_image}
+					alt="Not provided"
+				/>
+			</div>
+		</div>
+	{/if}
 	<div class="text-center text-sm pt-1">
 		<ImportedOrNot imported={quiz.imported_from_kahoot} />
 	</div>
@@ -98,7 +109,6 @@
 					<!--					</label>-->
 					{#if question.image}
 						<span>
-							{$t('words.image')}:
 							<img class="pl-8" src={question.image} alt="Not provided" />
 						</span>
 					{/if}

migrations/versions/cda6903dfc0c_added_cover_image.py

@@ -0,0 +1,30 @@
+"""added cover_image
+
+Revision ID: cda6903dfc0c
+Revises: 3f63c0130bce
+Create Date: 2022-09-08 16:40:01.675020
+
+"""
+from alembic import op
+import sqlalchemy as sa
+import ormar
+
+
+# revision identifiers, used by Alembic.
+revision = "cda6903dfc0c"
+down_revision = "3f63c0130bce"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_unique_constraint(None, "instance_data", ["instance_id"])
+    op.add_column("quiz", sa.Column("cover_image", sa.Text(), nullable=True))
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column("quiz", "cover_image")
+    # ### end Alembic commands ###