From 5d5262c8cd4680c6b423f2cc95b08ef3ad310c2d Mon Sep 17 00:00:00 2001
From: yashdeep97 <yashdeep97@gmail.com>
Date: Wed, 15 Jul 2020 21:33:17 +0530
Subject: [PATCH] Allow user to click the missionPt at map to highlight the
 missionPt in the mission panel

---
 .../src/components/content/MapComponent.js    | 10 ++++---
 .../src/components/content/MissionPlanner.js  | 26 -------------------
 .../content/MissionTreeViewComponent.js       |  4 +--
 3 files changed, 9 insertions(+), 31 deletions(-)
 delete mode 100644 experiments/WebUI/src/components/content/MissionPlanner.js

diff --git a/experiments/WebUI/src/components/content/MapComponent.js b/experiments/WebUI/src/components/content/MapComponent.js
index 7e6e1d7..20b6a05 100644
--- a/experiments/WebUI/src/components/content/MapComponent.js
+++ b/experiments/WebUI/src/components/content/MapComponent.js
@@ -3,7 +3,8 @@ import { Map as LeafletMap, Marker, Popup, TileLayer, Circle, Polygon, Polyline
 
 import CursorPositionComponent from './CursorPositionComponent';
 
-import MissionPlanner from './MissionPlanner';
+import MissionTreeViewComponent from './MissionTreeViewComponent';
+import '../../assets/MissionPlanner.css';
 
 import CoordSys from '../../assets/CoordSys.js';
 
@@ -651,6 +652,9 @@ class MapComponent extends React.Component {
 		this.viewMission(this.state.missionNumber);
 	}
 
+	onMissionPtClick(i){
+		this.refs.missionTreeView.selectMleg(i+1);
+	}
 
 	toggleMissionPlanner(e) {
 		if (this.state.MissionPlannerEnabled) {
@@ -717,7 +721,7 @@ class MapComponent extends React.Component {
 					);
 				} else {
 					MissionPointsMarkers.push(
-						<Marker draggable={this.state.MissionPlannerEnabled} onDragEnd={this.dragEndMissionPointMarker} icon={mapPin} key={"MissionPT" + i} position={this.state.currentMission[i]}>
+						<Marker draggable={this.state.MissionPlannerEnabled} onClick={this.onMissionPtClick.bind(this,i)} onDragEnd={this.dragEndMissionPointMarker} icon={mapPin} key={"MissionPT" + i} position={this.state.currentMission[i]}>
 							<Popup>
 								Lat: {lat.toFixed(4)}, Long: {long.toFixed(4)} <br/>
 								x: {x.toFixed(4)}, y: {y.toFixed(4)}
@@ -763,7 +767,7 @@ class MapComponent extends React.Component {
 
 		const MissionPlannerPanels = (this.state.MissionPlannerEnabled) ?
 		<Row>
-			<MissionPlanner selectMissionPointFunc={this.selectMissionPoint} viewMissionFunc={this.viewMission} missions={this.state.missions} editedMissions={this.state.editedMissions} management={this.management}/>
+			<MissionTreeViewComponent ref="missionTreeView" selectMissionPointFunc={this.selectMissionPoint} viewMissionFunc={this.viewMission} missions={this.state.missions} editedMissions={this.state.editedMissions} management={this.management}/>
 		</Row> :
 		null;
 
diff --git a/experiments/WebUI/src/components/content/MissionPlanner.js b/experiments/WebUI/src/components/content/MissionPlanner.js
deleted file mode 100644
index bbd6d59..0000000
--- a/experiments/WebUI/src/components/content/MissionPlanner.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { StyleSheet, css } from 'aphrodite';
-
-import MissionTreeViewComponent from './MissionTreeViewComponent';
-
-import '../../assets/MissionPlanner.css';
-
-
-class MissionPlanner extends React.Component {
-	constructor(props, context) {
-		super(props, context);
-
-	}
-
-
-	render() {
-
-		return (
-			<div className="MissionPlannerContainer">
-				<MissionTreeViewComponent management={this.props.management} selectMissionPointFunc={this.props.selectMissionPointFunc} viewMissionFunc={this.props.viewMissionFunc} missions={this.props.missions} editedMissions={this.props.editedMissions}/>
-			</div>
-		);
-	}
-}
-
-export default MissionPlanner;
diff --git a/experiments/WebUI/src/components/content/MissionTreeViewComponent.js b/experiments/WebUI/src/components/content/MissionTreeViewComponent.js
index 93fdc39..0dc4dd1 100644
--- a/experiments/WebUI/src/components/content/MissionTreeViewComponent.js
+++ b/experiments/WebUI/src/components/content/MissionTreeViewComponent.js
@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-class CursorPositionComponent extends React.Component {
+class MissionTreeViewComponent extends React.Component {
 	constructor(props, context) {
 		super(props, context);
 
@@ -210,4 +210,4 @@ class CursorPositionComponent extends React.Component {
 	}
 }
 
-export default CursorPositionComponent;
+export default MissionTreeViewComponent;