From a10c60e4a808d93e131bb64e1dc027b5f3c3e4d3 Mon Sep 17 00:00:00 2001
From: SamuelSlavik <samuel.slavik@protonmail.com>
Date: Mon, 4 Mar 2024 23:51:03 +0100
Subject: [PATCH 1/4] Converted 12hour system into 24 hour system Fixed time
 parsing functions (recommended also change database timezone) Changed time
 inputs

---
 .../components/tracking/timeTrackerLine.vue   | 55 +++++++++++++++++-
 .../components/tracking/timeTrackingItem.vue  | 56 +++++++++++++++++--
 2 files changed, 105 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/tracking/timeTrackerLine.vue b/frontend/src/components/tracking/timeTrackerLine.vue
index b4220fb..a30be64 100644
--- a/frontend/src/components/tracking/timeTrackerLine.vue
+++ b/frontend/src/components/tracking/timeTrackerLine.vue
@@ -5,14 +5,65 @@
              label="Date"
              type="date"
              class="q-ma-sm" :readonly="timerRunning" />
+    <q-input
+      v-model="timeFrom"
+      mask="time"
+      :rules="['time']"
+      class="q-ma-sm"
+      label="From"
+    >
+      <template v-slot:append>
+        <q-icon name="access_time" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-time
+              v-model="timeFrom"
+              format24h
+            >
+              <div class="row items-center justify-end">
+                <q-btn v-close-popup label="Close" color="primary" flat />
+              </div>
+            </q-time>
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+    <q-input
+      v-model="timeTo"
+      mask="time"
+      :rules="['time']"
+      class="q-ma-sm"
+      label="To"
+    >
+      <template v-slot:append>
+        <q-icon name="access_time" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-time
+              v-model="timeTo"
+              format24h
+            >
+              <div class="row items-center justify-end">
+                <q-btn v-close-popup label="Close" color="primary" flat />
+              </div>
+            </q-time>
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+    <!--
     <q-input
              v-model="timeFrom"
              label="From"
-             type="time" class="q-ma-sm" :readonly="timerRunning" />
+             type="time" class="q-ma-sm"
+             :readonly="timerRunning"
+             :format24h="true"
+    />
     <q-input
              v-model="timeTo"
              label="To"
-             type="time" class="q-ma-sm" :readonly="timerRunning" />
+             type="time" class="q-ma-sm" :readonly="timerRunning"
+             min="00:00" max="23:59" pattern="[0-2][0-9]:[0-5][0-9]"
+    />
+    -->
     <q-select
               v-model="selectedProject"
               :options="projectOptions"
diff --git a/frontend/src/components/tracking/timeTrackingItem.vue b/frontend/src/components/tracking/timeTrackingItem.vue
index ad628ba..b567a42 100644
--- a/frontend/src/components/tracking/timeTrackingItem.vue
+++ b/frontend/src/components/tracking/timeTrackingItem.vue
@@ -5,6 +5,51 @@
              label="Date"
              type="date"
              class="q-ma-sm" readonly />
+    <q-input
+      v-model="timeFrom"
+      mask="time"
+      :rules="['time']"
+      class="q-ma-sm"
+      label="From"
+    >
+      <template v-slot:append>
+        <q-icon name="access_time" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-time
+              v-model="timeFrom"
+              format24h
+            >
+              <div class="row items-center justify-end">
+                <q-btn v-close-popup label="Close" color="primary" flat />
+              </div>
+            </q-time>
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+    <q-input
+      v-model="timeTo"
+      mask="time"
+      :rules="['time']"
+      class="q-ma-sm"
+      label="To"
+    >
+      <template v-slot:append>
+        <q-icon name="access_time" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-time
+              v-model="timeTo"
+              format24h
+            >
+              <div class="row items-center justify-end">
+                <q-btn v-close-popup label="Close" color="primary" flat />
+              </div>
+            </q-time>
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+    <!--
     <q-input
              v-model="timeFrom"
              label="From"
@@ -16,6 +61,7 @@
     <q-input
              v-model="task"
              label="Project" class="q-ma-sm" readonly />
+             -->
 
     <!-- Read only field showing computed duration -->
     <q-input
@@ -53,13 +99,15 @@ const itemDate = computed(() => {
 })
 
 const timeFrom = computed(() => {
-  const date = new Date(props.timeEntry.start_time)
-  return date.toISOString().substr(11, 5)
-})
+  const date = new Date(props.timeEntry.start_time);
+  const options = { timeZone: 'Europe/Prague', hour12: false, hour: '2-digit', minute: '2-digit' };
+  return date.toLocaleString('en-US', options);
+});
 
 const timeTo = computed(() => {
   const date = new Date(props.timeEntry.end_time)
-  return date.toISOString().substr(11, 5)
+  const options = { timeZone: 'Europe/Prague', hour12: false, hour: '2-digit', minute: '2-digit' };
+  return date.toLocaleString('en-US', options);
 })
 
 const duration = computed(() => {

From a5f7c71f108b88064de456bc9b601910dd91202d Mon Sep 17 00:00:00 2001
From: SamuelSlavik <samuel.slavik@protonmail.com>
Date: Tue, 5 Mar 2024 14:53:59 +0100
Subject: [PATCH 2/4] Add readonly flag to time inputs

---
 frontend/src/components/tracking/timeTrackingItem.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/components/tracking/timeTrackingItem.vue b/frontend/src/components/tracking/timeTrackingItem.vue
index b567a42..a4873cd 100644
--- a/frontend/src/components/tracking/timeTrackingItem.vue
+++ b/frontend/src/components/tracking/timeTrackingItem.vue
@@ -11,6 +11,7 @@
       :rules="['time']"
       class="q-ma-sm"
       label="From"
+      readonly
     >
       <template v-slot:append>
         <q-icon name="access_time" class="cursor-pointer">
@@ -18,6 +19,7 @@
             <q-time
               v-model="timeFrom"
               format24h
+              readonly
             >
               <div class="row items-center justify-end">
                 <q-btn v-close-popup label="Close" color="primary" flat />
@@ -33,6 +35,7 @@
       :rules="['time']"
       class="q-ma-sm"
       label="To"
+      readonly
     >
       <template v-slot:append>
         <q-icon name="access_time" class="cursor-pointer">
@@ -40,6 +43,7 @@
             <q-time
               v-model="timeTo"
               format24h
+              readonly
             >
               <div class="row items-center justify-end">
                 <q-btn v-close-popup label="Close" color="primary" flat />

From ad698311a4cf3c239da1c97f7ab2801538c3284c Mon Sep 17 00:00:00 2001
From: Spustnik <1psimonova1@gmail.com>
Date: Mon, 10 Jun 2024 11:00:15 +0000
Subject: [PATCH 3/4] Ensure continuous time tracking and add ongoing time
 tracking notification

---
 .../components/tracking/timeTrackerLine.vue   | 349 ++++++++++--------
 .../components/tracking/timeTrackingItem.vue  |  14 +-
 frontend/src/stores/timerStore.ts             |  60 +++
 3 files changed, 262 insertions(+), 161 deletions(-)
 create mode 100644 frontend/src/stores/timerStore.ts

diff --git a/frontend/src/components/tracking/timeTrackerLine.vue b/frontend/src/components/tracking/timeTrackerLine.vue
index a30be64..1a19806 100644
--- a/frontend/src/components/tracking/timeTrackerLine.vue
+++ b/frontend/src/components/tracking/timeTrackerLine.vue
@@ -1,182 +1,227 @@
 <template>
   <q-card class="q-mx-sm row">
-    <q-input
-             v-model="selectedDate"
-             label="Date"
-             type="date"
-             class="q-ma-sm" :readonly="timerRunning" />
-    <q-input
-      v-model="timeFrom"
-      mask="time"
-      :rules="['time']"
-      class="q-ma-sm"
-      label="From"
-    >
-      <template v-slot:append>
-        <q-icon name="access_time" class="cursor-pointer">
-          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
-            <q-time
-              v-model="timeFrom"
-              format24h
-            >
-              <div class="row items-center justify-end">
-                <q-btn v-close-popup label="Close" color="primary" flat />
-              </div>
-            </q-time>
-          </q-popup-proxy>
-        </q-icon>
-      </template>
-    </q-input>
-    <q-input
-      v-model="timeTo"
-      mask="time"
-      :rules="['time']"
-      class="q-ma-sm"
-      label="To"
-    >
-      <template v-slot:append>
-        <q-icon name="access_time" class="cursor-pointer">
-          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
-            <q-time
-              v-model="timeTo"
-              format24h
-            >
-              <div class="row items-center justify-end">
-                <q-btn v-close-popup label="Close" color="primary" flat />
-              </div>
-            </q-time>
-          </q-popup-proxy>
-        </q-icon>
-      </template>
-    </q-input>
-    <!--
-    <q-input
-             v-model="timeFrom"
-             label="From"
-             type="time" class="q-ma-sm"
-             :readonly="timerRunning"
-             :format24h="true"
-    />
-    <q-input
-             v-model="timeTo"
-             label="To"
-             type="time" class="q-ma-sm" :readonly="timerRunning"
-             min="00:00" max="23:59" pattern="[0-2][0-9]:[0-5][0-9]"
-    />
-    -->
-    <q-select
-              v-model="selectedProject"
-              :options="projectOptions"
-              label="Project" class="q-ma-sm" />
-
-    <!-- Read only field showing computed duration -->
-    <q-input
-             v-model="duration"
-             label="Duration"
-             type="text" class="q-ma-sm" readonly />
-
-    <q-btn v-if="!timerRunning"
-           label="Start" color="primary" class="q-ma-sm"
-           @click="startTimer" />
-    <q-btn v-if="timerRunning"
-           label="STOP"
-           color="negative"
-           class="q-ma-sm" @click="cancelTimer" />
-    <q-btn
-           type="submit"
-           label="Add"
-           color="primary"
-           class="q-ma-sm" @click="submitForm" :disable="!selectedDate || !timeFrom || !timeTo || !selectedProject" />
+    <q-input v-model="selectedDate" label="Date" type="date" class="q-ma-sm" />
+    <q-input v-model="timeFrom" label="From" type="time" class="q-ma-sm" />
+    <q-input v-model="timeTo" label="To" type="time" class="q-ma-sm" />
+    <q-select v-model="selectedProject" :options="projectOptions" label="Project" class="q-ma-sm" />
+    <q-input v-model="duration" label="Duration" type="text" class="q-ma-sm" readonly />
+    
+    <q-btn v-if="!timerRunning" label="Start" color="primary" class="q-ma-sm" @click="startTimer" />
+    <q-btn v-if="timerRunning" label="Finish" color="negative" class="q-ma-sm" @click="finish" />
+    <q-btn v-if="timerRunning" label="STOP" color="primary" class="q-ma-sm" @click="stopTimer" />
+    <q-btn type="submit" label="Add" color="primary" class="q-ma-sm" @click="submitForm" :disable="!isValidForm" />
   </q-card>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed, defineComponent, defineEmits } from 'vue'
+import { ref, computed, defineProps, defineEmits, onMounted, onBeforeUnmount, watch } from 'vue'
+import { useTimerStore } from 'src/stores/timerStore'
 import { TimeTrackingItemNew } from 'src/models'
-import { uid } from 'quasar'
+import { uid, Notify } from 'quasar'
 
-defineComponent({
-  name: 'TimeTrackerLine'
+const timerStore = useTimerStore()
+
+const projectOptions = ref([
+  'Anotace obrázků', 'Anotace textů', 'Anotace chodců', 'Vyhledávání obrázků', 'Vyhledávání textů', 
+  'Vyhledávání obličejů', 'Anotace Stránek', 'TextBite'
+])
+
+const selectedProject = computed({
+  get: () => timerStore.selectedProject,
+  set: value => timerStore.selectedProject = value
 })
 
-interface Props {
-  userId: string | null
-}
+const selectedDate = computed({
+  get: () => timerStore.selectedDate,
+  set: value => timerStore.selectedDate = value
+})
 
-const props = defineProps<Props>()
+const timeFrom = computed({
+  get: () => timerStore.timeFrom,
+  set: value => timerStore.timeFrom = value
+})
+
+const timeTo = computed({
+  get: () => timerStore.timeTo,
+  set: value => timerStore.timeTo = value
+})
 
+const timerRunning = computed(() => timerStore.timerRunning)
+
+const duration = computed(() => {
+  const timeStart = new Date(`01/01/2007 ${timeFrom.value}`)
+  const timeEnd = new Date(`01/01/2007 ${timeTo.value}`)
+  const diff = timeEnd.getTime() - timeStart.getTime()
+  return `${diff / 1000 / 60} min`
+})
+
+const isValidForm = computed(() => selectedDate.value && timeFrom.value && timeTo.value && selectedProject.value)
+
+const props = defineProps<{ userId: string | null }>()
 const emit = defineEmits(['addTimeEntry'])
 
-const projectOptions = ref(['Anotace obrázků', 'Anotace textů', 'Anotace chodců', 'Vyhledávání obrázků', 'Vyhledávání textů', 'Vyhledávání obličejů', 'Anotace Stránek', 'TextBite'])
-const selectedDate = ref('')
-const timeFrom = ref('')
-const timeTo = ref('')
-const selectedProject = ref(projectOptions.value[0].value)
-const timerRunning = ref(false)
-let intervalId: any = null
-
-function submitForm () {
-  timerRunning.value = false
-  clearInterval(intervalId)
-  intervalId = null
-
-  if (!selectedDate.value || !timeFrom.value || !timeTo.value || !selectedProject.value || !props.userId) {
-    return
-  }
-  const newTimeEntry: TimeTrackingItemNew = {
+function createNewTimeEntry(): TimeTrackingItemNew {
+  return {
     id: uid(),
-    user_id: props.userId,
-    start_time: selectedDate.value + ' ' + timeFrom.value,
-    end_time: selectedDate.value + ' ' + timeTo.value,
+    user_id: props.userId ?? '',
+    start_time: `${selectedDate.value} ${timeFrom.value}`,
+    end_time: `${selectedDate.value} ${timeTo.value}`,
     task: selectedProject.value,
     description: ''
   }
+}
 
+function addNewTimeEntry(newTimeEntry: TimeTrackingItemNew) {
   emit('addTimeEntry', newTimeEntry)
-  console.log(newTimeEntry)
-  reset()
-}
-
-function reset () {
-  selectedDate.value = new Date().toISOString().slice(0, 10)
-  timeFrom.value = new Date().toISOString().slice(11, 16)
-  timeTo.value = ''
-  timerRunning.value = false
-  clearInterval(intervalId)
-  intervalId = null
-}
-
-// Periodicaly update timer when timerRunnning is True
-function startTimer () {
-  selectedDate.value = new Date().toISOString().slice(0, 10)
-  timeFrom.value = new Date().toISOString().slice(11, 16)
-  timeTo.value = new Date().toISOString().slice(11, 16)
-  timerRunning.value = true
-  intervalId = setInterval(() => {
-    if (timerRunning.value) {
-      timeTo.value = new Date().toISOString().slice(11, 16)
+}
+
+function storeTimeEntry(newTimeEntry: TimeTrackingItemNew) {
+  const storedEntries = JSON.parse(localStorage.getItem('tempTimeEntries') || '[]')
+  storedEntries.push(newTimeEntry)
+  localStorage.setItem('tempTimeEntries', JSON.stringify(storedEntries))
+}
+
+function retrieveAndEmitStoredTimeEntries() {
+  const storedEntries = JSON.parse(localStorage.getItem('tempTimeEntries') || '[]')
+  storedEntries.forEach((entry: TimeTrackingItemNew) => {
+    emit('addTimeEntry', entry)
+  })
+  localStorage.removeItem('tempTimeEntries')
+}
+
+function saveFormState() {
+  localStorage.setItem('selectedDate', selectedDate.value)
+  localStorage.setItem('timeFrom', timeFrom.value)
+  localStorage.setItem('timeTo', timeTo.value)
+  localStorage.setItem('selectedProject', selectedProject.value)
+}
+
+function resetForm() {
+  timerStore.selectedDate = new Date().toISOString().slice(0, 10)
+  timerStore.timeFrom = ''
+  timerStore.timeTo = ''
+  timerStore.timerRunning = false
+  saveFormState()
+}
+
+function showNotification() {
+  timerStore.isNotificationVisible = true
+  timerStore.notificationRef = Notify.create({
+    message: `${selectedProject.value} (${timerStore.calculateDuration()} min)`,
+    color: 'primary',
+    position: 'bottom-right',
+    timeout: 0,
+    actions: [
+      {
+        label: 'Finish',
+        color: 'white',
+        handler: finishNotification,
+        style: 'background-color: #ff0000; color: #ffffff; border: 2px solid #ff0000; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); padding: 5px 10px; border-radius: 2px;',
+        class: 'q-btn'
+      }
+    ]
+  })
+}
+
+function hideNotification() {
+  if (timerStore.notificationRef) {
+    timerStore.notificationRef()
+    timerStore.notificationRef = null
+  }
+  timerStore.isNotificationVisible = false
+}
+
+function updateNotification() {
+  hideNotification()
+  showNotification()
+}
+
+function formatTime(date: Date) {
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false })
+}
+
+function updateTimer() {
+  if (timerRunning.value) {
+    const newTime = new Date()
+    timeTo.value = formatTime(newTime)
+    saveFormState()
+    if (newTime.getSeconds() === 0) {
+      updateNotification()
     }
-  }, 1000)
+  }
+}
+
+function startTimer() {
+  timerStore.startTimer(selectedProject.value)
+  timerStore.intervalId = setInterval(updateTimer, 1000)
+  showNotification()
 }
 
-function cancelTimer () {
-  timerRunning.value = false
-  clearInterval(intervalId)
-  intervalId = null
+function stopTimer() {
+  if (timerStore.intervalId) {
+    clearInterval(timerStore.intervalId)
+    timerStore.intervalId = null
+  }
+  hideNotification()
+  timerStore.stopTimer()
+  resetForm()
+}
+
+function finish() {
+  timeTo.value = formatTime(new Date())
+  timerStore.stopTimer()
+  clearInterval(timerStore.intervalId as unknown as number);
+  timerStore.intervalId = null
+  saveFormState()
+  hideNotification()
+  addNewTimeEntry(createNewTimeEntry())
+  resetForm()
+}
+
+function finishNotification() {
+  timeTo.value = formatTime(new Date())
+  timerStore.stopTimer()
+  clearInterval(timerStore.intervalId as unknown as number);
+  timerStore.intervalId = null
+  saveFormState()
+  hideNotification()
+  storeTimeEntry(createNewTimeEntry())
+  resetForm()
+}
+
+function submitForm() {
+  if (!isValidForm.value) return
+  addNewTimeEntry(createNewTimeEntry())
+  hideNotification()
+  resetForm()
 }
 
 onMounted(() => {
-  // init with today's date (only date without time)
-  selectedDate.value = new Date().toISOString().slice(0, 10)
-  selectedProject.value = projectOptions.value[0]
-})
+  selectedDate.value = localStorage.getItem('selectedDate') || ''
+  timeFrom.value = localStorage.getItem('timeFrom') || ''
+  timeTo.value = localStorage.getItem('timeTo') || ''
+  selectedProject.value = localStorage.getItem('selectedProject') || projectOptions.value[0]
+  if (timerRunning.value) {
+    timerStore.intervalId = setInterval(updateTimer, 1000)
+    hideNotification()
+    showNotification()
+  }
 
-const duration = computed(() => {
-  var timeStart = new Date('01/01/2007 ' + timeFrom.value)
-  var timeEnd = new Date('01/01/2007 ' + timeTo.value)
-  var diff = timeEnd - timeStart;
-  return diff / 1000 / 60 + ' min';
+  retrieveAndEmitStoredTimeEntries()
 })
 
+onBeforeUnmount(() => {
+  retrieveAndEmitStoredTimeEntries()
+  if (timerStore.intervalId) {
+    clearInterval(timerStore.intervalId)
+    timerStore.intervalId = null
+  }
+})
 
-</script>
+watch(timerRunning, newVal => {
+  if (!newVal && timerStore.intervalId) {
+    clearInterval(timerStore.intervalId)
+    timerStore.intervalId = null
+  }
+})
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/tracking/timeTrackingItem.vue b/frontend/src/components/tracking/timeTrackingItem.vue
index a4873cd..0036553 100644
--- a/frontend/src/components/tracking/timeTrackingItem.vue
+++ b/frontend/src/components/tracking/timeTrackingItem.vue
@@ -90,7 +90,6 @@ defineComponent({
 
 const emit = defineEmits(['delete'])
 
-
 interface Props {
   timeEntry: TimeTrackingItem
 }
@@ -103,15 +102,14 @@ const itemDate = computed(() => {
 })
 
 const timeFrom = computed(() => {
-  const date = new Date(props.timeEntry.start_time);
-  const options = { timeZone: 'Europe/Prague', hour12: false, hour: '2-digit', minute: '2-digit' };
-  return date.toLocaleString('en-US', options);
-});
+  const date = new Date(props.timeEntry.start_time)
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false })
+})
+
 
 const timeTo = computed(() => {
   const date = new Date(props.timeEntry.end_time)
-  const options = { timeZone: 'Europe/Prague', hour12: false, hour: '2-digit', minute: '2-digit' };
-  return date.toLocaleString('en-US', options);
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false })
 })
 
 const duration = computed(() => {
@@ -127,6 +125,4 @@ const task = computed(() => {
   return props.timeEntry.task
 })
 
-
-
 </script>
diff --git a/frontend/src/stores/timerStore.ts b/frontend/src/stores/timerStore.ts
new file mode 100644
index 0000000..8dfe014
--- /dev/null
+++ b/frontend/src/stores/timerStore.ts
@@ -0,0 +1,60 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { TimeTrackingItemNew } from 'src/models';
+export const useTimerStore = defineStore('timer', () => {
+  const timerRunning = ref(false);
+  const selectedDate = ref('');
+  const timeFrom = ref('');
+  const timeTo = ref('');
+  const selectedProject = ref('');
+  const isNotificationVisible = ref(false);
+  const notificationRef = ref<(() => void) | null>(null);
+  const intervalId = ref<ReturnType<typeof setInterval> | null>(null);
+
+  function startTimer(project: string) {
+    const currentTime = new Date();
+    selectedDate.value = currentTime.toISOString().slice(0, 10);
+    timeFrom.value = formatTime(currentTime);
+    timeTo.value = formatTime(currentTime);
+    selectedProject.value = project;
+    timerRunning.value = true;
+  }
+  const timeEntries = ref<TimeTrackingItemNew[]>([]);
+  function addTimeEntry(entry: TimeTrackingItemNew) {
+    timeEntries.value.push(entry);
+  }
+
+  function stopTimer() {
+    timerRunning.value = false;
+  }
+
+  function calculateDuration() {
+    const timeStart = new Date(`01/01/2007 ${timeFrom.value}`);
+    const timeEnd = new Date(`01/01/2007 ${timeTo.value}`);
+    const diff = Number(timeEnd) - Number(timeStart);
+    return Math.floor(diff / 1000 / 60);
+  }
+
+  function formatTime(date: Date) {
+    return date.toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+    });
+  }
+
+  return {
+    timerRunning,
+    selectedDate,
+    timeFrom,
+    timeTo,
+    selectedProject,
+    isNotificationVisible,
+    notificationRef,
+    intervalId,
+    startTimer,
+    stopTimer,
+    calculateDuration,
+    addTimeEntry,
+  };
+});

From 146a8658a141c9e15fce86e56e49d9c50be92b9e Mon Sep 17 00:00:00 2001
From: Spustnik <1psimonova1@gmail.com>
Date: Mon, 17 Jun 2024 14:01:00 +0000
Subject: [PATCH 4/4] Update button label and button visibility

---
 .../components/tracking/timeTrackerLine.vue   |  4 +-
 .../components/tracking/timeTrackingItem.vue  | 50 -------------------
 frontend/src/stores/timerStore.ts             |  6 ---
 3 files changed, 2 insertions(+), 58 deletions(-)

diff --git a/frontend/src/components/tracking/timeTrackerLine.vue b/frontend/src/components/tracking/timeTrackerLine.vue
index 1a19806..a70dd25 100644
--- a/frontend/src/components/tracking/timeTrackerLine.vue
+++ b/frontend/src/components/tracking/timeTrackerLine.vue
@@ -8,8 +8,8 @@
     
     <q-btn v-if="!timerRunning" label="Start" color="primary" class="q-ma-sm" @click="startTimer" />
     <q-btn v-if="timerRunning" label="Finish" color="negative" class="q-ma-sm" @click="finish" />
-    <q-btn v-if="timerRunning" label="STOP" color="primary" class="q-ma-sm" @click="stopTimer" />
-    <q-btn type="submit" label="Add" color="primary" class="q-ma-sm" @click="submitForm" :disable="!isValidForm" />
+    <q-btn v-if="timerRunning" label="Discard" color="primary" class="q-ma-sm" @click="stopTimer" />
+    <q-btn v-if="!timerRunning" type="submit" label="Add" color="primary" class="q-ma-sm" @click="submitForm" :disable="!isValidForm" />
   </q-card>
 </template>
 
diff --git a/frontend/src/components/tracking/timeTrackingItem.vue b/frontend/src/components/tracking/timeTrackingItem.vue
index 0036553..3d42a5d 100644
--- a/frontend/src/components/tracking/timeTrackingItem.vue
+++ b/frontend/src/components/tracking/timeTrackingItem.vue
@@ -5,55 +5,6 @@
              label="Date"
              type="date"
              class="q-ma-sm" readonly />
-    <q-input
-      v-model="timeFrom"
-      mask="time"
-      :rules="['time']"
-      class="q-ma-sm"
-      label="From"
-      readonly
-    >
-      <template v-slot:append>
-        <q-icon name="access_time" class="cursor-pointer">
-          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
-            <q-time
-              v-model="timeFrom"
-              format24h
-              readonly
-            >
-              <div class="row items-center justify-end">
-                <q-btn v-close-popup label="Close" color="primary" flat />
-              </div>
-            </q-time>
-          </q-popup-proxy>
-        </q-icon>
-      </template>
-    </q-input>
-    <q-input
-      v-model="timeTo"
-      mask="time"
-      :rules="['time']"
-      class="q-ma-sm"
-      label="To"
-      readonly
-    >
-      <template v-slot:append>
-        <q-icon name="access_time" class="cursor-pointer">
-          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
-            <q-time
-              v-model="timeTo"
-              format24h
-              readonly
-            >
-              <div class="row items-center justify-end">
-                <q-btn v-close-popup label="Close" color="primary" flat />
-              </div>
-            </q-time>
-          </q-popup-proxy>
-        </q-icon>
-      </template>
-    </q-input>
-    <!--
     <q-input
              v-model="timeFrom"
              label="From"
@@ -65,7 +16,6 @@
     <q-input
              v-model="task"
              label="Project" class="q-ma-sm" readonly />
-             -->
 
     <!-- Read only field showing computed duration -->
     <q-input
diff --git a/frontend/src/stores/timerStore.ts b/frontend/src/stores/timerStore.ts
index 8dfe014..d3133c5 100644
--- a/frontend/src/stores/timerStore.ts
+++ b/frontend/src/stores/timerStore.ts
@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
-import { TimeTrackingItemNew } from 'src/models';
 export const useTimerStore = defineStore('timer', () => {
   const timerRunning = ref(false);
   const selectedDate = ref('');
@@ -19,10 +18,6 @@ export const useTimerStore = defineStore('timer', () => {
     selectedProject.value = project;
     timerRunning.value = true;
   }
-  const timeEntries = ref<TimeTrackingItemNew[]>([]);
-  function addTimeEntry(entry: TimeTrackingItemNew) {
-    timeEntries.value.push(entry);
-  }
 
   function stopTimer() {
     timerRunning.value = false;
@@ -55,6 +50,5 @@ export const useTimerStore = defineStore('timer', () => {
     startTimer,
     stopTimer,
     calculateDuration,
-    addTimeEntry,
   };
 });