ADD: added tracklist and automated update

webapp/src/components/OpenSeaMap/OpenSeaMap.jsx

@@ -4,36 +4,45 @@ 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 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)
+    
+
+}
+
+
+  handleClick(e)
+  {
+    // console.log(e.target)
+    console.log("hello world");
+  }
 
   makeIcon(index, entity)
   {
     var icon;
-    // switch (entity.Side)
-    // {
-    //   case "Friend":
-    //     icon = friend;
-    //   break;
-    //   case "Hostile":
-    //     icon = Hostile;
-    //   break;
-    //   default:
-        
-    //   break;
-    // }
     icon = createIcon(entity.Type,entity.Side)
     return (
-      <Marker name={"test"} key={index} icon={icon} position={entity.position} >
-      <Popup>
+      <Marker name={entity.Name} key={index} icon={icon} position={entity.position} 
+      
+      eventHandlers={{
+        click: (e) => {
+          console.log(e.target.options.name);  // will print 'FooBar' in console
+        },
+      }}  >
+
+      {/* <Popup>
       Omu-Aran the Head Post of Igbomina land, 
       is a town in the Nigerian state of Kwara. 
       It originated from Ife and currently the local
       government headquarters of Irepodun local government.
-    </Popup>
+    </Popup> */}
     </Marker>
 
     );
@@ -45,7 +54,7 @@ class OpenSeaMap extends Component {
     // ));
 
     return (
-      <div className='container' >
+      <div className='map' >
        <MapContainer MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>
         <TileLayer
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
@@ -54,14 +63,6 @@ class OpenSeaMap extends Component {
           {/* {positions} */}
           {this.props.Entities.map((pos, index) => (
             this.makeIcon(index,pos)
-          // <Marker name={"test"} key={index} icon={friend} position={pos.position} >
-          //     <Popup>
-          //     Omu-Aran the Head Post of Igbomina land, 
-          //     is a town in the Nigerian state of Kwara. 
-          //     It originated from Ife and currently the local
-          //     government headquarters of Irepodun local government.
-          //   </Popup>
-          //   </Marker>
         ))}
       </MapContainer>
       </div>

webapp/src/components/OpenSeaMap/OpenSeaMap.scss

@@ -7,11 +7,12 @@
 }
 
 
-.container {
+.map {
   padding-top: 1%;
   height: 800px;
-  width: 79%;
-  padding-left: 20%;
+  width: 76%;
+  // padding-left: 20%;
+  float: left;
 }
 
 // .leaflet-marker-icon{

webapp/src/components/OpenSeaMap/icon.jsx

@@ -1,4 +1,4 @@
-import {L, Icon} from 'leaflet';
+import { Icon} from 'leaflet';
 import ms from 'milsymbol'
 
 const iconShip = new Icon({
@@ -50,10 +50,11 @@ switch (Type) {
     break;
 
   default:
-    SideLetter = "N";
+    TypeLetter = "S";
     break;
 }
 
+
 var IconS = new ms.Symbol(
   "S"+SideLetter+TypeLetter+"*"+"--------"
 )

webapp/src/components/control/Tracklist/index.js

@@ -0,0 +1,3 @@
+import Tracklist from "./tracklist.jsx";
+
+export default Tracklist;

webapp/src/components/control/Tracklist/tracklist.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import './tracklist.scss'
+
+
+
+
+class Tracklist extends React.Component
+{
+    render()
+    {
+        
+        return(
+                <div className="tracklist">
+                    <table>
+                        <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Course</th>
+                            <th>Lat</th>
+                            <th>Lon</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        { this.props.entities.map((val,index) => {
+                            return (
+                                <tr key={index}>
+                                    <td>{val.Name}</td>
+                                    <td>{val.Course}</td>
+                                    <td>{val.position[0]}</td>
+                                    <td>{val.position[1]}</td>
+
+                                </tr>
+                            )
+                        })}
+                        </tbody>
+                    </table>
+                </div>
+        );
+    }
+
+}
+
+export default Tracklist;
+

webapp/src/components/control/Tracklist/tracklist.scss

@@ -0,0 +1,8 @@
+.tracklist
+{
+ display: flex;
+}
+
+td
+{
+text-align: left;}

webapp/src/components/control/controls.css

@@ -1,4 +1,5 @@
 .controls{
     display: flex;
     width: 20%;
+    float: left;
 }

webapp/src/components/control/controls.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import './controls.css'
 import { sendMsg } from '../api';
-
+import  Tracklist from './Tracklist'
 class Controls extends React.Component
 {
   constructor(props) {
@@ -25,7 +25,8 @@ class Controls extends React.Component
     render() {
         return (
           <div className="controls">
-            <button onClick={this.getMessage}> click me!</button>
+            <Tracklist entities= {this.props.Entities} />
+            {/* <button onClick={this.getMessage}> click me!</button> */}
           </div>
         );
       }

webapp/src/components/control/index.js

@@ -0,0 +1,3 @@
+import Controls from "./controls.jsx";
+
+export default Controls;