From f926604c7f3e40b46cbf36645b06f041d1e3e73a Mon Sep 17 00:00:00 2001
From: Henry Winkel <henrywinkel@bundeswehr.org>
Date: Thu, 2 Nov 2023 18:03:14 +0100
Subject: [PATCH] ADD: add possibility to add and delete entities

---
 webapp/src/App.jsx                            | 42 +++++++++++--
 .../src/components/OpenSeaMap/OpenSeaMap.jsx  | 63 ++++++++++++++-----
 .../src/components/control/EntityControl.jsx  |  4 +-
 .../control/Tracklist/tracklist.jsx           |  1 +
 webapp/src/components/control/controls.jsx    |  5 ++
 5 files changed, 91 insertions(+), 24 deletions(-)

diff --git a/webapp/src/App.jsx b/webapp/src/App.jsx
index 3ae568d..4d26b34 100644
--- a/webapp/src/App.jsx
+++ b/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 = []
-        if(this.state.Entities.length !== 0){
+        let tmp = new Array(); ;
 
-          
+        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>
         
       
diff --git a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx b/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx
index bc8f5c5..85eeed8 100644
--- a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx
+++ b/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx
@@ -44,13 +44,36 @@ 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)
   {
     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,10 +86,11 @@ class OpenSeaMap extends Component {
       }
 
     }
+
     var icon;
     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={index} icon={icon} position={entity.Position} data={entity.id} 
       draggable={isOnFocus? true : false}
       contextmenu={true}
       contextmenuWidth={140}
@@ -74,23 +98,30 @@ class OpenSeaMap extends Component {
       contextmenuItems={[{
         text:"Edit",
         index:0,
-        callback: function() {
-          // this.setState({
-          //   EntityOnFocus:entity.id
-          // })
-          var Ent = {
-            EntityID : entity.id,
-            NewPos : undefined   
-          }
-          state.EntityOnFocus = Ent;
-          props.setEntityOnFocus(Ent)
-          // console.log(state.EntityOnFocus);
-        }
-      }, {
+        callback: this.setOnFocus.bind(this),
+      },{    
         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',
diff --git a/webapp/src/components/control/EntityControl.jsx b/webapp/src/components/control/EntityControl.jsx
index 5abbe78..5686728 100644
--- a/webapp/src/components/control/EntityControl.jsx
+++ b/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();
 
diff --git a/webapp/src/components/control/Tracklist/tracklist.jsx b/webapp/src/components/control/Tracklist/tracklist.jsx
index 7e9c574..dad043a 100644
--- a/webapp/src/components/control/Tracklist/tracklist.jsx
+++ b/webapp/src/components/control/Tracklist/tracklist.jsx
@@ -6,6 +6,7 @@ import round from '../../Utils';
 
 class Tracklist extends React.Component
 {
+
     render()
     {
         
diff --git a/webapp/src/components/control/controls.jsx b/webapp/src/components/control/controls.jsx
index f911a5d..215c86c 100644
--- a/webapp/src/components/control/controls.jsx
+++ b/webapp/src/components/control/controls.jsx
@@ -38,6 +38,11 @@ state = {
   //     const dataFromServer = JSON.parse(message.data);
   //     console.log('reply', dataFromServer);
   //   }
+
+  if (this.props.Entities == undefined) 
+  {
+    this.props.Entities = new Array();
+  }
   
   }