LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🥅 Added error-catching to user-view

Browse Source
This commit is contained in:
Mawoka
2023-01-27 23:12:42 +01:00
parent 76311ed0ee
commit 24e55c2ed3
2 changed files with 122 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/user/[user_id]/+page.svelte
+116 -106
View File
@@ -34,125 +34,92 @@
</script> </script>
<svelte:head> <svelte:head>
<title>ClassQuiz - @{data.user.username}</title> <title>ClassQuiz - {data.user.username ? `@${data.user.username}` : 'User not found'}</title>
</svelte:head> </svelte:head>
<div class="h-full"> <div class="h-full">
<div class="grid grid-cols-6 h-full"> <div class="grid grid-cols-6 h-full">
<div class="pl-2"> <div class="pl-2">
<div class="flex justify-center"> {#if data.user.username === undefined}
<img src={`/api/v1/users/avatar/${data.user.id}`} alt="profile" /> <h2 class="text-4xl text-center p-4">User not found</h2>
</div> {:else}
<h2 class="text-3xl text-center"> <div class="flex justify-center">
@{data.user.username} <img src={`/api/v1/users/avatar/${data.user.id}`} alt="profile" />
</h2> </div>
<p class="italic text-center"> <h2 class="text-3xl text-center">
Joined on {new Date(data.user.created_at).toLocaleDateString()} @{data.user.username}
</p> </h2>
<p class="italic text-center">
Joined on {new Date(data.user.created_at).toLocaleDateString()}
</p>
{/if}
</div> </div>
<div <div
class="col-start-2 col-end-7 border-l border-black h-full p-4 overflow-y-scroll flex flex-col gap-4" class="col-start-2 col-end-7 border-l border-black h-full p-4 overflow-y-scroll flex flex-col gap-4"
> >
{#each data.quizzes as quiz} {#if data.quizzes.length === 0}
<div <p class="text-center text-4xl">No original quizzes found...</p>
class="rounded-lg border-2 border-black hover:outline transition-all outline-[#B07156] -outline-offset-2 outline-8" {:else}
> {#each data.quizzes as quiz}
<div class="grid grid-cols-6 h-[25vh]"> <div
<!-- <p class="rounded-lg border-2 border-black hover:outline transition-all outline-[#B07156] -outline-offset-2 outline-8"
style='writing-mode: vertical-lr' >
class='text-center h-full text-xl p-2' <div class="grid grid-cols-6 h-[25vh]">
> <!-- <p
{@html quiz.title} style='writing-mode: vertical-lr'
</p>--> class='text-center h-full text-xl p-2'
<div class="col-start-2 col-end-6">
<h3 class="text-center text-2xl">{@html quiz.title}</h3>
<p class="text-center">
{@html quiz.description}
</p>
{#if quiz.cover_image}
<div class="flex justify-center align-middle items-center">
<div class="h-[20vh] m-auto w-auto max-h-[18vh]">
<img
class="max-h-full max-w-full block"
src={quiz.cover_image}
alt="Not provided"
loading="lazy"
/>
</div>
</div>
{/if}
</div>
<!-- <div class='flex justify-end'>
<p
style='writing-mode: sideways-lr'
class='text-center text-xl p-2'
> >
{@html quiz.title} {@html quiz.title}
</p> </p>-->
</div>--> <div class="col-start-2 col-end-6">
</div> <h3 class="text-center text-2xl">{@html quiz.title}</h3>
<div class="flex justify-center"> <p class="text-center">
<a href="/view/{quiz.id}" class="action-button w-1/6">{$t('words.view')}</a> {@html quiz.description}
</div> </p>
<div class="flex justify-center pb-10 pt-8"> {#if quiz.cover_image}
<div class="grid grid-cols-2 gap-3 w-1/3"> <div class="flex justify-center align-middle items-center">
{#if $signedIn} <div class="h-[20vh] m-auto w-auto max-h-[18vh]">
<button <img
on:click={() => { class="max-h-full max-w-full block"
start_game = quiz.id; src={quiz.cover_image}
}} alt="Not provided"
class="action-button" loading="lazy"
> />
{$t('words.start')} </div>
</button> </div>
<a {/if}
href="/api/v1/eximport/{quiz.id}" </div>
aria-label="Download the quiz"
class="flex justify-center px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-gray-50 dark:bg-gray-700 rounded text-center hover:bg-gray-300 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600" <!-- <div class='flex justify-end'>
><!-- heroicons/download --> <p
<svg style='writing-mode: sideways-lr'
class="w-5 h-5" class='text-center text-xl p-2'
fill="none" >
stroke="currentColor" {@html quiz.title}
viewBox="0 0 24 24" </p>
xmlns="http://www.w3.org/2000/svg" </div>-->
> </div>
<path <div class="flex justify-center">
stroke-linecap="round" <a href="/view/{quiz.id}" class="action-button w-1/6"
stroke-linejoin="round" >{$t('words.view')}</a
stroke-width="2" >
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" </div>
/> <div class="flex justify-center pb-10 pt-8">
</svg> <div class="grid grid-cols-2 gap-3 w-1/3">
</a> {#if $signedIn}
{:else}
<div
use:tippy={{
content: 'You need be signed in to start a game.'
}}
class="w-full"
>
<button <button
on:click={() => { on:click={() => {
start_game = quiz.id; start_game = quiz.id;
}} }}
disabled class="action-button"
class="action-button w-full"
> >
{$t('words.start')} {$t('words.start')}
</button> </button>
</div> <a
<div href="/api/v1/eximport/{quiz.id}"
use:tippy={{ aria-label="Download the quiz"
content: 'You need be signed in to download a game.' class="flex justify-center px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-gray-50 dark:bg-gray-700 rounded text-center hover:bg-gray-300 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600"
}} ><!-- heroicons/download -->
class="w-full"
>
<button
disabled
class="action-button w-full flex justify-center"
>
<svg <svg
class="w-5 h-5" class="w-5 h-5"
fill="none" fill="none"
@@ -167,13 +134,56 @@
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/> />
</svg> </svg>
</button> </a>
</div> {:else}
{/if} <div
use:tippy={{
content: 'You need be signed in to start a game.'
}}
class="w-full"
>
<button
on:click={() => {
start_game = quiz.id;
}}
disabled
class="action-button w-full"
>
{$t('words.start')}
</button>
</div>
<div
use:tippy={{
content: 'You need be signed in to download a game.'
}}
class="w-full"
>
<button
disabled
class="action-button w-full flex justify-center"
>
<svg
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>
</button>
</div>
{/if}
</div>
</div> </div>
</div> </div>
</div> {/each}
{/each} {/if}
</div> </div>
</div> </div>
</div> </div>
frontend/src/routes/user/[user_id]/+page.ts
+6 -1
View File
@@ -16,7 +16,12 @@ export const load = async ({ params, fetch }) => {
}; };
} }
const quiz_req = await fetch(`/api/v1/community/quizzes/${params.user_id}?imported=false`); const quiz_req = await fetch(`/api/v1/community/quizzes/${params.user_id}?imported=false`);
const quizzes = await quiz_req.json(); let quizzes;
if (quiz_req.status === 404) {
quizzes = [];
} else {
quizzes = await quiz_req.json();
}
return { return {
user, user,
quizzes quizzes