Allow user to click the missionPt at map to highlight the missionPt i…

…n the mission panel
org-arl · Jul 15, 2020 · 5d5262c · 5d5262c
1 parent f1d52cb
commit 5d5262c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 31 deletions.
diff --git 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
diff --git 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;