sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.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 import { TextField, Tabs, Tab, Typography, AppBar, Button, Tooltip } from '@material-ui/core';
  21
  22
  23 import MaterialTable, { ColumnModel, ColumnType, MaterialTableCtorType } from "../../../../../framework/src/components/material-table";
  24
  25
  26 import { site, Device } from '../../model/site';
  27 import DenseTable from '../denseTable';
  28 import { LatLonToDMS } from '../../utils/mapUtils';
  29
  30 type minLinks = { name: string, azimuth: string}
  31
  32 const FaultAlarmNotificationTable = MaterialTable as MaterialTableCtorType<minLinks>;
  33
  34
  35 type panelId="links" | "nodes";
  36 type props = { site: site, updatedDevices: Device[]|null, navigate(applicationName: string, path?: string):void, onLinkClick(id: string): void, loadDevices(devices:Device[]): void };
  37
  38 const SiteDetails: React.FunctionComponent<props> = (props) => {
  39
  40     const [value, setValue] = React.useState<panelId>("links");
  41     const [height, setHeight] = React.useState(330);
  42
  43     const handleResize = () =>{
  44         const el = document.getElementById('site-details-panel')?.getBoundingClientRect();
  45         const el2 = document.getElementById('site-tabs')?.getBoundingClientRect();
  46
  47         if(el && el2){
  48             setHeight(el!.height - el2!.y +20);
  49         }
  50
  51     }
  52
  53     //on mount
  54     React.useEffect(()=>{
  55         handleResize();
  56
  57         window.addEventListener("resize", ()=>{console.log("really got resized.")});
  58     },[]);
  59
  60     // on update
  61     React.useEffect(()=>{
  62
  63         props.loadDevices(props.site.devices);
  64         handleResize();
  65
  66     }, [props.site])
  67
  68     const onHandleTabChange = (event: React.ChangeEvent<{}>, newValue: panelId) => {
  69         setValue(newValue);
  70     }
  71
  72     const linkRows: minLinks[] = props.site.links.map(link=>
  73         {
  74             return {name: link.name, azimuth: link.azimuthB.toFixed(2) }
  75         });
  76
  77
  78
  79     return (<div  style={{ padding: '15px', display: "flex", flexDirection:"column", minWidth:0, minHeight:0 }}>
  80         <h2 >{props.site.name}</h2>
  81         {
  82             props.site.operator !== '' && props.site.operator !== null ?
  83                 <TextField inputProps={{ 'aria-label': 'operator' }} disabled={true} value={props.site.operator} label="Operator" /> :
  84                 <TextField inputProps={{ 'aria-label': 'operator' }} disabled={true} value="Unkown" label="Operator" style={{ marginTop: "5px" }} />
  85         }
  86         {
  87             props.site.type !== undefined && props.site.type.length > 0 &&
  88             <TextField inputProps={{ 'aria-label': 'type' }} disabled={true} value={props.site.type} label="Type" style={{ marginTop: "5px" }} />
  89         }
  90         {
  91             props.site.address !== undefined && props.site.address.length > 0 &&
  92             <TextField inputProps={{ 'aria-label': 'adress' }} disabled={true} value={props.site.address} label="Adress" style={{ marginTop: "5px" }} />
  93         }
  94         {
  95             props.site.heighAGLInMeters !== undefined && props.site.heighAGLInMeters > 0 &&
  96             <TextField inputProps={{ 'aria-label': 'amsl-in-meters' }} disabled={true} value={props.site.heighAGLInMeters} label="AMSL in meters" style={{ marginTop: "5px" }} />
  97         }
  98         {
  99             props.site.antennaHeightAGLInMeters !== undefined && props.site.antennaHeightAGLInMeters > 0 &&
 100             <TextField inputProps={{ 'aria-label': 'antenna-above-ground-in-meters' }} disabled={true} value={props.site.antennaHeightAGLInMeters} label="Atenna above ground in meters" style={{ marginTop: "5px" }} />
 101         }
 102
 103         <TextField inputProps={{ 'aria-label': 'latitude' }} style={{ marginTop: "5px" }} disabled={true} value={LatLonToDMS(props.site.geoLocation.lat)} label="Latitude" />
 104         <TextField inputProps={{ 'aria-label': 'longitude' }} style={{ marginTop: "5px" }} disabled={true} value={LatLonToDMS(props.site.geoLocation.lon, true)} label="Longitude" />
 105
 106         <AppBar position="static" style={{ marginTop: "5px", background: '#2E3B55' }}>
 107             <Tabs id="site-tabs" value={value} onChange={onHandleTabChange} aria-label="simple tabs example">
 108                 <Tab label="Links" value="links" />
 109                 <Tab label="Nodes" value="nodes" />
 110             </Tabs>
 111         </AppBar>
 112         {
 113             value === "links" &&
 114             <>
 115                 {
 116                     props.site.links.length === 0 &&
 117                     <Typography aria-label="no-links-available" variant="body1" style={{ marginTop: '10px' }}>No links available.</Typography>
 118                 }
 119
 120                 {
 121                     props.site.links.length > 0 &&
 122                     <DenseTable ariaLabel="available-links-table-entry" height={height} hover={true} headers={["Link Name", "Azimuth in °"]}  data={linkRows} onClick={props.onLinkClick}  ></DenseTable>
 123                /**
 124                 *
 125                 * */
 126
 127
 128                }
 129
 130             </>
 131
 132         }
 133         {
 134             value === "nodes" &&
 135             <>
 136                 {
 137                     props.site.devices.length === 0 &&
 138                     <Typography aria-label="no-nodes-avilable" variant="body1" style={{ marginTop: '10px' }}>No nodes available.</Typography>
 139                 }
 140
 141                 {
 142                     props.site.devices.length>0 && props.updatedDevices !== null &&
 143                     <DenseTable ariaLabel="available-nodes-table-entry" navigate={props.navigate} height={height} hover={false} headers={["ID","Name","Type", "Manufacturer","Owner","Status", "Ports", "Actions"]} actions={true} data={props.updatedDevices!} />
 144                 }
 145             </>
 146         }
 147     </div>
 148     )
 149
 150 }
 151
 152 export default SiteDetails;