wip
This commit is contained in:
parent
941206922a
commit
aa0dadcf07
|
@ -2,60 +2,65 @@
|
||||||
<div :data-is-voted="isVoted">
|
<div :data-is-voted="isVoted">
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="choice in poll.choices" :key="choice.id" @click="vote.bind(choice.id)" :class="{ voted: choice.voted }" :title="!isVoted ? '%i18n:common.tags.mk-poll.vote-to%'.replace('{}', choice.text) : ''">
|
<li v-for="choice in poll.choices" :key="choice.id" @click="vote.bind(choice.id)" :class="{ voted: choice.voted }" :title="!isVoted ? '%i18n:common.tags.mk-poll.vote-to%'.replace('{}', choice.text) : ''">
|
||||||
<div class="backdrop" :style="{ 'width:' + (result ? (choice.votes / total * 100) : 0) + '%' }"></div>
|
<div class="backdrop" :style="{ 'width:' + (showResult ? (choice.votes / total * 100) : 0) + '%' }"></div>
|
||||||
<span>
|
<span>
|
||||||
<template v-if="choice.is_voted">%fa:check%</template>
|
<template v-if="choice.is_voted">%fa:check%</template>
|
||||||
{{ text }}
|
{{ text }}
|
||||||
<span class="votes" v-if="result">({{ '%i18n:common.tags.mk-poll.vote-count%'.replace('{}', choice.votes) }})</span>
|
<span class="votes" v-if="showResult">({{ '%i18n:common.tags.mk-poll.vote-count%'.replace('{}', choice.votes) }})</span>
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p v-if="total > 0">
|
<p v-if="total > 0">
|
||||||
<span>{{ '%i18n:common.tags.mk-poll.total-users%'.replace('{}', total) }}</span>
|
<span>{{ '%i18n:common.tags.mk-poll.total-users%'.replace('{}', total) }}</span>
|
||||||
・
|
・
|
||||||
<a v-if="!isVoted" @click="toggleResult">{{ result ? '%i18n:common.tags.mk-poll.vote%' : '%i18n:common.tags.mk-poll.show-result%' }}</a>
|
<a v-if="!isVoted" @click="toggleShowResult">{{ showResult ? '%i18n:common.tags.mk-poll.vote%' : '%i18n:common.tags.mk-poll.show-result%' }}</a>
|
||||||
<span v-if="isVoted">%i18n:common.tags.mk-poll.voted%</span>
|
<span v-if="isVoted">%i18n:common.tags.mk-poll.voted%</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="typescript">
|
<script lang="typescript">
|
||||||
this.mixin('api');
|
export default {
|
||||||
|
props: ['post'],
|
||||||
this.init = post => {
|
data() {
|
||||||
this.post = post;
|
return {
|
||||||
this.poll = this.post.poll;
|
showResult: false
|
||||||
this.total = this.poll.choices.reduce((a, b) => a + b.votes, 0);
|
};
|
||||||
this.isVoted = this.poll.choices.some(c => c.is_voted);
|
},
|
||||||
this.result = this.isVoted;
|
computed: {
|
||||||
this.update();
|
poll() {
|
||||||
};
|
return this.post.poll;
|
||||||
|
},
|
||||||
this.init(this.opts.post);
|
total() {
|
||||||
|
return this.poll.choices.reduce((a, b) => a + b.votes, 0);
|
||||||
this.toggleResult = () => {
|
},
|
||||||
this.result = !this.result;
|
isVoted() {
|
||||||
};
|
return this.poll.choices.some(c => c.is_voted);
|
||||||
|
}
|
||||||
this.vote = id => {
|
},
|
||||||
if (this.poll.choices.some(c => c.is_voted)) return;
|
created() {
|
||||||
this.api('posts/polls/vote', {
|
this.showResult = this.isVoted;
|
||||||
post_id: this.post.id,
|
},
|
||||||
choice: id
|
methods: {
|
||||||
}).then(() => {
|
toggleShowResult() {
|
||||||
this.poll.choices.forEach(c => {
|
this.showResult = !this.showResult;
|
||||||
if (c.id == id) {
|
},
|
||||||
c.votes++;
|
vote(id) {
|
||||||
c.is_voted = true;
|
if (this.poll.choices.some(c => c.is_voted)) return;
|
||||||
}
|
this.api('posts/polls/vote', {
|
||||||
});
|
post_id: this.post.id,
|
||||||
this.update({
|
choice: id
|
||||||
poll: this.poll,
|
}).then(() => {
|
||||||
isVoted: true,
|
this.poll.choices.forEach(c => {
|
||||||
result: true,
|
if (c.id == id) {
|
||||||
total: this.total + 1
|
c.votes++;
|
||||||
});
|
c.is_voted = true;
|
||||||
});
|
}
|
||||||
|
});
|
||||||
|
this.showResult = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue