views/monitor.pug

   1 extends withQuestions
   2
   3 block append stylesheets
   4     link(rel="stylesheet" href="/stylesheets/statements.css")
   5     link(rel="stylesheet" href="/stylesheets/monitor.css")
   6
   7 block content
   8     .container#monitor
   9         .row
  10             .col.s12.m10.offset-m1
  11                 h4= examName
  12                 #stage0(v-show="stage==0")
  13                     .card
  14                         .input-field.inline.on-left
  15                             label(for="password") Password
  16                             input#password(type="password" v-model="password" @keyup.enter="startMonitoring()")
  17                         button.waves-effect.waves-light.btn(@click="startMonitoring()") Send
  18                 #stage1(v-show="stage==1")
  19                     button.waves-effect.waves-light.btn(@click="endMonitoring()" :disabled="!allFinished()") Send feedback
  20                     h4.title(@click="toggleDisplay('answers')") Anwers
  21                     // TODO: aussi afficher stats, permettre tri par colonnes
  22                     .card(v-show="display=='answers'")
  23                         ul.tabs.tabs-fixed-width
  24                             li.tab
  25                                 a(href="#group0") All
  26                             li.tab(v-for="group in groupList()")
  27                                 a(:href="groupId(group,'#')") G.{{ group }}
  28                         table(:id="groupId(group)" v-for="group in [0].concat(groupList())")
  29                             thead
  30                                 tr
  31                                     th Name
  32                                     th(v-for="(q,i) in evaluation.questions") Q.{{ (i+1) }}
  33                             tbody
  34                                 tr.evaluation(v-for="s in studentList(group)" :class="{absent:!s.present}")
  35                                     td(:class="{blur:!!s.blur,resize:!!s.resize,disconnect:!!s.disco}" @click="togglePresence(s)") {{ s.name }}
  36                                     td(v-for="(q,i) in evaluation.questions" :style="{backgroundColor: getColor(s.number,i)}" @click="seeDetails(s.number,i)") &nbsp;
  37                     h4.title(@click="toggleDisplay('evaluation')") evaluation
  38                     div(v-show="display=='evaluation'")
  39                         .card
  40                             .introduction(v-html="evaluation.introduction")
  41                         .card
  42                             statements(:questions="evaluation.questions" :answers="answers")
  43
  44 block append javascripts
  45     script.
  46         const examName = "#{examName}";
  47         const courseCode = "#{courseCode}";
  48         const initials = "#{initials}";
  49         const monitoring = true;
  50     script(src="/javascripts/utils/libsRefresh.js")
  51     script(src="/javascripts/components/statements.js")
  52     script(src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js")
  53     script(src="/javascripts/utils/sha1.js")
  54     script(src="/javascripts/monitor.js")