fix: chapter
This commit is contained in:
Théo
parent
3482c1f46c
commit
bf6c76554f
9 changed files with 58 additions and 113 deletions
|
|
@ -1,6 +1,6 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
|
||||
@font-face {
|
||||
font-family: 'Karrik';
|
||||
|
|
|
|||
|
|
@ -9,31 +9,34 @@
|
|||
|
||||
<li
|
||||
class={cn(
|
||||
'font-code group relative flex h-full w-full rounded-md bg-primary-700 transition-colors duration-150 hover:bg-primary-600'
|
||||
// 'cursor-not-allowed': !isStarted(chapter)
|
||||
'font-code group relative flex h-full w-full rounded-md bg-primary-700 transition-colors duration-150 ',
|
||||
{
|
||||
'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}">
|
||||
<div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
|
||||
<h2 class="text-base font-semibold">
|
||||
{chapter.name}
|
||||
</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>
|
||||
<span class="translate-x-0 transform-gpu duration-300 group-hover:translate-x-2">
|
||||
<ChevronRight />
|
||||
{#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">
|
||||
<h2 class="text-base font-semibold">
|
||||
{chapter.name}
|
||||
</h2>
|
||||
</div>
|
||||
<span class="translate-x-0 transform-gpu duration-300 group-hover:translate-x-2">
|
||||
<ChevronRight />
|
||||
</span>
|
||||
</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>
|
||||
</a>
|
||||
{/if}
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -47,8 +47,7 @@ export interface Chapter {
|
|||
id: number;
|
||||
name: string;
|
||||
puzzles: Puzzle[];
|
||||
startDate?: string;
|
||||
endDate?: string;
|
||||
show?: boolean;
|
||||
}
|
||||
|
||||
export interface Tag {
|
||||
|
|
|
|||
|
|
@ -22,6 +22,10 @@ export const load = (async ({ parent, fetch, cookies, params: { chapterId } }) =
|
|||
|
||||
const chapter = (await res.json()) as Chapter;
|
||||
|
||||
if (!chapter || !chapter.show) {
|
||||
throw redirect(302, '/dashboard/chapters');
|
||||
}
|
||||
|
||||
return {
|
||||
chapter
|
||||
};
|
||||
|
|
|
|||
|
|
@ -29,54 +29,6 @@
|
|||
</Dialog>
|
||||
)} -->
|
||||
</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>
|
||||
<ul class="mt-4 flex flex-col space-y-4">
|
||||
{#each chapter.puzzles as puzzle}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { API_URL } from '$env/static/private';
|
|||
import { error, redirect, type Actions } from '@sveltejs/kit';
|
||||
import type Puzzle from '$lib/components/Puzzle.svelte';
|
||||
import type { PageServerLoad } from './$types';
|
||||
import type { Chapter } from '$lib/types';
|
||||
|
||||
export const load = (async ({ parent, fetch, cookies, params: { chapterId, puzzleId } }) => {
|
||||
await parent();
|
||||
|
|
@ -12,7 +13,6 @@ export const load = (async ({ parent, fetch, cookies, params: { chapterId, puzzl
|
|||
throw redirect(303, `/dashboard/chapters/${chapterId}`);
|
||||
}
|
||||
|
||||
// check if puzzle is from the chapter
|
||||
let res = await fetch(`${API_URL}/chapter/${chapterId}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${session}`
|
||||
|
|
@ -23,9 +23,13 @@ export const load = (async ({ parent, fetch, cookies, params: { chapterId, puzzl
|
|||
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}`);
|
||||
}
|
||||
|
||||
|
|
@ -45,6 +49,8 @@ export const load = (async ({ parent, fetch, cookies, params: { chapterId, puzzl
|
|||
throw error(404, 'Puzzle not found');
|
||||
}
|
||||
|
||||
console.log(puzzle.content);
|
||||
|
||||
return {
|
||||
puzzle: puzzle as Puzzle
|
||||
};
|
||||
|
|
|
|||
|
|
@ -26,8 +26,9 @@
|
|||
};
|
||||
|
||||
const options: MarkedOptions = {
|
||||
breaks: true,
|
||||
renderer
|
||||
breaks: false,
|
||||
renderer,
|
||||
gfm: true
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@
|
|||
|
||||
import type { ActionData, Snapshot } from './$types';
|
||||
|
||||
import register from '$lib/stores/Register';
|
||||
|
||||
import Button from '$lib/components/ui/Button.svelte';
|
||||
import Input from '$lib/components/ui/Input.svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
|
@ -15,21 +13,22 @@
|
|||
email: '',
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
pseudo: ''
|
||||
pseudo: '',
|
||||
confirmation: false
|
||||
};
|
||||
|
||||
export const snapshot: Snapshot = {
|
||||
capture: () => data,
|
||||
restore: (value) => (data = value)
|
||||
};
|
||||
|
||||
$: confirmation = $register;
|
||||
</script>
|
||||
|
||||
<div class="flex h-screen w-full">
|
||||
<div class="flex w-full flex-col items-center justify-center">
|
||||
<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
|
||||
class="flex flex-col justify-center gap-2"
|
||||
method="POST"
|
||||
|
|
@ -37,12 +36,12 @@
|
|||
return async ({ result }) => {
|
||||
switch (result.type) {
|
||||
case 'success':
|
||||
register.set(true);
|
||||
data.confirmation = true;
|
||||
break;
|
||||
}
|
||||
};
|
||||
}}
|
||||
action={confirmation ? '/sign-up?/confirmation' : '/sign-up?/register'}
|
||||
action={data.confirmation ? '/sign-up?/confirmation' : '/sign-up?/confirmation'}
|
||||
>
|
||||
<label for="email">Email</label>
|
||||
<Input
|
||||
|
|
@ -104,7 +103,7 @@
|
|||
</p>
|
||||
{/if}
|
||||
|
||||
{#if confirmation}
|
||||
{#if data.confirmation}
|
||||
<div
|
||||
class="flex flex-col gap-2"
|
||||
transition:fade={{
|
||||
|
|
@ -130,17 +129,17 @@
|
|||
|
||||
<Button class="mt-2" variant="brand">
|
||||
<!-- {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} -->
|
||||
{confirmation ? "S'inscrire" : 'Continuer'}
|
||||
{data.confirmation ? "S'inscrire" : 'Continuer'}
|
||||
</Button>
|
||||
|
||||
<ul class="flex justify-between">
|
||||
<li>
|
||||
<a class="text-highlight-secondary hover:text-brand" href="/sign-in">Se connecter</a>
|
||||
</li>
|
||||
{#if confirmation}
|
||||
{#if data.confirmation}
|
||||
<li>
|
||||
<button
|
||||
formaction="/sign-up?/register"
|
||||
formaction="/sign-up?/confirmation"
|
||||
class="text-highlight-secondary hover:text-brand">Pas reçu ?</button
|
||||
>
|
||||
</li>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue