39 lines
797 B
Vue
39 lines
797 B
Vue
<script setup lang="ts">
|
||
import type { Node } from "~/types"
|
||
|
||
const props = defineProps<{
|
||
node: Node
|
||
}>()
|
||
|
||
defineEmits<{
|
||
route: []
|
||
}>()
|
||
|
||
const label = computed(() => {
|
||
const { startDate, endDate } = props.node.event
|
||
const s = eventTime(startDate)
|
||
const e = eventTime(endDate)
|
||
const dur = eventDuration(startDate, endDate)
|
||
return (s === e ? s : `${s} – ${e}`) + (dur ? ` · ${dur}` : "")
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<MetaPill
|
||
v-if="!node.event.startDate"
|
||
icon="carbon:calendar-add"
|
||
ghost
|
||
:title="$t('voyage.pill.timeAdd')"
|
||
@click="$emit('route')"
|
||
>
|
||
{{ $t("voyage.pill.dateGhost") }}
|
||
</MetaPill>
|
||
<MetaPill
|
||
v-else
|
||
icon="carbon:time"
|
||
:title="$t('voyage.pill.timeView')"
|
||
@click="$emit('route')"
|
||
>
|
||
{{ label }}
|
||
</MetaPill>
|
||
</template>
|