summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/linkCalculationApp/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'sdnr/wt/odlux/apps/linkCalculationApp/src/views')
-rw-r--r--sdnr/wt/odlux/apps/linkCalculationApp/src/views/Style.scss116
-rw-r--r--sdnr/wt/odlux/apps/linkCalculationApp/src/views/linkCalculationComponent.tsx579
2 files changed, 0 insertions, 695 deletions
diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/src/views/Style.scss b/sdnr/wt/odlux/apps/linkCalculationApp/src/views/Style.scss
deleted file mode 100644
index e4b0c7797..000000000
--- a/sdnr/wt/odlux/apps/linkCalculationApp/src/views/Style.scss
+++ /dev/null
@@ -1,116 +0,0 @@
-// .parent{
-
-// display: flex;
-// justify-content: space-evenly;
-// margin: auto;
-
-
-//}
-.input {
- width: 150px;
- box-sizing: border-box;
- // margin-bottom: 5px;
-
-}
-.error {
- border: 1px solid red;
- width: 150px;
- box-sizing: border-box;
-}
-
-.container1{
- margin-bottom: 15px;
-
-}
-
-.container1 div{
- display:flex;
- flex-direction: row;
-
- width:100%;
- padding-top: 2px;
-}
-
-.container1 div div{
- width:50%;
- border-bottom-style: solid;
- border-bottom-width: thin;
- border-color: silver;
-}
-
-.firstBox div:first-child{
- margin-left: 33.5%;
-}
-
-// .container-1 {
-// width: 80%;
-// justify-content: center;
-// align-items: baseline;;
-// display: flex;
-// flex-direction: row;
-// align-content: space-between;
-// padding: 20px 40px;
-// border-radius: 10px;
-// // box-shadow: 0px 10px 50px #555;
-// background-color: #ffffff;
-// // padding-top: 10px;
-
-// }
-
- // .column1 {
- // flex-direction: column;
- // width: 30%;
- // align-items: flex-end;;
- // // padding: 2em;
-
- // }
- // .column1 div {
- // margin-top: 10px;
- // // align-items: space-between;
- // // flex-wrap: wrap;
- // border-bottom-style: solid;
- // border-bottom-width: thin;
- // border-color: silver;
- // }
- // .middlecolumn{
-
- // flex-direction: column;
- // flex-grow: 1;
- // // padding: 10px 10px;
- // }
-
- // .middlecolumn div{
- // margin-top: 10px;
- // border-bottom-style: solid;
- // border-bottom-width: thin;
- // border-color: silver;
- // }
-
- // .column2 {
- // margin-left: 200px;
- // }
- // .column2 div{
- // margin-top: 10px;
-
- // }
-
- .antennaContainer{
- margin-bottom: 15px;
- background-color: rgb(184, 181, 181);
-
- }
- .antennaContainer div {
- display:flex;
- flex-direction: row;
-
- width:100%;
- padding-top: 2px;
-}
-.antennaContainer div div{
-
- width:50%;
-
-}
-.antennaFont{
- font-family: "Lucida Console";
-} \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/src/views/linkCalculationComponent.tsx b/sdnr/wt/odlux/apps/linkCalculationApp/src/views/linkCalculationComponent.tsx
deleted file mode 100644
index e3eaa6ba0..000000000
--- a/sdnr/wt/odlux/apps/linkCalculationApp/src/views/linkCalculationComponent.tsx
+++ /dev/null
@@ -1,579 +0,0 @@
-/**
- * ============LICENSE_START========================================================================
- * ONAP : ccsdk feature sdnr wt odlux
- * =================================================================================================
- * Copyright (C) 2020 highstreet technologies GmbH Intellectual Property. All rights reserved.
- * =================================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License
- * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
- * or implied. See the License for the specific language governing permissions and limitations under
- * 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, Checkbox, Table, TableCell, TableHead, TableRow, TableBody, Paper } from '@material-ui/core';
-import './Style.scss'
-
-import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore";
-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";
-
-
-
-const mapProps = (state: IApplicationStoreState) => ({
- linkId: state.linkCalculation.calculations.linkId,
- frequency: state.linkCalculation.calculations.frequency,
- lat1: state.linkCalculation.calculations.Lat1,
- lon1: state.linkCalculation.calculations.Lon1,
- lat2: state.linkCalculation.calculations.Lat2,
- lon2: state.linkCalculation.calculations.Lon2,
- rainAtt: state.linkCalculation.calculations.rainAtt,
- rainVal: state.linkCalculation.calculations.rainVal,
- formView: state.linkCalculation.calculations.formView,
- 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,
- 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/linkcalculator"
-
-const mapDispatch = (dispatcher: IDispatcher) => ({
-
- updateFrequency: (frequency: number) => {
-
- 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))
- },
-
- UpdateRainAtt: (rainAtt: number) => {
- dispatcher.dispatch(new UpdateRainAttAction(rainAtt))
- },
-
- specificRain: (rainAtt: number) => {
- dispatcher.dispatch(new UpdateRainAttAction(rainAtt))
-
- },
-
- FSL: (free: number) => {
- dispatcher.dispatch(new UpdateFslCalculation(free))
- },
-
- UpdateConectivity: (reachable: boolean) => {
- dispatcher.dispatch(new isCalculationServerReachableAction(reachable))
- },
-
- updatePolarization: (polarization: any) => {
- dispatcher.dispatch(new UpdatePolAction(polarization))
- },
-
- 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))
- },
-
- 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,
- absorptionMethod: string;
- horizontalBoxChecked: boolean,
- 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> {
- constructor(props: any) {
- super(props);
- this.state = {
- rainMethodDisplay: false,
- horizontalBoxChecked: true,
- absorptionMethod: '0',
- latitude1Error: '',
- longitude1Error: '',
- latitude2Error: '',
- longitude2Error: '',
- frequencyError: '',
- rainMethodError: '',
- 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
-
-
- }
-
- updatePoli = (val: string) => {
-
- this.setState({ horizontalBoxChecked: !this.state.horizontalBoxChecked });
- this.props.updatePolarization(val);
-
- }
-
- LatLonToDMS = (value: number, isLon: boolean = false) => {
- const absoluteValue = Math.abs(value);
- 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 sign = Math.sign(value);
-
- if (isLon) {
- return (sign === -1 || sign === -0) ? dms + " W" : dms + " E";
- } else {
- return (sign === -1 || sign === -0) ? dms + " S" : dms + " N";
- }
- }
-
- 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 + '/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: string) => {
- fetch(BASE_URL + '/rain/' + rainfall + '/' + frequency + '/' + distance + '/' + polarization.toUpperCase())
- .then(res => res.json())
- .then(result => { this.props.specificRain(result.rainAttenuation) })
- }
-
-
- 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) })
- }
- 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: '' })
-
- // 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 === '';
-
- }
-
-
-
- buttonHandler = async () => {
-
- 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: ' ' })
- 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.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) {
-
- this.manualRain(this.props.rainVal, this.props.frequency, this.props.distance, this.props.polarization!);
- }
- else {
- 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 console.log('form is not valid')
-
- }
-
- componentDidMount = () => {
- 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;
-
- }
- }
-
- render() {
- return (
-
- <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 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>&nbsp;</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>
- <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>
- <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>
- <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>
-
- )
- }
-
-}
-
-export default connect(mapProps, mapDispatch)(LinkCalculation);