Add Static Route Frontend

client/src/App.vue

@@ -10,6 +10,7 @@ import IService from '~icons/material-symbols/home-repair-service';
 import ISNAT from '~icons/mdi/arrow-expand-right';
 import IDNAT from '~icons/mdi/arrow-collapse-right';
 import IConfig from '~icons/grommet-icons/document-config';
+import IStaticRoutes from '~icons/material-symbols/drive-folder-upload-outline-sharp';
 
 enum NavState { Open, Reduced, Collapsed };
 const NavStateCount = 3;
@@ -20,6 +21,7 @@ const navRoutes = {
   "/firewall/sourcenatrules": { icon: ISNAT, caption: "SNAT" },
   "/firewall/destinationnatrules": { icon: IDNAT, caption: "DNAT" },
   "/network/interfaces": { icon: IEthernet, caption: "Interfaces" },
+  "/network/staticroutes": { icon: IStaticRoutes, caption: "Static Routes" },
   "/object/addresses": { icon: IAddress, caption: "Addresses" },
   "/object/services": { icon: IService, caption: "Services" },
   "/config/config": { icon: IConfig, caption: "Config" },

client/src/definitions.ts

@@ -61,5 +61,24 @@ export const editTypes: { [key: string]: { [key: string]: any } } = {
         }
       ],
     },
+    "staticroutes": {
+      name: "StaticRoute",
+      validationSchema: toFormValidator(
+        zod.object({
+          name: zod.string(),
+        }),
+      ),
+      sections: [
+        {
+          fields: [
+            { key: "name", label: "Name", as: "TextBox", },
+            { key: "interface", label: "Interface", as: "TextBox" },
+            { key: "gateway", label: "Gateway", as: "TextBox" },
+            { key: "destination", label: "Destination", as: "TextBox" },
+            { key: "metric", label: "Metric", as: "NumberBox" },
+          ],
+        },
+      ],
+    },
   },
 };

client/src/pages/network/StaticRoutes.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { apiCall } from "../../api";
+
+let staticRoutes = $ref([]);
+let loading = $ref(false);
+let selection = $ref([] as number[]);
+
+const columns = [
+  {heading: 'Name', path: 'name'},
+  {heading: 'Interface', path: 'interface'},
+  {heading: 'Gateway', path: 'gateway'},
+  {heading: 'Destination', path: 'destination'},
+  {heading: 'Metric', path: 'metric'},
+];
+
+async function load(){
+  loading = true
+  let res = await apiCall("Network.GetStaticRoutes", {});
+  if (res.Error === null) {
+    console.debug("staticRoutes", res.Data.StaticRoutes);
+    staticRoutes = res.Data.StaticRoutes;
+  } else {
+    console.debug("error", res);
+  }
+  loading = false
+}
+
+async function deleteStaticRoutes(){
+  let res = await apiCall("Network.DeleteStaticRoute", {index: selection[0]});
+  if (res.Error === null) {
+    console.debug("deleted static routes");
+  } else {
+    console.debug("error", res);
+  }
+  load();
+}
+
+onMounted(async() => {
+  load();
+});
+
+</script>
+
+<template>
+  <TableView title="Static Routes" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="staticRoutes" :table-props="{sort:true, sortSelf: true}">
+    <button @click="load">Refresh</button>
+    <router-link class="button" to="/network/staticroutes/edit">Create</router-link>
+    <router-link class="button" :class="{ disabled: selection.length != 1 }" :to="'/network/staticroutes/edit/' + selection[0]">Edit</router-link>
+    <button @click="deleteStaticRoutes" :disabled="selection.length != 1">Delete</button>
+  </TableView>
+</template>