From 57caae0e76cf87a338733bf1e786fc06987211d7 Mon Sep 17 00:00:00 2001
From: Martin Sottnik <msottnik@gmail.com>
Date: Thu, 21 Oct 2021 13:51:13 +0200
Subject: [PATCH] ipv4 ip connection fields (#225)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Pavol Porubský <paulooze@gmail.com>
---
 .../forms/site-network-access-form.tsx        | 102 +++++++++++++++++-
 1 file changed, 101 insertions(+), 1 deletion(-)

diff --git a/packages/frinx-gamma/src/components/forms/site-network-access-form.tsx b/packages/frinx-gamma/src/components/forms/site-network-access-form.tsx
index dfbf332c7..e44fe69de 100644
--- a/packages/frinx-gamma/src/components/forms/site-network-access-form.tsx
+++ b/packages/frinx-gamma/src/components/forms/site-network-access-form.tsx
@@ -1,5 +1,5 @@
 import React, { FC, FormEvent, useEffect, useState } from 'react';
-import { Divider, Button, Input, Select, Stack, FormControl, FormLabel } from '@chakra-ui/react';
+import { Divider, Button, Heading, Input, Select, Stack, FormControl, FormLabel } from '@chakra-ui/react';
 import {
   AccessPriority,
   MaximumRoutes,
@@ -7,6 +7,7 @@ import {
   VpnSite,
   SiteNetworkAccess,
   RequestedCVlan,
+  IPConnection,
 } from './site-types';
 import Autocomplete2, { Item } from '../autocomplete-2/autocomplete-2';
 import RoutingProtocolForm from './routing-protocol-form';
@@ -174,6 +175,9 @@ const SiteNetAccessForm: FC<Props> = ({
   });
   const [selectedBgpProfileItem] = bgpProfileItems.filter((i) => i.value === bgpRoutingProtocol.bgp?.bgpProfile);
 
+  const ipv4Connection = unwrap(unwrap(networkAccessState.ipConnection).ipv4);
+  console.log(ipv4Connection.addresses?.prefixLength);
+
   return (
     <form onSubmit={handleSubmit}>
       <FormControl id="vpn-attachment" my={6}>
@@ -395,6 +399,102 @@ const SiteNetAccessForm: FC<Props> = ({
         </Select>
       </FormControl>
 
+      <Heading size="sm">IP Connection</Heading>
+      <FormControl id="ip-address-allocation-type" my={6}>
+        <FormLabel>Address Allocation Type</FormLabel>
+        <Input
+          variant="filled"
+          name="ip-address-allocation-type"
+          value={ipv4Connection.addressAllocationType?.split(':').pop()}
+          onChange={(event) => {
+            setNetworkAccessState({
+              ...networkAccessState,
+              ipConnection: {
+                ...networkAccessState.ipConnection,
+                ipv4: {
+                  ...networkAccessState.ipConnection?.ipv4,
+                  addressAllocationType: event.target.value || undefined,
+                },
+              },
+            });
+          }}
+        />
+      </FormControl>
+      <FormControl id="ip-provider-address" my={6}>
+        <FormLabel>Provider Address</FormLabel>
+        <Input
+          variant="filled"
+          name="provider-address"
+          value={ipv4Connection.addresses?.providerAddress}
+          onChange={(event) => {
+            setNetworkAccessState({
+              ...networkAccessState,
+              ipConnection: {
+                ...networkAccessState.ipConnection,
+                ipv4: {
+                  ...networkAccessState.ipConnection?.ipv4,
+                  addresses: {
+                    ...networkAccessState.ipConnection?.ipv4?.addresses,
+                    providerAddress: event.target.value || undefined,
+                  },
+                },
+              },
+            });
+          }}
+        />
+      </FormControl>
+      <FormControl id="ip-customer-address" my={6}>
+        <FormLabel>Customer Address</FormLabel>
+        <Input
+          variant="filled"
+          name="customer-address"
+          value={ipv4Connection.addresses?.customerAddress}
+          onChange={(event) => {
+            setNetworkAccessState({
+              ...networkAccessState,
+              ipConnection: {
+                ...networkAccessState.ipConnection,
+                ipv4: {
+                  ...networkAccessState.ipConnection?.ipv4,
+                  addresses: {
+                    ...networkAccessState.ipConnection?.ipv4?.addresses,
+                    customerAddress: event.target.value || undefined,
+                  },
+                },
+              },
+            });
+          }}
+        />
+      </FormControl>
+      <FormControl id="ip-prefix-length" my={6}>
+        <FormLabel>Prefix Length</FormLabel>
+        <Input
+          variant="filled"
+          name="prefix-length"
+          value={ipv4Connection.addresses?.prefixLength || ''}
+          onChange={(event) => {
+            console.log(event.target.value);
+            if (Number.isNaN(event.target.value)) {
+              return;
+            }
+            console.log('is number: ', Number(event.target.value));
+            setNetworkAccessState({
+              ...networkAccessState,
+              ipConnection: {
+                ...networkAccessState.ipConnection,
+                ipv4: {
+                  ...networkAccessState.ipConnection?.ipv4,
+                  addresses: {
+                    ...networkAccessState.ipConnection?.ipv4?.addresses,
+                    prefixLength: Number(event.target.value) || undefined,
+                  },
+                },
+              },
+            });
+          }}
+        />
+      </FormControl>
+
       <Divider my={4} />
       <Stack direction="row" spacing={2} align="center">
         <Button type="submit" colorScheme="blue">