From 5c2747b149a7a814de9c568f2983bf61add5e9b1 Mon Sep 17 00:00:00 2001 From: flifloo Date: Sun, 17 Jan 2021 11:48:14 +0100 Subject: [PATCH] Finish student marks page --- models/UE.js | 1 + public/javascripts/marks.js | 93 ++++++++++++++++++------ sass/style.sass | 102 ++++++++++++++++++--------- sockets/get/gradeGet.js | 2 +- views/pages/edt.pug | 2 +- views/pages/home.pug | 4 +- views/pages/marks.pug | 137 ++++++++---------------------------- views/pages/viescol.pug | 4 +- views/template/layout.pug | 6 +- 9 files changed, 177 insertions(+), 174 deletions(-) diff --git a/models/UE.js b/models/UE.js index acda65b..7e2f5ce 100644 --- a/models/UE.js +++ b/models/UE.js @@ -6,6 +6,7 @@ module.exports = (sequelize, DataTypes) => { class UE extends Model { static associate(models) { UE.hasMany(models.Event); + UE.hasMany(models.Evaluation); UE.belongsToMany(models.User, {through: "UEUser"}); } } diff --git a/public/javascripts/marks.js b/public/javascripts/marks.js index 29351cf..f4f4050 100644 --- a/public/javascripts/marks.js +++ b/public/javascripts/marks.js @@ -1,29 +1,78 @@ -let socket = io.connect(); +const socket = io.connect(); +const marks = document.getElementById("marksrow"); +const evaluationTemplate = marks.querySelector("#evaluationTemplate"); +const gradeTemplate = marks.querySelector("#gradeTemplate"); +const details = document.getElementById("marksdetails"); +const detailsBackground = document.getElementById("marksdetailsbackground"); -socket.on("marksDetails", data=>{ - if(data.error){ - alert(data.error.message); - }else{ - document.getElementById("dsName").value = data.dsName; - document.getElementById("dsMarks").value = data.dsMarks; - document.getElementById("dsRang").value = data.dsRang; - document.getElementById("dsCoeff").value = data.dsCoeff; - document.getElementById("dsMoy").value = data.dsMoy; +let grades = []; + +document.addEventListener("DOMContentLoaded", () => socket.emit("gradeGet")); +detailsBackground.addEventListener("click", invisible); + +socket.on("gradeGet", data=>{ + for (let grade of data) + grades.push(grade); + updateGrades() +}); + + +function updateGrades() { + for (let grade of grades) { + let e = document.getElementById("UE"+grade.Evaluation.UE.id); + if (!e) { + let temp = evaluationTemplate.cloneNode(true); + temp.querySelector(".evaluationName").innerHTML = grade.Evaluation.UE.name; + temp.id = "UE"+grade.Evaluation.UE.id; + temp.classList.remove("invisible"); + temp = marks.insertAdjacentElement("beforeend", temp); + e = temp; + } + let g = gradeTemplate.cloneNode(true); + g.querySelector(".gradeName").innerHTML = grade.Evaluation.name; + g.querySelector(".gradeMark").innerHTML = grade.score + "/" + grade.limit; + g.querySelector(".gradeComment").innerHTML = grade.comment ? grade.comment : ""; + g.id = "Grade"+grade.Evaluation.id; + g.classList.remove("invisible"); + let score = grade.score; + if (grade.limit != 20) + score = (20/grade.limit)*grade.score; + if (score < 4) + g.classList.add("marks-4"); + else if (score < 6) + g.classList.add("marks-6"); + else if (score < 8) + g.classList.add("marks-8"); + else if (score < 10) + g.classList.add("marks-10"); + else if (score < 12) + g.classList.add("marks-12"); + else if (score < 14) + g.classList.add("marks-14"); + else if (score < 16) + g.classList.add("marks-16"); + else if (score < 18) + g.classList.add("marks-18"); + else if (score < 20) + g.classList.add("marks-20"); + g.addEventListener("click", () => gradeResume(grade)); + e.querySelector(".grades").insertAdjacentElement("beforeend", g); } -}) - - -function setVisible(targetId) { - socket.emit("marksDetails", { - "dsId": targetId - }); - document.getElementById("notvisible").id = "visible"; } -function setNotVisible(targetId) { - document.getElementById(targetId).id = "notvisible"; +function gradeResume(grade) { + details.querySelector("#dsName").innerHTML = grade.Evaluation.name; + details.querySelector("#dsMarks").innerHTML = grade.score + "/" + grade.limit; + details.querySelector("#dsComment").innerHTML = grade.comment ? grade.comment : ""; + visible(); } -function marksformChange(targetId) { - document.getElementById("marksform").style.display = "block"; +function visible() { + details.classList.remove("invisible"); + detailsBackground.classList.remove("invisible"); +} + +function invisible() { + details.classList.add("invisible"); + detailsBackground.classList.add("invisible"); } diff --git a/sass/style.sass b/sass/style.sass index eab44b6..3b7b30c 100644 --- a/sass/style.sass +++ b/sass/style.sass @@ -248,44 +248,15 @@ h3 text-align: left -#marks - table - border: 1px solid white - margin-top: 80px - width: 80% - margin-left: auto - margin-right: auto - table-layout: fixed - border-collapse: collapse - tbody - display: block - height: 194px - overflow: auto - thead, tbody tr - display: table - width: 100% - table-layout: fixed - th - border: 1px solid white - background-color: $secondary - text-align: center - font-size: 22px - td - font-size: 18px - cursor: pointer - padding: 0 - text-align: center - background-color: $dark2 - border-radius: 0 - border: 1px solid $medium +#marksrow + padding: 20px 70px -.marksdetails - display: none - z-index: 1 + + +#marksdetails + z-index: 100001 position: fixed - left: 40% top: 20% - width: 30% table border-collapse: collapse border: 1px solid white @@ -519,3 +490,64 @@ div#visible + div #marksform display: none + +.grades + border: 2px solid white + height: 202px + overflow-y: auto + + +.evaluationName + border: 2px solid white + margin-top: 50px + border-bottom: none + background-color: $secondary + padding: 20px + margin-left: 0 + margin-right: 0 + margin-bottom: 0 + font-size: 30px + text-align: center + z-index: 0 + +.marksCursorPointer + width: 50% + border: 1px solid black + color: black + +.flex-container-marks + display: flex + flex-direction: row + flex-wrap: wrap + div + text-align: center + font-size: 15px + padding: 10px + +#marksdetailsbackground + z-index: 100000 + position: fixed + top: 0 + left: 0 + width: 100% + height: 500vh + background-color: rgba(0,0,0,0.5) + +.marks-20 + background-color: #00ff00 +.marks-18 + background-color: #40cf49 +.marks-16 + background-color: #8dd992 +.marks-14 + background-color: #b9f6ca +.marks-12 + background-color: #fff9c4 +.marks-10 + background-color: #ffb74d +.marks-8 + background-color: #f57c00 +.marks-6 + background-color: #e65100 +.marks-4 + background-color: #bf360c diff --git a/sockets/get/gradeGet.js b/sockets/get/gradeGet.js index f0a1174..b61dbb9 100644 --- a/sockets/get/gradeGet.js +++ b/sockets/get/gradeGet.js @@ -2,7 +2,7 @@ const models = require("../../models"); module.exports = socket => { return async (data) => { - const options = {where: {}, include: [models.Evaluation, + const options = {where: {}, include: [{model: models.Evaluation, include: {model: models.UE}}, {model: models.User, as: "TeacherGrade"}, {model: models.User, as: "StudentGrade"}]}; diff --git a/views/pages/edt.pug b/views/pages/edt.pug index 028d26c..ef4f5e4 100644 --- a/views/pages/edt.pug +++ b/views/pages/edt.pug @@ -96,5 +96,5 @@ block content h3 Week of the 02/11/2020 div(class="col s3") i(class="large material-icons") fast_forward - + script(src="/javascripts/edt.js") diff --git a/views/pages/home.pug b/views/pages/home.pug index 98c4c47..4088a8a 100644 --- a/views/pages/home.pug +++ b/views/pages/home.pug @@ -1,9 +1,9 @@ extends ../template/navbar block content - h1(id="welcome") Welcome Back Benoit ! + h1(id="welcome")="Welcome Back " + session.user.firstName + "!" div(class="row home") - if admin === false + if !admin div(class="col s12 m6" id="filactu") div(class="col s10 offset-s1 actuflex") div(class="actuhead") diff --git a/views/pages/marks.pug b/views/pages/marks.pug index 87ec5ba..d6a4efb 100644 --- a/views/pages/marks.pug +++ b/views/pages/marks.pug @@ -1,124 +1,45 @@ extends ../template/navbar block content - if student === true - div(class="marksdetails" id="notvisible" onclick="setNotVisible(this.getAttribute('id'))") - table - tr - th(colspan="2") Details - tr - td(id="dsName") DS 1 - tr - td(id="dsMarks") Note : 16 - tr - td(id="dsRang") Rang : 10/29 - tr - td(id="dsCoeff") Coeff : 1.5 - tr - td(id="dsMoy") Moyenne de classe : 12 - div(class="row" id="marks") - div(class="col s12 m6 l4") + if student + div.row + div#marksdetails.invisible.col.s12.m8.l6.offset-m2.offset-l3 table - thead - tr - th(colspan="2") Maths - tbody - tr - td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") - p DS 1 - p 18/20 - td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") - p DS 2 - p 16/20 - tr - td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") - p DS 1 - p 18/20 - td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") - p DS 2 - p 16/20 - tr - td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") - p DS 1 - p 18/20 - td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") - p DS 2 - p 16/20 + tr + th(colspan="2") Details + tr + td(colspan="2")#dsName + tr + td Node : + td#dsMarks + tr + td Commentaire : + td#dsComment - div(class="col s12 m6 l4") - table - thead - tr - th(colspan="2") TP SE - tbody - tr - td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") - p DS 1 - p 18/20 - td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") - p DS 2 - p 16/20 - tr - td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") - p DS 1 - p 18/20 - td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") - p DS 2 - p 16/20 - div(class="col s12 m6 l4") - table - thead - tr - th(colspan="2") PHP - tbody - tr - td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") - p DS 1 - p 18/20 - td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") - p DS 2 - p 16/20 - tr - td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") - p DS 1 - p 18/20 - td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") - p DS 2 - p 16/20 + div#marksrow + div#evaluationTemplate.invisible(class="col s12 m6 l4") + p.evaluationName + div.grades.flex-container-marks + div#gradeTemplate.marksCursorPointer.invisible + p.gradeName + p.gradeMark + p.gradeComment - div(class="col s12 m6 l4") - table - thead - tr - th(colspan="2") Anglais - tbody - tr - td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") - p DS 1 - p 18/20 - td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") - p DS 2 - p 16/20 - tr - td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") - p DS 1 - p 18/20 - td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") - p DS 2 - p 16/20 - if teacher === true - div(class="row") + div#marksdetailsbackground.invisible + + if teacher + div.row div(class="col s12 m10 offset-m1 marksgroup") h3 Select a group - div(id="flexgroup") + div#flexgroup p(onclick="marksformChange(this.getAttribute('id'))") G1S1 p(onclick="marksformChange(this.getAttribute('id'))") G2S2 p(onclick="marksformChange(this.getAttribute('id'))") G3S3 - form(id="marksform") - table(id="markstable") + form#marksform + table#markstable thead tr th Name @@ -187,6 +108,6 @@ block content input(type="number" value="16") td input(type="number") - input(id="marksubmit" type="submit" value="Enregistrer") + input#marksubmit(type="submit" value="Enregistrer") script(src="/javascripts/marks.js") \ No newline at end of file diff --git a/views/pages/viescol.pug b/views/pages/viescol.pug index ffc10ed..9ecdbaf 100644 --- a/views/pages/viescol.pug +++ b/views/pages/viescol.pug @@ -28,7 +28,7 @@ block content div div.row - if student === true + if student div.col.s12.m6#absences div.abshead p Absences @@ -40,7 +40,7 @@ block content div.col.s12.m6 button.abogest Manage your subscriptions - if student === false + if !student div.col.s12 button.abogest Add an absence diff --git a/views/template/layout.pug b/views/template/layout.pug index 1a421a8..0392ab6 100644 --- a/views/template/layout.pug +++ b/views/template/layout.pug @@ -15,9 +15,9 @@ html meta(name="theme-color" content="#ffffff") script(src="/socket.io/socket.io.js") body - - var student = true - - var teacher = false - - var admin = false + - var student = true; + - var teacher = false; + - var admin = false; div(class="row" id="page") block navbar div(class="col s12" id="main")