From 6d1e59109af814b497a402cf417eed3790c7a233 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 5 Aug 2023 10:51:17 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(watch)=20add=20a=20watch=20timer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../record/components/RecordControls.vue      | 17 +++++++
 src/modules/record/components/RecordWatch.vue | 46 +++++++++++++++++++
 src/modules/record/components/TaskRecord.vue  | 13 ++++--
 3 files changed, 72 insertions(+), 4 deletions(-)
 create mode 100644 src/modules/record/components/RecordWatch.vue

diff --git a/src/modules/record/components/RecordControls.vue b/src/modules/record/components/RecordControls.vue
index 6c418cc..aa3885b 100644
--- a/src/modules/record/components/RecordControls.vue
+++ b/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>
diff --git a/src/modules/record/components/RecordWatch.vue b/src/modules/record/components/RecordWatch.vue
new file mode 100644
index 0000000..71032c5
--- /dev/null
+++ b/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>
diff --git a/src/modules/record/components/TaskRecord.vue b/src/modules/record/components/TaskRecord.vue
index 585b15b..e76a9b7 100644
--- a/src/modules/record/components/TaskRecord.vue
+++ b/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;