Enhance poll

locales/de-DE.yml

@@ -270,7 +270,7 @@ common/views/components/note-menu.vue:
 common/views/components/poll.vue:
  vote-to: "Stimme für '{}'"
  vote-count: "{} Stimmen"
- total-users: "{} Nutzer haben abgestimmt"
+ total-votes: "{} Nutzer haben abgestimmt"
  vote: "Abstimmen"
  show-result: "Zeige Ergebnis"
  voted: "Abgestimmt"

locales/en-US.yml

@@ -489,7 +489,7 @@ common/views/components/user-menu.vue:
 common/views/components/poll.vue:
  vote-to: "Vote for '{}'"
  vote-count: "{} votes"
- total-users: "{} users voted"
+ total-votes: "{} users voted"
  vote: "Vote"
  show-result: "Show results"
  voted: "Voted"

locales/es-ES.yml

@@ -303,7 +303,7 @@ common/views/components/user-menu.vue:
 common/views/components/poll.vue:
  vote-to: "'{}' para votar"
  vote-count: "{} votos"
- total-users: "{} usuario(s) que ha(n) votado"
+ total-votes: "{} usuario(s) que ha(n) votado"
  vote: "Vota"
  show-result: "Mostrar resultados"
  voted: "Votado"

locales/fr-FR.yml

@@ -383,7 +383,7 @@ common/views/components/user-menu.vue:
 common/views/components/poll.vue:
  vote-to: "Voter pour '{}'"
  vote-count: "{} votes"
- total-users: "{} utilisateur·rice·s ont voté"
+ total-votes: "{} utilisateur·rice·s ont voté"
  vote: "Vote"
  show-result: "Montrer les résultats"
  voted: "Voté"

locales/ja-JP.yml

@@ -527,17 +527,36 @@ common/views/components/user-menu.vue:
 common/views/components/poll.vue:
  vote-to: "「{}」に投票する"
  vote-count: "{}票"
- total-users: "{}人が投票"
+ total-votes: "計{}票"
  vote: "投票する"
  show-result: "結果を見る"
  voted: "投票済み"
+ closed: "終了済み"
+ remaining-days: "終了まであと{d}日{h}時間"
+ remaining-hours: "終了まであと{h}時間{m}分"
+ remaining-minutes: "終了まであと{m}分{s}秒"
+ remaining-seconds: "終了まであと{s}秒"
 
 common/views/components/poll-editor.vue:
  no-only-one-choice: "アンケートには、選択肢が最低2つ必要です"
  choice-n: "選択肢{}"
  remove: "この選択肢を削除"
  add: "+選択肢を追加"
  destroy: "アンケートを破棄"
+ multiple: "複数回答可"
+ expiration: "期限"
+ infinite: "無期限"
+ at: "日時指定"
+ after: "経過指定"
+ no-more: "これ以上追加できません"
+ deadline-date: "期日"
+ deadline-time: "時間"
+ interval: "期間"
+ unit: "単位"
+ second: "秒"
+ minute: "分"
+ hour: "時間"
+ day: "日"
 
 common/views/components/reaction-picker.vue:
  choose-reaction: "リアクションを選択"

locales/ja-KS.yml

@@ -344,7 +344,7 @@ common/views/components/user-menu.vue:
 common/views/components/poll.vue:
  vote-to: "「{}」に投票や！"
  vote-count: "{}票"
- total-users: "{}人が投票"
+ total-votes: "{}人が投票"
  vote: "投票するで"
  show-result: "結果を見よか"
  voted: "投票済みや"

locales/ko-KR.yml

@@ -489,7 +489,7 @@ common/views/components/user-menu.vue:
 common/views/components/poll.vue:
  vote-to: "\"{}\"에 투표하기"
  vote-count: "{}표"
- total-users: "{}명이 투표"
+ total-votes: "{}명이 투표"
  vote: "투표하기"
  show-result: "결과 보기"
  voted: "투표함"

locales/nl-NL.yml

@@ -131,7 +131,7 @@ common/views/components/note-menu.vue:
 common/views/components/poll.vue:
  vote-to: "Stemmen op '{}'"
  vote-count: "{} stemmen"
- total-users: "{} gebruikers hebben gestemd"
+ total-votes: "{} gebruikers hebben gestemd"
  vote: "Stemmen"
  show-result: "Resultaten tonen"
  voted: "Gestemd"

locales/pl-PL.yml

@@ -346,7 +346,7 @@ common/views/components/user-menu.vue:
 common/views/components/poll.vue:
  vote-to: "Zagłosuj na '{}'"
  vote-count: "{} głosów"
- total-users: "{} głosujących"
+ total-votes: "{} głosujących"
  vote: "Zagłosuj"
  show-result: "Pokaż wyniki"
  voted: "Zagłosowano"

locales/zh-CN.yml

@@ -489,7 +489,7 @@ common/views/components/user-menu.vue:
 common/views/components/poll.vue:
  vote-to: "为\"{}\"投票"
  vote-count: "{}票"
- total-users: "{} 人投票"
+ total-votes: "{} 人投票"
  vote: "投票"
  show-result: "显示结果"
  voted: "已投票"

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

@@ -12,9 +12,35 @@
  </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" min="0">{{ $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>
 
@@ -26,7 +52,13 @@ export default Vue.extend({
  i18n: i18n('common/views/components/poll-editor.vue'),
  data() {
  return {
- choices: ['', '']
+ choices: ['', ''],
+ multiple: false,
+ expiration: 'infinite',
+ atDate: new Date(Date.now() + 86400),
+ atTime: new Date(Date.now() + 86400),
+ after: 0,
+ unit: 'second'
  };
  },
  watch: {
@@ -55,15 +87,45 @@ export default Vue.extend({
  },
 
  get() {
+ const at = () => {
+ const date = new Date(this.atDate);
+ return new Date(`${date.getUTCFullYear()}-${('00' + (date.getUTCMonth() + 1)).slice(-2)}-${('00' + date.getUTCDate()).slice(-2)}T${this.atTime}:00Z`).getTime();
+ };
+
+ 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 +190,7 @@ export default Vue.extend({
  margin 8px 0 0 0
  vertical-align top
  color var(--primary)
+ z-index 1
 
  > .destroy
  position absolute
@@ -142,4 +205,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>

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

@@ -1,20 +1,22 @@
 <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"/>
  <span class="votes" v-if="showResult">({{ $t('vote-count').replace('{}', choice.votes) }})</span>
  </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
 

src/client/app/common/views/components/ui/input.vue

@@ -366,6 +366,9 @@ root(fill)
  &[type='file']
  display none
 
+ &[type='number']
+ text-align right
+
  > .prefix
  > .suffix
  display block

src/client/app/desktop/views/components/post-form.vue

@@ -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();
  },