sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2020 highstreet technologies GmbH Intellectual Property. All rights reserved.
   6  * =================================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   8  * in compliance with the License. You may obtain a copy of the License at
   9  *
  10  * http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  14  * or implied. See the License for the specific language governing permissions and limitations under
  15  * the License.
  16  * ============LICENSE_END==========================================================================
  17  */
  18
  19 import * as React from 'react';
  20
  21 import { link } from '../../model/link';
  22 import { TextField, Tabs, Tab, Typography, AppBar, Button, Link } from '@material-ui/core';
  23 import DenseTable from '../denseTable';
  24 import { LatLonToDMS } from '../../utils/mapUtils';
  25
  26 type panelId = "siteA" | "siteB";
  27 type props = { link: link };
  28
  29 const LinkDetails: React.FunctionComponent<props> = (props) => {
  30
  31     const [value, setValue] = React.useState<panelId>("siteA");
  32     const [height, setHeight] = React.useState(330);
  33
  34     const handleResize = () =>{
  35         const el = document.getElementById('link-details-panel')?.getBoundingClientRect();
  36         const el2 = document.getElementById('site-tabs')?.getBoundingClientRect();
  37
  38         if(el && el2){
  39             if(props.link.type==="microwave")
  40               setHeight(el!.height - el2!.y -50);
  41             else
  42               setHeight(el!.height - el2!.y +20);
  43
  44         }
  45     }
  46
  47     //on mount
  48     React.useEffect(()=>{
  49         handleResize();
  50
  51         //window.addEventListener("resize", handleResize);
  52     },[]);
  53
  54     React.useEffect(()=>{
  55         handleResize();
  56     }, [props.link])
  57
  58     const onHandleTabChange = (event: React.ChangeEvent<{}>, newValue: panelId) => {
  59         setValue(newValue);
  60     }
  61
  62     const onCalculateLinkClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
  63        e.preventDefault();
  64        const siteA= props.link.locationA;
  65        const siteB =props.link.locationB;
  66        const nameA = props.link.siteA;
  67        const nameB = props.link.siteB;
  68        const distance = props.link.length > 0 ? props.link.length : props.link.calculatedLength;
  69        const azimuthA = props.link.azimuthA;
  70        const azimuthB = props.link.azimuthB;
  71        const antennaA = props.link.locationA.antenna;
  72        const antennaB = props.link.locationB.antenna;
  73
  74
  75        let antennaData = "";
  76        if(antennaA!==null && antennaB!==null){
  77            antennaData = `&antennaNameA=${antennaA.name}&antennaGainA=${antennaA.gain}&waveguideLossA=${antennaA.waveguideLossIndB}&antennaNameB=${antennaB.name}&antennaGainB=${antennaB.gain}&waveguideLossB=${antennaB.waveguideLossIndB}`;
  78        }
  79
  80
  81
  82        const baseUrl = window.location.pathname.split('#')[0];
  83        window.open(`${baseUrl}#/linkCalculation?lat1=${siteA.lat}&lon1=${siteA.lon}&lat2=${siteB.lat}&lon2=${siteB.lon}&siteA=${nameA}&siteB=${nameB}&azimuthA=${azimuthA}&azimuthB=${azimuthB}&distance=${distance}&amslSiteA=${siteA.amsl}&AGLsiteA=${siteA.antennaHeight}&amslSiteB=${siteB.amsl}&AGLsiteB=${siteB.antennaHeight}${antennaData}`)
  84
  85     }
  86
  87     const onLineofSightClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
  88         e.preventDefault();
  89
  90         const siteA= props.link.locationA;
  91         const siteB =props.link.locationB;
  92
  93         //TODO: add check if available
  94         let heightPart = `&amslA=${siteA.amsl}&antennaHeightA=${siteA.antennaHeight}&amslB=${siteB.amsl}&antennaHeightB=${siteB.antennaHeight}`;
  95
  96
  97         const baseUrl = window.location.pathname.split('#')[0];
  98         window.open(`${baseUrl}#/lineofsight/los?lat1=${siteA.lat}&lon1=${siteA.lon}&lat2=${siteB.lat}&lon2=${siteB.lon}${heightPart}`);
  99     }
 100
 101     const data = [
 102
 103    {name:"Site Name", val1: props.link.siteA, val2: props.link.siteB},
 104     {name:"Latitude", val1: LatLonToDMS(props.link.locationA.lat), val2: LatLonToDMS(props.link.locationB.lat)},
 105     {name:"Longitude", val1: LatLonToDMS(props.link.locationA.lon, true), val2: LatLonToDMS(props.link.locationB.lon, true)},
 106     props.link.azimuthA!= null && props.link.azimuthB != null && {name:"Azimuth in °", val1: props.link.azimuthA.toFixed(2), val2: props.link.azimuthB.toFixed(2)}
 107 ];
 108
 109     return (<div style={{ paddingLeft: "15px", paddingRight: "15px", paddingTop: "0px", display: 'flex', flexDirection: 'column' }}>
 110         <h2>{props.link.name}</h2>
 111         <TextField inputProps={{ 'aria-label': 'operator' }} disabled style={{ marginTop: "5px" }} value="Unkown" label="Operator" />
 112         <TextField inputProps={{ 'aria-label': 'type' }} disabled style={{ marginTop: "5px" }} value={props.link.type} label="Type" />
 113         <TextField inputProps={{ 'aria-label': 'planned-distance-in-km' }} disabled style={{ marginTop: "5px" }} value={props.link.length.toFixed(2)} label="Distance planned in km" />
 114         <TextField inputProps={{ 'aria-label': 'calculated-distance-in-km' }} disabled style={{ marginTop: "5px" }} value={props.link.calculatedLength.toFixed(2)} label="Distance calculated in km" />
 115
 116         <AppBar position="static" id="site-tabs" style={{ marginTop: "20px", background: '#2E3B55' }}>
 117             <Typography aria-label="details-of-link-sites" style={{ margin:"5px"}}>SITE DETAILS</Typography>
 118         </AppBar>
 119         <DenseTable ariaLabelRow="site-information-table-entry" ariaLabelColumn={["site-name", "latitude", "longitude", "azimuth"]} verticalTable height={height} hover={false} headers={["", "Site A", "Site B"]} data={data} />
 120         {
 121             props.link.type==="microwave" &&<>
 122             <Button style={{marginTop:20}} fullWidth variant="contained" color="primary" onClick={onCalculateLinkClick}>Calculate link</Button>
 123             <Button style={{marginTop:20}} fullWidth variant="contained" color="primary" onClick={onLineofSightClick}>Line of Sight</Button>
 124
 125             </>
 126         }
 127     </div>)
 128 }
 129
 130 export default LinkDetails;