Tasks: able to get and print tasks

frontend/src/App.vue

@@ -27,6 +27,8 @@ export default {
     return {
       username: AppStore.data.user.username
     }
-  }
+  },
+  methods: {},
+  async created() {}
 }
 </script>

frontend/src/components/TaskRecord.vue

@@ -29,7 +29,6 @@ const durationInSeconds = computed(() =>
   Math.floor((props.task.timeEnd - props.task.timeStart) / 1000)
 )
 const normalizedDuration = computed(() => formatDuration(durationInSeconds.value))
-console.log(props.task.title)
 </script>
 
 <template>
@@ -40,7 +39,6 @@ console.log(props.task.title)
         class="title"
         placeholder="What are you working on?"
         :value="props.task.title"
-        :size="props.task.title.length + 1"
       />
     </span>
     <span>

frontend/src/stores/AppStore.js

@@ -1,4 +1,5 @@
 export default {
+  api_url: 'http://localhost:6060/api/v1',
   data: {
     user: {
       _id: '1234',
@@ -7,26 +8,28 @@ export default {
     },
     newTask: {},
     fetchedTasks: [
-      {
-        _id: 1,
-        title: 'frontend',
-        project: 'TiM',
-        client: 'Filip Rojek',
-        timeStart: 1703960133061,
-        timeEnd: 1703960141414
-      },
-      {
-        _id: 2,
-        title: 'setting up',
-        project: 'l2tp vpn',
-        client: 'IS Media',
-        timeStart: 1703960133061,
-        timeEnd: 1703960141414
-      }
+      //{
+      //  _id: 1,
+      //  title: 'Loading',
+      //  project: 'Loading',
+      //  client: 'Loading',
+      //  timeStart: 1703960133061,
+      //  timeEnd: 1703960141414
+      //}
     ]
   },
-  // Methods that you need, for e.g fetching data from server etc.
-  fetchData() {
-    // fetch logic
+  async fetchData() {
+    try {
+      const response = await fetch(this.api_url + '/task/get')
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`)
+      }
+
+      const data = await response.json()
+      this.data.fetchedTasks = data
+      console.log('Received data:', data)
+    } catch (error) {
+      console.error('Error fetching data:', error)
+    }
   }
 }

frontend/src/views/TrackerView.vue

@@ -25,6 +25,10 @@ export default {
     return {
       tasks: AppStore.data.fetchedTasks
     }
+  },
+  async mounted() {
+    await AppStore.fetchData()
+    this.tasks = AppStore.data.fetchedTasks
   }
 }
 </script>