Tasks: print newly added tasks, fixed some bugs

frontend/src/components/TrackerTimer.vue

@@ -44,21 +44,34 @@ export default {
     }
   },
   methods: {
-    startStopTimer() {
+    async startStopTimer() {
       if (this.timerState == 'Start') {
         this.timerState = 'Stop'
         this.task.startTime = Date.now()
+        this.timeNow = Date.now()
         console.log('timer started')
         this.timer = setInterval(() => {
           this.timeNow = Date.now()
         }, 1000)
       } else {
-        this.timerState = 'Start'
         this.task.stopTime = Date.now()
+        this.timerState = 'Start'
         clearInterval(this.timer)
         this.timer = undefined
-        AppStore.data.newTask = this.task
-        console.log(AppStore.data.newTask)
+        this.timeNow = 0
+        AppStore.data.newTask = {
+          title: this.task.title,
+          timeStart: this.task.startTime,
+          timeEnd: this.task.stopTime
+        }
+        await AppStore.sendAdd(AppStore.data.newTask, '/task/add')
+
+        this.task = {
+          startTime: 0,
+          stopTime: 0,
+          title: ''
+        }
+        this.$emit('get-tasks')
       }
     }
   }

frontend/src/stores/AppStore.js

@@ -31,5 +31,21 @@ export default {
     } catch (error) {
       console.error('Error fetching data:', error)
     }
+  },
+  async sendAdd(data, url) {
+    try {
+      const response = await fetch(this.api_url + url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+      })
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`)
+      }
+    } catch (error) {
+      console.error('Error sending data:', error)
+    }
   }
 }

frontend/src/views/TrackerView.vue

@@ -6,11 +6,11 @@ import TaskRecord from '@/components/TaskRecord.vue'
 
 <template>
   <main>
-    <TrackerTimer />
+    <TrackerTimer @get-tasks="getTasks" />
 
     <div class="task-day-wrapper">
       <TaskHeader />
-      <div class="task-wrapper" v-for="task in tasks" :key="task._id">
+      <div class="task-wrapper" v-for="task in sortedData" :key="task._id">
         <TaskRecord :task="task" />
       </div>
     </div>
@@ -26,6 +26,17 @@ export default {
       tasks: AppStore.data.fetchedTasks
     }
   },
+  methods: {
+    async getTasks() {
+      await AppStore.fetchData()
+      this.tasks = AppStore.data.fetchedTasks
+    }
+  },
+  computed: {
+    sortedData() {
+      return this.tasks.slice().sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
+    }
+  },
   async mounted() {
     await AppStore.fetchData()
     this.tasks = AppStore.data.fetchedTasks