Add refresh timeout

This commit is contained in:
2024-02-23 23:25:46 +01:00
parent 837f5fc35d
commit ac0179e402
2 changed files with 7 additions and 4 deletions

View File

@@ -1,6 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
const { data: activity } = await $fetch('/api/activity') const { data: activity, refresh } = await useAsyncData('activity', () => $fetch('/api/activity'))
const codingActivity = computed(() => activity.activities.filter(activity => activity.name === 'Visual Studio Code')[0]) const codingActivity = computed(() => activity.value.data.activities.filter(activity => activity.name === 'Visual Studio Code')[0])
function formatDate(date) { function formatDate(date) {
return `${useDateFormat(date, 'DD MMM YYYY').value} at ${useDateFormat(date, 'HH:mm:ss').value}` return `${useDateFormat(date, 'DD MMM YYYY').value} at ${useDateFormat(date, 'HH:mm:ss').value}`
} }
@@ -9,11 +10,13 @@ const CardUi = {
footer: { padding: 'px-4 py-2' }, footer: { padding: 'px-4 py-2' },
body: { base: 'h-full flex items-center' }, body: { base: 'h-full flex items-center' },
} }
useIntervalFn(async () => await refresh(), 5000)
</script> </script>
<template> <template>
<UCard class="mx-8 md:mx-0 f-auto flex flex-col justify-between" :ui="CardUi"> <UCard class="mx-8 md:mx-0 f-auto flex flex-col justify-between" :ui="CardUi">
<div v-if="activity && activity.activities" class="flex items-center gap-x-4"> <div v-if="activity && activity.data.activities" class="flex items-center gap-x-4">
<p <p
class="uppercase tracking-widest text-sm" class="uppercase tracking-widest text-sm"
:style="{ writingMode: 'vertical-rl', textOrientation: 'sideways-right' }" :style="{ writingMode: 'vertical-rl', textOrientation: 'sideways-right' }"

View File

@@ -18,7 +18,7 @@ const CardUi = {
</p> </p>
<div v-if="stats"> <div v-if="stats">
<div class="flex gap-4 items-center"> <div class="flex gap-4 items-center">
<div> <div class="text-md">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<h3>Total hours:</h3> <h3>Total hours:</h3>
<p>{{ usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0) }} hours</p> <p>{{ usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0) }} hours</p>