diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2022-08-31 00:24:33 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2022-08-31 00:24:33 +0900 |
| commit | 786b150ea75111b5f6102c256d5cfa42cb83d1fb (patch) | |
| tree | d552d0c371829d7ff027890d1036a80bb08517f7 /packages/client/src/components/poll-editor.vue | |
| parent | update deps (diff) | |
| download | sharkey-786b150ea75111b5f6102c256d5cfa42cb83d1fb.tar.gz sharkey-786b150ea75111b5f6102c256d5cfa42cb83d1fb.tar.bz2 sharkey-786b150ea75111b5f6102c256d5cfa42cb83d1fb.zip | |
refactor(client): align filename to component name
Diffstat (limited to 'packages/client/src/components/poll-editor.vue')
| -rw-r--r-- | packages/client/src/components/poll-editor.vue | 219 |
1 files changed, 0 insertions, 219 deletions
diff --git a/packages/client/src/components/poll-editor.vue b/packages/client/src/components/poll-editor.vue deleted file mode 100644 index 6c1a4cc89f..0000000000 --- a/packages/client/src/components/poll-editor.vue +++ /dev/null @@ -1,219 +0,0 @@ -<template> -<div class="zmdxowus"> - <p v-if="choices.length < 2" class="caution"> - <i class="fas fa-exclamation-triangle"></i>{{ i18n.ts._poll.noOnlyOneChoice }} - </p> - <ul> - <li v-for="(choice, i) in choices" :key="i"> - <MkInput class="input" small :model-value="choice" :placeholder="$t('_poll.choiceN', { n: i + 1 })" @update:modelValue="onInput(i, $event)"> - </MkInput> - <button class="_button" @click="remove(i)"> - <i class="fas fa-times"></i> - </button> - </li> - </ul> - <MkButton v-if="choices.length < 10" class="add" @click="add">{{ i18n.ts.add }}</MkButton> - <MkButton v-else class="add" disabled>{{ i18n.ts._poll.noMore }}</MkButton> - <MkSwitch v-model="multiple">{{ i18n.ts._poll.canMultipleVote }}</MkSwitch> - <section> - <div> - <MkSelect v-model="expiration" small> - <template #label>{{ i18n.ts._poll.expiration }}</template> - <option value="infinite">{{ i18n.ts._poll.infinite }}</option> - <option value="at">{{ i18n.ts._poll.at }}</option> - <option value="after">{{ i18n.ts._poll.after }}</option> - </MkSelect> - <section v-if="expiration === 'at'"> - <MkInput v-model="atDate" small type="date" class="input"> - <template #label>{{ i18n.ts._poll.deadlineDate }}</template> - </MkInput> - <MkInput v-model="atTime" small type="time" class="input"> - <template #label>{{ i18n.ts._poll.deadlineTime }}</template> - </MkInput> - </section> - <section v-else-if="expiration === 'after'"> - <MkInput v-model="after" small type="number" class="input"> - <template #label>{{ i18n.ts._poll.duration }}</template> - </MkInput> - <MkSelect v-model="unit" small> - <option value="second">{{ i18n.ts._time.second }}</option> - <option value="minute">{{ i18n.ts._time.minute }}</option> - <option value="hour">{{ i18n.ts._time.hour }}</option> - <option value="day">{{ i18n.ts._time.day }}</option> - </MkSelect> - </section> - </div> - </section> -</div> -</template> - -<script lang="ts" setup> -import { ref, watch } from 'vue'; -import MkInput from './form/input.vue'; -import MkSelect from './form/select.vue'; -import MkSwitch from './form/switch.vue'; -import MkButton from './ui/button.vue'; -import { formatDateTimeString } from '@/scripts/format-time-string'; -import { addTime } from '@/scripts/time'; -import { i18n } from '@/i18n'; - -const props = defineProps<{ - modelValue: { - expiresAt: string; - expiredAfter: number; - choices: string[]; - multiple: boolean; - }; -}>(); -const emit = defineEmits<{ - (ev: 'update:modelValue', v: { - expiresAt: string; - expiredAfter: number; - choices: string[]; - multiple: boolean; - }): void; -}>(); - -const choices = ref(props.modelValue.choices); -const multiple = ref(props.modelValue.multiple); -const expiration = ref('infinite'); -const atDate = ref(formatDateTimeString(addTime(new Date(), 1, 'day'), 'yyyy-MM-dd')); -const atTime = ref('00:00'); -const after = ref(0); -const unit = ref('second'); - -if (props.modelValue.expiresAt) { - expiration.value = 'at'; - atDate.value = atTime.value = props.modelValue.expiresAt; -} else if (typeof props.modelValue.expiredAfter === 'number') { - expiration.value = 'after'; - after.value = props.modelValue.expiredAfter / 1000; -} else { - expiration.value = 'infinite'; -} - -function onInput(i, value) { - choices.value[i] = value; -} - -function add() { - choices.value.push(''); - // TODO - // nextTick(() => { - // (this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus(); - // }); -} - -function remove(i) { - choices.value = choices.value.filter((_, _i) => _i !== i); -} - -function get() { - const calcAt = () => { - return new Date(`${atDate.value} ${atTime.value}`).getTime(); - }; - - const calcAfter = () => { - let base = parseInt(after.value); - switch (unit.value) { - case 'day': base *= 24; - // fallthrough - case 'hour': base *= 60; - // fallthrough - case 'minute': base *= 60; - // fallthrough - case 'second': return base *= 1000; - default: return null; - } - }; - - return { - choices: choices.value, - multiple: multiple.value, - ...( - expiration.value === 'at' ? { expiresAt: calcAt() } : - expiration.value === 'after' ? { expiredAfter: calcAfter() } : {} - ), - }; -} - -watch([choices, multiple, expiration, atDate, atTime, after, unit], () => emit('update:modelValue', get()), { - deep: true, -}); -</script> - -<style lang="scss" scoped> -.zmdxowus { - padding: 8px 16px; - - > .caution { - margin: 0 0 8px 0; - font-size: 0.8em; - color: #f00; - - > i { - margin-right: 4px; - } - } - - > ul { - display: block; - margin: 0; - padding: 0; - list-style: none; - - > li { - display: flex; - margin: 8px 0; - padding: 0; - width: 100%; - - > .input { - flex: 1; - } - - > button { - width: 32px; - padding: 4px 0; - } - } - } - - > .add { - margin: 8px 0; - z-index: 1; - } - - > section { - margin: 16px 0 0 0; - - > div { - margin: 0 8px; - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 12px; - - &:last-child { - flex: 1 0 auto; - - > div { - flex-grow: 1; - } - - > section { - // MAGIC: Prevent div above from growing unless wrapped to its own line - flex-grow: 9999; - align-items: end; - display: flex; - gap: 4px; - - > .input { - flex: 1 1 auto; - } - } - } - } - } -} -</style> |