mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-12-25 03:58:22 +09:00
725600da8f
* 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
230 lines
5.0 KiB
Vue
230 lines
5.0 KiB
Vue
<template>
|
|
<div class="mk-poll-editor">
|
|
<p class="caution" v-if="choices.length < 2">
|
|
<fa icon="exclamation-triangle"/>{{ $t('no-only-one-choice') }}
|
|
</p>
|
|
<ul ref="choices">
|
|
<li v-for="(choice, i) in choices">
|
|
<input :value="choice" @input="onInput(i, $event)" :placeholder="$t('choice-n').replace('{}', i + 1)">
|
|
<button @click="remove(i)" :title="$t('remove')">
|
|
<fa icon="times"/>
|
|
</button>
|
|
</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: ['', ''],
|
|
multiple: false,
|
|
expiration: 'infinite',
|
|
atDate: moment().add(1, 'day').toISOString().split('T')[0],
|
|
atTime: '00:00',
|
|
after: 0,
|
|
unit: 'second'
|
|
};
|
|
},
|
|
watch: {
|
|
choices() {
|
|
this.$emit('updated');
|
|
}
|
|
},
|
|
methods: {
|
|
onInput(i, e) {
|
|
Vue.set(this.choices, i, e.target.value);
|
|
},
|
|
|
|
add() {
|
|
this.choices.push('');
|
|
this.$nextTick(() => {
|
|
(this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus();
|
|
});
|
|
},
|
|
|
|
remove(i) {
|
|
this.choices = this.choices.filter((_, _i) => _i != i);
|
|
},
|
|
|
|
destroy() {
|
|
this.$emit('destroyed');
|
|
},
|
|
|
|
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),
|
|
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';
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.mk-poll-editor
|
|
padding 8px
|
|
|
|
> .caution
|
|
margin 0 0 8px 0
|
|
font-size 0.8em
|
|
color #f00
|
|
|
|
> [data-icon]
|
|
margin-right 4px
|
|
|
|
> ul
|
|
display block
|
|
margin 0
|
|
padding 0
|
|
list-style none
|
|
|
|
> li
|
|
display block
|
|
margin 8px 0
|
|
padding 0
|
|
width 100%
|
|
|
|
&:first-child
|
|
margin-top 0
|
|
|
|
&:last-child
|
|
margin-bottom 0
|
|
|
|
> input
|
|
padding 6px 8px
|
|
width 300px
|
|
font-size 14px
|
|
color var(--inputText)
|
|
background var(--pollEditorInputBg)
|
|
border solid 1px var(--primaryAlpha01)
|
|
border-radius 4px
|
|
|
|
&:hover
|
|
border-color var(--primaryAlpha02)
|
|
|
|
&:focus
|
|
border-color var(--primaryAlpha05)
|
|
|
|
> button
|
|
padding 4px 8px
|
|
color var(--primaryAlpha04)
|
|
|
|
&:hover
|
|
color var(--primaryAlpha06)
|
|
|
|
&:active
|
|
color var(--primaryDarken30)
|
|
|
|
> .add
|
|
margin 8px 0 0 0
|
|
vertical-align top
|
|
color var(--primary)
|
|
z-index 1
|
|
|
|
> .destroy
|
|
position absolute
|
|
top 0
|
|
right 0
|
|
padding 4px 8px
|
|
color var(--primaryAlpha04)
|
|
|
|
&:hover
|
|
color var(--primaryAlpha06)
|
|
|
|
&: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>
|