60 lines
2 KiB
Vue
60 lines
2 KiB
Vue
<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>
|