93 lines
3.1 KiB
JavaScript
93 lines
3.1 KiB
JavaScript
|
class ref_competences extends HTMLElement {
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this.shadow = this.attachShadow({ mode: 'open' });
|
||
|
|
|
||
|
|
/* Template de base */
|
||
|
|
this.shadow.innerHTML = `
|
||
|
|
<div class=parcours></div>
|
||
|
|
<div class=competences></div>
|
||
|
|
<div class=ACs></div>
|
||
|
|
`;
|
||
|
|
|
||
|
|
/* Style du module */
|
||
|
|
const styles = document.createElement('link');
|
||
|
|
styles.setAttribute('rel', 'stylesheet');
|
||
|
|
styles.setAttribute('href', '/ScoDoc/static/css/ref-competences.css');
|
||
|
|
|
||
|
|
this.shadow.appendChild(styles);
|
||
|
|
}
|
||
|
|
|
||
|
|
set setData(data) {
|
||
|
|
this.data = data;
|
||
|
|
/* this.shadow.querySelector("h1").innerText = "BUT " + data.specialite_long; */
|
||
|
|
this.parcours();
|
||
|
|
}
|
||
|
|
|
||
|
|
parcours() {
|
||
|
|
let parcoursDIV = this.shadow.querySelector(".parcours");
|
||
|
|
Object.entries(this.data.parcours).forEach(([cle, parcours]) => {
|
||
|
|
let div = document.createElement("div");
|
||
|
|
div.innerText = parcours.libelle;
|
||
|
|
div.addEventListener("click", (event) => { this.competences(event, cle) })
|
||
|
|
parcoursDIV.appendChild(div);
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
competences(event, cle) {
|
||
|
|
this.shadow.querySelector(".parcours>.focus")?.classList.remove("focus");
|
||
|
|
event.currentTarget.classList.add("focus");
|
||
|
|
|
||
|
|
/* Récupère une liste plate de toutes les compentences de toutes les années */
|
||
|
|
let bucketCompetences = [
|
||
|
|
Object.keys(this.data.parcours[
|
||
|
|
Object.keys(this.data.parcours)[0]
|
||
|
|
].annees[1].competences)
|
||
|
|
, Object.keys(this.data.parcours[cle].annees[2].competences)
|
||
|
|
, Object.keys(this.data.parcours[cle].annees[3].competences)
|
||
|
|
].flat();
|
||
|
|
|
||
|
|
/* Compte le nombre d'occurence de chaque compétence */
|
||
|
|
let competences = {};
|
||
|
|
bucketCompetences.forEach(competence => {
|
||
|
|
competences[competence] = ++competences[competence] || 1
|
||
|
|
})
|
||
|
|
|
||
|
|
/* Affichage */
|
||
|
|
let numComp = 1;
|
||
|
|
this.shadow.querySelector(".competences").innerHTML = "";
|
||
|
|
Object.entries(competences).forEach(([competence, nb]) => {
|
||
|
|
var divCompetence3ans = document.createElement("div");
|
||
|
|
divCompetence3ans.className = "competence";
|
||
|
|
let numTmp = numComp;
|
||
|
|
for (let i = 0; i < nb; i++) {
|
||
|
|
let divCompetence = document.createElement("div");
|
||
|
|
divCompetence.innerText = `${competence} ${i + 1}`;
|
||
|
|
divCompetence.className = "comp" + numTmp;
|
||
|
|
divCompetence.addEventListener("click", (event) => { this.AC(event, competence, numTmp, i + 1) })
|
||
|
|
divCompetence3ans.appendChild(divCompetence);
|
||
|
|
}
|
||
|
|
this.shadow.querySelector(".competences").appendChild(divCompetence3ans);
|
||
|
|
numComp++;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
AC(event, competence, numComp, annee) {
|
||
|
|
event.currentTarget.classList.toggle("focus");
|
||
|
|
if (this.shadow.querySelector(`[data-competence="${competence} ${annee}"]`)) {
|
||
|
|
this.shadow.querySelector(`[data-competence="${competence} ${annee}"]`).remove();
|
||
|
|
} else {
|
||
|
|
let output = `
|
||
|
|
<ul class=AC data-competence="${competence} ${annee}">
|
||
|
|
<h2 class=comp${numComp}>${competence} ${annee}</h2>
|
||
|
|
`;
|
||
|
|
Object.entries(this.data.competences[competence].niveaux["BUT" + annee].app_critiques).forEach(([num, contenu]) => {
|
||
|
|
output += `<li><div class=comp${numComp}>${num}</div><div>${contenu.libelle}</div></li>`;
|
||
|
|
})
|
||
|
|
this.shadow.querySelector(".ACs").innerHTML += output + "</ul>";
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
customElements.define('ref-competences', ref_competences);
|