Shares Menu nearly feature complete

This commit is contained in:
Mawoka
2023-05-24 19:00:30 +02:00
parent 4b8358176b
commit d5cb5b1ff5
9 changed files with 167 additions and 19 deletions
+4 -2
View File
@@ -360,13 +360,15 @@ 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 = int((data.expire_at - datetime.now()).seconds / 60)
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,
name=data.name,
+3 -1
View File
@@ -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))
+2
View File
@@ -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
+13 -1
View File
@@ -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!"
}
}
}
@@ -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">
<BrownButton>{$t('quiztivity.editor.shares.add_new_share')}</BrownButton>
<div class="flex justify-center flex-col">
<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>
</div>
<BrownButton type="submit" disabled={!selected_date && !never_expires_checked}
>{$t('words.submit')}</BrownButton
>
</form>
{/if}
</div>
{#await load_shares()}
{#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}
+1 -1
View File
@@ -29,7 +29,7 @@
{$t('error_page.404_text')}
</p>
{:else}
<p>
<p class="text-center">
{$t('error_page.unknown_error_text')}
</p>
{/if}
@@ -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>
+8 -2
View File
@@ -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 {
@@ -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;