dubacq/ScoDoc
1
0
Fork 0
forked from ScoDoc/ScoDoc
Code Pull Requests Activity

Améliore affichage ref. comp.

Browse Source
This commit is contained in:
Emmanuel Viennet 2022-01-17 00:41:57 +01:00
parent 54b1ce7bfb
commit 2b1a3ee95e
2 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/static/css/ref-competences.css
View File

@ -16,6 +16,7 @@ h1{
.parcours{ .parcours{
display: flex; display: flex;
gap: 4px; gap: 4px;
padding-right: 4px;
} }
.parcours>div{ .parcours>div{
background: #09c; background: #09c;
@ -40,14 +41,16 @@ h1{
/* Zone compétences */ /* Zone compétences */
/**********************/ /**********************/
.competences{ .competences{
display: grid; display: grid;
gap: 4px;
margin-top: 8px; margin-top: 8px;
row-gap: 4px;
} }
.competences>div{ .competences>div{
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
width: var(--competence-size);
margin-right: 4px;
} }
.comp1{background:#a44} .comp1{background:#a44}
@ -70,6 +73,9 @@ h2{
font-size: 20px; font-size: 20px;
border-radius: 16px 0; border-radius: 16px 0;
} }
.ACs{
padding-right: 4px;
}
.AC li{ .AC li{
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;

19
app/static/js/ref_competences.js
View File

@ -40,13 +40,10 @@ class ref_competences extends HTMLElement {
initCompetences() { initCompetences() {
this.competencesNumber = {}; this.competencesNumber = {};
let gridTemplate = "";
let i = 0; let i = 0;
Object.keys(this.data.competences).forEach(competence => { Object.keys(this.data.competences).forEach(competence => {
gridTemplate += `[${competence}] auto`;
this.competencesNumber[competence] = 1 + i++ % 6; this.competencesNumber[competence] = 1 + i++ % 6;
}) })
this.shadow.querySelector(".competences").style.gridTemplateColumns = gridTemplate;
} }
competences(event, cle) { competences(event, cle) {
@ -56,6 +53,8 @@ class ref_competences extends HTMLElement {
this.shadow.querySelector(".competences").innerHTML = ""; this.shadow.querySelector(".competences").innerHTML = "";
/* Création des compétences */
let competencesBucket = [];
Object.entries(this.data.parcours[cle].annees).forEach(([annee, dataAnnee]) => { Object.entries(this.data.parcours[cle].annees).forEach(([annee, dataAnnee]) => {
Object.entries(dataAnnee.competences).forEach(([competence, niveauCle]) => { Object.entries(dataAnnee.competences).forEach(([competence, niveauCle]) => {
let numComp = this.competencesNumber[competence]; let numComp = this.competencesNumber[competence];
@ -67,9 +66,23 @@ class ref_competences extends HTMLElement {
divCompetence.dataset.competence = `${competence} ${niveauCle.niveau}`; divCompetence.dataset.competence = `${competence} ${niveauCle.niveau}`;
divCompetence.addEventListener("click", (event) => { this.AC(event, competence, niveauCle.niveau, annee, numComp) }) divCompetence.addEventListener("click", (event) => { this.AC(event, competence, niveauCle.niveau, annee, numComp) })
divCompetences.appendChild(divCompetence); divCompetences.appendChild(divCompetence);
competencesBucket.push(competence);
}) })
}) })
/* 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) {
gridTemplate += `[${competence}] 0`;
} else {
gridTemplate += `[${competence}] 1fr`;
}
})
this.shadow.querySelector(".competences").style.gridTemplateColumns = gridTemplate;
/* Réaffectation des focus */ /* Réaffectation des focus */
this.shadow.querySelectorAll(".AC").forEach(ac => { this.shadow.querySelectorAll(".AC").forEach(ac => {
this.shadow.querySelector(`[data-competence="${ac.dataset.competence}"]`).classList.add("focus"); this.shadow.querySelector(`[data-competence="${ac.dataset.competence}"]`).classList.add("focus");