summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/lineOfSightApp/src/components
diff options
context:
space:
mode:
authorDan Timoney <dtimoney@att.com>2022-02-03 16:41:14 +0000
committerGerrit Code Review <gerrit@onap.org>2022-02-03 16:41:14 +0000
commit652d7ca972652ef437769cc2e88afddbb7f06ca2 (patch)
tree08da4fc171617be44aa95cf7d80a5cec1468de8d /sdnr/wt/odlux/apps/lineOfSightApp/src/components
parentf23a3d5d957c4c510a7436c0acba57d95e4a13ce (diff)
parent1a868116614dd9996c78e69941b537e9da19460b (diff)
Merge "Update ODLUX"
Diffstat (limited to 'sdnr/wt/odlux/apps/lineOfSightApp/src/components')
-rw-r--r--sdnr/wt/odlux/apps/lineOfSightApp/src/components/ConnectionErrorPoup.tsx40
-rw-r--r--sdnr/wt/odlux/apps/lineOfSightApp/src/components/heightChart.tsx126
-rw-r--r--sdnr/wt/odlux/apps/lineOfSightApp/src/components/map.tsx329
-rw-r--r--sdnr/wt/odlux/apps/lineOfSightApp/src/components/mapContextMenu.tsx86
-rw-r--r--sdnr/wt/odlux/apps/lineOfSightApp/src/components/mapInfo.tsx171
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