Affichage référentiel de compétences (contrib Séb. L.)
This commit is contained in:
parent
53630f08de
commit
4477a25147
91
app/static/css/ref-competences.css
Normal file
91
app/static/css/ref-competences.css
Normal file
@ -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;
|
||||
}
|
||||
93
app/static/js/ref_competences.js
Normal file
93
app/static/js/ref_competences.js
Normal file
@ -0,0 +1,93 @@
|
||||
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);
|
||||
@ -1,17 +1,40 @@
|
||||
{# -*- mode: jinja-html -*- #}
|
||||
{% extends "sco_page.html" %}
|
||||
{% block styles %}
|
||||
{{super()}}
|
||||
{% endblock %}
|
||||
|
||||
{% block app_content %}
|
||||
<h2>Référentiel de compétences {{ref.type_titre}} {{ref.specialite_long}}</h2>
|
||||
|
||||
<div>
|
||||
|
||||
Chargé le {{ref.scodoc_date_loaded.strftime("%d/%m/%Y à %H:%M") if ref.scodoc_date_loaded else ""}} à partir du fichier <tt>{{ref.scodoc_orig_filename or "(inconnu)"}}</tt>.
|
||||
<ref-competences></ref-competences>
|
||||
|
||||
<script src="/ScoDoc/static/js/ref_competences.js"></script>
|
||||
|
||||
<div class="help">
|
||||
Référentiel chargé le {{ref.scodoc_date_loaded.strftime("%d/%m/%Y à %H:%M") if ref.scodoc_date_loaded else ""}} à partir du fichier <tt>{{ref.scodoc_orig_filename or "(inconnu)"}}</tt>.
|
||||
</div>
|
||||
|
||||
|
||||
<div class="part2">
|
||||
<a class="stdlink" href="{{url_for('notes.refcomp_table', scodoc_dept=g.scodoc_dept)}}">revenir à la liste des référentiels</a>
|
||||
<a class="stdlink"
|
||||
href="{{url_for('notes.refcomp_table', scodoc_dept=g.scodoc_dept)}}"
|
||||
>revenir à la liste des référentiels</a>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
{{super()}}
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
let data_url = "{{data_source}}";
|
||||
$.getJSON(data_url, function (data) {
|
||||
document.querySelector("ref-competences").setData = data;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
@ -49,8 +49,12 @@
|
||||
{{ moment.lang(g.locale) }}
|
||||
<script src="/ScoDoc/static/libjs/menu.js"></script>
|
||||
<script src="/ScoDoc/static/libjs/bubble.js"></script>
|
||||
<script src="/ScoDoc/static/libjs/qtip/jquery.qtip-3.0.3.min.js"></script>
|
||||
<script src="/ScoDoc/static/jQuery/jquery.js"></script>
|
||||
<script src="/ScoDoc/static/jQuery/jquery-migrate-1.2.0.min.js"></script>
|
||||
<script src="/ScoDoc/static/libjs/jquery.field.min.js"></script>
|
||||
<script src="/ScoDoc/static/libjs/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
|
||||
<script src="/ScoDoc/static/libjs/qtip/jquery.qtip-3.0.3.min.js"></script>
|
||||
|
||||
<script src="/ScoDoc/static/js/scodoc.js"></script>
|
||||
<script src="/ScoDoc/static/DataTables/datatables.min.js"></script>
|
||||
<script>
|
||||
|
||||
@ -49,6 +49,11 @@ def refcomp_show(refcomp_id):
|
||||
ref=ref,
|
||||
title="Référentiel de compétences",
|
||||
sco=ScoData(),
|
||||
data_source=url_for(
|
||||
"notes.refcomp",
|
||||
scodoc_dept=g.scodoc_dept,
|
||||
refcomp_id=refcomp_id,
|
||||
),
|
||||
)
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user