server/frontend/fic/src/lib/components/RegistrationFormJoinTeam.sv...

100 lines
2.6 KiB
Svelte

<script>
import { createEventDispatcher } from 'svelte';
import {
Alert,
Badge,
Button,
Card,
Col,
Container,
Icon,
Row,
} from 'sveltestrap';
import { settings } from '$lib/stores/settings.js';
import { teams } from '$lib/stores/teams.js';
import RegistrationRowMember from './RegistrationRowMember.svelte';
const dispatch = createEventDispatcher();
export let value = { };
function JvalidateTeam() {
if (!value.members || value.members.length == 0) {
value.members = [{ }];
}
value = value;
partJ = true;
}
function submit(event) {
if (!partJ) {
JvalidateTeam();
} else {
dispatch('submit', event);
}
}
export let partJ = false;
let message = "";
let messageClass = "danger";
</script>
{#if Object.keys($teams).length}
<form on:submit|preventDefault={submit}>
<Row>
<label for="jTeam" class="col col-form-label">Nom d'équipe</label>
<div class="col-sm-10">
<div class="input-group">
<select
class="form-select"
id="jTeam"
bind:value={value.jTeam}
required
disabled={partJ}
>
{#each Object.keys($teams) as tid, index}
<option value={$teams[tid].id}>
{$teams[tid].name}
</option>
{/each}
</select>
<Button color="info" type="button" on:click={JvalidateTeam} disabled={partJ}>Valider</Button>
<div class="invalid-feedback">
Veuillez indiquer une équipe valide.
</div>
</div>
</div>
</Row>
{#if partJ}
<h4 class="mt-4">
Vos informations
</h4>
{#if message}
<p class={messageClass}>{message}</p>
{/if}
<RegistrationRowMember
bind:member={value.members[0]}
/>
<Row>
<Col sm={{ size: 9, offset: 3 }} md={{ size: 8, offset: 4 }}>
<Button color="info" class="mt-4" type="submit" disabled={!value.jTeam}>
C'est parti&nbsp;!
<Icon name="chevron-right" />
</Button>
</Col>
</Row>
{/if}
</form>
{:else}
<p class="card-text">
Aucune équipe enregistrée pour l'instant.
</p>
{/if}