206 lines
10 KiB
JavaScript
206 lines
10 KiB
JavaScript
// STAGE NATIONAL
|
|
// REMPLIR LE FORMULAIRE
|
|
// PARAGRAPHE PERSONNE
|
|
// POUR 6 Personnes
|
|
|
|
// STAGE NATIONAL
|
|
// REMPLIR LE FORMULAIRE
|
|
// PARAGRAPHE PERSONNE
|
|
// POUR 6 Personnes
|
|
|
|
let personne = 0;
|
|
|
|
window.onload = () => {
|
|
affichePersonne(personne);
|
|
};
|
|
|
|
function ajoutPersonne() {
|
|
affichePersonne(personne);
|
|
}
|
|
|
|
function affichePersonne(personneCount) {
|
|
personneCount++;
|
|
console.log("Affiche personne :", personneCount);
|
|
|
|
if (personneCount > 6) {
|
|
console.log("6 personnes maximum");
|
|
return;
|
|
}
|
|
|
|
// Vérifie si l'élément existe déjà
|
|
if (!document.querySelector(`#personne${personneCount}`)) {
|
|
let contenuHtmlPersonne = `
|
|
<section id="personne${personneCount}" class="personne">
|
|
<h2>
|
|
<img class="icone_titre" src="/public/images/icones/icone_personne.png" alt="icone information à cliquer">
|
|
PERSONNE <span class="rouge numero">${personneCount}</span>`;
|
|
|
|
if (personneCount > 1) {
|
|
contenuHtmlPersonne += `
|
|
<span class="remove_personne">
|
|
<input class="input_suppr" type="checkbox" name="check_personne_delete${personneCount}" id="check_personne_delete${personneCount}">
|
|
<label class="label_suppr" for="check_personne_delete${personneCount}" onclick="supprimerPersonne(${personneCount})">Supprimer cette personne</label>
|
|
</span>`;
|
|
}
|
|
|
|
contenuHtmlPersonne += `
|
|
</h2>
|
|
<div class="grid_2inputs">
|
|
<div class="input_box input_text input_box_gris">
|
|
<label for="personne_${personneCount}_nom">Nom de famille *</label>
|
|
<input type="text" name="personne_${personneCount}_nom" id="personne_${personneCount}_nom" required>
|
|
</div>
|
|
<div class="input_box input_text input_box_gris">
|
|
<label for="personne_${personneCount}_prenom">Prénom *</label>
|
|
<input type="text" name="personne_${personneCount}_prenom" id="personne_${personneCount}_prenom" required>
|
|
</div>
|
|
</div>
|
|
<div class="grid_2inputs">
|
|
<div class="input_box input_text input_box_gris">
|
|
<label for="personne_${personneCount}_datenaissance">Date de naissance * (jj/mm/aaaa)</label>
|
|
<input type="text" name="personne_${personneCount}_datenaissance" id="personne_${personneCount}_datenaissance" placeholder="01/01/1999" pattern="[0-3][0-9]/[0-1][0-9]/[1-2][0-9]{3}" minlength="10" maxlength="10" title="le format de date doit être jj/mm/aaaa" required>
|
|
</div>
|
|
</div>
|
|
<div id="personne_${personneCount}_instrument_activite_call" class="grid_2inputs">
|
|
<div id="personne_${personneCount}_profil_call" class="input_box input_text input_box_bleu">
|
|
<label for="personne_${personneCount}_role">Rôle de la personne ? *</label>
|
|
<select id="personne_${personneCount}_role" name="personne_${personneCount}_role" autocomplete="off" required onchange="selectPersonneProfil(this, ${personneCount})">
|
|
<option value="" selected></option>
|
|
<option value="instrumentiste">Élève</option>
|
|
<option value="professeur">Professeur</option>
|
|
</select>
|
|
</div>
|
|
</div>`;
|
|
|
|
if (personneCount < 6) {
|
|
contenuHtmlPersonne += `
|
|
<div class="input_checkbox">
|
|
<input type="checkbox" name="check_personne${personneCount}" id="check_personne${personneCount}" onclick="ajoutPersonne()">
|
|
<label for="check_personne${personneCount}">Voulez-vous ajouter une autre personne au stage ?</label>
|
|
</div>`;
|
|
}
|
|
|
|
contenuHtmlPersonne += `</section>`;
|
|
|
|
// Insère le nouveau contenu après la dernière personne
|
|
const lastPersonne = document.querySelector(`#personne${personneCount - 1}`);
|
|
if (lastPersonne) {
|
|
lastPersonne.insertAdjacentHTML("afterend", contenuHtmlPersonne);
|
|
} else {
|
|
document.body.insertAdjacentHTML("beforeend", contenuHtmlPersonne);
|
|
}
|
|
|
|
personne = personneCount;
|
|
}
|
|
}
|
|
|
|
function selectPersonneProfil(select, personneCount) {
|
|
console.log("Valeur sélectionnée :", select.value);
|
|
|
|
const instrumentDisplayId = `#personne_${personneCount}_instrument_display`;
|
|
const instrumentActiviteCall = document.querySelector(`#personne_${personneCount}_instrument_activite_call`);
|
|
|
|
// Supprime l'affichage précédent
|
|
if (document.querySelector(instrumentDisplayId)) {
|
|
document.querySelector(instrumentDisplayId).remove();
|
|
}
|
|
|
|
if (select.value === "professeur") {
|
|
instrumentActiviteCall.insertAdjacentHTML("afterend", `
|
|
<div id="personne_${personneCount}_instrument_display">
|
|
<div class="grid_2inputs">
|
|
<div class="input_box input_text input_box_gris">
|
|
<label for="personne_${personneCount}_instrument">Instrument *</label>
|
|
<select id="personne_${personneCount}_instrument" name="personne_${personneCount}_instrument" required onchange="handleInstrumentChange(${personneCount})">
|
|
<option value="" selected></option>
|
|
<option value="alto">Alto</option>
|
|
<option value="violon">Violon</option>
|
|
<option value="violoncelle">Violoncelle</option>
|
|
</select>
|
|
</div>
|
|
<div class="input_box input_text input_box_bleu">
|
|
<label for="personne_${personneCount}_repas">Repas du midi *</label>
|
|
<select id="personne_${personneCount}_repas" name="personne_${personneCount}_repas" required>
|
|
<option value="" selected></option>
|
|
<option value="repas">Oui (8€)</option>
|
|
<option value="non">Non</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>`);
|
|
} else if (select.value === "instrumentiste") {
|
|
instrumentActiviteCall.insertAdjacentHTML("afterend", `
|
|
<div id="personne_${personneCount}_instrument_display">
|
|
<div class="grid_2inputs">
|
|
<div class="input_box input_text input_box_gris">
|
|
<label for="personne_${personneCount}_instrument">Instrument *</label>
|
|
<select id="personne_${personneCount}_instrument" name="personne_${personneCount}_instrument" required onchange="handleInstrumentChange(${personneCount})">
|
|
<option value="" selected></option>
|
|
<option value="alto">Alto</option>
|
|
<option value="violon">Violon</option>
|
|
<option value="violoncelle">Violoncelle</option>
|
|
</select>
|
|
</div>
|
|
<div class="input_box input_text input_box_bleu">
|
|
<label for="personne_${personneCount}_cahier">Niveau Cahier *</label>
|
|
<select id="personne_${personneCount}_cahier" name="personne_${personneCount}_cahier" required>
|
|
<option value="" selected></option>
|
|
<option value="Cahier 1">Cahier 1</option>
|
|
<option value="Cahier 2">Cahier 2</option>
|
|
<option value="Cahier 3">Cahier 3</option>
|
|
<option value="Cahier 4">Cahier 4</option>
|
|
<option value="Cahier 5">Cahier 5</option>
|
|
<option value="Cahier 6">Cahier 6</option>
|
|
<option value="Cahier 7">Cahier 7</option>
|
|
<option value="Cahier 8">Cahier 8</option>
|
|
<option value="Cahier 9">Cahier 9</option>
|
|
<option value="Cahier 10">Cahier 10</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="grid_2inputs">
|
|
<div class="input_box input_text input_box_bleu">
|
|
<label for="personne_${personneCount}_piece">Pièces récentes *</label>
|
|
<input type="text" name="personne_${personneCount}_piece" id="personne_${personneCount}_piece" required>
|
|
</div>
|
|
<div id="professeur_field_${personneCount}" class="input_box input_text input_box_bleu">
|
|
<label for="personne_${personneCount}_prof">Nom professeur *</label>
|
|
<input type="text" name="personne_${personneCount}_prof" id="personne_${personneCount}_prof" required>
|
|
</div>
|
|
</div>
|
|
</div>`);
|
|
}
|
|
}
|
|
|
|
function handleInstrumentChange(personneCount) {
|
|
const instrumentSelect = document.querySelector(`#personne_${personneCount}_instrument`);
|
|
const professeurField = document.querySelector(`#professeur_field_${personneCount}`);
|
|
|
|
if (instrumentSelect && professeurField) {
|
|
// Si l'instrument sélectionné est le piano, affiche une liste déroulante pour le professeur
|
|
if (instrumentSelect.value === "piano") {
|
|
professeurField.innerHTML = `
|
|
<label for="personne_${personneCount}_prof">Nom professeur *</label>
|
|
<select id="personne_${personneCount}_prof" name="personne_${personneCount}_prof" required>
|
|
<option value="" selected></option>
|
|
<option value="Isabelle Gaston">Isabelle Gaston</option>
|
|
<option value="Koyuki Kawahara">Koyuki Kawahara</option>
|
|
</select>
|
|
<p>Seuls les élèves de Isabelle Gaston et Koyuki Kawahara peuvent s'inscrire pour le piano.</p>`;
|
|
} else {
|
|
// Pour les autres instruments, affiche un champ de saisie libre
|
|
professeurField.innerHTML = `
|
|
<label for="personne_${personneCount}_prof">Nom professeur *</label>
|
|
<input type="text" name="personne_${personneCount}_prof" id="personne_${personneCount}_prof" required>
|
|
`;
|
|
}
|
|
}
|
|
}
|
|
|
|
function supprimerPersonne(personneCount) {
|
|
const personneElement = document.querySelector(`#personne${personneCount}`);
|
|
if (personneElement) {
|
|
personneElement.remove();
|
|
}
|
|
}
|