Allow polls for restricted group of participants

Author: martenrichter

src/socket/interface.js

@@ -149,6 +149,9 @@ export class SocketInterface {
         this.decodedtoken = event.data.decodedToken
         this.updateUserHash()
         break
+      case 'setUserhash': // Note this is a network userhash, and not a device userhash
+        this.networkUserhash = event.data.userhash
+        break
       case 'idinform':
         if (event.data.id) this.id = event.data.id
         break
@@ -197,6 +200,10 @@ export class SocketInterface {
     return this.userhash
   }
 
+  getNetworkUserHash() {
+    return this.networkUserhash
+  }
+
   onMessageError(event) {}
 
   onError(event) {}

src/socket/worker.js

@@ -422,6 +422,14 @@ class SocketWorker {
       this.scheduleReauthor() // request renewal
     })
 
+    this.socket.on('userhash', (userhash) => {
+      this.userhash = userhash
+      globalThis.postMessage({
+        task: 'setUserhash',
+        userhash
+      })
+    })
+
     const toIden = async (iden, id) => {
       try {
         const toret = {

src/ui/failsboard.jsx

@@ -20,6 +20,7 @@
 import { Button } from 'primereact/button'
 import { Chart } from 'primereact/chart'
 import { Dialog } from 'primereact/dialog'
+import { InputSwitch } from 'primereact/inputswitch'
 import { ListBox } from 'primereact/listbox'
 import { Steps } from 'primereact/steps'
 import { Toast } from 'primereact/toast'
@@ -38,6 +39,8 @@ import Pica from 'pica'
 import ImageBlobReduce from 'image-blob-reduce'
 import { notebookEditPseudoAppid } from './blackboard/jupyterhublet'
 import { maybeUseLatex, convertToLatex } from './misc/latex'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUser } from '@fortawesome/free-solid-svg-icons'
 
 export class FailsBoard extends FailsBasis {
   constructor(props) {
@@ -57,6 +60,7 @@ export class FailsBoard extends FailsBasis {
     this.state.pictIndex = 0
     this.state.availscreens = []
     this.state.welcomeMessageSend = 0
+    this.state.pollLimitedGroup = false
 
     this.availscreensmenu = React.createRef()
 
@@ -82,6 +86,7 @@ export class FailsBoard extends FailsBasis {
     this.blockChat = this.blockChat.bind(this)
     this.allowVideoquestion = this.allowVideoquestion.bind(this)
     this.onStartPoll = this.onStartPoll.bind(this)
+    this.onSelParticipantsPoll = this.onSelParticipantsPoll.bind(this)
     this.onStartSelPoll = this.onStartSelPoll.bind(this)
     this.onFinishSelPoll = this.onFinishSelPoll.bind(this)
     this.ipynbTemplate = this.ipynbTemplate.bind(this)
@@ -201,14 +206,19 @@ export class FailsBoard extends FailsBasis {
         pollsel: undefined,
         pollshowres: false,
         pollvotes: {},
-        pollballots: []
+        pollballots: [],
+        pollparticipantsServer: undefined
       })
     })
 
     notepadsocket.on('finishPoll', (data) => {
       console.log('finishpoll incoming', data)
 
-      this.setState({ polltask: 2, pollsel: undefined })
+      this.setState({
+        polltask: 2,
+        pollsel: undefined,
+        pollparticipantsServer: data.participants
+      })
     })
 
     notepadsocket.on('castvote', (data) => {
@@ -530,13 +540,46 @@ export class FailsBoard extends FailsBasis {
     this.setState({ pollcoll: ret })
   }
 
+  onSelParticipantsPoll() {
+    // if there are no participants set, we set some
+    if (!this.state.pollparticipants) {
+      let pollparticipants = []
+      if (this.state.identobj?.idents) {
+        pollparticipants = this.state.identobj?.idents
+          .filter((el) => el.purpose === 'notes')
+          .map(({ userhash }) => userhash)
+      }
+      this.setState({ polltask: 0.5, pollparticipants })
+      return
+    } else {
+      // we should filter out unavailable userhashes
+      let pollparticipants = []
+      if (this.state.identobj?.idents) {
+        const hashes = this.state.identobj?.idents
+          .filter((el) => el.purpose === 'notes')
+          .map(({ userhash }) => userhash)
+
+        pollparticipants = this.state.pollparticipants.filter((el) =>
+          hashes.includes(el)
+        )
+        this.setState({ polltask: 0.5, pollparticipants })
+        return
+      }
+    }
+    this.setState({ polltask: 0.5 })
+  }
+
   onStartSelPoll() {
     if (!this.state.pollcoll) return
     const polfind = this.state.pollcoll.find(
       (el) => el.id === this.state.pollsel
     )
     this.socket.simpleEmit('startPoll', {
-      poll: polfind
+      poll: polfind,
+      limited: this.state.pollLimitedGroup,
+      participants: this.state.pollLimitedGroup
+        ? this.state.pollparticipants
+        : undefined
     })
   }
 
@@ -664,6 +707,25 @@ export class FailsBoard extends FailsBasis {
     const pollanswers = []
     let numballots = 0
 
+    let pollpotparticipants = []
+    if (this.state.polltask === 0.5) {
+      if (this.state.identobj?.idents) {
+        pollpotparticipants = this.state.identobj?.idents
+          .filter((el) => el.purpose === 'notes')
+          .map(({ displayname, userhash, purpose }) => ({
+            displayname,
+            userhash,
+            purpose
+          }))
+        pollpotparticipants = pollpotparticipants.filter(
+          (el, index) =>
+            pollpotparticipants.findIndex(
+              (el2) => el2.userhash === el.userhash
+            ) === index
+        )
+      }
+    }
+
     if (this.state.polltask === 1 || this.state.polltask === 2) {
       const tpollres = this.calcPollresults()
       const tpolldata = tpollres.data
@@ -705,6 +767,14 @@ export class FailsBoard extends FailsBasis {
       { label: 'Poll' },
       { label: 'Results' }
     ]
+    let pollActiveIndex = this.state.polltask
+    if (this.state.pollLimitedGroup) {
+      pollitems.splice(1, 0, { label: 'Select' })
+      if (pollActiveIndex > 0.5) {
+        pollActiveIndex++
+      }
+      if (pollActiveIndex === 0.5) pollActiveIndex = 1
+    }
     const blackbackground =
       typeof this.state.blackbackground === 'undefined'
         ? true
@@ -886,12 +956,16 @@ export class FailsBoard extends FailsBasis {
         <Dialog
           header='Poll'
           visible={typeof this.state.polltask !== 'undefined'}
-          closable={this.state.polltask === 2 || this.state.polltask === 0}
+          closable={
+            this.state.polltask === 2 ||
+            this.state.polltask === 0 ||
+            this.state.polltask === 0.5
+          }
           onHide={() => {
             this.setState({ polltask: undefined, pollsel: undefined })
           }}
         >
-          <Steps model={pollitems} activeIndex={this.state.polltask} />
+          <Steps model={pollitems} activeIndex={pollActiveIndex} />
           {this.state.polltask === 0 && (
             <React.Fragment>
               <ListBox
@@ -903,12 +977,88 @@ export class FailsBoard extends FailsBasis {
                     (el) => el.children && el.children.length > 1
                   )
                 }
+                style={{
+                  maxHeight: '60vh',
+                  minWidth: '30vw',
+                  overflow: 'auto'
+                }}
                 optionLabel='name'
                 optionValue='id'
                 itemTemplate={this.pollTemplate}
                 onChange={(e) => this.setState({ pollsel: e.value })}
               />
-              {this.state.pollsel && (
+              <div className='p-d-flex p-ai-center'>
+                <InputSwitch
+                  id='switchPollLG'
+                  checked={this.state.pollLimitedGroup}
+                  onChange={(e) => this.setState({ pollLimitedGroup: e.value })}
+                />
+                <div className='p-ml-2'>
+                  <label
+                    htmlFor='limitedGroupSwitch'
+                    className='p-d-block p-text-bold'
+                  >
+                    Limited Group Voting
+                  </label>
+                  {/* p-text-secondary uses the theme's standard muted color */}
+                  <small className='p-text-secondary'>
+                    {this.state.pollLimitedGroup
+                      ? 'Only selected participants.'
+                      : 'All participants.'}
+                  </small>
+                </div>
+              </div>
+              {this.state.pollsel && !this.state.pollLimitedGroup && (
+                <Button
+                  label='Start poll'
+                  icon='pi pi-chart-bar'
+                  className='p-m-2'
+                  onClick={this.onStartSelPoll}
+                />
+              )}
+              {this.state.pollsel && this.state.pollLimitedGroup && (
+                <Button
+                  label='Select participants'
+                  icon='pi pi-id-card'
+                  className='p-m-2'
+                  onClick={this.onSelParticipantsPoll}
+                />
+              )}
+            </React.Fragment>
+          )}
+          {this.state.polltask === 0.5 && (
+            <React.Fragment>
+              <div className='p-d-flex p-ai-center'>
+                <div className='p-mr-2'>
+                  <h3>Select voters</h3>
+                </div>
+              </div>
+              {pollpotparticipants.length === 0 && <b> No voters present!</b>}
+              {pollpotparticipants.length > 0 && (
+                <ListBox
+                  optionLabel='displayname'
+                  optionValue='userhash'
+                  options={pollpotparticipants}
+                  style={{
+                    maxHeight: '60vh',
+                    minHeight: '10vh',
+                    minWidth: '30vw',
+                    overflowY: 'auto'
+                  }}
+                  itemTemplate={(element) => (
+                    <span>
+                      <FontAwesomeIcon icon={faUser} /> {element.displayname}
+                    </span>
+                  )}
+                  multiple
+                  value={this.state.pollparticipants}
+                  onChange={(ev) =>
+                    this.setState({ pollparticipants: ev.value })
+                  }
+                />
+              )}
+              {(this.state.pollparticipants?.length > 0 ||
+                true) /* just for debugging */ && (
                 <Button
                   label='Start poll'
                   icon='pi pi-chart-bar'
@@ -987,7 +1137,10 @@ export class FailsBoard extends FailsBasis {
                           {
                             ballots: this.state.pollballots,
                             poll: this.state.curpoll,
-                            votes: this.state.pollvotes
+                            votes: this.state.pollvotes,
+                            eglibleVoters:
+                              this.state.pollparticipantsServer ||
+                              'unrestricted'
                           },
                           null,
                           2

src/ui/failsnotes.jsx

@@ -130,11 +130,19 @@ export class FailsNotes extends FailsBasis {
 
     notessocket.on('startPoll', (data) => {
       console.log('startpoll incoming', data)
+      let canVote = true
+      if (typeof data.canVote !== 'undefined') {
+        canVote = data.canVote
+      }
+      if (typeof data.participants !== 'undefined') {
+        canVote &&= data.participants.includes(this.socket.getNetworkUserHash())
+      }
 
       this.setState({
-        polltask: 1,
+        polltask: canVote ? 1 : 2,
         curpoll: data,
-        votesel: [],
+        votesel: canVote ? [] : undefined,
+        pollCanVote: canVote,
         pollvotes: {},
         polldata: undefined,
         pollballotid: undefined
@@ -325,7 +333,7 @@ export class FailsNotes extends FailsBasis {
     })
 
     console.log('cast vote incl ballot id', ret)
-    this.setState({ pollballotid: ret.ballot })
+    this.setState({ pollballotid: ret.ballot, pollerror: ret.error })
   }
 
   onNotesmodeEnterDialog({ persist, tryPersist, persistGranted }) {
@@ -848,8 +856,12 @@ export class FailsNotes extends FailsBasis {
               {this.state.reloading && <h1>Loading...</h1>}
               {!this.state.reloading && (
                 <React.Fragment>
-                  <h1>The screencast is currently deactivated!</h1>
-                  <h2>Ask the docent for activation, when ready!</h2>
+                  <h1 key='screendeact1'>
+                    The screencast is currently deactivated!
+                  </h1>
+                  <h2 key='screendeact2'>
+                    Ask the docent for activation, when ready!
+                  </h2>
                 </React.Fragment>
               )}
             </div>
@@ -913,6 +925,7 @@ export class FailsNotes extends FailsBasis {
                 <React.Fragment>
                   <Chart
                     type='bar'
+                    key='chart'
                     data={polldata}
                     options={{
                       indexAxis: 'x',
@@ -921,13 +934,17 @@ export class FailsNotes extends FailsBasis {
                     }}
                   />
                   {pollanswers}
-                  <h4> Voting is over!</h4>
+                  <h4 key='voteover'> Voting is over!</h4>
                 </React.Fragment>
               )}
               {!polldata && <h4> Votes are still casted! </h4>}
+              {!this.state.pollCanVote && <h4> Not eligible for voting. </h4>}
               {this.state.pollballotid && (
                 <h4>My ballot id: {this.state.pollballotid}</h4>
               )}
+              {this.state.pollerror && (
+                <h4>Error while casting ballot: {this.state.pollerror}</h4>
+              )}
             </React.Fragment>
           )}
         </Dialog>