import './Style.scss'
import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore";
-import { UpdateFrequencyAction, UpdateLatLonAction, UpdateRainAttAction, UpdateRainValAction, UpdateFslCalculation, isCalculationServerReachableAction, UpdatePolAction, UpdateDistanceAction, updateAltitudeAction, UpdateAbsorptionLossAction, UpdateWorstMonthRainAction } from "../actions/commonLinkCalculationActions";
+import { UpdateFrequencyAction, UpdateLatLonAction, UpdateRainAttAction, UpdateRainValAction, UpdateFslCalculation, isCalculationServerReachableAction, UpdatePolAction, UpdateDistanceAction, updateAltitudeAction, UpdateAbsorptionLossAction, UpdateWorstMonthRainAction, UpdateTxPowerAction, UpdateRxSensitivityAction, UpdateEIRPAction, UpdateRxPowerAction, UpdateSomAction } from "../actions/commonLinkCalculationActions";
import { faPlaneArrival, faAlignCenter } from "@fortawesome/free-solid-svg-icons";
import ConnectionInfo from '../components/connectionInfo'
import { red } from "@material-ui/core/colors";
+import { Dvr } from "@material-ui/icons";
rainAtt: state.linkCalculation.calculations.rainAtt,
rainVal: state.linkCalculation.calculations.rainVal,
formView: state.linkCalculation.calculations.formView,
- fsl:state.linkCalculation.calculations.fsl,
+ fsl: state.linkCalculation.calculations.fsl,
siteA: state.linkCalculation.calculations.siteA,
siteB: state.linkCalculation.calculations.siteB,
distance: state.linkCalculation.calculations.distance,
- 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,
- absorptionOxygen : state.linkCalculation.calculations.absorptionOxygen,
- absorptionWater : state.linkCalculation.calculations.absorptionWater,
- month : state.linkCalculation.calculations.month
+ 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,
+ absorptionOxygen: state.linkCalculation.calculations.absorptionOxygen,
+ absorptionWater: state.linkCalculation.calculations.absorptionWater,
+ month: state.linkCalculation.calculations.month,
+ eirpA: state.linkCalculation.calculations.eirpA,
+ eirpB: state.linkCalculation.calculations.eirpB,
+ antennaGainA: state.linkCalculation.calculations.antennaGainA,
+ antennaGainB: state.linkCalculation.calculations.antennaGainB,
+ antennaNameA: state.linkCalculation.calculations.antennaNameA,
+ antennaNameB: state.linkCalculation.calculations.antennaNameB,
+ systemOperatingMarginA: state.linkCalculation.calculations.systemOperatingMarginA,
+ systemOperatingMarginB: state.linkCalculation.calculations.systemOperatingMarginB,
+ waveguideLossA: state.linkCalculation.calculations.waveguideLossA,
+ waveguideLossB: state.linkCalculation.calculations.waveguideLossB,
+ rxPowerA: state.linkCalculation.calculations.rxPowerA,
+ rxPowerB: state.linkCalculation.calculations.rxPowerB,
+ txPowerA: state.linkCalculation.calculations.txPowerA,
+ txPowerB: state.linkCalculation.calculations.txPowerB,
+ rxSensitivityA: state.linkCalculation.calculations.rxSensitivityA,
+ rxSensitivityB: state.linkCalculation.calculations.rxSensitivityB
+
});
-const BASE_URL="/topology/services"
+const BASE_URL = "/topology/linkcalculator"
const mapDispatch = (dispatcher: IDispatcher) => ({
updateFrequency: (frequency: number) => {
- dispatcher.dispatch(new UpdateFrequencyAction(frequency))
+ dispatcher.dispatch(new UpdateFrequencyAction(frequency))
},
updateLatLon: (Lat1: number, Lon1: number, Lat2: number, Lon2: number) => {
dispatcher.dispatch(new UpdateLatLonAction(Lat1, Lon1, Lat2, Lon2))
},
-
+
updateRainValue: (rainVal: number) => {
dispatcher.dispatch(new UpdateRainValAction(rainVal))
},
dispatcher.dispatch(new UpdateRainAttAction(rainAtt))
},
-
- FSL :(free:number)=> {
- dispatcher.dispatch(new UpdateFslCalculation (free))
- },
- UpdateConectivity : (reachable:boolean) => {
- dispatcher.dispatch (new isCalculationServerReachableAction (reachable))
+ FSL: (free: number) => {
+ dispatcher.dispatch(new UpdateFslCalculation(free))
},
- updatePolarization :(polarization:any)=>{
- dispatcher.dispatch (new UpdatePolAction(polarization))
+ UpdateConectivity: (reachable: boolean) => {
+ dispatcher.dispatch(new isCalculationServerReachableAction(reachable))
},
- updateAutoDistance : (distance:number)=>{
- dispatcher.dispatch (new UpdateDistanceAction(distance))
+ updatePolarization: (polarization: any) => {
+ dispatcher.dispatch(new UpdatePolAction(polarization))
},
- UpdateAbsorption : (OxLoss:number , WaterLoss:number) => {
- dispatcher.dispatch (new UpdateAbsorptionLossAction (OxLoss, WaterLoss))
+ updateAutoDistance: (distance: number) => {
+ dispatcher.dispatch(new UpdateDistanceAction(distance))
+ },
+ UpdateAbsorption: (OxLoss: number, WaterLoss: number) => {
+ dispatcher.dispatch(new UpdateAbsorptionLossAction(OxLoss, WaterLoss))
+ },
+ UpdateWorstMonthRain: (month: string) => {
+ dispatcher.dispatch(new UpdateWorstMonthRainAction(month))
+ },
+ UpdateEIRP: (eirpA: number, eirpB: number) => {
+ dispatcher.dispatch(new UpdateEIRPAction(eirpA, eirpB))
+ },
+ UpdateRxPower: (rxPowerA: number, rxPowerB: number) => {
+ dispatcher.dispatch(new UpdateRxPowerAction(rxPowerA, rxPowerB))
+ },
+ UpdateSom: (somA: number, somB: number) => {
+ dispatcher.dispatch(new UpdateSomAction(somA, somB))
},
- // UpdateWorstMonth : (worstmonth:boolean) => {
- // dispatcher.dispatch (new UpdateWorstMonthAction(worstmonth))
- // },
-
- UpdateWorstMonthRain : (month:string) => {
- dispatcher.dispatch (new UpdateWorstMonthRainAction(month))
- }
-
+ UpdateTxPower: (txPowerA: string | null, txPowerB: string | null) => {
+ dispatcher.dispatch(new UpdateTxPowerAction(txPowerA, txPowerB))
+ },
+ UpdateRxSensitivity: (rxSensitivityA: string | null, rxSensitivityB: string | null) => {
+ dispatcher.dispatch(new UpdateRxSensitivityAction(rxSensitivityA, rxSensitivityB))
+ }
});
-
-
type linkCalculationProps = Connect<typeof mapProps, typeof mapDispatch>;
interface initialState {
- rainMethodDisplay: boolean,
+ rainMethodDisplay: boolean,
+ absorptionMethod: string;
horizontalBoxChecked: boolean,
- latitude1Error: string,
- longitude1Error:string
- latitude2Error: string,
- longitude2Error:string,
- frequencyError: string,
- rainMethodError: string,
- worstmonth : boolean,
- showWM : string
-
-
+ latitude1Error: string,
+ longitude1Error: string
+ latitude2Error: string,
+ longitude2Error: string,
+ frequencyError: string,
+ rainMethodError: string,
+ antennaTypeError: string,
+ attenuationMethodError: string,
+ worstmonth: boolean,
+ showWM: string,
+ rainMethodErrorState: string
}
class LinkCalculation extends React.Component<linkCalculationProps, initialState> {
this.state = {
rainMethodDisplay: false,
horizontalBoxChecked: true,
+ absorptionMethod: '0',
latitude1Error: '',
- longitude1Error:'',
+ longitude1Error: '',
latitude2Error: '',
- longitude2Error:'',
+ longitude2Error: '',
frequencyError: '',
rainMethodError: '',
- worstmonth : false,
- showWM: ''
- };
- }
-
- 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
- }
+ attenuationMethodError: '',
+ antennaTypeError: '',
+ worstmonth: false,
+ showWM: '',
+ rainMethodErrorState: '0'
+ };
+ }
+
+ updateAutoDistance = async (lat1: number, lon1: number, lat2: number, lon2: number) => {
+ const result = await fetch(BASE_URL + '/distance/' + lat1 + ',' + lon1 + ',' + lat2 + ',' + lon2)
+ const json = await result.json()
+ return json.distanceInKm
+ }
+
+ updateLatLon = (e: any) => {
+
+ e.target.id == 'Lat1' ? this.props.updateLatLon(e.target.value, this.props.lon1, this.props.lat2, this.props.lon2) : null
+ e.target.id == 'Lon1' ? this.props.updateLatLon(this.props.lat1, e.target.value, this.props.lat2, this.props.lon2) : null
+ e.target.id == 'Lat2' ? this.props.updateLatLon(this.props.lat1, this.props.lon1, e.target.value, this.props.lon2) : null
+ e.target.id == 'Lon2' ? this.props.updateLatLon(this.props.lat1, e.target.value, this.props.lat2, e.target.value) : null
- updateLatLon = (e:any) => {
-
- e.target.id== 'Lat1'? this.props.updateLatLon(e.target.value, this.props.lon1, this.props.lat2, this.props.lon2) : null
- e.target.id== 'Lon1'? this.props.updateLatLon(this.props.lat1, e.target.value, this.props.lat2, this.props.lon2) : null
- e.target.id== 'Lat2'? this.props.updateLatLon(this.props.lat1, this.props.lon1, e.target.value, this.props.lon2) : null
- e.target.id== 'Lon2'? this.props.updateLatLon(this.props.lat1, e.target.value, this.props.lat2, e.target.value) : null
-
}
- updatePoli = (val: string) =>{
+ updatePoli = (val: string) => {
- this.setState({horizontalBoxChecked: !this.state.horizontalBoxChecked});
+ this.setState({ horizontalBoxChecked: !this.state.horizontalBoxChecked });
this.props.updatePolarization(val);
-
+
}
LatLonToDMS = (value: number, isLon: boolean = false) => {
const d = Math.floor(absoluteValue);
const m = Math.floor((absoluteValue - d) * 60);
const s = (absoluteValue - d - m / 60) * 3600;
- const dms = `${d}° ${m}' ${s.toFixed(2)}"`
+ const dms = `${d}° ${m}' ${s.toFixed(2)}"`;
const sign = Math.sign(value);
}
}
- rainAttCal = (lat1: any, lon1: any, lat2: any, lon2: any, frequency: any, distance: number, polarization : any, worstmonth:boolean) => {
- if(!worstmonth){
- fetch(BASE_URL+'/calculations/rain/Annual/' + lat1 + '/' + lon1 + '/' + lat2 + '/' + lon2 + '/' + frequency+ '/'+ distance + '/' + polarization)
- .then(res => res.json())
- .then(result => { this.props.UpdateRainAtt(result.RainAtt) ; this.props.updateRainValue(result.rainfall) })
+ rainAttCal = (lat1: any, lon1: any, lat2: any, lon2: any, frequency: any, distance: number, polarization: string, worstmonth: boolean) => {
+ if (!worstmonth) {
+ fetch(BASE_URL + '/rain/annual/' + lat1 + ',' + lon1 + ',' + lat2 + ',' + lon2 + '/' + frequency + '/' + distance + '/' + polarization.toUpperCase())
+ .then(res => res.json())
+ .then(result => { this.props.UpdateRainAtt(result.rainAttenuation); this.props.updateRainValue(result.rainFall.rainrate) })
}
else {
- fetch(BASE_URL+'/calculations/rain/WM/' + lat1 + '/' + lon1 + '/' + lat2 + '/' + lon2 + '/' + frequency+ '/'+ distance + '/' + polarization)
- .then(res => res.json())
- .then(result => { this.props.UpdateRainAtt(result.RainAtt) ; this.props.updateRainValue(result.rainfallWM); this.props.UpdateWorstMonthRain (result.month); this.setState({showWM: '- Wm is : '})})
+ fetch(BASE_URL + '/rain/worstmonth/' + lat1 + ',' + lon1 + ',' + lat2 + ',' + lon2 + '/' + frequency + '/' + distance + '/' + polarization.toUpperCase())
+ .then(res => res.json())
+ .then(result => { this.props.UpdateRainAtt(result.rainAttenuation); this.props.updateRainValue(result.rainFall.rainrate); this.props.UpdateWorstMonthRain(result.rainFall.period); this.setState({ showWM: '- Wm is : ' }) })
}
}
- manualRain = (rainfall: number, frequency: number, distance:number, polarization : any) => {
- fetch(BASE_URL+'/calculations/rain/' + rainfall + '/' + frequency + '/' + distance+ '/' + polarization)
+ manualRain = (rainfall: number, frequency: number, distance: number, polarization: string) => {
+ fetch(BASE_URL + '/rain/' + rainfall + '/' + frequency + '/' + distance + '/' + polarization.toUpperCase())
.then(res => res.json())
- .then(result => { this.props.specificRain(result.RainAtt) })
- }
+ .then(result => { this.props.specificRain(result.rainAttenuation) })
+ }
- FSL = (distance:number, frequency:number) => {
- fetch(BASE_URL+'/calculations/FSL/' + distance + '/' + frequency)
- .then(res=>res.json())
- .then (result => {this.props.FSL(result.free)})
+ FSL = (distance: number, frequency: number) => {
+ fetch(BASE_URL + '/fsl/' + distance + '/' + frequency)
+ .then(res => res.json())
+ .then(result => { this.props.FSL(result.fspl) })
+ }
+
+ AbsorptionAtt = (lat1: number, lon1: number, lat2: number, lon2: number, distance: number, frequency: number, worstmonth: boolean, absorptionMethod: string) => {
+ if (!worstmonth) {
+ fetch(BASE_URL + '/absorption/annual/' + lat1 + ',' + lon1 + ',' + lat2 + ',' + lon2 + '/' + distance + '/' + frequency + '/' + absorptionMethod)
+ .then(res => res.json())
+ .then(result => { this.props.UpdateAbsorption(result.oxygenLoss, result.waterLoss) })
}
-
- AbsorptionAtt =(lat1: number, lon1: number, lat2: number, lon2: number, distance:number, frequency:number, worstmonth:boolean) => {
- if(!worstmonth)
- {
- fetch(BASE_URL+'/calculations/absorption/Annual/' +lat1 + '/' + lon1 + '/' + lat2 + '/' + lon2 + '/' + distance + '/' + frequency)
- .then(res=>res.json())
- .then (result => {this.props.UpdateAbsorption(result.OxLoss, result.WaterLoss)})
- }
- else {
- fetch(BASE_URL+'/calculations/absorption/WM/' +lat1 + '/' + lon1 + '/' + lat2 + '/' + lon2 + '/' + distance + '/' + frequency)
- .then(res=>res.json())
- .then (result => {this.props.UpdateAbsorption(result.OxLoss, result.WaterLoss)})
- }
+ else {
+ fetch(BASE_URL + '/absorption/annual/' + lat1 + ',' + lon1 + ',' + lat2 + ',' + lon2 + '/' + distance + '/' + frequency + '/' + absorptionMethod)
+ .then(res => res.json())
+ .then(result => { this.props.UpdateAbsorption(result.oxygenLoss, result.waterLoss) })
}
+ }
+
+ linkBudget = (lat1: number, lon1: number, lat2: number, lon2: number, distance: number, frequency: number, absorptionMethod: string, polarization: string, antennaGainA: number, antennaGainB: number, waveguideLossA: number, waveguideLossB: number, transmissionPowerA: number, transmissionPowerB: number, rxSensitivityA: number, rxSensitivityB: number) => {
+ fetch(BASE_URL + '/linkbudget/' + lat1 + ',' + lon1 + ',' + lat2 + ',' + lon2 + '/' + distance + '/' + frequency + '/' + absorptionMethod + '/' + polarization.toUpperCase() + '/' + antennaGainA + '/' + antennaGainB + '/' + waveguideLossA + '/' + waveguideLossB + '/' + transmissionPowerA + '/' + transmissionPowerB + '/' + rxSensitivityA + '/' + rxSensitivityB)
+ .then(res => res.json())
+ .then(result => { this.props.UpdateEIRP(result.eirpA, result.eirpB); this.props.UpdateRxPower(result.receivedPowerA, result.receivedPowerB); this.props.UpdateSom(result.systemOperatingMarginA, result.systemOperatingMarginA) })
+ }
+
+ formValid = () => {
+
+ this.props.lat1 === 0 ? this.setState({ latitude1Error: 'Enter a number between -90 to 90' }) : null
+ this.props.lat2 === 0 ? this.setState({ latitude2Error: 'Enter a number between -90 to 90' }) : null
+ this.props.lon1 === 0 ? this.setState({ longitude1Error: 'Enter a number between -180 to 180' }) : null
+ this.props.lon2 === 0 ? this.setState({ longitude2Error: 'Enter a number between -180 to 180' }) : null
+ this.props.frequency === 0 ? this.setState({ frequencyError: 'Select a frequency' }) : this.setState({ frequencyError: '' })
- formValid = () => {
-
- this.props.lat1 === 0 ? this.setState({latitude1Error: 'Enter a number between -90 to 90'}) : null
- this.props.lat2 === 0 ? this.setState({latitude2Error: 'Enter a number between -90 to 90'}) : null
- this.props.lon1 === 0 ? this.setState({longitude1Error: 'Enter a number between -180 to 180' }) : null
- this.props.lon2 === 0 ? this.setState({longitude2Error: 'Enter a number between -180 to 180' }) : null
- this.props.frequency === 0 ? this.setState({frequencyError: 'Select a frequency' }) : this.setState({frequencyError: ''})
-
- this.state.rainMethodError === null && this.props.rainVal === 0 ? this.setState({rainMethodError: 'Select the rain method'}) : this.setState({rainMethodError: ''})
-
- console.log(this.props.lat1 !== 0 && this.props.lat2 !== 0 && this.props.lon1 !== 0 && this.props.lon2 !==0 && this.props.frequency!==0);
+ // this.state.rainMethodDisplay === null && this.props.rainVal === 0 ? this.setState({ rainMethodError: 'Select the rain method' }) : this.setState({ rainMethodError: '' })
+
+ this.state.rainMethodErrorState === '0' ? this.setState({ rainMethodError: 'Select the rain method' }) : this.setState({ rainMethodError: '' })
+
+ this.state.absorptionMethod === '0' ? this.setState({ attenuationMethodError: 'Select the attenuation method' }) : this.setState({ attenuationMethodError: '' })
+ console.log(this.state);
+ console.log(this.props.lat1 !== 0 && this.props.lat2 !== 0 && this.props.lon1 !== 0 && this.props.lon2 !== 0 && this.props.frequency !== 0 && this.state.rainMethodError === '' && this.state.attenuationMethodError === '');
+
+ return this.props.lat1 !== 0 && this.props.lat2 !== 0 && this.props.lon1 !== 0 && this.props.lon2 !== 0 && this.props.frequency !== 0 && this.state.rainMethodError === '' && this.state.attenuationMethodError === '';
+
+ }
- return this.props.lat1 !== 0 && this.props.lat2 !== 0 && this.props.lon1 !== 0 && this.props.lon2 !==0 && this.props.frequency!==0
- }
-
-
buttonHandler = async () => {
-
- if (this.formValid()) {
+
+ if (this.formValid()) {
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.worstmonth===false) {
- this.setState({showWM : ' '})
+ if (this.state.worstmonth === false) {
+ this.setState({ showWM: ' ' })
this.props.UpdateWorstMonthRain('')
- this.AbsorptionAtt (this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.props.distance, this.props.frequency, this.state.worstmonth)
+ this.AbsorptionAtt(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.props.distance, this.props.frequency, this.state.worstmonth, this.state.absorptionMethod)
+ this.linkBudget(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.props.distance, this.props.frequency, this.state.absorptionMethod, this.props.polarization!, this.props.antennaGainA, this.props.antennaGainB, this.props.waveguideLossA, this.props.waveguideLossB, Number(this.props.txPowerA), Number(this.props.txPowerB), Number(this.props.rxSensitivityA), Number(this.props.rxSensitivityB))
- if (this.state.rainMethodDisplay === true){
+ if (this.state.rainMethodDisplay === true) {
- this.manualRain(this.props.rainVal, this.props.frequency, this.props.distance, this.props.polarization);
+ this.manualRain(this.props.rainVal, this.props.frequency, this.props.distance, this.props.polarization!);
}
else {
- // this.updateRainValue(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.state.worstmonth)
- this.rainAttCal(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.props.frequency, this.props.distance, this.props.polarization, this.state.worstmonth);
+ this.rainAttCal(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.props.frequency, this.props.distance, this.props.polarization!, this.state.worstmonth);
}
- }
- else {
- this.AbsorptionAtt (this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.props.distance, this.props.frequency, this.state.worstmonth)
-
- // this.updateRainValue(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.state.worstmonth)
-
- this.rainAttCal(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.props.frequency, this.props.distance, this.props.polarization, this.state.worstmonth);
+ }
+ else {
+ this.AbsorptionAtt(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.props.distance, this.props.frequency, this.state.worstmonth, this.state.absorptionMethod)
+ this.rainAttCal(this.props.lat1, this.props.lon1, this.props.lat2, this.props.lon2, this.props.frequency, this.props.distance, this.props.polarization!, this.state.worstmonth);
}
}
- else null
+ else console.log('form is not valid')
}
componentDidMount = () => {
- fetch (BASE_URL+'/calculations/fsl/0/0')
- .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)} )
+ fetch(BASE_URL + '/fsl/1/1')
+ .then(res => { if (res.ok) { this.props.UpdateConectivity(true) } else { this.props.UpdateConectivity(false) } })
+ .catch(res => { this.props.UpdateConectivity(false) })
}
- handleChange =(e:any) => {
-
- switch (e.target.id){
- case 'Lat1' : if ( e.target.value >90 || e.target.value<-90 )
- { this.setState({latitude1Error: 'Enter a number between -90 to 90'})}
- else {this.updateLatLon(e)
- this.setState({latitude1Error: ''}) }
- break;
- case 'Lat2' : if ( e.target.value >90 || e.target.value<-90 )
- { this.setState({latitude2Error: 'Enter a number between -90 to 90'})}
- else {this.updateLatLon(e)
- this.setState({latitude2Error: ''}) }
- break;
- case 'Lon1' : if ( e.target.value >180 || e.target.value<-180 )
- { this.setState({longitude1Error: 'Enter a number between -180 to 180'})}
- else {this.updateLatLon(e)
- this.setState({longitude1Error: ''}) }
- break;
- case 'Lon2' : if ( e.target.value >180 || e.target.value<-180 )
- { this.setState({longitude2Error: 'Enter a number between -180 to 180'})}
- else {this.updateLatLon(e)
- this.setState({longitude2Error: ''}) }
- break;
-
+ handleChange = (e: any) => {
+
+ switch (e.target.id) {
+ case 'Lat1': if (e.target.value > 90 || e.target.value < -90) { this.setState({ latitude1Error: 'Enter a number between -90 to 90' }) }
+ else {
+ this.updateLatLon(e)
+ this.setState({ latitude1Error: '' })
+ }
+ break;
+ case 'Lat2': if (e.target.value > 90 || e.target.value < -90) { this.setState({ latitude2Error: 'Enter a number between -90 to 90' }) }
+ else {
+ this.updateLatLon(e)
+ this.setState({ latitude2Error: '' })
+ }
+ break;
+ case 'Lon1': if (e.target.value > 180 || e.target.value < -180) { this.setState({ longitude1Error: 'Enter a number between -180 to 180' }) }
+ else {
+ this.updateLatLon(e)
+ this.setState({ longitude1Error: '' })
+ }
+ break;
+ case 'Lon2': if (e.target.value > 180 || e.target.value < -180) { this.setState({ longitude2Error: 'Enter a number between -180 to 180' }) }
+ else {
+ this.updateLatLon(e)
+ this.setState({ longitude2Error: '' })
+ }
+ break;
+
}
}
- render() {
+ render() {
return (
-
- <div >
-
- {!this.props.formView &&
-
- <div className = 'parent'>
-
- <div >Site A
- <form >
- <label>Latitude: <input className={this.state.latitude1Error.length>0 ? 'error' : 'input'} id='Lat1' type='number' onChange={(e: any) => {this.handleChange(e)} }/></label>
- <div style={{fontSize:12, color:'red'}}> {this.state.latitude1Error} </div></form>
- <form><label>Longitude: <input className={this.state.longitude1Error.length>0 ? 'error' : 'input'} id='Lon1' type='number' onChange={(e: any) => this.handleChange(e) } /></label><div style={{fontSize:12, color:'red'}}> {this.state.longitude1Error} </div>
- </form>
+
+ <div >
+
+ {!this.props.formView &&
+
+ <div className='container1'>
+ <div className='firstBox'>
+ <div>SiteA</div>
+ <div>SiteB</div>
+ </div>
+
+ <div className='firstBox'>
+ <div>
+ <form >
+ <label>Latitude: <input aria-label="site-a-latitude-input" className={this.state.latitude1Error.length > 0 ? 'error' : 'input'} id='Lat1' type='number' onChange={(e: any) => { this.handleChange(e) }} /></label>
+ <div style={{ fontSize: 12, color: 'red' }}> {this.state.latitude1Error} </div>
+ </form></div>
+ <div>
+ <form>
+ <label>Latitude: <input aria-label="site-b-latitude-input" className={this.state.latitude2Error.length > 0 ? 'error' : 'input'} id='Lat2' type='number' onChange={(e: any) => { this.handleChange(e) }} /></label><div style={{ fontSize: 12, color: 'red' }}> {this.state.latitude2Error} </div>
+ </form></div>
+ </div>
+
+ <div className='firstBox'>
+ <div>
+ <form><label>Longitude: <input aria-label="site-a-longitude-input" className={this.state.longitude1Error.length > 0 ? 'error' : 'input'} id='Lon1' type='number' onChange={(e: any) => this.handleChange(e)} /></label><div style={{ fontSize: 12, color: 'red' }}> {this.state.longitude1Error} </div>
+ </form></div>
+ <div>
+ <form><label>Longitude: <input aria-label="site-b-longitude-input" className={this.state.longitude2Error.length > 0 ? 'error' : 'input'} id='Lon2' type='number' onChange={(e: any) => { this.handleChange(e) }} /></label><div style={{ fontSize: 12, color: 'red' }}> {this.state.longitude2Error} </div></form>
+ </div>
+ </div>
+
+
+
</div>
-
- <div>Site B
- <form>
- <label>Latitude: <input className={this.state.latitude2Error.length>0 ? 'error' : 'input'} id='Lat2' type='number' onChange={(e: any) => {this.handleChange(e) }} /></label><div style={{fontSize:12, color:'red'}}> {this.state.latitude2Error} </div></form>
- <form><label>Longitude: <input className={this.state.longitude2Error.length>0 ? 'error' : 'input'} id='Lon2' type='number' onChange={(e: any) => {this.handleChange(e) } }/></label><div style={{fontSize:12, color:'red'}}> {this.state.longitude2Error} </div></form>
+ }
+
+
+ <div className='container1'>
+ <div >{<form><input aria-label="annual" type='checkbox' id='Annual' value="Annual" checked={this.state.worstmonth === false} onClick={(e: any) => this.setState({ worstmonth: false })}></input>Annual
+ <input aria-label="worst-month" style={{ marginLeft: 10 }} type='checkbox' id='Worst Month' value="Worst" checked={this.state.worstmonth === true} onClick={(e: any) => this.setState({ worstmonth: true })}></input>WM</form>}
</div>
-
+ <div className='firstBox'>
+ <div>Site A</div>
+ <div>Site B</div>
</div>
- }
+ {/* <div> </div> */}
+ <div>
+ {(this.props.siteA.length > 0 || this.props.siteB.length > 0) && <div >Site Name</div>}
+ <div> {this.props.siteA}</div>
+ <div> {this.props.siteB}</div>
+ </div>
+ <div>
+ <div>Latitude</div>
+ <div aria-label="site-a-latitude-dms"> {this.props.lat1 && this.LatLonToDMS(this.props.lat1)}</div>
+ <div aria-label="site-b-latitude-dms"> {this.props.lat2 && this.LatLonToDMS(this.props.lat2)}</div>
+ </div>
+ <div>
+ <div>Longitude</div>
+ <div aria-label="site-a-longitude-dms">{this.props.lon1 && this.LatLonToDMS(this.props.lon1)}</div>
+ <div aria-label="site-b-longitude-dms">{this.props.lon2 && this.LatLonToDMS(this.props.lon2)}</div>
+ </div>
+ <div>
+ <div>Azimuth</div>
+ <div>0</div>
+ <div>0</div>
+ </div>
+ <div>
+ <div>Average Mean Sea Level</div>
+ <div aria-label="site-a-amsl">{this.props.amslA.toFixed(2)} m</div>
+ <div aria-label="site-b-amsl">{this.props.amslB.toFixed(2)} m</div>
+ </div>
+ <div>
+ <div>Antenna Height Above Ground</div>
+ <div aria-label="site-a-antenna-amsl">{this.props.aglA.toFixed(2)} m</div>
+ <div aria-label="site-b-antenna-amsl">{this.props.aglB.toFixed(2)} m</div>
+ </div>
+ <div>
+ <div >Distance</div>
+ <div aria-label="distance-between-sites">{this.props.distance?.toFixed(3)} km</div>
+ </div>
+ <div>
+ <div >Polarization</div>
+ <div >{<form><input aria-label="polarization-horizontal" type='checkbox' id='Horizontal' value="Horizontal" checked={this.props.polarization === 'Horizontal'} onClick={(e: any) => this.props.updatePolarization(e.target.value)}></input>Horizontal
+ <input aria-label="polarization-vertical" style={{ marginLeft: 10 }} type='checkbox' id='Vertical' value="Vertical" checked={this.props.polarization === 'Vertical'} onClick={(e: any) => { this.props.updatePolarization(e.target.value) }}></input>Vertical</form>}</div>
+ </div>
+ <div>
+ <div style={{ marginTop: 5 }}>Frequency</div>
+ <div style={{ marginTop: 5 }}> {<select aria-label="select-frequency-in-ghz" className={this.state.frequencyError.length > 0 ? 'error' : 'input'} onChange={(e) => { this.props.updateFrequency(Number(e.target.value)); e.target.value === '0' ? this.setState({ frequencyError: 'select a frequency' }) : this.setState({ frequencyError: '' }) }}>
+
+ <option value='0' aria-label="none-value" >Select Freq</option>
+ <option value='7' aria-label="7" >7 GHz</option>
+ <option value='11' aria-label="11" >11 GHz</option>
+ <option value='15' aria-label="15" >15 GHz</option>
+ <option value='23' aria-label="23">23 GHz</option>
+ <option value='26' aria-label="26">26 GHz</option>
+ <option value='28' aria-label="28">28 GHz</option>
+ <option value='38' aria-label="38">38 GHz</option>
+ <option value='42' aria-label="42">42 GHz</option>
+ <option value='80' aria-label="80">80 GHz</option>
+ </select>} <div style={{ fontSize: 12, color: 'red' }}> {this.state.frequencyError} </div> </div>
+ </div>
+ <div>
+ <div>Free Space Loss</div>
+ <div aria-label="fspl-value">{this.props.fsl.toFixed(3)} dB</div>
+ </div>
+ <div>
+ <div>Rain Model</div>
+ <div> {<select aria-label="select-rain-method" className={this.state.rainMethodError.length > 0 ? 'error' : 'input'} onChange={(e) => {if (e.target.value !== '') { this.setState({ rainMethodErrorState: e.target.value, rainMethodError: '' }) }; e.target.value === 'itu' ? this.setState({ rainMethodDisplay: false }) : this.setState({ rainMethodDisplay: true }) }}>
+ <option value='0' aria-label="none-value" >Select Rain Method</option>
+ <option value='itu' aria-label="itur8377">ITU-R P.837-7</option>
+ <option value='manual' aria-label="manual-entry">Specific Rain</option>
+ </select>} <div style={{ fontSize: 12, color: 'red' }}>{this.state.rainMethodError}</div>
+ </div>
+ </div>
+ <div>
+ <div>Rainfall Rate</div>
+ <div> {<form><input aria-label="rain-value" 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 {this.state.showWM} {this.props.month}</form>} </div>
+ </div>
+ <div>
+ <div>Rain Loss</div>
+ <div aria-label="rain-attenuation-value">{this.props.rainAtt.toFixed(3)} dB</div>
+ </div>
+ <div>
+ <div>Absorption Model</div>
+ <div> {<select aria-label="select-absorption-method" className={this.state.attenuationMethodError.length > 0 ? 'error' : 'input'} onChange={(e) => { if (e.target.value !== '') { this.setState({ absorptionMethod: e.target.value, attenuationMethodError: '' }) } }}>
+ <option value='0' aria-label="none-value" >Select Absorption Method</option>
+ <option value='ITURP67612' aria-label="iturp67612" >ITU-R P.676-12</option>
+ <option value='ITURP67611' aria-label="iturp67611" >ITU-R P.676-11</option>
+ <option value='ITURP67610' aria-label="iturp67610" >ITU-R P.676-10</option>
+ </select>} <div style={{ fontSize: 12, color: 'red' }}>{this.state.attenuationMethodError}</div>
+ </div>
+ </div>
+ <div>
+ <div>Oxygen Specific Attenuation</div>
+ <div aria-label="absorption-oxygen-value">{this.props.absorptionOxygen.toFixed(3)} dB</div>
+ </div>
+ <div>
+ <div>Water Vapor Specific Attenuation</div>
+ <div aria-label="absorption-water-value">{this.props.absorptionWater.toFixed(3)} dB</div>
+ </div>
+ <div>
+ <div>System Operating Margin</div>
+ <div aria-label="system-operating-margin">{this.props.systemOperatingMarginA.toFixed(3)} dB</div>
+ <div aria-label="system-operating-margin">{this.props.systemOperatingMarginB.toFixed(3)} dB</div>
+ </div>
+ <div>
+ <div>Radio Transmitted Power</div>
+ <div> {<form><input aria-label="site-a-transmitted-power" type="number" style={{ width: 70, height: 15, fontSize: 14 }} onChange={(e) => { if (e.target.value !== '') this.props.UpdateTxPower(e.target.value, null) }}
+ >
+ </input> dBm </form>} </div>
+ <div> {<form><input aria-label="site-b-transmitted-power" type="number" style={{ width: 70, height: 15, fontSize: 14 }} onChange={(e) => { if (e.target.value !== '') this.props.UpdateTxPower(null, e.target.value) }}
+ >
+ </input> dBm </form>} </div>
+ </div>
+ <div>
+ <div>RF Receiver Sensitivity</div>
+ <div> {<form><input aria-label="site-a-receiver-sensitivity" type="number" style={{ width: 70, height: 15, fontSize: 14 }} onChange={(e) => { if (e.target.value !== '') this.props.UpdateRxSensitivity(e.target.value, null) }}
+ >
+ </input> dBm </form>} </div>
+ <div> {<form><input aria-label="site-b-receiver-sensitivity" type="number" style={{ width: 70, height: 15, fontSize: 14 }} onChange={(e) => { if (e.target.value !== '') this.props.UpdateRxSensitivity(null, e.target.value) }}
+ >
+ </input> dBm </form>} </div>
+ </div>
+ <div>
+ <div>Rx power</div>
+ <div aria-label="site-a-effective-isotropic-radiated-power">{this.props.rxPowerA.toFixed(3)} dBm</div>
+ <div aria-label="site-b-effective-isotropic-radiated-power">{this.props.rxPowerB.toFixed(3)} dBm</div>
+ </div>
+ </div>
+ <div className='antennaContainer'>
+ <div>
+ <div></div>
+ <div className='antennaFont'>Antenna Settings</div>
+ </div>
- <div className='container-1'>
- <div>{<form><input type='checkbox' id='Annual' value ="Annual" checked= {this.state.worstmonth===false} onClick= {(e: any) => this.setState ({worstmonth: false})}></input>Annual
- <input style={{marginLeft:10}} type='checkbox' id='Worst Month' value ="Worst" checked= {this.state.worstmonth===true} onClick= {(e:any)=>this.setState ({worstmonth: true})}></input>WM</form>}</div>
-
-
- <div className='column1'>
- <div> </div>
- <div >Site Name</div>
- <div>Latitude</div>
- <div>Longitude</div>
- <div>Azimuth</div>
- <div>Average Mean Sea Level</div>
- <div>Antenna Height Above Ground</div>
- <div>Distance</div>
- <div style={{marginTop:20}}>Polarization</div>
- <div style={{marginTop:20}}>Frequency</div>
- <div>Free Space Loss</div>
- <div style={{marginTop:10}}>Rain Model</div>
- <div style={{marginTop:20}}>Rainfall Rate</div>
- <div>Rain Loss</div>
- <div>Oxygen Specific Attenuation</div>
- <div>Water Vapor Specific Attenuation</div>
+ <div>
+ <div>Antenna</div>
+ <div aria-label="site-a-amsl">{this.props.antennaNameA} </div>
+ <div aria-label="site-b-amsl">{this.props.antennaNameB}</div>
</div>
-
-
- <div className='middlecolumn'>
- <div >Site A</div>
- <div> {this.props.siteA }</div>
- <div> {this.props.lat1 && this.LatLonToDMS(this.props.lat1)}</div>
- <div>{this.props.lon1 && this.LatLonToDMS(this.props.lon1)}</div>
- <div>0</div>
- <div>{this.props.amslA.toFixed(2)} m</div>
- <div>{this.props.aglA.toFixed(2)} m</div>
-
-
- <div className='column2'>
- <div>{this.props.distance.toFixed(3)} km</div>
- <div>{<form><input type='checkbox' id='Horizontal' value ="Horizontal" checked= {this.props.polarization==='Horizontal'} onClick= {(e: any) => this.props.updatePolarization(e.target.value)}></input>Horizontal
- <input style={{marginLeft:10}} type='checkbox' id='Vertical' value ="Vertical" checked= {this.props.polarization==='Vertical'} onClick= {(e:any)=>{this.props.updatePolarization(e.target.value)}}></input>Vertical</form>}</div>
-
- <div> {<select className={this.state.frequencyError.length>0 ? 'error' : 'input'} onChange={(e) => {this.props.updateFrequency(Number(e.target.value)); e.target.value==='0'? this.setState({frequencyError: 'select a frequency'}): this.setState({frequencyError:''})}}>
-
- <option value='0' >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 style={{fontSize:12, color:'red'}}> {this.state.frequencyError} </div> </div>
-
- <div>{this.props.fsl.toFixed(3)} dB</div>
-
- <div> {<select className={this.state.rainMethodError.length>0 ? 'error' : 'input'} onChange = {(e) => {e.target.value === 'itu' ? this.setState({ rainMethodDisplay: false}):this.setState({ rainMethodDisplay: true}); e.target.value===''? this.setState({rainMethodError: 'select a Rain model'}): this.setState({rainMethodError:''}) }}>
- <option value='' >Select Rain Method</option>
- <option value='itu' >ITU-R P.837-7</option>
- <option value='manual' >Specific Rain</option>
- </select>} <div style={{fontSize:12,color:'red'}}>{this.state.rainMethodError}</div>
- </div>
- <div> {<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 {this.state.showWM} {this.props.month}</form> } </div>
- <div>{this.props.rainAtt.toFixed(3)} dB</div>
- <div>{this.props.absorptionOxygen.toFixed(3)} dB</div>
- <div>{this.props.absorptionWater.toFixed(3)} dB</div>
- <div>{<button style={{color: '#222', fontFamily:'Arial', boxAlign: 'center', display:'inline-block', insetInlineStart: '20' , alignSelf:'center' }}
- onClick = {(e) => this.buttonHandler()} >Calculate</button>} </div>
+ <div>
+ <div>EIRP</div>
+ <div aria-label="site-a-effective-isotropic-radiated-power">{this.props.eirpA.toFixed(3)} dBm</div>
+ <div aria-label="site-b-effective-isotropic-radiated-power">{this.props.eirpB.toFixed(3)} dBm</div>
</div>
+
+ <div>
+ <div>Gain</div>
+ <div aria-label="site-a-antenna-gain" > {this.props.antennaGainA} dBi</div>
+ <div aria-label="site-b-antenna-gain">{this.props.antennaGainB} dBi</div>
</div>
- <div className= 'middlecolumn'>
- <div >Site B</div>
- <div> {this.props.siteB}</div>
- <div> {this.props.lat2 && this.LatLonToDMS(this.props.lat2)}</div>
- <div>{this.props.lon2 && this.LatLonToDMS(this.props.lon2)}</div>
- <div>0</div>
- <div>{this.props.amslB.toFixed(2)} m</div>
- <div>{this.props.aglB.toFixed(2)} m</div>
-
-
+ <div>
+ <div>Waveguide Loss</div>
+ <div aria-label="site-a-waveguide-loss" > {this.props.waveguideLossA} dB</div>
+ <div aria-label="site-b-waveguide-loss">{this.props.waveguideLossB} dB</div>
</div>
-
+ <div>
+ <div></div>
+ <div>{<button aria-label="calculate-button" style={{ color: '#222', fontFamily: 'Arial', boxAlign: 'center', display: 'inline-block', insetInlineStart: '20', alignSelf: 'center' }}
+ onClick={(e) => this.buttonHandler()} >Calculate</button>} </div>
+ </div>
</div>
-
+
<ConnectionInfo />
-
-
-
- </div>
- )
- }
-
+
+
+ </div>
+
+ )
}
+}
+
export default connect(mapProps, mapDispatch)(LinkCalculation);
Code Review / ccsdk / features.git / blobdiff