gerrit.o-ran-sc Code Review - oam/oam-controller.git/blob

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2021 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 React, { FC, useEffect, useState } from 'react';
  20
  21 import { Button, InputAdornment, TextField, Tooltip } from '@mui/material';
  22 import makeStyles from '@mui/styles/makeStyles';
  23
  24 import { getGPSHeight } from '../service/lineOfSightHeightService';
  25
  26 type MapContextMenuProps = {
  27   pos: maplibregl.LngLat;
  28   onStart: (pos: maplibregl.LngLat) => void;
  29   onEnd: (pos: maplibregl.LngLat) => void;
  30   onHeightA: (height: number, antennaHeight: number) => void;
  31   onHeightB: (height: number, antennaHeight: number) => void;
  32 };
  33
  34 const styles = makeStyles({
  35   flexContainer: { display: 'flex', flexDirection: 'row' },
  36   textField: { width: 60 },
  37   button: { marginRight: 5, marginTop: 5, flexGrow: 2 },
  38 });
  39
  40 const MapContextMenu: FC<MapContextMenuProps> = (props) => {
  41   const { pos, onStart, onEnd } = props;
  42   const [height, setHeight] = useState<number | undefined>(undefined);
  43   const [value1, setValue1] = useState<string>('');
  44   const [value2, setValue2] = useState<string>('');
  45   const classes = styles();
  46
  47   useEffect(() => {
  48     getGPSHeight({ longitude: pos.lng, latitude: pos.lat }).then(setHeight);
  49   }, [pos.lat, pos.lng]);
  50
  51   const handleChangeHeight = (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>, id: 'heightA' | 'heightB') => {
  52     //sanitize non numbers
  53     const onlyNums = e.target.value.replace(/[^0-9]/g, '');
  54     if (id === 'heightA') {
  55       setValue1(onlyNums);
  56     } else {
  57       setValue2(onlyNums);
  58     }
  59   };
  60
  61   return (
  62     <div>
  63       <div>Height: {height} m</div>
  64       <div>
  65         <div className={classes.flexContainer}>
  66           <Button color="inherit" className={classes.button} variant="contained" onClick={() => { onStart(pos); props.onHeightA(height!, +value1); }}>Start</Button>
  67           <Tooltip disableInteractive title="Please add the antenna height in meters above sea level.">
  68             <TextField variant="standard" className={classes.textField} value={value1} onChange={(e) => handleChangeHeight(e, 'heightA')} InputProps={{ endAdornment: <InputAdornment position="start">m</InputAdornment> }} />
  69           </Tooltip>
  70         </div>
  71         <div className={classes.flexContainer}>
  72           <Button color="inherit" className={classes.button} variant="contained" onClick={() => { onEnd(pos); props.onHeightB(height!, +value2); }}>End</Button>
  73           <Tooltip disableInteractive title="Please add the antenna height in meters above sea level.">
  74             <TextField variant="standard" className={classes.textField} value={value2} onChange={(e) => handleChangeHeight(e, 'heightB')} InputProps={{ endAdornment: <InputAdornment position="start">m</InputAdornment> }} />
  75           </Tooltip>
  76         </div>
  77       </div>
  78     </div>
  79   );
  80 };
  81
  82 export default MapContextMenu;