generateur_v3/frontend/src/components/rooms/Waiting.svelte

58 lines
1.2 KiB
Svelte

<script lang="ts">
import { getContext, onMount } from "svelte";
import type { Writable } from "svelte/store";
import type { Waiting } from "../../types/room.type";
import { goto } from "$app/navigation";
const member: Writable<Waiting | null> = getContext("member");
onMount(() => {
if ($member == null || !$member.waiter_id) {
goto("?");
}
});
</script>
{#if $member != null && $member.waiter_id}
<div class="waiting">
<h1>En attente</h1>
<p>En liste d'attente pour la salle <span class="room">{$member.room.name}<span
class="id">#{$member.room.id_code}</span></span> en tant que
<span class="member">{$member.username}<span class="id">#{$member.waiter_id}</span></span></p>
<p>En attente de la réponse de l'administrateur</p>
</div>
{/if}
<style lang="scss">
.waiting {
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
margin-bottom: 10px;
}
.room, .member {
text-decoration: underline;
font-style: italic;
font-weight: 600;
}
.id {
font-weight: 400;
color: #bebcbc;
}
button {
margin-top: 20px;
}
p {
text-align: center;
}
</style>