Static/Js/userinfo.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
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);
}