total_1ère
This commit is contained in:
686
public/js/concert/concert_formulaire_famille.js
Normal file
686
public/js/concert/concert_formulaire_famille.js
Normal file
@@ -0,0 +1,686 @@
|
||||
// CONCERT ANNUEL
|
||||
// REMPLIR LE FORMULAIRE
|
||||
|
||||
|
||||
/////////////////////////////////////////
|
||||
// AFFICHAGE DU CHAMP DE SAISIE DU NOMBRE DE SPECTATEURS
|
||||
/////////////////////////////////////////
|
||||
let saisie_spectateur_nb_place = document.querySelector("#spectateur0");
|
||||
let spectateur_nb_restantes = saisie_spectateur_nb_place.dataset.spectateur_nb_restantes;
|
||||
let quota_total_spectateur = saisie_spectateur_nb_place.dataset.quota_total_spectateur;
|
||||
let contenuhtml_spectateur;
|
||||
console.log("spectateur_nb_restantes = ", spectateur_nb_restantes);
|
||||
console.log("quota_total_spectateur = ", quota_total_spectateur);
|
||||
|
||||
// AFFICHER LE CHAMP DE SAISIE DU NOMBRE DE SPECTATEURS
|
||||
console.log("saisie_spectateur_nb_place.dataset.spectateur_remisenvente = ",saisie_spectateur_nb_place.dataset.spectateur_remisenvente);
|
||||
console.log("saisie_spectateur_nb_place.dataset.quota_total_spectateur = ",saisie_spectateur_nb_place.dataset.quota_total_spectateur);
|
||||
var storedData = localStorage.getItem('userData');
|
||||
var userData = JSON.parse(storedData);
|
||||
|
||||
if (saisie_spectateur_nb_place.dataset.spectateur_remisenvente == "oui") {
|
||||
if (spectateur_nb_restantes >= 12 || quota_total_spectateur >=12){
|
||||
contenuhtml_spectateur = `<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="spectateur_nb_place">Nombre de places spectateurs ?</label>
|
||||
<select id="spectateur_nb_place" name="spectateur_nb_place" title="3 places max par famille" onchange="store_nb_spectateurs()">
|
||||
<option value="" selected></option>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
<option value="11">11</option>
|
||||
<option value="12">12</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
if (spectateur_nb_restantes == 11 || quota_total_spectateur ==11){
|
||||
contenuhtml_spectateur = `<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="spectateur_nb_place">Nombre de places spectateurs ?</label>
|
||||
<select id="spectateur_nb_place" name="spectateur_nb_place" title="3 places max par famille" onchange="store_nb_spectateurs()">
|
||||
<option value="" selected></option>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
<option value="11">11</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
if (spectateur_nb_restantes == 10 || quota_total_spectateur ==10){
|
||||
contenuhtml_spectateur = `<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="spectateur_nb_place">Nombre de places spectateurs ?</label>
|
||||
<select id="spectateur_nb_place" name="spectateur_nb_place" title="3 places max par famille" onchange="store_nb_spectateurs()">
|
||||
<option value="" selected></option>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
if (spectateur_nb_restantes == 9 || quota_total_spectateur ==9){
|
||||
contenuhtml_spectateur = `<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="spectateur_nb_place">Nombre de places spectateurs ?</label>
|
||||
<select id="spectateur_nb_place" name="spectateur_nb_place" title="3 places max par famille" onchange="store_nb_spectateurs()">
|
||||
<option value="" selected></option>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
if (spectateur_nb_restantes == 8 || quota_total_spectateur ==8){
|
||||
contenuhtml_spectateur = `<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="spectateur_nb_place">Nombre de places spectateurs ?</label>
|
||||
<select id="spectateur_nb_place" name="spectateur_nb_place" title="3 places max par famille" onchange="store_nb_spectateurs()">
|
||||
<option value="" selected></option>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
if (spectateur_nb_restantes == 7 || quota_total_spectateur ==7){
|
||||
contenuhtml_spectateur = `<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="spectateur_nb_place">Nombre de places spectateurs ?</label>
|
||||
<select id="spectateur_nb_place" name="spectateur_nb_place" title="3 places max par famille" onchange="store_nb_spectateurs()">
|
||||
<option value="" selected></option>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
if (spectateur_nb_restantes == 6 || quota_total_spectateur ==6){
|
||||
contenuhtml_spectateur = `<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="spectateur_nb_place">Nombre de places spectateurs ?</label>
|
||||
<select id="spectateur_nb_place" name="spectateur_nb_place" title="3 places max par famille" onchange="store_nb_spectateurs()">
|
||||
<option value="" selected></option>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
if (spectateur_nb_restantes == 5 || quota_total_spectateur ==5){
|
||||
contenuhtml_spectateur = `<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="spectateur_nb_place">Nombre de places spectateurs ?</label>
|
||||
<select id="spectateur_nb_place" name="spectateur_nb_place" title="3 places max par famille" onchange="store_nb_spectateurs()">
|
||||
<option value="" selected></option>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
if (spectateur_nb_restantes == 4 || quota_total_spectateur ==4){
|
||||
contenuhtml_spectateur = `<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="spectateur_nb_place">Nombre de places spectateurs ?</label>
|
||||
<select id="spectateur_nb_place" name="spectateur_nb_place" title="3 places max par famille" onchange="store_nb_spectateurs()">
|
||||
<option value="" selected></option>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
if (spectateur_nb_restantes == 3 || quota_total_spectateur ==3){
|
||||
contenuhtml_spectateur = `<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="spectateur_nb_place">Nombre de places spectateurs ?</label>
|
||||
<select id="spectateur_nb_place" name="spectateur_nb_place" title="3 places max par famille" onchange="store_nb_spectateurs()">
|
||||
<option value="" selected></option>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
if (spectateur_nb_restantes == 2 || quota_total_spectateur ==2){
|
||||
contenuhtml_spectateur = `<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="spectateur_nb_place">Nombre de places spectateurs ?</label>
|
||||
<select id="spectateur_nb_place" name="spectateur_nb_place" title="3 places max par famille" onchange="store_nb_spectateurs()">
|
||||
<option value="" selected></option>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
if (spectateur_nb_restantes == 1 || quota_total_spectateur ==1){
|
||||
contenuhtml_spectateur = `<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="spectateur_nb_place">Nombre de places spectateurs ?</label>
|
||||
<select id="spectateur_nb_place" name="spectateur_nb_place" title="3 places max par famille" onchange="store_nb_spectateurs()">
|
||||
<option value="" selected></option>
|
||||
<option value="0">0</option>
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
if (spectateur_nb_restantes < 1){
|
||||
contenuhtml_spectateur = `<div class="grid_2inputs">
|
||||
<p class="montserrat_light"><mark>Il n'y a plus de place spectateur</mark> pour le concert. Revenez à partir du 5 avril, nous remettrons les places qui se seraient libérées.</p>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
} else {
|
||||
contenuhtml_spectateur = `<div class="grid_2inputs">
|
||||
<p class="montserrat_light"><mark>La vente des places spectateurs est terminée.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
document.querySelector('#spectateur0').insertAdjacentHTML("afterend",contenuhtml_spectateur);
|
||||
|
||||
/////////////////////////////////////////
|
||||
/////////////////////////////////////////
|
||||
// CONCERTISTE
|
||||
// 4 MAX
|
||||
/////////////////////////////////////////
|
||||
/////////////////////////////////////////
|
||||
var eleve = "0";
|
||||
let contenuhtml_eleve;
|
||||
console.log("eleve A : ",eleve);
|
||||
|
||||
// quand le visiteur clique sur "ajouter un élève"
|
||||
function ajout_eleve(eleve) {
|
||||
console.log("eleve B : ",eleve);
|
||||
afficheeleve(eleve);
|
||||
}
|
||||
|
||||
/////////////////////////////////////////
|
||||
// SAISIE DES INFORMATIONS POUR UN CONCERTISTE
|
||||
/////////////////////////////////////////
|
||||
function afficheeleve(eleve) {
|
||||
eleve++;
|
||||
console.log("eleve C : ",eleve);
|
||||
|
||||
|
||||
if (eleve > 4 ) {
|
||||
console.log("4 élèves maximum");
|
||||
return;
|
||||
}
|
||||
|
||||
// Ce if sert pour ne pas répéter plusieurs fois le même numéro de eleve si l'internaute clique plusieurs fois sur le même "ajouter une eleve"
|
||||
if (!document.querySelector('#eleve'+ eleve +'')) {
|
||||
|
||||
contenuhtml_eleve = `<section id="eleve`+ eleve +`" class="personne">
|
||||
|
||||
<h2><img class='icone_titre' src="/public/images/icones/icone_personne.png" alt="icone information">ÉLÈVE <span class="rouge numero">`+ eleve +`</span>`;
|
||||
|
||||
// Permettre de supprimer les élèves ajoutés
|
||||
if (eleve > 0) {
|
||||
contenuhtml_eleve += ` <span class="remove_personne"><input class="input_suppr" type="checkbox" name="check_eleve_delete`+ eleve +`" id="check_eleve_delete`+ eleve +`" onchange="supprimer_eleve(`+ eleve +`)"><label class="label_suppr" for="check_eleve_delete`+ eleve +`">Supprimer cet eleve</label></span>`;
|
||||
};
|
||||
|
||||
contenuhtml_eleve += `</h2>
|
||||
|
||||
<section class="">
|
||||
<div class="input_checkbox input_checkbox_bleu">
|
||||
<input type="checkbox" name="eleve_`+ eleve +`_engagement" id="eleve_`+ eleve +`_engagement" required>
|
||||
<label for="eleve_`+ eleve +`_engagement">Le concertiste s'engage à être présent les 2 journées du 20 et 21 avril 2024.</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_gris">
|
||||
<label for="eleve_`+ eleve +`_nom">Nom de famille *</label>
|
||||
<input type="text" name="eleve_`+ eleve +`_nom" id="eleve_`+ eleve +`_nom" title="Nom de famille de l'élève concertiste" required>
|
||||
</div>
|
||||
|
||||
<div class="input_box input_text input_box_gris">
|
||||
<label for="eleve_`+ eleve +`_prenom">Prénom *</label>
|
||||
<input type="text" name="eleve_`+ eleve +`_prenom" id="eleve_`+ eleve +`_prenom" title="Prénom de l'élève concertiste" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_gris">
|
||||
<label for="eleve_`+ eleve +`_age">Age *</label>
|
||||
<input type="number" name="eleve_`+ eleve +`_age" id="eleve_`+ eleve +`_age" placeholder="22 ans maximum" title="Entrer un chiffre" max="22" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="eleve_`+ eleve +`_instrument">Instrument *</label>
|
||||
<select id="eleve_`+ eleve +`_instrument" name="eleve_`+ eleve +`_instrument" title="De quel instrument joue l'élève ?" required onchange="select_instrument(`+eleve+`)">
|
||||
<option value="" selected></option>`;
|
||||
|
||||
if (document.querySelector("#eleve0").dataset.piano_nb_restantes > 0) {contenuhtml_eleve += `<option value="Piano">Piano</option>`;}
|
||||
if (document.querySelector("#eleve0").dataset.violon1_nb_restantes > 0 || document.querySelector("#eleve0").dataset.violon2_nb_restantes > 0) {contenuhtml_eleve += `<option value="Violon">Violon</option>`;}
|
||||
if (document.querySelector("#eleve0").dataset.violoncelle1_nb_restantes > 0 || document.querySelector("#eleve0").dataset.violoncelle2_nb_restantes > 0) {contenuhtml_eleve += `<option value="Violoncelle">Violoncelle</option>`;}
|
||||
if (document.querySelector("#eleve0").dataset.alto_nb_restantes > 0) {contenuhtml_eleve += `<option value="Alto">Alto</option>`;}
|
||||
if (document.querySelector("#eleve0").dataset.flute_nb_restantes > 0) {contenuhtml_eleve += `<option value="Flute">Flûte</option>`;}
|
||||
if (document.querySelector("#eleve0").dataset.trompette_nb_restantes > 0) {contenuhtml_eleve += `<option value="Trompette">Trompette</option>`;}
|
||||
if (document.querySelector("#eleve0").dataset.harpe_nb_restantes > 0) {contenuhtml_eleve += `<option value="Harpe">Harpe</option>`;}
|
||||
|
||||
contenuhtml_eleve += `</select>
|
||||
</div>
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="eleve_`+ eleve +`_cahier">Niveau Cahier *</label>
|
||||
<select id="eleve_`+ eleve +`_cahier" name="eleve_`+ eleve +`_cahier" title="Quel est son niveau" required>
|
||||
<option value="" selected></option>`;
|
||||
|
||||
|
||||
contenuhtml_eleve += `</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="eleve_`+ eleve +`_piece">Dernière pièce jouée *</label>
|
||||
<input type="text" name="eleve_`+ eleve +`_piece" id="eleve_`+ eleve +`_piece" title="Quelle musique a-t-il joué en dernier ?" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="eleve_`+ eleve +`_prof_nom">Nom et prénom du professeur *</label>
|
||||
<input type="text" name="eleve_`+ eleve +`_prof_nom" id="eleve_`+ eleve +`_prof_nom" title="Le nom et prénom du professeur de l'élève" required>
|
||||
</div>
|
||||
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="eleve_`+ eleve +`_prof_mail">Mail professeur *</label>
|
||||
<input type="email" name="eleve_`+ eleve +`_prof_mail" id="eleve_`+ eleve +`_prof_mail" title="L'adresse mail du professeur" required>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
|
||||
if (eleve < 4) {
|
||||
contenuhtml_eleve += "<!-- ---------------------------------- -->"+
|
||||
`<!-- Voulez-vous ajouter un autre concertiste ? -->`+
|
||||
`<!-- ---------------------------------- -->`+
|
||||
`<div class="input_checkbox">`+
|
||||
`<input type="checkbox" name="check_eleve`+ eleve +`" id="check_eleve`+ eleve +`" onchange="ajout_eleve(`+ eleve +`)">`+
|
||||
`<label class="gras" for="check_eleve`+ eleve +`">Voulez-vous ajouter un autre eleve concertiste ?</label>`+
|
||||
`</div>`
|
||||
};
|
||||
|
||||
contenuhtml_eleve += `</section>`;
|
||||
|
||||
|
||||
eleve--;
|
||||
console.log("eleve D : ",eleve);
|
||||
|
||||
// AFFICHER LE FORMULAIRE DE SAISIE D'UN CONCERTISTE APRÈS LE DERNIER
|
||||
|
||||
document.querySelector('#eleve'+ eleve +'').insertAdjacentHTML("afterend",contenuhtml_eleve);
|
||||
|
||||
|
||||
|
||||
eleve++;
|
||||
console.log("eleve à la fin de la fonction : ",eleve);
|
||||
|
||||
return eleve;
|
||||
}
|
||||
}
|
||||
|
||||
function select_instrument(eleve) {
|
||||
console.log(document.getElementById("eleve_"+ eleve +"_instrument"));
|
||||
let instrument_saisie = document.getElementById("eleve_"+ eleve +"_instrument").value;
|
||||
console.log("instrument_saisie = ", instrument_saisie);
|
||||
|
||||
if (instrument_saisie == "Piano" || instrument_saisie == "Alto" || instrument_saisie == "Flute" || instrument_saisie == "Trompette" || instrument_saisie == "Harpe"){
|
||||
contenuhtml_eleve = `<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>`;
|
||||
document.getElementById("eleve_"+ eleve +"_cahier").innerHTML = contenuhtml_eleve;
|
||||
contenuhtml_eleve ='';
|
||||
}
|
||||
if (instrument_saisie == "Violon") {
|
||||
if (document.querySelector("#eleve0").dataset.violon1_nb_restantes > 0 && document.querySelector("#eleve0").dataset.violon2_nb_restantes > 0) {
|
||||
contenuhtml_eleve = `<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>`;
|
||||
document.getElementById("eleve_"+ eleve +"_cahier").innerHTML = contenuhtml_eleve;
|
||||
contenuhtml_eleve ='';
|
||||
}
|
||||
if (document.querySelector("#eleve0").dataset.violon1_nb_restantes > 0 && document.querySelector("#eleve0").dataset.violon2_nb_restantes < 1) {
|
||||
contenuhtml_eleve = `<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>`;
|
||||
document.getElementById("eleve_"+ eleve +"_cahier").innerHTML = contenuhtml_eleve;
|
||||
contenuhtml_eleve ='';
|
||||
}
|
||||
if (document.querySelector("#eleve0").dataset.violon1_nb_restantes < 1 && document.querySelector("#eleve0").dataset.violon2_nb_restantes > 0) {
|
||||
contenuhtml_eleve = `<option value="" selected></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>`;
|
||||
document.getElementById("eleve_"+ eleve +"_cahier").innerHTML = contenuhtml_eleve;
|
||||
contenuhtml_eleve ='';
|
||||
}
|
||||
if (document.querySelector("#eleve0").dataset.violon1_nb_restantes < 1 && document.querySelector("#eleve0").dataset.violon2_nb_restantes < 1) {
|
||||
contenuhtml_eleve = `<option value="" selected></option>`;
|
||||
document.getElementById("eleve_"+ eleve +"_cahier").innerHTML = contenuhtml_eleve;
|
||||
contenuhtml_eleve ='';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (instrument_saisie == "Violoncelle") {
|
||||
if (document.querySelector("#eleve0").dataset.violoncelle1_nb_restantes > 0 && document.querySelector("#eleve0").dataset.violoncelle2_nb_restantes > 0) {
|
||||
contenuhtml_eleve = `<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>`;
|
||||
document.getElementById("eleve_"+ eleve +"_cahier").innerHTML = contenuhtml_eleve;
|
||||
contenuhtml_eleve ='';
|
||||
}
|
||||
if (document.querySelector("#eleve0").dataset.violoncelle1_nb_restantes > 0 && document.querySelector("#eleve0").dataset.violoncelle2_nb_restantes < 1) {
|
||||
contenuhtml_eleve = `<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>`;
|
||||
document.getElementById("eleve_"+ eleve +"_cahier").innerHTML = contenuhtml_eleve;
|
||||
contenuhtml_eleve ='';
|
||||
}
|
||||
if (document.querySelector("#eleve0").dataset.violoncelle1_nb_restantes < 1 && document.querySelector("#eleve0").dataset.violoncelle2_nb_restantes > 0) {
|
||||
contenuhtml_eleve = `<option value="" selected></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>`;
|
||||
document.getElementById("eleve_"+ eleve +"_cahier").innerHTML = contenuhtml_eleve;
|
||||
contenuhtml_eleve ='';
|
||||
}
|
||||
if (document.querySelector("#eleve0").dataset.violoncelle1_nb_restantes < 1 && document.querySelector("#eleve0").dataset.violoncelle2_nb_restantes < 1) {
|
||||
contenuhtml_eleve = `<option value="" selected></option>`;
|
||||
document.getElementById("eleve_"+ eleve +"_cahier").innerHTML = contenuhtml_eleve;
|
||||
contenuhtml_eleve ='';
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function supprimer_eleve(eleve) {
|
||||
document.querySelector('#eleve'+ eleve +'').remove();
|
||||
}
|
||||
|
||||
|
||||
/////////////////////////////////////////
|
||||
/////////////////////////////////////////
|
||||
// ENCADRANT
|
||||
/////////////////////////////////////////
|
||||
/////////////////////////////////////////
|
||||
var encadrant = "0";
|
||||
let saisie_encadr_parent_nb_place = document.querySelector("#encadrant0");
|
||||
//var encadr_parent_nb_place_restantes = 0;
|
||||
var encadr_parent_nb_place_restantes;
|
||||
console.log("dataset encadr_parent_nb_place_restantes = ",encadr_parent_nb_place_restantes)
|
||||
let contenuhtml_encadrant;
|
||||
console.log("encadrant A : ",encadrant);
|
||||
|
||||
// quand le visiteur clique sur "ajouter un encadrant"
|
||||
function ajout_encadrant(encadrant,encadr_parent_nb_place_restantes) {
|
||||
console.log("encadrant B : ",encadrant);
|
||||
console.log("encadr_parent_nb_place_restantes B : ",encadr_parent_nb_place_restantes);
|
||||
afficheencadrant(encadrant,encadr_parent_nb_place_restantes);
|
||||
}
|
||||
|
||||
/////////////////////////////////////////
|
||||
// SAISIE DES INFORMATIONS POUR UN ENCADRANT
|
||||
/////////////////////////////////////////
|
||||
function afficheencadrant(encadrant,encadr_parent_nb_place_restantes) {
|
||||
encadrant++;
|
||||
//encadr_parent_nb_place_restantes--;
|
||||
console.log("encadrant C : ",encadrant);
|
||||
console.log("FUNCTION afficheencadrant, encadr_parent_nb_place_restantes : ",encadr_parent_nb_place_restantes);
|
||||
|
||||
if (encadrant > 4 ) {
|
||||
console.log("4 encadrants maximum");
|
||||
return;
|
||||
}
|
||||
|
||||
// Ce if sert pour ne pas répéter plusieurs fois le même numéro de encadrant si l'internaute clique plusieurs fois sur le même "ajouter une encadrant"
|
||||
if (!document.querySelector('#encadrant'+ encadrant +'')) {
|
||||
let saisie_encadr_parent_nb_place = document.querySelector("#encadrant0");
|
||||
console.log("dataset encadr_parent_nb_place_restantes = ",encadr_parent_nb_place_restantes)
|
||||
|
||||
contenuhtml_encadrant = `<section id="encadrant`+ encadrant +`" class="personne">
|
||||
|
||||
<h2><img class='icone_titre' src="/public/images/icones/icone_personne.png" alt="icone information">ENCADRANT <span class="rouge numero">`+ encadrant +`</span>`;
|
||||
|
||||
// Permettre de supprimer les encadrants ajoutés (à partir du deuxième encadrant)
|
||||
if (encadrant > 0) {
|
||||
contenuhtml_encadrant += ` <span class="remove_personne"><input class="input_suppr" type="checkbox" name="check_encadrant_delete`+ encadrant +`" id="check_encadrant_delete`+ encadrant +`" onchange="supprimer_encadrant(`+ encadrant +`)"><label class="label_suppr" for="check_encadrant_delete`+ encadrant +`">Supprimer cet encadrant</label></span>`;
|
||||
};
|
||||
|
||||
contenuhtml_encadrant += `</h2>
|
||||
|
||||
<section class="">
|
||||
<div class="input_checkbox input_checkbox_bleu">
|
||||
<input type="checkbox" name="encadrant_`+ encadrant +`_engagement" id="encadrant_`+ encadrant +`_engagement" required>
|
||||
<label for="encadrant_`+ encadrant +`_engagement">L'encadrant s'engage pour les 2 journées du 20 et 21 avril 2024.</label>
|
||||
</div>
|
||||
</section>`;
|
||||
if (encadr_parent_nb_place_restantes < 1){
|
||||
contenuhtml_encadrant += `<div class="grid_2inputs"><p class="montserrat_light"><mark>Le nombre nécessaire de <strong>parents</strong> encadrants a été atteint.</mark> Les professeurs peuvent encore s'inscrire comme professeur encadrant.</p><br></div>`;
|
||||
};
|
||||
|
||||
|
||||
contenuhtml_encadrant += `<section class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="encadrant_`+ encadrant +`_type">Êtes-vous professeur ou parent ? *</label>
|
||||
<select id="encadrant_`+ encadrant +`_type" name="encadrant_`+ encadrant +`_type" title="De quel instrument joue l'élève ?" required onchange="si_encadrant_prof(`+ encadrant +`)">
|
||||
<option value="" selected></option>
|
||||
<option value="Professeur">Professeur</option>`;
|
||||
if (encadr_parent_nb_place_restantes > 0){
|
||||
contenuhtml_encadrant += `<option value="Parent">Parent</option>`;
|
||||
};
|
||||
contenuhtml_encadrant += `</select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_gris">
|
||||
<label for="encadrant_`+ encadrant +`_nom">Nom de famille *</label>
|
||||
<input type="text" name="encadrant_`+ encadrant +`_nom" id="encadrant_`+ encadrant +`_nom" title="Nom de famille de l'élève encadrant" required>
|
||||
</div>
|
||||
|
||||
<div class="input_box input_text input_box_gris">
|
||||
<label for="encadrant_`+ encadrant +`_prenom">Prénom *</label>
|
||||
<input type="text" name="encadrant_`+ encadrant +`_prenom" id="encadrant_`+ encadrant +`_prenom" title="Prénom de l'élève encadrant" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_gris">
|
||||
<label for="encadrant_`+ encadrant +`_telephone_mobile">Téléphone mobile *</label>
|
||||
<input type="tel" name="encadrant_`+ encadrant +`_telephone_mobile" id="encadrant_`+ encadrant +`_telephone_mobile" title="Dans quelle ville habitez vous ?" required>
|
||||
</div>
|
||||
|
||||
<div class="input_box input_text input_box_gris">
|
||||
<label for="encadrant_`+ encadrant +`_mail">Mail *</label>
|
||||
<input type="email" name="encadrant_`+ encadrant +`_mail" id="encadrant_`+ encadrant +`_mail" title="Combien de personnes pouvez-vous héberger ?" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="encadrant_ajout_prof_instrument`+ encadrant +`"></div>
|
||||
`;
|
||||
|
||||
|
||||
encadr_parent_nb_place_restantes--;
|
||||
|
||||
if (encadrant < 4) {
|
||||
contenuhtml_encadrant += "<!-- ---------------------------------- -->"+
|
||||
`<!-- Voulez-vous ajouter un autre encadrant ? -->`+
|
||||
`<!-- ---------------------------------- -->`+
|
||||
`<div class="input_checkbox ">`+
|
||||
`<input type="checkbox" name="check_encadrant`+ encadrant +`" id="check_encadrant`+ encadrant +`" onchange="ajout_encadrant(`+ encadrant +`,`+ encadr_parent_nb_place_restantes +`)">`+
|
||||
`<label class="gras" for="check_encadrant`+ encadrant +`">Voulez-vous ajouter un autre encadrant ?</label>`+
|
||||
`</div>`
|
||||
};
|
||||
|
||||
contenuhtml_encadrant += `</section>`;
|
||||
|
||||
|
||||
encadrant--;
|
||||
console.log("encadrant D : ",encadrant);
|
||||
|
||||
// AFFICHER LE FORMULAIRE DE SAISIE D'UN NOUVEL encadrant
|
||||
document.querySelector('#encadrant'+ encadrant +'').insertAdjacentHTML("afterend",contenuhtml_encadrant);
|
||||
encadrant++;
|
||||
|
||||
|
||||
console.log("encadrant à la fin de la fonction : ",encadrant);
|
||||
console.log("encadr_parent_nb_place_restantes à la fin de la fonction : ",encadr_parent_nb_place_restantes);
|
||||
|
||||
return encadrant,encadr_parent_nb_place_restantes;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
console.log("encadrant en dessous de la fonction : ",encadrant);
|
||||
|
||||
function supprimer_encadrant(encadrant) {
|
||||
document.querySelector('#encadrant'+ encadrant +'').remove();
|
||||
}
|
||||
|
||||
function si_encadrant_prof(encadrant) {
|
||||
//encadrant++;
|
||||
console.log("function si_encadrant_prof, encadrant = ",encadrant)
|
||||
|
||||
if (document.getElementById("encadrant_"+ encadrant +"_type").value == "Professeur") {
|
||||
contenuhtml_encadrant = `<div id="affiche_encadrant_`+ encadrant +`_prof_instrument" class="grid_2inputs">
|
||||
<div class="input_box input_text input_box_bleu">
|
||||
<label for="encadrant_`+ encadrant +`_prof_instrument">Instrument du professeur *</label>
|
||||
<input type="text" name="encadrant_`+ encadrant +`_prof_instrument" id="encadrant_`+ encadrant +`_prof_instrument" title="L'instrument du prof encadrant" required>
|
||||
</div>
|
||||
</div>`;
|
||||
document.querySelector('#encadrant_ajout_prof_instrument'+ encadrant +'').insertAdjacentHTML("afterend",contenuhtml_encadrant);
|
||||
} else {
|
||||
if (document.querySelector('#affiche_encadrant_'+ encadrant +'_prof_instrument')) {
|
||||
document.querySelector('#affiche_encadrant_'+ encadrant +'_prof_instrument').remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function store_nb_spectateurs() {
|
||||
let key_spectateur_nb_place = document.getElementById("spectateur_nb_place").value;
|
||||
console.log("key_spectateur_nb_place = ",key_spectateur_nb_place);
|
||||
var userData = {
|
||||
key_spectateur_nb_place: key_spectateur_nb_place
|
||||
};
|
||||
localStorage.setItem('userData', JSON.stringify(userData));
|
||||
}
|
||||
Reference in New Issue
Block a user