ADD: the api call to create a new Entity

webapp/src/App.jsx

@@ -29,7 +29,8 @@ const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
 class App extends Component {
   state =  {
     Entities: [],
-    EntityOnFocus: undefined
+    EntityOnFocus: undefined,
+    PositionClicked: undefined
   }
   
   componentDidMount() {
@@ -105,6 +106,16 @@ class App extends Component {
     }
 
     
+    setFocusPosition(props)
+    {
+
+      // console.log(Entity);
+      this.setState({
+        PositionClicked: props
+      });
+    }
+
+  
     
     render() {
     const {name} = this.state;
@@ -113,9 +124,9 @@ class App extends Component {
         <Header />
         <div className="Content">
           
-        <Controls Entities= {this.state.Entities} updateEntities = {this.updateEntities} EntityOnFocus = {this.state.EntityOnFocus} />
+        <Controls 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)}/>
+        <OpenSeaMap Entities= {this.state.Entities} updateEntities = {this.updateEntities} setEntityOnFocus = {this.setEntityOnFocus.bind(this)} setFocusPosition = {this.setFocusPosition.bind(this)}/>
         </div>
         
       

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, Tooltip } from 'react-leaflet'
+import { MapContainer, TileLayer,Marker, Popup, Tooltip,useMapEvents } from 'react-leaflet'
 import { friend,Hostile, iconShip,createIcon } from "./icon";
 import "./OpenSeaMap.scss";
 import {w3cwebsocket as W3CWebSocket} from "websocket";
@@ -11,7 +11,7 @@ import ContainerDimensions  from 'react-container-dimensions';
 class OpenSeaMap extends Component {
 
   state =  {
-    EntityOnFocus: undefined
+    EntityOnFocus: undefined,
   } 
   updateDimensions() {
     const height = window.innerWidth >= 992 ? window.innerHeight : 400
@@ -36,9 +36,13 @@ class OpenSeaMap extends Component {
   handleClick(e)
   {
     // console.log(e.target)
+    // this.setState({ currentPos: e.latlng });
+    console.log(e.latlng);
+
     console.log("hello world");
   }
 
+
   // MarkerEventHandler = useMemo(
   //   (e) => ({
   //     dragend() {
@@ -115,7 +119,24 @@ class OpenSeaMap extends Component {
     );
   }
 
+  setPos(props)
+  {
+    console.log(props);
+
+    this.props.setFocusPosition([1,2])
+  }
+  
   render() {
+const  LocationFinderDummy = (props) => {
+       const map = useMapEvents({
+           click(e) {
+
+            props.props.setFocusPosition(e.latlng)
+            // console.log(e.latlng);
+           },
+       });
+       return null;
+   };
     // const positions = this.props.Positions.map((pos, index) => (
     //   <Marker name={"test"} key={index} position={pos.position} icon= {ship} />
     // ));
@@ -123,6 +144,8 @@ class OpenSeaMap extends Component {
     return (
       <div className='map' style={{ height: this.state.height }} >
        <MapContainer MapContainer center={[54, 11]} zoom={6} scrollWheelZoom={true}>
+       <LocationFinderDummy props ={this.props} />
+
         <TileLayer
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
         <TileLayer

webapp/src/components/control/EntityControl.jsx

@@ -10,11 +10,11 @@ function EntityControl(props)
    
 
 
-    const [Entity, setEntity] = useState('');
+    const [Entity, setEntity] = useState({});
 
-    const [Course, setCourse] = useState('');
+    // const [Course, setCourse] = useState('');
     const [CourseInControl, setCourseInControl] = useState(false);
-    const [Speed, setSpeed] = useState();
+    // const [Speed, setSpeed] = useState();
     
     const [formData, setFormData] = useState({name: "",course: 0,speed: 0,position: [0,0]});
    
@@ -30,8 +30,14 @@ function EntityControl(props)
             
             if(props.Entity  !== undefined)
             {
-            
+                if(props.Entity.NewPos !== undefined)
+                {
+                    setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.NewPos})
+                }
+                else
+                {
                     setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position})
+                }
             }else{
                 setFormData({name:"",course:"",speed:"",position:['','']})
 
@@ -45,6 +51,19 @@ function EntityControl(props)
         
     },[props.Entity,props]);
 
+    useEffect(() => {
+        if(props.PositionCliecked !== undefined)
+        {
+            console.log(props.PositionCliecked)
+            var pos = [0,0];
+            pos[0] = props.PositionCliecked.lat;
+            pos[1] = props.PositionCliecked.lng
+            setFormData({...formData,position:pos});
+        }
+
+    },[props.PositionCliecked])
+
+
 
 
     // Entity.Entity.Course
@@ -76,11 +95,16 @@ const handleClick = (e) => {
             }
         };
 
+        const handleNameInput = (e) => {
+            setFormData({...formData,name:e.currentTarget.value});
+
+        }
+
         const emptyForm= (e) =>
         {
 
             setFormData({name:'',course:'',speed:'',position:['','']})
-            setEntity('')
+            setEntity(undefined)
 
         }
 
@@ -91,8 +115,37 @@ const handleClick = (e) => {
 
         const handleSubmit = (e) => {
             e.preventDefault();
-            console.log(e.target.data);
+            // console.log(e.target.data);
-            console.log(formData)
+            // console.log(formData)
+            console.log(Entity)
+            if(Entity === undefined) 
+            {
+                var msg = 
+                {
+                  Data: "Entity",
+                  Type: "New",
+                  Speed: formData.speed,
+                  Course: formData.course,
+                  Position: formData.position
+              
+                }
+
+            }else {
+                var msg = 
+                {
+                  Data: "Entity",
+                  Type: "Update",
+                  ID: Entity.id,
+                  Speed: formData.speed,
+                  Course: formData.course,
+                  Position: formData.position
+              
+                }
+
+            }
+            console.log(msg);
+
+            // props.Client.send(JSON.stringify(msg));
             // alert(`Course: ${formData.course}`);
                 }
     // console.log(Entity)
@@ -107,7 +160,7 @@ const handleClick = (e) => {
                 <div class="parent">
                     <div class="div1">
                         <div class="NameInput">
-                            <input className="EntityinputField NameInput" name="Name" readOnly={false} type="text" maxLength={3}  onClick={handleClick} onChange={handleCourseInput}  value={formData.name}   />
+                            <input className="EntityinputField NameInput" name="Name"  type="text" onChange={handleNameInput} value={formData.name}   />
                         </div>
                     </div>
                     <div class="div2"> 

webapp/src/components/control/controls.jsx

@@ -48,22 +48,47 @@ state = {
     {
       if(SelectedEntity !== undefined) 
       {
-        let tmp = [];
+        var tmp = {};
+        // tmp.NewPos= new Array(0,0);
+        // console.log(tmp);
+
         Entities.map((val) => {
           if(val.id === SelectedEntity.Name)
           {
              tmp = val
+            // tmp = JSON.parse(JSON.stringify(val));
+            // console.log(tmp);
+
+          
+              // console.log(SelectedEntity);
+              
               if(SelectedEntity.NewPos !== undefined)
               {
-              tmp.OldPos = val.Position;
+              // Object.assign(tmp, {NewPos: [{},{}]});
-              tmp.Position[0] = round(SelectedEntity.NewPos[0],3);
+              Object.assign(val, {NewPos: [{},{}]});
-              tmp.Position[1] = round(SelectedEntity.NewPos[1],3);
+
+              // tmp.OldPos = val.Position;
+              // Object.assign(tmp, {NewPos: [round(SelectedEntity.NewPos[0],3),0]});
+              // val.NewPos = SelectedEntity.NewPos;
+              val.NewPos[0] = round(SelectedEntity.NewPos[0],3);
+              val.NewPos[1] = round(SelectedEntity.NewPos[1],3);
+
+              // tmp.NewPos[0] = round(SelectedEntity.NewPos[0],3);
+              // tmp.NewPos[1] = round(SelectedEntity.NewPos[1],3);
+
+            }else{
+
+              // Object.assign(tmp, {NewPos: val.Position});
+
+              // tmp.NewPosition[1] = val.Position[1];
+
 
             }
-            tmp.NewPos = SelectedEntity.NewPos;
+            // tmp.NewPos = SelectedEntity.NewPos;
           }
-          
+          return tmp;
         })
+        // console.log(tmp);
         return tmp;
       }
     }
@@ -76,7 +101,7 @@ state = {
           <br />
             <div>
               <button onClick={this.props.updateEntities}>update</button>                
-                  <EntityControl Entity = { getEntityFromID(this.props.Entities,this.props.EntityOnFocus)}/>        
+                  <EntityControl Client = { this.props.Client } Entity = { getEntityFromID(this.props.Entities,this.props.EntityOnFocus)} PositionCliecked =  {this.props.PositionClicked}/>        
 
             </div>
           </div>