diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue index 39a130c3..1eedac3f 100644 --- a/components/status/StatusCard.vue +++ b/components/status/StatusCard.vue @@ -85,6 +85,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions) {{ status.spoilerText }} + STATUS_VISIBILITIES.find(v => v.value === sta {{ status.spoilerText }} + +import type { Poll } from 'masto' + +const { poll: _poll } = defineProps<{ + poll: Poll +}>() +const poll = reactive({ ..._poll }) + +function toPercentage(num: number) { + const percentage = 100 * num + return `${percentage.toFixed(1).replace(/\.?0+$/, '')}%` +} +const expiredTimeAgo = useTimeAgo(poll.expiresAt!) + +const masto = useMasto() +async function vote(e: Event) { + const formData = new FormData(e.target as HTMLFormElement) + const choices = formData.getAll('choices') as string[] + await masto.poll.vote(poll.id, { choices }) + + // Update the poll optimistically + for (const [index, option] of poll.options.entries()) { + if (choices.includes(String(index))) + option.votesCount = (option.votesCount || 0) + 1 + } + poll.voted = true + poll.votesCount++ + poll.votersCount = (poll.votersCount || 0) + 1 +} + + + + + + + + {{ option.title }} + + + Vote + + + + + + + + {{ option.title }} + + + + + + + {{ poll.votesCount ? toPercentage((option.votesCount || 0) / (poll.votesCount)) : '0%' }} + + + + + {{ poll.votersCount }} votes · {{ poll.expired ? 'finished' : 'ends' }} {{ expiredTimeAgo }} + + +