diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/linkCalculationApp/src')
7 files changed, 816 insertions, 0 deletions
diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/src/actions/commonLinkCalculationActions.ts b/sdnr/wt/odlux/apps/linkCalculationApp/src/actions/commonLinkCalculationActions.ts new file mode 100644 index 000000000..555954d15 --- /dev/null +++ b/sdnr/wt/odlux/apps/linkCalculationApp/src/actions/commonLinkCalculationActions.ts @@ -0,0 +1,104 @@ +/** + * ============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 { Action } from "../../../../framework/src/flux/action"; +import { Dispatch } from "../../../../framework/src/flux/store"; +import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore"; + + +export class UpdateLinkIdAction extends Action{ + constructor(public linkId: string){ + super(); + } +} + +export class UpdateFrequencyAction extends Action{ + constructor(public frequency: number){ + super(); + } +} +export class UpdateSiteAction extends Action{ + constructor( + public siteA?: any, + public siteB?: any + ){ + super(); + } +} +export class UpdateRainAttAction extends Action{ + + constructor(public rainAtt: number){ + super(); + } +} +export class UpdateRainValAction extends Action{ + constructor(public rainVal: number){ + super(); + } +} + +export class updateHideForm extends Action{ + constructor(public formView: boolean){ + super(); + } +} +export class UpdateDistanceAction extends Action{ + constructor(public distance: number){ + super(); + } +} + +export class UpdateFslCalculation extends Action{ + constructor(public fsl: number){ + super(); + } +} + + +export class UpdateLatLonAction extends Action{ + constructor( + public Lat1: number, + public Lon1:number, + public Lat2: number, + public Lon2: number + ){ + super(); + + } +} +export class isCalculationServerReachableAction extends Action{ + constructor(public reachable: boolean){ + 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 new file mode 100644 index 000000000..c798e481f --- /dev/null +++ b/sdnr/wt/odlux/apps/linkCalculationApp/src/components/connectionInfo.tsx @@ -0,0 +1,55 @@ +/** + * ============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 { IApplicationStoreState } from "../../../../framework/src/store/applicationStore"; +import connect, { IDispatcher, Connect } from "../../../../framework/src/flux/connect"; +import { Paper, Typography } from "@material-ui/core"; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'; + + +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%"}}> + <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>} + </div> + </Paper> : null +)} + +const mapStateToProps = (state: IApplicationStoreState) => ({ + isCalculationServerReachable: state.linkCalculation.calculations.reachable +}); + + + +const mapDispatchToProps = (dispatcher: IDispatcher) => ({ + + //zoomToSearchResult: (lat: number, lon: number) => dispatcher.dispatch(new ZoomToSearchResultAction(lat, lon)) + +});; + + +export default connect(mapStateToProps,mapDispatchToProps)(ConnectionInfo) + diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/src/components/denseTable.tsx b/sdnr/wt/odlux/apps/linkCalculationApp/src/components/denseTable.tsx new file mode 100644 index 000000000..96d6f4ed1 --- /dev/null +++ b/sdnr/wt/odlux/apps/linkCalculationApp/src/components/denseTable.tsx @@ -0,0 +1,121 @@ +/** + * ============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 Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableContainer from '@material-ui/core/TableContainer'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import Paper from '@material-ui/core/Paper'; +import { makeStyles, Button, Tooltip } from '@material-ui/core'; + +type props = { headers: string[], width: number, height:number, navigate?(applicationName: string, path?: string):void, onLinkClick?(id: string): void, data: any[], hover: boolean, onClick?(id: string): void, actions?:boolean }; + + +const styles = makeStyles({ + container: { + overflow:"auto" + }, + button: { + margin: 0, + padding: "6px 6px", + minWidth: 'unset' + } + + }); + + +const DenseTable: React.FunctionComponent<props> = (props) => { + + const classes = styles(); + + const handleClick = (event: any, id: string) =>{ + event.preventDefault(); + props.onClick !== undefined && props.onClick(id); + + } + + const handleHover = (event: any, id: string) =>{ + event.preventDefault(); + + } + + return ( + <Paper style={{borderRadius:"0px", width:props.width, height:props.height}} className={classes.container}> + + <Table stickyHeader size="small" aria-label="a dense table" > + <TableHead> + <TableRow> + { + props.headers.map((data) => { + return <TableCell>{data}</TableCell> + }) + } + </TableRow> + </TableHead> + <TableBody> + {props.data.map((row, index) => { + + + var filteredRows = Object.keys(row).filter(function(e) { if(e!=="simulatorId") return row }); + + //var filteredRows = Object.keys(row).filter(function(e) { if(e!=="simulatorId") return row[e] }); + var values = Object.keys(row).map(function(e) { if(e!=="simulatorId"){ return row[e];} else return undefined }); + + + return ( + <TableRow key={index} hover={props.hover} onMouseOver={e => handleHover(e,row.name)} onClick={ e => handleClick(e, row.name)}> + + { + values.map((data:any) => { + + if(data!== undefined) + return <TableCell > {data} </TableCell> + else + return null; + }) + } + { + + props.actions && <TableCell > +<div style={{display:"flex"}}> + <Tooltip title="Configure"> + <Button className={classes.button} disabled={row.status!=="connected"} onClick={(e: any) =>{ e.preventDefault(); e.stopPropagation(); props.navigate && props.navigate("configuration", row.simulatorId ? row.simulatorId : row.name)}}>C</Button> + </Tooltip> + <Tooltip title="Fault"> + <Button className={classes.button} onClick={(e: any) =>{ e.preventDefault(); e.stopPropagation(); props.navigate && props.navigate("fault", row.simulatorId ? row.simulatorId : row.name)}}>F</Button> + </Tooltip> + </div> + </TableCell> + + } + </TableRow>) + }) + } + + </TableBody> + </Table> + + </Paper> + ); + +} + +export default DenseTable;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/src/handlers/linkCalculationAppRootHandler.ts b/sdnr/wt/odlux/apps/linkCalculationApp/src/handlers/linkCalculationAppRootHandler.ts new file mode 100644 index 000000000..00dd48d45 --- /dev/null +++ b/sdnr/wt/odlux/apps/linkCalculationApp/src/handlers/linkCalculationAppRootHandler.ts @@ -0,0 +1,115 @@ +/** +* ============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========================================================================== +*/ +// 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'; + +declare module '../../../../framework/src/store/applicationStore' { + interface IApplicationStoreState { + linkCalculation: ICalculationsState; + } +} + +type ICalculationsState = { + calculations:ILinkCalculationAppStateState +} + +export type ILinkCalculationAppStateState= { + linkId: string | null, + frequency: number, + formView:boolean, + fsl:number, + distance:number, + Lat1: number, + Lon1: number, + Lat2: number, + Lon2: number, + rainVal : number, + rainAtt : number, + siteA: any, + siteB: any, + reachable: boolean +} + +const initialState: ILinkCalculationAppStateState ={ + linkId: null, + frequency: 0, + Lat1: 0, + Lon1: 0, + Lat2: 0, + Lon2: 0, + formView : false, + fsl:0, + distance:0, + siteA : '', + siteB: '', + rainVal : 0, + rainAtt: 0, + reachable : true +} + + + +export const LinkCalculationHandler: IActionHandler<ILinkCalculationAppStateState> = (state=initialState, action) => { + + if(action instanceof UpdateLinkIdAction){ + state = Object.assign({}, state, {linkId:action.linkId}) + } + else if(action instanceof updateHideForm){ + + state = Object.assign({}, state, {formView:action.formView}) + } + else if (action instanceof UpdateDistanceAction){ + state = Object.assign({}, state, {distance:action.distance}) + } + else if (action instanceof UpdateFrequencyAction){ + state = Object.assign({}, state, {frequency:action.frequency}) +} + else if (action instanceof UpdateFslCalculation){ + state = Object.assign({}, state, {fsl:action.fsl}) + } + else if (action instanceof UpdateLatLonAction){ + state = Object.assign({}, state, {Lat1:action.Lat1, Lon1:action.Lon1, Lat2:action.Lat2, Lon2:action.Lon2}) + } + else if (action instanceof UpdateRainAttAction){ + state = Object.assign({}, state, {rainAtt:action.rainAtt}) + } + else if (action instanceof UpdateRainValAction){ + state = Object.assign({}, state, {rainVal:action.rainVal}) + } + else if (action instanceof UpdateSiteAction){ + state = Object.assign({}, state, {siteA:action.siteA, siteB:action.siteB}) + } + else if(action instanceof isCalculationServerReachableAction){ + state = Object.assign({}, state, { reachable: action.reachable }); +} + return state +} + +const actionHandlers = { + calculations: LinkCalculationHandler +} + +export const LinkCalculationAppRootHandler = combineActionHandler<ICalculationsState>(actionHandlers); +export default LinkCalculationAppRootHandler; + diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/src/index.html b/sdnr/wt/odlux/apps/linkCalculationApp/src/index.html new file mode 100644 index 000000000..c1cb3f9f3 --- /dev/null +++ b/sdnr/wt/odlux/apps/linkCalculationApp/src/index.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <!-- <link rel="stylesheet" href="./vendor.css" > --> + <title>Link Calculation App</title> +</head> + +<body> + <div id="app"></div> + <script type="text/javascript" src="./require.js"></script> + <script type="text/javascript" src="./config.js"></script> + <script> + // run the application + require(["app","connectApp", "networkMapApp", "linkCalculationApp"], function (app, connectApp, networkMapApp, linkCalculationApp) { + connectApp.register(); + linkCalculationApp.register(); + networkMapApp.register(); + app("./app.tsx").runApplication(); + }); + </script> +</body> + +</html>
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/src/pluginLinkCalculation.tsx b/sdnr/wt/odlux/apps/linkCalculationApp/src/pluginLinkCalculation.tsx new file mode 100644 index 000000000..fc72f5ab3 --- /dev/null +++ b/sdnr/wt/odlux/apps/linkCalculationApp/src/pluginLinkCalculation.tsx @@ -0,0 +1,148 @@ +/** +* ============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========================================================================== +*/ +// app configuration and main entry point for the app + +import * as React from "react"; +import { withRouter, RouteComponentProps, Route, Switch, Redirect } from 'react-router-dom'; + +import { faBookOpen } from '@fortawesome/free-solid-svg-icons'; // select app icon +import applicationManager from '../../../framework/src/services/applicationManager'; + +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"; + + +let currentLinkId: string | null = null; +let lastUrl: string = "/linkCalculation"; + +const mapProps = (state: IApplicationStoreState) => ({ +}); + +const mapDisp = (dispatcher: IDispatcher) => ({ + updateLinkId: (mountId: string) => dispatcher.dispatch(new UpdateLinkIdAction(mountId)), + + updateSiteName: (siteNameA?:any, siteNameB?:any)=>{ + dispatcher.dispatch(new UpdateSiteAction(siteNameA, siteNameB)) + }, + updateDistance :(distance:number) =>{ + dispatcher.dispatch(new UpdateDistanceAction(distance)) + }, + updateLatLon : (Lat1:number, Lon1:number, Lat2:number, Lon2:number)=> { + + dispatcher.dispatch(new UpdateLatLonAction(Lat1, Lon1, Lat2, Lon2)) + dispatcher.dispatch(new updateHideForm (true)) + }, +}); + + +const LinkCalculationRouteAdapter = connect(mapProps, mapDisp)((props: RouteComponentProps<{ mountId?: string }> & Connect<typeof mapProps, typeof mapDisp>) => { + let linkId: string = ""; + + // called when component finshed mounting + React.useEffect(() => { + + lastUrl = props.location.pathname; + linkId = getLinkId(lastUrl); + + const data= props.location.search + + + + 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] + const lon2 = data.split('&')[3].split('=')[1] + + const siteNameA = data.split('&')[4].split('=')[1] + const siteNameB = data.split('&')[5].split('=')[1] + + const distance = data.split('&')[8].split('=')[1] + + + props.updateSiteName(String(siteNameA), String(siteNameB)) + props.updateDistance(Number(distance)) + + + props.updateLatLon(Number(lat1),Number(lon1),Number(lat2),Number(lon2)) + + } + + + if (currentLinkId !== linkId) { // new element is loaded + currentLinkId = linkId; + props.updateLinkId(currentLinkId); + } + }, []); + + // called when component gets updated + React.useEffect(() => { + + lastUrl = props.location.pathname; + linkId = getLinkId(lastUrl); + + if (currentLinkId !== linkId) { + currentLinkId = linkId; + props.updateLinkId(currentLinkId); + } + }); + + const getLinkId = (lastUrl: string) => { + let index = lastUrl.lastIndexOf("linkCalculation/"); + if (index >= 0) { + linkId = lastUrl.substr(index+16); + } else { + linkId = ""; + } + + return linkId; + } + + + return ( + <LinkCalculation /> + ); +}); + +const App = withRouter((props: RouteComponentProps) => { + props.history.action = "POP"; + return ( + <Switch> + <Route path={`${props.match.path}/:linkId`} component={LinkCalculationRouteAdapter} /> + <Route path={`${props.match.path}`} component={LinkCalculationRouteAdapter} /> + <Redirect to={`${props.match.path}`} /> + </Switch> + ) +}); + +export function register() { + applicationManager.registerApplication({ + name: "linkCalculation", + icon: faBookOpen, + rootActionHandler: LinkCalculationAppRootHandler, + rootComponent: App, + menuEntry: "Link Calculation" + }); +} + diff --git a/sdnr/wt/odlux/apps/linkCalculationApp/src/views/linkCalculationComponent.tsx b/sdnr/wt/odlux/apps/linkCalculationApp/src/views/linkCalculationComponent.tsx new file mode 100644 index 000000000..97219b6d8 --- /dev/null +++ b/sdnr/wt/odlux/apps/linkCalculationApp/src/views/linkCalculationComponent.tsx @@ -0,0 +1,246 @@ +/** + * ============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 } 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 { faPlaneArrival } from "@fortawesome/free-solid-svg-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 +}); + +const BASE_URL="/topology/services" + +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)) + } +}); + +class LinkCalculation extends React.Component<Connect<typeof mapProps, typeof mapDispatch>, { rainMethodDisplay: boolean }> { + constructor(props: any) { + super(props) + this.state = { rainMethodDisplay: true } + } + + handleChange = (e: number) => { + this.props.updateFrequency(e) + } + + updateLatLon = (e: any) => { + + if (e.target.id == 'Lat1') this.props.updateLatLon(e.target.value, this.props.lon1, this.props.lat2, this.props.lon2) + if (e.target.id == 'Lon1') this.props.updateLatLon(this.props.lat1, e.target.value, this.props.lat2, this.props.lon2) + if (e.target.id == 'Lat2') this.props.updateLatLon(this.props.lat1, this.props.lon1, e.target.value, this.props.lon2) + if (e.target.id == 'Lon2') this.props.updateLatLon(this.props.lat1, this.props.lon1, this.props.lat2, e.target.value) + + } + + 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"; + } + } + + calRain = (lat1: any, lon1: any, lat2: any, lon2: any, frequency: any) => { + fetch(BASE_URL+'/calculations/rain/' + lat1 + '/' + lon1 + '/' + lat2 + '/' + lon2 + '/' + frequency) + .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) + .then(res => res.json()) + .then(result => { this.props.specificRain(result.RainAtt) }) + } + + FSL = (distance:number, frequency:number) => { + fetch(BASE_URL+'/calculations/FSL/' + distance + '/' + frequency) + .then(res=>res.json()) + .then (result => {this.props.FSL(result.free)}) + } + + buttonHandler =() => { + this.FSL(this.props.distance, this.props.frequency) + + if (this.state.rainMethodDisplay === true){ + + this.specificRain(this.props.rainVal, this.props.frequency); + } + 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) + } + } + + 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)} ) + } + + 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 /> + + {!this.props.formView && <form> + <div> + + <br />Site A + <br /> Site Id: + <label style={{ marginInlineStart: 20 }}> latitude + <input id='Lat1' type='number' onChange={(e: any) => this.updateLatLon(e)} /> + </label> + <label style={{ marginInlineStart: 20 }}>longitude + <input id='Lon1' type='number' onChange={(e: any) => this.updateLatLon(e)} /> + </label><br /><br /> + + </div> + <div> <br />Site B<br /> Site Id: + <label style={{ marginInlineStart: 20 }}> latitude + <input id='Lat2' type='number' onChange={(e: any) => this.updateLatLon(e)} /> + </label> + <label style={{ marginInlineStart: 20 }}>longitude + <input id='Lon2' type='number' onChange={(e: any) => this.updateLatLon(e)} /> + </label> + <br /> + </div> + </form> + } + + <DenseTable height={600} width={1300} hover={true} headers={["", "Site A","", "Site B"]} data={data}> </DenseTable> + + + + + </div> + + } + + +} + +export default connect(mapProps, mapDispatch)(LinkCalculation); |