CloudSimWebApp/webapp/src/components/SimControl/SimControl.jsx

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;