Outbound modal

frontend/src/components/protocols/Direct.vue

@@ -1,14 +1,14 @@
 <template>
   <v-card subtitle="Direct">
     <v-row>
-      <v-col cols="12" sm="6" md="4">
-        <Network :inbound="inbound" />
+      <v-col cols="12" sm="6" md="4" v-if="direction == 'in'">
+        <Network :data="data" />
       </v-col>
       <v-col cols="12" sm="6" md="4">
         <v-text-field
         label="Override Address"
         hide-details
-        v-model="inbound.override_address">
+        v-model="data.override_address">
         </v-text-field>
       </v-col>
       <v-col cols="12" sm="6" md="4">
@@ -20,6 +20,16 @@
         v-model="override_port">
         </v-text-field>
       </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="direction == 'out'">
+        <v-text-field
+        label="Proxy Protocol"
+        type="number"
+        min="0"
+        max="2"
+        hide-details
+        v-model="proxy_protocol">
+        </v-text-field>
+      </v-col>
     </v-row>
   </v-card>
 </template>
@@ -28,16 +38,20 @@
 import Network from '@/components/Network.vue'
 
 export default {
-    props: ['inbound'],
-    data() {
-        return {}
+  props: ['direction','data'],
+  data() {
+    return {}
+  },
+  computed: {
+    override_port: {
+        get() { return this.$props.data.override_port ? this.$props.data.override_port : ''; },
+        set(newValue: any) { this.$props.data.override_port = newValue.length == 0 || newValue == 0 ? undefined : parseInt(newValue); }
     },
-    computed: {
-        override_port: {
-            get() { return this.$props.inbound.override_port ? this.$props.inbound.override_port : ''; },
-            set(newValue: any) { this.$props.inbound.override_port = newValue.length == 0 || newValue == 0 ? undefined : parseInt(newValue); }
-        },
+    proxy_protocol: {
+      get() { return this.$props.data.proxy_protocol ? this.$props.data.proxy_protocol : ''; },
+      set(newValue: any) { this.$props.data.proxy_protocol = newValue.length == 0 || newValue == 0 ? undefined : parseInt(newValue); }
     },
-    components: { Network }
+  },
+  components: { Network }
 }
 </script>