feat: polls (#210)

This commit is contained in:
Daniel Roe 2022-11-29 20:29:02 +00:00 committed by GitHub
parent 0e7076b991
commit 9af2956b1e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 65 additions and 0 deletions

View file

@ -85,6 +85,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
{{ status.spoilerText }} {{ status.spoilerText }}
</template> </template>
<StatusBody :status="status" /> <StatusBody :status="status" />
<StatusPoll v-if="status.poll" :poll="status.poll" />
<StatusMedia <StatusMedia
v-if="status.mediaAttachments?.length" v-if="status.mediaAttachments?.length"
:status="status" :status="status"

View file

@ -30,6 +30,7 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
{{ status.spoilerText }} {{ status.spoilerText }}
</template> </template>
<StatusBody :status="status" :with-action="false" text-2xl /> <StatusBody :status="status" :with-action="false" text-2xl />
<StatusPoll v-if="status.poll" :poll="status.poll" />
<StatusMedia <StatusMedia
v-if="status.mediaAttachments?.length" v-if="status.mediaAttachments?.length"
:status="status" :status="status"

View file

@ -0,0 +1,63 @@
<script setup lang="ts">
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
}
</script>
<template>
<div flex flex-col w-full items-stretch gap-3>
<form v-if="!poll.voted && !poll.expired" flex flex-col gap-4 accent-primary @submit.prevent="vote">
<label v-for="(option, index) of poll.options" :key="index" flex items-center gap-2 px-2>
<input name="choices" :value="index" :type="poll.multiple ? 'checkbox' : 'radio'">
{{ option.title }}
</label>
<button btn-solid>
Vote
</button>
</form>
<template v-else>
<div v-for="(option, index) of poll.options" :key="index" flex justify-between p-1 relative :style="{ '--bar-width': toPercentage((option.votesCount || 0) / poll.votesCount) }">
<div absolute top-0 left-0 bottom-0 bg-primary-active rounded-lg h-full class="w-[var(--bar-width)]" />
<div z-1 flex items-center gap-1 px-1>
<div>
{{ option.title }}
</div>
<div v-if="poll.voted && poll.ownVotes?.includes(index)">
<div i-ri:checkbox-circle-line />
</div>
</div>
<div z-1>
{{ poll.votesCount ? toPercentage((option.votesCount || 0) / (poll.votesCount)) : '0%' }}
</div>
</div>
</template>
<div text-sm>
{{ poll.votersCount }} votes &middot; {{ poll.expired ? 'finished' : 'ends' }} {{ expiredTimeAgo }}
</div>
</div>
</template>