Merge pull request #31 from org-arl/mission-planner

Mission planner

Author: ngyewch

experiments/WebUI/src/assets/App.css

@@ -150,6 +150,9 @@
 
 .dropdown_styles:hover .dropdown_content {display: block;}
 
+.mission_options{
+	margin-left: 15px;
+}
 /******* DrawGeoFence styles *******/
 .drawGeoFence_styles{
 	position: relative;

experiments/WebUI/src/assets/MissionPlanner.css

@@ -45,9 +45,22 @@ ul {
 	cursor: pointer;
 }
 
+.saveChangesBtn{
+	cursor: pointer;
+	margin-left: 10px;
+	color: green;
+}
+
+.discardChangesBtn{
+	cursor: pointer;
+	margin-left: 10px;
+	color: orange;
+}
+
 .deleteMissionBtn{
 	cursor: pointer;
-	margin-left: 20px;
+	margin-left: 10px;
+	color: red;
 }
 
 .cancelAddMissionBtn{
@@ -63,3 +76,13 @@ ul {
 	color: green;
 	font-size: 1.3em;
 }
+
+.AddMissionPointComment{
+	font-size: 0.75em;
+	color: #666;
+}
+
+.editedMission{
+	color: red;
+	font-size: 1.5em;
+}

experiments/WebUI/src/components/content/MLegInfoComponent.js

@@ -18,27 +18,30 @@ const styles = StyleSheet.create({
 class MLegInfoComponent extends React.Component {
 	constructor(props, context) {
 		super(props, context);
-		// // Make deep copy of missionLeg object so that changes dont get saved instantly.
-		// var missionLeg = JSON.parse(JSON.stringify(this.props.missionLeg));
+
 		this.state = {
 			missionLeg: this.props.missionLeg,
-			editMode: this.props.editMode
+			editedMissions: this.props.editedMissions
 		}
 	}
 
 	componentDidUpdate(prevProps) {
 		if (prevProps.missionLeg !== this.props.missionLeg) {
-			// console.log(this.state.missionLeg);
 
-			// // Make deep copy of missionLeg object so that changes dont get saved instantly.
-			// var missionLeg = JSON.parse(JSON.stringify(this.props.missionLeg));
 			this.setState({
 				missionLeg: this.props.missionLeg,
-				editMode: this.props.editMode
 			});
 		}
 	}
 
+	modifyEditedMissionsArr(){
+		var editedMissions = this.state.editedMissions;
+		editedMissions[this.props.missionIndex - 1] = 1;
+		this.setState({
+			editedMissions: editedMissions
+		});
+	}
+
 	onPropertyChange(e) {
 		var missionLeg = this.state.missionLeg;
 		// console.log(e.target.value);
@@ -51,6 +54,7 @@ class MLegInfoComponent extends React.Component {
 			missionLeg: missionLeg
 		});
 
+		this.modifyEditedMissionsArr();
 		this.props.refreshMissionMarkersFunc(this.props.missionIndex-1);
 	}
 
@@ -60,6 +64,7 @@ class MLegInfoComponent extends React.Component {
 		this.setState({
 			missionLeg: missionLeg
 		});
+		this.modifyEditedMissionsArr();
 	}
 
 	onPayloadChange(e) {
@@ -68,23 +73,9 @@ class MLegInfoComponent extends React.Component {
 		this.setState({
 			missionLeg: missionLeg
 		});
+		this.modifyEditedMissionsArr();
 	}
 
-	// saveChanges() {
-	// 	// creating a copy of the state.missionLeg and then assigning it to props.missionLeg to prevent further direct modification to props.missionLeg which would have pointed to state.missionLeg due to assign.
-	// 	Object.assign(this.props.missionLeg, JSON.parse(JSON.stringify(this.state.missionLeg)));
-	// 	// console.log(this.props.missionIndex);
-	// 	this.props.refreshMissionMarkersFunc(this.props.missionIndex-1);
-	// }
-	//
-	// discardChanges() {
-	// 	var missionLeg = JSON.parse(JSON.stringify(this.props.missionLeg));
-	// 	this.setState({
-	// 		missionLeg: missionLeg,
-	// 		editMode: this.props.editMode
-	// 	});
-	// }
-
 	render() {
 		var propertyTableRows = [];
 		var paramTableRows = [];
@@ -120,19 +111,13 @@ class MLegInfoComponent extends React.Component {
 					(
 						<tr key={key}>
 							<td>{key}</td>
-							{/* <td><div contentEditable={this.props.editMode}>{params[key]}</div></td> */}
 							<td><FormControl name={key} onChange={(e) => this.onParamChange(e)} value={params[key]}></FormControl></td>
 						</tr>
 					);
 				}
 			}
 
 			payloadObject = this.state.missionLeg.payload;
-
-			// actionButtons = <div>
-			// 	<Button variant="success" onClick={() => this.saveChanges()}>Save Changes</Button>
-			// 	<Button variant="danger" onClick={() => this.discardChanges()}>Discard Changes</Button>
-			// </div>;
 		}
 
 		const Properties =