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

src/client/app/common/views/components/poll.vue

@@ -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