Enhance poll (#4409)
* Start working * WIP: Enhance poll * Fix bug * Use `name` in voting note refs: https://github.com/syuilo/misskey/issues/4407#issuecomment-469057296 * Fix style * Refactor Co-authored-by: MeiMei <30769358+mei23@users.noreply.github.com> * WIP: Update poll editor * Fix bug * Fix bug refs: https://github.com/syuilo/misskey/pull/4409#discussion_r * Fix typo * Better design * Beautify poll editor * Fix UI * Fix bug refs: https://github.com/syuilo/misskey/pull/4409#discussion_r262217524 * Add debug logging * Fix bug * Log deliver * fix vote * Update ap/show refs: https://github.com/syuilo/misskey/pull/4409#issuecomment-469652386 * Update poll view * Maybe done * Add tests * Fix path * Fix test * Fix test * Fix test * Fix expired check on AP * Update note.ts * Squashed commit of the following: commit d9a4beabf851893b8992a0f4568265eb9d4f0b8e Author: mei23 <m@m544.net> Date: Wed Mar 6 05:16:14 2019 +0900 tune commit 83ff421a6e978243f80ba9ec820189bc897e6e3b Author: mei23 <m@m544.net> Date: Wed Mar 6 05:01:14 2019 +0900 fallback commit 0b566af973b115ade9e75ea4b8094ee2b329dabc Author: mei23 <m@m544.net> Date: Wed Mar 6 04:40:12 2019 +0900 Note commit cc0296dd6127580ac584c40398db3f762a311f8b Author: mei23 <m@m544.net> Date: Wed Mar 6 04:33:58 2019 +0900 createで送る * Squashed commit of the following: commit ae696b1ed12568b27c27367ac5a77035c97c9a1f Author: mei23 <m@m544.net> Date: Wed Mar 6 06:11:17 2019 +0900 fix commit b735e354e7a9e64534c4f17d04ecbc65fb735c21 Author: mei23 <m@m544.net> Date: Wed Mar 6 06:08:33 2019 +0900 messge commit d9a4beabf851893b8992a0f4568265eb9d4f0b8e Author: mei23 <m@m544.net> Date: Wed Mar 6 05:16:14 2019 +0900 tune commit 83ff421a6e978243f80ba9ec820189bc897e6e3b Author: mei23 <m@m544.net> Date: Wed Mar 6 05:01:14 2019 +0900 fallback commit 0b566af973b115ade9e75ea4b8094ee2b329dabc Author: mei23 <m@m544.net> Date: Wed Mar 6 04:40:12 2019 +0900 Note commit cc0296dd6127580ac584c40398db3f762a311f8b Author: mei23 <m@m544.net> Date: Wed Mar 6 04:33:58 2019 +0900 createで送る * Fix typo * Update vote.ts * Update vote.ts * Update poll-editor.vue * Update tslint.json * Fix layout * Add note * Fix bug * Rename text key * 投票するときに投稿として扱わないように (#4425) * wip * 形式をMastodonと合わせた * Bye something * Use - instead of ~ * Redundancy * Yes! * Refactor * Use moment instead of Date * Fix indent * Refactor if (votes.length) は必要なさそう * Clean up * Bye Date * Clean * Fix timer is not displayed * Fix リモートから無期限pollにvoteできない * Fix vote actor
This commit is contained in:
Acid Chicken (硫酸鶏)
committed by
syuilo
syuilo
parent
f74a32ed9b
commit
725600da8f
@ -12,21 +12,54 @@
|
||||
</li>
|
||||
</ul>
|
||||
<button class="add" v-if="choices.length < 10" @click="add">{{ $t('add') }}</button>
|
||||
<button class="add" v-else disabled>{{ $t('no-more') }}</button>
|
||||
<button class="destroy" @click="destroy" :title="$t('destroy')">
|
||||
<fa icon="times"/>
|
||||
</button>
|
||||
<section>
|
||||
<ui-switch v-model="multiple">{{ $t('multiple') }}</ui-switch>
|
||||
<div>
|
||||
<ui-select v-model="expiration">
|
||||
<template #label>{{ $t('expiration') }}</template>
|
||||
<option value="infinite">{{ $t('infinite') }}</option>
|
||||
<option value="at">{{ $t('at') }}</option>
|
||||
<option value="after">{{ $t('after') }}</option>
|
||||
</ui-select>
|
||||
<section v-if="expiration === 'at'">
|
||||
<ui-input v-model="atDate" type="date">{{ $t('deadline-date') }}</ui-input>
|
||||
<ui-input v-model="atTime" type="time">{{ $t('deadline-time') }}</ui-input>
|
||||
</section>
|
||||
<section v-if="expiration === 'after'">
|
||||
<ui-input v-model="after" type="number">{{ $t('interval') }}</ui-input>
|
||||
<ui-select v-model="unit">
|
||||
<template #label>{{ $t('unit') }}</template>
|
||||
<option value="second">{{ $t('second') }}</option>
|
||||
<option value="minute">{{ $t('minute') }}</option>
|
||||
<option value="hour">{{ $t('hour') }}</option>
|
||||
<option value="day">{{ $t('day') }}</option>
|
||||
</ui-select>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import * as moment from 'moment';
|
||||
import i18n from '../../../i18n';
|
||||
import { erase } from '../../../../../prelude/array';
|
||||
export default Vue.extend({
|
||||
i18n: i18n('common/views/components/poll-editor.vue'),
|
||||
data() {
|
||||
return {
|
||||
choices: ['', '']
|
||||
choices: ['', ''],
|
||||
multiple: false,
|
||||
expiration: 'infinite',
|
||||
atDate: moment().add(1, 'day').toISOString().split('T')[0],
|
||||
atTime: '00:00',
|
||||
after: 0,
|
||||
unit: 'second'
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -55,15 +88,46 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
get() {
|
||||
const at = () => {
|
||||
const [date] = moment(this.atDate).toISOString().split('T');
|
||||
const [hour, minute] = this.atTime.split(':');
|
||||
return moment(`${date}T${hour}:${minute}Z`).valueOf();
|
||||
};
|
||||
|
||||
const after = () => {
|
||||
let base = parseInt(this.after);
|
||||
switch (this.unit) {
|
||||
case 'day': base *= 24;
|
||||
case 'hour': base *= 60;
|
||||
case 'minute': base *= 60;
|
||||
case 'second': return base *= 1000;
|
||||
default: return null;
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
choices: erase('', this.choices)
|
||||
}
|
||||
choices: erase('', this.choices),
|
||||
multiple: this.multiple,
|
||||
...(
|
||||
this.expiration === 'at' ? { expiresAt: at() } :
|
||||
this.expiration === 'after' ? { expiredAfter: after() } : {})
|
||||
};
|
||||
},
|
||||
|
||||
set(data) {
|
||||
if (data.choices.length == 0) return;
|
||||
this.choices = data.choices;
|
||||
if (data.choices.length == 1) this.choices = this.choices.concat('');
|
||||
this.multiple = data.multiple;
|
||||
if (data.expiresAt) {
|
||||
this.expiration = 'at';
|
||||
this.atDate = this.atTime = data.expiresAt;
|
||||
} else if (typeof data.expiredAfter === 'number') {
|
||||
this.expiration = 'after';
|
||||
this.after = data.expiredAfter;
|
||||
} else {
|
||||
this.expiration = 'infinite';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -128,6 +192,7 @@ export default Vue.extend({
|
||||
margin 8px 0 0 0
|
||||
vertical-align top
|
||||
color var(--primary)
|
||||
z-index 1
|
||||
|
||||
> .destroy
|
||||
position absolute
|
||||
@ -142,4 +207,23 @@ export default Vue.extend({
|
||||
&:active
|
||||
color var(--primaryDarken30)
|
||||
|
||||
> section
|
||||
margin 16px 0 -16px 0
|
||||
|
||||
> div
|
||||
margin 0 8px
|
||||
|
||||
&:last-child
|
||||
flex 1 0 auto
|
||||
|
||||
> section
|
||||
align-items center
|
||||
display flex
|
||||
margin -32px 0 0
|
||||
|
||||
> :first-child
|
||||
margin-right 16px
|
||||
|
||||
> .ui-input
|
||||
flex 1 0 auto
|
||||
</style>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="mk-poll" :data-is-voted="isVoted">
|
||||
<div class="mk-poll" :data-done="closed || isVoted">
|
||||
<ul>
|
||||
<li v-for="choice in poll.choices" :key="choice.id" @click="vote(choice.id)" :class="{ voted: choice.voted }" :title="!isVoted ? $t('vote-to').replace('{}', choice.text) : ''">
|
||||
<div class="backdrop" :style="{ 'width': (showResult ? (choice.votes / total * 100) : 0) + '%' }"></div>
|
||||
<li v-for="choice in poll.choices" :key="choice.id" @click="vote(choice.id)" :class="{ voted: choice.voted }" :title="!closed && !isVoted ? $t('vote-to').replace('{}', choice.text) : ''">
|
||||
<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
|
||||
<span>
|
||||
<template v-if="choice.isVoted"><fa icon="check"/></template>
|
||||
<mfm :text="choice.text" :should-break="false" :plain-text="true" :custom-emojis="note.emojis"/>
|
||||
@ -10,11 +10,13 @@
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p v-if="total > 0">
|
||||
<span>{{ $t('total-users').replace('{}', total) }}</span>
|
||||
<span>・</span>
|
||||
<a v-if="!isVoted" @click="toggleShowResult">{{ showResult ? $t('vote') : $t('show-result') }}</a>
|
||||
<p>
|
||||
<span>{{ $t('total-votes').replace('{}', total) }}</span>
|
||||
<span> · </span>
|
||||
<a v-if="!closed && !isVoted" @click="toggleShowResult">{{ showResult ? $t('vote') : $t('show-result') }}</a>
|
||||
<span v-if="isVoted">{{ $t('voted') }}</span>
|
||||
<span v-else-if="closed">{{ $t('closed') }}</span>
|
||||
<span v-if="remaining > 0"> · {{ timer }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
@ -28,6 +30,7 @@ export default Vue.extend({
|
||||
props: ['note'],
|
||||
data() {
|
||||
return {
|
||||
remaining: -1,
|
||||
showResult: false
|
||||
};
|
||||
},
|
||||
@ -38,19 +41,43 @@ export default Vue.extend({
|
||||
total(): number {
|
||||
return sum(this.poll.choices.map(x => x.votes));
|
||||
},
|
||||
closed(): boolean {
|
||||
return !this.remaining;
|
||||
},
|
||||
timer(): string {
|
||||
return this.$t(
|
||||
this.remaining > 86400 ? 'remaining-days' :
|
||||
this.remaining > 3600 ? 'remaining-hours' :
|
||||
this.remaining > 60 ? 'remaining-minutes' : 'remaining-seconds')
|
||||
.replace('{s}', Math.floor(this.remaining % 60))
|
||||
.replace('{m}', Math.floor(this.remaining / 60) % 60)
|
||||
.replace('{h}', Math.floor(this.remaining / 3600) % 24)
|
||||
.replace('{d}', Math.floor(this.remaining / 86400));
|
||||
},
|
||||
isVoted(): boolean {
|
||||
return this.poll.choices.some(c => c.isVoted);
|
||||
return !this.poll.multiple && this.poll.choices.some(c => c.isVoted);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.showResult = this.isVoted;
|
||||
|
||||
if (this.note.poll.expiresAt) {
|
||||
const update = () => {
|
||||
if (this.remaining = Math.floor(Math.max(new Date(this.note.poll.expiresAt).getTime() - Date.now(), 0) / 1000))
|
||||
requestAnimationFrame(update);
|
||||
else
|
||||
this.showResult = true;
|
||||
};
|
||||
|
||||
update();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleShowResult() {
|
||||
this.showResult = !this.showResult;
|
||||
},
|
||||
vote(id) {
|
||||
if (this.poll.choices.some(c => c.isVoted)) return;
|
||||
if (this.closed || !this.poll.multiple && this.poll.choices.some(c => c.isVoted)) return;
|
||||
this.$root.api('notes/polls/vote', {
|
||||
noteId: this.note.id,
|
||||
choice: id
|
||||
@ -61,7 +88,7 @@ export default Vue.extend({
|
||||
Vue.set(c, 'isVoted', true);
|
||||
}
|
||||
}
|
||||
this.showResult = true;
|
||||
this.showResult = !this.poll.multiple;
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -114,7 +141,7 @@ export default Vue.extend({
|
||||
a
|
||||
color inherit
|
||||
|
||||
&[data-is-voted]
|
||||
&[data-done]
|
||||
> ul > li
|
||||
cursor default
|
||||
|
||||
|
||||
@ -366,6 +366,9 @@ root(fill)
|
||||
&[type='file']
|
||||
display none
|
||||
|
||||
&[type='number']
|
||||
text-align right
|
||||
|
||||
> .prefix
|
||||
> .suffix
|
||||
display block
|
||||
|
||||
@ -115,6 +115,8 @@ export default Vue.extend({
|
||||
uploadings: [],
|
||||
poll: false,
|
||||
pollChoices: [],
|
||||
pollMultiple: false,
|
||||
pollExpiration: [],
|
||||
useCw: false,
|
||||
cw: null,
|
||||
geo: null,
|
||||
@ -295,7 +297,10 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
onPollUpdate() {
|
||||
this.pollChoices = this.$refs.poll.get().choices;
|
||||
const got = this.$refs.poll.get();
|
||||
this.pollChoices = got.choices;
|
||||
this.pollMultiple = got.multiple;
|
||||
this.pollExpiration = [got.expiration, got.expiresAt || got.expiredAfter];
|
||||
this.saveDraft();
|
||||
},
|
||||
|
||||
|
||||
@ -105,6 +105,7 @@ export default Vue.extend({
|
||||
files: [],
|
||||
poll: false,
|
||||
pollChoices: [],
|
||||
pollMultiple: false,
|
||||
geo: null,
|
||||
visibility: 'public',
|
||||
visibleUsers: [],
|
||||
@ -273,7 +274,9 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
onPollUpdate() {
|
||||
this.pollChoices = this.$refs.poll.get().choices;
|
||||
const got = this.$refs.poll.get();
|
||||
this.pollChoices = got.choices;
|
||||
this.pollMultiple = got.multiple;
|
||||
},
|
||||
|
||||
upload(file) {
|
||||
|
||||
Reference in New Issue
Block a user