Update LinkCalculator

update linkCalculator with latest changes

Issue-ID: CCSDK-2714
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: Ie921da17f46a5e13e08a17d6433c80f7213220f2

5 files changed, 254 insertions, 106 deletions

diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/src/actions/commonLinkCalculationActions.ts b/sdnr/wt/odlux/apps/linkCalculationApp/src/actions/commonLinkCalculationActions.ts
index 555954d15..09887f27f 100644
--- a/sdnr/wt/odlux/apps/linkCalculationApp/src/actions/commonLinkCalculationActions.ts
+++ b/sdnr/wt/odlux/apps/linkCalculationApp/src/actions/commonLinkCalculationActions.ts
@@ -81,24 +81,24 @@ export class UpdateLatLonAction extends Action{
         
     }
 }
+export class UpdatePolAction extends Action{
+    constructor(public polarization: string){
+        super();
+    }
+}
 export class isCalculationServerReachableAction extends Action{
     constructor(public reachable: boolean){
         super();
     }
 }
+export class updateAltitudeAction extends Action{
+    constructor(
+        public amslA:number,
+        public aglA:number,
+        public amslB:number,
+        public aglB:number
+        ){
+        super();
+    }
+}
 
-// export const checkCalculationsServerConnectivityAction = (callback: Promise<any>) => (dispatcher: Dispatch, getState: () => IApplicationStoreState)=>{
-//     callback
-//     .then(res =>{ 
-//         const {linkCalculation:{calculations: {isCalculationServerAvailable}}} = getState();
-//         if(!isToplogyServerAvailable){
-//             dispatcher(new IsTopologyServerReachableAction(true))
-//         }
-//     })
-//     .catch(error=>{
-//         const {network:{connectivity: {isToplogyServerAvailable}}} = getState();
-//         if(isToplogyServerAvailable){
-//            dispatcher(new IsTopologyServerReachableAction(false))
-//         }
-//     })
-// }
diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/src/components/connectionInfo.tsx b/sdnr/wt/odlux/apps/linkCalculationApp/src/components/connectionInfo.tsx
index c798e481f..cae6fbd9e 100644
--- a/sdnr/wt/odlux/apps/linkCalculationApp/src/components/connectionInfo.tsx
+++ b/sdnr/wt/odlux/apps/linkCalculationApp/src/components/connectionInfo.tsx
@@ -30,7 +30,7 @@ type props = Connect<typeof mapStateToProps, typeof mapDispatchToProps>;
 const ConnectionInfo: React.FunctionComponent<props> = (props) => {
 
     return (
-        (props.isCalculationServerReachable === false)?  <Paper style={{padding:5, position: 'absolute', top: 160, width: 230, left:"40%"}}>
+        (props.isCalculationServerReachable === false)?  <Paper style={{padding:5, width: 230, position:"absolute", top:"40%", left:"40%"}}>
         <div style={{display: 'flex', flexDirection: 'column'}}>
         <div style={{'alignSelf': 'center', marginBottom:5}}> <Typography> <FontAwesomeIcon icon={faExclamationTriangle} /> Connection Error</Typography></div>
         {props.isCalculationServerReachable === false && <Typography> Calculation data can't be loaded.</Typography>}
diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/src/handlers/linkCalculationAppRootHandler.ts b/sdnr/wt/odlux/apps/linkCalculationApp/src/handlers/linkCalculationAppRootHandler.ts
index 00dd48d45..85c013572 100644
--- a/sdnr/wt/odlux/apps/linkCalculationApp/src/handlers/linkCalculationAppRootHandler.ts
+++ b/sdnr/wt/odlux/apps/linkCalculationApp/src/handlers/linkCalculationAppRootHandler.ts
@@ -15,14 +15,13 @@
 * the License.
 * ============LICENSE_END==========================================================================
 */
-// main state handler
 
 import { combineActionHandler } from '../../../../framework/src/flux/middleware';
 
 // ** do not remove **
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
 import { IActionHandler } from '../../../../framework/src/flux/action';;
-import { UpdateLinkIdAction, UpdateFrequencyAction , UpdateLatLonAction, UpdateRainAttAction, UpdateRainValAction, updateHideForm, UpdateFslCalculation, UpdateSiteAction, UpdateDistanceAction, isCalculationServerReachableAction} from '../actions/commonLinkCalculationActions';
+import { UpdateLinkIdAction, UpdateFrequencyAction , UpdateLatLonAction, UpdateRainAttAction, UpdateRainValAction, updateHideForm, UpdateFslCalculation, UpdateSiteAction, UpdateDistanceAction, isCalculationServerReachableAction, UpdatePolAction, updateAltitudeAction} from '../actions/commonLinkCalculationActions';
 
 declare module '../../../../framework/src/store/applicationStore' {
   interface IApplicationStoreState {
@@ -48,7 +47,12 @@ export type ILinkCalculationAppStateState= {
   rainAtt : number,
   siteA: any,
   siteB: any,
-  reachable: boolean
+  reachable: boolean,
+  polarization : string | null,
+  amslA: number, 
+  amslB:number, 
+  aglA: number, 
+  aglB:number
 }
 
 const initialState: ILinkCalculationAppStateState ={
@@ -65,7 +69,12 @@ const initialState: ILinkCalculationAppStateState ={
   siteB: '',
   rainVal : 0,
   rainAtt: 0,
-  reachable : true
+  reachable : true,
+  polarization : 'Horizontal',
+  amslA: 0, 
+  amslB:0, 
+  aglA: 0, 
+  aglB:0
 }
 
 
@@ -102,7 +111,12 @@ export const LinkCalculationHandler: IActionHandler<ILinkCalculationAppStateStat
   }
   else if(action instanceof isCalculationServerReachableAction){
     state = Object.assign({}, state, { reachable: action.reachable });
-}
+  }
+  else if (action instanceof UpdatePolAction){
+    state = Object.assign({}, state, {polarization: action.polarization})
+  }else if (action instanceof updateAltitudeAction){
+    state = Object.assign({}, state, {amslA:action.amslA, amslB:action.amslA, aglA:action.aglA, aglB:action.aglB})
+  }
   return state
 }
 
diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/src/pluginLinkCalculation.tsx b/sdnr/wt/odlux/apps/linkCalculationApp/src/pluginLinkCalculation.tsx
index fc72f5ab3..f86b22a5c 100644
--- a/sdnr/wt/odlux/apps/linkCalculationApp/src/pluginLinkCalculation.tsx
+++ b/sdnr/wt/odlux/apps/linkCalculationApp/src/pluginLinkCalculation.tsx
@@ -15,6 +15,7 @@
 * the License.
 * ============LICENSE_END==========================================================================
 */
+
 // app configuration and main entry point for the app
 
 import * as React from "react";
@@ -27,13 +28,14 @@ import  LinkCalculation  from './views/linkCalculationComponent';
 import LinkCalculationAppRootHandler from './handlers/linkCalculationAppRootHandler';
 import connect, { Connect, IDispatcher } from '../../../framework/src/flux/connect';
 import { IApplicationStoreState } from "../../../framework/src/store/applicationStore";
-import { UpdateLinkIdAction, UpdateLatLonAction, updateHideForm, UpdateSiteAction, UpdateDistanceAction } from "./actions/commonLinkCalculationActions";
+import { UpdateLinkIdAction, UpdateLatLonAction, updateHideForm, UpdateSiteAction, UpdateDistanceAction, isCalculationServerReachableAction, updateAltitudeAction } from "./actions/commonLinkCalculationActions";
 
 
 let currentLinkId: string | null = null;
 let lastUrl: string = "/linkCalculation";
 
 const mapProps = (state: IApplicationStoreState) => ({
+  reachable: state.linkCalculation.calculations.reachable
 });
 
 const mapDisp = (dispatcher: IDispatcher) => ({
@@ -50,6 +52,12 @@ const mapDisp = (dispatcher: IDispatcher) => ({
     dispatcher.dispatch(new UpdateLatLonAction(Lat1, Lon1, Lat2, Lon2))
     dispatcher.dispatch(new updateHideForm (true))
   },
+  updateAltitude : (amslA:number, aglA:number, amslB:number, aglB:number) => {
+    dispatcher.dispatch(new updateAltitudeAction(amslA,aglA,amslB,aglB))
+  }
+  // UpdateConectivity : (reachable:boolean) => {
+  //   dispatcher.dispatch (new isCalculationServerReachableAction (reachable))
+  // }
 });
 
 
@@ -69,7 +77,6 @@ const LinkCalculationRouteAdapter = connect(mapProps, mapDisp)((props: RouteComp
     if (data !== undefined && data.length>0){
 
     
-    
     const lat1 = data.split('&')[0].split('=')[1]
     const lon1 = data.split('&')[1].split('=')[1]
     const lat2 = data.split('&')[2].split('=')[1]
@@ -80,12 +87,20 @@ const LinkCalculationRouteAdapter = connect(mapProps, mapDisp)((props: RouteComp
 
     const distance = data.split('&')[8].split('=')[1]
 
+    const amslA = data.split('&')[9].split('=')[1]
+    const aglA = data.split('&')[10].split('=')[1]
+
+    const amslB = data.split('&')[11].split('=')[1]
+    const aglB = data.split('&')[12].split('=')[1]
+
 
     props.updateSiteName(String(siteNameA), String(siteNameB))
-    props.updateDistance(Number(distance))
 
+    props.updateDistance(Number(distance))
 
     props.updateLatLon(Number(lat1),Number(lon1),Number(lat2),Number(lon2))
+
+    props.updateAltitude (Number(amslA), Number(aglA), Number(amslB), Number(aglB))
     
     }
     
diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/src/views/linkCalculationComponent.tsx b/sdnr/wt/odlux/apps/linkCalculationApp/src/views/linkCalculationComponent.tsx
index 97219b6d8..9cbc771f4 100644
--- a/sdnr/wt/odlux/apps/linkCalculationApp/src/views/linkCalculationComponent.tsx
+++ b/sdnr/wt/odlux/apps/linkCalculationApp/src/views/linkCalculationComponent.tsx
@@ -15,16 +15,18 @@
  * the License.
  * ============LICENSE_END==========================================================================
  */
+
 import * as React from "react";
 
 import { Connect, connect, IDispatcher } from '../../../../framework/src/flux/connect';
 import { MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
-import { TextField, Tabs, Tab, Typography, AppBar, Button, Tooltip } from '@material-ui/core';
+import { TextField, Tabs, Tab, Typography, AppBar, Button, Tooltip, Checkbox, Table, TableCell, TableHead, TableRow, TableBody, Paper } from '@material-ui/core';
 import DenseTable from '../components/denseTable'
 
 import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore";
-import { UpdateFrequencyAction, UpdateLatLonAction, UpdateRainAttAction, UpdateRainValAction, UpdateFslCalculation, isCalculationServerReachableAction } from "../actions/commonLinkCalculationActions";
+import { UpdateFrequencyAction, UpdateLatLonAction, UpdateRainAttAction, UpdateRainValAction, UpdateFslCalculation, isCalculationServerReachableAction, UpdatePolAction, UpdateDistanceAction, updateAltitudeAction } from "../actions/commonLinkCalculationActions";
 import { faPlaneArrival } from "@fortawesome/free-solid-svg-icons";
+import ConnectionInfo from '../components/connectionInfo'
 
 const mapProps = (state: IApplicationStoreState) => ({
   linkId: state.linkCalculation.calculations.linkId,
@@ -40,7 +42,12 @@ const mapProps = (state: IApplicationStoreState) => ({
   siteA: state.linkCalculation.calculations.siteA,
   siteB: state.linkCalculation.calculations.siteB,
   distance: state.linkCalculation.calculations.distance,
-  reachable :state.linkCalculation.calculations.reachable
+  reachable :state.linkCalculation.calculations.reachable,
+  polarization:state.linkCalculation.calculations.polarization,
+  amslA:state.linkCalculation.calculations.amslA,
+  amslB:state.linkCalculation.calculations.amslB,
+  aglA:state.linkCalculation.calculations.aglA,
+  aglB:state.linkCalculation.calculations.aglB
 });
 
 const BASE_URL="/topology/services"
@@ -52,9 +59,7 @@ const mapDispatch = (dispatcher: IDispatcher) => ({
 
   },
   updateLatLon: (Lat1: number, Lon1: number, Lat2: number, Lon2: number) => {
-
     dispatcher.dispatch(new UpdateLatLonAction(Lat1, Lon1, Lat2, Lon2))
-
   },
   
   updateRainValue: (rainVal: number) => {
@@ -76,18 +81,31 @@ const mapDispatch = (dispatcher: IDispatcher) => ({
 
   UpdateConectivity : (reachable:boolean) => {
     dispatcher.dispatch (new isCalculationServerReachableAction (reachable))
+  },
+
+  updatePolarization :(polarization:any)=>{
+    dispatcher.dispatch (new UpdatePolAction(polarization))
+  },
+
+  updateAutoDistance : (distance:number)=>{
+    dispatcher.dispatch (new UpdateDistanceAction(distance))
   }
 });
 
-class LinkCalculation extends React.Component<Connect<typeof mapProps, typeof mapDispatch>, { rainMethodDisplay: boolean }> {
+type linkCalculationProps = Connect<typeof mapProps, typeof mapDispatch>;
+
+class LinkCalculation extends React.Component<linkCalculationProps, {rainMethodDisplay: boolean, horizontalBoxChecked: boolean}> {
   constructor(props: any) {
     super(props)
-    this.state = { rainMethodDisplay: true }
-  }
-
-  handleChange = (e: number) => {
-    this.props.updateFrequency(e)
-  }
+    this.state = { rainMethodDisplay: false,
+      horizontalBoxChecked: true
+                }
+    } 
+  updateAutoDistance = async (lat1: number, lon1: number, lat2: number, lon2: number)=>{
+     const result = await fetch(BASE_URL+'/calculations/distance/' + lat1 + '/' + lon1 + '/' + lat2 + '/' + lon2)
+      const json = await result.json()
+      return json.distanceInKm
+      }
 
   updateLatLon = (e: any) => {
     
@@ -98,6 +116,13 @@ class LinkCalculation extends React.Component<Connect<typeof mapProps, typeof ma
 
   }
 
+  updatePoli = (val: string) =>{
+
+    this.setState({horizontalBoxChecked: !this.state.horizontalBoxChecked});
+    this.props.updatePolarization(val);
+    //this.forceUpdate();
+  }
+
   LatLonToDMS = (value: number, isLon: boolean = false) => {
     const absoluteValue = Math.abs(value);
     const d = Math.floor(absoluteValue);
@@ -114,43 +139,47 @@ class LinkCalculation extends React.Component<Connect<typeof mapProps, typeof ma
     }
   }
 
-  calRain = (lat1: any, lon1: any, lat2: any, lon2: any, frequency: any) => {
-    fetch(BASE_URL+'/calculations/rain/' + lat1 + '/' + lon1 + '/' + lat2 + '/' + lon2 + '/' + frequency)
+  rainAttCal = (lat1: any, lon1: any, lat2: any, lon2: any, frequency: any, distance: number, polarization : any) => {
+    fetch(BASE_URL+'/calculations/rain/' + lat1 + '/' + lon1 + '/' + lat2 + '/' + lon2 + '/' + frequency+ '/'+ distance + '/' + polarization)
       .then(res => res.json())
       .then(result => { this.props.UpdateRainAtt(result.RainAtt) })
   }
 
 
-  updateRainValue = (lat1: any, lon1: any, lat2: any, lon2: any) => {
-    fetch(BASE_URL+'/calculations/rain/' + lat1 + '/' + lon1 + '/' + lat2 + '/' + lon2)
-      .then(res => res.json())
-      .then(result => { this.props.updateRainValue(result.RainAtt) })
-  }
-
-
-  specificRain = (rainfall: number, frequency: number) => {
-    fetch(BASE_URL+'/calculations/rain/' + rainfall + '/' + frequency)
+  manualRain = (rainfall: number, frequency: number, distance:number, polarization : any) => {
+    fetch(BASE_URL+'/calculations/rain/' + rainfall + '/' + frequency + '/' + distance+ '/' + polarization)
       .then(res => res.json())
       .then(result => { this.props.specificRain(result.RainAtt) })
     }
 
+  updateRainValue = (lat1: any, lon1: any, lat2: any, lon2: any) => {
+      fetch(BASE_URL+'/calculations/rainval/' + lat1 + '/' + lon1 + '/' + lat2 + '/' + lon2)
+        .then(res => res.json())
+        .then(result => {this.props.updateRainValue(result.rainFall) })
+    }
+
     FSL = (distance:number, frequency:number) => {
       fetch(BASE_URL+'/calculations/FSL/' + distance + '/' + frequency)
       .then(res=>res.json())
       .then (result => {this.props.FSL(result.free)})
     }
 
-  buttonHandler =() => {
+   
+
+  buttonHandler = async () => {
+      this.props.updateAutoDistance(await this.updateAutoDistance(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2))
+
       this.FSL(this.props.distance, this.props.frequency)
 
       if (this.state.rainMethodDisplay === true){
 
-        this.specificRain(this.props.rainVal, this.props.frequency); 
+        this.manualRain(this.props.rainVal, this.props.frequency, this.props.distance, this.props.polarization); 
       }
       else {
-        this.calRain(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.props.frequency);
         this.updateRainValue(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2)
+        this.rainAttCal(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.props.frequency, this.props.distance, this.props.polarization);
       }
+
   }
 
   componentDidMount = () => {
@@ -158,53 +187,27 @@ class LinkCalculation extends React.Component<Connect<typeof mapProps, typeof ma
     .then(res => {if (res.ok) {this.props.reachable===false && this.props.UpdateConectivity(true)}else {this.props.reachable===true && this.props.UpdateConectivity(false)} })
     .catch (res => {this.props.reachable===true && this.props.UpdateConectivity(false)} )
   }
-  
+
+  handleChange =(e:any) => {
+  this.props.updatePolarization(e.target.value)
+  }
+
+  // AbsorptionAttW = () => {
+  //   fetch(BASE_URL+'/calculations/FSL/' + distance + '/' + frequency)
+  //   .then(res=>res.json())
+  //   .then (result => {this.props.FSL(result.free)})
+  // }
+
+  // AbsorptionAttOx =() => {
+  //   fetch(BASE_URL+'/calculations/FSL/' + distance + '/' + frequency)
+  //   .then(res=>res.json())
+  //   .then (result => {this.props.FSL(result.free)})
+  // }
+
+
   render() {
-    console.log(this.props);
-    const data = [
-
-      { name: "Site Name", val1: this.props.siteA, val2: '', val3:  this.props.siteB},
-      { name: "Latitude", val1: this.props.lat1 && this.LatLonToDMS(this.props.lat1), val2:'', val3: this.props.lat2 && this.LatLonToDMS(this.props.lat2) },
-      { name: "Longitude", val1: this.props.lon1 && this.LatLonToDMS(this.props.lon1, true), val2:'', val3: this.props.lon2 && this.LatLonToDMS(this.props.lon2, true) },
-      { name: "Azimuth in °", val1: '', val2: '' , val3:''},
-      { name: "", val1: '', val2: '' , val3:''},
-      { name: "Distance (km)", val1: '', val2: (this.props.distance).toFixed(3) ,val3:'' },
-      {name: 'Polarization', val1:'', val2: <div><input type='checkbox' id='Horizontal' value ="Horizontal"></input>Horizontal<br />
-      <input type='checkbox' id='Vertical' value ="Vertical"></input>Vertical
-      </div>, val3:''},
-      {name : 'Frequency (GHz)', val1: '', val2:  <div> 
-      <select onChange={(e) => this.handleChange(Number(e.target.value))}>
-      <option value='' >Select Freq</option>
-      <option value='7' >7 GHz</option>
-      <option value='11' >11 GHz</option>
-      <option value='15' >15 GHz</option>
-      <option value='23' >23 GHz</option>
-      <option value='26' >26 GHz</option>
-      <option value='28' >28 GHz</option>
-      <option value='38' >38 GHz</option>
-      <option value='42' >42 GHz</option>
-      <option value='80' >80 GHz</option>
-        </select></div>,val3: ''},
-      {name: 'Free Space Loss (dB)' ,val1: '', val2: this.props.fsl,val3: ''},
-      {name:'Rain Model', val1:'', val2: <div>
-      <select onChange={e => { this.setState({ rainMethodDisplay: !this.state.rainMethodDisplay }) }} >
-        <option value='' >Select Rain Method</option>
-        <option value='itu' onSelect={e => { this.setState({ rainMethodDisplay: false }) }}>ITU-R P.837-7</option>
-        <option value='manual' onSelect={(e) => { this.updateRainValue(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2) }}  >Specific Rain</option>
-      </select> </div>, val3:''},
-      {name: 'Rainfall Rate (mm/h)', val1: '', val2:<label>
-       <input type="number" style={{ width: 70, height: 15, fontSize: 14 }} onChange={(e) => { this.props.updateRainValue(Number(e.target.value)) }}
-        value={this.props.rainVal} disabled={this.state.rainMethodDisplay === false ? true : false}>
-      </input></label>, val3:''},
-      {name: 'Rain Loss (dB/km)', val1: '', val2: this.props.rainAtt, val3: ''},
-      {name: '', val1:'', val2:<button style={{color: '#222', fontFamily:'Arial', boxAlign: 'center', display:'inline-block', insetInlineStart: '20' }}
-      onClick = {(e) => this.buttonHandler()} >Calculate</button>, val3:'' }
-     
-    ];
-
-
-    return <div>
-      Link Calculation app. LinkId: {this.props.linkId} <br />
+    
+    return <div style={{position: 'relative'}}>
 
       {!this.props.formView && <form>
           <div>
@@ -230,17 +233,133 @@ class LinkCalculation extends React.Component<Connect<typeof mapProps, typeof ma
           </div>
         </form>
         }
-      
-        <DenseTable height={600} width={1300} hover={true} headers={["", "Site A","", "Site B"]} data={data}> </DenseTable>
-
-          
-
-      
-    </div>
-
-  }
-
 
+<Paper style={{borderRadius:"0px"}}>
+       <div style={{ height:600, overflow:"auto"}}>
+            <Table stickyHeader size="small" aria-label="a dense table" >
+                <TableHead>
+                    <TableRow>
+                    <TableCell >{""}  </TableCell>
+                    <TableCell >{"Site A"}</TableCell>
+                    <TableCell > {""} </TableCell>
+                    <TableCell >{"Site B"}  </TableCell>
+                </TableRow>
+                </TableHead>
+              <TableBody>
+                <TableRow>
+                    <TableCell >{"Site Name"}  </TableCell>
+                    <TableCell >{this.props.siteA}</TableCell>
+                    <TableCell > {""} </TableCell>
+                    <TableCell >{this.props.siteB}  </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell >{"Latitude"}  </TableCell>
+                    <TableCell >{this.props.lat1  && this.LatLonToDMS(this.props.lat1)} </TableCell>
+                    <TableCell > {""} </TableCell>
+                    <TableCell >{this.props.lat2 && this.LatLonToDMS(this.props.lat2)}  </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell >{"Longitude"}  </TableCell>
+                    <TableCell >{this.props.lon1 && this.LatLonToDMS(this.props.lon1)}</TableCell>
+                    <TableCell > {""} </TableCell>
+                    <TableCell >{this.props.lon2 && this.LatLonToDMS(this.props.lon2)}  </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell >{"Azimuth"}  </TableCell>
+                    <TableCell >{""}</TableCell>
+                    <TableCell > {""} </TableCell>
+                    <TableCell >{""}  </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell >{"Average Mean Sea Level"}  </TableCell>
+                    <TableCell >{this.props.amslA + ' m'}</TableCell>
+                    <TableCell > {""} </TableCell>
+                    <TableCell >{this.props.amslB+ ' m'}  </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell >{"Antenna Height Above Ground"}  </TableCell>
+                    <TableCell >{this.props.aglA+ ' m'}</TableCell>
+                    <TableCell > {""} </TableCell>
+                    <TableCell >{this.props.aglB+ ' m'}  </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell >{"Distance"}  </TableCell>
+                    <TableCell >{""}</TableCell>
+                    <TableCell > {this.props.distance.toFixed(3)+ ' km'} </TableCell>
+                    <TableCell >{""}  </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell >{"Polarization"}  </TableCell>
+                    <TableCell >{""}</TableCell>
+                    <TableCell > {<form><input type='checkbox' id='Horizontal' value ="Horizontal" checked= {this.props.polarization==='Horizontal'} onClick= {(e: any) => this.props.updatePolarization(e.target.value)}></input>Horizontal<br />
+                    <input type='checkbox' id='Vertical' value ="Vertical" checked= {this.props.polarization==='Vertical'} onClick= {(e:any)=>{this.props.updatePolarization(e.target.value)}}></input>Vertical</form>} </TableCell>
+                    <TableCell >{""}  </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell >{"Frequency"}  </TableCell>
+                    <TableCell >{""}</TableCell>
+                    <TableCell > {<select onChange={(e) => this.props.updateFrequency(Number(e.target.value))}>
+                        <option value='' >Select Freq</option>
+                        <option value='7' >7 GHz</option>
+                        <option value='11' >11 GHz</option>
+                        <option value='15' >15 GHz</option>
+                        <option value='23' >23 GHz</option>
+                        <option value='26' >26 GHz</option>
+                        <option value='28' >28 GHz</option>
+                        <option value='38' >38 GHz</option>
+                        <option value='42' >42 GHz</option>
+                        <option value='80' >80 GHz</option>
+                        </select>} 
+                      </TableCell>
+                    <TableCell >{""}  </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell >{"Free Space Loss"}  </TableCell>
+                    <TableCell >{""}</TableCell>
+                    <TableCell > {this.props.fsl + ' dB'} </TableCell>
+                    <TableCell >{""}  </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell >{"Rain Model"}  </TableCell>
+                    <TableCell >{""}</TableCell>
+                    <TableCell > {<select onChange = {(e) => {e.target.value === 'itu' ? this.setState({ rainMethodDisplay: false}):this.setState({ rainMethodDisplay: true}) }}>
+                      <option >Select Rain Method</option>
+                      <option value='itu' >ITU-R P.837-7</option>
+                      <option value='manual'  >Specific Rain</option>
+                      </select>} </TableCell>
+                    <TableCell >{""} </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell >{"Rainfall Rate"}  </TableCell>
+                    <TableCell >{""}</TableCell>
+                    <TableCell > {<form><input type="number" style={{ width: 70, height: 15, fontSize: 14 }} onChange={(e) => { this.props.updateRainValue(Number(e.target.value)) }}
+                    value={this.props.rainVal} disabled={this.state.rainMethodDisplay === false ? true : false}>
+                    </input>  mm/hr</form> } </TableCell>
+                    <TableCell >{""}  </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell >{"Rain Loss"}  </TableCell>
+                    <TableCell >{""}</TableCell>
+                    <TableCell > {this.props.rainAtt + ' dB'} </TableCell>
+                    <TableCell >{""}  </TableCell>
+                </TableRow>
+                <TableRow>
+                    <TableCell >{""}  </TableCell>
+                    <TableCell >{""}</TableCell>
+                    <TableCell > {<button style={{color: '#222', fontFamily:'Arial', boxAlign: 'center', display:'inline-block', insetInlineStart: '20' }}
+                    onClick = {(e) => this.buttonHandler()} >Calculate</button>} </TableCell>
+                    <TableCell >{""}  </TableCell>
+                </TableRow>
+
+                </TableBody>
+            </Table>
+            </div>
+        </Paper>
+      <ConnectionInfo />
+        
+        
+        </div>
+    }
 }
 
 export default connect(mapProps, mapDispatch)(LinkCalculation);