fix: chapter

This commit is contained in:
Théo 2023-09-09 21:23:58 +02:00
parent 3482c1f46c
commit bf6c76554f
9 changed files with 58 additions and 113 deletions

View file

@ -1,6 +1,6 @@
@tailwind base; @import 'tailwindcss/base';
@tailwind components; @import 'tailwindcss/components';
@tailwind utilities; @import 'tailwindcss/utilities';
@font-face { @font-face {
font-family: 'Karrik'; font-family: 'Karrik';

View file

@ -9,31 +9,34 @@
<li <li
class={cn( class={cn(
'font-code group relative flex h-full w-full rounded-md bg-primary-700 transition-colors duration-150 hover:bg-primary-600' 'font-code group relative flex h-full w-full rounded-md bg-primary-700 transition-colors duration-150 ',
// 'cursor-not-allowed': !isStarted(chapter) {
'cursor-not-allowed': !chapter.show,
'hover:bg-primary-600': chapter.show,
}
)} )}
> >
<a class="flex h-full w-full items-center gap-4 p-4" href="/dashboard/chapters/{chapter.id}"> {#if chapter.show}
<a
class="flex h-full w-full items-center gap-4 p-4"
href={chapter.show ? `/dashboard/chapters/${chapter.id}` : '#'}
>
<div class="flex w-full flex-col justify-between gap-2 sm:flex-row"> <div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
<h2 class="text-base font-semibold"> <h2 class="text-base font-semibold">
{chapter.name} {chapter.name}
</h2> </h2>
<!-- <div class="flex items-center gap-x-6">
{#if puzzle.tags?.length}
<div class="flex gap-x-2 text-sm">
{#each puzzle.tags as tag}
<span
class="inline-block rounded-md bg-primary-800 px-2 py-1 text-highlight-secondary"
>
{tag.name}
</span>
{/each}
</div>
{/if}
</div> -->
</div> </div>
<span class="translate-x-0 transform-gpu duration-300 group-hover:translate-x-2"> <span class="translate-x-0 transform-gpu duration-300 group-hover:translate-x-2">
<ChevronRight /> <ChevronRight />
</span> </span>
</a> </a>
{:else}
<span class="flex h-full w-full items-center gap-4 p-4">
<div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
<h2 class="text-base font-semibold">
{chapter.name}
</h2>
</div>
</span>
{/if}
</li> </li>

View file

@ -1,19 +0,0 @@
import { browser } from '$app/environment';
import { writable } from 'svelte/store';
const defaultValue = false;
const initialValue = browser ? window.localStorage.getItem('register') === 'true' : defaultValue;
const register = writable<boolean>(initialValue);
register.subscribe((value) => {
if (browser) {
window.localStorage.setItem('register', value ? 'true' : 'false');
}
});
export function resetRegister() {
register.set(defaultValue);
}
export default register;

View file

@ -47,8 +47,7 @@ export interface Chapter {
id: number; id: number;
name: string; name: string;
puzzles: Puzzle[]; puzzles: Puzzle[];
startDate?: string; show?: boolean;
endDate?: string;
} }
export interface Tag { export interface Tag {

View file

@ -22,6 +22,10 @@ export const load = (async ({ parent, fetch, cookies, params: { chapterId } }) =
const chapter = (await res.json()) as Chapter; const chapter = (await res.json()) as Chapter;
if (!chapter || !chapter.show) {
throw redirect(302, '/dashboard/chapters');
}
return { return {
chapter chapter
}; };

View file

@ -29,54 +29,6 @@
</Dialog> </Dialog>
)} --> )} -->
</div> </div>
<div class="flex flex-col">
{#if chapter.startDate && chapter.endDate}
<div class="flex items-center justify-start gap-x-2 md:justify-end">
<!-- {/* <Icon name="calendar-line" class="text-sm text-muted" /> */} -->
<span class="text-sm text-muted">
{new Date(chapter.startDate).toLocaleDateString('fr-FR', {
day: 'numeric',
month: 'long',
year: 'numeric',
hour: 'numeric',
minute: 'numeric'
})}{' '}
-{' '}
{new Date(chapter.endDate).toLocaleDateString('fr-FR', {
day: 'numeric',
month: 'long',
year: 'numeric',
hour: 'numeric',
minute: 'numeric'
})}
</span>
</div>
{:else}
<div class="h-1 w-1/4 rounded-lg bg-gray-200">
<div class="h-1 w-1/2 rounded-lg bg-gradient-to-tl from-brand to-brand-accent" />
</div>
{/if}
<div class="mt-1 flex justify-start gap-x-2">
<!-- {isInEventGroup(chapter) && (
<>
<FilterDifficulty
chapters={data}
chapter={chapter}
filter={filterDifficulty}
setFilter={setFilterDifficulty}
setFilterChapter={setFilterChapter}
/>
<FilterTags
chapters={data}
chapter={chapter}
filter={filterTags}
setFilter={setFilterTags}
setFilterChapter={setFilterChapter}
/>
</>
)} -->
</div>
</div>
</div> </div>
<ul class="mt-4 flex flex-col space-y-4"> <ul class="mt-4 flex flex-col space-y-4">
{#each chapter.puzzles as puzzle} {#each chapter.puzzles as puzzle}

View file

@ -2,6 +2,7 @@ import { API_URL } from '$env/static/private';
import { error, redirect, type Actions } from '@sveltejs/kit'; import { error, redirect, type Actions } from '@sveltejs/kit';
import type Puzzle from '$lib/components/Puzzle.svelte'; import type Puzzle from '$lib/components/Puzzle.svelte';
import type { PageServerLoad } from './$types'; import type { PageServerLoad } from './$types';
import type { Chapter } from '$lib/types';
export const load = (async ({ parent, fetch, cookies, params: { chapterId, puzzleId } }) => { export const load = (async ({ parent, fetch, cookies, params: { chapterId, puzzleId } }) => {
await parent(); await parent();
@ -12,7 +13,6 @@ export const load = (async ({ parent, fetch, cookies, params: { chapterId, puzzl
throw redirect(303, `/dashboard/chapters/${chapterId}`); throw redirect(303, `/dashboard/chapters/${chapterId}`);
} }
// check if puzzle is from the chapter
let res = await fetch(`${API_URL}/chapter/${chapterId}`, { let res = await fetch(`${API_URL}/chapter/${chapterId}`, {
headers: { headers: {
Authorization: `Bearer ${session}` Authorization: `Bearer ${session}`
@ -23,9 +23,13 @@ export const load = (async ({ parent, fetch, cookies, params: { chapterId, puzzl
throw redirect(303, `/dashboard/chapters`); throw redirect(303, `/dashboard/chapters`);
} }
const { puzzles } = (await res.json()) as { puzzles: Puzzle[] }; const chapter = (await res.json()) as Chapter;
if (!puzzles.some((puzzle) => puzzle.id === parseInt(puzzleId))) { if (!chapter || !chapter.show) {
throw redirect(303, `/dashboard/chapters`);
}
if (!chapter.puzzles.some((puzzle) => puzzle.id === parseInt(puzzleId))) {
throw redirect(303, `/dashboard/chapters/${chapterId}`); throw redirect(303, `/dashboard/chapters/${chapterId}`);
} }
@ -45,6 +49,8 @@ export const load = (async ({ parent, fetch, cookies, params: { chapterId, puzzl
throw error(404, 'Puzzle not found'); throw error(404, 'Puzzle not found');
} }
console.log(puzzle.content);
return { return {
puzzle: puzzle as Puzzle puzzle: puzzle as Puzzle
}; };

View file

@ -26,8 +26,9 @@
}; };
const options: MarkedOptions = { const options: MarkedOptions = {
breaks: true, breaks: false,
renderer renderer,
gfm: true
}; };
</script> </script>

View file

@ -3,8 +3,6 @@
import type { ActionData, Snapshot } from './$types'; import type { ActionData, Snapshot } from './$types';
import register from '$lib/stores/Register';
import Button from '$lib/components/ui/Button.svelte'; import Button from '$lib/components/ui/Button.svelte';
import Input from '$lib/components/ui/Input.svelte'; import Input from '$lib/components/ui/Input.svelte';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
@ -15,21 +13,22 @@
email: '', email: '',
firstname: '', firstname: '',
lastname: '', lastname: '',
pseudo: '' pseudo: '',
confirmation: false
}; };
export const snapshot: Snapshot = { export const snapshot: Snapshot = {
capture: () => data, capture: () => data,
restore: (value) => (data = value) restore: (value) => (data = value)
}; };
$: confirmation = $register;
</script> </script>
<div class="flex h-screen w-full"> <div class="flex h-screen w-full">
<div class="flex w-full flex-col items-center justify-center"> <div class="flex w-full flex-col items-center justify-center">
<div class="flex w-full max-w-xs flex-col gap-4"> <div class="flex w-full max-w-xs flex-col gap-4">
<h2 class="mx-auto text-xl font-bold">{confirmation ? 'Confirmation' : 'Inscription'}</h2> <h2 class="mx-auto text-xl font-bold">
{data.confirmation ? 'Confirmation' : 'Inscription'}
</h2>
<form <form
class="flex flex-col justify-center gap-2" class="flex flex-col justify-center gap-2"
method="POST" method="POST"
@ -37,12 +36,12 @@
return async ({ result }) => { return async ({ result }) => {
switch (result.type) { switch (result.type) {
case 'success': case 'success':
register.set(true); data.confirmation = true;
break; break;
} }
}; };
}} }}
action={confirmation ? '/sign-up?/confirmation' : '/sign-up?/register'} action={data.confirmation ? '/sign-up?/confirmation' : '/sign-up?/confirmation'}
> >
<label for="email">Email</label> <label for="email">Email</label>
<Input <Input
@ -104,7 +103,7 @@
</p> </p>
{/if} {/if}
{#if confirmation} {#if data.confirmation}
<div <div
class="flex flex-col gap-2" class="flex flex-col gap-2"
transition:fade={{ transition:fade={{
@ -130,17 +129,17 @@
<Button class="mt-2" variant="brand"> <Button class="mt-2" variant="brand">
<!-- {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} --> <!-- {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} -->
{confirmation ? "S'inscrire" : 'Continuer'} {data.confirmation ? "S'inscrire" : 'Continuer'}
</Button> </Button>
<ul class="flex justify-between"> <ul class="flex justify-between">
<li> <li>
<a class="text-highlight-secondary hover:text-brand" href="/sign-in">Se connecter</a> <a class="text-highlight-secondary hover:text-brand" href="/sign-in">Se connecter</a>
</li> </li>
{#if confirmation} {#if data.confirmation}
<li> <li>
<button <button
formaction="/sign-up?/register" formaction="/sign-up?/confirmation"
class="text-highlight-secondary hover:text-brand">Pas reçu ?</button class="text-highlight-secondary hover:text-brand">Pas reçu ?</button
> >
</li> </li>