Basic monitoring OK (sockets non-functional atm)

[qomet.git] / views / monitor.pug

diff --git a/views/monitor.pug b/views/monitor.pug
index 5a64e89..339ca47 100644 (file)
--- a/views/monitor.pug
+++ b/views/monitor.pug
@@ -1,15 +1,10 @@
 extends withQuestions
 
-       //TODO: step 1: ask password (client side, store hash)
-       // step 2: when got hash, send request (with hash) to get monitoring page:
-       //   array with results + quiz details (displayed in another tab) + init socket (with hash too)
-       //   buttons "start quiz" and "stop quiz" for teacher only: trigger actions (impacting sockets)
-
-       // TODO: data = papers (modified after socket messages + retrived at start)
-       // But get examName by server at loading
+block append stylesheets
+       link(rel="stylesheet" href="/stylesheets/monitor.css")
 
 block content
-       .container#assessment
+       .container#monitor
                .row
                        .col.s12.m10.offset-m1.l8.offset-l2.xl6.offset-xl3
                                h4= examName
@@ -20,15 +15,43 @@ block content
                                                        input#password(type="password" v-model="password" @keyup.enter="startMonitoring()")
                                                button.waves-effect.waves-light.btn(@click="startMonitoring()") Send
                                #stage1(v-show="stage==1")
-                                       .card
-                                               .introduction(v-html="assessment.introduction")
-                                       .card
-                                               statements(:questions="assessment.questions" :answers:"answers")
-                                       .card
-                                               .conclusion(v-html="assessment.conclusion")
+                                       button.waves-effect.waves-light.btn(@click="endMonitoring()") Send feedback
+                                       h4.title(@click="toggleDisplay('answers')") Anwers
+                                       // TODO: aussi afficher stats, permettre tri par colonnes
+                                       .card(v-show="display=='answers'")
+                                               ul.tabs.tabs-fixed-width
+                                                       li.tab
+                                                               a(href="#group0") All
+                                                       li.tab(v-for="group in groupList()")
+                                                               a(:href="groupId(group,'#')") G.{{ group }}
+                                               table(:id="groupId(group)" v-for="group in [0].concat(groupList())")
+                                                       thead
+                                                               tr
+                                                                       th Forename
+                                                                       th Name
+                                                                       th(v-for="(q,i) in assessment.questions") Q.{{ (i+1) }}
+                                                       tbody
+                                                               tr.assessment(v-for="s in studentList(group)")
+                                                                       td {{ s.forename }}
+                                                                       td {{ 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
+                                       div(v-show="display=='assessment'")
+                                               .card
+                                                       .introduction(v-html="assessment.introduction")
+                                               .card
+                                                       statements(:questions="assessment.questions" :answers="answers")
+                                               .card
+                                                       .conclusion(v-html="assessment.conclusion")
 
 block append javascripts
        script.
+               const examName = "#{examName}";
+               const courseCode = "#{courseCode}";
+               const initials = "#{initials}";
                const monitoring = true;
+       script(src="/javascripts/utils/libsRefresh.js")
        script(src="/javascripts/components/statements.js")
+       script(src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js")
+       script(src="/javascripts/utils/sha1.js")
        script(src="/javascripts/monitor.js")