Support for polls (can be created by room admins)

src/components/messages/MessageOutgoingPoll.vue

@@ -0,0 +1,60 @@
+<template>
+  <message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
+    <div class="bubble poll-bubble">
+      {{ pollQuestion }}
+      <v-container fluid>
+        <v-row
+          v-for="answer in pollAnswers"
+          :key="answer.id"
+          @click="pollAnswer(answer.id)"
+          :class="{ 'poll-answer': true, selected: answer.hasMyVote }"
+        >
+          <v-col cols="auto" class="ma-0 pa-0 poll-answer-title">{{ answer.text }}</v-col>
+          <v-col
+            v-if="pollIsClosed || (pollIsDisclosed && userHasVoted) || pollIsAdmin"
+            cols="auto"
+            class="ma-0 pa-0 poll-answer-num-votes"
+            >{{ answer.numVotes }}</v-col
+          >
+          <div v-if="pollIsClosed || (pollIsDisclosed && userHasVoted) || pollIsAdmin" class="poll-percent-indicator">
+            <div class="bar" :style="{ width: `${answer.percentage}%` }"></div>
+          </div>
+        </v-row>
+        <v-row class="poll-status">
+          <v-col cols="auto" class="ma-0 pa-0 poll-status-title">{{
+            pollIsClosed
+              ? $t("poll_create.poll_status_closed")
+              : pollIsDisclosed
+              ? userHasVoted
+                ? $t("poll_create.poll_status_open")
+                : $t("poll_create.poll_status_open_not_voted")
+              : $t("poll_create.poll_status_disclosed")
+          }}</v-col>
+          <v-col
+            cols="auto"
+            class="ma-0 pa-0 poll-status-close clickable"
+            v-if="!pollIsClosed && userCanClosePoll"
+            @click.stop="pollClose"
+            >{{ $t("poll_create.close_poll") }}</v-col
+          >
+        </v-row>
+      </v-container>
+    </div>
+  </message-outgoing>
+</template>
+
+<script>
+import pollMixin from "./pollMixin";
+import MessageOutgoing from "./MessageOutgoing.vue";
+
+export default {
+  extends: MessageOutgoing,
+  mixins: [pollMixin],
+  components: { MessageOutgoing },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+@import "@/assets/css/components/poll.scss";
+</style>