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 = ({ }); const [selectedBgpProfileItem] = bgpProfileItems.filter((i) => i.value === bgpRoutingProtocol.bgp?.bgpProfile); + const ipv4Connection = unwrap(unwrap(networkAccessState.ipConnection).ipv4); + console.log(ipv4Connection.addresses?.prefixLength); + return (
@@ -395,6 +399,102 @@ const SiteNetAccessForm: FC = ({ + IP Connection + + Address Allocation Type + { + setNetworkAccessState({ + ...networkAccessState, + ipConnection: { + ...networkAccessState.ipConnection, + ipv4: { + ...networkAccessState.ipConnection?.ipv4, + addressAllocationType: event.target.value || undefined, + }, + }, + }); + }} + /> + + + Provider Address + { + setNetworkAccessState({ + ...networkAccessState, + ipConnection: { + ...networkAccessState.ipConnection, + ipv4: { + ...networkAccessState.ipConnection?.ipv4, + addresses: { + ...networkAccessState.ipConnection?.ipv4?.addresses, + providerAddress: event.target.value || undefined, + }, + }, + }, + }); + }} + /> + + + Customer Address + { + setNetworkAccessState({ + ...networkAccessState, + ipConnection: { + ...networkAccessState.ipConnection, + ipv4: { + ...networkAccessState.ipConnection?.ipv4, + addresses: { + ...networkAccessState.ipConnection?.ipv4?.addresses, + customerAddress: event.target.value || undefined, + }, + }, + }, + }); + }} + /> + + + Prefix Length + { + 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, + }, + }, + }, + }); + }} + /> + +