refs #3301 Rewrite molecules/Toot/Poll with composition API
This commit is contained in:
parent
feb4ba7131
commit
f0d0a01503
|
@ -27,63 +27,77 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { mapState } from 'vuex'
|
import { defineComponent, computed, ref, toRefs, PropType } from 'vue'
|
||||||
|
import { Entity } from 'megalodon'
|
||||||
|
import { useI18next } from 'vue3-i18next'
|
||||||
|
import { useStore } from '@/store'
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
import TimeFormat from '~/src/constants/timeFormat'
|
import TimeFormat from '~/src/constants/timeFormat'
|
||||||
|
|
||||||
export default {
|
export default defineComponent({
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
pollRadio: null,
|
|
||||||
now: Date.now()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
props: {
|
||||||
poll: {
|
poll: {
|
||||||
type: Object,
|
type: Object as PropType<Entity.Poll>,
|
||||||
default: null
|
default: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
setup(props, ctx) {
|
||||||
...mapState('App', {
|
const store = useStore()
|
||||||
timeFormat: state => state.timeFormat,
|
const i18n = useI18next()
|
||||||
language: state => state.language
|
const { poll } = toRefs(props)
|
||||||
})
|
|
||||||
},
|
const timeFormat = computed(() => store.state.App.timeFormat)
|
||||||
methods: {
|
const language = computed(() => store.state.App.language)
|
||||||
parseDatetime(datetime, epoch) {
|
|
||||||
switch (this.timeFormat) {
|
const pollRadio = ref<string | null>(null)
|
||||||
case TimeFormat.Absolute.value:
|
const now = ref(Date.now())
|
||||||
return this.$t('cards.toot.poll.until', {
|
|
||||||
datetime: moment(datetime).format('YYYY-MM-DD HH:mm:ss')
|
const parseDatetime = (datetime: string | null, epoch: number) => {
|
||||||
})
|
switch (timeFormat.value) {
|
||||||
case TimeFormat.Relative.value:
|
case TimeFormat.Relative.value:
|
||||||
moment.locale(this.language)
|
moment.locale(language.value)
|
||||||
return this.$t('cards.toot.poll.left', {
|
return i18n.t('cards.toot.poll.left', {
|
||||||
datetime: moment(datetime).from(epoch)
|
datetime: moment(datetime).from(epoch)
|
||||||
})
|
})
|
||||||
|
default:
|
||||||
|
return i18n.t('cards.toot.poll.until', {
|
||||||
|
datetime: moment(datetime).format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
})
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
percentage(option_votes, poll_votes) {
|
const percentage = (option_votes: number | null, poll_votes: number) => {
|
||||||
if (poll_votes === 0) {
|
if (poll_votes === 0) {
|
||||||
return 0
|
return '0'
|
||||||
|
}
|
||||||
|
if (!option_votes) {
|
||||||
|
return '0'
|
||||||
}
|
}
|
||||||
return ((option_votes * 100) / poll_votes).toFixed(0)
|
return ((option_votes * 100) / poll_votes).toFixed(0)
|
||||||
},
|
}
|
||||||
vote() {
|
const vote = () => {
|
||||||
if (this.pollRadio !== null) {
|
if (pollRadio !== null) {
|
||||||
this.$emit('vote', [this.pollRadio])
|
ctx.emit('vote', [pollRadio.value])
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
progress(percent) {
|
const progress = (percent: string) => {
|
||||||
return `width: ${percent}%`
|
return `width: ${percent}%`
|
||||||
},
|
}
|
||||||
refresh() {
|
const refresh = () => {
|
||||||
this.$emit('refresh', this.poll.id)
|
ctx.emit('refresh', poll.value.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
pollRadio,
|
||||||
|
now,
|
||||||
|
parseDatetime,
|
||||||
|
percentage,
|
||||||
|
vote,
|
||||||
|
progress,
|
||||||
|
refresh
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
Loading…
Reference in New Issue