98 lines
3.6 KiB
Vue
98 lines
3.6 KiB
Vue
<template>
|
|
<message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
|
|
<div class="bubble poll-bubble">
|
|
<div class="poll-icon">
|
|
<v-icon light>$vuetify.icons.poll</v-icon>
|
|
</div>
|
|
|
|
<div class="poll-question">{{ pollQuestion }}</div>
|
|
<v-container fluid ma-0 pa-0>
|
|
<v-row
|
|
v-for="answer in pollAnswers"
|
|
:key="answer.id"
|
|
@click="pollAnswer(answer.id)"
|
|
:class="{
|
|
'poll-answer': true,
|
|
selected: !userHasVoted && answer.id == pollTentativeAnswer,
|
|
result: userHasVoted || pollIsClosed || pollViewResults,
|
|
winner: answer.winner && (userHasVoted || pollIsClosed || pollViewResults),
|
|
}"
|
|
ma-0
|
|
pa-0
|
|
>
|
|
<v-col cols="auto" class="ma-0 pa-0 poll-answer-title">{{ answer.text }} {{ answer.max }}</v-col>
|
|
<v-col v-if="answer.id == pollTentativeAnswer" cols="auto" class="ma-0 pa-0 poll-answer-title"
|
|
><v-img class="poll-check-icon" src="@/assets/icons/ic_check.svg"
|
|
/></v-col>
|
|
<v-col
|
|
v-if="
|
|
pollIsClosed || (pollIsDisclosed && userHasVoted) || (pollIsAdmin && (userHasVoted || pollViewResults))
|
|
"
|
|
cols="auto"
|
|
class="ma-0 pa-0 poll-answer-num-votes"
|
|
>{{ answer.percentage }}%</v-col
|
|
>
|
|
<div
|
|
v-if="
|
|
pollIsClosed || (pollIsDisclosed && userHasVoted) || (pollIsAdmin && (userHasVoted || pollViewResults))
|
|
"
|
|
class="poll-percent-indicator"
|
|
>
|
|
<div class="bar" :style="{ width: `${answer.percentage}%` }"></div>
|
|
</div>
|
|
</v-row>
|
|
<v-row v-if="pollTentativeAnswer" class="pa-0 poll-status" justify="center">
|
|
<v-col class="ma-0 pa-0" cols="auto"
|
|
><div class="poll-submit clickable" @click.stop="pollAnswerSubmit">
|
|
{{ $t("poll_create.poll_submit") }}
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-else class="pa-0 poll-status">
|
|
<v-col class="ma-0 pa-0 poll-status-title">
|
|
{{ $t("poll_create.num_answered", { count: pollNumAnswers }) }}
|
|
</v-col>
|
|
<v-col cols="auto" class="ma-0 pa-0">
|
|
<div
|
|
:class="{ 'poll-disclose': true, clickable: true, selected: pollViewResults, 'mb-4': true }"
|
|
v-if="!pollIsClosed && userCanClosePoll && !userHasVoted"
|
|
>
|
|
{{ $t("poll_create.view_results") }}
|
|
|
|
<div class="poll-disclose-track" @click.stop="pollViewResults = !pollViewResults">
|
|
<div class="poll-disclose-knob"></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="poll-status-close clickable"
|
|
v-if="userCanClosePoll && (userHasVoted || pollViewResults) && !pollIsClosed"
|
|
@click.stop="pollClose"
|
|
>
|
|
{{ $t("poll_create.close_poll") }}
|
|
</div>
|
|
<div class="poll-status-closed clickable" v-else-if="pollIsAdmin && pollIsClosed" @click.stop="pollClose">
|
|
<img class="icon" src="@/assets/icons/ic_check_small.svg" />
|
|
{{ $t("poll_create.poll_status_closed") }}
|
|
</div>
|
|
</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>
|