129 lines
2.7 KiB
Svelte
129 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { delParcours } from '../../requests/room.request';
|
|
import { getContext } from 'svelte';
|
|
import FaRegTrashAlt from 'svelte-icons/fa/FaRegTrashAlt.svelte';
|
|
import type { Writable } from 'svelte/store';
|
|
import type { Member, Room } from '../../types/room.type';
|
|
import { goto } from '$app/navigation';
|
|
import { page } from '$app/stores';
|
|
const room: Writable<Room> = getContext('room');
|
|
const member: Writable<Member> = getContext('member');
|
|
const { alert } = getContext<{ alert: Function }>('alert');
|
|
</script>
|
|
|
|
<div class="parcours">
|
|
<div class="head">
|
|
<h2>Parcours</h2>
|
|
{#if $member.isAdmin}
|
|
<button
|
|
class="primary-btn"
|
|
on:click={() => {
|
|
goto(`?${new URLSearchParams({ p: 'new' }).toString()}`);
|
|
}}>Nouveau</button
|
|
>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="list">
|
|
{#if $room.parcours.length == 0}
|
|
<p class="empty">Aucun parcours pour le moment</p>
|
|
{/if}
|
|
{#each $room.parcours as p}
|
|
<div
|
|
on:click={() => {
|
|
goto(`?${new URLSearchParams({ p: p.id_code }).toString()}`);
|
|
}}
|
|
on:keydown={() => {}}
|
|
>
|
|
<p>{p.name}</p>
|
|
{#if p.best_note}
|
|
<p>Record : {p.best_note} fautes</p>
|
|
{:else}
|
|
Aucun essai effectué
|
|
{/if}
|
|
{#if p.validated}
|
|
<p data-testid="valid">Parcours validé</p>
|
|
{/if}
|
|
|
|
{#if $member.isAdmin}
|
|
<div
|
|
class="icon delete"
|
|
on:keydown={() => {}}
|
|
on:click|stopPropagation={() => {
|
|
alert({
|
|
title: 'Supprimer ?',
|
|
description: 'Voulez vous supprimer ce parcours ?',
|
|
validate: () => {
|
|
delParcours(
|
|
$room?.id_code,
|
|
p.id_code,
|
|
!$member.isUser ? $member?.clientId : null
|
|
);
|
|
}
|
|
});
|
|
}}
|
|
>
|
|
<FaRegTrashAlt />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.empty {
|
|
text-align: center;
|
|
font-style: italic;
|
|
margin: 30px 0;
|
|
}
|
|
.parcours {
|
|
background-color: rgba($background, 0.4);
|
|
border: 1px solid $border;
|
|
padding: 20px;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 5px;
|
|
}
|
|
.head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid $border;
|
|
padding: 10px 0;
|
|
button {
|
|
width: max-content;
|
|
}
|
|
}
|
|
.icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
color: $red;
|
|
transition: 0.4s;
|
|
opacity: 0;
|
|
&:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
.list {
|
|
overflow: auto;
|
|
> div {
|
|
padding: 30px 10px;
|
|
border-bottom: 1px solid $border-light;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
&:hover {
|
|
background-color: lighten($color: $background, $amount: 10);
|
|
.icon {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|