Affichage référentiel de compétences (contrib Séb. L.)

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;
+}

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 = `
+			<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);

app/templates/but/refcomp_show.html

@@ -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 %}

app/templates/sco_page.html

@@ -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>

app/views/refcomp.py

@@ -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,
+        ),
     )