From ab1e23e10d2686241b313b3a81a02c2022f62acc Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Sun, 26 Mar 2023 22:31:47 +0200
Subject: [PATCH] Add Addresses, Services Pages

---
 client/src/App.vue                    |  3 ++-
 client/src/pages/object/Addresses.vue | 35 +++++++++++++++++++++++++++
 client/src/pages/object/Services.vue  | 35 +++++++++++++++++++++++++++
 3 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 client/src/pages/object/Addresses.vue
 create mode 100644 client/src/pages/object/Services.vue

diff --git a/client/src/App.vue b/client/src/App.vue
index 598aac6..44d27e8 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -12,7 +12,8 @@ let navState = $ref(NavState.Open);
 const navRoutes = {
   "/": { icon: IDashboard, caption: "Dashboard" },
   "/firewall/rules": { icon: IRule, caption: "Rules" },
-  "/addresses": { icon: IAddress, caption: "Addresses" },
+  "/object/addresses": { icon: IAddress, caption: "Addresses" },
+  "/object/services": { icon: IAddress, caption: "Services" },
 };
 
 enum AuthState { Unauthenticated, MfaRequired, Authenticated };
diff --git a/client/src/pages/object/Addresses.vue b/client/src/pages/object/Addresses.vue
new file mode 100644
index 0000000..e8e2e9c
--- /dev/null
+++ b/client/src/pages/object/Addresses.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { apiCall } from "../../api";
+
+let addresses = $ref([]);
+const columns = [
+  {heading: 'Name', path: 'name'},
+  {heading: 'Type', path: 'type'},
+  {heading: 'Value', path: 'value'},
+  {heading: 'Comment', path: 'comment'},
+];
+
+async function load(){
+  let res = await apiCall("Object.GetAddresses", {});
+  if (res.Error === null) {
+    addresses = res.Data.Addresses;
+    console.debug("addresses", addresses);
+  } else {
+    console.debug("error", res);
+  }
+}
+
+onMounted(async() => {
+  load();
+});
+
+</script>
+
+<template>
+  <div>
+    <PageHeader title="Addresses">
+      <button @click="load">Load Addresses</button>
+    </PageHeader>
+    <NiceTable :columns="columns" v-model:data="addresses"/>
+  </div>
+</template>
\ No newline at end of file
diff --git a/client/src/pages/object/Services.vue b/client/src/pages/object/Services.vue
new file mode 100644
index 0000000..6c40b92
--- /dev/null
+++ b/client/src/pages/object/Services.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { apiCall } from "../../api";
+
+let services = $ref([]);
+const columns = [
+  {heading: 'Name', path: 'name'},
+  {heading: 'Type', path: 'type'},
+  {heading: 'Value', path: 'value'},
+  {heading: 'Comment', path: 'comment'},
+];
+
+async function load(){
+  let res = await apiCall("Object.GetServices", {});
+  if (res.Error === null) {
+    services = res.Data.Services;
+    console.debug("services", services);
+  } else {
+    console.debug("error", res);
+  }
+}
+
+onMounted(async() => {
+  load();
+});
+
+</script>
+
+<template>
+  <div>
+    <PageHeader title="services">
+      <button @click="load">Load Services</button>
+    </PageHeader>
+    <NiceTable :columns="columns" v-model:data="services"/>
+  </div>
+</template>
\ No newline at end of file