new page and add router

package-lock.json

@@ -21,7 +21,8 @@
         "flowbite-vue": "^0.1.3",
         "vite": "^5.2.10",
         "vue": "^3.4.25",
-        "vue-navigation-bar": "^6.1.0"
+        "vue-navigation-bar": "^6.1.0",
+        "vue-router": "^4.3.2"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -4269,6 +4270,11 @@
       "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
       "dev": true
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz",
+      "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.4.25",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.4.25.tgz",
@@ -13273,6 +13279,20 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.2.tgz",
+      "integrity": "sha512-hKQJ1vDAZ5LVkKEnHhmm1f9pMiWIBNGF5AwU67PdH7TyXCj/a4hTccuUuYCAMgJK6rO/NVYtQIEN3yL8CECa7Q==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-screen-size": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/vue-screen-size/-/vue-screen-size-2.1.0.tgz",

package.json

@@ -21,7 +21,8 @@
     "flowbite-vue": "^0.1.3",
     "vite": "^5.2.10",
     "vue": "^3.4.25",
-    "vue-navigation-bar": "^6.1.0"
+    "vue-navigation-bar": "^6.1.0",
+    "vue-router": "^4.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/App.vue

@@ -2,31 +2,9 @@
 
 <template>
 <Navbar></Navbar>
-  <CContainer>
-    <div class="container-fluid p-0">
-      <CAlert color="primary" class="d-flex align-items-center">
-        <svg class="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
-          <rect width="32" height="176" x="240" y="176" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="32" height="32" x="240" y="384" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><path fill="var(--ci-primary-color, currentColor)" d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z" class="ci-primary"></path>
-        </svg>
-        <div>
-          An example alert with an icon
-        </div>
-      </CAlert>
-      <div class="row">
-        <div class="col-1">
-          <CIcon v-on:click="addForm" icon="cibAddthis" size="xxl" class="mb-3"/>
-        </div>
-      </div>
-    </div>
-  
-  <div v-for="(form, index) in forms" :key="index">
-    <Form initialData="allFormData[index]" @update-data="data => handleDataUpdate(index, data)"></Form>    
-  </div>
-  <div class="d-grid gap-2 d-md-flex justify-content-md-end">
-    
-    <CButton @click="submit()" color="success">Submit</CButton>
-  </div>
-</CContainer>
+<main>
+      <router-view/>
+</main>
   
 <Footer></Footer>
 </template>
@@ -35,46 +13,21 @@
 import Vue from 'vue'
 import { CIcon } from '@coreui/icons-vue';
 import * as icon from '@coreui/icons';
-import HelloWorld from './components/HelloWorld.vue'
+import Criteria from './components/Criteria.vue'
 import Navbar from './components/Navbar.vue'
 import Footer from './components/Footer.vue'
 import Form from './components/Form.vue'
-
+import Agents from './components/Agents.vue'
 export default {
   name: 'App',
   components: {
-    HelloWorld,
+    Criteria,
     Navbar,
     Form,
-    Footer
-  },
+    Footer,
+    Agents
 
-  setup() {
-    return {
-      icon,
-    }
   },
-  data() {
-    return {
-      forms: [],
-      allFormData: []
-    };
-  },
-  methods:{
-    addForm(event){
-        console.log("add one");
-        this.forms.push({});
-        this.allFormData.push('');
-    },
-    handleDataUpdate(index, data) {
-      this.allFormData[index] = data; // Update the specific form's data
-    },
-    submit() {
-      console.log('All form data:', this.allFormData[0].attribute);
-      // Here you can handle all the data, such as sending it to a server
-    }
-
-  }
 
 }
 </script>

src/components/Agents.vue

+<template>
+<CContainer>
+    <div>
+        <h2>Agent Lists</h2>
+        <CContainer>
+        <CTable hover>
+            <CTableHead>
+            <CTableRow>
+                <CTableHeaderCell scope="col">#</CTableHeaderCell>
+                <CTableHeaderCell scope="col">Name</CTableHeaderCell>
+                <CTableHeaderCell scope="col">Platform</CTableHeaderCell>
+                <CTableHeaderCell scope="col">Status</CTableHeaderCell>
+            </CTableRow>
+            </CTableHead>
+            <CTableBody>
+            <CTableRow v-for="(agent, index) in agents" :key="agent.id">
+                <CTableDataCell>{{ agent.id }}</CTableDataCell>
+                <CTableDataCell>{{ agent.name }}</CTableDataCell>
+                <CTableDataCell>{{ agent.platform }}</CTableDataCell>
+                <CTableDataCell>{{ agent.status }}</CTableDataCell>
+            </CTableRow>
+            </CTableBody>
+        </CTable>
+        </CContainer>
+    </div>
+</CContainer>
+
+</template>
+<script>
+export default {
+  name:"Agents",
+  data() {
+    return {
+      agents: []
+    };
+  },
+  mounted() {
+    this.fetchAgentsData();
+  },
+  methods: {
+    async fetchAgentsData() {
+      try {
+        const response = await fetch('http://192.168.88.238:8080/api/v1/agents');
+        if (!response.ok) throw new Error('Failed to fetch');
+        this.agents = await response.json();
+      } catch (error) {
+        console.error('Error fetching products:', error);
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file

src/components/HelloWorld.vue → src/components/Criteria.vue

 <template>
-  <CContainer>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
+<CContainer>
     <div class="container-fluid p-0">
       <CAlert color="primary" class="d-flex align-items-center">
         <svg class="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
@@ -13,25 +11,63 @@
       </CAlert>
       <div class="row">
         <div class="col-1">
-          <CIcon v-on:click="plus" icon="cibAddthis" size="xxl"/>
+          <CIcon v-on:click="addForm" icon="cibAddthis" size="xxl" class="mb-3"/>
         </div>
       </div>
     </div>
+  
+  <div v-for="(form, index) in forms" :key="index">
+    <Form initialData="allFormData[index]" @update-data="data => handleDataUpdate(index, data)"></Form>    
+  </div>
+  <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+    
+    <CButton @click="submit()" color="success">Submit</CButton>
   </div>
-  <Form></Form>
-  </CContainer>
+</CContainer>
 </template>
 
 <script>
 import { CContainer, CAlert } from '@coreui/vue'
-
+import Form from './Form.vue'
+import { CIcon } from '@coreui/icons-vue';
+import * as icon from '@coreui/icons';
 export default {
 
-  name: 'HelloWorld',
+  name: 'Criteria',
   props: {
     msg: String
+  },
+  components:{
+    Form
+  },
+
+  setup() {
+    return {
+      icon,
     }
+  },  
+  data() {
+    return {
+      forms: [],
+      allFormData: []
+    };
+  },
+  methods:{
+    addForm(event){
+        console.log("add one");
+        this.forms.push({});
+        this.allFormData.push('');
+    },
+    handleDataUpdate(index, data) {
+      this.allFormData[index] = data; // Update the specific form's data
+    },
+    submit() {
+      console.log('All form data:', this.allFormData[0].attribute);
+      // Here you can handle all the data, such as sending it to a server
+    },
+
 
+  }
 }
 </script>
 

src/components/Navbar.vue

 <template>
 <CNavbar expand="lg" color-scheme="light" class="bg-light-cui-white fixed-top">
   <CContainer fluid>
+    <CNavbarBrand href="#">Device Management</CNavbarBrand>
     <CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
-    <CNavbarBrand href="#">Navbar</CNavbarBrand>
     <CCollapse class="navbar-collapse" :visible="visible">
-      <CNavbarNav class="me-auto mb-2 mb-lg-0">
+      <CNavbarNav>
         <CNavItem>
-          <CNavLink href="#" active>
+          <CNavLink href="/" active>
             Home
           </CNavLink>
         </CNavItem>
         <CNavItem>
-          <CNavLink href="#">Link</CNavLink>
+          <CNavLink href="/agents" active>Agents</CNavLink>
         </CNavItem>        
       </CNavbarNav>      
     </CCollapse>

src/main.js

@@ -6,8 +6,19 @@ import CoreuiVue from '@coreui/vue';
 import App from './App.vue'
 import { CIcon } from '@coreui/icons-vue';
 import * as icon from '@coreui/icons';
+import { createRouter, createWebHistory } from 'vue-router';
+import Criteria from './components/Criteria.vue';
+import Agents from './components/Agents.vue'
 
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+      { path: '/', component: Criteria },
+      { path: '/agents', component: Agents }
+    ]
+  });
 const app = createApp(App)
 app.provide('icons', icon)
 app.component('CIcon', CIcon)
+app.use(router);
 app.use(CoreuiVue).mount('#app')