CloudSimWebApp/webapp/src/App.jsx

// App.js
import React, { Component } from "react";
import "./App.css";
// import { connect, sendMsg } from "./components/api/index";
import Header from './components/Header';
import Controls from "./components/control/controls";
// import ChatHistory from "./components/ChatHistory/ChatHistory.jsx";

import OpenSeaMap from "./components/OpenSeaMap/OpenSeaMap";
import {w3cwebsocket as W3CWebSocket} from "websocket"

export const defaultLocale = "en-US";

const config = {
  // apiUrl: process.env.REACT_APP_WEBAPP_WS_URL,
  apiUrl: "192.168.3.13",
  apiProt: 30747
}

// const config = {
//   // apiUrl: process.env.REACT_APP_WEBAPP_WS_URL,
//   apiUrl: "localhost",
//   apiProt: 9999
// }


const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");


class App 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")
      {
        
        // 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(tmp)

        })
        
        )
      }
      
    }

    /// interval for updates
    setInterval(() => {
      this.updateEntities();
    }, 2000);
  

  }

    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">
        <Header />
        <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} updateEntities = {this.updateEntities} setEntityOnFocus = {this.setEntityOnFocus.bind(this)} setFocusPosition = {this.setFocusPosition.bind(this)}/>
        </div>
        
      
      </div>
    );
  }
}

export default App;