260 lines
6.5 KiB
Svelte
260 lines
6.5 KiB
Svelte
<script lang="ts">
|
|
import { getContext } from "svelte/internal";
|
|
import Card from "./Card.svelte";
|
|
import Head from "./Head.svelte";
|
|
import ModalCard from "./ModalCard.svelte";
|
|
import { getExo, getExos, getTags } from "../../requests/exo.request";
|
|
import { page } from "$app/stores";
|
|
import { onMount } from "svelte";
|
|
import Pagination from "./Pagination.svelte";
|
|
import { goto } from "$app/navigation";
|
|
import { type Writable, writable } from "svelte/store";
|
|
import { setContext } from "svelte";
|
|
import type { Page, Tag } from "../../types/exo.type";
|
|
import type { Store } from "../../types/api.type";
|
|
import { page as p } from "$app/stores";
|
|
|
|
const { show } = getContext<{ show: Function }>("modal");
|
|
const { navigate, insertUrl } = getContext<{ navigate: Function; insertUrl: Function }>(
|
|
"navigation"
|
|
);
|
|
const { isAuth } = getContext<{ isAuth: Writable<boolean> }>("auth");
|
|
let filter = $isAuth ? "user" : "public";
|
|
|
|
const exerciceStore = writable<Store<Page | undefined>>({
|
|
isLoading: false,
|
|
isFetching: false,
|
|
isSuccess: false,
|
|
data: undefined
|
|
});
|
|
const tagStore = writable<Store<Tag[] | undefined>>({
|
|
isLoading: false,
|
|
isFetching: false,
|
|
isSuccess: false,
|
|
data: []
|
|
});
|
|
|
|
setContext("exos", exerciceStore);
|
|
setContext("tags", tagStore);
|
|
|
|
|
|
onMount(() => {
|
|
let page = $page.url.searchParams.get("page");
|
|
if (page == null) {
|
|
page = "1";
|
|
}
|
|
if ($page.params.slug != undefined && !["user", "public"].includes($page.params.slug)) {
|
|
getExo($page.params.slug).then((r) => {
|
|
insertUrl("exercices/" + filter);
|
|
show(ModalCard, { exo: r, exos: exerciceStore, tags: tagStore }, () => navigate(-1));
|
|
});
|
|
} else if ($page.params.slug == undefined || $page.params.slug == "user") {
|
|
filter = $isAuth ? "user" : "public";
|
|
goto(`/exercices/${filter}?${new URLSearchParams({ page }).toString()}`);
|
|
} else if ($page.params.slug == "public") {
|
|
filter = "public";
|
|
goto(`/exercices/${filter}?${new URLSearchParams({ page }).toString()}`);
|
|
}
|
|
});
|
|
|
|
$: filter = ["user", "public"].includes($page.params.slug) ? $page.params.slug : filter;
|
|
|
|
/*$: if(['user', 'public'].includes($page.params.slug) && !$isAuth){
|
|
filter = "public"
|
|
//goto('/exercices/' + filter)
|
|
}*/
|
|
const size = 15;
|
|
$: activePage = parseInt($page.url.searchParams.get("page")!) || 1;
|
|
let search = "";
|
|
let selected: Tag[] = [];
|
|
|
|
$: {
|
|
if (!$isAuth) {
|
|
filter = "public";
|
|
}
|
|
exerciceStore.update((s) => {
|
|
return { ...s, isFetching: true };
|
|
});
|
|
getExos(filter as "public" | "user", {
|
|
page: activePage == 0 ? 1 : activePage,
|
|
search,
|
|
size,
|
|
tags: [...selected.map((t) => t.id_code)]
|
|
})
|
|
.then((r) => {
|
|
|
|
if (activePage > r.totalPage && r.total != 0 && r.totalPage != 0) {
|
|
activePage = r.totalPage;
|
|
//$p.url.searchParams.set('page', String(activePage));
|
|
goto(`?${new URLSearchParams({ page: activePage }).toString()}`);
|
|
return;
|
|
}
|
|
exerciceStore.update((e) => {
|
|
return { ...e, isSuccess: true, isFetching: false, data: r };
|
|
});
|
|
})
|
|
.catch(console.log);
|
|
}
|
|
|
|
$: {
|
|
if ($isAuth) {
|
|
tagStore.update((s) => {
|
|
return { ...s, isFetching: true };
|
|
});
|
|
getTags().then((r) => {
|
|
tagStore.update((e) => {
|
|
return { ...e, isSuccess: true, isFetching: false, data: r };
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<div class="full" class:loading={$tagStore.isFetching || $exerciceStore.isFetching}>
|
|
|
|
|
|
{#if $tagStore.data != undefined}
|
|
<Head location={filter} bind:search bind:selected />
|
|
{/if}
|
|
|
|
|
|
<div class="feed">
|
|
<div class="title">
|
|
{#if filter == 'user'}
|
|
<h1>
|
|
Vos <span>exercices</span>
|
|
</h1>
|
|
<p>
|
|
Vous retrouverez ici tous les exercices que vous avez créé ou copié depuis les exercices
|
|
publics
|
|
</p>
|
|
{:else}
|
|
<h1>
|
|
Tous les <span>exercices</span>
|
|
</h1>
|
|
<p>Vous retrouverez ici tous les exercices créés par les autres utilisateurs</p>
|
|
{/if}
|
|
</div>
|
|
{#if $exerciceStore.data != undefined}
|
|
{#each $exerciceStore.data.items.filter((e) => e != null && selected.every((t) => e.tags
|
|
.map((s) => s.id_code)
|
|
.includes(t.id_code))) as e}
|
|
<Card bind:exo={e} />
|
|
{/each}
|
|
{#if $exerciceStore.data.items.length == 0}
|
|
<p class="empty">Aucun exercice</p>
|
|
{/if}
|
|
{:else}
|
|
{#each Array(10) as i}
|
|
<div class="skeleton"><span /></div>
|
|
{/each}
|
|
{/if}
|
|
</div>
|
|
{#if $exerciceStore.data != undefined}
|
|
<Pagination bind:page={activePage} total={$exerciceStore.data.totalPage} />
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@import '../../variables';
|
|
@import "../../mixins.scss";
|
|
|
|
.skeleton {
|
|
//width: 330px;
|
|
max-width: 330px;
|
|
height: 250px;
|
|
opacity: .8;
|
|
|
|
span {
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: $skeleton;
|
|
display: block;
|
|
position: relative;
|
|
border-radius: 4px;
|
|
background-color: $skeleton;
|
|
overflow: hidden;
|
|
|
|
&::after {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
content: '';
|
|
position: absolute;
|
|
animation: waves 1.6s linear 0.5s infinite;
|
|
transform: translateX(-100%);
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
(lighten($color: $skeleton, $amount: 3), rgba(0, 0, 0, 0.04)),
|
|
transparent
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes waves {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
60% {
|
|
transform: translateX(100%);
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
.feed {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
grid-auto-flow: dense;
|
|
grid-gap: 32px;
|
|
margin: 0 auto;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.full {
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.title {
|
|
grid-column: 1/3;
|
|
display: flex;
|
|
text-align: left;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
@include down(600) {
|
|
grid-column: 1/2;
|
|
text-align: center;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3.5em;
|
|
font-weight: bolder;
|
|
margin: 0;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
span {
|
|
color: $primary;
|
|
}
|
|
}
|
|
.empty{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-style: italic;
|
|
}
|
|
|
|
</style>
|