ADD: added debug webseit und fixed some bugs

webapp/src/App.jsx

@@ -10,6 +10,7 @@ import Gateway from "./components/Gateway";
 import Database from "./components/Database";
 import Scenarios from "./components/Scenarios";
 import Settings from "./components/Settings";
+import Debug from "./components/Debug";
 
 
 export const defaultLocale = "en-US";
@@ -21,6 +22,8 @@ const App = () => {
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<SimControl />} />
+        <Route path="/debug" element={<Debug />} />
+
         <Route path="/scenarios" element={<Scenarios />} />
         <Route path="/database" element={<Database />} />
         <Route path="/gateway" element={<Gateway />} />

webapp/src/components/Debug/Debug.jsx

@@ -0,0 +1,132 @@
+import React from "react";
+import {w3cwebsocket as W3CWebSocket} from "websocket"
+import MyMap from "./components/map/map.jsx"
+import PerceivedTruth from "./components/perceivedTruth/perceivedTruth.jsx";
+import "./Debug.scss"
+import { useEffect, useState } from 'react'
+import { getCOP,loadAutoraster } from "../api/APICalls";
+
+import TrackListClass  from "../SimControl/Tracklist.tsx";
+
+
+const config = {
+    // apiUrl: process.env.REACT_APP_WEBAPP_WS_URL,
+    apiUrl: "192.168.3.13",
+    apiProt: 30747
+    }
+    let client = null;
+// let  client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
+
+function Scenarios()
+{
+  const [trackList, settrackList] = useState([]);
+  const [clientConnected, setclientConnected] = useState(false);
+  // const [client, setclient] = useState(W3CWebSocket);
+
+
+
+
+
+
+React.useEffect(() => {
+  client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
+  
+  client.onopen = () => {
+    console.log("Websocket Client for Debug Component");
+    setclientConnected(true)
+  };
+  console.log(`initializing interval`);
+  const interval = setInterval(() => {
+    updateEntities();
+  }, 1000);
+
+  return () => {
+    console.log(`clearing interval`);
+    clearInterval(interval);
+    client.close();
+    client = null;
+  };
+
+ 
+}, []); // has no dependency - this will be called on-component-mount
+
+useEffect(() => {
+  client.onmessage = (message) => {
+    if(message.data !== "null")
+    {
+
+      const dataFromServer = JSON.parse(message.data);
+      // console.log(dataFromServer);
+      if(dataFromServer.Data === "COP")
+      {
+        settrackList(dataFromServer.Entities);
+      }else
+      {
+        console.log(message.data);
+      }
+      
+    }
+    else{
+      console.log(message);
+    }
+  }
+});
+
+function  updateEntities() 
+{
+  // var msg = 
+  // {
+  //   Type: "Request",
+  //   Data: "COP"
+    
+  // }
+    
+    client.send(getCOP());
+  
+}
+
+
+
+const sendSampleMessage = () =>
+{
+    var msg = 
+    {
+      Data: "TEST",
+      Type: "Save",
+    }
+    console.log(msg);
+  client.send(JSON.stringify(msg));
+
+}
+
+const startSampleScenario = () =>
+{
+ 
+  client.send(loadAutoraster());
+
+}
+
+
+return(
+    <>
+    {/* <div><button onClick={sendSampleMessage}> Save Scenario</button></div>
+    <div><button onClick={startSampleScenario}> Sample Scenario</button></div> */}
+    <div className="Container">
+
+      <div className="InfoPane" >
+      <p>Debug</p>
+        <PerceivedTruth Client={client}  Tracklist= {trackList} />
+      </div>
+      
+      <MyMap />
+
+    </div>
+
+    
+    </>      
+
+);
+
+}
+
+ export default Scenarios;

webapp/src/components/Debug/Debug.scss

@@ -0,0 +1,9 @@
+.Container
+{
+    display: flex;
+}
+
+.InfoPane{
+    width: 70%;
+    padding-left: 1rem
+}

webapp/src/components/Debug/components/map/map.jsx

@@ -0,0 +1,26 @@
+import { useLeafletContext } from '@react-leaflet/core'
+import { MapContainer, TileLayer} from 'react-leaflet'
+
+import L from 'leaflet'
+import { useEffect, useRef } from 'react'
+
+import "./map.scss"
+
+
+
+const center = [54, 8];
+
+function MyMap() {
+  return (
+        
+    <div className='Smallapmap' >
+      <MapContainer center={center} zoom={6} attributionControl={false}>
+        <TileLayer
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+      </MapContainer>
+    </div>
+  )
+
+}
+ export default MyMap;

webapp/src/components/Debug/components/map/map.scss

@@ -0,0 +1,9 @@
+.Smallapmap {
+    // display: flex;
+    // padding-top: 10px;
+    height: 500px;
+    width: 500px;
+    // padding-left: 20%;
+    display: inline-flex;
+    // height: 80%;
+  }

webapp/src/components/Debug/components/perceivedTruth/perceivedTruth.jsx

@@ -0,0 +1,85 @@
+import { useEffect, useState } from 'react'
+import { getWSTestMessage ,getTracklist } from '../../../api/APICalls';
+
+
+
+
+function PerceivedTruth(props)
+{
+
+  const [selectedOption, setSelectedOption] = useState('option1')
+  const [selectOptions, setSelectOptions] = useState([])
+
+  const [trackList, settrackList] = useState([]);
+  const [client, setclient] = useState()
+
+  const handleSubmit = (event) => {
+    if(selectedOption !==  "option1" && selectedOption !==  "" )
+    {
+        client.send(getTracklist(selectedOption));
+        event.preventDefault()
+        console.log(`Submitted selected option: ${selectedOption}`)
+
+    }
+  }
+
+  function prepareTracklistForSelect(Tracklist) 
+  {
+    if(Tracklist!== undefined)
+    {   
+        var options =  [];
+        Tracklist.forEach(element => {
+          
+            var item = 
+            {
+              value : element.id,
+              label : element.Name
+
+            };
+
+            options.push(item);
+        });
+
+        setSelectOptions(options);
+
+    }
+  } 
+
+
+  useEffect(() => {
+    //Runs on the first render
+    //And any time any dependency value changes
+    // console.log(props);
+    setclient(props.Client);
+    settrackList(props.Tracklist);
+    prepareTracklistForSelect(trackList);
+
+  }, [props]);
+  
+
+
+    return(
+        <div> 
+             <form onSubmit={handleSubmit}>
+      
+
+      <label htmlFor="my-select">Select Track:</label>
+    
+      <select
+        id="my-select"
+        value={selectedOption}
+        onChange={(event) => setSelectedOption(event.target.value)}
+      >
+        <option> </option>
+       {selectOptions.map((option, index) => (
+        <option  key={index} value={option.value} label={option.label} />
+      ))}  
+        
+      </select>
+
+      <button type="submit">Submit</button>
+    </form>
+
+        </div>
+    )}
+export default  PerceivedTruth;

webapp/src/components/Debug/index.js

@@ -0,0 +1,3 @@
+import Debug from "./Debug.jsx";
+
+export default Debug;

webapp/src/components/Header/header.jsx

@@ -18,6 +18,8 @@ function Header() {
             style={{ maxHeight: '100px' }}
             navbarScroll
           >
+            <Nav.Link href="debug">Debug</Nav.Link>
+
             <Nav.Link href="scenarios">Scenarios</Nav.Link>
             <Nav.Link href="database">Database</Nav.Link>
             <Nav.Link href="gateway">Gateway</Nav.Link>

webapp/src/components/SimControl/SimControl.jsx

@@ -14,6 +14,9 @@ import Track from "./Track.tsx";
 
 import './SimControl.scss'
 import EntityTrackList from "./components/EntityTrackList";
+import { getWSTestMessage } from "../api/APICalls";
+
+
 
 
 const config = {
@@ -33,6 +36,12 @@ class SimControl extends Component {
         TrackList_: new TrackListClass()
       }
 
+
+      componentWillUnmount()
+      {
+        // client.close();
+      }
+
       componentDidMount() {
         console.log(config.apiUrl);
      
@@ -111,13 +120,13 @@ class SimControl extends Component {
      
          updateEntities()
          {
-           var msg = 
+          //  var msg = 
-           {
+          //  {
-             Type: "Request",
+          //    Type: "Request",
-             Data: "COP"
+          //    Data: "COP"
          
-           }
+          //  }
-           client.send(JSON.stringify(msg));
+           client.send(getWSTestMessage());
          }
      
          getEntityFromID(Entities, SelectedEntity)
@@ -154,7 +163,7 @@ class SimControl extends Component {
          setFocusPosition(props)
          {
      
-           console.log(props);
+          //  console.log(props);
            this.setState({
              PositionClicked: props
            });

webapp/src/components/SimControl/components/EntityControl/EntityControl.jsx

@@ -97,7 +97,7 @@ function EntityControl(props)
         }else{
             console.log("reset");
             setFormData({name:"",course:"",speed:"",position:["",""],height:"" })
-
+            setEntity(undefined);
         }
         
 
@@ -109,7 +109,7 @@ function EntityControl(props)
         if(props.PositionClicked !== undefined)
         {   
             //  setEntity(undefined);
-             console.log(props.PositionClicked)
+            //  console.log(props.PositionClicked)
             var pos = [0,0];
             pos[0] = props.PositionClicked.lat;
             pos[1] = props.PositionClicked.lng

webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx

@@ -1,13 +1,12 @@
 
 // import { useMapEvents } from 'react-leaflet/hooks'
 import React, { Component } from "react";
-import { MapContainer, TileLayer,Marker, Popup, Tooltip,useMapEvents,contextmenu } from 'react-leaflet'
+import { MapContainer, TileLayer,Marker, Popup, Tooltip,useMapEvents } from 'react-leaflet'
-import { friend,Hostile, iconShip,createIcon } from "./icon";
+import { createIcon } from "./icon";
 import "./OpenSeaMap.scss";
-import {w3cwebsocket as W3CWebSocket} from "websocket";
+// import {w3cwebsocket as W3CWebSocket} from "websocket";
 // import ContainerDimensions  from 'react-container-dimensions';
 import {} from "leaflet-contextmenu";
-import TrackListCLass from "../../Tracklist.tsx";
 import Track from "../../Track.tsx";
 
 
@@ -35,6 +34,8 @@ class OpenSeaMap extends Component {
 
   }
 
+
+
   componentWillUnmount() {
     window.removeEventListener("resize", this.updateDimensions.bind(this))
   }
@@ -50,7 +51,7 @@ class OpenSeaMap extends Component {
   }
 
   markerOnClick(e) {
-    console.log(e);
+    // console.log(e);
   
   }
 
@@ -67,28 +68,30 @@ class OpenSeaMap extends Component {
     }))
     this.props.setEntityOnFocus(Track.Id);
 
-    // this.props.setEntityOnFocus(Ent)
-    // // this.draggable = true;
   }
 
-  deleteEntity(e)
+  deleteEntity(id)
   {
-    var Track = this.props.TrackList.getTrack(e.relatedTarget.options.data);
+    // console.log(id);
-    if(Track !== undefined)
+    try {
+    var msg = 
     {
-
+      Data: "Entity",
-      var msg = 
+      Type: "Delete",
-      {
+      ID: id,
-        Data: "Entity",
-        Type: "Delete",
-        ID: Track.Id,
-      }
-      console.log(JSON.stringify(msg));
-      this.props.Client.send(JSON.stringify(msg))
-      
-      this.forceUpdate();
     }
     
+      
+      this.props.TrackList.deteleTrack(id);
+      this.props.Client.send(JSON.stringify(msg))
+      this.forceUpdate();
+      
+    } catch (error) {
+        console.log(error);
+    } 
+
+   
+
   }
 
 
@@ -97,7 +100,11 @@ class OpenSeaMap extends Component {
     if(e !== undefined)
     {
       var Track = this.props.TrackList.getTrack(e.relatedTarget.options.data);
-      Track.isOnEdit = false;
+      if(Track !== undefined)
+      {
+        Track.isOnEdit = false;
+      }
+     
       console.log(Track);
     }
     this.props.setEntityOnFocus(undefined);
@@ -132,7 +139,7 @@ class OpenSeaMap extends Component {
 
     var icon = createIcon(entity.Type,entity.Side)
     return (
-      <Marker name={entity.Name}  key={index} icon={icon} position={entity.Position} data={entity.Id} 
+      <Marker name={entity.Name}  key={entity.Id} icon={icon} position={entity.Position} data={entity.Id} 
       draggable={isOnFocus? true : false}
       contextmenu={true}
       contextmenuWidth={140}
@@ -144,21 +151,7 @@ class OpenSeaMap extends Component {
       },{    
         text:"Delete",
         index: 1,
-        callback: this.deleteEntity.bind(this),
+        callback: this.deleteEntity.bind(this,entity.Id),
-
-        // callback: function() {
-        //   var msg = 
-        //   {
-        //     Data: "Entity",
-        //     Type: "Delete",
-        //     ID: entity.id,
-        //   }
-        //   console.log(JSON.stringify(msg));
-        //   props.Client.send(JSON.stringify(msg))
-        //   this.markerOnClick.bind(this)
-
-        // },
-        // separator: true,
     }, {
       text:"Test",
       callback: this.markerOnClick.bind(this),
@@ -173,19 +166,11 @@ class OpenSeaMap extends Component {
  
       eventHandlers={{
         click: (e) => {
-          console.log(e.target);  
+          console.log(entity.Name);
-          // var Ent = {
+          console.log(entity.id);  
-          //   EntityID :  e.target.options.data,
-          //   NewPos : undefined
      
-          // }
-          // this.setState((state) =>({
-          //   EntityOnFocus: Ent
-          // }))
-          // this.props.setEntityOnFocus(Ent);
           this.props.setEntityOnFocus(e.target.options.data)
 
-          // this.props.setEntityOnFocus(e.target.options.data);
         },
         dragend: this.setNewEntityPosition.bind(this),
         
@@ -193,15 +178,11 @@ class OpenSeaMap extends Component {
       // eventHandlers={this.MarkerEventHandler}
        >
 
-      {/* <Popup>
+     
-      Omu-Aran the Head Post of Igbomina land, 
-      is a town in the Nigerian state of Kwara. 
-      It originated from Ife and currently the local
-      government headquarters of Irepodun local government.
-    </Popup> */}
       <Tooltip direction='bottom' offset={[0,13]} opacity={1} permanent>
                        <span>{entity.Name}</span>
                 </Tooltip>
+      
     </Marker>
     );
   }
@@ -236,14 +217,11 @@ const  LocationFinderDummy = (props) => {
       //   this.state.EntityOnFocus = undefined;
        return null;
    };
-    // const positions = this.props.Positions.map((pos, index) => (
-    //   <Marker name={"test"} key={index} position={pos.position} icon= {ship} />
-    // ));
    
     return (
       
       <div className='map' style={{ height: this.state.height }} >
-       <MapContainer  center={[54, 11]} zoom={6} scrollWheelZoom={true} contextmenu={false}
+       <MapContainer  center={[54, 11]} zoom={6} scrollWheelZoom={true} contextmenu={false} attributionControl={false}
        
        >
        <LocationFinderDummy props ={{props:this.props, resetFocus:this.resetFocus.bind(this)}} />
@@ -252,16 +230,12 @@ const  LocationFinderDummy = (props) => {
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
         <TileLayer
           url="https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png" />    
-          {/* {positions} */}
+         
-          {/* <Marker position={[55,8]} ></Marker> */}
-          {/* {console.log(this.props)} */}
           {
             this.props.TrackListMap.map((element,index) => (
             this.makeIcon(index,element)
           ))}
-          {/* {this.props.Entities.map((pos, index) => (
+          
-            this.makeIcon(index,pos,this.props,this.state)
-             ))} */}
       </MapContainer>
        </div>
     );

webapp/src/components/api/APICalls.jsx

@@ -0,0 +1,133 @@
+export function getCOP()
+{
+    var msg = 
+  {
+    Type: "Request",
+    Data: "COP"
+    
+  }
+
+  return JSON.stringify(msg);
+}
+
+
+export function deleteEntity(id)
+{
+    var msg = 
+    {
+      Data: "Entity",
+      Type: "Delete",
+      ID: id,
+    }
+  
+    return JSON.stringify(msg);
+}
+
+export function createEntity(Name,Speed,Course, Position, Height)
+{
+    var msg = 
+    {
+      Data: "Entity",
+      Type: "New",
+      Name: Name,
+      Speed: Speed.toString(),
+      Course: Course.toString(),
+      Position: [Position[0].toString(),Position[1].toString()],
+      Height: Height.toString(),
+      SetPosition: true
+    
+    }
+    return JSON.stringify(msg);
+
+}
+
+export function updateEntity(id,Speed,Course, Position, Height, setPos)
+{
+    var msg = 
+    {
+      Data: "Entity",
+      Type: "Update",
+      ID: id,
+      Speed: Speed.toString(),
+      Course: Course.toString(),
+      Position: [Position[0].toString(),Position[1].toString()],
+      Height: Height.toString(),
+      SetPosition: setPos
+    
+    }
+    return JSON.stringify(msg);
+}
+
+
+export function getTracklist(id)
+{
+    var msg = 
+    {
+      Data: "COP",
+      Type: "EntityTrackList",
+      ID: id,
+    }
+    return JSON.stringify(msg);
+
+}
+
+
+export function saveScenario()
+{
+    var msg = 
+    {
+      Data: "Scenario",
+      Type: "Save",
+    }
+    return JSON.stringify(msg);
+
+}
+
+export function deleteScenario()
+{
+    var msg = 
+    {
+      Data: "Scenario",
+      Type: "Delete",
+    }
+    return JSON.stringify(msg);
+
+}
+
+export function loadScenario(id)
+{
+    var msg = 
+    {
+      Data: "Scenario",
+      Type: "Load",
+      ID: id,
+    }
+    return JSON.stringify(msg);
+
+}
+
+export function loadAutoraster()
+{
+    var msg = 
+    {
+      Data: "Scenario",
+      Type: "AutoRaster",
+    }
+    return JSON.stringify(msg);
+
+}
+
+
+export function getWSTestMessage()
+{
+    var msg = 
+    {
+      Data: "TEST",
+    }
+    return JSON.stringify(msg);
+
+}
+
+
+
+

webapp/src/components/api/index.js

@@ -1,30 +0,0 @@
-// // api/index.js
-// var socket = new WebSocket("ws://localhost:8008/");
-
-// let connect = cb => {
-//   console.log("connecting");
-
-//   socket.onopen = () => {
-//     console.log("Successfully Connected");
-//   };
-
-//   socket.onmessage = msg => {
-//     cb(msg);
-//   };
-
-//   socket.onclose = event => {
-//     console.log("Socket Closed Connection: ", event);
-//   };
-
-//   socket.onerror = error => {
-//     console.log("Socket Error: ", error);
-//   };
-// };
-
-
-// let sendMsg = msg => {
-//   console.log("sending msg: ", msg);
-//   socket.send(msg);
-// };
-
-// export { connect, sendMsg };