From: Benjamin Auder Date: Tue, 13 Feb 2018 11:23:16 +0000 (+0100) Subject: Fix monitoring presence (TODO: weird Vue syntax...) X-Git-Url: https://git.auder.net/%7B%7B%20asset%28%27mixstore/css/DESCRIPTION?a=commitdiff_plain;h=f87ac54a07e9cc63a28b8eae42fa6ab23ac626d0;p=qomet.git Fix monitoring presence (TODO: weird Vue syntax...) --- diff --git a/public/javascripts/monitor.js b/public/javascripts/monitor.js index b5a0fe4..6ee6a41 100644 --- a/public/javascripts/monitor.js +++ b/public/javascripts/monitor.js @@ -42,15 +42,17 @@ new Vue({ groupId: function(group, prefix) { return (prefix || "") + "group" + group; }, - togglePresence: function(s) { - s.present = !s.present; + togglePresence: function(student) { + const sIdx = this.students.findIndex( s => { return s.number == student.number; }); + Vue.set( this.students, sIdx, Object.assign({},student,{present:!student.present}) ); + //s.present = !s.present; }, allFinished: function() { for (s of this.students) { if (!s.present) continue; - const paperIdx = this.assessment.papers.findIndex( item => { return item.number == number; }); + const paperIdx = this.assessment.papers.findIndex( item => { return item.number == s.number; }); if (paperIdx === -1) return false; const paper = this.assessment.papers[paperIdx]; diff --git a/public/stylesheets/monitor.css b/public/stylesheets/monitor.css index 20406b3..b22b317 100644 --- a/public/stylesheets/monitor.css +++ b/public/stylesheets/monitor.css @@ -52,3 +52,8 @@ table.in-question th, table.in-question td { /*table { border: none; border-collapse: collapse; }*/ table.in-question td { border-left: 1px solid grey; } table.in-question td:first-child { border-left: none; } + +.absent { + opacity: 0.5; + background-color: lightgrey; +} diff --git a/views/monitor.pug b/views/monitor.pug index 00bf476..b3da2d6 100644 --- a/views/monitor.pug +++ b/views/monitor.pug @@ -30,7 +30,7 @@ block content th Name th(v-for="(q,i) in assessment.questions") Q.{{ (i+1) }} tbody - tr.assessment(v-for="s in studentList(group)") + tr.assessment(v-for="s in studentList(group)" :class="{absent:!s.present}") td(:class="{blur:!!s.blur,resize:!!s.resize,disconnect:!!s.disco}" @click="togglePresence(s)") {{ s.name }} td(v-for="(q,i) in assessment.questions" :style="{backgroundColor: getColor(s.number,i)}" @click="seeDetails(s.number,i)")   h4.title(@click="toggleDisplay('assessment')") Assessment