feat(time): add span-based attendance tracking under 2.0

frontend/components/displayRunningTime.vue

@@ -1,11 +1,18 @@
 <script setup>
 import dayjs from "dayjs";
+import { useNow } from "@vueuse/core";
+import { workingMinutes } from "~/utils/staffTimeSpans";
 
 const profileStore = useProfileStore();
 const toast = useToast()
 const staffTime = useStaffTime()
 
 const runningTimeInfo = ref({})
+const clock = useNow({ interval: 1000 })
+const workingDuration = computed(() => {
+    const minutes = workingMinutes(runningTimeInfo.value, clock.value.getTime())
+    return `${Math.floor(minutes / 60)}:${String(minutes % 60).padStart(2, '0')} h`
+})
 
 const projects = ref([])
 const platform = ref("default")
@@ -51,9 +58,12 @@ const stopStartedTime = async () => {
 <template>
   <div v-if="runningTimeInfo.started_at">
     <p>Start: {{dayjs(runningTimeInfo.started_at).format("HH:mm")}}</p>
-    <p>Dauer: {{dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') > 59 ? `${Math.floor(dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') / 60)}:${dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') % 60} h` : dayjs().diff(dayjs(runningTimeInfo.started_at),'minutes') + ' min' }}</p>
+    <p>Arbeitszeit: {{ workingDuration }}</p>
+    <p v-if="runningTimeInfo.paused">In Pause</p>
+    <UButton v-if="runningTimeInfo.model === 'spans-v2'" class="mt-2" variant="soft" :to="{ path: '/v2/time', query: { user_id: runningTimeInfo.user_id } }">Anwesenheit bearbeiten</UButton>
 
     <UFormField
+        v-if="runningTimeInfo.model !== 'spans-v2'"
         class="mt-2"
         label="Notizen:"
     >
@@ -62,6 +72,7 @@ const stopStartedTime = async () => {
       />
     </UFormField>
     <UFormField
+        v-if="runningTimeInfo.model !== 'spans-v2'"
         class="mt-2"
         label="Projekt:"
     >