pause and resume in record controls

src/modules/record/components/RecordControls.vue

@@ -90,11 +90,32 @@ whenever(logicAnd(notUsingInput, s), () => {
 
 <template>
   <div class="record-controls buttons has-addons">
+    <template v-if="record && recordStore.currentStepId">
+      <button
+        class="button is-primary is-light"
+        v-if="record.breakTime"
+        @click="recordStore.resume(taskId)"
+      >
+        resume
+      </button>
+      <button
+        class="button is-primary is-light"
+        v-else
+        @click="recordStore.pause(taskId)"
+      >
+        pause
+      </button>
+    </template>
+
     <template v-if="!record || !record.end">
       <button v-if="canStart" @click="startRecording" class="button is-primary">
         start
       </button>
-      <button class="button is-primary is-light" v-else @click="nextStep">
+      <button
+        class="button is-primary is-light"
+        v-else-if="!record?.breakTime"
+        @click="nextStep"
+      >
         next
       </button>
     </template>

src/modules/record/components/StepRecord.vue

@@ -14,16 +14,20 @@ const props = defineProps<{
 const taskStore = useTaskStore()
 const recordStore = useTaskRecordStore()
 
+const record = computed(() => recordStore.getTaskRecord(props.taskId))
 const step = computed(() => taskStore.getStep(props.taskId, props.stepId))
 const stepRecord = computed(() =>
   recordStore.getStepRecord(props.taskId, props.stepId)
 )
 const isCurrentStep = computed(() => recordStore.currentStepId === props.stepId)
+const isInBreakTime = computed(() => !!record.value?.breakTime)
 
 const now = ref(toISODate(new Date()))
 
 const id = setInterval(() => {
-  now.value = toISODate(new Date())
+  if (!isInBreakTime.value) {
+    now.value = toISODate(new Date())
+  }
 }, 1000)
 
 onUnmounted(() => clearInterval(id))

src/modules/record/models/task-record.ts

@@ -7,6 +7,7 @@ export class TaskRecord implements Recordable {
   public end: ISODate | undefined = undefined
   public stepRecords: Record<string, TimeRange> = {}
   public notes = ''
+  public breakTime?: TimeRange
 
   public constructor(public readonly taskId: string) {}
 
@@ -20,6 +21,7 @@ export class TaskRecord implements Recordable {
     taskRecord.stepRecords = recordable.stepRecords
     taskRecord.start = recordable.start
     taskRecord.end = recordable.end
+    taskRecord.breakTime = recordable.breakTime
 
     return taskRecord
   }

src/modules/record/stores/useTaskRecordStore.ts

@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
 import type { Recordable } from '../interfaces/recordable'
 import type { TimeRange } from '../interfaces/time-range'
 import { TaskRecord } from '../models/task-record'
+import { addBreakTimeToStepRecords } from '../services/breaktime-service'
 
 export interface TaskRecordStoreState {
   currentStepId: string | null
@@ -116,24 +117,47 @@ export const useTaskRecordStore = defineStore('task-record-store', {
       this.records[taskId].stepRecords = {}
       this.records[taskId].end = undefined
     },
-    pause(recordId: string) {
-      if (this.records[recordId]?.breakTime) {
+    pause(taskId: string) {
+      if (this.records[taskId]?.breakTime) {
         return
       }
 
-      this.records[recordId].breakTime = {
-        start: toISODate(new Date())
-      }
+      const record = this.records[taskId]
+
+      this.$patch({
+        records: {
+          ...this.records,
+          [taskId]: {
+            ...record,
+            breakTime: {
+              start: toISODate(new Date())
+            }
+          }
+        }
+      })
     },
-    resume(recordId: string) {
-      console.log(recordId)
+    resume(taskId: string) {
+      const record = this.records[taskId]
 
-      if (!this.records[recordId].breakTime) {
+      if (!record?.breakTime) {
         return
       }
 
-      // TODO: remove the time of the break for all steps of the record
-      this.records[recordId].breakTime = undefined
+      record.breakTime.end = toISODate(new Date())
+
+      const newRecord: Recordable = {
+        ...addBreakTimeToStepRecords(record),
+        breakTime: undefined
+      }
+
+      this.$patch({
+        records: {
+          ...this.records,
+          [taskId]: {
+            ...newRecord
+          }
+        }
+      })
     }
   },
   getters: {

src/shared/format-date.ts

@@ -1,6 +1,6 @@
 import type { ISODate } from './types/date'
 
-// const isDevelopment = () => process.env.NODE_ENV === 'development'
+const isTimeSpeedUp = () => process.env.NODE_ENV === 'development'
 
 export const formatDate = (date: Date | string) =>
   new Date(date).toLocaleString()
@@ -17,5 +17,5 @@ export const formatLongDate = (date: Date | ISODate) =>
 
 export const formatDiffInMinutes = (date1: ISODate, date2: ISODate) => {
   const diffInMs = new Date(date2).getTime() - new Date(date1).getTime()
-  return Math.max(0, Math.round(diffInMs / (1000 * 60)))
+  return Math.max(0, Math.round(diffInMs / (1000 * (isTimeSpeedUp() ? 1 : 60))))
 }