Révision complète du css et modification du js principalement

4 files changed, 168 insertions, 0 deletions

diff --git a/Static/Js/index.js b/Static/Js/index.js
new file mode 100644
index 0000000..a9889b2
--- /dev/null
+++ b/Static/Js/index.js
@@ -0,0 +1,33 @@
+
+// ****************************************************************************
+// INDEX
+// ****************************************************************************
+
+// Slideshow
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
+function slideshow_start(slideNumber = 1) {
+    let images = [
+        "/Media/Images/slide0.jpg",
+        "/Media/Images/slide1.jpg",
+        "/Media/Images/slide2.jpg"
+    ];
+
+    setInterval(() => {
+        // Changement de l'image de fond de de la div
+        document.getElementById("secSlides").style.backgroundImage = `url("${images[slideNumber]}")`;
+        // Untoggle les précedents
+        // Utilisation de ternary, utilisation: condition ? Sivrai : Sifaux
+        document.getElementById(`slide_${slideNumber !== 0 ? slideNumber - 1 : images.length - 1}`).classList.toggle("show_block");
+        document.getElementById(`slideDot_${slideNumber !== 0 ? slideNumber - 1 : images.length - 1}`).classList.toggle("slideDotSelected");
+        // Toggle le nouveau texte & selecteur
+        document.getElementById(`slide_${slideNumber}`).classList.toggle("show_block");
+        document.getElementById(`slideDot_${slideNumber}`).classList.toggle("slideDotSelected")
+        // +1 sauf si fin
+        if (slideNumber < images.length - 1) {
+            slideNumber++; 
+        } else {
+            slideNumber = 0;
+        }
+    }
+    , 3000); 
+}
diff --git a/Static/Js/main.js b/Static/Js/main.js
new file mode 100644
index 0000000..7f3935c
--- /dev/null
+++ b/Static/Js/main.js
@@ -0,0 +1,29 @@
+// ****************************************************************************
+// Main
+// ****************************************************************************
+ 
+// Site web utilisés pour JS:
+// https://www.w3schools.com/js/default.asp
+// https://stackoverflow.com/ 
+
+// Changement de langue
+document.getElementById("navSelLang").addEventListener("change", () => {
+    document.getElementById("navFormLang").submit();
+});
+
+// TODO: A commenter
+function show(parentId, element, id, className) {
+    let elements = document.getElementById(parentId).getElementsByTagName(element);
+    elements[id].classList.add(className);
+    for (i = 0; i < elements.length; i++) {
+        if (elements[i].id !== id) {
+            elements[i].classList.remove(className);
+        }
+    }
+}
+
+function showNavButtons() {
+    document.getElementsByTagName("nav")[0].classList.toggle("showNav")
+    // first-child à chaque fois
+    document.getElementsByTagName("header")[0].getElementsByTagName("a")[0].getElementsByTagName("i")[0].classList.toggle("navLinkClicked")
+}
\ No newline at end of file
diff --git a/Static/Js/message.js b/Static/Js/message.js
new file mode 100644
index 0000000..97f39ef
--- /dev/null
+++ b/Static/Js/message.js
@@ -0,0 +1,25 @@
+
+// ****************************************************************************
+// MESSAGES
+// ****************************************************************************
+
+// Redirection
+function redirect(page) {
+    window.location.href = `/${page}.php`;
+}
+
+// Timer pour message
+function start_timer(page) {
+    let seconds = 2;
+    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/Static/Js/userinfo.js b/Static/Js/userinfo.js
new file mode 100644
index 0000000..29c92d0
--- /dev/null
+++ b/Static/Js/userinfo.js
@@ -0,0 +1,81 @@
+
+// ****************************************************************************
+// 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  = [];
+
+// ****************************************************************************
+// FONCTIONS PRINCIPALES
+// ****************************************************************************
+
+// TODO: Revoir les commentaires
+// Initiation
+function init() {    
+    // Récupération des emplois déja présent
+    let jobs = document.getElementsByClassName("jobsListElem");
+
+    // Pour chaque emploi disponible
+    for (i = 0; i < jobs.length; i ++) {
+        if (jobs[i].getAttribute("data-value") !== "") {
+            payload.push(jobs[i].getAttribute("data-value"));
+            jobs[i].onclick = (ptrEvent) => {remove(ptrEvent)};
+        }
+    }
+
+    // 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;
+    let jobValue = document.getElementById("jobsSel").options[jobsSel.selectedIndex].value;
+
+    // Si l'emploi n'est pas deja dans "payload" 
+    // et si il fait bien partie du dictionnaire de tous les emplois
+    if (!payload.includes(jobValue) && jobValue !== "") {
+        // Ajout à payload
+        payload.push(jobValue);
+
+        // Création, configuration et ajout du nouveau "li"
+        let i = document.createElement("i");
+        i.className = "fas fa-ban";
+
+        let div = document.createElement("div");
+        div.className = "jobsListElem";
+        div.dataset.value = jobValue;
+        div.onclick = (ptrEvent) => {remove(ptrEvent)};
+        div.appendChild(document.createTextNode(jobName));
+        div.appendChild(i);
+        
+        document.getElementById("jobsListGrid").appendChild(div);
+        // 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);
+    }
+}
+
+function remove(ptrEvent) {
+    // Suppression de l'emploi dans "payload"
+    payload.splice(payload.indexOf(ptrEvent.srcElement.getAttribute("data-value")), 1);
+    // Suppression du "div" de l'emploi
+    document.getElementById("jobsListGrid").removeChild(ptrEvent.srcElement);
+    // 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);
+}
\ No newline at end of file