ADD: added util function and fix problem with updatin entityOnFocus

webapp/src/App.jsx

@@ -33,6 +33,8 @@ class App extends Component {
     PositionClicked: undefined
   }
   
+
+  
   componentDidMount() {
    console.log(config.apiUrl);
 
@@ -48,17 +50,46 @@ class App extends Component {
       {
         
         // console.log(this.state.EntityOnFocus);
+        var tmp = []
+        if(this.state.Entities.length !== 0){
+
+          
+          dataFromServer.Entities.forEach((elementFromWS, indexWS) => {
+            
+            this.state.Entities.forEach((elementStored, indexStore) => {
+              if(elementFromWS.id === elementStored.id)
+              {
+                
+                if(elementStored.onFocus !==true | elementStored.onFocus === undefined)
+                {
+                  tmp.push(elementFromWS);
+                }else
+                {
+                  tmp.push(elementStored);
+                }
+              }
+            });
+            
+          });
+        }else{
+          tmp = dataFromServer.Entities;
+        }
+        // console.log(tmp);
           this.setState((state) => ({
-         Entities: structuredClone(dataFromServer.Entities)
+        //  Entities: structuredClone(dataFromServer.Entities)
+         Entities: structuredClone(tmp)
+
         })
         
         )
       }
       
     }
+
+    /// interval for updates
     setInterval(() => {
-      // this.updateEntities();
+      this.updateEntities();
-    }, 1000);
+    }, 2000);
   
 
   }
@@ -103,6 +134,22 @@ class App extends Component {
       });
 
     }
+    resetEntityOnFocus()
+    {
+      if(this.state.EntityOnFocus !== undefined)
+      {
+        this.state.Entities.map((element ,index) => {
+          if(element.id === this.state.EntityOnFocus.EntityID)
+          {
+            this.state.Entities[index].onFocus = undefined;
+          }
+        })
+        console.log(this.state.Entities)
+        this.setState({
+          EntityOnFocus: undefined
+        })
+      }
+    }
 
     
     setFocusPosition(props)
@@ -114,7 +161,10 @@ class App extends Component {
       });
     }
 
-  
+    Functions = {
+    updateEntities: this.updateEntities.bind(this),
+    resetEntityOnFocus: this.resetEntityOnFocus.bind(this)
+    }
     
     render() {
     const {name} = this.state;
@@ -123,7 +173,7 @@ class App extends Component {
         <Header />
         <div className="Content">
           
-        <Controls Client= {client} Entities= {this.state.Entities} updateEntities = {this.updateEntities} EntityOnFocus = {this.state.EntityOnFocus} PositionClicked = {this.state.PositionClicked} />
+        <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)}/>
         </div>

webapp/src/components/OpenSeaMap/OpenSeaMap.jsx

@@ -15,7 +15,7 @@ class OpenSeaMap extends Component {
     EntityOnFocus: undefined,
   } 
   updateDimensions() {
-    const height = window.innerWidth >= 992 ? window.innerHeight : 400
+    const height = window.innerWidth >= 950 ? window.innerHeight : 400
     this.setState({ height: height })
   }
 
@@ -39,9 +39,9 @@ class OpenSeaMap extends Component {
   {
     // console.log(e.target)
     // this.setState({ currentPos: e.latlng });
-    console.log(e.latlng);
+    // console.log(e.latlng);
 
-    console.log("hello world");
+    // console.log("hello world");
   }
 
   
@@ -83,7 +83,7 @@ class OpenSeaMap extends Component {
           }
           state.EntityOnFocus = Ent;
           props.setEntityOnFocus(Ent)
-          console.log(state.EntityOnFocus);
+          // console.log(state.EntityOnFocus);
         }
       }, {
         text:"Delete",

webapp/src/components/OpenSeaMap/OpenSeaMap.scss

@@ -11,7 +11,7 @@
   // display: flex;
   padding-top: 10px;
   // height: 750px;
-  width: 75.5%;
+  width: 72%;
   // padding-left: 20%;
   display: inline-flex;
   // height: 80%;

webapp/src/components/Utils.jsx

@@ -0,0 +1,6 @@
+const round = (n, dp) => {
+    const h = +('1'.padEnd(dp + 1, '0')) // 10 or 100 or 1000 or etc
+    return Math.round(n * h) / h
+  }
+
+  export default round

webapp/src/components/control/EntityControl.jsx

@@ -46,7 +46,7 @@ function EntityControl(props)
                     setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position})
                 }
             }else{
-                setFormData({name:"",course:"",speed:"",position:['','']})
+                // setFormData({name:"",course:"",speed:"",position:['','']})
 
             }
             // setFormData({speed:props.Entity.Speed})
@@ -77,7 +77,8 @@ function EntityControl(props)
 const handleClick = (e) => {
         if(e.detail === 2)
         {   
-            setCourseInControl(true);
+            console.log(e)
+            // setCourseInControl(true);
             e.target.readOnly = false;
             // e.target.style = "border: 1px solid"
         }
@@ -94,24 +95,48 @@ const handleClick = (e) => {
         };
 
         const handleSpeedInput= (e) => {
-            console.log(e.target)
+            // console.log(e.target)
             if(!isNaN(e.nativeEvent?.data))
             {
                 setFormData({...formData,speed:e.currentTarget.value});
 
             }
+            console.log(formData.speed)
         };
 
         const handleNameInput = (e) => {
             setFormData({...formData,name:e.currentTarget.value});
 
         }
+        const handleInput = (e) => {
+            console.log(e.target.name)
+            switch (e.target.name) {
+                case "Lat":
+                    if(!isNaN(e.nativeEvent?.data) )
+                    {
+                        setFormData({...formData,position:[e.currentTarget.value,formData.position[1],formData.position[2]] });
+                    }
+
+                    break;
+            case "Lon":
+                setFormData({...formData,position:[formData.position[0],e.currentTarget.value,formData.position[2]] });
+
+                break;
+            case "Height":
+                setFormData({...formData,position:[formData.position[0],formData.position[1],e.currentTarget.value] });
+
+                break;
+                default:
+                    break;
+            }
+        }
 
         const emptyForm= (e) =>
         {
 
             setFormData({name:'',course:'',speed:'',position:['','']})
             setEntity(undefined)
+            props.Functions.resetEntityOnFocus();
 
         }
 
@@ -240,14 +265,14 @@ const handleClick = (e) => {
             <div class="div7"> 
                 <div class="input-group mb-3 NumberInputsGroup">
                     <span class="input-group-text">Lat</span>
-                    <input className="ControlInput NumberInputs" name="Lat" readOnly={true} type="text"  onClick={handleClick}     value={formData.position[0]} />
+                    <input className="ControlInput NumberInputs" name="Lat" readOnly={true} type="text"  onClick={handleClick}  onChange={handleInput}    value={formData.position[0]} />
                 </div>
             </div>
             <div class="div8"> 
             <div class="input-group mb-3 NumberInputsGroup" >
                     <span class="input-group-text">Lon</span>
                     {/* <input className="ControlInput" name="Lat" readOnly={true} type="text"  onClick={handleClick}     value={formData.position[0]} /> */}
-                    <input className="ControlInput NumberInputs" name="Lon" readOnly={true} type="text"  onClick={handleClick}     value={formData.position[1]}/>
+                    <input className="ControlInput NumberInputs" name="Lon" readOnly={true} type="text"  onClick={handleClick}  onChange={handleInput}   value={formData.position[1]}/>
                 </div>
                 {/* <div  className="flex">
                     <div className="ControlHeader">Lon:</div>
@@ -257,7 +282,7 @@ const handleClick = (e) => {
             <div class="input-group mb-3 NumberInputsGroup">
                     <span class="input-group-text">Height</span>
                     {/* <input className="ControlInput" name="Lat" readOnly={true} type="text"  onClick={handleClick}     value={formData.position[0]} /> */}
-                    <input className="ControlInput NumberInputs" name="height" readOnly={true} type="text"  onClick={handleClick}     value={formData.position[2]}/>
+                    <input className="ControlInput NumberInputs" name="Height" readOnly={true} type="text"  onClick={handleClick}  onChange={handleInput}   value={formData.position[2]}/>
                 </div>
                     {/* <div className="ControlHeader">Height:</div>
                  <div  className="flex">

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import './tracklist.scss'
-
+import round from '../../Utils';
 
 
 
@@ -31,8 +31,8 @@ class Tracklist extends React.Component
                                     <td >{val.Name}</td>
                                     <td className='TracklistCell'>{val.Course}</td>
                                     <td className='TracklistCell'>{val.Speed}</td>
-                                    <td className='TracklistCell'>{val.Position[0]}</td>
+                                    <td className='TracklistCell'>{round(val.Position[0],3)}</td>
-                                    <td className='TracklistCell'>{val.Position[1]}</td>
+                                    <td className='TracklistCell'>{round(val.Position[1],3)}</td>
                                     <td className='TracklistCell'>{val.Type}</td>
                                     <td className='TracklistCell'>{val.Side}</td>
 

webapp/src/components/control/controls.jsx

@@ -3,7 +3,7 @@ import './controls.css'
 // import { sendMsg } from '../api';
 import  Tracklist from './Tracklist'
 import EntityControl from './EntityControl';
-
+import round from '../Utils';
 // import {w3cwebsocket as W3CWebSocket} from "websocket"
 
 
@@ -16,10 +16,10 @@ import EntityControl from './EntityControl';
 
 // const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
 
-const round = (n, dp) => {
+// const round = (n, dp) => {
-  const h = +('1'.padEnd(dp + 1, '0')) // 10 or 100 or 1000 or etc
+//   const h = +('1'.padEnd(dp + 1, '0')) // 10 or 100 or 1000 or etc
-  return Math.round(n * h) / h
+//   return Math.round(n * h) / h
-}
+// }
 
 class Controls extends React.Component
 {
@@ -101,7 +101,7 @@ state = {
           <br />
             <div>
               <button onClick={this.props.updateEntities}>update</button>                
-                  <EntityControl Client = { this.props.Client } Entity = { getEntityFromID(this.props.Entities,this.props.EntityOnFocus)} PositionCliecked =  {this.props.PositionClicked}/>        
+                  <EntityControl Functions = {this.props.Functions} Client = { this.props.Client } Entity = { getEntityFromID(this.props.Entities,this.props.EntityOnFocus)} EntityOnFocus= {this.props.EntityOnFocus} PositionCliecked =  {this.props.PositionClicked}/>        
 
             </div>
           </div>