diff --git a/app/static/css/ref-competences.css b/app/static/css/ref-competences.css new file mode 100644 index 000000000..a2193d3a3 --- /dev/null +++ b/app/static/css/ref-competences.css @@ -0,0 +1,91 @@ +:host{ + font-family: Verdana; + background: #222; + display: block; + padding: 12px 32px; + color: #FFF; + max-width: 1000px; + margin: auto; +} +h1{ + + font-weight: 100; +} +/**********************/ +/* Zone parcours */ +/**********************/ +.parcours{ + display: flex; + gap: 4px; +} +.parcours>div{ + background: #09c; + font-size: 18px; + text-align: center; + border-radius: 4px; + padding: 8px 16px; + cursor: pointer; + flex: 1; + transition: 0.1s; + opacity: 0.7; +} +.parcours>div:hover, +.competence>div:hover{ + color: #ccc; +} +.parcours>.focus{ + opacity: 1; +} + +/**********************/ +/* Zone compétences */ +/**********************/ +.competences{ + display: flex; + gap: 4px; +} +.competence{ + flex: 1; +} +.competence>div{ + padding: 4px 8px; + margin-top: 4px; + border-radius: 4px; + cursor: pointer; +} + +.comp1{background:#a44;} +.comp2{background:#84a} +.comp3{background:#a84} +.comp4{background:#8a4} +.comp5{background:#4a8} +.comp6{background:#48a} + +.competence>.focus{ + outline: 2px solid; +} + +/**********************/ +/* Zone AC */ +/**********************/ +h2{ + display: table; + padding: 8px 16px; + font-size: 20px; + border-radius: 16px 0; +} +.AC li{ + display: grid; + grid-template-columns: auto 1fr; + align-items: start; + gap: 4px; + margin-bottom: 4px; + border-bottom: 1px solid; +} +.AC li>div:nth-child(1){ + padding: 2px 4px; + border-radius: 4px; +} +.AC li>div:nth-child(2){ + padding-bottom: 2px; +} \ No newline at end of file diff --git a/app/static/js/ref_competences.js b/app/static/js/ref_competences.js new file mode 100644 index 000000000..b711552ec --- /dev/null +++ b/app/static/js/ref_competences.js @@ -0,0 +1,93 @@ +class ref_competences extends HTMLElement { + constructor() { + super(); + this.shadow = this.attachShadow({ mode: 'open' }); + + /* Template de base */ + this.shadow.innerHTML = ` +
+
+
+ `; + + /* 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 = ` + "; + } + + } +} +customElements.define('ref-competences', ref_competences); \ No newline at end of file diff --git a/app/templates/but/refcomp_show.html b/app/templates/but/refcomp_show.html index fb7357d21..2b245b59b 100644 --- a/app/templates/but/refcomp_show.html +++ b/app/templates/but/refcomp_show.html @@ -1,17 +1,40 @@ {# -*- mode: jinja-html -*- #} {% extends "sco_page.html" %} +{% block styles %} +{{super()}} +{% endblock %} {% block app_content %}

Référentiel de compétences {{ref.type_titre}} {{ref.specialite_long}}

-
-Chargé le {{ref.scodoc_date_loaded.strftime("%d/%m/%Y à %H:%M") if ref.scodoc_date_loaded else ""}} à partir du fichier {{ref.scodoc_orig_filename or "(inconnu)"}}. + + + +
+Référentiel chargé le {{ref.scodoc_date_loaded.strftime("%d/%m/%Y à %H:%M") if ref.scodoc_date_loaded else ""}} à partir du fichier {{ref.scodoc_orig_filename or "(inconnu)"}}.
+
-revenir à la liste des référentiels +revenir à la liste des référentiels
+{% endblock %} + +{% block scripts %} +{{super()}} + + + {% endblock %} \ No newline at end of file diff --git a/app/templates/sco_page.html b/app/templates/sco_page.html index e593d9c0c..d3fbdcf87 100644 --- a/app/templates/sco_page.html +++ b/app/templates/sco_page.html @@ -49,8 +49,12 @@ {{ moment.lang(g.locale) }} - + + + + +