diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/linkCalculationApp')
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); |