blob: 28eee2fb62cd92851a50b90e5752e6000beb0b3d (
plain)
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
82
|
// ############################################################################
// # #
// # Description: JS utile sur la page user infos #
// # #
// ############################################################################
// 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
// ****************************************************************************
// GESTION AJOUT/SUPPRESSION D'UN EMPLOI ET PASSAGE A L'INPUT
// DES VALEURS SELECTIONNEES
// ****************************************************************************
var payload = [];
// Initiation
function init() {
// Récupération des emplois déja présent
let jobs = document.getElementsByClassName("jobsListElem");
// Pour chaque emploi disponible récupération de sa valeur
for (i = 0; i < jobs.length; i ++) {
if (jobs[i].getAttribute("data-value") !== "") {
payload.push(jobs[i].getAttribute("data-value"));
jobs[i].addEventListener("click", (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);
}
// Suppression d'un emploi
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);
}
// Ajout d'un emploi
document.getElementById("addButton").addEventListener("click", () => {
// Récupération du nom et de la valeur 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 que sa valeur est non nul (choix par défaut)
if (!payload.includes(jobValue) && jobValue !== "") {
// Ajout à payload
payload.push(jobValue);
// Création, configuration et ajout d'une nouvelle div pour l'emploi choisi
// Création du "i"
let i = document.createElement("i");
i.className = "fas fa-ban";
// Création, configuration de la div et ajout du "i"
let div = document.createElement("div");
div.className = "jobsListElem";
div.dataset.value = jobValue;
div.addEventListener("click", (ptrEvent) => {remove(ptrEvent)});
div.appendChild(document.createTextNode(jobName));
div.appendChild(i);
// Enfin, ajout au document
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);
}
});
// Déclenchement de l'init
init();
|
