ADD: added small details view on click on an entity

webapp/src/App.jsx

@@ -1,66 +1,74 @@
 // App.js
 import React, { Component } from "react";
 import "./App.css";
-import { connect, sendMsg } from "./components/api/index";
+// 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"
 
+const client = new W3CWebSocket("ws://localhost:8008/");
 
 
 class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      Entities: [
-            // { id: 1, name: "Apple", position: [51.505, -0.10],Type: "Friend" },
-            // { id: 2, name: "Oranges", position: [51.505, -0.11],Type: "Hostile"},
-            // { id: 3, name: "Grapes", position: [51.505, -0.12],Type: "Friend"}
-          ],
-    
-        
-    }
+  state =  {
+    Entities: [],
+    EntityOnFocus: []
   }
-  componentDidMount() {
-    
-      connect((msg) => {
-          console.log("New Message")
-          
-          var jsonMSG;
-          try {
-            jsonMSG = JSON.parse(msg.data);
-          } catch (error) {
-            console.log(error);
-          }
-          
-          if(jsonMSG["Type"] == "COP"){
-            console.log(msg.data)
-            var Entities =  Array.from(jsonMSG["Entities"])
-            if(Array.isArray(Entities))
-            {
-              this.setState({
-                Entities:Entities
-              });
-            }
-          }
-
-          // this.state.Entities = jsonMSG
-        	// var jsonmsg = JSON.parse(msg);
-      // this.setState(prevState => ({
-      //   // chatHistory: [...this.state.History, msg]
-      //   // chatHistory: [...this.state.History, msg]
-         
-      // }))
   
-      console.log(this.state.Entities);
-    });
+  componentDidMount() {
+   
+    client.onopen = () => {
+      console.log("Websocket Client for Map Connected");
+    };
+
+    client.onmessage = (message) => {
+      const dataFromServer = JSON.parse(message.data);
+      console.log('reply: ', dataFromServer);
+
+      if(dataFromServer.Type === "COP")
+      {
+        this.setState((state) => ({
+         Entities: dataFromServer.Entities 
+        })
+        
+        )
+      }
+      
+    }
+
+    //   connect((msg) => {
+    //       console.log("New Message")
+          
+    //       var jsonMSG;
+    //       try {
+    //         jsonMSG = JSON.parse(msg.data);
+    //       } catch (error) {
+    //         console.log(error);
+    //       }
+          
+    //       if(jsonMSG["Type"] == "COP"){
+    //         console.log(msg.data)
+    //         var Entities =  Array.from(jsonMSG["Entities"])
+    //         if(Array.isArray(Entities))
+    //         {
+    //           this.setState({
+    //             Entities:Entities
+    //           });
+    //         }
+    //       }
+
+  
+  
+    //   console.log(this.state.Entities);
+    // });
     
 
   }
 
-    updateMap()
+    updateEntities()
     {
       var msg = 
       {
@@ -68,12 +76,18 @@ class App extends Component {
         Data: "COP"
     
       }
-      sendMsg(JSON.stringify(msg));
+      client.send(JSON.stringify(msg));
     }
 
-    MapIntervalCallback = () => {
-      this.updateMap()
+    setEntityOnFocus(Entity)
+    {
+      // console.log(Entity);
+      this.setState({
+        EntityOnFocus: Entity
+      });
     }
+
+  
     
     render() {
     const {name} = this.state;
@@ -82,13 +96,13 @@ class App extends Component {
         <Header />
         <div className="Content">
           
-        <Controls Entities= {this.state.Entities} />
+        <Controls Entities= {this.state.Entities} updateEntities = {this.updateEntities} EntityOnFocus = {this.state.EntityOnFocus} />
         {/* <ChatHistory History={this.state.History} /> */}
         {/* <div>
         {name}
 
         </div> */}
-        <OpenSeaMap Entities= {this.state.Entities} parentCallback = {this.MapIntervalCallback}/>
+        <OpenSeaMap Entities= {this.state.Entities} updateEntities = {this.updateEntities} setEntityOnFocus = {this.setEntityOnFocus.bind(this)}/>
         </div>
         
         {/* <button onClick={this.send}>Hit</button> */}