ADD: added tracklist and automated update

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;