combine the 2 poll components, do the footer
This commit is contained in:
shpuld
parent
6bc1d10ae9
commit
d7b75ba037
5 changed files with 298 additions and 55 deletions
90
src/components/poll/poll.js
Normal file
90
src/components/poll/poll.js
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
import Timeago from '../timeago/timeago.vue'
|
||||
|
||||
export default {
|
||||
name: 'Poll',
|
||||
props: ['poll', 'statusId'],
|
||||
components: { Timeago },
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
multipleChoices: [],
|
||||
singleChoiceIndex: null,
|
||||
refreshInterval: null
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.refreshInterval = setTimeout(this.refreshPoll, 30 * 1000)
|
||||
},
|
||||
destroyed () {
|
||||
clearTimeout(this.refreshInterval)
|
||||
},
|
||||
computed: {
|
||||
expired () {
|
||||
return Date.now() > Date.parse(this.poll.expires_at)
|
||||
},
|
||||
showResults () {
|
||||
return this.poll.voted || this.expired
|
||||
},
|
||||
totalVotesCount () {
|
||||
return this.poll.votes_count
|
||||
},
|
||||
expiresAt () {
|
||||
return Date.parse(this.poll.expires_at).toLocaleString()
|
||||
},
|
||||
containerClass () {
|
||||
return {
|
||||
loading: this.loading
|
||||
}
|
||||
},
|
||||
choiceIndices () {
|
||||
return this.multipleChoices
|
||||
.map((entry, index) => index)
|
||||
.filter(value => typeof value === 'number')
|
||||
},
|
||||
isDisabled () {
|
||||
const noChoice = this.poll.multiple
|
||||
? this.choiceIndices.length === 0
|
||||
: this.singleChoiceIndex === undefined
|
||||
return this.loading || noChoice
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
refreshPoll () {
|
||||
if (this.expired) return
|
||||
this.fetchPoll()
|
||||
this.refreshInterval = setTimeout(this.refreshPoll, 30 * 1000)
|
||||
},
|
||||
percentageForOption (count) {
|
||||
return this.totalVotesCount === 0 ? 0 : Math.round((count + 5) / (this.totalVotesCount + 10) * 100)
|
||||
},
|
||||
resultTitle (option) {
|
||||
return `${option.votes_count}/${this.totalVotesCount} ${this.$t('polls.votes')}`
|
||||
},
|
||||
fetchPoll () {
|
||||
this.$store.dispatch('refreshPoll', { id: this.statusId, pollId: this.poll.id })
|
||||
},
|
||||
optionId (index) {
|
||||
return `poll${this.poll.id}-${index}`
|
||||
},
|
||||
vote () {
|
||||
this.loading = true
|
||||
if (this.poll.multiple) {
|
||||
if (this.choiceIndices.length === 0) return
|
||||
this.$store.dispatch(
|
||||
'votePoll',
|
||||
{ id: this.statusId, pollId: this.poll.id, choices: this.choiceIndices }
|
||||
).then(poll => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
if (this.singleChoiceIndex === undefined) return
|
||||
this.$store.dispatch(
|
||||
'votePoll',
|
||||
{ id: this.statusId, pollId: this.poll.id, choices: [this.singleChoiceIndex] }
|
||||
).then(poll => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +1,119 @@
|
|||
<template>
|
||||
<poll-results
|
||||
v-if="currentUserHasVoted"
|
||||
:poll="poll"
|
||||
:status-id="statusId"
|
||||
/>
|
||||
<poll-vote
|
||||
<div class="poll" v-bind:class="containerClass">
|
||||
<div
|
||||
class="poll-option"
|
||||
v-for="(option, index) in poll.options"
|
||||
:key="index"
|
||||
>
|
||||
<div v-if="showResults" :title="resultTitle(option)" class="option-result">
|
||||
<div class="option-result-label">
|
||||
<span class="result-percentage">
|
||||
{{percentageForOption(option.votes_count)}}%
|
||||
</span>
|
||||
<span>{{option.title}}</span>
|
||||
</div>
|
||||
<div
|
||||
class="result-fill"
|
||||
:style="{ 'width': `${percentageForOption(option.votes_count)}%` }"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<input
|
||||
v-if="poll.multiple"
|
||||
type="checkbox"
|
||||
:id="optionId(index)"
|
||||
:disabled="loading"
|
||||
:value="option.title"
|
||||
v-model="multipleChoices[index]"
|
||||
>
|
||||
<input
|
||||
v-else
|
||||
:poll="poll"
|
||||
:status-id="statusId"
|
||||
/>
|
||||
type="radio"
|
||||
:id="optionId(index)"
|
||||
:disabled="loading"
|
||||
:value="index"
|
||||
v-model="singleChoiceIndex"
|
||||
>
|
||||
<label :for="optionId(index)">
|
||||
{{option.title}}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer faint">
|
||||
<button
|
||||
v-if="!showResults"
|
||||
class="btn btn-default poll-vote-button"
|
||||
type="button"
|
||||
@click="vote"
|
||||
:disabled="isDisabled"
|
||||
>
|
||||
{{$t('polls.vote')}}
|
||||
</button>
|
||||
<div class="total">
|
||||
{{totalVotesCount}} {{ $t("polls.votes") }} ·
|
||||
</div>
|
||||
<i18n :path="expired ? 'polls.expired' : 'polls.expires_in'">
|
||||
<Timeago :time="this.poll.expires_at" :auto-update="60" />
|
||||
</i18n>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PollResults from './poll_results/poll_results.vue'
|
||||
import PollVote from './poll_vote/poll_vote.vue'
|
||||
<script src="./poll.js"></script>
|
||||
|
||||
export default {
|
||||
name: 'Poll',
|
||||
props: ['poll', 'statusId'],
|
||||
components: {
|
||||
PollResults,
|
||||
PollVote
|
||||
},
|
||||
computed: {
|
||||
currentUserHasVoted () {
|
||||
return this.poll.voted
|
||||
},
|
||||
voted () {
|
||||
return this.poll.voted
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.poll {
|
||||
.votes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 0 0.5em;
|
||||
}
|
||||
},
|
||||
.poll-option {
|
||||
margin: 0.5em 0;
|
||||
height: 1.5em;
|
||||
}
|
||||
</script>
|
||||
.option-result {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
}
|
||||
.option-result-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.1em 0.25em;
|
||||
z-index: 1;
|
||||
}
|
||||
.result-percentage {
|
||||
width: 3.5em;
|
||||
}
|
||||
.result-fill {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background-color: $fallback--lightBg;
|
||||
background-color: var(--faintLink, $fallback--lightBg);
|
||||
border-radius: $fallback--panelRadius;
|
||||
border-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: width 0.5s;
|
||||
}
|
||||
input {
|
||||
width: 3.5em;
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&.loading * {
|
||||
cursor: progress;
|
||||
}
|
||||
.poll-vote-button {
|
||||
padding: 0 0.5em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -66,8 +66,8 @@ export default {
|
|||
data: () => ({
|
||||
pollType: 'single',
|
||||
options: ['', ''],
|
||||
expiryAmount: 1,
|
||||
expiryUnit: 'minutes',
|
||||
expiryAmount: 2,
|
||||
expiryUnit: 'hours',
|
||||
expiryUnits: ['minutes', 'hours', 'days']
|
||||
}),
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,22 @@
|
|||
<template>
|
||||
<form class="poll-vote" v-bind:class="containerClass">
|
||||
<div class="poll-vote" v-bind:class="containerClass">
|
||||
<div
|
||||
class="poll-choice"
|
||||
v-for="(option, index) in poll.options"
|
||||
:key="index"
|
||||
>
|
||||
<div v-if="showResults" :title="resultTitle(option)">
|
||||
<div class="vote-label">
|
||||
<span>{{percentageForOption(option.votes_count)}}%</span>
|
||||
<span>{{option.title}}</span>
|
||||
</div>
|
||||
<div class="fill" :style="{ 'width': `${percentageForOption(option.votes_count)}%` }"></div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<input
|
||||
v-if="poll.multiple"
|
||||
type="checkbox"
|
||||
name="choice"
|
||||
:id="index"
|
||||
:id="optionId(index)"
|
||||
:disabled="loading"
|
||||
:value="option.title"
|
||||
v-model="multipleChoices[index]"
|
||||
|
|
@ -17,16 +24,16 @@
|
|||
<input
|
||||
v-else
|
||||
type="radio"
|
||||
name="choice"
|
||||
:id="index"
|
||||
:id="optionId(index)"
|
||||
:disabled="loading"
|
||||
:value="index"
|
||||
v-model="singleChoiceIndex"
|
||||
>
|
||||
<label :for="index">
|
||||
<label :for="optionId(index)">
|
||||
{{option.title}}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<button
|
||||
class="btn btn-default poll-vote-button"
|
||||
|
|
@ -38,7 +45,7 @@
|
|||
</button>
|
||||
<Timeago :time="this.poll.expires_at" :auto-update="1"></Timeago>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -59,6 +66,12 @@ export default {
|
|||
expired () {
|
||||
return new Date() > this.poll.expires_at
|
||||
},
|
||||
showResults () {
|
||||
return this.poll.voted || this.expired
|
||||
},
|
||||
totalVotesCount () {
|
||||
return this.poll.votes_count
|
||||
},
|
||||
timeleft () {
|
||||
const expiresAt = new Date(this.poll.expires_at)
|
||||
return expiresAt
|
||||
|
|
@ -80,6 +93,18 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
percentageForOption (count) {
|
||||
return this.totalVotesCount === 0 ? 0 : Math.round(count / this.totalVotesCount * 100)
|
||||
},
|
||||
resultTitle (option) {
|
||||
return `${option.votes_count}/${this.totalVotesCount} ${this.$t('polls.votes')}`
|
||||
},
|
||||
fetchPoll () {
|
||||
this.$store.dispatch('refreshPoll', { id: this.statusId, pollId: this.poll.id })
|
||||
},
|
||||
optionId (index) {
|
||||
return `poll${this.poll.id}-${index}`
|
||||
},
|
||||
vote () {
|
||||
this.loading = true
|
||||
if (this.poll.multiple) {
|
||||
|
|
@ -105,6 +130,46 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../../_variables.scss';
|
||||
|
||||
.poll-results {
|
||||
.votes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 0 0.5em;
|
||||
}
|
||||
.poll-option {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 0.25em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
.fill {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background-color: $fallback--lightBg;
|
||||
background-color: var(--faintLink, $fallback--lightBg);
|
||||
border-radius: $fallback--panelRadius;
|
||||
border-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: width 0.5s;
|
||||
}
|
||||
.vote-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.1em 0.25em;
|
||||
z-index: 1;
|
||||
span {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.poll-vote {
|
||||
margin: 0.7em 0 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -85,7 +85,10 @@
|
|||
"votes": "votes",
|
||||
"vote": "Vote",
|
||||
"single_choice": "Single choice",
|
||||
"multiple_choices": "Multiple choices"
|
||||
"multiple_choices": "Multiple choices",
|
||||
"expiry": "Poll age",
|
||||
"expires_in": "Ends in {0}",
|
||||
"expired": "Poll ended {0} ago"
|
||||
},
|
||||
"interactions": {
|
||||
"favs_repeats": "Repeats and Favorites",
|
||||
|
|
|
|||
Loading…
Reference in a new issue