ADD: added small details view on click on an entity

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