Réécriture du JS & Modifications de la gestion des informations de l'utilisateur et d'autres trucs

4 files changed, 170 insertions, 54 deletions

diff --git a/Statics/Js/index.js b/Statics/Js/index.js
new file mode 100644
index 0000000..1c89567
--- /dev/null
+++ b/Statics/Js/index.js
@@ -0,0 +1,33 @@
+
+// ****************************************************************************
+// INDEX
+// ****************************************************************************
+
+// Slideshow
+function start_slideshow() {
+    let imageNumber = 1;
+    let images = [
+        "/Medias/Images/slide0.jpg",
+        "/Medias/Images/slide1.jpg",
+        "/Medias/Images/slide2.jpg"
+    ];
+
+    setInterval(() => {
+        // Changement del'image de fond de de la div
+        document.getElementById("slideshow").style.backgroundImage = `url("${images[imageNumber]}")`;
+        // Untoggle les précedents
+        // Utilisation de ternary, utilisation: condition ? Sivrai : Sifaux
+        document.getElementById(`textSlide${imageNumber !== 0 ? imageNumber - 1 : images.length - 1}`).classList.toggle("show");
+        document.getElementById(`indicatorSlide${imageNumber !== 0 ? imageNumber - 1 : images.length - 1}`).classList.toggle("slideSelected");
+        // Toggle le nouveau texte & selecteur
+        document.getElementById(`textSlide${imageNumber}`).classList.toggle("show");
+        document.getElementById(`indicatorSlide${imageNumber}`).classList.toggle("slideSelected")
+        // +1 sauf si fin
+        if(imageNumber < images.length - 1) {
+            imageNumber++; 
+        } else {
+            imageNumber = 0;
+        }
+    }
+    ,5000); 
+}
diff --git a/Statics/Js/main.js b/Statics/Js/main.js
index 120bfb3..b4d0894 100644
--- a/Statics/Js/main.js
+++ b/Statics/Js/main.js
@@ -1,61 +1,12 @@
-// 
+// ****************************************************************************
+// Main
+// ****************************************************************************
+ 
 // Site web utilisés pour JS:
 // https://www.w3schools.com/js/default.asp
-// https://stackoverflow.com/
-// 
+// https://stackoverflow.com/ 
 
 // Changement de langue
 document.getElementById("langSel").addEventListener("change", () => {
     document.getElementById("langForm").submit();
 });
-
-// Redirection
-function redirect(page) {
-    window.location.href = `${page}.php`;
-}
-
-// Timer pour message
-function start_timer() {
-    // var -> global, let -> local{}
-    let seconds = 3;
-    let text = document.getElementById("redirect").innerHTML;
-    setInterval(() => {
-        if (seconds > 0) {
-            document.getElementById("redirect").innerHTML = `${text} ${seconds}.`;
-            seconds --;
-        } else {
-            document.getElementById("redirect").innerHTML = `${text} ${seconds}.`;
-            redirect("/index");
-        }
-    },
-    1000);
-}
-
-// Slideshow
-function start_slideshow() {
-    let imageNumber = 1;
-    let images = [
-        "/Medias/Images/slide0.jpg",
-        "/Medias/Images/slide1.jpg",
-        "/Medias/Images/slide2.jpg"
-    ];
-
-    setInterval(() => {
-        // Changement del'image de fond de de la div
-        document.getElementById("slideshow").style.backgroundImage = `url("${images[imageNumber]}")`;
-        // Untoggle les précedents
-        // Utilisation de ternary, utilisation: condition ? Sivrai : Sifaux
-        document.getElementById(`textSlide${imageNumber !== 0 ? imageNumber - 1 : images.length - 1}`).classList.toggle("show");
-        document.getElementById(`indicatorSlide${imageNumber !== 0 ? imageNumber - 1 : images.length - 1}`).classList.toggle("slideSelected");
-        // Toggle le nouveau texte & selecteur
-        document.getElementById(`textSlide${imageNumber}`).classList.toggle("show");
-        document.getElementById(`indicatorSlide${imageNumber}`).classList.toggle("slideSelected")
-        // +1 sauf si fin
-        if(imageNumber < images.length - 1) {
-            imageNumber++; 
-        } else {
-            imageNumber = 0;
-        }
-    }
-    ,5000); 
-}
diff --git a/Statics/Js/message.js b/Statics/Js/message.js
new file mode 100644
index 0000000..55eff48
--- /dev/null
+++ b/Statics/Js/message.js
@@ -0,0 +1,26 @@
+
+// ****************************************************************************
+// MESSAGES
+// ****************************************************************************
+
+// Redirection
+function redirect(page) {
+    window.location.href = `/${page}.php`;
+}
+
+// Timer pour message
+function start_timer(page) {
+    // var -> global, let -> local{}
+    let seconds = 1;
+    let text = document.getElementById("redirect").innerHTML;
+    setInterval(() => {
+        if (seconds > 0) {
+            document.getElementById("redirect").innerHTML = `${text} ${seconds}.`;
+            seconds --;
+        } else {
+            document.getElementById("redirect").innerHTML = `${text} ${seconds}.`;
+            redirect(page);
+        }
+    },
+    1000);
+}
diff --git a/Statics/Js/userinfo.js b/Statics/Js/userinfo.js
new file mode 100644
index 0000000..6b4c1d9
--- /dev/null
+++ b/Statics/Js/userinfo.js
@@ -0,0 +1,106 @@
+
+// ****************************************************************************
+// USERINFO
+// ****************************************************************************
+// Mes sources pour créer cette partie:
+// https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript
+// https://stackoverflow.com/questions/47951287/dynamically-add-li-to-ul-javascript
+// https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode
+// https://www.encodedna.com/javascript/how-to-get-all-li-elements-in-ul-using-javascript.htm
+// https://www.geeksforgeeks.org/javascript-convert-an-array-to-json/
+// https://stackoverflow.com/questions/17785592/difference-between-json-stringify-and-json-parse
+// https://www.w3docs.com/snippets/javascript/how-to-remove-an-element-from-an-array-in-javascript.html
+// On passe par du JSON pour passer la liste des emplois du pro
+
+// ****************************************************************************
+// GLOBAL
+// ****************************************************************************
+var payload  = [];
+var dictJobs = {};
+
+// ****************************************************************************
+// FONCTIONS ANNEXES
+// ****************************************************************************
+// Récupération des possibles emplois et stockage dans une variable
+function init_dict_jobs() {
+    // Récupération des emplois disponibles
+    let selJob = document.getElementById("jobsSel");
+
+    // Pour chaque emploi disponible
+    for (i = 0; i < selJob.length; i ++) {
+        if (selJob[i].value !== "") {
+            // Création d'un dictionnaire -> "Nom Emploi": "ID"
+            dictJobs[selJob[i].text] = selJob[i].value;
+        }
+    }
+}
+
+// Création et ajout d'un bouton "supprimmer"
+function add_bouton_rm(li, jobsId) {
+    // Création et configuration du bouton
+    let buttonDel       = document.createElement("button");
+    buttonDel.type      = "button";
+    buttonDel.innerHTML = "<i class=\"fas fa-ban\"></i>";
+    buttonDel.onclick   = () => {remove(li, jobsId);};
+
+    // Ajout du boutton au "li" passé en argument
+    li.appendChild(buttonDel);
+}
+
+// ****************************************************************************
+// FONCTIONS PRINCIPALES
+// ****************************************************************************
+// Initiation
+function init() {
+    // Peuplement du dictionnaire des emploies "Nom Emploi": "ID"
+    init_dict_jobs();
+    
+    // Récupération des emplois déja présent
+    let jobs = document.getElementById("jobsList").getElementsByTagName("li");
+
+    // Pour chaque emploi déja enregistré
+    for (i = 0; i < jobs.length; i ++) {
+        // Ajout de chaques choix à la liste final "payload"
+        payload.push(dictJobs[jobs[i].innerHTML]);
+        // Ajout d'un id et d'un bouton remove à chaque "li".
+        jobs[i].id = "jobId_" + dictJobs[jobs[i].innerHTML];
+        add_bouton_rm(jobs[i], dictJobs[jobs[i].innerHTML]);
+    }
+
+    // Transformation de la liste des emplois choisis en JSON
+    // et inscription de ce dernier dans la "value" de l'input "jobs".
+    document.getElementById("jobs").value = JSON.stringify(payload);
+}
+
+// Ajout d'un emploi
+function add() {
+    // Récupération du nom du choix dans le "select" des emplois
+    let jobName = document.getElementById("jobsSel").options[jobsSel.selectedIndex].text;
+
+    // Si l'emploi n'est pas deja dans "payload" 
+    // et si il fait bien partie du dictionnaire de tous les emplois
+    if (jobName in dictJobs && !payload.includes(dictJobs[jobName])) {
+        // Ajout à payload
+        payload.push(dictJobs[jobName]);
+        // Création, configuration et ajout du nouveau "li"
+        let li = document.createElement("li");
+        li.id  = "jobId_" + dictJobs[jobName];
+        li.appendChild(document.createTextNode(jobName));
+        add_bouton_rm(li, dictJobs[jobName]);
+        document.getElementById("jobsList").appendChild(li);
+        // Transformation de la liste des emplois choisis en JSON
+        // et inscription de ce dernier dans la "value" de l'input "jobs".
+        document.getElementById("jobs").value = JSON.stringify(payload);
+    }
+}
+
+// Suppression d'un emploi
+function remove(li, jobsId) {
+    // Suppression de l'emploi dans "payload"
+    payload.splice(payload.indexOf(jobsId), 1);
+    // Suppression du "li" de l'emploi
+    document.getElementById("jobsList").removeChild(li);
+    // Transformation de la liste des emplois choisis en JSON
+    // et inscription de ce dernier dans la "value" de l'input "jobs".
+    document.getElementById("jobs").value = JSON.stringify(payload);
+}