ADD: added possibility to drag marker and get the new position for updating a entity

webapp/src/components/OpenSeaMap/OpenSeaMap.jsx

@@ -1,7 +1,7 @@
 
 // import { useMapEvents } from 'react-leaflet/hooks'
 import React, { Component } from "react";
-import { MapContainer, TileLayer,Marker, Popup } from 'react-leaflet'
+import { MapContainer, TileLayer,Marker, Popup, Tooltip } from 'react-leaflet'
 import { friend,Hostile, iconShip,createIcon } from "./icon";
 import "./OpenSeaMap.scss";
 import {w3cwebsocket as W3CWebSocket} from "websocket";
@@ -10,7 +10,9 @@ import ContainerDimensions  from 'react-container-dimensions';
 
 class OpenSeaMap extends Component {
 
-  
+  state =  {
+    EntityOnFocus: undefined
+  } 
   updateDimensions() {
     const height = window.innerWidth >= 992 ? window.innerHeight : 400
     this.setState({ height: height })
@@ -37,19 +39,68 @@ class OpenSeaMap extends Component {
     console.log("hello world");
   }
 
+  // MarkerEventHandler = useMemo(
+  //   (e) => ({
+  //     dragend() {
+  //       // const marker = markerRef.current
+  //       // if (marker != null) {
+  //       //   // setPosition(marker.getLatLng())
+  //       // }
+  //       console.log(e)
+  //     },
+  //     click: (e) =>
+  //     {
+  //       this.props.setEntityOnFocus(e.target.options.data);
+
+  //     }
+  //   }),
+  //   [],
+
+  //  )
+
   makeIcon(index, entity)
   {
     var icon;
     icon = createIcon(entity.Type,entity.Side)
     return (
       <Marker name={entity.Name} key={index} icon={icon} position={entity.Position} data={entity.id}
-      draggable={true}
+      draggable={true} 
+      
       eventHandlers={{
         click: (e) => {
           // console.log(e.target.options.data);  // will print 'FooBar' in console
-          this.props.setEntityOnFocus(e.target.options.data);
+          var Ent = {
+            Name :  e.target.options.data,
+            NewPos : undefined
+
+          }
+          this.setState((state) =>({
+            EntityOnFocus: e.target.options.data
+          }))
+          this.props.setEntityOnFocus(Ent);
+
+          // this.props.setEntityOnFocus(e.target.options.data);
         },
-      }}  >
+        dragend: (e) =>
+        { 
+          var Ent = {
+            Name :  e.target.options.data,
+            NewPos : [e.target._latlng.lat,e.target._latlng.lng]
+
+          }
+          this.setState((state) =>({
+            EntityOnFocus: e.target.options.data
+          }))
+          this.props.setEntityOnFocus(Ent);
+
+          // console.log(e.target);
+
+          // console.log(e.target._latlng);
+
+        }
+      }} 
+      // eventHandlers={this.MarkerEventHandler}
+       >
 
       {/* <Popup>
       Omu-Aran the Head Post of Igbomina land, 
@@ -57,8 +108,10 @@ class OpenSeaMap extends Component {
       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>
-
     );
   }
 

webapp/src/components/control/EntityControl.jsx

@@ -22,21 +22,23 @@ function EntityControl(props)
       
     useEffect(() => {    // Update the document title using the browser API    document.title = `You clicked ${count} times`;  
 
-        console.log(props.Entity);
+        // console.log(props.Entity);
         setEntity(props.Entity);
         if(CourseInControl === false)
         {
             // setSpeed(props.Entity.Speed);
             
-            if(Array.isArray(props.Entity.Position) === true)
+            if(props.Entity  !== undefined)
             {
+            
                 setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position})
             }else{
-                setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:['','']})
+                setFormData({name:"",course:"",speed:"",position:['','']})
 
             }
             // setFormData({speed:props.Entity.Speed})
 
+
         }
 
       

webapp/src/components/control/controls.jsx

@@ -4,7 +4,7 @@ import './controls.css'
 import  Tracklist from './Tracklist'
 import EntityControl from './EntityControl';
 
-import {w3cwebsocket as W3CWebSocket} from "websocket"
+// import {w3cwebsocket as W3CWebSocket} from "websocket"
 
 
 // const config = {
@@ -16,7 +16,10 @@ import {w3cwebsocket as W3CWebSocket} from "websocket"
 
 // const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
 
-
+const round = (n, dp) => {
+  const h = +('1'.padEnd(dp + 1, '0')) // 10 or 100 or 1000 or etc
+  return Math.round(n * h) / h
+}
 
 class Controls extends React.Component
 {
@@ -41,17 +44,28 @@ state = {
  
   
   render() {
-   function getEntityFromID(Entities, SelectedKey)
+   function getEntityFromID(Entities, SelectedEntity)
     {
-      let tmp = [];
-      Entities.map((val,index) => {
-      if(val.id === SelectedKey)
+      if(SelectedEntity !== undefined) 
       {
-        tmp = val
+        let tmp = [];
+        Entities.map((val) => {
+          if(val.id === SelectedEntity.Name)
+          {
+            tmp = val
+            if(SelectedEntity.NewPos !== undefined)
+            {
+              tmp.OldPos = val.Position;
+              tmp.Position[0] = round(SelectedEntity.NewPos[0],3);
+              tmp.Position[1] = round(SelectedEntity.NewPos[1],3);
+
+            }
+            tmp.NewPos = SelectedEntity.NewPos;
+          }
+          
+        })
+        return tmp;
       }
-     
-    })
-    return tmp;
     }