✨ (watch) add a watch timer

src/modules/record/components/RecordControls.vue

@@ -160,3 +160,20 @@ onUnmounted(() => {
     </div>
   </div>
 </template>
+
+<style scoped lang="scss">
+.buttons {
+  display: flex;
+  justify-content: center;
+}
+
+.message {
+  display: none;
+}
+
+@media screen and (min-width: 769px) {
+  .message {
+    display: block;
+  }
+}
+</style>

src/modules/record/components/RecordWatch.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { Recordable } from '@/modules/record/interfaces/recordable'
+import { toISODate } from '@/shared/types/date'
+import { computed, onUnmounted, ref } from 'vue'
+
+const props = defineProps<{
+  record: Recordable
+}>()
+
+const record = computed(() => props.record)
+
+const now = ref(toISODate(new Date()))
+const id = setInterval(() => {
+  now.value = toISODate(new Date())
+}, 1000)
+onUnmounted(() => clearInterval(id))
+
+const timer = computed(() =>
+  Math.max(
+    Math.floor(
+      (new Date(now.value).getTime() - new Date(record.value.start).getTime()) /
+        1000
+    ),
+    0
+  )
+)
+
+const minutes = computed(() =>
+  Math.floor(timer.value / 60)
+    .toString()
+    .padStart(2, '0')
+)
+const seconds = computed(() => (timer.value % 60).toString().padStart(2, '0'))
+</script>
+
+<template>
+  <div class="record-watch" v-if="record.currentStepId">
+    {{ minutes }}:{{ seconds }}
+  </div>
+  <div class="record-watch" v-else>00:00</div>
+</template>
+
+<style scoped lang="scss">
+.record-watch {
+}
+</style>

src/modules/record/components/TaskRecord.vue

@@ -2,13 +2,13 @@
 import EstimationTimeArrival from '@/components/EstimationTimeArrival.vue'
 import RecordResume from '@/modules/record/components/RecordResume.vue'
 import { useTaskStore } from '@/modules/task/stores/useTask.store'
-import { formatLongDate } from '@/shared/format-date'
 import { useLoopyTitle } from '@/shared/useLoopyTitle'
 import { computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useTaskRecordStore } from '../stores/useTaskRecordStore'
 import RecordControls from './RecordControls.vue'
 import RecordProgress from './RecordProgress.vue'
+import RecordWatch from './RecordWatch.vue'
 import StepRecord from './StepRecord.vue'
 
 const props = defineProps<{
@@ -42,10 +42,10 @@ const recordNotes = computed(() => recordStore.getRecordNotes(props.taskId))
       </button>
       {{ task.title }}
     </h1>
-    <h2 class="subtitle" v-if="record">
-      {{ formatLongDate(record.start) }}
+    <div class="timers" v-if="record">
       <estimation-time-arrival :estimation="task.totalEstimation" />
-    </h2>
+      <record-watch :record="record" />
+    </div>
     <record-controls v-if="record" :task-id="taskId" :record="record" />
     <record-progress :task-id="taskId" />
     <table class="table is-striped is-hoverable is-fullwidth">
@@ -98,6 +98,11 @@ const recordNotes = computed(() => recordStore.getRecordNotes(props.taskId))
   align-items: center;
 }
 
+.timers {
+  display: flex;
+  gap: 1rem;
+}
+
 table {
   display: block;
   overflow-x: auto;