feat: add network ui

lanthora · Jul 24, 2024 · 2deb986 · 2deb986
1 parent dc4405a
commit 2deb986
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 3 deletions.
diff --git a/frontend/src/components/admin/AdminUserView.vue b/frontend/src/components/admin/AdminUserView.vue
@@ -40,7 +40,9 @@
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'action'">
             <a-space wrap>
-              <a-button danger size="small" @click="deleteUser(record.userid)"> Delete </a-button>
+              <a-button danger type="primary" size="small" @click="deleteUser(record.userid)">
+                Delete
+              </a-button>
             </a-space>
           </template>
         </template>

diff --git a/frontend/src/components/normal/DeviceView.vue b/frontend/src/components/normal/DeviceView.vue
@@ -15,7 +15,7 @@ import { onMounted, ref } from 'vue'
 
 const deviceColumns = [
   {
-    title: 'Hostname',
+    title: 'Host Name',
     dataIndex: 'hostname',
     key: 'hostname',
     align: 'center'

diff --git a/frontend/src/components/normal/NetworkView.vue b/frontend/src/components/normal/NetworkView.vue
@@ -3,6 +3,165 @@
     <a-page-header title="Network" sub-title="create and manage private networks" />
   </a-layout-header>
   <a-layout-content :style="{ margin: '24px 16px 0' }">
-    <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">content</div>
+    <div :style="{ padding: '24px', background: '#fff' }">
+      <a-space style="margin-bottom: 16px">
+        <a-button type="primary" @click="openNetDialog(null)"> Add </a-button>
+      </a-space>
+      <a-table :columns="netColumns" :dataSource="netSource">
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'action'">
+            <a-space wrap>
+              <a-button type="primary" size="small" @click="openNetDialog(record)"> Edit </a-button>
+              <a-button danger type="primary" size="small" @click="deleteNet(record)">
+                Delete
+              </a-button>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </div>
+    <a-modal v-model:open="netDialogOpen" title="Network" @ok="handleNetDialog">
+      <a-form :model="netDialogState" :style="{ margin: '24px 0 0' }">
+        <a-form-item>
+          <a-input v-model:value="netDialogState.netname" placeholder="Netname"> </a-input>
+        </a-form-item>
+        <a-form-item>
+          <a-input v-model:value="netDialogState.password" placeholder="Password"> </a-input>
+        </a-form-item>
+        <a-form-item>
+          <a-input v-model:value="netDialogState.dhcp" placeholder="DHCP"> </a-input>
+        </a-form-item>
+        <a-form-item>
+          <a-select v-model:value="netDialogState.broadcast" placeholder="Broadcast">
+            <a-select-option value="true">Enable</a-select-option>
+            <a-select-option value="false">Disable</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
+    </a-modal>
   </a-layout-content>
 </template>
+
+<script setup>
+import axios from 'axios'
+import { onMounted, ref } from 'vue'
+
+const netColumns = [
+  {
+    title: 'Net Name',
+    dataIndex: 'netname',
+    key: 'netname',
+    align: 'center'
+  },
+  {
+    title: 'Password',
+    dataIndex: 'password',
+    key: 'password',
+    align: 'center'
+  },
+  {
+    title: 'DHCP',
+    dataIndex: 'dhcp',
+    key: 'dhcp',
+    align: 'center'
+  },
+  {
+    title: 'Broadcast',
+    dataIndex: 'broadcast',
+    key: 'broadcast',
+    align: 'center',
+    customRender: (text) => {
+      return text.value ? 'true' : 'false'
+    }
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    align: 'center'
+  }
+]
+
+const netDialogOpen = ref(false)
+
+const netSource = ref([])
+
+const updateNetSource = async () => {
+  const response = await axios.post('/api/net/show')
+
+  const status = response.data.status
+  if (status == 0) {
+    netSource.value = response.data.data.nets
+  }
+}
+
+onMounted(() => {
+  updateNetSource()
+})
+
+const netDialogState = ref({
+  netid: 0,
+  netname: '',
+  password: '',
+  dhcp: '',
+  broadcast: false
+})
+
+const openNetDialog = (record) => {
+  netDialogState.value.netid = record ? record.netid : 0
+  netDialogState.value.netname = record ? record.netname : ''
+  netDialogState.value.password = record ? record.password : ''
+  netDialogState.value.dhcp = record ? record.dhcp : ''
+  netDialogState.value.broadcast = record && record.broadcast ? 'true' : null
+  netDialogOpen.value = true
+}
+
+const handleNetDialog = () => {
+  if (netDialogState.value.netid == 0) {
+    addNet()
+  } else {
+    editNet()
+  }
+}
+
+const addNet = async () => {
+  const response = await axios.post('/api/net/insert', {
+    netname: netDialogState.value.netname,
+    password: netDialogState.value.password,
+    dhcp: netDialogState.value.dhcp,
+    broadcast: netDialogState.value.broadcast === 'true'
+  })
+
+  const status = response.data.status
+  if (status == 0) {
+    netDialogOpen.value = false
+    updateNetSource()
+  }
+}
+
+const editNet = async () => {
+  const response = await axios.post('/api/net/edit', {
+    netid: netDialogState.value.netid,
+    netname: netDialogState.value.netname,
+    password: netDialogState.value.password,
+    dhcp: netDialogState.value.dhcp,
+    broadcast: netDialogState.value.broadcast === 'true'
+  })
+
+  const status = response.data.status
+  if (status == 0) {
+    netDialogOpen.value = false
+    updateNetSource()
+  }
+}
+
+const deleteNet = async (record) => {
+  const response = await axios.post('/api/net/delete', {
+    netid: record.netid
+  })
+
+  const status = response.data.status
+  if (status == 0) {
+    updateNetSource()
+  }
+}
+</script>