From 2f7e0b06a4d1fc2c69536b82ef0e089f522dd587 Mon Sep 17 00:00:00 2001 From: Emmanuel Viennet Date: Sat, 29 Jan 2022 22:56:01 +0100 Subject: [PATCH] nouveaux bulletins BUT (commit d712bcf de SL) --- app/static/css/releve-but.css | 620 ++++++++++++++++++---------------- app/static/js/releve-but.js | 119 +++++-- 2 files changed, 404 insertions(+), 335 deletions(-) diff --git a/app/static/css/releve-but.css b/app/static/css/releve-but.css index 3f132d6a..a20c8bfa 100644 --- a/app/static/css/releve-but.css +++ b/app/static/css/releve-but.css @@ -1,298 +1,322 @@ -/* Bulletin BUT, Seb. L. 2021-12-06 */ -/*******************/ -/* Styles généraux */ -/*******************/ -.wait{ - width: 60px; - height: 6px; - margin: auto; - background: #424242; /* la réponse à tout */ - animation: wait .4s infinite alternate; -} -@keyframes wait{ - 100%{transform: translateY(40px) rotate(1turn);} -} -main{ - --couleurPrincipale: rgb(240,250,255); - --couleurFondTitresUE: rgb(206,255,235); - --couleurFondTitresRes: rgb(125, 170, 255); - --couleurFondTitresSAE: rgb(211, 255, 255); - --couleurSecondaire: #fec; - --couleurIntense: #c09; - --couleurSurlignage: rgba(232, 255, 132, 0.47); - max-width: 1000px; - margin: auto; - display: none; -} -.ready .wait{display: none;} -.ready main{display: block;} -h2{ - margin: 0; - color: black; -} -section{ - background: #FFF; - border-radius: 16px; - border: 1px solid #AAA; - padding: 16px 32px; - margin: 8px 0; -} -section>div:nth-child(1){ - display: flex; - justify-content: space-between; - align-items: center; - gap: 8px; -} -.CTA_Liste{ - display: flex; - gap: 4px; - align-items: center; - background: var(--couleurIntense); - color: #FFF; - padding: 4px 8px; - border-radius: 4px; - box-shadow: 0 2px 2px rgba(0,0,0,0.26); - cursor: pointer; -} -.CTA_Liste>svg{ - transition: 0.2s; -} -.CTA_Liste:hover{ - outline: 2px solid #424242; -} -.listeOff svg{ - transform: rotate(180deg); -} -.listeOff .syntheseModule, -.listeOff .eval{ - display: none; -} - -.moduleOnOff>.syntheseModule, -.moduleOnOff>.eval{ - display: none; -} -.listeOff .moduleOnOff>.syntheseModule, -.listeOff .moduleOnOff>.eval{ - display: flex !important; -} - -.listeOff .ue::before, -.listeOff .module::before, -.moduleOnOff .ue::before, -.moduleOnOff .module::before{ - transform: rotate(0); -} -.listeOff .moduleOnOff .ue::before, -.listeOff .moduleOnOff .module::before{ - transform: rotate(180deg) !important; -} - -/***********************/ -/* Options d'affichage */ -/***********************/ -.hide_abs .absences, -.hide_abs_modules .module>.absences, -.hide_coef .synthese em, -.hide_coef .eval>em, -.hide_date_inscr .dateInscription, -.hide_ects .ects{ - display: none; -} - -.module>.absences, -.module .moyenne, -.module .info{ - display: none; -} - -/************/ -/* Etudiant */ -/************/ -.info_etudiant{ - color: #000; - text-decoration: none; -} -.etudiant{ - display: flex; - align-items: center; - gap: 16px; - border-color: var(--couleurPrincipale); - background: var(--couleurPrincipale); - color: rgb(0, 0, 0); -} -.civilite{ - font-weight: bold; - font-size: 130%; -} - -/************/ -/* Semestre */ -/************/ -.flex{ - display: flex; - gap: 16px; -} -.infoSemestre{ - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 4px; - flex: none; -} -.infoSemestre>div{ - border: 1px solid var(--couleurIntense); - padding: 4px 8px; - border-radius: 4px; - display: grid; - grid-template-columns: auto auto; - column-gap: 4px; -} -.infoSemestre>div:nth-child(1){ - margin-right: auto; -} -.infoSemestre>div>div:nth-child(even){ - text-align: right; -} -.rang{ - text-decoration: underline var(--couleurIntense); -} -.decision{ - margin: 5px 0; - font-weight: bold; - font-size: 20px; - text-decoration: underline var(--couleurIntense); -} -.enteteSemestre{ - color: black; - font-weight: bold; - font-size: 20px; - margin-bottom: 4px; -} - -/***************/ -/* Synthèse */ -/***************/ -.synthese .ue, -.synthese h3{ - background: var(--couleurFondTitresUE); -} -.synthese em, -.eval em{ - opacity: 0.6; - min-width: 80px; - display: inline-block; -} - -/***************/ -/* Evaluations */ -/***************/ -.module, .ue { - background: var(--couleurSecondaire); - color: #000; - padding: 4px 32px; - border-radius: 4px; - display: flex; - gap: 16px; - margin: 4px 0 2px 0; - overflow-x: auto; - overflow-y: hidden; - cursor: pointer; - position: relative; -} -.module::before, .ue::before { - content:url("data:image/svg+xml;utf8,"); - width: 26px; - height: 26px; - position: absolute; - bottom: 0; - left: 50%; - margin-left: -13px; - transform: rotate(180deg); - transition: 0.2s; -} -h3{ - display: flex; - align-items: center; - margin: 0 auto 0 0; - position: sticky; - left: -32px; - z-index: 1; - font-size: 16px; - background: var(--couleurSecondaire); -} -.sae .module, .sae h3{ - background: var(--couleurFondTitresSAE); -} - -.moyenne{ - font-weight: bold; - text-align: right; -} -.info{ - opacity: 0.9; -} -.syntheseModule{ - cursor: pointer; -} -.eval, .syntheseModule{ - position: relative; - display: flex; - justify-content: space-between; - margin: 0 0 0 28px; - padding: 0px 4px; - border-bottom: 1px solid #aaa; -} -.eval>div, .syntheseModule>div{ - display: flex; - gap: 4px; -} - -.eval:hover, .syntheseModule:hover{ - background: var(--couleurSurlignage); - /* color: #FFF; */ -} -.complement{ - pointer-events:none; - position: absolute; - bottom: 100%; - right: 0; - padding: 8px; - border-radius: 4px; - background: #FFF; - color: #000; - border: 1px solid var(--couleurIntense); - opacity: 0; - display: grid !important; - grid-template-columns: auto auto; - gap: 0 !important; - column-gap: 4px !important; -} -.eval:hover .complement{ - opacity: 1; - z-index: 1; -} -.complement>div:nth-child(even){ - text-align: right; -} -.complement>div:nth-child(1), -.complement>div:nth-child(2){ - font-weight: bold; -} -.complement>div:nth-child(1), -.complement>div:nth-child(7){ - margin-bottom: 8px; -} - -.absences{ - display: grid; - grid-template-columns: auto auto; - column-gap: 4px; - text-align: right; - border-left: 1px solid; - padding-left: 16px; -} -.absences>div:nth-child(1), -.absences>div:nth-child(2){ - font-weight: bold; -} \ No newline at end of file +/* Bulletin BUT, Seb. L. 2021-12-06 */ +/*******************/ +/* Styles généraux */ +/*******************/ +.wait{ + width: 60px; + height: 6px; + margin: auto; + background: #424242; /* la réponse à tout */ + animation: wait .4s infinite alternate; +} +@keyframes wait{ + 100%{transform: translateY(40px) rotate(1turn);} +} +main{ + --couleurPrincipale: rgb(240,250,255); + --couleurFondTitresUE: rgb(206,255,235); + --couleurFondTitresRes: rgb(125, 170, 255); + --couleurFondTitresSAE: rgb(211, 255, 255); + --couleurSecondaire: #fec; + --couleurIntense: #c09; + --couleurSurlignage: rgba(232, 255, 132, 0.47); + max-width: 1000px; + margin: auto; + display: none; +} +.ready .wait{display: none;} +.ready main{display: block;} +h2{ + margin: 0; + color: black; +} +section{ + background: #FFF; + border-radius: 16px; + border: 1px solid #AAA; + padding: 16px 32px; + margin: 8px 0; +} +section>div:nth-child(1){ + display: flex; + justify-content: space-between; + align-items: center; + gap: 8px; +} +.CTA_Liste{ + display: flex; + gap: 4px; + align-items: center; + background: var(--couleurIntense); + color: #FFF; + padding: 4px 8px; + border-radius: 4px; + box-shadow: 0 2px 2px rgba(0,0,0,0.26); + cursor: pointer; +} +.CTA_Liste>svg{ + transition: 0.2s; +} +.CTA_Liste:hover{ + outline: 2px solid #424242; +} +.listeOff svg{ + transform: rotate(180deg); +} +.listeOff .syntheseModule, +.listeOff .eval{ + display: none; +} + +.moduleOnOff>.syntheseModule, +.moduleOnOff>.eval{ + display: none; +} +.listeOff .moduleOnOff>.syntheseModule, +.listeOff .moduleOnOff>.eval{ + display: flex !important; +} + +.listeOff .ue::before, +.listeOff .module::before, +.moduleOnOff .ue::before, +.moduleOnOff .module::before{ + transform: rotate(0); +} +.listeOff .moduleOnOff .ue::before, +.listeOff .moduleOnOff .module::before{ + transform: rotate(180deg) !important; +} + +/***********************/ +/* Options d'affichage */ +/***********************/ +.hide_abs .absencesRecap, +/*.hide_abs .absences,*/ +.hide_abs_modules .module>.absences, +.hide_coef .synthese em, +.hide_coef .eval>em, +.hide_date_inscr .dateInscription, +.hide_ects .ects{ + display: none; +} + +/*.module>.absences,*/ +.module .moyenne, +.module .info{ + display: none; +} + +/************/ +/* Etudiant */ +/************/ +.info_etudiant{ + color: #000; + text-decoration: none; +} +.etudiant{ + display: flex; + align-items: center; + gap: 16px; + border-color: var(--couleurPrincipale); + background: var(--couleurPrincipale); + color: rgb(0, 0, 0); +} +.civilite{ + font-weight: bold; + font-size: 130%; +} + +/************/ +/* Semestre */ +/************/ +.flex{ + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 8px; +} +.infoSemestre{ + display: flex; + flex-wrap: wrap; + align-items: flex-start; + gap: 4px; +} +.infoSemestre>div{ + border: 1px solid var(--couleurIntense); + padding: 4px 8px; + border-radius: 4px; + display: grid; + grid-template-columns: auto auto; + column-gap: 4px; + flex: none; +} +.infoSemestre>div:nth-child(1){ + margin-right: auto; +} +.infoSemestre>div>div:nth-child(even){ + text-align: right; +} +.rang{ + text-decoration: underline var(--couleurIntense); +} +.decision{ + margin: 5px 0; + font-weight: bold; + font-size: 20px; + text-decoration: underline var(--couleurIntense); +} +.enteteSemestre{ + color: black; + font-weight: bold; + font-size: 20px; + margin-bottom: 4px; +} +/***************/ +/* Zone custom */ +/***************/ +.custom:empty{ + display: none; +} + +/***************/ +/* Synthèse */ +/***************/ +.synthese .ue, +.synthese h3{ + background: var(--couleurFondTitresUE); +} +.synthese em, +.eval em{ + opacity: 0.6; + min-width: 80px; + display: inline-block; +} +.ueBonus, +.ueBonus h3{ + background: var(--couleurFondTitresSAE) !important; + color: #000 !important; +} + +/***************/ +/* Evaluations */ +/***************/ +.evaluations>div, +.sae>div{ + scroll-margin-top: 60px; +} +.module, .ue { + background: var(--couleurSecondaire); + color: #000; + padding: 4px 32px; + border-radius: 4px; + display: flex; + gap: 16px; + margin: 4px 0 2px 0; + overflow-x: auto; + overflow-y: hidden; + cursor: pointer; + position: relative; +} +.module::before, .ue::before { + content:url("data:image/svg+xml;utf8,"); + width: 26px; + height: 26px; + position: absolute; + bottom: 0; + left: calc(50% - 13px); + transform: rotate(180deg); + transition: 0.2s; +} +@media screen and (max-width: 1000px) { + /* Placer le chevron à gauche au lieu du milieu */ + .module::before, .ue::before { + left: 2px; + bottom: calc(50% - 13px); + } +} +h3{ + display: flex; + align-items: center; + margin: 0 auto 0 0; + position: sticky; + left: -32px; + z-index: 1; + font-size: 16px; + background: var(--couleurSecondaire); +} +.sae .module, .sae h3{ + background: var(--couleurFondTitresSAE); +} + +.moyenne{ + font-weight: bold; + text-align: right; +} +.info{ + opacity: 0.9; +} +.syntheseModule{ + cursor: pointer; +} +.eval, .syntheseModule{ + position: relative; + display: flex; + justify-content: space-between; + margin: 0 0 0 28px; + padding: 0px 4px; + border-bottom: 1px solid #aaa; +} +.eval>div, .syntheseModule>div{ + display: flex; + gap: 4px; +} + +.eval:hover, .syntheseModule:hover{ + background: var(--couleurSurlignage); + /* color: #FFF; */ +} +.complement{ + pointer-events:none; + position: absolute; + bottom: 100%; + right: 0; + padding: 8px; + border-radius: 4px; + background: #FFF; + color: #000; + border: 1px solid var(--couleurIntense); + opacity: 0; + display: grid !important; + grid-template-columns: auto auto; + gap: 0 !important; + column-gap: 4px !important; +} +.eval:hover .complement{ + opacity: 1; + z-index: 1; +} +.complement>div:nth-child(even){ + text-align: right; +} +.complement>div:nth-child(1), +.complement>div:nth-child(2){ + font-weight: bold; +} +.complement>div:nth-child(1), +.complement>div:nth-child(7){ + margin-bottom: 8px; +} + +/*.absences{ + display: grid; + grid-template-columns: auto auto; + column-gap: 4px; + text-align: right; + border-left: 1px solid; + padding-left: 16px; +} +.absences>div:nth-child(1), +.absences>div:nth-child(2){ + font-weight: bold; +}*/ diff --git a/app/static/js/releve-but.js b/app/static/js/releve-but.js index 521e97da..6e18ad57 100644 --- a/app/static/js/releve-but.js +++ b/app/static/js/releve-but.js @@ -15,13 +15,10 @@ class releveBUT extends HTMLElement { /* Style du module */ const styles = document.createElement('link'); styles.setAttribute('rel', 'stylesheet'); - styles.setAttribute('href', '/ScoDoc/static/css/releve-but.css'); - /* variante "ScoDoc" ou "Passerelle" (ENT) ? */ - if (location.href.split("/")[3] == "ScoDoc") { /* un peu osé... */ - styles.setAttribute('href', '/ScoDoc/static/css/releve-but.css'); + if (location.href.split("/")[3] == "ScoDoc") { + styles.setAttribute('href', '/ScoDoc/static/css/releve-but.css'); // Scodoc } else { - // Passerelle - styles.setAttribute('href', '/assets/styles/releve-but.css'); + styles.setAttribute('href', '/assets/styles/releve-but.css'); // Passerelle } this.shadow.appendChild(styles); } @@ -49,6 +46,8 @@ class releveBUT extends HTMLElement { this.showSynthese(data); this.showEvaluations(data); + this.showCustom(data); + this.setOptions(data.options); this.shadow.querySelectorAll(".CTA_Liste").forEach(e => { @@ -57,7 +56,7 @@ class releveBUT extends HTMLElement { this.shadow.querySelectorAll(".ue, .module").forEach(e => { e.addEventListener("click", this.moduleOnOff) }) - this.shadow.querySelectorAll(".syntheseModule").forEach(e => { + this.shadow.querySelectorAll(":not(.ueBonus)+.syntheseModule").forEach(e => { e.addEventListener("click", this.goTo) }) @@ -77,6 +76,11 @@ class releveBUT extends HTMLElement {
+ + + +
+ @@ -169,8 +173,8 @@ class releveBUT extends HTMLElement { output += `
- Numéro étudiant : ${data.etudiant.code_nip} - - Code INE : ${data.etudiant.code_ine} + Numéro étudiant : ${data.etudiant.code_nip || "~"} - + Code INE : ${data.etudiant.code_ine || "~"}
${data.formation.titre}
`; @@ -183,6 +187,13 @@ class releveBUT extends HTMLElement { this.shadow.querySelector(".infoEtudiant").innerHTML = output; } + /*******************************/ + /* Affichage local */ + /*******************************/ + showCustom(data) { + this.shadow.querySelector(".custom").innerHTML = data.custom || ""; + } + /*******************************/ /* Information sur le semestre */ /*******************************/ @@ -196,6 +207,11 @@ class releveBUT extends HTMLElement {
Max. promo. :
${data.semestre.notes.max}
Moy. promo. :
${data.semestre.notes.moy}
Min. promo. :
${data.semestre.notes.min}
+ +
+
Absences
+
N.J. ${data.semestre.absences?.injustifie ?? "-"}
+
Total ${data.semestre.absences?.total ?? "-"}
`; /*${data.semestre.groupes.map(groupe => { return ` @@ -210,7 +226,7 @@ class releveBUT extends HTMLElement { }).join("") }*/ this.shadow.querySelector(".infoSemestre").innerHTML = output; - /*this.shadow.querySelector(".decision").innerHTML = data.semestre.decision.code;*/ + this.shadow.querySelector(".decision").innerHTML = data.semestre.decision?.code || ""; } /*******************************/ @@ -219,32 +235,44 @@ class releveBUT extends HTMLElement { showSynthese(data) { let output = ``; Object.entries(data.ues).forEach(([ue, dataUE]) => { - output += ` - -
-
-

- ${(dataUE.competence) ? dataUE.competence + " - " : ""}${ue} -

-
-
Moyenne : ${dataUE.moyenne?.value || "-"}
-
- Bonus : ${dataUE.bonus || 0} - - Malus : ${dataUE.malus || 0} -  - - ECTS : ${dataUE.ECTS.acquis} / ${dataUE.ECTS.total} - -
-
-
-
Abs N.J.
${dataUE.absences?.injustifie || 0}
-
Total
${dataUE.absences?.total || 0}
+ if (dataUE.type == 1) { // UE Sport / Bonus + output += ` +
+
+

Bonus

+
${dataUE.bonus_description}
+ ${this.ueSport(dataUE.modules)}
- ${this.synthese(data, dataUE.ressources)} - ${this.synthese(data, dataUE.saes)} -
- `; + `; + } else { + output += ` +
+
+

+ ${ue}${(dataUE.competence) ? " - " + dataUE.competence : ""} +

+
+
Moyenne : ${dataUE.moyenne?.value || "-"}
+
+ Bonus : ${dataUE.bonus || 0} - + Malus : ${dataUE.malus || 0} +  - + ECTS : ${dataUE.ECTS.acquis} / ${dataUE.ECTS.total} + +
+
`; + /*
+
Abs N.J.
${dataUE.absences?.injustifie || 0}
+
Total
${dataUE.absences?.total || 0}
+
*/ + output += ` +
+ ${this.synthese(data, dataUE.ressources)} + ${this.synthese(data, dataUE.saes)} +
+ `; + } }); this.shadow.querySelector(".synthese").innerHTML = output; } @@ -252,7 +280,7 @@ class releveBUT extends HTMLElement { let output = ""; Object.entries(modules).forEach(([module, dataModule]) => { let titre = data.ressources[module]?.titre || data.saes[module]?.titre; - let url = data.ressources[module]?.url || data.saes[module]?.url; + //let url = data.ressources[module]?.url || data.saes[module]?.url; output += `
${module} - ${titre}
@@ -265,6 +293,23 @@ class releveBUT extends HTMLElement { }) return output; } + ueSport(modules) { + let output = ""; + Object.values(modules).forEach((module) => { + Object.values(module.evaluations).forEach((evaluation) => { + output += ` +
+
${module.titre} - ${evaluation.description}
+
+ ${evaluation.note.value ?? "-"} + Coef. ${evaluation.coef} +
+
+ `; + }) + }) + return output; + } /*******************************/ /* Evaluations */ @@ -305,7 +350,7 @@ class releveBUT extends HTMLElement { evaluations.forEach((evaluation) => { output += `
-
${this.URL(evaluation.url, evaluation.description)}
+
${this.URL(evaluation.url, evaluation.description || "Évaluation")}
${evaluation.note.value} Coef. ${evaluation.coef} @@ -363,4 +408,4 @@ class releveBUT extends HTMLElement { } } -customElements.define('releve-but', releveBUT); \ No newline at end of file +customElements.define('releve-but', releveBUT);