feat: add popop with awfuls colors and backend api call

front/MyINPulse-front/src/App.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
-import Header from './components/Header.vue';
-import ProjectComp from './components/Project-comp.vue';
+import ErrorWrapper from "@/views/errorWrapper.vue";
 </script>
 
 <template>
-  <RouterView />
   <Header />
+  <error-wrapper></error-wrapper>
   <div id="main">
       <ProjectComp 
         v-for="(project, index) in projects" 
@@ -15,12 +13,16 @@ import ProjectComp from './components/Project-comp.vue';
         :projectName="project.name"
       />
     </div>
+  <RouterView />
 </template>
 
 <style scoped>
 </style>
 
 <script lang="ts">
+import Header from "@/components/Header.vue";
+import ProjectComp from "@/components/Project-comp.vue";
+
 export default {
   name: 'App',
   components: {

front/MyINPulse-front/src/main.ts

@@ -1,11 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import router from './router'
+import router from './router/router.ts'
 import {createPinia} from "pinia";
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 import AuthStorePlugin from './plugins/authStore';
 import keycloakService from './services/keycloak';
-import axios from "axios";
 import {useAuthStore} from "@/stores/authStore.ts";
 let store: any;
 

front/MyINPulse-front/src/router/router.ts

@@ -3,21 +3,13 @@ import { createRouter, createWebHistory } from 'vue-router'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue'),
-    },
     {
       path: '/test',
       name: 'test',
       // route level code-splitting
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
-      component: () => import('../views/Home.vue'),
+      component: () => import('../views/test.vue'),
     },
   ],
 })

front/MyINPulse-front/src/services/api.ts

@@ -1,5 +1,6 @@
 import axios from "axios";
 import {store} from "@/main.ts";
+import {addNewMessage, color} from "@/services/popupDisplayer.ts";
 
 const axiosInstance = axios.create({
     baseURL: import.meta.env.VITE_BACKEND_URL,
@@ -34,11 +35,11 @@ axiosInstance.interceptors.response.use(
 
 // TODO: spawn a error modal
 function defaultApiErrorHandler(err: String){
-    console.log(err)
+    addNewMessage(err, color.Red);
 }
 
 function defaultApiSuccessHandler(response: () => void){
-    console.log(response)
+    addNewMessage(response.data, color.green)
 }
 function callApi(endpoint: string, onSuccessHandler?: any, onErrorHandler?: any): void {
     axiosInstance.get(endpoint).then(

front/MyINPulse-front/src/services/popupDisplayer.ts

@@ -1,17 +1,20 @@
 import {ref} from "vue";
-enum errorType {Error, Warning}
 
-function addNewError(errorMessage: string, timeout?: number, type?: errorType){
+enum color {Red, Yellow, Blue, green}
+
+function addNewMessage(errorMessage: string, type?: color, timeout?: number){
     if (timeout == null){
         timeout = 5000;
     }
     if (type == null){
-        type = Error;
+        type = color.Red;
     }
-    errorList.value.push({errorMessage: errorMessage, timeout: timeout, type: type})
-    setTimeout(() => errorList.value.pop(errorMessage), 5000)
+
+    const data = {errorMessage: errorMessage, timeout: timeout, type: type, uid: Math.random()*100000};
+    errorList.value.push(data)
+    setTimeout(() => errorList.value.slice(0, 1), timeout)
 }
 
 const errorList = ref([])
 
-export {addNewError, errorList}
+export {addNewMessage, errorList, color}

front/MyINPulse-front/src/views/errorWrapper.vue

@@ -1,11 +1,22 @@
 <script setup lang="ts">
 
+import {errorList} from "@/services/popupDisplayer.ts";
+import ErrorModal from "@/components/errorModal.vue";
 </script>
 
 <template>
-
+<div class="error-wrapper">
+  <error-modal v-for="elm in errorList" :data=elm></error-modal>
+</div>
 </template>
 
 <style scoped>
+.error-wrapper{
+  position: absolute;
+  left: 70%;
+  //background-color: blue;
+  height: 100%;
+  width: 30%;
 
+}
 </style>

front/MyINPulse-front/src/views/test.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import {store} from "../main.ts";
 import {callApi} from "@/services/api.ts";
-import ErrorModal from "@/views/errorModal.vue";
+import ErrorModal from "@/components/errorModal.vue";
 import {errorList} from "@/services/popupDisplayer.ts";
-import TempModal from "@/views/temp-modal.vue";
+import TempModal from "@/components/temp-modal.vue";
 import ErrorWrapper from "@/App.vue";
 function addResToTable(id: any){
   return (req: any) => {