✨ Shares Menu nearly feature complete

classquiz/db/models.py

@@ -360,12 +360,14 @@ class OnlyId(BaseModel):
 class PublicQuizTivityShare(BaseModel):
     id: uuid.UUID
     name: str | None
-    expire_in: int
+    expire_in: int | None
     quiztivity: OnlyId
     user: OnlyId
 
     @classmethod
     def from_db_model(cls, data: QuizTivityShare):
+        expire_in = None
+        if data.expire_at is not None:
             expire_in = int((data.expire_at - datetime.now()).seconds / 60)
         return cls(
             id=data.id,

classquiz/routers/quiztivity/__init__.py

@@ -56,7 +56,9 @@ async def get_all_quiztivities(user: User = Depends(get_current_user)) -> list[Q
 
 @router.get("/{uuid}/shares")
 async def get_shares(uuid: UUID, user: User = Depends(get_current_user)) -> list[PublicQuizTivityShare]:
-    shares = await QuizTivityShare.objects.filter(quiztivity=uuid, user=user).all()
+    shares = (
+        await QuizTivityShare.objects.filter(quiztivity=uuid, user=user).order_by(QuizTivityShare.expire_at.asc()).all()
+    )
     resp_shares = []
     for share in shares:
         resp_shares.append(PublicQuizTivityShare.from_db_model(share))

classquiz/routers/quiztivity/shares.py

@@ -77,4 +77,6 @@ async def get_share(uuid: UUID) -> QuizTivity:
     share = await QuizTivityShare.objects.select_related("quiztivity").get_or_none(id=uuid)
     if share is None:
         raise HTTPException(status_code=404, detail="Share not found")
+    if share.expire_at < datetime.now():
+        raise HTTPException(status_code=410, detail="Already expired")
     return share.quiztivity

frontend/src/lib/i18n/locales/en.json

@@ -357,7 +357,13 @@
             "move_right": "Move right",
             "title_placeholder": "Enter title here",
             "add_new": "Add new",
-            "delete": "Delete"
+            "delete": "Delete",
+            "open_shares_menu": "Open Shares menu",
+            "shares": {
+                "add_new_share": "Add new Share",
+                "expires_on": "Expires on {{date}}",
+                "never_expires": "Never expires"
+            }
         },
         "memory": {
             "editor": {
@@ -370,6 +376,12 @@
             "memory": {
                 "try_count": "Tries: {{try_count}}"
             }
+        },
+        "share_expired": "Share expired"
+    },
+    "components": {
+        "popover": {
+            "copied_to_clipboard": "Copied to clipboard!"
         }
     }
 }

frontend/src/lib/quiztivity/shares_popover.svelte

@@ -12,7 +12,7 @@
 	import SmallPopover from '$lib/components/popover/smalltop.svelte';
 	import { PopoverTypes } from '$lib/components/popover/smalltop';
 	import { onMount } from 'svelte';
-	import { fade } from 'svelte/transition';
+	import { fade, fly } from 'svelte/transition';
 
 	const { t } = getLocalization();
 	export let open = false;
@@ -72,6 +72,38 @@
 	onMount(() => {
 		document.body.addEventListener('keydown', close_start_game_if_esc_is_pressed);
 	});
+	let never_expires_checked = true;
+	let selected_date = undefined;
+	const create_share = async () => {
+		if (!selected_date && !never_expires_checked) {
+			return;
+		}
+		console.log(selected_date);
+		await fetch('/api/v1/quiztivity/shares/', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({
+				name: undefined,
+				quiztivity: id,
+				expire_in: never_expires_checked
+					? undefined
+					: Math.floor(Math.abs(new Date() - new Date(selected_date)) / 1000 / 60)
+			})
+		});
+		loaded_shares = load_shares();
+	};
+	let loaded_shares = load_shares();
+
+	const delete_share = async (id: string) => {
+		if (!confirm('Do you really want to delete this Share?')) {
+			return;
+		}
+		await fetch(`/api/v1/quiztivity/shares/${id}`, { method: 'DELETE' });
+		loaded_shares = load_shares();
+	};
+	let add_shares_open = false;
 </script>
 
 <SmallPopover bind:open={popover_open} type={PopoverTypes.Copy} />
@@ -83,14 +115,41 @@
 	<div
 		class="m-auto bg-white dark:bg-gray-600 rounded shadow-2xl flex p-4 flex-col w-2/3 h-5/6 gap-2 overflow-scroll"
 	>
-		<div class="flex justify-center">
+		<div class="flex justify-center flex-col">
-			<BrownButton>{$t('quiztivity.editor.shares.add_new_share')}</BrownButton>
+			<BrownButton
+				on:click={() => {
+					add_shares_open = !add_shares_open;
+				}}>{$t('quiztivity.editor.shares.add_new_share')}</BrownButton
+			>
+			{#if add_shares_open}
+				<form
+					class="flex justify-center p-2 border-b-2 border-l-2 border-r-2 border-[#B07156] flex-col gap-2"
+					transition:fly|local={{ duration: 100, y: -10 }}
+					on:submit|preventDefault={create_share}
+				>
+					<div class="grid grid-cols-2">
+						<input
+							type="datetime-local"
+							class="dark:text-black transition-all mx-auto"
+							disabled={never_expires_checked}
+							bind:value={selected_date}
+						/>
+						<div class="mx-auto">
+							<label for="cb">{$t('quiztivity.editor.shares.never_expires')}</label>
+							<input type="checkbox" id="cb" bind:checked={never_expires_checked} />
 						</div>
-		{#await load_shares()}
+					</div>
+					<BrownButton type="submit" disabled={!selected_date && !never_expires_checked}
+						>{$t('words.submit')}</BrownButton
+					>
+				</form>
+			{/if}
+		</div>
+		{#await loaded_shares}
 			<Spinner />
 		{:then shares}
 			{#each shares as share}
-				<div class="grid grid-cols-4 w-full gap-2">
+				<div class="grid grid-cols-4 w-full gap-2" in:fade={{ duration: 50 }}>
 					<!--                    <p>{share.name ?? "..."}</p>-->
 					<div class="w-full mx-auto">
 						<BrownButton
@@ -102,12 +161,6 @@
 								  })
 								: false}
 							on:click={() => {
-								console.log(
-									navigator.canShare({
-										title: 'title',
-										url: `${window.location.origin}/quiztivity`
-									})
-								);
 								navigator.share({
 									title: 'Quiztivity on ClassQuiz',
 									text: 'Play this Quiztivity now on ClassQuiz!',
@@ -173,7 +226,11 @@
 						{/if}
 					</p>
 					<div class="w-fit my-auto ml-auto">
-						<BrownButton>{$t('words.delete')}</BrownButton>
+						<BrownButton
+							on:click={() => {
+								delete_share(share.id);
+							}}>{$t('words.delete')}</BrownButton
+						>
 					</div>
 				</div>
 			{/each}

frontend/src/routes/+error.svelte

@@ -29,7 +29,7 @@
 		{$t('error_page.404_text')}
 	</p>
 {:else}
-	<p>
+	<p class="text-center">
 		{$t('error_page.unknown_error_text')}
 	</p>
 {/if}

frontend/src/routes/quiztivity/play/+error.svelte

@@ -0,0 +1,53 @@
+<!--
+  - 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 { navbarVisible } from '$lib/stores';
+	import { page } from '$app/stores';
+	import { getLocalization } from '$lib/i18n';
+
+	navbarVisible.set(true);
+	let status = $page.status;
+	const { t } = getLocalization();
+</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/.
+  -->
+
+<!--
+  - 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/.
+  -->
+
+<svelte:head>
+	<title>{$t('words.error')} - {status}</title>
+</svelte:head>
+<h1 class="text-6xl text-center">{status}</h1>
+
+{#if status === 404}
+	<p class="text-center">
+		{$t('error_page.404_text')}
+	</p>
+{:else if status === 410}
+	<p class="text-center">
+		{$t('quiztivity.share_expired')}
+	</p>
+{:else}
+	<p class="text-center">
+		{$t('error_page.unknown_error_text')}
+	</p>
+{/if}
+
+<div class="flex justify-center mt-8">
+	<img
+		class="rounded-lg"
+		src="https://http.cat/{status}"
+		alt="Cat representing the {status}-http error code"
+	/>
+</div>

frontend/src/routes/quiztivity/play/+page.ts

@@ -10,12 +10,18 @@ import type { Data } from '$lib/quiztivity/types';
 
 export const load = (async ({ url, fetch }) => {
 	const id = url.searchParams.get('id');
+	const share = url.searchParams.get('share') === 'true';
 	if (!id) {
 		throw error(400, 'id missing');
 	}
-	const resp = await fetch(`/api/v1/quiztivity/${id}`);
+	let resp: Response;
+	if (share) {
+		resp = await fetch(`/api/v1/quiztivity/shares/${id}`);
+	} else {
+		resp = await fetch(`/api/v1/quiztivity/${id}`);
+	}
 	if (!resp.ok) {
-		throw error(404, 'quiztivity not found');
+		throw error(resp.status);
 	}
 	const data: Data = await resp.json();
 	return {

frontend/src/routes/quiztivity/share/[share_id]/+page.server.ts

@@ -0,0 +1,14 @@
+/*
+ * 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/.
+ */
+
+import { redirect } from '@sveltejs/kit';
+
+import type { PageServerLoad } from './$types';
+
+export const load = (({ params }) => {
+	const quiz_id = params.share_id;
+	throw redirect(301, `/quiztivity/play?id=${quiz_id}&share=true`);
+}) satisfies PageServerLoad;