commit

public/js/adhesion/accueil_modal.js

@@ -0,0 +1,30 @@
+//// AFFICHER DANS LA CONSOLE LE FICHIER APPELÉ
+//console.log("NOUS SOMMES DANS LE FICHIER :",__filename);
+
+// Get the modal
+var modal = document.getElementById("prelude");
+
+// Get the button that opens the modal
+var btn = document.getElementById("open_modal");
+
+// Get the <span> element that closes the modal
+var span = document.getElementsByClassName("prelude_close")[0];
+
+// When the user clicks the button, open the modal 
+btn.onclick = function() {
+    console.log("modal = ",modal)
+  modal.style.display = "block";
+}
+
+// When the user clicks on <span> (x), close the modal
+span.onclick = function() {
+  modal.style.display = "none";
+}
+
+// When the user clicks anywhere outside of the modal, close it
+window.onclick = function(event) {
+  if (event.target == modal) {
+    modal.style.display = "none";
+  }
+}
+

public/js/adhesion/adhesion_prof.js

@@ -0,0 +1,148 @@
+console.log("On est dans le fichier adhesion_prof.js (de PUBLIC)");
+
+
+function prof_diplome() {
+
+    console.log("On est dans function prof_diplome");
+    console.log("check_prof_diplome");
+    // Get the checkbox
+    var check_prof_diplome = document.getElementById("check_prof_diplome");
+    // Get the output text
+    var prof_diplome = document.getElementById("prof_diplome");
+
+    console.log("check_prof_diplome", check_prof_diplome);
+
+        for (let cssClass of prof_diplome.classList) {
+            console.log("cssClass: ",cssClass);
+        };
+
+
+    // If the checkbox is checked, display the output text
+    if (check_prof_diplome.checked == true){
+        console.log("if (check_prof_diplome.checked == true)");
+        console.log("prof_diplome", prof_diplome);
+        prof_diplome.style.display = "block";
+    } else {
+        console.log("ELSE if (check_prof_diplome.checked == true)");
+        prof_diplome.style.display = "none";
+    }
+}
+
+
+function prof_formation() {
+
+    console.log("On est dans function prof_formation");
+
+    // Get the checkbox
+    var check_prof_formation = document.getElementById("check_prof_formation");
+    // Get the output text
+    var prof_formation = document.getElementById("prof_formation");
+
+    console.log("check_prof_formation", check_prof_formation);
+
+        for (let cssClass of prof_formation.classList) {
+            console.log("cssClass: ",cssClass);
+        };
+
+
+    // If the checkbox is checked, display the output text
+    if (check_prof_formation.checked == true){
+        console.log("if (check_prof_formation.checked == true)");
+        console.log("prof_formation", prof_formation);
+
+        prof_formation.style.display = "block";
+    } else {
+        console.log("ELSE if (check_prof_diplome.checked == true)");
+
+        prof_formation.style.display = "none";
+    }
+}
+
+function prof_eleve() {
+
+    console.log("On est dans function prof_eleve");
+
+    // Get the checkbox
+    var check_prof_eleve = document.getElementById("check_prof_eleve");
+    // Get the output text
+    var eleve = document.getElementById("eleve");
+
+    console.log("check_prof_eleve", check_prof_eleve);
+
+        for (let cssClass of eleve.classList) {
+            console.log("cssClass: ",cssClass);
+        };
+
+
+    // If the checkbox is checked, display the output text
+    if (check_prof_eleve.checked == true){
+        console.log("if (check_prof_eleve.checked == true)");
+        console.log("eleve", eleve);
+
+        eleve.style.display = "block";
+    } else {
+        console.log("ELSE if (check_prof_eleve.checked == true)");
+
+        eleve.style.display = "none";
+    }
+}
+
+function ajout_eleve2() {
+    console.log("On est dans function ajout_eleve2");
+    // Get the checkbox
+    var check_eleve2 = document.getElementById("check_eleve2");
+    // Get the output text
+    var eleve2 = document.getElementById("eleve2");
+
+    // If the checkbox is checked, display the output text
+    if (check_eleve2.checked == true){
+        eleve2.style.display = "block";
+    } else {
+        eleve2.style.display = "none";
+    }
+}
+
+function ajout_eleve3() {
+    console.log("On est dans function ajout_eleve3");
+    // Get the checkbox
+    var check_eleve3 = document.getElementById("check_eleve3");
+    // Get the output text
+    var eleve3 = document.getElementById("eleve3");
+
+    // If the checkbox is checked, display the output text
+    if (check_eleve3.checked == true){
+        eleve3.style.display = "block";
+    } else {
+        eleve3.style.display = "none";
+    }
+}
+
+function ajout_eleve4() {
+
+    // Get the checkbox
+    var check_eleve4 = document.getElementById("check_eleve4");
+    // Get the output text
+    var eleve4 = document.getElementById("eleve4");
+
+    // If the checkbox is checked, display the output text
+    if (check_eleve4.checked == true){
+        eleve4.style.display = "block";
+    } else {
+        eleve4.style.display = "none";
+    }
+}
+
+function ajout_eleve5() {
+
+    // Get the checkbox
+    var check_eleve5 = document.getElementById("check_eleve5");
+    // Get the output text
+    var eleve5 = document.getElementById("eleve5");
+
+    // If the checkbox is checked, display the output text
+    if (check_eleve5.checked == true){
+        eleve5.style.display = "block";
+    } else {
+        eleve5.style.display = "none";
+    }
+}

public/js/adhesion/form_paiement.js

@@ -0,0 +1,73 @@
+// test
+// authetification banque
+
+
+    console.log("On est dans function choix_cb");
+
+    // Get the checkbox
+    var check_cb = document.getElementById("check_cb");
+    // Get the output text
+    var paiement_cb = document.getElementById("paiement_cb");
+    // Get the checkbox
+    var check_nocb = document.getElementById("check_nocb");
+    // Get the output text
+    var paiement_nocb = document.getElementById("paiement_nocb");
+    // Get the checkbox
+    var check_virement = document.getElementById("check_virement");
+    // Get the output text
+    var paiement_virement = document.getElementById("paiement_virement");
+    // Get the checkbox
+    var check_cheque = document.getElementById("check_cheque");
+    // Get the output text
+    var paiement_cheque = document.getElementById("paiement_cheque");
+
+
+    check_cb.onclick = function() {
+        console.log("check_cb.checked = ", check_cb.checked);
+        if (check_cb.checked == true){
+            console.log("check_cb.checked == true");
+            check_nocb.checked = false;
+            check_virement.checked = false;
+            check_cheque.checked = false;
+            paiement_cb.style.display = "block";
+            paiement_nocb.style.display = "none";
+            paiement_cheque.style.display = "none";
+            paiement_virement.style.display = "none";
+        } else {
+            console.log("check_cb.checked == true / ELSE");
+            paiement_cb.style.display = "none";
+        }
+    }
+
+    check_nocb.onclick = function() {
+        if (check_nocb.checked == true){
+            check_cb.checked = false;
+            paiement_nocb.style.display = "block";
+            paiement_cb.style.display = "none";
+        } else {
+            paiement_nocb.style.display = "none";
+        }
+    }
+
+    check_virement.onclick = function() {
+        if (check_virement.checked == true){
+            check_cheque.checked = false;
+            paiement_virement.style.display = "block";
+            paiement_cheque.style.display = "none";
+        } else {
+            paiement_virement.style.display = "none";
+        }
+    }
+
+    check_cheque.onclick = function() {
+        if (check_cheque.checked == true){
+            check_virement.checked = false;
+            paiement_cheque.style.display = "block";
+            paiement_virement.style.display = "none";
+        } else {
+            paiement_cheque.style.display = "none";
+        }
+    }
+
+
+

public/js/adhesion/hidden_visible.js

@@ -0,0 +1,41 @@
+// AFFICHER OU CACHER DES ÉLÉMENTS
+
+var savoirplus_button = document.getElementById("savoirplus_button");
+
+// si savoirplus_button est bien présent dans la page
+if (savoirplus_button) {
+    savoirplus_button.onclick = function() {
+        savoirplus_content = document.getElementById("savoirplus_content");
+        savoirplus_content.classList.remove('hidden');
+    }
+}
+
+// si ajout_ecole2 est bien présent dans la page
+var ajout_ecole2 = document.getElementById("ajout_ecole2");
+
+if (ajout_ecole2) {
+    ajout_ecole2.onclick = function() {
+        ajout_ecole2_content = document.getElementById("ajout_ecole2_content");
+        ajout_ecole2_content.classList.remove('hidden');
+    }
+}
+
+// si ajout_ecole3 est bien présent dans la page
+var ajout_ecole3 = document.getElementById("ajout_ecole3");
+
+if (ajout_ecole3) {
+    ajout_ecole3.onclick = function() {
+        ajout_ecole3_content = document.getElementById("ajout_ecole3_content");
+        ajout_ecole3_content.classList.remove('hidden');
+    }
+}
+
+
+// BOUTON TOGGLE FORMULAIRE D'INSCRIPTION STAGE
+var savoirplus_heberg_toggle = document.getElementById("savoirplus_heberg_toggle");
+if (savoirplus_heberg_toggle) {
+    savoirplus_heberg_toggle.onclick = function() {
+        savoirplus_heberg_content = document.getElementById("savoirplus_heberg_content");
+        savoirplus_heberg_content.classList.remove('hidden');
+    }
+}

public/js/app/logger.js

@@ -0,0 +1,58 @@
+const winston = require('winston');
+
+const { createLogger, format, transports } = require('winston');
+const { combine, timestamp, label, printf, numsession } = format;
+
+const myFormatFile = printf(({ level, message, label, timestamp, numsession }) => {
+  return `${timestamp} ${level} [${label}] SID[${numsession}] ${message}`;
+});
+
+const myFormatConsole = printf(({ level, message, label, timestamp, numsession }) => {
+  return `${timestamp} ${level} [${label}] SID[${numsession}] ${message}`;
+});
+
+
+const DailyRotateFile = require('winston-daily-rotate-file');
+
+
+const logger = winston.createLogger({
+  //level: 'info',
+  format: combine(
+    //label({ label: '' }),
+    timestamp({format: 'YYYY-MM-DD HH:mm:ss'}),
+    myFormatFile
+  ),
+  defaultMeta: { service: 'user-service' },
+  transports: [
+    new DailyRotateFile({ filename: 'logs/combined.log' }),
+  ],
+  exceptionHandlers: [
+    new DailyRotateFile({ filename: 'logs/combined.log' }),
+    new winston.transports.Console()
+  ],
+  rejectionHandlers: [
+    new DailyRotateFile({ filename: 'logs/combined.log' }),
+    new winston.transports.Console()
+  ]
+});
+
+
+
+
+if (process.env.ENV !== 'production' ) {
+  logger.add(new winston.transports.Console(
+    {
+      format: combine(
+        //label({ label: '' }),
+        timestamp({format: 'YYYY-MM-DD HH:mm:ss'}),
+        myFormatConsole
+      ),
+    handleExceptions: true //pour afficher également les exceptions dans la console
+    })
+  );
+}
+
+/////////////////////////////////////////////////
+// EXPORT DE MODULE POUR QU'IL SOIT LU DANS LES AUTRES FICHIERS JS
+/////////////////////////////////////////////////
+module.exports = logger;

public/js/rassemblementidf/rassemblementidf_formulaire_personne.js

@@ -0,0 +1,142 @@
+// STAGE NATIONAL
+// REMPLIR LE FORMULAIRE
+// PARAGRAPHE PERSONNE
+// POUR 6 Personnes
+
+var personne = "0";
+console.log("personne : ",personne);
+window.onload = affichepersonne(personne);
+function ajout_personne(personne) {
+    
+    console.log("personne : ",personne);
+    affichepersonne(personne);
+}
+
+function affichepersonne(personne) {
+    console.log("affichepersonne personne : ",personne);
+    personne++;
+    console.log("affiche personne personne incrémenté : ",personne);
+
+
+    if (personne > 6 ) {
+        console.log("6 personnes maximum");
+        return;
+    }
+
+
+
+    // Ce if sert pour ne pas répéter plusieurs fois le même numéro de personne si l'internaute clique plusieurs fois sur le même "ajouter une personne"
+    if (!document.querySelector('#personne'+ personne +'')) {
+
+        let contenuhtml_personne = `<section id="personne`+ personne +`" class="personne">
+
+            <h2><img class='icone_titre' src="/public/images/icones/icone_personne.png" alt="icone information à cliquer">PERSONNE <span class="rouge numero">`+ personne +`</span>`;
+        
+            if (personne > 1) {
+                contenuhtml_personne += ` <span class="remove_personne"><input class="input_suppr" type="checkbox" name="check_personne_delete`+ personne +`" id="check_personne_delete`+ personne +`" onchange="supprimer_personne(`+ personne +`)"><label class="label_suppr" for="check_personne_delete`+ personne +`">Supprimer cette personne</label></span>`;
+            };
+
+            contenuhtml_personne += `</h2>
+
+            <div class="grid_2inputs">
+                <div class="input_box input_text input_box_gris">
+                <label for="personne_`+ personne +`_nom">Nom de famille *</label>
+                <input type="text" name="personne_`+ personne +`_nom" id="personne_`+ personne +`_nom" required>
+                </div>
+
+                <div class="input_box input_text input_box_gris">
+                <label for="personne_`+ personne +`_prenom">Prénom *</label>
+                <input type="text" name="personne_`+ personne +`_prenom" id="personne_`+ personne +`_prenom" required>
+                </div>
+            </div>
+
+            <div class="grid_2inputs">
+                <div class="input_box input_text input_box_gris">
+                    <label for="personne_`+ personne +`_datenaissance">Date de naissance * (jj/mm/aaaa)</label>
+                    <input type="text" name="personne_`+ personne +`_datenaissance" id="personne_`+ personne +`_datenaissance" placeholder="01/01/1999" pattern="[0-2][0-9]/[0-1][0-9]/[1-2][0-9][0-9][0-9]" minlength="10" maxlength="10" title="le format de date doit être jj/mm/aaaa" required>
+                </div>
+            </div>
+
+
+            <div class="grid_2inputs">
+                <div class="input_box input_text input_box_bleu">
+                    <label for="personne_`+ personne +`_prof">Nom professeur *</label>
+                    <input type="text" name="personne_`+ personne +`_prof" id="personne_`+ personne +`_prof" required>
+                </div>
+            </div>
+
+            <div class="grid_2inputs">
+                <div class="input_box input_text input_box_bleu">
+                    <label for="personne_`+ personne +`_instrument">Instrument *</label>
+                    <select id="personne_`+ personne +`_instrument" name="personne_`+ personne +`_instrument" required onchange="select_cahier(this,`+ personne +`)">
+                        <option value="" selected></option>
+                        <option value="alto">Alto</option>
+                        <option value="harpe">Harpe</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_`+ personne +`_cahier">Niveau Cahier *</label>
+                    <select id="personne_`+ personne +`_cahier" name="personne_`+ personne +`_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_`+ personne +`_piece">Pièces récentes*</label>
+                    <input type="text" name="personne_`+ personne +`_piece" id="personne_`+ personne +`_piece" required>
+                </div>
+            </div>
+            
+            `;
+
+        
+
+        if (personne < 6) {
+            contenuhtml_personne += "<!-- ---------------------------------- -->"+
+            `<!-- Voulez-vous ajouter une autre personne ? -->`+
+            `<!-- ---------------------------------- -->`+
+            `<div class="input_checkbox">`+
+            `<input type="checkbox" name="check_personne`+ personne +`" id="check_personne`+ personne +`" onchange="ajout_personne(`+ personne +`)">`+
+            `<label for="check_personne`+ personne +`">Voulez-vous ajouter une autre personne au stage ?</label>`+
+            `</div>`
+        };
+
+        contenuhtml_personne += `</section>`;
+        
+        
+        personne--;
+        document.querySelector('#personne'+ personne +'').insertAdjacentHTML("afterend",contenuhtml_personne);
+        
+        console.log("personne à la fin de la fonction : ",personne);
+        personne++;
+
+        return personne;
+    }
+
+}
+
+
+function supprimer_personne(personne) {
+    document.querySelector('#personne'+ personne +'').remove();
+}
+
+
+
+
+
+

public/js/stagenat/stagenational_formulaire_personne.js

@@ -0,0 +1,529 @@
+// STAGE NATIONAL
+// REMPLIR LE FORMULAIRE
+// PARAGRAPHE PERSONNE
+// POUR 6 Personnes
+
+var personne = "0";
+console.log("personne : ",personne);
+window.onload = affichepersonne(personne);
+function ajout_personne(personne) {
+    
+    console.log("personne : ",personne);
+    affichepersonne(personne);
+}
+
+function affichepersonne(personne) {
+    console.log("affichepersonne personne : ",personne);
+    personne++;
+    console.log("affiche personne personne incrémenté : ",personne);
+
+
+    if (personne > 6 ) {
+        console.log("6 personnes maximum");
+        return;
+    }
+
+
+
+    // Ce if sert pour ne pas répéter plusieurs fois le même numéro de personne si l'internaute clique plusieurs fois sur le même "ajouter une personne"
+    if (!document.querySelector('#personne'+ personne +'')) {
+
+        let contenuhtml_personne = `<section id="personne`+ personne +`" class="personne">
+
+            <h2><img class='icone_titre' src="/public/images/icones/icone_personne.png" alt="icone information à cliquer">PERSONNE <span class="rouge numero">`+ personne +`</span>`;
+        
+            if (personne > 1) {
+                contenuhtml_personne += ` <span class="remove_personne"><input class="input_suppr" type="checkbox" name="check_personne_delete`+ personne +`" id="check_personne_delete`+ personne +`" onchange="supprimer_personne(`+ personne +`)"><label class="label_suppr" for="check_personne_delete`+ personne +`">Supprimer cette personne</label></span>`;
+            };
+
+            contenuhtml_personne += `</h2>
+
+            <div class="grid_2inputs">
+                <div class="input_box input_text input_box_gris">
+                <label for="personne_`+ personne +`_nom">Nom de famille *</label>
+                <input type="text" name="personne_`+ personne +`_nom" id="personne_`+ personne +`_nom" required>
+                </div>
+
+                <div class="input_box input_text input_box_gris">
+                <label for="personne_`+ personne +`_prenom">Prénom *</label>
+                <input type="text" name="personne_`+ personne +`_prenom" id="personne_`+ personne +`_prenom" required>
+                </div>
+            </div>
+
+            <div class="grid_2inputs">
+                <div class="input_box input_text input_box_gris">
+                    <label for="personne_`+ personne +`_datenaissance">Date de naissance * (jj/mm/aaaa)</label>
+                    <input type="text" name="personne_`+ personne +`_datenaissance" id="personne_`+ personne +`_datenaissance" placeholder="01/01/1999" pattern="[0-2][0-9]/[0-1][0-9]/[1-2][0-9][0-9][0-9]" minlength="10" maxlength="10" title="le format de date doit être jj/mm/aaaa" required>
+                </div>
+            </div>
+
+            <div class="grid_2inputs">
+                <div id="personne_`+ personne +`_transport_arret_call" class="input_box input_text input_box_bleu">
+                    <label for="personne_`+ personne +`_transport_mode">Moyen de transport * <span onclick="document.querySelector('#savoirplus_car_content`+ personne +`').classList.toggle('ouvrir')"><img class='savoirplus_icone' src="/public/images/icones/icone_infos.png" alt="icone information à cliquer"></span></label>
+                    <select id="personne_`+ personne +`_transport_mode" name="personne_`+ personne +`_transport_mode" required onchange="select_personne_transport_mode(this,`+ personne +`)">
+                        <option value="" selected></option>
+                        <option value="car">car</option>
+                        <option value="independant">independant</option>
+                    </select>
+                </div>
+            </div>
+
+            <section class="savoirplus_stage">
+                <div id="savoirplus_car_content`+ personne +`" class="savoirplus_content displaynone">
+                    <span onclick="document.querySelector('#savoirplus_car_content`+ personne +`').classList.toggle('ouvrir')"><img class='close_icone' src="/public/images/icones/icone_close.png" alt="icone information à cliquer"></span>
+                    <p>Informations sur le car.</p>
+                    <br>
+                    <p>Aller/Retour Lyon ⇔ Carroz d’Arâches</p>
+                    <br>
+                    <p>DÉPART 20 août, 11h pour l'arrêt du 7 quai Lassagne, Lyon 1er</p>
+                    <p>ou 11h30 pour l'arrêt Gare de la Part Dieu, sortie Porte des Alpes</p>
+                    <br>
+                    <p class="rouge">PRÉVOIR UN PIQUE-NIQUE POUR LE 20 AOÛT</p>
+                    <br>
+
+                    <p>RETOUR 25 août, 14h - Arrivée à Gare de la Part Dieu vers 17h</p>
+                    <p>Il est possible de prévoir un train en partance de Lyon à partir de 18h.</p>
+                </div>
+            </section>
+
+            <div id="personne_`+ personne +`_instrument_activite_call" class="grid_2inputs">
+                <div id="personne_`+ personne +`_profil_call" class="input_box input_text input_box_bleu">
+                    <label for="personne_`+ personne +`_categorie">Que va faire la personne ? * <span onclick="document.querySelector('#savoirplus_profil_content`+ personne +`').classList.toggle('ouvrir')"><img class='savoirplus_icone' src="/public/images/icones/icone_infos.png" alt="icone information à cliquer"></span></label>
+                    <select id="personne_`+ personne +`_categorie" name="personne_`+ personne +`_categorie" autocomplete="off" required onchange="select_personne_profil(this,`+ personne +`)">
+                        <option value="" selected></option>
+                        <option value="instrumentiste">Élève instrumentiste</option>
+                        <option value="observateur">Observateur (adulte ou professeur)</option>
+                        <option value="accompagnant">Accompagnant SANS activité (adulte ou enfant)</option>
+                        <option value="accompagnant_activite">Accompagnant AVEC activité (adulte ou enfant)</option>
+                    </select>
+                </div>
+            </div>
+
+            <section class="savoirplus_stage">
+            <div id="savoirplus_profil_content`+ personne +`" class="savoirplus_content displaynone">
+                <div>
+                    <div onclick="document.querySelector('#savoirplus_profil_content`+ personne +`').classList.toggle('ouvrir')"><img class='close_icone' src="/public/images/icones/icone_close.png" alt="icone information à cliquer"></div>
+                    <div>
+                        <p>Informations sur le PROFIL</p>
+                        <br>
+                        <p>INSTRUMENTISTE : tous les enfants qui suivent le programme du stage en violon, alto, violoncelle ou piano.</p>
+                        <br>
+                        <p>OBSERVATEUR : Toute personne extérieure à la pédagogie Suzuki peut observer les leçons et assister aux
+                        concerts des élèves. Ce stage constitue une source d’informations importantes pour toute personne
+                        qui désire mieux connaître la pédagogie Suzuki.
+                        <br>
+                        L’observation des cours est gratuite pour tous les professeurs Suzuki, et stagiaires en formation Suzuki adhérents à l’AFPS.</p>
+                        <br>
+                        <p>ACCOMPAGNANT SANS ACTIVITÉ : personne qui accompagne les enfants et qui logent au Flocons Verts</p>
+                        <br>
+                        <p>ACCOMPAGNANT AVEC ACTIVITÉ : personne qui accompagne les enfants qui logent au Flocons Verts ou non et qui font une activité.
+                        <br>
+                        L'activité sera payée sur place, le coût n'est pas compté dans le total du stage.</p>
+                    </div>
+                </div>
+            </div>
+        </section>  
+            
+            `;
+
+        
+
+        if (personne < 6) {
+            contenuhtml_personne += "<!-- ---------------------------------- -->"+
+            `<!-- Voulez-vous ajouter une autre personne ? -->`+
+            `<!-- ---------------------------------- -->`+
+            `<div class="input_checkbox">`+
+            `<input type="checkbox" name="check_personne`+ personne +`" id="check_personne`+ personne +`" onchange="ajout_personne(`+ personne +`)">`+
+            `<label for="check_personne`+ personne +`">Voulez-vous ajouter une autre personne au stage ?</label>`+
+            `</div>`
+        };
+
+        contenuhtml_personne += `</section>`;
+        
+        
+        personne--;
+        document.querySelector('#personne'+ personne +'').insertAdjacentHTML("afterend",contenuhtml_personne);
+        
+        console.log("personne à la fin de la fonction : ",personne);
+        personne++;
+
+        return personne;
+    }
+
+}
+
+
+function select_personne_transport_mode(select, personne) {
+    console.log("personne dans select_personne_transport_mode : ",personne);
+    console.log("select.value : ",select.value);
+    if (select.value == "car"){
+        console.log("on est dans Car");
+        let transport_arret_call = '#personne_'+ personne +'_transport_arret_call';
+        document.querySelector(transport_arret_call).insertAdjacentHTML("afterend",
+            `<div id="personne_`+ personne +`_transport_arret_display" class="input_box input_text input_box_gris">
+                <label for="personne_`+ personne +`_transport_arret">Quel arrêt de car ? *</label>
+                <select id="personne_`+ personne +`_transport_arret" name="personne_`+ personne +`_transport_arret" required>
+                    <option value="" selected></option>
+                    <option value="arret_7_quai_lassagne_lyon">7 quai Lassagne Lyon</option>
+                    <option value="arret_partdieu_lyon">Gare Part Dieu Lyon</option>
+                </select>
+            </div>`
+        );
+    };
+    if (select.value == "independant"){
+        console.log("on est dans independant");
+        if (document.querySelector("#personne_"+ personne +"_transport_arret_display")){
+            console.log("on est dans independant arret exist");
+            document.querySelector("#personne_"+ personne +"_transport_arret_display").remove();
+        }
+    };
+
+};
+
+
+
+function select_personne_profil(select, personne) { 
+    console.log("select.value : ",select.value); 
+    if (select.value == "observateur"){
+        console.log("on est dans observateur");
+
+        if (document.querySelector("#personne_"+ personne +"_instrument_display")){
+            console.log("on est dans instrumentiste instrument exist");
+            document.querySelector("#personne_"+ personne +"_instrument_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_activite_display")){
+            console.log("on est dans instrumentiste activite exist");
+            document.querySelector("#personne_"+ personne +"_activite_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_piece_display")){
+            document.querySelector("#personne_"+ personne +"_piece_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_prof_display")){
+            document.querySelector("#personne_"+ personne +"_prof_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call")){
+            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display")){
+            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_coursindividuel_display")){
+            document.querySelector("#personne_"+ personne +"_coursindividuel_display").remove();
+        }
+        
+        document.querySelector('#personne_'+ personne +'_instrument_activite_call').insertAdjacentHTML("afterend",
+            `<div id="personne_`+ personne +`_profil_display">
+                <div class="grid_2inputs">
+                    <div class="input_box input_text input_box_gris">
+                        <label for="personne_`+ personne +`_profil">Profil ? *</label>
+                        <select id="personne_`+ personne +`_profil" name="personne_`+ personne +`_profil" required>
+                            <option value="" selected></option>
+                            <option value="professeur">Vous êtes professeur Suzuki</option>
+                            <option value="non_professeur">Autre</option>
+                        </select>
+                    </div>
+                </div>
+            </div>`
+        );
+    };
+
+
+    if (select.value == "instrumentiste"){
+        console.log("on est dans instrumentiste");
+
+        if (document.querySelector("#personne_"+ personne +"_profil_display")){
+            console.log("on est dans observateur profil exist");
+            document.querySelector("#personne_"+ personne +"_profil_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_activite_display")){
+            console.log("on est dans instrumentiste activite exist");
+            document.querySelector("#personne_"+ personne +"_activite_display").remove();
+        }
+
+        document.querySelector('#personne_'+ personne +'_instrument_activite_call').insertAdjacentHTML("afterend",
+            `<div id="personne_`+ personne +`_instrument_display">
+                <div class="grid_2inputs">
+                    <div id="personne_`+ personne +`_cahier_display" class="input_box input_text input_box_gris">
+                        <label for="personne_`+ personne +`_instrument">Instrument *</label>
+                        <select id="personne_`+ personne +`_instrument" name="personne_`+ personne +`_instrument" required onchange="select_cahier(this,`+ personne +`)">
+                            <option value="" selected></option>
+                            <option value="alto">Alto</option>
+                            <option value="piano">Piano</option>
+                            <option value="violon">Violon</option>
+                            <option value="violoncelle">Violoncelle</option>
+                        </select>
+                    </div>`
+        );
+
+
+                    
+        document.querySelector('#personne_'+ personne +'_instrument_display').insertAdjacentHTML("afterend",
+                `<div id="personne_`+ personne +`_piece_display" class="grid_2inputs">
+                    <div class="input_box input_text input_box_gris">
+                            <label for="personne_`+ personne +`_piece">Nom de la dernière pièce jouée *</label>
+                            <input type="text" name="personne_`+ personne +`_piece" id="personne_`+ personne +`_piece" required>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="personne_`+ personne +`_prof_display" class="grid_2inputs">
+                    <div class="input_box input_text input_box_gris">
+                        <label for="personne_`+ personne +`_prof">Nom professeur *</label>
+                        <input type="text" name="personne_`+ personne +`_prof" id="personne_`+ personne +`_prof" required>
+                    </div>
+                    <div class="input_box input_text input_box_gris">
+                        <label for="personne_`+ personne +`_mail_prof">Mail professeur *</label>
+                        <input type="text" name="personne_`+ personne +`_mail_prof" id="personne_`+ personne +`_mail_prof" required>
+                    </div>
+                </div>
+
+
+
+                <div id="personne_`+ personne +`_option_concertsolo_piece_call" class="grid_2inputs">
+                    <div class="input_box input_text input_box_bleu">
+                        <label for="personne_`+ personne +`_option_concertsolo">Option concert solo *</label>
+                        <select id="personne_`+ personne +`_option_concertsolo" name="personne_`+ personne +`_option_concertsolo" required onchange="select_personne_option_concertsolo(this,`+ personne +`)">
+                            <option value="" selected></option>
+                            <option value="concert solo">oui</option>
+                            <option value="non">non</option>
+                        </select>
+                    </div>
+                    
+                </div>
+            </div>`
+        );
+    };
+
+    if (select.value == "accompagnant_activite"){
+        console.log("on est dans accompagnant_activite");
+
+        if (document.querySelector("#personne_"+ personne +"_instrument_display")){
+            console.log("on est dans accompagnant_activite instrument exist");
+            document.querySelector("#personne_"+ personne +"_instrument_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_piece_display")){
+            document.querySelector("#personne_"+ personne +"_piece_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_prof_display")){
+            console.log("on est dans accompagnant_activite prof exist");
+            document.querySelector("#personne_"+ personne +"_prof_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display")){
+            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_coursindividuel_display")){
+            document.querySelector("#personne_"+ personne +"_coursindividuel_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call")){
+            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_activite_display")){
+            console.log("on est dans accompagnant_activite activite exist");
+            document.querySelector("#personne_"+ personne +"_activite_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_profil_display")){
+            console.log("on est dans accompagnant_activite profil exist");
+            document.querySelector("#personne_"+ personne +"_profil_display").remove();
+        }
+
+        document.querySelector('#personne_'+ personne +'_instrument_activite_call').insertAdjacentHTML("afterend",
+            `<div id="personne_`+ personne +`_activite_display">
+                <div class="grid_2inputs">
+                    <div class="input_box input_text input_box_bleu">
+                        <label for="personne_`+ personne +`_activite_1">Option activite 1 *</label>
+                        <select id="personne_`+ personne +`_activite_1" name="personne_`+ personne +`_activite_1" required>
+                            <option value="" selected></option>
+                            <option value="dalcroze">Rythmique Dalcroze (de 4 à 11 ans + adultes)</option>
+                            <option value="chant">Chant choral (de 4 à 11 ans + adultes)</option>
+                            <option value="percussions">percussions corporelles (à partir de 12 ans + adultes)</option>
+                        </select>
+                    </div>
+                    <div class="input_box input_text input_box_bleu">
+                        <label for="personne_`+ personne +`_activite_2">Option activite 2</label>
+                        <select id="personne_`+ personne +`_activite_2" name="personne_`+ personne +`_activite_2">
+                            <option value="" selected></option>
+                            <option value="dalcroze">Rythmique Dalcroze (de 4 à 11 ans + adultes)</option>
+                            <option value="chant">Chant choral (de 4 à 11 ans + adultes)</option>
+                            <option value="percussions">percussions corporelles (à partir de 12 ans + adultes)</option>
+                        </select>
+                    </div>
+                </div>
+            </div>`
+        );
+    };
+
+    if (select.value == "accompagnant"){
+        console.log("accompagnant");
+        if (document.querySelector("#personne_"+ personne +"_instrument_display")){
+            console.log("on est dans instrumentiste instrument exist");
+            document.querySelector("#personne_"+ personne +"_instrument_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_activite_display")){
+            console.log("on est dans instrumentiste activite exist");
+            document.querySelector("#personne_"+ personne +"_activite_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_profil_display")){
+            console.log("on est dans observateur profil exist");
+            document.querySelector("#personne_"+ personne +"_profil_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_piece_display")){
+            document.querySelector("#personne_"+ personne +"_piece_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_prof_display")){
+            document.querySelector("#personne_"+ personne +"_prof_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call")){
+            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display")){
+            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_coursindividuel_display")){
+            document.querySelector("#personne_"+ personne +"_coursindividuel_display").remove();
+        }
+    };
+
+    if (!select.value){
+        console.log("rien sélectionné");
+        if (document.querySelector("#personne_"+ personne +"_instrument_display")){
+            console.log("on est dans instrumentiste instrument exist");
+            document.querySelector("#personne_"+ personne +"_instrument_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_activite_display")){
+            console.log("on est dans instrumentiste activite exist");
+            document.querySelector("#personne_"+ personne +"_activite_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_profil_display")){
+            console.log("on est dans observateur profil exist");
+            document.querySelector("#personne_"+ personne +"_profil_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_piece_display")){
+            document.querySelector("#personne_"+ personne +"_piece_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_prof_display")){
+            document.querySelector("#personne_"+ personne +"_prof_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call")){
+            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_call").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display")){
+            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_coursindividuel_display")){
+            document.querySelector("#personne_"+ personne +"_coursindividuel_display").remove();
+        }
+    };
+
+};
+
+function select_cahier(select, personne) {
+    if (select.value == "alto") {
+        console.log("on est dans cahier pour alto");
+        if (document.querySelector("#select_personne_"+ personne +"cahier_display")){
+            document.querySelector("#select_personne_"+ personne +"cahier_display").remove();
+        }
+        document.querySelector('#personne_'+ personne +'_cahier_display').insertAdjacentHTML("afterend",
+            `<div id="select_personne_`+ personne +`cahier_display" class="input_box input_text input_box_gris">
+                <label for="personne_`+ personne +`_cahier">Niveau Cahier *</label>
+                <select id="personne_`+ personne +`_cahier" name="personne_`+ personne +`_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>
+                </select>
+            </div>`
+        );
+    } else {
+        console.log("on est dans cahier autre que alto");
+        if (document.querySelector("#select_personne_"+ personne +"cahier_display")){
+            document.querySelector("#select_personne_"+ personne +"cahier_display").remove();
+        }
+        if (document.querySelector("#personne_"+ personne +"_coursindividuel_display")){
+            document.querySelector("#personne_"+ personne +"_coursindividuel_display").remove();
+        }
+        document.querySelector('#personne_'+ personne +'_cahier_display').insertAdjacentHTML("afterend",
+            `<div id="select_personne_`+ personne +`cahier_display" class="input_box input_text input_box_gris">
+                <label for="personne_`+ personne +`_cahier">Niveau Cahier *</label>
+                <select id="personne_`+ personne +`_cahier" name="personne_`+ personne +`_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>`
+        );
+    }
+
+    // OPTION COURS INDIVIDUEL POUR ALTO, VIOLON, VILONCELLE
+    if (select.value == "alto" || select.value == "violon" ||select.value == "violoncelle" ) {
+        console.log("on est dans cours indivi pour alto V V");
+        if (document.querySelector("#personne_"+ personne +"_coursindividuel_display")){
+            document.querySelector("#personne_"+ personne +"_coursindividuel_display").remove();
+        }
+        document.querySelector('#personne_'+ personne +'_option_concertsolo_piece_call').insertAdjacentHTML("beforebegin",
+            `<div id="personne_`+ personne +`_coursindividuel_display" class="grid_2inputs">
+                <div class="input_box input_text input_box_bleu">
+                    <label for="personne_`+ personne +`_option_coursindividuel">Option cours individuel *</label>
+                    <select id="personne_`+ personne +`_option_coursindividuel" name="personne_`+ personne +`_option_coursindividuel" required>
+                        <option value="" selected></option>
+                        <option value="cours individuel">oui</option>
+                        <option value="non">non</option>
+                    </select>
+                </div>
+            </div>`
+        );
+    }
+};
+
+
+
+function select_personne_option_concertsolo (select, personne) {
+    if (select.value == "concert solo"){
+        console.log("on est dans concert solo");
+        document.querySelector('#personne_'+ personne +'_option_concertsolo_piece_call').insertAdjacentHTML("afterend",
+            `<div id="personne_`+ personne +`_option_concertsolo_piece_display" class="grid_2inputs">
+                <div class="input_box input_text input_box_gris">
+                    <label for="personne_`+ personne +`_option_concertsolo_piece">Pièce choisie *</label>
+                    <input type="text" name="personne_`+ personne +`_option_concertsolo_piece" id="personne_`+ personne +`_option_concertsolo_piece" required>
+                </div>
+                <div class="input_box input_text input_box_gris">
+                    <label for="personne_`+ personne +`_option_concertsolo_cahier">Cahier *</label>
+                    <select id="personne_`+ personne +`_option_concertsolo_cahier" name="personne_`+ personne +`_option_concertsolo_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>
+                    <option value="Hors cahier">Hors cahier</option>
+                    </select>
+                    </div>    
+            </div>`
+        );
+    };
+    if (select.value == "non"){
+        console.log("on n'est pas dans concert solo");
+        if (document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display")){
+            console.log("on est dans concert solo piece exist");
+            document.querySelector("#personne_"+ personne +"_option_concertsolo_piece_display").remove();
+        }
+    };
+};
+
+
+function supprimer_personne(personne) {
+    document.querySelector('#personne'+ personne +'').remove();
+}