ADD: added react-router and updated structure of app

webapp/src/components/SimControl/SimControl.jsx

@@ -0,0 +1,220 @@
+import React, { Component } from "react";
+import {w3cwebsocket as W3CWebSocket} from "websocket"
+// import Header from './components/Header';
+import Controls from "./components/control/controls";
+import OpenSeaMap from "./components/OpenSeaMap/OpenSeaMap";
+
+const config = {
+    // apiUrl: process.env.REACT_APP_WEBAPP_WS_URL,
+    apiUrl: "192.168.3.13",
+    apiProt: 30747
+  }
+  const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
+  
+
+
+class SimControl extends Component {
+    state =  {
+        Entities: [],
+        EntityOnFocus: undefined,
+        PositionClicked: undefined
+      }
+
+      componentDidMount() {
+        console.log(config.apiUrl);
+     
+         client.onopen = () => {
+           console.log("Websocket Client for Map Connected");
+         };
+     
+         client.onmessage = (message) => {
+           const dataFromServer = JSON.parse(message.data);
+           // console.log('reply: ', dataFromServer);
+     
+           if(dataFromServer.Data === "COP")
+           {
+             if(dataFromServer.Entities === undefined)
+             {
+               dataFromServer.Entities = [];
+             }
+             // console.log(this.state.EntityOnFocus);
+             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;
+             }
+             // console.log(tmp);
+               this.setState((state) => ({
+             //  Entities: structuredClone(dataFromServer.Entities)
+              Entities: structuredClone(tmp)
+     
+             })
+             
+             )
+           }
+           
+         }
+     
+         /// interval for updates
+         setInterval(() => {
+           this.updateEntities();
+         }, 2000);
+       
+     
+       }
+     
+       
+       isStored(id) {
+         var found = false;
+         this.state.Entities.forEach((elementStored, indexStore) => {
+           if (id === elementStored.id) 
+           {
+             found = true;
+           }
+         });
+     
+         return found;
+         
+       }
+     
+     
+         updateEntities()
+         {
+           var msg = 
+           {
+             Type: "Request",
+             Data: "COP"
+         
+           }
+           client.send(JSON.stringify(msg));
+         }
+     
+         getEntityFromID(Entities, SelectedEntity)
+         {
+           // console.log(Entities);
+         }
+     
+         setEntityOnFocus(Entity) 
+         {
+           if(Entity === undefined)
+           {
+             this.resetEntityOnFocus();
+             return;
+           }
+     
+           this.getEntityFromID(this.state.Entities,Entity)
+           console.log(Entity);
+           this.setState({
+             EntityOnFocus: Entity
+           });
+           this.state.Entities.forEach((element, index) => {
+             // console.log(element);
+     
+             if(element.id === Entity.EntityID)
+             {
+               var tmpList = structuredClone(this.state.Entities);
+               tmpList[index].onFocus = true;  
+               if(Entity.NewPos !== undefined)
+               {
+                 tmpList[index].Position = Entity.NewPos        
+               }
+               this.setState({
+                 Entities: structuredClone(tmpList)
+               });
+               if(Entity.dragged !== undefined)
+               {
+                 if(Entity.dragged === true)
+                 {
+                   tmpList[index].dragged = true;
+                 }
+               }
+               console.log(tmpList[index]);
+     
+             }
+           });
+     
+         }
+         resetEntityOnFocus()
+         {
+           if(this.state.EntityOnFocus !== undefined)
+           {
+             this.state.Entities.map((element ,index) => {
+               if(element.id === this.state.EntityOnFocus.EntityID)
+               {
+                 this.state.Entities[index].onFocus = false;
+               }
+             })
+             console.log(this.state.Entities)
+             this.setState({
+               EntityOnFocus: undefined
+             })
+           }
+         }
+     
+         
+         setFocusPosition(props)
+         {
+     
+           // console.log(Entity);
+           this.setState({
+             PositionClicked: props
+           });
+         }
+     
+         Functions = {
+         updateEntities: this.updateEntities.bind(this),
+         resetEntityOnFocus: this.resetEntityOnFocus.bind(this)
+         }
+         
+         render() {
+     
+         const {name} = this.state;
+         return (
+           <div className="App">
+             
+             <div className="Content">
+               
+             <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} Client= {client} updateEntities = {this.updateEntities} setEntityOnFocus = {this.setEntityOnFocus.bind(this)} setFocusPosition = {this.setFocusPosition.bind(this)}/>
+             </div>
+             
+           
+           </div>
+         );
+       }
+
+}
+
+export default SimControl;