|
@ -1,17 +1,13 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div v-if="modifiedOtls.length > 0" class="text-xs text-gray-400"> |
|
|
<div v-if="props.client.oneTimeLink" class="text-xs text-gray-400"> |
|
|
<div v-for="link in modifiedOtls" :key="link.oneTimeLink"> |
|
|
<a :href="'./cnf/' + props.client.oneTimeLink.oneTimeLink">{{ path }}</a> |
|
|
<a :href="'./cnf/' + link.oneTimeLink">{{ link.path ?? 'Loading' }}</a> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
<script setup lang="ts"> |
|
|
const props = defineProps<{ client: LocalClient }>(); |
|
|
const props = defineProps<{ client: LocalClient }>(); |
|
|
|
|
|
|
|
|
const modifiedOtls = ref< |
|
|
const path = ref('Loading...'); |
|
|
(LocalClient['oneTimeLinks'][number] & { path?: string })[] |
|
|
|
|
|
>(props.client.oneTimeLinks); |
|
|
|
|
|
|
|
|
|
|
|
const timer = ref<NodeJS.Timeout | null>(null); |
|
|
const timer = ref<NodeJS.Timeout | null>(null); |
|
|
|
|
|
|
|
@ -19,22 +15,23 @@ const { localeProperties } = useI18n(); |
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
onMounted(() => { |
|
|
timer.value = setIntervalImmediately(() => { |
|
|
timer.value = setIntervalImmediately(() => { |
|
|
for (const link of modifiedOtls.value) { |
|
|
if (!props.client.oneTimeLink) { |
|
|
const timeLeft = new Date(link.expiresAt).getTime() - Date.now(); |
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const timeLeft = |
|
|
|
|
|
new Date(props.client.oneTimeLink.expiresAt).getTime() - Date.now(); |
|
|
|
|
|
|
|
|
if (timeLeft <= 0) { |
|
|
if (timeLeft <= 0) { |
|
|
link.path = `${document.location.protocol}//${document.location.host}/cnf/${link.oneTimeLink} (00:00)`; |
|
|
path.value = `${document.location.protocol}//${document.location.host}/cnf/${props.client.oneTimeLink.oneTimeLink} (00:00)`; |
|
|
continue; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const formatter = new Intl.DateTimeFormat( |
|
|
const formatter = new Intl.DateTimeFormat(localeProperties.value.language, { |
|
|
localeProperties.value.language, |
|
|
|
|
|
{ |
|
|
|
|
|
minute: '2-digit', |
|
|
minute: '2-digit', |
|
|
second: '2-digit', |
|
|
second: '2-digit', |
|
|
hourCycle: 'h23', |
|
|
hourCycle: 'h23', |
|
|
} |
|
|
}); |
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
const minutes = Math.floor(timeLeft / 60000); |
|
|
const minutes = Math.floor(timeLeft / 60000); |
|
|
const seconds = Math.floor((timeLeft % 60000) / 1000); |
|
|
const seconds = Math.floor((timeLeft % 60000) / 1000); |
|
@ -43,8 +40,7 @@ onMounted(() => { |
|
|
date.setMinutes(minutes); |
|
|
date.setMinutes(minutes); |
|
|
date.setSeconds(seconds); |
|
|
date.setSeconds(seconds); |
|
|
|
|
|
|
|
|
link.path = `${document.location.protocol}//${document.location.host}/cnf/${link.oneTimeLink} (${formatter.format(date)})`; |
|
|
path.value = `${document.location.protocol}//${document.location.host}/cnf/${props.client.oneTimeLink.oneTimeLink} (${formatter.format(date)})`; |
|
|
} |
|
|
|
|
|
}, 1000); |
|
|
}, 1000); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|