Finish student marks page
This commit is contained in:
parent
8df93cb052
commit
5c2747b149
9 changed files with 177 additions and 174 deletions
|
@ -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"});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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");
|
||||
}
|
||||
|
|
102
sass/style.sass
102
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
|
||||
|
|
|
@ -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"}]};
|
||||
|
||||
|
|
|
@ -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")
|
||||
|
||||
|
|
|
@ -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")
|
||||
|
|
|
@ -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")
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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")
|
||||
|
|
Reference in a new issue