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] 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>