From 0b7b69385f71c353510987d9e6045691fcba8afa Mon Sep 17 00:00:00 2001 From: Aijana Schumann Date: Thu, 3 Sep 2020 15:54:52 +0200 Subject: Update LinkCalculator update linkCalculator with latest changes Issue-ID: CCSDK-2714 Signed-off-by: Aijana Schumann Change-Id: Ie921da17f46a5e13e08a17d6433c80f7213220f2 --- .../src/views/linkCalculationComponent.tsx | 283 +++++++++++++++------ 1 file changed, 201 insertions(+), 82 deletions(-) (limited to 'sdnr/wt/odlux/apps/linkCalculationApp/src/views/linkCalculationComponent.tsx') 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, { rainMethodDisplay: boolean }> { +type linkCalculationProps = Connect; + +class LinkCalculation extends React.Component { 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{ + + 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 { - 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 {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:
Horizontal
- Vertical -
, val3:''}, - {name : 'Frequency (GHz)', val1: '', val2:
-
,val3: ''}, - {name: 'Free Space Loss (dB)' ,val1: '', val2: this.props.fsl,val3: ''}, - {name:'Rain Model', val1:'', val2:
-
, val3:''}, - {name: 'Rainfall Rate (mm/h)', val1: '', val2:, val3:''}, - {name: 'Rain Loss (dB/km)', val1: '', val2: this.props.rainAtt, val3: ''}, - {name: '', val1:'', val2:, val3:'' } - - ]; - - - return
- Link Calculation app. LinkId: {this.props.linkId}
+ + return
{!this.props.formView &&
@@ -230,17 +233,133 @@ class LinkCalculation extends React.Component } - - - - - - -
- - } - + +
+ + + + {""} + {"Site A"} + {""} + {"Site B"} + + + + + {"Site Name"} + {this.props.siteA} + {""} + {this.props.siteB} + + + {"Latitude"} + {this.props.lat1 && this.LatLonToDMS(this.props.lat1)} + {""} + {this.props.lat2 && this.LatLonToDMS(this.props.lat2)} + + + {"Longitude"} + {this.props.lon1 && this.LatLonToDMS(this.props.lon1)} + {""} + {this.props.lon2 && this.LatLonToDMS(this.props.lon2)} + + + {"Azimuth"} + {""} + {""} + {""} + + + {"Average Mean Sea Level"} + {this.props.amslA + ' m'} + {""} + {this.props.amslB+ ' m'} + + + {"Antenna Height Above Ground"} + {this.props.aglA+ ' m'} + {""} + {this.props.aglB+ ' m'} + + + {"Distance"} + {""} + {this.props.distance.toFixed(3)+ ' km'} + {""} + + + {"Polarization"} + {""} + {
this.props.updatePolarization(e.target.value)}>Horizontal
+ {this.props.updatePolarization(e.target.value)}}>Vertical} + {""} + + + {"Frequency"} + {""} + {} + + {""} + + + {"Free Space Loss"} + {""} + {this.props.fsl + ' dB'} + {""} + + + {"Rain Model"} + {""} + {} + {""} + + + {"Rainfall Rate"} + {""} + {
{ this.props.updateRainValue(Number(e.target.value)) }} + value={this.props.rainVal} disabled={this.state.rainMethodDisplay === false ? true : false}> + mm/hr } + {""} + + + {"Rain Loss"} + {""} + {this.props.rainAtt + ' dB'} + {""} + + + {""} + {""} + {} + {""} + + + +
+
+ + + + +
+ } } export default connect(mapProps, mapDispatch)(LinkCalculation); -- cgit 1.2.3-korg