diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/lineOfSightApp/src/components')
5 files changed, 0 insertions, 752 deletions
diff --git a/sdnr/wt/odlux/apps/lineOfSightApp/src/components/ConnectionErrorPoup.tsx b/sdnr/wt/odlux/apps/lineOfSightApp/src/components/ConnectionErrorPoup.tsx deleted file mode 100644 index 7d9339fc0..000000000 --- a/sdnr/wt/odlux/apps/lineOfSightApp/src/components/ConnectionErrorPoup.tsx +++ /dev/null @@ -1,40 +0,0 @@ -/** - * ============LICENSE_START======================================================================== - * ONAP : ccsdk feature sdnr wt odlux - * ================================================================================================= - * Copyright (C) 2021 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 { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons" -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" -import { Paper, Typography } from "@material-ui/core" -import * as React from "react" - -type props = { reachable: boolean|null}; - - -const ConnectionErrorPoup: React.FunctionComponent<props> = (props) => { - - return (props.reachable === false ? - <Paper style={{padding:5, position: 'absolute', top: 160, width: 230, left:"40%", zIndex:1}}> - <div style={{display: 'flex', flexDirection: 'column'}}> - <div style={{'alignSelf': 'center', marginBottom:5}}> <Typography> <FontAwesomeIcon icon={faExclamationTriangle} /> Connection Error</Typography></div> - <Typography>Service unavailable</Typography> - </div> - </Paper> : null -) - -} - -export default ConnectionErrorPoup;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/lineOfSightApp/src/components/heightChart.tsx b/sdnr/wt/odlux/apps/lineOfSightApp/src/components/heightChart.tsx deleted file mode 100644 index 3030fe7dd..000000000 --- a/sdnr/wt/odlux/apps/lineOfSightApp/src/components/heightChart.tsx +++ /dev/null @@ -1,126 +0,0 @@ -/** - * ============LICENSE_START======================================================================== - * ONAP : ccsdk feature sdnr wt odlux - * ================================================================================================= - * Copyright (C) 2021 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 type { FC } from 'react'; -import * as d3 from 'd3'; - -import { useD3 } from "../hooks/d3"; -import { GPSProfileResult } from "../model/GPSProfileResult"; -import { max } from '../utils/math'; - -type HeightMapProps = { - data: GPSProfileResult[]; - dataMin: GPSProfileResult; - dataMax: GPSProfileResult; - width: number; - height: number; - heightPosA: number; - heightPosB: number; -} - -const HeightChart: FC<HeightMapProps> = (props) => { - const { data, dataMin, dataMax, heightPosA, heightPosB } = props; - let ref: React.RefObject<SVGSVGElement> - - const drawSvg = () => { - ref = useD3( - (svg) => { - const margin = 100; - const width = Number(svg.attr("width")) - margin; - const height = Number(svg.attr("height")) - margin; - - // Add X axis - const x = d3.scaleBand() - .range([0, width]) - .domain(data.map(d => (`${d.gps.latitude},${d.gps.latitude}`))) - .padding(0.2); - - const maxHeight = max([dataMax.height, heightPosA, heightPosB], d => d) - - // Add Y axis - const y = d3.scaleLinear() - .domain([dataMin.height, maxHeight]) - .range([height, 0]); - - svg.append("g") - .attr('transform', `translate(${margin / 2}, ${margin / 2})`) - .call(d3.axisLeft(y)); - - // Bars - svg.selectAll("myBar") - .data(data) - .join("rect") - .attr('transform', `translate(${margin / 2}, ${margin / 2})`) - .attr("x", d => x(`${d.gps.latitude},${d.gps.latitude}`) || '') - .attr("y", d => y(d.height)) - .attr("width", x.bandwidth()) - .attr("fill", "#69b3a2b0") - .attr("height", d => height - y(d.height)) // always equal to 0 - - const firstX = `${data[0].gps.latitude},${data[0].gps.latitude}` - const lastX = `${data[data.length - 1].gps.latitude},${data[data.length - 1].gps.latitude}`; - - //add line - const x1 = x(firstX)!; - const x2 = x(lastX)!; - - svg.append("line") - .attr('transform', `translate(${margin / 2}, ${margin / 2})`) - .attr("x1", x1) - .attr("y1", y(props.heightPosA)) - .attr("x2", x2) - .attr("y2", y(props.heightPosB)) - - .style("stroke", "#88A") - .attr("stroke-width", "3px") - - //append circle on start and end - - svg.append("circle") - .attr('transform', `translate(${margin / 2}, ${margin / 2})`) - .attr('cx', x1) - .attr('cy', y(props.heightPosA)) - .attr('r', 10) - .attr('stroke', '#223b53') - .attr('fill', '#225ba3'); - - svg.append("circle") - .attr('transform', `translate(${margin / 2}, ${margin / 2})`) - .attr('cx', x2) - .attr('cy', y(props.heightPosB)) - .attr('r', 10) - .attr('stroke', '#223b53') - .attr('fill', '#225ba3'); - }, - [data] - ); - } - - drawSvg(); - - - - return ( - <svg ref={ref!} width={props.width} height={props.height} /> - - ); -} - -export { HeightChart }; diff --git a/sdnr/wt/odlux/apps/lineOfSightApp/src/components/map.tsx b/sdnr/wt/odlux/apps/lineOfSightApp/src/components/map.tsx deleted file mode 100644 index 6f29d5993..000000000 --- a/sdnr/wt/odlux/apps/lineOfSightApp/src/components/map.tsx +++ /dev/null @@ -1,329 +0,0 @@ -/** - * ============LICENSE_START======================================================================== - * ONAP : ccsdk feature sdnr wt odlux - * ================================================================================================= - * Copyright (C) 2021 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 * as mapboxgl from 'mapbox-gl'; -import { render } from 'react-dom'; -import { RouteComponentProps, withRouter } from 'react-router-dom'; -import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; -import { OSM_STYLE, URL_BASEPATH } from '../config'; -import { GPSProfileResult } from '../model/GPSProfileResult'; -import MapContextMenu from './mapContextMenu'; -import { getGPSProfile } from '../services/heightService'; -import { max, min } from '../utils/math'; -import { HeightChart } from './heightChart'; -import { makeStyles } from '@material-ui/core'; -import { ClearSavedChartAction, SetChartAction, SetEndpointAction, SetHeightA, SetHeightB, SetMapCenterAction, SetStartPointAction } from '../actions/mapActions'; -import { LatLon } from '../model/LatLon'; -import MapInfo from './mapInfo'; -import { Height } from 'model/Height'; -import { PictureAsPdf } from '@material-ui/icons'; -import ConnectionErrorPoup from './ConnectionErrorPoup'; -import { addBaseLayer, addBaseSource, addPoint } from '../utils/map'; -import { SetReachableAction } from '../actions/commonActions'; - -import 'mapbox-gl/dist/mapbox-gl.css'; - -type mapProps = RouteComponentProps & Connect<typeof mapStateToProps, typeof mapDispatchToProps>; - -const mapStateToProps = (state: IApplicationStoreState) => ({ - center: state.lineOfSight.map.center, - zoom: state.lineOfSight.map.zoom, - start: state.lineOfSight.map.start, - end: state.lineOfSight.map.end, - heightA: state.lineOfSight.map.heightA, - heightB: state.lineOfSight.map.heightB, - ready: state.lineOfSight.map.ready -}); - -const mapDispatchToProps = (dispatcher: IDispatcher) => ({ - ClearChartAction: () => dispatcher.dispatch(new ClearSavedChartAction), - SetMapPosition: (point: LatLon, zoom: number) => dispatcher.dispatch(new SetMapCenterAction(point, zoom)), - SetHeightStart: (height: Height) => dispatcher.dispatch(new SetHeightA(height)), - SetHeightEnd: (height: Height) => dispatcher.dispatch(new SetHeightB(height)), - setStartPosition: (position: LatLon|null) => dispatcher.dispatch(new SetStartPointAction(position)), - setEndPosition: (position: LatLon|null) => dispatcher.dispatch(new SetEndpointAction(position)), - setReachable : (reachable: boolean |null) => dispatcher.dispatch(new SetReachableAction(reachable)), - - - -}) - - -let map: mapboxgl.Map; - -const styles = makeStyles({ - chart: { - position: "absolute", - top: 0, - bottom: 0, - left: 0, - right: 0 - - } - }); - - -const Map: React.FC<mapProps> = (props) => { - - //const [start, setStart] = React.useState<mapboxgl.LngLat| undefined>(); - //const [end, setEnd] = React.useState<mapboxgl.LngLat| undefined>(); - const [data, setData] = React.useState<GPSProfileResult[] | number>(Number.NaN); - const [dataMin, setDataMin] = React.useState<GPSProfileResult|undefined>(); - const [dataMax, setDataMax] = React.useState<GPSProfileResult|undefined>(); - const [isMapLoaded, setMapLoaded] = React.useState<boolean>(false); - - -const mapRef = React.useRef<{ map: mapboxgl.Map | null }>({ map: null }); -const mapContainerRef = React.useRef<HTMLDivElement>(null); - - - -const classes = styles(); - -const heightA = props.heightA !== null ? props.heightA.amsl + props.heightA.antennaHeight : 0; -const heightB = props.heightB !== null ? props.heightB.amsl + props.heightB.antennaHeight : 0; - -const {start, end} = props; - -const handleResize = () =>{ - - if (map) { - // wait a moment until resizing actually happened - window.setTimeout(() => map.resize(), 500); - } - -} - -//on mount -React.useEffect(()=>{ - - window.addEventListener("menu-resized", handleResize); - - - return () =>{ - console.log("unmount") - window.removeEventListener("menu-resized", handleResize); - - const center = mapRef.current.map?.getCenter(); - const mapZoom = mapRef.current.map?.getZoom(); - if(center){ - props.SetMapPosition({latitude: center.lat, longitude:center.lng}, mapZoom!); - } - - props.setReachable(null); - } - -},[]); - - - React.useEffect(()=>{ - - if(props.ready){ - setupMap(); - } - - },[props.ready]); - - React.useEffect(() => { - if (props.ready && isMapLoaded) { - drawChart(); - updateLosUrl(); - } - - }, [start, end, isMapLoaded]); - - const drawChart = () =>{ - if(start && end){ - - addBaseSource(map, 'route'); - addBaseLayer(map, 'route'); - - const json = `{ - "type": "Feature", - "properties": {}, - "geometry": { - "type": "LineString", - "coordinates": [ - [${start.longitude}, ${start.latitude}], - [${end.longitude}, ${end.latitude}] - ]} - }`; - - - - (map.getSource("route") as mapboxgl.GeoJSONSource).setData(JSON.parse(json)); - - - getGPSProfile({ latitude: start.latitude, longitude: start.longitude }, { latitude: end.latitude, longitude: end.longitude }).then(data => { - if (Array.isArray(data)) { - setDataMin(min(data, d => d.height)); - setDataMax(max(data, d => d.height)); - } - setData(data); - }); - } - else if (start || end){ - - const point = start!==null ? start: end!; - addBaseSource(map, 'route'); - addBaseLayer(map, 'route'); - addPoint(map, point); - - } - else { - //delete layers and source - //used instead of clearing source data because it has better performance - //(setting data to empty results in a noticable lag of line being cleared) - mapRef.current.map?.getLayer('line') && mapRef.current.map?.removeLayer('line') && mapRef.current.map?.removeLayer('points') && mapRef.current.map?.removeSource('route'); - - } - } - - const updateLosUrl = () =>{ - - if(start && end){ - - const locationPart = `lat1=${start.latitude}&lon1=${start.longitude}&lat2=${end.latitude}&lon2=${end.longitude}`; - - let heightPart = ''; - - if(props.heightA && props.heightB){ - heightPart = `&amslA=${props.heightA.amsl}&antennaHeightA=${props.heightA.antennaHeight}&amslB=${props.heightB.amsl}&antennaHeightB=${props.heightB.antennaHeight}`; - - } - - props.history.replace(`/${URL_BASEPATH}/los?${locationPart}${heightPart}`) - - }else if(!start && !end){ - props.history.replace(`/${URL_BASEPATH}`); - } - } - - - const updateHeightA = (value:number, value2: number) =>{ - props.SetHeightStart({amsl: value, antennaHeight: value2}); - } - - const updateHeightB = (value:number, value2: number) =>{ - props.SetHeightEnd({amsl: value, antennaHeight: value2}); - } - - const OnEndPosition = (position: mapboxgl.LngLat) =>{ - props.setEndPosition({latitude: position.lat, longitude: position.lng}) - } - - const OnStartPosition = (position: mapboxgl.LngLat) =>{ - props.setStartPosition({latitude: position.lat, longitude: position.lng}) - } - - - const setupMap = () => { - - let lat = props.center.latitude - let lon = props.center.longitude; - let zoom = props.zoom; - - map = new mapboxgl.Map({ - container: mapContainerRef.current!, - style: OSM_STYLE as any, - center: [lon, lat], - zoom: zoom, - accessToken: '' - }); - - mapRef.current.map = map; - - map.on('load', (ev) => { - - map.setMaxZoom(18); - setMapLoaded(true); - - //add source, layer - - addBaseSource(map, 'route'); - addBaseLayer(map, 'route'); - - }); - - let currentPopup: mapboxgl.Popup | null = null; - map.on('contextmenu', (e) => { - - if (currentPopup) - currentPopup.remove(); - - //change height if start/end changes - //??? -> show value? / reset after chart display? - - const popupNode = document.createElement("div"); - render( - <MapContextMenu pos={e.lngLat} - onStart={(p) => { OnStartPosition(p); if (currentPopup) currentPopup.remove(); }} - onEnd={(p) => { OnEndPosition(p); if (currentPopup) currentPopup.remove(); }} - onHeightA={(p,p1)=> updateHeightA(p, p1)} - onHeightB={(p, p1)=> updateHeightB(p, p1)} />, - popupNode); - - currentPopup = new mapboxgl.Popup() - .setLngLat(e.lngLat) - .setDOMContent(popupNode) - .addTo(map); - }); - - map.on('moveend', mapMoveEnd); - - }; - - const mapMoveEnd = () =>{ - const mapZoom = Number(map.getZoom().toFixed(2)); - const lat = Number(map.getCenter().lat.toFixed(4)); - const lon = Number(map.getCenter().lng.toFixed(4)); - - props.SetMapPosition({latitude: lat, longitude: lon}, mapZoom); - - } - - - - return <> - <div id="map" style={{ width: "100%", height:'100%', position: 'relative' }} ref={mapContainerRef} > - <MapInfo minHeight={dataMin} maxHeight={dataMax} /> - <ConnectionErrorPoup reachable={props.ready} /> - - {typeof data === "object" - ? ( - < div className={classes.chart} onClick={() => { - setData(Number.NaN); - setDataMax(undefined); - setDataMin(undefined); - props.ClearChartAction(); - }}> - <HeightChart heightPosA={heightA} heightPosB={heightB} width={mapContainerRef.current?.clientWidth!} height={mapContainerRef.current?.clientHeight!} data={data} dataMin={dataMin!} dataMax={dataMax!} /> - </div> - ) - : null - } - - </div> - </> -} - -export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Map)); - - diff --git a/sdnr/wt/odlux/apps/lineOfSightApp/src/components/mapContextMenu.tsx b/sdnr/wt/odlux/apps/lineOfSightApp/src/components/mapContextMenu.tsx deleted file mode 100644 index 0fc51cabf..000000000 --- a/sdnr/wt/odlux/apps/lineOfSightApp/src/components/mapContextMenu.tsx +++ /dev/null @@ -1,86 +0,0 @@ -/** - * ============LICENSE_START======================================================================== - * ONAP : ccsdk feature sdnr wt odlux - * ================================================================================================= - * Copyright (C) 2021 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 { Button, InputAdornment, makeStyles, TextField, Tooltip } from "@material-ui/core"; -import * as React from "react"; -import { FC, useEffect, useState } from "react"; -import { getGPSHeight } from "../services/heightService"; - -type MapContextMenuProps = { - pos: mapboxgl.LngLat; - onStart: (pos: mapboxgl.LngLat) => void; - onEnd: (pos: mapboxgl.LngLat) => void; - onHeightA: (height: number, antennaHeight: number) => void; - onHeightB: (height: number, antennaHeight: number) => void; - - } - - const styles = makeStyles({ - flexContainer: {display: "flex", flexDirection:"row"}, - textField:{width:60}, - button:{marginRight:5, marginTop:5, flexGrow:2} - }); - - const MapContextMenu: FC<MapContextMenuProps> = (props) => { - const { pos, onStart, onEnd } = props; - const [height, setHeight] = useState<number | undefined>(undefined); - const [value1, setValue1] = useState<string>(''); - const [value2, setValue2] = useState<string>(''); - - const classes = styles(); - - useEffect(() => { - getGPSHeight({ longitude: pos.lng, latitude: pos.lat }).then(setHeight); - }, [pos.lat, pos.lng]); - - const handleChangeHeight = (e:React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>, id: "heightA"|"heightB") =>{ - - //sanitize non numbers - const onlyNums = e.target.value.replace(/[^0-9]/g, ''); - - if(id==="heightA"){ - setValue1(onlyNums); - }else{ - setValue2(onlyNums); - } - } - - return ( - <div> - <div>Height: {height} m</div> - <div> - <div className={classes.flexContainer}> - <Button className={classes.button} variant="contained" onClick={() => { onStart(pos); props.onHeightA(height!,+value1); }}>Start</Button> - <Tooltip title="Please add the antenna height in meters above sea level."> - <TextField className={classes.textField} value={value1} onChange={(e)=>handleChangeHeight(e,"heightA")} InputProps={{endAdornment: <InputAdornment position="start">m</InputAdornment>}}/> - </Tooltip> - </div> - <div className={classes.flexContainer}> - <Button className={classes.button} variant="contained" onClick={() => { onEnd(pos); props.onHeightB(height!,+value2);}}>End</Button> - <Tooltip title="Please add the antenna height in meters above sea level."> - <TextField className={classes.textField} value={value2} onChange={(e)=>handleChangeHeight(e,"heightB")} InputProps={{endAdornment: <InputAdornment position="start">m</InputAdornment>}}/> - </Tooltip> - </div> - </div> - - </div> - ); - }; - - - export default MapContextMenu;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/lineOfSightApp/src/components/mapInfo.tsx b/sdnr/wt/odlux/apps/lineOfSightApp/src/components/mapInfo.tsx deleted file mode 100644 index 43a6e478a..000000000 --- a/sdnr/wt/odlux/apps/lineOfSightApp/src/components/mapInfo.tsx +++ /dev/null @@ -1,171 +0,0 @@ -/** - * ============LICENSE_START======================================================================== - * ONAP : ccsdk feature sdnr wt odlux - * ================================================================================================= - * Copyright (C) 2021 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 { Accordion, AccordionDetails, AccordionSummary, makeStyles, Paper, Typography } from '@material-ui/core'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -import { GPSProfileResult } from '../model/GPSProfileResult'; -import * as React from 'react'; -import { calculateDistanceInMeter } from '../utils/map'; -import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; -import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; - -const mapStateToProps = (state: IApplicationStoreState) => ({ - center: state.lineOfSight.map.center, - zoom: state.lineOfSight.map.zoom, - start: state.lineOfSight.map.start, - end: state.lineOfSight.map.end, - heightA: state.lineOfSight.map.heightA, - heightB: state.lineOfSight.map.heightB, -}); - -const mapDispatchToProps = (dispatcher: IDispatcher) => ({ - - -}) - -type props = Connect<typeof mapStateToProps, typeof mapDispatchToProps> & { - minHeight: GPSProfileResult | undefined; - maxHeight: GPSProfileResult | undefined; -}; - -const styles = (props: any) => makeStyles({ - accordion: {padding: 5, position: 'absolute', top: 10, width: props.width, marginLeft: 10, zIndex:1}, - container: { display: 'flex', flexDirection: "column", marginLeft:10, padding: 5 }, - caption:{width:'40%'}, - subTitleRow:{ width: '60%'}, - titleRowElement:{width: '40%', fontWeight: "bold"}, - secondRow:{width:'25%'}, - thirdRow:{width:'20%'} - }); - -const MapInfo: React.FC<props> = (props) =>{ - - const [expanded, setExpanded] = React.useState(false); - const [width, setWidth] = React.useState(470); - const [length, setLength] = React.useState<string | undefined>(); - - const classes = styles({width: width})(); - - const {start, end, center, zoom, heightA, heightB, minHeight, maxHeight} = props; - - React.useEffect(()=>{ - - if(start && end){ - setLength(calculateDistanceInMeter(start.latitude, start.longitude, end.latitude, end.longitude).toFixed(3)) - - }else{ - setLength(undefined) - } - - }, [start, end]) - - const handleChange = (event: any, isExpanded: boolean) => { - setExpanded(isExpanded); - }; - - - - - return <Accordion className={classes.accordion} expanded={expanded} onChange={handleChange}> - <AccordionSummary - expandIcon={<ExpandMoreIcon />} - aria-controls="panel1a-content" - id="panel1a-header" - > - <Typography >Map Info</Typography> - </AccordionSummary> - <AccordionDetails className={classes.container}> - - - <Typography style={{ fontWeight: "bold", flex: "1" }} >Map Center</Typography> - - <div > - <div style={{ display: 'flex', flexDirection: "row" }}> - <Typography className={classes.caption}> Longitude</Typography><Typography>{center.longitude}</Typography></div> - <div style={{ display: 'flex', flexDirection: "row" }}> - <Typography className={classes.caption}> Latitude</Typography><Typography>{center.latitude}</Typography></div> - <div style={{ display: 'flex', flexDirection: "row" }}> - <Typography className={classes.caption}> Zoom</Typography><Typography> {zoom}</Typography></div> - - </div> - <Typography style={{ fontWeight: "bold", flex: "1", marginTop:5 }} >Link</Typography> - - <div> - <div style={{ display: 'flex', flexDirection: "row", marginLeft:"38%" }}> - <Typography className={classes.titleRowElement}> Start</Typography> - <Typography className={classes.titleRowElement}> End</Typography> - </div> - - <div style={{ display: 'flex', flexDirection: "row" }}> - - <Typography className={classes.caption}> Longitude</Typography> - <Typography className={classes.secondRow}> {start?.longitude.toFixed(3)}</Typography> - <Typography className={classes.secondRow}> {end?.longitude.toFixed(3)}</Typography></div> - - - <div style={{ display: 'flex', flexDirection: "row" }}> - - <Typography className={classes.caption}> Latitude</Typography> - <Typography className={classes.secondRow}> {start?.latitude.toFixed(3)}</Typography> - <Typography className={classes.secondRow}> {end?.latitude.toFixed(3)}</Typography></div> - - - - <div style={{ display: 'flex', flexDirection: "row" }}> - - <Typography className={classes.caption}> Meassured height [m]</Typography> - <Typography className={classes.secondRow}> {heightA?.amsl}</Typography> - <Typography className={classes.secondRow}> {heightB?.amsl}</Typography> - </div> - - <div style={{ display: 'flex', flexDirection: "row" }}> - - <Typography className={classes.caption}> Antenna height [m] </Typography> - <Typography className={classes.secondRow}> {heightA?.antennaHeight}</Typography> - <Typography className={classes.secondRow}> {heightB?.antennaHeight}</Typography> - </div> - - <div style={{ display: 'flex', flexDirection: "row" }}> - - <Typography className={classes.caption}> Length [m]</Typography> - <Typography className={classes.secondRow}> {length}</Typography> - - </div> - - <div style={{ display: 'flex', flexDirection: "row" }}> - - <Typography className={classes.caption}> Max height @ position </Typography> - <Typography className={classes.thirdRow}> {maxHeight? maxHeight.height+' m': ''}</Typography> - <Typography className={classes.thirdRow}> {maxHeight?.gps.longitude.toFixed(3)}</Typography> - <Typography className={classes.thirdRow}> {maxHeight?.gps.latitude.toFixed(3)}</Typography> - </div> - - <div style={{ display: 'flex', flexDirection: "row" }}> - - <Typography className={classes.caption}> Min height @ position</Typography> - <Typography className={classes.thirdRow}> {minHeight? minHeight.height +' m': ''}</Typography> - <Typography className={classes.thirdRow}> {minHeight?.gps.longitude.toFixed(3)}</Typography> - <Typography className={classes.thirdRow}> {minHeight?.gps.latitude.toFixed(3)}</Typography> - </div> - - </div> -</AccordionDetails> -</Accordion> -} - -export default connect(mapStateToProps, mapDispatchToProps)(MapInfo);
\ No newline at end of file |