From dcee100c8ab7361eec71533958a9fbf55b271269 Mon Sep 17 00:00:00 2001 From: flifloo Date: Wed, 20 Jan 2021 22:04:59 +0100 Subject: [PATCH] Finish student edt page --- agenda/worker.js | 4 +- public/javascripts/edt.js | 88 ++++++++++++++++++++++++++++++ sass/style.sass | 17 ++++-- sockets/get/agendaGet.js | 18 ++++--- views/pages/edt.pug | 110 +++++++++----------------------------- views/pages/marks.pug | 22 ++++---- 6 files changed, 152 insertions(+), 107 deletions(-) create mode 100644 public/javascripts/edt.js diff --git a/agenda/worker.js b/agenda/worker.js index 366dc31..160f2d8 100644 --- a/agenda/worker.js +++ b/agenda/worker.js @@ -2,7 +2,7 @@ const https = require("https"); const config = require("worker_threads").workerData; const models = require("../models"); -const reg_event = /(?:(?:BEGIN:VEVENT\nDTSTAMP:(?:[A-Z0-9]*?)\nDTSTART:([A-Z0-9]*?)\nDTEND:([A-Z0-9]*?)\nSUMMARY: {0,}([a-zéèàA-Z0-9-. \, \\/ô]*?)\nLOCATION:([a-zA-Zéèà0-9-. \,\\]*?)\nDESCRIPTION:(?:\\n){0,}((?:(?:LP(?:[ a-zA-Z0-9\\]*?))\\n){1,})((?:(?:[A-Z]*) (?:[A-Z]*)(?: (?:[A-Z]*)){0,}\\n){0,})(?:.*?)\nEND:VEVENT)|(?:BEGIN:VEVENT\nDTSTAMP:(?:[A-Z0-9]*?)\nDTSTART:([A-Z0-9]*?)\nDTEND:([A-Z0-9]*?)\nSUMMARY: {0,}((?:S(?:[A-Z0-9-]*)|M(?:[A-Z0-9-]*)(?:\/M(?:[A-Z0-9-]*)){0,}|Conférence)[a-zéèàA-Z0-9-. \, \\/]*?)\nLOCATION:([a-zA-Zéèà0-9-. \,\\]*?)\nDESCRIPTION:(?:\\n){0,}((?:(?:G[0-9]S[0-9]|S[0-9]|ASPE)\\n){0,})((?:(?:[A-Z]*) (?:[A-Z]*)(?: (?:[A-Z]*)){0,}\\n){0,})(?:.*?)\nEND:VEVENT))/gs; +const reg_event = /(?:(?:BEGIN:VEVENT\nDTSTAMP:(?:[A-Z0-9]*?)\nDTSTART:([A-Z0-9]*?)\nDTEND:([A-Z0-9]*?)\nSUMMARY: {0,}([a-zéèàA-Z0-9-. \, \\/ô]*?)\nLOCATION:([a-zA-Zéèà0-9-. \,\\]*?)\nDESCRIPTION:(?:\\n){0,}((?:(?:LP(?:[ a-zA-Z0-9\\]*?))\\n){1,})((?:(?:[A-Z]*) (?:[A-Z]*)(?: (?:[A-Z]*)){0,}\\n){0,})(?:.*?)\nEND:VEVENT)|(?:BEGIN:VEVENT\nDTSTAMP:(?:[A-Z0-9]*?)\nDTSTART:([A-Z0-9]*?)\nDTEND:([A-Z0-9]*?)\nSUMMARY: {0,}((?:S(?:[A-Z0-9-]*)|M(?:[A-Z0-9-]*)(?:\/M(?:[A-Z0-9-]*)){0,}|Conférence|)[a-zéèàA-Z0-9-. \, \\/]*?)\nLOCATION:([a-zA-Zéèà0-9-. \,\\]*?)\nDESCRIPTION:(?:\\n){0,}((?:(?:G[0-9]S[0-9]|S[0-9]|ASPE)\\n){0,})((?:(?:[A-Z]*) (?:[A-Z]*)(?: (?:[A-Z]*)){0,}\\n){0,})(?:.*?)\nEND:VEVENT))/gs; const reg_location = /((?:[SH0-9][0-9]{2})|(?:(?:Préfa |Amphi)[0-9]))/g; const reg_teachers = /^(?:((?:[a-zA-Z]*[ -]{0,}){0,}) ([a-zA-Z]*))$/m; const reg_date = /([0-9]{4})([0-9]{2})([0-9]{2})T([0-9]{2})([0-9]{2})([0-9]{2})Z/; @@ -151,7 +151,7 @@ function compareSemesters(list1, list2) { } async function updateDatabase() { - let events = await fetchEvents(365, new Date(2020, 9, 1)); + let events = await fetchEvents(365, new Date(2020, 8, 1)); for (let event of await models.Event.findAll({ include: [{ model: models.Group, diff --git a/public/javascripts/edt.js b/public/javascripts/edt.js new file mode 100644 index 0000000..ac50335 --- /dev/null +++ b/public/javascripts/edt.js @@ -0,0 +1,88 @@ +const socket = io.connect(); +const date = document.getElementById("date"); +const details = document.getElementById("details"); +const marksdetailsbackground = document.getElementById("marksdetailsbackground"); +const events = {}; +let p = 0; + +socket.on("agendaGet", data => { + document.querySelectorAll(".eventName, .eventLocation").forEach(p => { + // Clear + p.innerHTML = ""; + // Mr Propre + }); + document.querySelectorAll("td").forEach(td => td.dataset.id = undefined); + /* Populate that shit */ + data.forEach(event => { + let day = new Date(event.startDate); + let x = day.getDay()-1; + let y = day.getHours(); + if (y >= 8 && y < 10) + y = 0; + else if (y >= 10 && y < 12) + y = 1; + else if (y >= 12 && y < 14) + y = 2; + else if (y >= 14 && y < 16) + y = 3; + else if (y >= 16 && y < 18) + y = 4; + else + y = null; + if (y != null) { + let el = document.getElementById(`${y}${x}`); + el.dataset.id = event.id; + el.querySelector(".eventName").innerHTML = event.name; + el.querySelector(".eventLocation").innerHTML = event.locations; + } + events[event.id] = event; + }); +}); + +function update() { + let startDate = new Date(); + let endDate = new Date(); + startDate.setHours(0, 0, 0, 0); + endDate.setHours(0, 0, 0, 0); + startDate.setDate((startDate.getDate()-startDate.getDay()+1)+(p*7)); + endDate.setDate((endDate.getDate()+(7-endDate.getDay()))+(p*7)); + socket.emit("agendaGet", { groups: groups.map(g => g.id), startDate: startDate, endDate: endDate}); + date.innerHTML = "Week of the " + startDate.toISOString().slice(0, 10); +} + +function detail(id) { + let e = events[document.getElementById(id).dataset.id]; + if (e) { + details.querySelector(".eventName").innerHTML = e.name; + details.querySelector(".eventLocation").innerHTML = e.locations; + details.querySelector(".eventTeacher").innerHTML = e.Users.map(u => u.firstName + " " + u.lastName).join(" - "); + details.querySelector(".eventTarget").innerHTML = e.Groups.map(g => g.displayName).concat(e.Semesters.map(s => s.name)).join(" - "); + details.querySelector(".eventTime").innerHTML = new Date(e.startDate).toTimeString().slice(0, 5) + " " + new Date(e.endDate).toTimeString().slice(0, 5); + details.querySelector(".eventUE").innerHTML = e.UE ? e.UE.name : ""; + details.classList.remove("invisible"); + marksdetailsbackground.classList.remove("invisible"); + } +} + +document.addEventListener("DOMContentLoaded", () => { + update() +}); + +document.getElementById("previous").addEventListener("click", () => { + p--; + update(); +}); + +document.getElementById("next").addEventListener("click", () => { + p++; + update(); +}); + +document.querySelectorAll("td").forEach(td => { + td.addEventListener("click", () => detail(td.id)) +}); + +marksdetailsbackground.addEventListener("click", () => { + details.classList.add("invisible"); + marksdetailsbackground.classList.add("invisible"); +}) diff --git a/sass/style.sass b/sass/style.sass index b3f1326..c8077a3 100644 --- a/sass/style.sass +++ b/sass/style.sass @@ -210,7 +210,6 @@ h3 margin-right: auto .midi td - height: 10vh cursor: auto th background-color: $secondary @@ -234,6 +233,7 @@ h3 padding: 0 border-radius: 0 border: 1px solid black + height: 10vh p margin: 10px td:nth-child(even) @@ -253,7 +253,7 @@ h3 -#marksdetails +#marksdetails, #details z-index: 100001 position: fixed top: 20% @@ -456,7 +456,6 @@ div#visible + div .detailsedt z-index: 1 - display: none position: fixed top: 20vh left: 30% @@ -546,3 +545,15 @@ div#visible + div background-color: #e65100 .marks-4 background-color: #bf360c + +#formteachermarks + padding: 50px + margin: 30px + padding-top: 0 + margin-top: 10px + label + color: white + input + color: white + h1 + font-size: 30px \ No newline at end of file diff --git a/sockets/get/agendaGet.js b/sockets/get/agendaGet.js index 8472920..5c5ba5f 100644 --- a/sockets/get/agendaGet.js +++ b/sockets/get/agendaGet.js @@ -5,10 +5,12 @@ function addWhere(options, index, attr, value) { if (!options.include[index].where) options.include[index].where = {}; if (!options.include[index].where[attr]) - options.include[index].where[attr] = {}; - if (!options.include[index].where[attr][models.Sequelize.Op.or]) - options.include[index].where[attr][models.Sequelize.Op.or] = []; - options.include[index].where[attr][models.Sequelize.Op.or].push(value); + options.include[index].where[attr] = value; + else { + if (options.include[index].where[attr] !== [models.Sequelize.Op.in]) + options.include[index].where[attr] = {[models.Sequelize.Op.in]: [options.include[index].where[attr]]}; + options.include[index].where[attr][models.Sequelize.Op.in].push(value); + } options.include[index].require = true; } @@ -22,10 +24,10 @@ module.exports = socket => { {model: models.Semester, include: models.Group} ] }; - if (data && data.startDate) - options.where.startDate = data.startDate; - if (data && data.endDate) - options.where.endDate = data.endDate; + + if (data && data.startDate && data.endDate) + options.where = {startDate: {[models.Sequelize.Op.between]: [data.startDate, data.endDate]}, endDate: {[models.Sequelize.Op.between]: [data.startDate, data.endDate]}}; + if (data && data.semesters) { for (let semester of data.semesters) { let s = await models.Semester.findByPk(semester); diff --git a/views/pages/edt.pug b/views/pages/edt.pug index ef4f5e4..9e137fe 100644 --- a/views/pages/edt.pug +++ b/views/pages/edt.pug @@ -1,100 +1,40 @@ extends ../template/navbar block content - - let variable = [{name:"",ue:{id:0,name:""},teachers:[{id:0,firstName:"",lastName:""}],location:[""],dateStart:Date,dateEnd:Date,group:{id:0,number:0,promotion:{id:0,name:""}},promotion:{id:0,name:""}}]; - div.detailsedt#visibl - p Maths - p S26 - p Mr. Jaloux - p G4S3 - p 08h à 10h - p UE------------ + div#details.detailsedt.invisible + p.eventName + p.eventLocation + p.eventTeacher + p.eventTarget + p.eventTime + p.eventUE div - table(id="edttable") - tr + table#edttable + thead th Monday th Tuesday th Wednesday th Thursday th Friday - tr - td - p Maths - p S26 - td - p Maths - p S26 - td - p Maths - p S26 - td - p Maths - p S26 - td - p Maths - p S26 - tr - td - p Maths - p S26 - td - p Maths - p S26 - td - p Maths - p S26 - td - p Maths - p S26 - td - p Maths - p S26 - tr(class="midi") - td - td - td - td - td - tr - td - p Maths - p S26 - td - p Maths - p S26 - td - p Maths - p S26 - td - p Maths - p S26 - td - p Maths - p S26 - tr - td - p Maths - p S26 - td - p Maths - p S26 - td - p Maths - p S26 - td - p Maths - p S26 - td - p Maths - p S26 + tbody + - for (let i = 0; i < 5; i++) + tr + - for (let j = 0; j < 5; j++) + td(id=`${i}${j}`) + p.eventName + p.eventLocation - div(class="row" id="edtweek") + div#edtweek.row div(class="col s3 offset-s1") - i(class="large material-icons") fast_rewind + i#previous(class="large material-icons") fast_rewind div(class="col s4") - h3 Week of the 02/11/2020 + h3#date div(class="col s3") - i(class="large material-icons") fast_forward - script(src="/javascripts/edt.js") + i#next(class="large material-icons") fast_forward + div#marksdetailsbackground.invisible + script#removeMe. + let groups = !{JSON.stringify(session.user.Groups)}; + document.getElementById("removeMe").remove(); + script(src="/javascripts/edt.js") diff --git a/views/pages/marks.pug b/views/pages/marks.pug index de0beb2..024b77d 100644 --- a/views/pages/marks.pug +++ b/views/pages/marks.pug @@ -31,15 +31,19 @@ block content script(src="/javascripts/marks-student.js") else - form - label(for="group") Group: - select#group(name="group") - option(selected disabled) - for group in session.user.Groups - option(value=group.id)=group.displayName - label(for="evaluation") - select#evaluation(name="evaluation") - option(selected disabled) + form.row#formteachermarks + h1 Select a group and an evaluation + div.input-field.col.s12.m6 + label(for="group") Group: + select#group(name="group") + option(selected disabled) + for group in session.user.Groups + option(value=group.id)=group.displayName + + div.input-field.col.s12.m6 + label(for="evaluation") Evaluation : + select#evaluation(name="evaluation") + option(selected disabled) form#marksform table#markstable