IUT_Informatique/letu
Archived
1
0
Fork 0
Code Activity

Finish student marks page

Browse source
This commit is contained in:
Ethanell 2021-01-17 11:48:14 +01:00
parent 8df93cb052
commit 5c2747b149
9 changed files with 177 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
models/UE.js
View file

@ -6,6 +6,7 @@ module.exports = (sequelize, DataTypes) => {
class UE extends Model { class UE extends Model {
static associate(models) { static associate(models) {
UE.hasMany(models.Event); UE.hasMany(models.Event);
UE.hasMany(models.Evaluation);
UE.belongsToMany(models.User, {through: "UEUser"}); UE.belongsToMany(models.User, {through: "UEUser"});
} }
} }

89
public/javascripts/marks.js
View file

@ -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=>{ let grades = [];
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;
}
})
document.addEventListener("DOMContentLoaded", () => socket.emit("gradeGet"));
detailsBackground.addEventListener("click", invisible);
function setVisible(targetId) { socket.on("gradeGet", data=>{
socket.emit("marksDetails", { for (let grade of data)
"dsId": targetId grades.push(grade);
updateGrades()
}); });
document.getElementById("notvisible").id = "visible";
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 setNotVisible(targetId) { function gradeResume(grade) {
document.getElementById(targetId).id = "notvisible"; 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) { function visible() {
document.getElementById("marksform").style.display = "block"; details.classList.remove("invisible");
detailsBackground.classList.remove("invisible");
}
function invisible() {
details.classList.add("invisible");
detailsBackground.classList.add("invisible");
} }

102
sass/style.sass
View file

@ -248,44 +248,15 @@ h3
text-align: left text-align: left
#marks #marksrow
table padding: 20px 70px
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
.marksdetails
display: none
z-index: 1 #marksdetails
z-index: 100001
position: fixed position: fixed
left: 40%
top: 20% top: 20%
width: 30%
table table
border-collapse: collapse border-collapse: collapse
border: 1px solid white border: 1px solid white
@ -519,3 +490,64 @@ div#visible + div
#marksform #marksform
display: none 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
sockets/get/gradeGet.js
View file

@ -2,7 +2,7 @@ const models = require("../../models");
module.exports = socket => { module.exports = socket => {
return async (data) => { 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: "TeacherGrade"},
{model: models.User, as: "StudentGrade"}]}; {model: models.User, as: "StudentGrade"}]};

2
views/pages/edt.pug
View file

@ -96,5 +96,5 @@ block content
h3 Week of the 02/11/2020 h3 Week of the 02/11/2020
div(class="col s3") div(class="col s3")
i(class="large material-icons") fast_forward i(class="large material-icons") fast_forward
script(src="/javascripts/edt.js")

4
views/pages/home.pug
View file

@ -1,9 +1,9 @@
extends ../template/navbar extends ../template/navbar
block content block content
h1(id="welcome") Welcome Back Benoit ! h1(id="welcome")="Welcome Back " + session.user.firstName + "!"
div(class="row home") div(class="row home")
if admin === false if !admin
div(class="col s12 m6" id="filactu") div(class="col s12 m6" id="filactu")
div(class="col s10 offset-s1 actuflex") div(class="col s10 offset-s1 actuflex")
div(class="actuhead") div(class="actuhead")

127
views/pages/marks.pug
View file

@ -1,124 +1,45 @@
extends ../template/navbar extends ../template/navbar
block content block content
if student === true if student
div(class="marksdetails" id="notvisible" onclick="setNotVisible(this.getAttribute('id'))") div.row
div#marksdetails.invisible.col.s12.m8.l6.offset-m2.offset-l3
table table
tr tr
th(colspan="2") Details th(colspan="2") Details
tr tr
td(id="dsName") DS 1 td(colspan="2")#dsName
tr tr
td(id="dsMarks") Note : 16 td Node :
td#dsMarks
tr tr
td(id="dsRang") Rang : 10/29 td Commentaire :
tr td#dsComment
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")
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
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") div#marksrow
table div#evaluationTemplate.invisible(class="col s12 m6 l4")
thead p.evaluationName
tr div.grades.flex-container-marks
th(colspan="2") PHP div#gradeTemplate.marksCursorPointer.invisible
tbody p.gradeName
tr p.gradeMark
td(class="marksCursorPointer" onclick="setVisible(this.getAttribute('id'))") p.gradeComment
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") 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#marksdetailsbackground.invisible
div(class="row")
if teacher
div.row
div(class="col s12 m10 offset-m1 marksgroup") div(class="col s12 m10 offset-m1 marksgroup")
h3 Select a group h3 Select a group
div(id="flexgroup") div#flexgroup
p(onclick="marksformChange(this.getAttribute('id'))") G1S1 p(onclick="marksformChange(this.getAttribute('id'))") G1S1
p(onclick="marksformChange(this.getAttribute('id'))") G2S2 p(onclick="marksformChange(this.getAttribute('id'))") G2S2
p(onclick="marksformChange(this.getAttribute('id'))") G3S3 p(onclick="marksformChange(this.getAttribute('id'))") G3S3
form(id="marksform") form#marksform
table(id="markstable") table#markstable
thead thead
tr tr
th Name th Name
@ -187,6 +108,6 @@ block content
input(type="number" value="16") input(type="number" value="16")
td td
input(type="number") input(type="number")
input(id="marksubmit" type="submit" value="Enregistrer") input#marksubmit(type="submit" value="Enregistrer")
script(src="/javascripts/marks.js") script(src="/javascripts/marks.js")

4
views/pages/viescol.pug
View file

@ -28,7 +28,7 @@ block content
div div
div.row div.row
if student === true if student
div.col.s12.m6#absences div.col.s12.m6#absences
div.abshead div.abshead
p Absences p Absences
@ -40,7 +40,7 @@ block content
div.col.s12.m6 div.col.s12.m6
button.abogest Manage your subscriptions button.abogest Manage your subscriptions
if student === false if !student
div.col.s12 div.col.s12
button.abogest Add an absence button.abogest Add an absence

6
views/template/layout.pug
View file

@ -15,9 +15,9 @@ html
meta(name="theme-color" content="#ffffff") meta(name="theme-color" content="#ffffff")
script(src="/socket.io/socket.io.js") script(src="/socket.io/socket.io.js")
body body
- var student = true - var student = true;
- var teacher = false - var teacher = false;
- var admin = false - var admin = false;
div(class="row" id="page") div(class="row" id="page")
block navbar block navbar
div(class="col s12" id="main") div(class="col s12" id="main")