From f736e53f1439d077944f0f6abf9f11c9238951c5 Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Fri, 2 Aug 2024 11:56:47 +0200
Subject: [PATCH 01/11] fix icmp definition

---
 client/src/definitions.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/definitions.ts b/client/src/definitions.ts
index 138fab7..81d0d3d 100644
--- a/client/src/definitions.ts
+++ b/client/src/definitions.ts
@@ -249,7 +249,7 @@ export const editTypes: { [key: string]: { [key: string]: any } } = {
           'icmp': {
             display: 'ICMP',
             fields: {
-              icmp_code: { is: 'NumberBox', label: 'ICMP Code' },
+              code: { is: 'NumberBox', label: 'ICMP Code' },
             },
           },
           'group': {
@@ -362,4 +362,4 @@ export const editTypes: { [key: string]: { [key: string]: any } } = {
       },
     },
   },
-};
\ No newline at end of file
+};

From 6019025df228b86e1e8dffa94eb75eb485f848bf Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Fri, 2 Aug 2024 11:57:50 +0200
Subject: [PATCH 02/11] move atPath to util, set child component props

---
 client/src/components/display/NiceTable.vue | 15 +++++----------
 client/src/util.ts                          |  6 ++++++
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/client/src/components/display/NiceTable.vue b/client/src/components/display/NiceTable.vue
index 4100b00..f7e930f 100644
--- a/client/src/components/display/NiceTable.vue
+++ b/client/src/components/display/NiceTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useKeyModifier } from '@vueuse/core';
 import type { Component } from 'vue';
-import { equals } from '~/util';
+import { equals, atPath } from '~/util';
 
 const shiftState = $(useKeyModifier('Shift'));
 const ctrlState = $(useKeyModifier('Control'));
@@ -19,6 +19,7 @@ const props = withDefaults(defineProps<{
     heading: string,
     path: string,
     component: Component,
+    props: any,
   }[],
   sortSelf?: boolean,
   draggable?: boolean,
@@ -94,12 +95,6 @@ function toggleRowSelection(index: number) {
   emit('selectionChanged');
 }
 
-function atPath(value: any, path: string): any {
-  for (const segment of path.split('.'))
-    value = (value ?? {} as any)[segment];
-  return value;
-}
-
 let draggedRow = $ref(-1);
 let draggedOverRow = $ref(-1);
 function dragDropRow() {
@@ -149,9 +144,9 @@ function dragDropRow() {
           @dragstart="() => draggedRow = index"
           @dragenter="() => draggedOverRow = index"
           @dragend="() => dragDropRow()">
-        <td v-for="{path, component} of columns" :key="path">
-          <component :is="component" v-if="component" :data="atPath(row, path)"/>
-          <template v-else>{{ atPath(row, path) }}</template>
+        <td v-for="col of columns" :key="col.path">
+          <component :is="col.component" v-if="col.component" :data="atPath(row, col.path)" v-bind="col.props"/>
+          <template v-else>{{ atPath(row, col.path) }}</template>
         </td>
       </tr>
     </tbody>
diff --git a/client/src/util.ts b/client/src/util.ts
index 03c100b..5cc72da 100644
--- a/client/src/util.ts
+++ b/client/src/util.ts
@@ -23,3 +23,9 @@ export function variantOf(enumValue: any) {
 
 export type Index = string | number | symbol;
 export type MaybeIndex = Index | null;
+
+export function atPath(value: any, path: string): any {
+  for (const segment of path.split('.'))
+    value = (value ?? {} as any)[segment];
+  return value;
+}

From 2ae4c7f5fb16c2e4b809e872bb5318e83d62321e Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Fri, 2 Aug 2024 11:59:00 +0200
Subject: [PATCH 03/11] Implement EnumValueDisplay

---
 .../components/display/EnumValueDisplay.vue   | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 client/src/components/display/EnumValueDisplay.vue

diff --git a/client/src/components/display/EnumValueDisplay.vue b/client/src/components/display/EnumValueDisplay.vue
new file mode 100644
index 0000000..09e3db4
--- /dev/null
+++ b/client/src/components/display/EnumValueDisplay.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { variantOf, atPath } from '~/util';
+import type { Component } from 'vue';
+
+const props = withDefaults(defineProps<{
+  data: object | string,
+  definition: { [key: string]: { path: string, component: Component | undefined } } | undefined,
+}>(), {
+  data: '',
+  definition: undefined,
+});
+
+const value = computed(() => {
+  let variant = variantOf(props.data);
+  if (variant == null) {
+    return {};
+  }
+  if (props.definition === undefined) {
+    return {};
+  }
+  let thing = props.definition[variant];
+  if (thing == null) {
+    return {};
+  }
+  return { data: atPath(props.data, thing.path), component: thing.component };
+});
+
+</script>
+<template>
+  <component :is="value.component" v-if="value.component" :data="value.data"/>
+  <div v-else>
+    {{ value.data }}
+  </div>
+</template>

From c168fb1a6049ba778d8844ccbdc65b31c5d6a87a Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Fri, 2 Aug 2024 12:00:15 +0200
Subject: [PATCH 04/11] Implement PortServiceDisplay

---
 .../components/display/PortServiceDisplay.vue | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 client/src/components/display/PortServiceDisplay.vue

diff --git a/client/src/components/display/PortServiceDisplay.vue b/client/src/components/display/PortServiceDisplay.vue
new file mode 100644
index 0000000..759259b
--- /dev/null
+++ b/client/src/components/display/PortServiceDisplay.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  data: match | undefined,
+}>(), {
+  data: undefined,
+});
+type port = { single?: { port: number }, range?: { start_port: number, end_port: number } };
+type portOrAny = string | port;
+type match = { source: portOrAny, destination: portOrAny };
+
+const value = computed(() => {
+  if (props.data === undefined) {
+    return 'unknown';
+  }
+  return `${computePort(props.data.source)}->${computePort(props.data.destination)}`;
+});
+
+function computePort(port: portOrAny) {
+  if (typeof port === 'string') {
+    return 'any';
+  } else if (port.single !== undefined) {
+    return port.single.port;
+  } else if (port.range != undefined){
+    return `(${port.range.start_port}-${port.range.end_port})`;
+  } else {
+    return 'unknown';
+  }
+}
+
+</script>
+<template>
+  {{ value }}
+</template>

From 3c4941673276aa6e325734d057936f5adaf0d126 Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Fri, 2 Aug 2024 12:00:52 +0200
Subject: [PATCH 05/11] Use new Components in addresses list

---
 client/src/pages/object/addresses.vue | 38 +++++++++------------------
 1 file changed, 13 insertions(+), 25 deletions(-)

diff --git a/client/src/pages/object/addresses.vue b/client/src/pages/object/addresses.vue
index 894909a..a4c18bc 100644
--- a/client/src/pages/object/addresses.vue
+++ b/client/src/pages/object/addresses.vue
@@ -1,17 +1,27 @@
 <script setup lang="ts">
 import { apiCall } from '../../api';
 import getPlugins from '../../plugins';
+import EnumValueDisplay from '~/components/display/EnumValueDisplay.vue';
 import EnumTypeDisplay from '~/components/display/EnumTypeDisplay.vue';
+import ArrayDisplay from '~/components/display/ArrayDisplay.vue';
 const p = getPlugins();
 
 let addresses = $ref([]);
 let loading = $ref(false);
 let selection = $ref([] as number[]);
 
+const addressValueDefinition: { [key: string]: { path: string, component: Component | undefined } } = {
+  'host': { path: 'host.address', component: undefined },
+  'range': { path: 'range.address', component: undefined },
+  'network': { path: 'network.address', component: undefined },
+  'group': { path: 'group.members', component: ArrayDisplay },
+};
+
+
 const columns = [
   { heading: 'Name', path: 'name' },
-  { heading: 'Type', path: 'type', component: markRaw(EnumTypeDisplay), componentProp: 'data' },
-  { heading: 'Value', path: 'value' },
+  { heading: 'Type', path: 'address_type', component: markRaw(EnumTypeDisplay), componentProp: 'data' },
+  { heading: 'Value', path: 'address_type', component: markRaw(EnumValueDisplay), componentProp: 'data', props: { definition: addressValueDefinition } },
   { heading: 'Comment', path: 'comment' },
 ];
 
@@ -33,35 +43,13 @@ const displayData = $computed(() => {
   for (const index in addresses) {
     data.push({
       name: addresses[index].name,
-      value: getAddressValue(addresses[index]),
-      type: addresses[index].address_type,
+      address_type: addresses[index].address_type,
       comment: addresses[index].comment,
     });
   }
   return data;
 });
 
-function getAddressValue(s: any): string {
-  let value: string;
-  switch (s.address_type) {
-  case 'host':
-    value = s.host;
-    break;
-  case 'range':
-    value = s.range;
-    break;
-  case 'network':
-    value = s.network;
-    break;
-  case 'group':
-    value = s.children;
-    break;
-  default:
-    value = 'unkown';
-  }
-  return value;
-}
-
 async function deleteAddress(){
   let res = await apiCall('object.addresses_delete', { id: displayData[selection[0]].name });
   if (res.Error === null) {

From 05b6a2c5d11805de376ad03a452f81cb18668eeb Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Fri, 2 Aug 2024 12:01:06 +0200
Subject: [PATCH 06/11] Use new Components in services list

---
 client/src/pages/object/services.vue | 41 +++++++++-------------------
 1 file changed, 13 insertions(+), 28 deletions(-)

diff --git a/client/src/pages/object/services.vue b/client/src/pages/object/services.vue
index 5801255..69167bb 100644
--- a/client/src/pages/object/services.vue
+++ b/client/src/pages/object/services.vue
@@ -2,16 +2,26 @@
 import { apiCall } from '../../api';
 import getPlugins from '../../plugins';
 import EnumTypeDisplay from '~/components/display/EnumTypeDisplay.vue';
+import EnumValueDisplay from '~/components/display/EnumValueDisplay.vue';
+import PortServiceDisplay from '~/components/display/PortServiceDisplay.vue';
+import ArrayDisplay from '~/components/display/ArrayDisplay.vue';
 const p = getPlugins();
 
 let services = $ref({});
 let loading = $ref(false);
 let selection = $ref([] as number[]);
 
+const serviceValueDefinition: { [key: string]: { path: string, component: Component | undefined } } = {
+  'tcp': { path: 'tcp', component: PortServiceDisplay },
+  'udp': { path: 'udp', component: PortServiceDisplay },
+  'icmp': { path: 'icmp.code', component: undefined },
+  'group': { path: 'group.members', component: ArrayDisplay },
+};
+
 const columns = [
   { heading: 'Name', path: 'name' },
-  { heading: 'Type', path: 'type', component: markRaw(EnumTypeDisplay), componentProp: 'data' },
-  { heading: 'Value', path: 'value' },
+  { heading: 'Type', path: 'service_type', component: markRaw(EnumTypeDisplay), componentProp: 'data', props: { definition: serviceValueDefinition } },
+  { heading: 'Value', path: 'service_type', component: markRaw(EnumValueDisplay), componentProp: 'data', props: { definition: serviceValueDefinition } },
   { heading: 'Comment', path: 'comment' },
 ];
 
@@ -21,38 +31,13 @@ const displayData = $computed(() => {
   for (const index in services) {
     data.push({
       name: services[index].name,
-      value: getServiceValue(services[index]),
-      type: Object.keys(services[index].service_type)[0],
+      service_type: services[index].service_type,
       comment: services[index].comment,
     });
   }
   return data;
 });
 
-function getServiceValue(s: any): string {
-  console.debug('test', Object.keys(s.service_type)[0]);
-  let value: string;
-  switch (Object.keys(s.service_type)[0]) {
-  case 'tcp':
-  case 'udp':
-    value = getServicePortRange(s.service_type[Object.keys(s.service_type)[0]]);
-    break;
-  case 'icmp':
-    value = 'icmp';
-    break;
-  case 'group':
-    value = s.children;
-    break;
-  default:
-    value = 'unkown';
-  }
-  return value;
-}
-
-function getServicePortRange(s:any): string {
-  return `${s.source}-${s.destination}`;
-}
-
 async function load(){
   loading = true;
   let res = await apiCall('object.services.list', {});

From 75432f62b8ae7733541bd1aa7c1b463a9c1422e3 Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Fri, 2 Aug 2024 12:01:31 +0200
Subject: [PATCH 07/11] set css tab_size for zed

---
 .zed/settings.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.zed/settings.json b/.zed/settings.json
index f6d1042..85598aa 100644
--- a/.zed/settings.json
+++ b/.zed/settings.json
@@ -30,6 +30,9 @@
         }
       },
       "tab_size": 2
+    },
+    "CSS": {
+      "tab_size": 2
     }
   }
 }

From f34fb0e4bd0c9d7d94e10cb298d2b9fd2ded01b7 Mon Sep 17 00:00:00 2001
From: Samuel Lorch <sam@soontm.de>
Date: Fri, 2 Aug 2024 13:15:47 +0200
Subject: [PATCH 08/11] Align Table values to top

---
 client/src/global-styles/components.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/src/global-styles/components.css b/client/src/global-styles/components.css
index 95e1746..5b2afb3 100644
--- a/client/src/global-styles/components.css
+++ b/client/src/global-styles/components.css
@@ -68,7 +68,11 @@ th, td {
   padding: 0.5rem;
   border: 0.125rem solid var(--cl-bg-el);
 }
-th > *{
+td {
+  vertical-align: top;
+}
+
+th>* {
   justify-content: center;
   align-items: center;
 }

From e1ee456c3a0c2c03742ae585810b0c843c78dbfd Mon Sep 17 00:00:00 2001
From: adroslice <adriel.m.slice@gmail.com>
Date: Fri, 2 Aug 2024 14:00:51 +0200
Subject: [PATCH 09/11] Disabled CSS Formatting on Save in Zed

---
 .zed/settings.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.zed/settings.json b/.zed/settings.json
index 85598aa..6fe4567 100644
--- a/.zed/settings.json
+++ b/.zed/settings.json
@@ -32,6 +32,7 @@
       "tab_size": 2
     },
     "CSS": {
+      "format_on_save": "off",
       "tab_size": 2
     }
   }

From 822209cd183fec1154350f34dbeea1f377e41daa Mon Sep 17 00:00:00 2001
From: adroslice <adriel.m.slice@gmail.com>
Date: Fri, 2 Aug 2024 14:01:51 +0200
Subject: [PATCH 10/11] Explicit any to suppress typescript warnings

---
 client/src/definitions.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/definitions.ts b/client/src/definitions.ts
index 81d0d3d..86919ca 100644
--- a/client/src/definitions.ts
+++ b/client/src/definitions.ts
@@ -16,7 +16,7 @@ const GetInterfaces: SearchProvider = async (o) => {
   let res = await apiCall('network.interfaces.list', {});
   if (res.Error === null) {
     console.debug('interfaces', res.Data);
-    return Object.fromEntries(res.Data.map(r => [r.name, { display: r.name }]));
+    return Object.fromEntries(res.Data.map((r: any) => [r.name, { display: r.name }]));
   } else {
     console.debug('error', res);
     return {} as Options;
@@ -27,7 +27,7 @@ const GetAddresses: SearchProvider = async (o) => {
   let res = await apiCall('object.addresses.list', {});
   if (res.Error === null) {
     console.debug('addresses', res.Data);
-    return Object.fromEntries(res.Data.map(r => [r.name, { display: r.name }]));
+    return Object.fromEntries(res.Data.map((r: any) => [r.name, { display: r.name }]));
   } else {
     console.debug('error', res);
     return {} as Options;
@@ -38,7 +38,7 @@ const GetServices: SearchProvider = async (o) => {
   let res = await apiCall('object.services.list', {});
   if (res.Error === null) {
     console.debug('services', res.Data);
-    return Object.fromEntries(res.Data.map(r => [r.name, { display: r.name }]));
+    return Object.fromEntries(res.Data.map((r: any) => [r.name, { display: r.name }]));
   } else {
     console.debug('error', res);
     return {} as Options;
@@ -49,7 +49,7 @@ const GetPeers: SearchProvider = async (o) => {
   let res = await apiCall('vpn.wireguard.peers.list', {});
   if (res.Error === null) {
     console.debug('peers', res.Data);
-    return Object.fromEntries(res.Data.map(r => [r.name, { display: r.name }]));
+    return Object.fromEntries(res.Data.map((r: any) => [r.name, { display: r.name }]));
   } else {
     console.debug('error', res);
     return {} as Options;

From 3cd07d7e633aedd4943a6076f3d85b3ebfbef54d Mon Sep 17 00:00:00 2001
From: adroslice <adriel.m.slice@gmail.com>
Date: Fri, 2 Aug 2024 14:03:11 +0200
Subject: [PATCH 11/11] Fixed more typescript warnings

- Mainly moved type exports to .ts file
---
 client/src/components/input/DropdownInput.vue | 24 +++----------
 client/src/components/input/EnumInput.vue     | 17 ++-------
 client/src/components/input/NicerForm.vue     | 15 ++------
 client/src/components/input/input.ts          | 35 +++++++++++++++++++
 client/src/definitions.ts                     |  2 +-
 5 files changed, 45 insertions(+), 48 deletions(-)
 create mode 100644 client/src/components/input/input.ts

diff --git a/client/src/components/input/DropdownInput.vue b/client/src/components/input/DropdownInput.vue
index 86bf7c4..4d249e4 100644
--- a/client/src/components/input/DropdownInput.vue
+++ b/client/src/components/input/DropdownInput.vue
@@ -1,21 +1,7 @@
 <!-- Base component that implements selecting single and multiple values from a list in a type-unsafe manner -->
-<script lang="ts">
-// Types
-export type Options = Record<Index, Option>;
-export type Option = {
-  [key: Index]: any, // Allow additional properties for customization
-  display?: string,
-};
-export type SearchProvider = (opts: SearchOptions) => Promise<Options>;
-export type MaybeSearchProvider = SearchProvider | null;
-export type SearchOptions = {
-  search: string,
-  unknownKeys?: Index[],
-  // parentData?: any,
-};
-</script>
 <script setup lang="ts">
 import { equals, isNullish, Index } from '../../util';
+import type { Options, MaybeSearchProvider } from './input';
 // --- Prop setup ---
 const props = withDefaults(defineProps<{
   // Two-Way Bindings (v-model)
@@ -89,9 +75,9 @@ watch($$(multiple), () => modelValue = multiple ? [] : null );
 // --- Everything Else  ---
 let expanded = $ref(false);
 let navigated = $ref(0);
-let inputDiv: HTMLElement | null = $ref(null);
-let input: HTMLElement | null = $ref(null);
-let valueButton: HTMLElement | null = $ref(null);
+let inputDiv = $ref(null as HTMLElement | null);
+let input = $ref(null as HTMLElement | null);
+let valueButton = $ref(null as HTMLElement | null);
 
 const selCount = $computed(() => modelValue?.length || 0);
 
@@ -266,4 +252,4 @@ input { padding: 0.25rem; outline: none; }
 
 div:empty { display: none; }
 button { padding: 0.25rem; }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/src/components/input/EnumInput.vue b/client/src/components/input/EnumInput.vue
index c079ecd..1c44382 100644
--- a/client/src/components/input/EnumInput.vue
+++ b/client/src/components/input/EnumInput.vue
@@ -1,19 +1,6 @@
-<script lang="ts">
-import { Index, MaybeIndex, equals, variantOf } from '../../util';
-import { Fields } from './NicerForm.vue';
-
-export type Variant = {
-  fields?: Fields,
-  display?: string,
-  icon?: Component
-};
-export type Variants = Record<Index, Variant>;
-export type EnumValueWithFields = { [index: Index]: Record<Index, any> }
-export type EnumValue = Index | EnumValueWithFields;
-export type MaybeEnumValue = EnumValue | null;
-</script>
-
 <script setup lang="ts">
+import type { MaybeEnumValue, Variants, EnumValueWithFields } from './input';
+import { equals, variantOf, MaybeIndex, Index } from '~/util';
 
 const props = withDefaults(defineProps<{
   // Two-Way Bindings
diff --git a/client/src/components/input/NicerForm.vue b/client/src/components/input/NicerForm.vue
index 8ee03c9..3f3d7ad 100644
--- a/client/src/components/input/NicerForm.vue
+++ b/client/src/components/input/NicerForm.vue
@@ -1,17 +1,6 @@
-<script lang="ts">
-import { equals, Index } from '../../util';
-
-export type Field = {
-  is: Component | string,
-  label?: string,
-  props?: any,
-  // actions?: Action[],
-  // forceCastNumber`?: bool,
-};
-export type Fields = Record<Index, Field>;
-</script>
-
 <script setup lang="ts">
+import { equals, Index } from '../../util';
+import type { Fields } from './input';
 const props = withDefaults(defineProps<{
   // Two-Way Bindings
   modelValue?: Record<Index, any>,
diff --git a/client/src/components/input/input.ts b/client/src/components/input/input.ts
new file mode 100644
index 0000000..7b69d8d
--- /dev/null
+++ b/client/src/components/input/input.ts
@@ -0,0 +1,35 @@
+import { Index } from '~/util';
+// --- DROPDOWN_INPUT ---
+export type Options = Record<Index, Option>;
+export type Option = {
+  [key: Index]: any, // Allow additional properties for customization
+  display?: string,
+};
+export type SearchProvider = (opts: SearchOptions) => Promise<Options>;
+export type MaybeSearchProvider = SearchProvider | null;
+export type SearchOptions = {
+  search: string,
+  unknownKeys?: Index[],
+  // parentData?: any,
+};
+
+// --- FORM INPUT ---
+export type Field = {
+  is: Component | string,
+  label?: string,
+  props?: any,
+  // actions?: Action[],
+  // forceCastNumber`?: bool,
+};
+export type Fields = Record<Index, Field>;
+
+// --- ENUM INPUT ---
+export type Variant = {
+  fields?: Fields,
+  display?: string,
+  icon?: Component
+};
+export type Variants = Record<Index, Variant>;
+export type EnumValueWithFields = { [index: Index]: Record<Index, any> }
+export type EnumValue = Index | EnumValueWithFields;
+export type MaybeEnumValue = EnumValue | null;
diff --git a/client/src/definitions.ts b/client/src/definitions.ts
index 86919ca..9ee2e58 100644
--- a/client/src/definitions.ts
+++ b/client/src/definitions.ts
@@ -1,4 +1,4 @@
-import { SearchProvider, Options } from '~/components/input/DropdownInput.vue';
+import { SearchProvider, Options } from '~/components/input/input';
 import { apiCall } from './api';
 
 const GetHardwareInterfaces: SearchProvider = async (o) => {