From 3fb1e87065f79a006a6525fbd11f1dad93de525e Mon Sep 17 00:00:00 2001 From: yashdeep97 Date: Wed, 22 Jul 2020 20:36:07 +0530 Subject: [PATCH] Allow user to change mission type --- experiments/WebUI/src/assets/jc2.js | 63 ---------- .../components/content/MLegInfoComponent.js | 115 +++++++++++++++--- .../src/components/content/MapComponent.js | 104 ++++++++++++++-- .../content/MissionTreeViewComponent.js | 13 +- 4 files changed, 199 insertions(+), 96 deletions(-) diff --git a/experiments/WebUI/src/assets/jc2.js b/experiments/WebUI/src/assets/jc2.js index f820ab7..db42c5b 100644 --- a/experiments/WebUI/src/assets/jc2.js +++ b/experiments/WebUI/src/assets/jc2.js @@ -639,66 +639,3 @@ export class UpdateMissionReq extends AbstractRequest { super('org.arl.jc2.messages.management.UpdateMissionReq', params); } } - - -//*************** Classes for different Mission types *************** - -export class SimpleMT extends AbstractRequest { - - /** - * Constructs an SimpleMT mission task. - * - * @param {Object} params parameters. - */ - constructor(params) { - super('org.arl.jc2.mtt.SimpleMT', params); - } -} - -export class LawnMowerMT extends AbstractRequest { - - /** - * Constructs an LawnMowerMT mission task. - * - * @param {Object} params parameters. - */ - constructor(params) { - super('org.arl.jc2.mtt.LawnMowerMT', params); - } -} - -export class StationKeepingMT extends AbstractRequest { - - /** - * Constructs an StationKeepingMT mission task. - * - * @param {Object} params parameters. - */ - constructor(params) { - super('org.arl.jc2.mtt.StationKeepingMT', params); - } -} - -export class SwanArmMT extends AbstractRequest { - - /** - * Constructs an SwanArmMT mission task. - * - * @param {Object} params parameters. - */ - constructor(params) { - super('org.arl.jc2.mtt.SwanArmMT', params); - } -} - -export class TargetLocMT extends AbstractRequest { - - /** - * Constructs an TargetLocMT mission task. - * - * @param {Object} params parameters. - */ - constructor(params) { - super('org.arl.jc2.mtt.TargetLocMT', params); - } -} diff --git a/experiments/WebUI/src/components/content/MLegInfoComponent.js b/experiments/WebUI/src/components/content/MLegInfoComponent.js index 928f27a..07feab7 100644 --- a/experiments/WebUI/src/components/content/MLegInfoComponent.js +++ b/experiments/WebUI/src/components/content/MLegInfoComponent.js @@ -1,7 +1,17 @@ import React from 'react'; import { StyleSheet, css } from 'aphrodite'; -import { Table, ListGroup, Tab, FormControl, Button } from 'react-bootstrap'; - +import { Table, ListGroup, Tab, FormControl, Button, Form } from 'react-bootstrap'; + +const MissionTypes = [ + "BioCastMT", + "CoopPosMT", + "LawnMowerMT", + "SimpleMT", + "StationKeepingMT", + "SwanArmMT", + "TargetLocMT", + "WaterSampleMT", +]; const styles = StyleSheet.create({ MLegInfoContainer: { @@ -76,32 +86,45 @@ class MLegInfoComponent extends React.Component { this.modifyEditedMissionsArr(); } + onMissionTaskEdit(e) { + var missionLeg = this.state.missionLeg; + this.state.missionLeg[e.target.name] = e.target.value; + this.setState({ + missionLeg: missionLeg + }); + this.modifyEditedMissionsArr(); + } + + onMissionTypeChange(e) { + // console.log(e.target.value); + this.props.changeMissionType(e.target.value); + this.modifyEditedMissionsArr(); + } + render() { var propertyTableRows = []; var paramTableRows = []; var payloadObject = {}; + var missionTaskTableRows = []; + // var actionButtons = null; if (this.state.missionLeg !== null) { //Property table - TODO currently hard coded, find better way to do this. - propertyTableRows.push( - - x - this.onPropertyChange(e)} value={this.state.missionLeg.mp.x}> - - ); - propertyTableRows.push( - - y - this.onPropertyChange(e)} value={this.state.missionLeg.mp.y}> - - ); - propertyTableRows.push( - - z - this.onPropertyChange(e)} value={this.state.missionLeg.mp.z}> - - ); + + var missionPoint = this.state.missionLeg.mp; + for (var key in missionPoint) { + if (missionPoint.hasOwnProperty(key)) { + if (key === "x" || key === "y" || key === "z") { + propertyTableRows.push( + + {key} + this.onPropertyChange(e)} value={this.state.missionLeg.mp[key]}> + + ); + } + } + } // console.log(this.state.missionLeg); var params = this.state.missionLeg.mp.params; @@ -118,6 +141,41 @@ class MLegInfoComponent extends React.Component { } payloadObject = this.state.missionLeg.payload; + var MissionTypeOptions = []; + + var missionTaskObject = this.state.missionLeg; + var selectedType = missionTaskObject.taskID.substring(0, missionTaskObject.taskID.indexOf("MT") + 2); + MissionTypes.forEach((missionType) => { + if (missionType === selectedType) { + MissionTypeOptions.push(); + } else { + MissionTypeOptions.push(); + } + }); + + for (var key in missionTaskObject) { + if (missionTaskObject.hasOwnProperty(key)) { + if (key == "taskID") { + missionTaskTableRows.push( + + Task Type + + this.onMissionTypeChange(e)}> + {MissionTypeOptions} + + + + ); + } else if (key !== "mp" && key !== "payload") { + missionTaskTableRows.push( + + {key} + this.onMissionTaskEdit(e)} value={this.state.missionLeg[key]}> + + ); + } + } + } } const Properties = @@ -150,6 +208,19 @@ class MLegInfoComponent extends React.Component {
this.onPayloadChange(e)} value={JSON.stringify(payloadObject, null, 0)}>
; + + const MissionTask = + + + + + + + + {missionTaskTableRows} + +
NameValue
; + return (
@@ -157,6 +228,7 @@ class MLegInfoComponent extends React.Component { Property Parameters Payload + Mission Task @@ -169,6 +241,9 @@ class MLegInfoComponent extends React.Component { {Payload} + + {MissionTask} + {/* {actionButtons} */} diff --git a/experiments/WebUI/src/components/content/MapComponent.js b/experiments/WebUI/src/components/content/MapComponent.js index 20b6a05..5f53733 100644 --- a/experiments/WebUI/src/components/content/MapComponent.js +++ b/experiments/WebUI/src/components/content/MapComponent.js @@ -9,7 +9,7 @@ import '../../assets/MissionPlanner.css'; import CoordSys from '../../assets/CoordSys.js'; import { FjageHelper } from "../../assets/fjageHelper.js"; -import { Management, TargetLocMT } from "../../assets/jc2.js"; +import { Management } from "../../assets/jc2.js"; import { mapPin, mapPinSelected, readyMarker, notReadyMarker } from "../../assets/MapIcons.js"; // import ManualCommands from '../../assets/ManualCommands.js'; import ToolbarComponent from '../ToolbarComponent'; @@ -66,13 +66,27 @@ function MissionTask() { this.payload = {}; } -function SimpleMT() { - this.taskID = "SimpleMT"; - this.endHeading = 0.0; +function BioCastMT() { + this.taskID = "BioCastMT"; + this.SourceSLevel = 0.0; + this.mtTime = 0; + this.resamplingTime = 0; + this.sourceX = 0.0; + this.sourceY = 0.0; + MissionTask.call(this); +} + +function CoopPosMT() { + this.taskID = "CoopPosMT"; + this.lookAheadLevel = []; + this.missionNum = []; + this.numOfSurveyAuv = 0; + this.posInterval = []; + this.vehicleID = []; MissionTask.call(this); } -function LawnMoverMT() { +function LawnMowerMT() { this.taskID = "LawnMoverMT"; this.xLength = 0.0; this.yLength = 0.0; @@ -81,6 +95,38 @@ function LawnMoverMT() { MissionTask.call(this); } +function SimpleMT() { + this.taskID = "SimpleMT"; + this.endHeading = 0.0; + MissionTask.call(this); +} + +function StationKeepingMT() { + this.taskID = "StationKeepingMT"; + this.duration = 0.0; + MissionTask.call(this); +} + +function SwanArmMT() { + this.taskID = "SwanArmMT"; + this.armDepth = {}; + this.missionTaskTimeout = {}; + this.reposeBehavior = {}; + MissionTask.call(this); +} + +function TargetLocMT() { + this.taskID = "TargetLocMT"; + this.mtTimeOut = 0; + MissionTask.call(this); +} + +function WaterSampleMT() { + this.taskID = "WaterSampleMT"; + this.armDepth = 0.0; + MissionTask.call(this); +} + class MapComponent extends React.Component { constructor(props, context) { super(props, context); @@ -173,6 +219,8 @@ class MapComponent extends React.Component { this.abortMission = this.abortMission.bind(this); this.stationKeep = this.stationKeep.bind(this); this.goHome = this.goHome.bind(this); + + this.changeMissionType = this.changeMissionType.bind(this); } componentDidMount() { @@ -303,9 +351,6 @@ class MapComponent extends React.Component { positionError: this.state.positionError - 1 })}, 200); - - var x = new TargetLocMT(); - console.log(x); } componentDidUpdate() { @@ -596,7 +641,6 @@ class MapComponent extends React.Component { } dragEndGeoFenceMarker(e) { - // console.log(e); var newlat = e.target._latlng.lat; var newlng = e.target._latlng.lng; var oldlat = e.target.options.position[0]; @@ -685,6 +729,46 @@ class MapComponent extends React.Component { this.management.abortToHome(); } + changeMissionType(missionLegIndex, newType) { + var currentMissionArr = this.state.currentMission; + + var constructorName = newType + "()"; + // var mission_task = new window[constructorName](); + var mission_task; + if (newType === "BioCastMT") { + mission_task = new BioCastMT(); + } else if (newType === "CoopPosMT") { + mission_task = new CoopPosMT(); + } else if (newType === "LawnMowerMT") { + mission_task = new LawnMowerMT(); + } else if (newType === "StationKeepingMT") { + mission_task = new StationKeepingMT(); + } else if (newType === "SwanArmMT") { + mission_task = new SwanArmMT(); + } else if (newType === "TargetLocMT") { + mission_task = new TargetLocMT(); + } else if (newType === "WaterSampleMT") { + mission_task = new WaterSampleMT(); + } else { + mission_task = new SimpleMT(); + } + + var missions = this.state.missions; + console.log(mission_task); + var oldMissionTask = missions[this.state.missionNumber][missionLegIndex - 1]; + console.log(oldMissionTask); + + mission_task.mp = oldMissionTask.mp; + mission_task.payload = oldMissionTask.payload; + + + missions[this.state.missionNumber][missionLegIndex - 1] = mission_task; + + this.setState({ + missions: missions + }); + } + render() { const position = [this.state.vehiclePosition.latitude, this.state.vehiclePosition.longitude]; const mapCenter = [this.state.mapCenter.latitude, this.state.mapCenter.longitude]; @@ -767,7 +851,7 @@ class MapComponent extends React.Component { const MissionPlannerPanels = (this.state.MissionPlannerEnabled) ? - + : null; diff --git a/experiments/WebUI/src/components/content/MissionTreeViewComponent.js b/experiments/WebUI/src/components/content/MissionTreeViewComponent.js index 0dc4dd1..26bab55 100644 --- a/experiments/WebUI/src/components/content/MissionTreeViewComponent.js +++ b/experiments/WebUI/src/components/content/MissionTreeViewComponent.js @@ -34,6 +34,8 @@ class MissionTreeViewComponent extends React.Component { selectedMLeg: 0 } + this.changeMissionType = this.changeMissionType.bind(this); + } selectMission(index) { @@ -55,6 +57,7 @@ class MissionTreeViewComponent extends React.Component { } selectMleg(index) { + // console.log(index); this.setState({ selectedMLeg: index }); @@ -148,6 +151,10 @@ class MissionTreeViewComponent extends React.Component { this.props.viewMissionFunc(missionNumber); } + changeMissionType(newType){ + this.props.changeMissionType(this.state.selectedMLeg, newType); + } + render() { var missionList = []; @@ -161,8 +168,8 @@ class MissionTreeViewComponent extends React.Component { mission.forEach((missionLeg, j) => { var activeMleg = (this.state.selectedMLeg == j+1) ? "active" : "" ; missionLegList.push( - - this.selectMleg(j+1)}>{missionLeg.taskID.substring(0, missionLeg.taskID.indexOf("MT") + 2)} : {missionLeg.mp.x.toFixed(2)}, {missionLeg.mp.y.toFixed(2)}, {missionLeg.mp.z.toFixed(2)} + this.selectMleg(j+1)}> + {missionLeg.taskID.substring(0, missionLeg.taskID.indexOf("MT") + 2)} : {missionLeg.mp.x.toFixed(2)}, {missionLeg.mp.y.toFixed(2)}, {missionLeg.mp.z.toFixed(2)} this.deleteMissionPt(i,j)} title="Delete Mission Point"/> ); @@ -204,7 +211,7 @@ class MissionTreeViewComponent extends React.Component { {missionList}
- + ); }