ADD: added small details view on click on an entity

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>
     );
   }
 }