demovote-frontend/src/app/composants/participant-create/participant-create.component.html

<form #formRef="ngForm" (ngSubmit)="addParticipant()" class="needs-validation">
	<div class="card shadow center">
		<div class="card-header">Fiche d'un participant</div>
		<div class="card-header shadow-sm">
			<button (click)="goToListParticipant()" class="btn btn-primary btn-sm"><i class="fa-solid fa-xmark"></i>&nbsp;Retour</button>
		</div>
		<div class="card-body scrollable">

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Nom&nbsp;<sup><span class="text-danger">*</span></sup></label>
				<div class="col-sm-8">
					<input type="text" class="form-control form-control-sm field-separate" id="nom" name="nom" [(ngModel)]="participant.nom" #nomRef="ngModel" required [class.is-invalid]="nomRef.invalid && nomRef.touched">
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Prénom</label>
				<div class="col-sm-8">
					<input type="text" class="form-control form-control-sm field-separate" id="prenom" name="prenom" [(ngModel)]="participant.prenom">
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Pseudonyme&nbsp;<sup><span class="text-danger">*</span></sup></label>
				<div class="col-sm-8">
					<input type="text" class="form-control form-control-sm field-separate" id="pseudonyme" name="pseudonyme" [(ngModel)]="participant.pseudonyme" #pseudonymeRef="ngModel" required [class.is-invalid]="pseudonymeRef.invalid && pseudonymeRef.touched">
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Groupe</label>
				<div class="col-sm-8">
					<input type="text" class="form-control form-control-sm field-separate" id="groupe" name="groupe" [(ngModel)]="participant.groupe">
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Mot de passe</label>
				<div class="col-sm-8">
					<input type="password" class="form-control form-control-sm field-separate" id="motDePasse" name="motDePasse" [(ngModel)]="participant.motDePasse">
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Délai avant déconnexion</label>
				<div class="col-sm-8">
					<input type="text" class="form-control form-control-sm field-separate" id="delaiDeconnexion" name="delaiDeconnexion" [(ngModel)]="participant.delaiDeconnexion">
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Adresse</label>
				<div class="col-sm-8">
					<input type="text" class="form-control form-control-sm field-separate" id="adresse" name="adresse" [(ngModel)]="participant.adresse">
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Code postal</label>
				<div class="col-sm-8">
					<input type="text" class="form-control form-control-sm field-separate" id="codePostal" name="codePostal" [(ngModel)]="participant.codePostal">
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Ville</label>
				<div class="col-sm-8">
					<input type="text" class="form-control form-control-sm field-separate" id="ville" name="ville" [(ngModel)]="participant.ville">
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Pays</label>
				<div class="col-sm-8">
					<input type="text" class="form-control form-control-sm field-separate" id="pays" name="pays" [(ngModel)]="participant.pays">
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Numéro de téléphone</label>
				<div class="col-sm-8">
					<input type="text" class="form-control form-control-sm field-separate" id="numeroTelephone" name="numeroTelephone" [(ngModel)]="participant.numeroTelephone">
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Adresse email</label>
				<div class="col-sm-8">
					<input type="email" class="form-control form-control-sm field-separate" id="email" name="email" [(ngModel)]="participant.email">
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Status</label>
				<div class="col-sm-8">
					<div class="form-group field-separate">
						<select class="form-select form-select-sm" id="status" name="status" [(ngModel)]="participant.status" required #statusRef="ngModel" [class.is-invalid]="statusRef.invalid && statusRef.touched">
							@for (ps of PS; track ps.key) { <option [value]="ps.key">{{ ps.value }}</option> }
						</select>
					</div>
				</div>
			</div>

			<div class="form-group row">
				<div class="col-sm-4"></div>
				<div class="col-sm-8">
					<div class="form-check form-switch">
						<input class="form-check-input field-separate" type="checkbox" id="withMachine" name="withMachine" [(ngModel)]="participant.withMachine"> 
						<label class="form-check-label" for="withMachine">Avec machine</label>
					</div>
				</div>
			</div>

			<div class="form-group row">
				<div class="col-sm-4"></div>
				<div class="col-sm-8">
					<div class="form-check form-switch">
						<input class="form-check-input field-separate" type="checkbox" id="hereDay1" name="hereDay1" [(ngModel)]="participant.hereDay1"> 
						<label class="form-check-label" for="hereDay1">Jour 1</label>
					</div>
				</div>
			</div>

			<div class="form-group row">
				<div class="col-sm-4"></div>
				<div class="col-sm-8">
					<div class="form-check form-switch">
						<input class="form-check-input field-separate" type="checkbox" id="hereDay2" name="hereDay2" [(ngModel)]="participant.hereDay2"> 
						<label class="form-check-label" for="hereDay2">Jour 2</label>
					</div>
				</div>
			</div>

			<div class="form-group row">
				<div class="col-sm-4"></div>
				<div class="col-sm-8">
					<div class="form-check form-switch">
						<input class="form-check-input field-separate" type="checkbox" id="hereDay3" name="hereDay3" [(ngModel)]="participant.hereDay3"> 
						<label class="form-check-label" for="hereDay3">Jour 3</label>
					</div>
				</div>
			</div>

			<div class="form-group row">
				<div class="col-sm-4"></div>
				<div class="col-sm-8">
					<div class="form-check form-switch">
						<input class="form-check-input field-separate" type="checkbox" id="sleepingOnSite" name="sleepingOnSite" [(ngModel)]="participant.sleepingOnSite"> 
						<label class="form-check-label" for="sleepingOnSite">Dort sur place</label>
					</div>
				</div>
			</div>

			<!-- <div class="form-group row">
				<div class="col-sm-4"></div>
				<div class="col-sm-8">
					<div class="form-check form-switch">
						<input class="form-check-input field-separate" type="checkbox" id="useAmigabus" name="useAmigabus" [(ngModel)]="participant.useAmigabus"> 
						<label class="form-check-label" for="useAmigabus">Vient en Amigabus</label>
					</div>
				</div>
			</div> -->

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Commentaire</label>
				<div class="col-sm-8">
					<textarea class="form-control form-control-sm field-separate" id="commentaire" name="commentaire" [(ngModel)]="participant.commentaire"></textarea>
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Mode de paiement</label>
				<div class="col-sm-8">
					<div class="form-group field-separate">
						<select class="form-select form-select-sm" id="modePaiement" name="modePaiement" [(ngModel)]="participant.modePaiement" required #modePaiementRef="ngModel">
							@for (pmp of PMP; track pmp.key) { <option [value]="pmp.key">{{ pmp.value }}</option> }
						</select>
					</div>
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-4 col-form-label col-form-label-sm label-nobr">Somme reçue</label>
				<div class="col-sm-8">
					<input type="text" class="form-control form-control-sm field-separate" id="sommeRecue" name="sommeRecue" [(ngModel)]="participant.sommeRecue">
				</div>
			</div>

			<div class="form-group row">
				<div class="col-sm-4"></div>
				<div class="col-sm-8">
					<div class="form-check form-switch">
						<input class="form-check-input field-separate" type="checkbox" id="arrived" name="arrived" [(ngModel)]="participant.arrived" checked> 
						<label class="form-check-label" for="arrived">Arrivé</label>
					</div>
				</div>
			</div>

		</div>
		<div class="card-footer">
			<button type="button" class="btn btn-success btn-sm text-left" type="submit" [disabled]="formRef.invalid"><i class="fa-solid fa-plus"></i>&nbsp;Créer</button>
		</div>
	</div>
</form>