Interactive map

React/SwarmPlanner/src/App.js

@@ -6,12 +6,17 @@ import BodyAgentView from './components/BodyAgentView';
 import BodyClusterControl from './components/BodyClusterControl';
 import BodySwarmConfig from './components/BodySwarmConfig';
 import BodyParameterControl from './components/BodyParameterControl';
+import { createContext } from "react";
+import LocationStore from './classes/LocationStore'
 
+export const LocationContext = createContext();
 
 class App extends React.Component {
+
   constructor(props) {
     super(props)
-    this.state = {body: "SwarmOverview", checkedAgents: [''], ignoreComps: []}
+    this.state = {body: "SwarmOverview", checkedAgents: [''], ignoreComps: [], LocationStore: new LocationStore()}
+
   }
 
   removeAgent= (input) => {
@@ -42,15 +47,15 @@ class App extends React.Component {
   }
 
   render() {
-
     const body = this.getBody();
-
     return (
-      <div>
-        <Header buttonFcn={this.updateBody} selected={this.state.body} />
-        <LeftSideBar />
-        {body}
-      </div>
+      <LocationContext.Provider value={this.state.LocationStore}>
+        <div>
+          <Header buttonFcn={this.updateBody} selected={this.state.body} />
+          <LeftSideBar />
+          {body}
+        </div>
+      </LocationContext.Provider>
     );
   }
 }

React/SwarmPlanner/src/classes/LocationStore.js

@@ -0,0 +1,15 @@
+class LocationStore {
+  globalPinLocationX =  1;
+  globalPinLocationY = 1;
+
+  setLocation = (X, Y) => {
+    this.globalPinLocationX = X;
+    this.globalPinLocationY = Y;
+  }
+}
+
+export default LocationStore
+
+//Used for storing global locations using React Context.
+//Currently used for Google Map Pin Locations
+

React/SwarmPlanner/src/components/BodyAgentView.js

@@ -57,7 +57,6 @@ class BodyAgentView extends React.Component {
                     <MapContainer agents={this.state.agentList}/>
                 </div>
             </div>
-
         );
     }
 }

React/SwarmPlanner/src/components/Header.js

@@ -5,6 +5,7 @@ import '../styles/Header.css'
 import Swarm from '../resources/images/swarm.svg'
 import Path from '../resources/images/location-path.svg'
 import tool from '../resources/images/wrench.svg'
+import paramIcon from '../resources/images/parameter-icon.svg'
 
 
 class Header extends React.Component {
@@ -36,7 +37,7 @@ class Header extends React.Component {
                     <TabButton image={Swarm} class={swarmOverviewStyle} title="SwarmOverview" buttonFcn={this.props.buttonFcn} message="Overview"/>
                     <TabButton image={Path} class={clusterControlStyle} title="ClusterControl" buttonFcn={this.props.buttonFcn} message="Mission"/>
                     <TabButton image={tool} class={swarmConfigStyle} title="SwarmConfig" buttonFcn={this.props.buttonFcn} message="Setup"/>
-                    <TabButton image={tool} class={swarmConfigStyle} title="ParameterControl" buttonFcn={this.props.buttonFcn} message="Parameters"/>
+                    <TabButton image={paramIcon} class={swarmConfigStyle} title="ParameterControl" buttonFcn={this.props.buttonFcn} message="Parameters"/>
 
                 </div>
                 <div>

React/SwarmPlanner/src/components/MapContainer.js

@@ -1,54 +1,84 @@
-import React from 'react'
+import React, { useState, useContext } from 'react';
 import { GoogleMap, LoadScript, MarkerF } from '@react-google-maps/api';
-import droneIcon from '../resources/images/Simple_drone_small.svg'
-
-class MapContainer extends React.Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            center: { lat: 40.84667, lng: -96.471667}
-        }
-    }
-
-  render() {
-    const mapStyles = {        
-        height: "92vh",
-        width: "100%"};
-
-      const defaultCenter = {
-        lat: 40.84667, lng: -96.471667
-      }
-
-      const agentMarkers = this.props.agents.map( (currentAgent) => {
-        return(
-            <MarkerF label={currentAgent.agentId} icon={droneIcon} position={ {lat: currentAgent.latitude, lng: currentAgent.longitude} }/>
-        )
-      })
-
-      const debug = <MarkerF label={'2'} icon={droneIcon} position={ {lat: 40.847, lng: -96.471667} }/>
+import droneIcon from '../resources/images/Simple_drone_small.svg';
+import pinIcon from '../resources/images/DroppedPin.svg';
+import { LocationContext } from '../App'
+
+//Converted to Functional Component
+
+const MapContainer = (props) => {
+  const locationStore = useContext(LocationContext);
+
+  const [center, setCenter] = useState({ lat: 40.84667, lng: -96.471667 });
+  const [pin, setPin] = useState({ pinLat: 40.847, pinLng: -96.471667 });
+
+  const updatePinLocation = (newLat, newLng) => {
+    setPin({ pinLat: newLat, pinLng: newLng });
+    locationStore.setLocation(newLat, newLng)
+  };
+
+  const mapStyles = {
+    height: '92vh',
+    width: '100%',
+  };
+
+  const defaultCenter = {
+    lat: 40.84667,
+    lng: -96.471667,
+  };
+
+  const agentMarkers = props.agents.map((currentAgent) => (
+    <MarkerF
+      key={currentAgent.agentId}
+      label={currentAgent.agentId}
+      icon={droneIcon}
+      position={{ lat: currentAgent.latitude, lng: currentAgent.longitude }}
+    />
+  ));
+
+  const debugDrone = (
+    <MarkerF
+      label="2"
+      icon={droneIcon}
+      position={{ lat: 40.847, lng: -96.471667 }}
+    />
+  );
+
+  const { pinLat, pinLng } = pin;
+
+  const locationPin = (
+    <MarkerF
+      position={{ lat: pinLat, lng: pinLng }}
+      onClick={(ev) => {
+        fetch(`http://127.0.0.1:8080/goto/${pinLat}/${pinLng}/10`);
+        console.log('Sending to: ', pinLat, pinLng);
+      }}
+    />
+  );
 
     return (
-        <LoadScript
-        googleMapsApiKey='AIzaSyBRiYN7lAj3e95teCCoKSSCYHrVAKxmobE'>
-            <GoogleMap 
-                    mapContainerStyle={mapStyles} 
-                    zoom={18} 
-                    center={this.state.center} 
-                    mapTypeId='satellite'
-                    onRightClick={ev => {
-                      fetch('http://127.0.0.1:8080/debug_vector/C1$9/' + (ev.latLng.lat() + '/') + (ev.latLng.lng() + '/') + "0" );
-                            console.log("latitide = ", ev.latLng.lat());
-                            console.log("longitude = ", ev.latLng.lng());
-                            this.setState({ center: {lat: ev.latlng.lat() ,lng:ev.latlng.lng() } })
-                            fetch('http://127.0.0.1:8080/debug_vector/C1$4/' + '')
-                        }}
-                    >
-            {agentMarkers}
-            </GoogleMap>
-        </LoadScript>
-    )
-  }
-
-}
-
-export default MapContainer;
+      <LoadScript googleMapsApiKey="AIzaSyBRiYN7lAj3e95teCCoKSSCYHrVAKxmobE">
+        <GoogleMap
+          mapContainerStyle={mapStyles}
+          zoom={18}
+          center={center}
+          mapTypeId="satellite"
+          onClick={(ev) => {
+            fetch(
+              `http://127.0.0.1:8080/debug_vector/C1$9/${ev.latLng.lat()}/${ev.latLng.lng()}/0`
+            );
+            console.log('latitide = ', ev.latLng.lat());
+            console.log('longitude = ', ev.latLng.lng());
+            updatePinLocation(ev.latLng.lat(), ev.latLng.lng());
+            fetch('http://127.0.0.1:8080/debug_vector/C1$4/');
+          }}
+        >
+          {agentMarkers}
+          {locationPin}
+          {debugDrone}
+        </GoogleMap>
+      </LoadScript>
+    );
+};
+
+export default MapContainer;

React/SwarmPlanner/src/components/ThreeValueInput.js

@@ -1,45 +1,57 @@
-import React from 'react'
+import React, { useState } from 'react'
 import '../styles/AgentStatusCard.css'
 import '../styles/ThreeValueInput.css'
 import '../styles/ButtonStyles.css'
 import '../styles/TextStyles.css'
+import { useContext } from "react";
+import { LocationContext } from '../App'
 
-class ThreeValueInput extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {x: 0, y: 0, z: 0}
-    }
+//Converted to Functional Component
+
+const ThreeValueInput = (props) => {
+    const locationStore = useContext(LocationContext);
 
-    handleChangeX = (event) => {
-        this.setState({x: event.target.value})
+    const [x, setX] = useState(0);
+    const [y, setY] = useState(0);
+    const [z, setZ] = useState(0);
+
+    //Updates State if user input value X
+    const handleChangeX = (event) => {
+        setX(event.target.value)
+        locationStore.setLocation(event.target.value, y)
+    }
+
+    //Updates State if user input value Y
+    const handleChangeY = (event) => {
+        locationStore.setLocation(x, event.target.value)
+        setY(event.target.value)
     }
 
-    handleChangeY = (event) => {
-        this.setState({y: event.target.value})
+    const handleChangeZ = (event) => {
+        setZ(event.target.value)
     }
 
-    handleChangeZ = (event) => {
-        this.setState({z: event.target.value})
+    //Update State based off pin location
+    const updatePlaceHolders = () => {
+        setX(locationStore.globalPinLocationX);
+        setY(locationStore.globalPinLocationY);
     }
-    render() {
-        const handleClick = this.props.buttonFcn;
-
+
+    const handleClick = props.buttonFcn;
         return(
             <div className="AgentStatusCardSection-Regular">
-
-                {/* <label class="PanelSubLabel" for="X">X: </label> */}
-                <input placeholder="X" id='x' onChange={this.handleChangeX} className="TextInput" type="text"></input>
-{/* 
-                <label class="PanelSubLabel" for="Y">Y: </label> */}
-                <input placeholder="Y" id='y' onChange={this.handleChangeY} className="TextInput" type="text"></input>
-
-                {/* <label class="PanelSubLabel" for="Z">Z: </label> */}
-                <input placeholder="Z" id='z' onChange={this.handleChangeZ} className="TextInput" type="text"></input>
-                <button className="SendButton" onClick={()=>{handleClick(this.state.x, this.state.y, this.state.z)}}>SEND</button>
+            {/* <label class="PanelSubLabel" for="X">X: </label> */}
+            <input placeholder={'X'} id='x' value={x} onChange={handleChangeX} className="TextInput" type="text"></input>
+            {/* 
+            <label class="PanelSubLabel" for="Y">Y: </label> */}
+            <input placeholder={'Y'} id='y' value={y} onChange={handleChangeY} className="TextInput" type="text"></input>
+
+            {/* <label class="PanelSubLabel" for="Z">Z: </label> */}
+            <input placeholder="Z" id='z' onChange={handleChangeZ} className="TextInput" type="text"></input>
+            <button className="SendButton" onClick={()=>{handleClick(x,y,z)}}>SEND</button>
+            <button className="SendButton" onClick={updatePlaceHolders}>Pin</button>
             </div>
-
         );
     }
-}
 
 export default ThreeValueInput;

React/SwarmPlanner/src/index.js

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 
+console.log("const");
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>