ScoDoc-PE/app/static/js/ref_competences.js

108 lines
3.8 KiB
JavaScript
Raw Normal View History

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');
2022-01-15 15:09:16 +01:00
if (location.href.split("/")[3] == "ScoDoc") {
styles.setAttribute('href', '/ScoDoc/static/css/ref-competences.css');
} else {
styles.setAttribute('href', 'ref-competences.css');
}
this.shadow.appendChild(styles);
}
set setData(data) {
this.data = data;
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);
})
2022-01-15 15:09:16 +01:00
this.initCompetences();
}
2022-01-15 15:09:16 +01:00
initCompetences() {
this.competencesNumber = {};
let i = 0;
Object.keys(this.data.competences).forEach(competence => {
this.competencesNumber[competence] = 1 + i++ % 6;
})
}
competences(event, cle) {
this.shadow.querySelector(".parcours>.focus")?.classList.remove("focus");
event.currentTarget.classList.add("focus");
2022-01-15 15:09:16 +01:00
let divCompetences = this.shadow.querySelector(".competences");
this.shadow.querySelector(".competences").innerHTML = "";
2022-01-15 15:09:16 +01:00
2022-01-17 00:41:57 +01:00
/* Création des compétences */
let competencesBucket = [];
2022-01-15 15:09:16 +01:00
Object.entries(this.data.parcours[cle].annees).forEach(([annee, dataAnnee]) => {
Object.entries(dataAnnee.competences).forEach(([competence, niveauCle]) => {
let numComp = this.competencesNumber[competence];
let divCompetence = document.createElement("div");
2022-01-15 15:09:16 +01:00
divCompetence.innerText = `${competence} ${niveauCle.niveau}`;
divCompetence.style.gridRowStart = annee;
2022-11-28 18:03:48 +01:00
divCompetence.style.gridColumnStart = competence.replaceAll(" ", "_");
2022-01-15 15:09:16 +01:00
divCompetence.className = "comp" + numComp;
divCompetence.dataset.competence = `${competence} ${niveauCle.niveau}`;
divCompetence.addEventListener("click", (event) => { this.AC(event, competence, niveauCle.niveau, annee, numComp) })
divCompetences.appendChild(divCompetence);
2022-01-17 00:41:57 +01:00
competencesBucket.push(competence);
2022-01-15 15:09:16 +01:00
})
})
2022-01-15 15:09:16 +01:00
2022-01-17 00:41:57 +01:00
/* Affectation de la taille des éléments */
//divCompetences.style.setProperty("--competence-size", `calc(${100 / competencesBucket.length}% )`);
let gridTemplate = "";
Object.keys(this.data.competences).forEach(competence => {
if (competencesBucket.indexOf(competence) == -1) {
2022-11-28 18:03:48 +01:00
gridTemplate += `[${competence.replaceAll(" ", "_")}] 0`;
2022-01-17 00:41:57 +01:00
} else {
2022-11-28 18:03:48 +01:00
gridTemplate += `[${competence.replaceAll(" ", "_")}] 1fr`;
2022-01-17 00:41:57 +01:00
}
})
this.shadow.querySelector(".competences").style.gridTemplateColumns = gridTemplate;
2022-01-15 15:09:16 +01:00
/* Réaffectation des focus */
this.shadow.querySelectorAll(".AC").forEach(ac => {
this.shadow.querySelector(`[data-competence="${ac.dataset.competence}"]`).classList.add("focus");
});
}
2022-01-15 15:09:16 +01:00
AC(event, competence, niveau, annee, numComp) {
event.currentTarget.classList.toggle("focus");
2022-01-15 15:09:16 +01:00
if (this.shadow.querySelector(`.ACs [data-competence="${competence} ${niveau}"]`)) {
this.shadow.querySelector(`.ACs [data-competence="${competence} ${niveau}"]`).remove();
} else {
let output = `
2022-01-15 15:09:16 +01:00
<ul class=AC data-competence="${competence} ${niveau}">
<h2 class=comp${numComp}>${competence} ${niveau}</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);