Add vehicle name to windows and allow user to close child windows.

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

@@ -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({
@@ -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++) {

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

@@ -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';
@@ -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);
+					});
             }
         });
     }
@@ -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",

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

@@ -216,6 +216,7 @@ class MapComponent extends React.Component {
 					.then(vehicleId => {
 						console.log('vehicleId', vehicleId);
 						this.vehicleId = vehicleId;
+						document.title = vehicleId + " StarControl";
 					})
 					.catch(reason => {
 						console.log('could not get vehicle ID', reason);
@@ -496,6 +497,16 @@ class MapComponent extends React.Component {
 		var w = window.open(url, tab, "width=600,height=600,menubar=0,toolbar=0,location=0,personalBar=0,status=0,resizable=1").focus();
 	}
 
+	closeAllChildWindows(){
+		var windowsArr = ["Dashboard", "Diagnostics", "Sentuators", "ScriptControl"];
+		windowsArr.forEach((tab) => {
+			const href = window.location.href;
+			const url = href.substring(0, href.lastIndexOf('/') + 1) + tab;
+			var w = window.open(url, tab, "width=600,height=600,menubar=0,toolbar=0,location=0,personalBar=0,status=0,resizable=1");
+			w.close();
+		});
+	}
+
 	checkCollinear(pointArray, point) {
 		// epsilon accounts for the error in checking if a point is collinear. Larger epsilon will result in wider range of points getting accepted as collinear(even those that lie further from the line segment).
 		var epsilon = 0.0000005;
@@ -785,6 +796,9 @@ class MapComponent extends React.Component {
 								{missionList}
 							</div>
 						</div>
+
+						<Button type="submit" onClick={this.closeAllChildWindows}><FontAwesomeIcon icon={faWindowClose} title="Close all Child Windows"/></Button>
+
 						<Button type="submit" onClick={this.recentreMap}><FontAwesomeIcon icon={faCrosshairs}  title="Re-center Map"/></Button>
 						<Button type="submit" active={this.state.displayGeoFence} onClick={this.toggleGeoFence}><img title="Toggle Geofence" src={fenceIcon} height={20} width={20}/></Button>
 						<Button type="submit" active={this.state.displayMissionPts} onClick={this.toggleMissionPts}><img title="Toggle Mission Points" src={missionPtsIcon} height={25} width={25}/></Button>

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

@@ -76,6 +76,15 @@ class ScriptControl extends React.Component {
 
 				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);
+					});
+
 				this.management.getScript()
 				.then(script => {
 					// console.log('script', script);
@@ -194,8 +203,11 @@ class ScriptControl extends React.Component {
 	}
 
 	render() {
-		document.title = "Script Control";
-
+		if (this.vehicleId) {
+			document.title = this.vehicleId + " Script Control";
+		} else {
+			document.title = "Script Control";
+		}
 		var subroutines = this.getSubroutines();
 		var subroutineOptions = [];
 		subroutines.forEach((subroutine, i) => {

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

@@ -29,6 +29,15 @@ class SentuatorsComponent extends React.Component {
 			if (connected) {
 				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);
+					});
+
 				this.management.getSentuators()
 				.then(response => {
 					// console.log(response);
@@ -88,7 +97,11 @@ class SentuatorsComponent extends React.Component {
 	}
 
 	render() {
-		document.title = "Sentuators";
+		if (this.vehicleId) {
+			document.title = this.vehicleId + " Sentuators";
+		} else {
+			document.title = "Sentuators";
+		}
 		var selectOptions = [];
 
 		const tick = <FontAwesomeIcon icon={faCheck} color="green" />;

experiments/WebUI/src/components/sidebar/SidebarComponent.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Row, Container, Button } from 'react-bootstrap';
 import { StyleSheet, css } from 'aphrodite';
-// import MenuItemComponent from './MenuItemComponent';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSlidersH } from '@fortawesome/free-solid-svg-icons';