From 2001f21065d9c3d8138b4f8c01b18616a7a5ad7b Mon Sep 17 00:00:00 2001
From: Simon Hirtreiter <s.hirtreiter@hm.edu>
Date: Thu, 4 Feb 2021 18:55:18 +0100
Subject: [PATCH] ad multiple choice to response ui

---
 .../ui/components/polling/component.jsx       | 177 ++++++++++++++----
 1 file changed, 139 insertions(+), 38 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/polling/component.jsx b/bigbluebutton-html5/imports/ui/components/polling/component.jsx
index bdbb1c64e7..1383cded3a 100644
--- a/bigbluebutton-html5/imports/ui/components/polling/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/polling/component.jsx
@@ -18,13 +18,24 @@ const intlMessages = defineMessages({
   pollAnswerDesc: {
     id: 'app.polling.pollAnswerDesc',
   },
+  pollSendLabel: {
+    id: 'app.polling.pollSendLabel',
+  },
 });
 
 class Polling extends Component {
   constructor(props) {
     super(props);
 
+    this.state = {
+      checkedAnswers: []
+    }
+
     this.play = this.play.bind(this);
+    this.renderButtonAnswers = this.renderButtonAnswers.bind(this);
+    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.renderCheckboxAnswers = this.renderCheckboxAnswers.bind(this);
   }
 
   componentDidMount() {
@@ -38,6 +49,133 @@ class Polling extends Component {
       + '/resources/sounds/Poll.mp3');
   }
 
+  renderButtonAnswers() {
+    const {
+      isMeteorConnected,
+      intl,
+      poll,
+      handleVote,
+      pollAnswerIds,
+    } = this.props;
+
+    return poll.answers.map((pollAnswer) => {
+      const formattedMessageIndex = pollAnswer.key.toLowerCase();
+      let label = pollAnswer.key;
+      if (pollAnswerIds[formattedMessageIndex]) {
+        label = intl.formatMessage(pollAnswerIds[formattedMessageIndex]);
+      }
+
+      return (
+          <div
+              key={pollAnswer.id}
+              className={styles.pollButtonWrapper}
+          >
+            <Button
+                disabled={!isMeteorConnected}
+                className={styles.pollingButton}
+                color="primary"
+                size="md"
+                label={label}
+                key={pollAnswer.key}
+                onClick={() => handleVote(poll.pollId, [pollAnswer.id])}
+                aria-labelledby={`pollAnswerLabel${pollAnswer.key}`}
+                aria-describedby={`pollAnswerDesc${pollAnswer.key}`}
+            />
+            <div
+                className={styles.hidden}
+                id={`pollAnswerLabel${pollAnswer.key}`}
+            >
+              {intl.formatMessage(intlMessages.pollAnswerLabel, { 0: label })}
+            </div>
+            <div
+                className={styles.hidden}
+                id={`pollAnswerDesc${pollAnswer.key}`}
+            >
+              {intl.formatMessage(intlMessages.pollAnswerDesc, { 0: label })}
+            </div>
+          </div>
+      );
+    })
+  }
+
+  handleCheckboxChange(pollId, answerId) {
+    const {checkedAnswers} = this.state
+    if (checkedAnswers.includes(answerId)) {
+      checkedAnswers.splice(checkedAnswers.indexOf(answerId), 1)
+    } else {
+      checkedAnswers.push(answerId)
+    }
+    checkedAnswers.sort();
+  }
+
+  handleSubmit(pollId) {
+    const {handleVote} = this.props;
+    const {checkedAnswers} = this.state
+    handleVote(pollId, checkedAnswers)
+  }
+
+  renderCheckboxAnswers() {
+    const {
+      isMeteorConnected,
+      intl,
+      poll,
+      pollAnswerIds,
+    } = this.props;
+    return (
+      <div>
+        <div>
+          {poll.answers.map((pollAnswer) => {
+            const formattedMessageIndex = pollAnswer.key.toLowerCase();
+            let label = pollAnswer.key;
+            if (pollAnswerIds[formattedMessageIndex]) {
+              label = intl.formatMessage(pollAnswerIds[formattedMessageIndex]);
+            }
+
+            return (
+                <div
+                    key={pollAnswer.id}
+                >
+                  <input
+                      type="checkbox"
+                      disabled={!isMeteorConnected}
+                      id={`answerInput${pollAnswer.key}`}
+                      onChange={() => this.handleCheckboxChange(poll.pollId, pollAnswer.id)}
+                      aria-labelledby={`pollAnswerLabel${pollAnswer.key}`}
+                      aria-describedby={`pollAnswerDesc${pollAnswer.key}`}
+                  />
+                  <label htmlFor={`answerInput${pollAnswer.key}`}>
+                    {label}
+                  </label>
+                  <div
+                      className={styles.hidden}
+                      id={`pollAnswerLabel${pollAnswer.key}`}
+                  >
+                    {intl.formatMessage(intlMessages.pollAnswerLabel, { 0: label })}
+                  </div>
+                  <div
+                      className={styles.hidden}
+                      id={`pollAnswerDesc${pollAnswer.key}`}
+                  >
+                    {intl.formatMessage(intlMessages.pollAnswerDesc, { 0: label })}
+                  </div>
+                </div>
+            );
+          })}
+        </div>
+        <div>
+          <Button
+              disabled={!isMeteorConnected}
+              className={styles.pollingButton}
+              color="primary"
+              size="md"
+              label={intl.formatMessage(intlMessages.pollSendLabel)}
+              onClick={() => this.handleSubmit(poll.pollId)}
+          />
+        </div>
+      </div>
+    )
+  }
+
   render() {
     const {
       isMeteorConnected,
@@ -69,44 +207,7 @@ class Polling extends Component {
             {intl.formatMessage(intlMessages.pollingTitleLabel)}
           </div>
           <div className={cx(pollAnswerStyles)}>
-            {poll.answers.map((pollAnswer) => {
-              const formattedMessageIndex = pollAnswer.key.toLowerCase();
-              let label = pollAnswer.key;
-              if (pollAnswerIds[formattedMessageIndex]) {
-                label = intl.formatMessage(pollAnswerIds[formattedMessageIndex]);
-              }
-
-              return (
-                <div
-                  key={pollAnswer.id}
-                  className={styles.pollButtonWrapper}
-                >
-                  <Button
-                    disabled={!isMeteorConnected}
-                    className={styles.pollingButton}
-                    color="primary"
-                    size="md"
-                    label={label}
-                    key={pollAnswer.key}
-                    onClick={() => handleVote(poll.pollId, [pollAnswer.id])}
-                    aria-labelledby={`pollAnswerLabel${pollAnswer.key}`}
-                    aria-describedby={`pollAnswerDesc${pollAnswer.key}`}
-                  />
-                  <div
-                    className={styles.hidden}
-                    id={`pollAnswerLabel${pollAnswer.key}`}
-                  >
-                    {intl.formatMessage(intlMessages.pollAnswerLabel, { 0: label })}
-                  </div>
-                  <div
-                    className={styles.hidden}
-                    id={`pollAnswerDesc${pollAnswer.key}`}
-                  >
-                    {intl.formatMessage(intlMessages.pollAnswerDesc, { 0: label })}
-                  </div>
-                </div>
-              );
-            })}
+            {poll.isMultipleChoice ? this.renderCheckboxAnswers() : this.renderButtonAnswers()}
           </div>
         </div>
       </div>);