Skip to content

Commit

Permalink
Merge pull request #43 from org-arl/mission-planner
Browse files Browse the repository at this point in the history 
Mission planner
  • Loading branch information
@ngyewch
ngyewch authored Jul 23, 2020
2 parents 04d1467 + 3fb1e87 commit a4d2a5a
Show file tree
Hide file tree
Showing 11 changed files with 281 additions and 195 deletions.
63 changes: 0 additions & 63 deletions experiments/WebUI/src/assets/jc2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
19 changes: 16 additions & 3 deletions experiments/WebUI/src/components/content/DiagnosticsComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,18 @@ class DiagnosticsComponent extends React.Component {
this.gateway.subscribe(this.gateway.topic('org.arl.jc2.enums.C2Topics.VEHICLESTATUS'));
this.gateway.subscribe(this.gateway.topic('org.arl.jc2.enums.C2Topics.MISSIONSTATUS'));

const management = new Management(this.gateway);
this.management = new Management(this.gateway);

this.management.getVehicleId()
.then(vehicleId => {
console.log('vehicleId', vehicleId);
this.vehicleId = vehicleId;
})
.catch(reason => {
console.log('could not get vehicle ID', reason);
});

management.getHealth()
this.management.getHealth()
.then(response => {
// console.log(response);
this.setState({
Expand All @@ -66,7 +75,11 @@ class DiagnosticsComponent extends React.Component {
}

render() {
document.title = "Diagnostics";
if (this.vehicleId) {
document.title = this.vehicleId + " Diagnostics";
} else {
document.title = "Diagnostics";
}
// console.log(this.state.diagnostics);
var diagnosticsRows = [];
for (var i = 0; i < this.state.diagnostics.length; i++) {
Expand Down
17 changes: 16 additions & 1 deletion experiments/WebUI/src/components/content/GaugeDashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import D3BearingComponent from './D3BearingComponent';

import {FjageHelper} from "../../assets/fjageHelper.js";
import {Message, Performative} from '../../assets/fjage.js';
import { Management} from "../../assets/jc2.js";

import FrontIcon from '../../assets/img/submarine-front-view.svg';
import SideIcon from '../../assets/img/submarine-side-view.svg';
Expand Down Expand Up @@ -135,6 +136,16 @@ class GaugeDashboard extends React.Component {
console.log(msg);
}
});

this.management = new Management(this.gateway);
this.management.getVehicleId()
.then(vehicleId => {
console.log('vehicleId', vehicleId);
this.vehicleId = vehicleId;
})
.catch(reason => {
console.log('could not get vehicle ID', reason);
});
}
});
}
Expand All @@ -149,7 +160,11 @@ class GaugeDashboard extends React.Component {
}

render() {
document.title = "Dashboard";
if (this.vehicleId) {
document.title = this.vehicleId + " Dashboard";
} else {
document.title = "Dashboard";
}
const gaugeContainerStyle = {
padding: "10px",
margin: "5px",
Expand Down
115 changes: 95 additions & 20 deletions experiments/WebUI/src/components/content/MLegInfoComponent.js
View file
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down Expand Up @@ -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(
<tr>
<td>x</td>
<td><FormControl name="x" onChange={(e) => this.onPropertyChange(e)} value={this.state.missionLeg.mp.x}></FormControl></td>
</tr>
);
propertyTableRows.push(
<tr>
<td>y</td>
<td><FormControl name="y" onChange={(e) => this.onPropertyChange(e)} value={this.state.missionLeg.mp.y}></FormControl></td>
</tr>
);
propertyTableRows.push(
<tr>
<td>z</td>
<td><FormControl name="z" onChange={(e) => this.onPropertyChange(e)} value={this.state.missionLeg.mp.z}></FormControl></td>
</tr>
);

var missionPoint = this.state.missionLeg.mp;
for (var key in missionPoint) {
if (missionPoint.hasOwnProperty(key)) {
if (key === "x" || key === "y" || key === "z") {
propertyTableRows.push(
<tr>
<td>{key}</td>
<td><FormControl name={key} onChange={(e) => this.onPropertyChange(e)} value={this.state.missionLeg.mp[key]}></FormControl></td>
</tr>
);
}
}
}

// console.log(this.state.missionLeg);
var params = this.state.missionLeg.mp.params;
Expand All @@ -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(<option selected>{missionType}</option>);
} else {
MissionTypeOptions.push(<option>{missionType}</option>);
}
});

for (var key in missionTaskObject) {
if (missionTaskObject.hasOwnProperty(key)) {
if (key == "taskID") {
missionTaskTableRows.push(
<tr>
<td>Task Type</td>
<td>
<Form.Control as="select" onChange={(e) => this.onMissionTypeChange(e)}>
{MissionTypeOptions}
</Form.Control>
</td>
</tr>
);
} else if (key !== "mp" && key !== "payload") {
missionTaskTableRows.push(
<tr>
<td>{key}</td>
<td><FormControl name={key} onChange={(e) => this.onMissionTaskEdit(e)} value={this.state.missionLeg[key]}></FormControl></td>
</tr>
);
}
}
}
}

const Properties =
Expand Down Expand Up @@ -150,13 +208,27 @@ class MLegInfoComponent extends React.Component {
<div>
<FormControl onChange={(e) => this.onPayloadChange(e)} value={JSON.stringify(payloadObject, null, 0)}></FormControl>
</div>;

const MissionTask = <Table striped bordered hover>
<thead>
<tr>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
{missionTaskTableRows}
</tbody>
</Table>;

return (
<div className={css(styles.MLegInfoContainer)}>
<Tab.Container id="list-group-tabs-example" defaultActiveKey="#Parameters">
<ListGroup horizontal>
<ListGroup.Item action href="#Property">Property</ListGroup.Item>
<ListGroup.Item action href="#Parameters">Parameters</ListGroup.Item>
<ListGroup.Item action href="#Payload">Payload</ListGroup.Item>
<ListGroup.Item action href="#MissionTask">Mission Task</ListGroup.Item>
</ListGroup>

<Tab.Content>
Expand All @@ -169,6 +241,9 @@ class MLegInfoComponent extends React.Component {
<Tab.Pane eventKey="#Payload">
{Payload}
</Tab.Pane>
<Tab.Pane eventKey="#MissionTask">
{MissionTask}
</Tab.Pane>
</Tab.Content>
</Tab.Container>
{/* {actionButtons} */}
Expand Down
Loading

0 comments on commit a4d2a5a

Please sign in to comment.