More poll styling

src/components/messages/pollMixin.js

@@ -5,10 +5,12 @@ export default {
     return {
       pollQuestion: "",
       pollAnswers: [],
+      pollTotalVotes: 0,
       pollResponseRelations: null,
       pollEndRelations: null,
       pollEndTs: null,
       pollIsDisclosed: true,
+      pollTentativeAnswer: null
     }
   },
   mounted() {
@@ -93,25 +95,51 @@ export default {
         }
       }
 
-      // Update percentage
-      answerArray.forEach(a => {
-        a.percentage = parseInt(((100 * a.numVotes) / totalVotes).toFixed(0));
+      // Update percentages. For algorithm, see here: https://revs.runtime-revolution.com/getting-100-with-rounded-percentages-273ffa70252b
+      // (need to add up to 100%)
+      let a = answerArray.map(a => {
+        let votes = (100 * a.numVotes) / totalVotes;
+        return {
+          answer: a,
+          unrounded: votes,
+          floor: Math.floor(votes)
+        }
+      });
+      a.sort((item1,item2) => {
+        Math.abs(item2.floor) - Math.abs(item1.floor);
+      });
+      var diff = 100 - a.reduce((previousValue, currentValue) => { 
+        return previousValue + currentValue.floor;
+      }, 0);
+      const maxVotes = Math.max(...a.map(item => item.unrounded));
+      a.map((answer, index) => {
+        answer.answer.percentage = (index < diff) ? (answer.floor + 1) : answer.floor;
+        answer.answer.winner = (answer.unrounded == maxVotes);
       });
       this.pollAnswers = answerArray;
+      this.pollTotalVotes = totalVotes;
     },
     pollAnswer(id) {
-      if (this.pollIsClosed) {
+      if (!this.userHasVoted) {
+        this.pollTentativeAnswer = id;
+      }
+    },
+    pollAnswerSubmit() {
+      if (!this.pollTentativeAnswer || this.pollIsClosed) {
         return;
       }
       util
       .sendPollAnswer(
         this.$matrix.matrixClient,
         this.room.roomId,
-        [id],
+        [this.pollTentativeAnswer],
         this.event
       )
       .catch((err) => {
         console.log("Failed to send:", err);
+      })
+      .finally(() => {
+        this.pollTentativeAnswer = null;
       });
     },
     pollClose() {
@@ -148,6 +176,9 @@ export default {
     userHasVoted() {
       return this.pollAnswers.some(a => a.hasMyVote);
     },
+    pollNumAnswers() {
+      return this.pollTotalVotes;
+    },
     pollIsAdmin() {
       // Admins can view results of not-yet-closed undisclosed polls.
       const me = this.room && this.room.getMember(this.$matrix.currentUserId);