ADD: added small details view on click on an entity

webapp/src/components/Header/header.jsx

@@ -3,7 +3,7 @@ import "./header.scss";
 
 const Header = () => (
   <div className="header">
-    <h2>Cloud Simulator</h2>
+    <font className="caption">Cloud Simulator</font>
   </div>
 );
 

webapp/src/components/Header/header.scss

@@ -6,5 +6,10 @@
     align-items: center;
     justify-content: center;
     color: white;
+    height: 70px;
 
+}
+
+.caption{
+    font-size: 40px;
 }

webapp/src/components/OpenSeaMap/OpenSeaMap.jsx

@@ -3,19 +3,31 @@
 import React, { Component } from "react";
 import { MapContainer, TileLayer,Marker, Popup } from 'react-leaflet'
 import { friend,Hostile, iconShip,createIcon } from "./icon";
-import "./OpenSeaMap.scss"
-import { sendMsg } from '../api';
-
+import "./OpenSeaMap.scss";
+import {w3cwebsocket as W3CWebSocket} from "websocket";
+import ContainerDimensions  from 'react-container-dimensions';
+const client = new W3CWebSocket("ws://localhost:8008/");
 
 // import icon from 'leaflet/dist/images/marker-icon.png';
 class OpenSeaMap extends Component {
- 
-  componentDidMount() {
-    // setInterval(() => this.setState({ time: Date.now()}), 1000)
-    setInterval(() => this.props.parentCallback(), 3000)
-    
 
-}
+  
+  updateDimensions() {
+    const height = window.innerWidth >= 992 ? window.innerHeight : 400
+    this.setState({ height: height })
+  }
+
+  componentWillMount() {
+    this.updateDimensions()
+  }
+
+  componentDidMount() {
+    window.addEventListener("resize", this.updateDimensions.bind(this))
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.updateDimensions.bind(this))
+  }
 
 
   handleClick(e)
@@ -29,11 +41,12 @@ class OpenSeaMap extends Component {
     var icon;
     icon = createIcon(entity.Type,entity.Side)
     return (
-      <Marker name={entity.Name} key={index} icon={icon} position={entity.position} 
+      <Marker name={entity.Name} key={index} icon={icon} position={entity.position} data={entity.id}
       
       eventHandlers={{
         click: (e) => {
-          console.log(e.target.options.name);  // will print 'FooBar' in console
+          console.log(e.target.options.data);  // will print 'FooBar' in console
+          this.props.setEntityOnFocus(e.target.options.data);
         },
       }}  >
 
@@ -54,7 +67,7 @@ class OpenSeaMap extends Component {
     // ));
 
     return (
-      <div className='map' >
+      <div className='map' style={{ height: this.state.height }} >
        <MapContainer MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
         <TileLayer
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
@@ -65,7 +78,7 @@ class OpenSeaMap extends Component {
             this.makeIcon(index,pos)
         ))}
       </MapContainer>
-      </div>
+       </div>
     );
   }
 }

webapp/src/components/OpenSeaMap/OpenSeaMap.scss

@@ -3,16 +3,18 @@
 // @import url('https://unpkg.com/leaflet@1.5.1/dist/leaflet.css');
 .leaflet-container {
   width: 100%;
-  height: 100%;
+  height: 90%;
 }
 
 
 .map {
-  padding-top: 1%;
-  height: 800px;
-  width: 76%;
+  // display: flex;
+  padding-top: 10px;
+  // height: 750px;
+  width: 79%;
   // padding-left: 20%;
   float: left;
+  // height: 80%;
 }
 
 // .leaflet-marker-icon{

webapp/src/components/OpenSeaMap/icon.jsx

@@ -16,7 +16,7 @@ const AirLetter = "A";
 const SurfaceLetter = "S";
 const SubsurfaceLetter = "U";
 
-const Size = 25;
+// const Size = 25;
 
 function createIcon(Type , Side )
 {

webapp/src/components/control/EntityControl.jsx

@@ -0,0 +1,25 @@
+import React from "react"
+import './controls.css'
+
+function EntityControl(Entity)
+{
+    
+
+    console.log(Entity)
+    // console.log(EntityOnFocus)
+    return (
+        <div className="ControlsComponent">
+            <div>
+                <div className="ControlHeader">Name</div>
+                <div className="ControlValues">{Entity.Entity.Name}</div>
+            </div>
+            <div>
+                <div className="ControlHeader">Course</div>
+                <div className="ControlValues">{Entity.Entity.Course}</div>
+            </div>
+
+        </div>
+    );
+}
+
+export default EntityControl;

webapp/src/components/control/controls.css

@@ -1,5 +1,18 @@
 .controls{
-    display: flex;
+    /* display: flex; */
     width: 20%;
     float: left;
+}
+
+.ControlsComponent{
+display: grid;
+}
+
+.ControlHeader{
+float: left;
+width: 30%;
+}
+
+.ControlValues{
+float: left;
 }

webapp/src/components/control/controls.jsx

@@ -1,32 +1,55 @@
 import React from 'react';
 import './controls.css'
-import { sendMsg } from '../api';
+// import { sendMsg } from '../api';
 import  Tracklist from './Tracklist'
+import EntityControl from './EntityControl';
+import {w3cwebsocket as W3CWebSocket} from "websocket"
+
+const client = new W3CWebSocket("ws://localhost:8008/");
+
 class Controls extends React.Component
 {
-  constructor(props) {
-    super(props);
-    this.ws = props.ws;
 
-    // This binding is necessary to make `this` work in the callback
-  }
-  getMessage()
+state = {
+  EntityOnFocus: this.props.EntityOnFocus
+}
+
+  componentDidMount()
   {
-    var msg = 
-    {
-      Type: "Request",
-      Data: "COP"
+    client.onopen = () => {
+      console.log("Websocket Client Connected");
+    };
 
+    client.onmessage = (message) => {
+      const dataFromServer = JSON.parse(message.data);
+      console.log('reply', dataFromServer);
     }
-    sendMsg(JSON.stringify(msg));
-    console.log("test");
-
   }
-    render() {
+
+  
+  render() {
+   function getEntityFromID(Entities, SelectedKey)
+    {
+      let tmp = [];
+      Entities.map((val,index) => {
+      if(val.id === SelectedKey)
+      {
+        tmp = val
+      }
+     
+    })
+    return tmp;
+    }
+
+    console.log(getEntityFromID(this.props.Entities,this.props.EntityOnFocus));
         return (
           <div className="controls">
             <Tracklist entities= {this.props.Entities} />
-            {/* <button onClick={this.getMessage}> click me!</button> */}
+          <br />
+            <div>
+              <button onClick={this.props.updateEntities}> click me!</button>
+              <EntityControl Entity = { getEntityFromID(this.props.Entities,this.props.EntityOnFocus)} />
+            </div>
           </div>
         );
       }