Skip to content

T
tacc-frontend
Commit e8c20e20 authored by Wen-Wei Li's avatar Wen-Wei Li
Browse files
Options

new page and add router

parent 507cf15d
Hide whitespace changes
Inline Side-by-side
Showing with 143 additions and 70 deletions
package-lock.json
View file @ e8c20e20
......@@ -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
View file @ e8c20e20
......@@ -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
View file @ e8c20e20
......@@ -2,32 +2,10 @@
<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>
<main>
<router-view/>
</main>
<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>
<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 0 → 100644
View file @ e8c20e20
<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
View file @ e8c20e20
<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>
<Form></Form>
</CContainer>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<CButton @click="submit()" color="success">Submit</CButton>
</div>
</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
View file @ e8c20e20
<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
View file @ e8c20e20
......@@ -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')
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment