ADD: add possibility to add and delete entities

webapp/src/App.jsx

@@ -49,29 +49,44 @@ class App extends Component {
 
       if(dataFromServer.Data === "COP")
       {
-        
+        if(dataFromServer.Entities === undefined)
+        {
+          dataFromServer.Entities = [];
+        }
         // console.log(this.state.EntityOnFocus);
-        var tmp = []
+        let tmp = new Array(); ;
-        if(this.state.Entities.length !== 0){
 
+        if(this.state.Entities !== undefined && this.state.Entities.length !== 0){
 
+          if(dataFromServer.Entities.length > 0)
+          {
           dataFromServer.Entities.forEach((elementFromWS, indexWS) => {
             
+            if (this.isStored(elementFromWS.id) !== true) 
+            {
+              tmp.push(elementFromWS);
+            }
             this.state.Entities.forEach((elementStored, indexStore) => {
               if(elementFromWS.id === elementStored.id)
               {
+                // console.log(elementStored);
 
                 if(elementStored.onFocus !==true | elementStored.onFocus === undefined)
                 {
                   tmp.push(elementFromWS);
+
                 }else
                 {
                   tmp.push(elementStored);
                 }
+              }else{
+                //  console.log(elementFromWS);
+                //  tmp.push(elementFromWS);
               }
             });
             
           });
+        }
         }else{
           tmp = dataFromServer.Entities;
         }
@@ -95,6 +110,21 @@ class App extends Component {
 
   }
 
+  
+  isStored(id) {
+    var found = false;
+    this.state.Entities.forEach((elementStored, indexStore) => {
+      if (id === elementStored.id) 
+      {
+        found = true;
+      }
+    });
+
+    return found;
+    
+  }
+
+
     updateEntities()
     {
       var msg = 
@@ -193,7 +223,7 @@ class App extends Component {
           
         <Controls Functions= {this.Functions} Client= {client} Entities= {this.state.Entities} updateEntities = {this.updateEntities} EntityOnFocus = {this.state.EntityOnFocus} PositionClicked = {this.state.PositionClicked} />
        
-        <OpenSeaMap Entities= {this.state.Entities} updateEntities = {this.updateEntities} setEntityOnFocus = {this.setEntityOnFocus.bind(this)} setFocusPosition = {this.setFocusPosition.bind(this)}/>
+        <OpenSeaMap Entities= {this.state.Entities} Client= {client} updateEntities = {this.updateEntities} setEntityOnFocus = {this.setEntityOnFocus.bind(this)} setFocusPosition = {this.setFocusPosition.bind(this)}/>
         </div>
         
       

webapp/src/components/OpenSeaMap/OpenSeaMap.jsx

@@ -44,6 +44,28 @@ class OpenSeaMap extends Component {
     // console.log("hello world");
   }
 
+  markerOnClick(e) {
+    console.log(e);
+  
+  }
+
+
+  setOnFocus(e)
+  {
+    console.log(e.relatedTarget);
+    e.relatedTarget.dragging.enable();
+    e.relatedTarget.options.draggable = true;
+    var Ent = {
+      EntityID : e.relatedTarget.options.data,
+      NewPos : undefined   
+    }
+    this.setState((state) =>({
+      EntityOnFocus: Ent
+    }))
+    this.props.setEntityOnFocus(Ent)
+    // this.draggable = true;
+  }
+
 
 
   makeIcon(index, entity,props,state)
@@ -51,6 +73,7 @@ class OpenSeaMap extends Component {
     var isOnFocus = false;
     if(this.state.EntityOnFocus !== undefined){
       // console.log(entity.id+ " " , this.state.EntityOnFocus);
+      // console.log(props+ " " , this.state.EntityOnFocus);
 
       if(entity.id === this.state.EntityOnFocus.EntityID)
       {
@@ -63,6 +86,7 @@ class OpenSeaMap extends Component {
       }
 
     }
+
     var icon;
     icon = createIcon(entity.Type,entity.Side)
     return (
@@ -74,23 +98,30 @@ class OpenSeaMap extends Component {
       contextmenuItems={[{
         text:"Edit",
         index:0,
-        callback: function() {
+        callback: this.setOnFocus.bind(this),
-          // this.setState({
+      },{    
-          //   EntityOnFocus:entity.id
-          // })
-          var Ent = {
-            EntityID : entity.id,
-            NewPos : undefined   
-          }
-          state.EntityOnFocus = Ent;
-          props.setEntityOnFocus(Ent)
-          // console.log(state.EntityOnFocus);
-        }
-      }, {
         text:"Delete",
+        index: 1,
+        callback: function() {
+          var msg = 
+          {
+            Data: "Entity",
+            Type: "Delete",
+            ID: entity.id,
+          }
+          console.log(JSON.stringify(msg));
+          state.EntityOnFocus = undefined;
+          props.setEntityOnFocus(undefined)
+
+          props.Client.send(JSON.stringify(msg))
+        },
         // separator: true,
-        index: 1
     }, {
+      text:"Test",
+      callback: this.markerOnClick.bind(this),
+      // separator: true,
+      index: 2
+  }, {
       text:"Exit",
       callback: function()
       {
@@ -98,7 +129,7 @@ class OpenSeaMap extends Component {
         props.setEntityOnFocus(undefined);
       },
       // separator: true,
-      index: 2
+      index: 3
   }]}
   //     contextmenuItems: [{
   //   text: 'Circle 1',

webapp/src/components/control/EntityControl.jsx

@@ -25,7 +25,7 @@ function EntityControl(props)
     const [PositionDragged, setPositionDragged] = useState(false);
     // const [Speed, setSpeed] = useState();
     
-    const [formData, setFormData] = useState({name: "",course: "" ,speed: 0,position: [0,0],height:0});
+    const [formData, setFormData] = useState({name: "",course: 0 ,speed: 0,position: [0,0],height:0});
    
     
       
@@ -197,7 +197,7 @@ const handleClick = (e) => {
             {
                 props.Entity.onFocus = undefined;
             }            
-            setFormData({name:'',course:'',speed:'',position:['','']})
+            setFormData({name:'',course:0,speed:0,position:[0,0],height:0})
             setEntity(undefined)
             props.Functions.resetEntityOnFocus();
 

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

@@ -6,6 +6,7 @@ import round from '../../Utils';
 
 class Tracklist extends React.Component
 {
+
     render()
     {
         

webapp/src/components/control/controls.jsx

@@ -39,6 +39,11 @@ state = {
   //     console.log('reply', dataFromServer);
   //   }
 
+  if (this.props.Entities == undefined) 
+  {
+    this.props.Entities = new Array();
+  }
+  
   }