ADD: addded a tracklist sanitizer

webapp/src/components/SimControl/SimControl.jsx

@@ -4,6 +4,7 @@ import {w3cwebsocket as W3CWebSocket} from "websocket"
 import OpenSeaMap from "./components/OpenSeaMap/OpenSeaMap";
 import EntityControl from  './components/EntityControl/EntityControl';
 import  Tracklist from './components/Tracklist'
+import Equipment from './components/EntityControl/components/Equipment'
 
 import Tab from 'react-bootstrap/Tab';
 import Tabs from 'react-bootstrap/Tabs';
@@ -41,15 +42,19 @@ class SimControl extends Component {
      
          client.onmessage = (message) => {
            const dataFromServer = JSON.parse(message.data);
-           // console.log('reply: ', dataFromServer);
+          //  console.log('reply: ', dataFromServer);
            
-           if(dataFromServer.Data === "COP")
+           
+           if(dataFromServer.Data === "COP" && dataFromServer.Entities !== undefined  )
            {
+            var idsFromWs = [];
+            dataFromServer.Entities.forEach((elementFromWS, indexWS) => {
+              idsFromWs.push(elementFromWS.id);
+            });
+            this.state.TrackList_.checkifTrackIsStillSended(idsFromWs);
+            // this.state.TrackList_.deleteAll();
 
-             
+              var allTracks = this.state.TrackList_.getArrayOfKeys();
-             
-          
-            
                dataFromServer.Entities.forEach((elementFromWS, indexWS) => {
               
                 // console.log(elementFromWS);
@@ -63,6 +68,7 @@ class SimControl extends Component {
                 }
                
                
+                 
                });
              
             //  console.log(this.state.TrackList_.getSize());
@@ -71,6 +77,11 @@ class SimControl extends Component {
             //   Entities: structuredClone(tmp)
      
              }))
+           }else if(dataFromServer.Entities === undefined)
+           {
+            this.state.TrackList_.deleteAll();
+            console.log("delting all");
+            console.log(this.state.TrackList_.getSize());
            }
            
          }
@@ -143,7 +154,7 @@ class SimControl extends Component {
          setFocusPosition(props)
          {
      
-           // console.log(Entity);
+           console.log(props);
            this.setState({
              PositionClicked: props
            });
@@ -176,11 +187,14 @@ class SimControl extends Component {
                   Functions = {this.props.Functions} 
                   Client = { client } 
                   Entity = { this.state.EntityOnFocus} 
-                  PositionClicked =  {this.props.PositionClicked}
+                  PositionClicked =  {this.state.PositionClicked}
                 />        
               </Tab>
-              <Tab eventKey="EntityTrackList" title="Entity Tracklist">
+              <Tab eventKey="Equipment" title="Equipment">
-               <EntityTrackList Entity = { this.state.EntityOnFocus}  />
+                <Equipment Entity ={this.state.EntityOnFocus} />
+              </Tab>
+              <Tab eventKey="internalTrack" title="internal Tracks">
+               Internaltracklist
               </Tab>
               <Tab eventKey="orders" title="Orders">
                Orders
@@ -188,7 +202,7 @@ class SimControl extends Component {
             </Tabs>
             </div>
             
-             <OpenSeaMap TrackListMap = {this.state.TrackList_.getTracks()} TrackList = {this.state.TrackList_} setFocusPosition = {this.setFocusPosition.bind(this)} setEntityOnFocus = {this.setEntityOnFocus.bind(this)} />
+             <OpenSeaMap Client = {client} TrackListMap = {this.state.TrackList_.getTracks()} TrackList = {this.state.TrackList_} setFocusPosition = {this.setFocusPosition.bind(this)} setEntityOnFocus = {this.setEntityOnFocus.bind(this)} />
              </div>
              
            

webapp/src/components/SimControl/Tracklist.tsx

@@ -61,6 +61,17 @@ class TrackListCLass
         return this.trackMap.size;
     }
 
+    getArrayOfKeys()
+    {
+        var Tracks = new Array<string>();
+        this.trackMap.forEach((val,index) => 
+            Tracks.push(val.Id)
+        )
+        
+
+        return Tracks;
+    }
+
     getTracks() 
     {   
         var Tracks = new Array<Track>();
@@ -78,6 +89,28 @@ class TrackListCLass
         return this.trackMap;
     }
 
+    deteleTrack(id :string)
+    {
+        this.trackMap.delete(id);
+    }
+    
+    deleteAll()
+    {
+        this.trackMap.clear();
+    }
+
+    checkifTrackIsStillSended(tracksFromWS: Array<string>)
+    {
+        this.trackMap.forEach((val,index) => {
+            if(!tracksFromWS.includes(val.Id))
+            {
+                this.deteleTrack(val.Id);
+                console.log("deleted: " + val.Id);
+            };
+        });
+
+    }
+
    
 }
 

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

@@ -109,14 +109,14 @@ function EntityControl(props)
         if(props.PositionClicked !== undefined)
         {   
             //  setEntity(undefined);
-            // console.log(props.PositionCliecked)
+             console.log(props.PositionClicked)
             var pos = [0,0];
-            pos[0] = props.PositionCliecked.lat;
+            pos[0] = props.PositionClicked.lat;
-            pos[1] = props.PositionCliecked.lng
+            pos[1] = props.PositionClicked.lng
             setFormData({...formData,name:"",course:0,speed:0,position:pos});
         }
 
-    },[props.PositionCliecked])
+    },[props.PositionClicked])
 
 
 
@@ -242,7 +242,7 @@ const handleClick = (e) => {
             }            
             setFormData({name:'',course:0,speed:0,position:[0,0],height:0})
             setEntity(undefined)
-            props.Functions.resetEntityOnFocus();
+            // props.Functions.resetEntityOnFocus();
 
         }
 

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

@@ -0,0 +1,60 @@
+import React from "react"
+import {useState,useEffect, useRef} from 'react';
+
+
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+
+import './Equipment.css'
+
+
+
+function Equipment(props)
+{    
+   
+
+
+    const [Entity, setEntity] = useState(undefined);
+    const [EntitySelected, setEntitySelected] = useState(false)
+   
+
+    useEffect(() => {
+        if(props.Entity !== undefined)
+        {
+            setEntity(props.Entity);
+            setEntitySelected(true);
+        }else
+        {
+            setEntitySelected(false);
+        }
+
+        console.log(props)
+        
+
+    },[props.Entity])
+
+
+ 
+    
+
+
+
+
+   
+        
+        
+      
+
+        
+
+        
+      
+    return (
+
+    <div>
+              <b>{EntitySelected ? '' : 'no Entity Selected'}</b> 
+    </div>
+    );
+}
+
+export default Equipment;

webapp/src/components/SimControl/components/EntityControl/components/Equipment/index.js

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

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

@@ -71,6 +71,26 @@ class OpenSeaMap extends Component {
     // // this.draggable = true;
   }
 
+  deleteEntity(e)
+  {
+    var Track = this.props.TrackList.getTrack(e.relatedTarget.options.data);
+    if(Track !== undefined)
+    {
+
+      var msg = 
+      {
+        Data: "Entity",
+        Type: "Delete",
+        ID: Track.Id,
+      }
+      console.log(JSON.stringify(msg));
+      this.props.Client.send(JSON.stringify(msg))
+      
+      this.forceUpdate();
+    }
+
+  }
+
 
   resetFocus(e)
   {
@@ -124,18 +144,20 @@ class OpenSeaMap extends Component {
       },{    
         text:"Delete",
         index: 1,
-        callback: function() {
+        callback: this.deleteEntity.bind(this),
-          var msg = 
-          {
-            Data: "Entity",
-            Type: "Delete",
-            ID: entity.id,
-          }
-          console.log(JSON.stringify(msg));
-          props.Client.send(JSON.stringify(msg))
-          this.markerOnClick.bind(this)
 
-        },
+        // 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",
@@ -203,6 +225,7 @@ const  LocationFinderDummy = (props) => {
              
             //   props.props.props.setEntityOnFocus(undefined);
 
+
             props.props.props.setFocusPosition(e.latlng)
             
             

webapp/src/components/SimControl/components/Tracklist/tracklist.jsx

@@ -1,16 +1,25 @@
 import React from 'react';
 import './tracklist.scss'
 import round from '../../../Utils';
+import {useState,useEffect, useRef} from 'react';
 
 
 
-class Tracklist extends React.Component
+// class Tracklist extends React.Component
-{
 
-    render()
-    {
 
-        return(
+function Tracklist(props) {
+    
+    useEffect(() => {
+       
+        console.log("tracklist")
+        
+
+    },[])
+
+
+        
+    return(
                 <div className="tracklist">
                     <table>
                         <thead>
@@ -26,7 +35,7 @@ class Tracklist extends React.Component
                         </tr>
                         </thead>
                         <tbody>
-                        { this.props.entities.getTracks().map((val,index) => {
+                        { props.entities.getTracks().map((val,index) => {
                             return (
                                 <tr key={index}>
                                     <td >{val.Name}</td>
@@ -44,7 +53,7 @@ class Tracklist extends React.Component
                     </table>
                 </div>
         );
-    }
+    
 
 }