ADD: added tracklist and automated update

webapp/src/App.jsx

@@ -25,19 +25,18 @@ class App extends Component {
   }
   componentDidMount() {
     
-
-
-
       connect((msg) => {
           console.log("New Message")
-          console.log(msg.data)
+          
           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))
             {
@@ -46,27 +45,34 @@ class App extends Component {
               });
             }
           }
+
           // this.state.Entities = jsonMSG
         	// var jsonmsg = JSON.parse(msg);
-      this.setState(prevState => ({
-        // chatHistory: [...this.state.History, msg]
-        // chatHistory: [...this.state.History, msg]
+      // this.setState(prevState => ({
+      //   // chatHistory: [...this.state.History, msg]
+      //   // chatHistory: [...this.state.History, msg]
          
-      }))
+      // }))
   
       console.log(this.state.Entities);
     });
     
 
   }
-  // send() {
-    //   console.log("hello");
-    //   // sendMsg("hello world");
-    // }
 
-    handleCallback = (ChildData) => {
-      this.setState({name: ChildData})
-      console.log(ChildData);
+    updateMap()
+    {
+      var msg = 
+      {
+        Type: "Request",
+        Data: "COP"
+    
+      }
+      sendMsg(JSON.stringify(msg));
+    }
+
+    MapIntervalCallback = () => {
+      this.updateMap()
     }
     
     render() {
@@ -74,16 +80,18 @@ class App extends Component {
     return (
       <div className="App">
         <Header />
-        <Controls />
+        <div className="Content">
+          
+        <Controls Entities= {this.state.Entities} />
         {/* <ChatHistory History={this.state.History} /> */}
-        <div>
+        {/* <div>
         {name}
 
+        </div> */}
+        <OpenSeaMap Entities= {this.state.Entities} parentCallback = {this.MapIntervalCallback}/>
         </div>
-        <OpenSeaMap Entities= {this.state.Entities} parentCallback = {this.handleCallback}/>
         
-
-        <button onClick={this.send}>Hit</button>
+        {/* <button onClick={this.send}>Hit</button> */}
       
       </div>
     );

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;