PronounsPage/components/Timezone.vue

<template>
    <div v-if="timezone && dt">
        <p v-if="!isStatic">
            <Icon v="clock" />
            <T
                :params="{
                    time: dt.toLocaleString(DateTime.TIME_SIMPLE),
                    weekday: dt.toFormat('cccc'),
                }"
            >
                profile.timezone.time
            </T>
            <small class="text-muted">(UTC{{ timezone.offset ? timezone.offsetFormatted : '' }})</small>
            <!-- (<Tooltip :text="timezone.long">{{timezone.short}}</Tooltip>) -->
        </p>
        <p v-if="value.area || value.loc">
            <template v-if="value.area">
                <Icon :v="timezone.icon" />
                <T>profile.timezone.areas.{{ timezone.area }}</T>
            </template>
            <span v-if="value.area && value.loc">/</span>
            <template v-if="value.loc">
                <Icon v="map-marked-alt" />
                {{ timezone.displayLocation }}
                <br><small class="text-muted"><T>profile.timezone.approximate</T></small>
            </template>
        </p>
    </div>
</template>

<script lang="ts">
import { DateTime } from 'luxon';
import { defineComponent } from 'vue';
import type { PropType } from 'vue';

import useTimezone from '../composables/useTimezone.ts';
import type { TimezoneInfo } from '../composables/useTimezone.ts';
import type { Timezone } from '../src/profile.ts';

interface Data {
    timezone: TimezoneInfo | null;
    DateTime: typeof DateTime;
    dt: DateTime | undefined;
}

export default defineComponent({
    props: {
        value: { required: true, type: Object as PropType<Timezone> },
        isStatic: { type: Boolean },
    },
    setup() {
        const { getTimezoneInfo } = useTimezone();
        return {
            getTimezoneInfo,
        };
    },
    data(): Data {
        return {
            timezone: this.value ? this.getTimezoneInfo(this.value.tz) : null,
            DateTime,
            dt: undefined,
        };
    },
    mounted() {
        if (!this.value) {
            return;
        }

        this.update();
        setInterval(this.update, 500);
    },
    methods: {
        update(): void {
            this.dt = DateTime.local().setZone(this.value.tz);
            this.$forceUpdate();
        },
    },
});
</script>