ADD: added TRacklistClass and track class

webapp/package-lock.json

@@ -23,6 +23,7 @@
         "react-scripts": "^5.0.1",
         "react-use-websocket": "^4.3.1",
         "sass": "^1.66.1",
+        "typescript": "^5.2.2",
         "web-vitals": "^2.1.4",
         "websocket": "^1.0.34"
       }
@@ -16627,16 +16628,15 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.9.5",
+      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
     "node_modules/unbox-primitive": {

webapp/package.json

@@ -18,6 +18,7 @@
     "react-scripts": "^5.0.1",
     "react-use-websocket": "^4.3.1",
     "sass": "^1.66.1",
+    "typescript": "^5.2.2",
     "web-vitals": "^2.1.4",
     "websocket": "^1.0.34"
   },

webapp/src/components/SimControl/SimControl.jsx

@@ -1,8 +1,16 @@
 import React, { Component } from "react";
 import {w3cwebsocket as W3CWebSocket} from "websocket"
 // import Header from './components/Header';
-import Controls from "./components/control/controls";
 import OpenSeaMap from "./components/OpenSeaMap/OpenSeaMap";
+import EntityControl from  './components/EntityControl/EntityControl';
+import  Tracklist from './components/Tracklist'
+
+import Tab from 'react-bootstrap/Tab';
+import Tabs from 'react-bootstrap/Tabs';
+
+import TrackListClass  from "./Tracklist.tsx";
+import Track from "./Track.tsx";
+
 
 const config = {
     // apiUrl: process.env.REACT_APP_WEBAPP_WS_URL,
@@ -17,7 +25,8 @@ class SimControl extends Component {
     state =  {
         Entities: [],
         EntityOnFocus: undefined,
-        PositionClicked: undefined
+        PositionClicked: undefined,
+        TrackList_: new TrackListClass()
       }
 
       componentDidMount() {
@@ -33,55 +42,32 @@ class SimControl extends Component {
      
            if(dataFromServer.Data === "COP")
            {
-             if(dataFromServer.Entities === undefined)
-             {
-               dataFromServer.Entities = [];
-             }
-             // console.log(this.state.EntityOnFocus);
-             let tmp = new Array(); ;
          
-             if(this.state.Entities !== undefined && this.state.Entities.length !== 0){
              
-               if(dataFromServer.Entities.length > 0)
+             
-               {
+          
+            
                dataFromServer.Entities.forEach((elementFromWS, indexWS) => {
               
-                 if (this.isStored(elementFromWS.id) !== true) 
-                 {
-                   tmp.push(elementFromWS);
-                 }
-                 this.state.Entities.forEach((elementStored, indexStore) => {
-                   if(elementFromWS.id === elementStored.id)
-                   {
-                     // console.log(elementStored);
-     
-                     if(elementStored.onFocus !==true | elementStored.onFocus === undefined)
-                     {
-                       tmp.push(elementFromWS);
-     
-                     }else
-                     {
-                       tmp.push(elementStored);
-                     }
-                   }else{
                 // console.log(elementFromWS);
-                     //  tmp.push(elementFromWS);
+                if(this.state.TrackList_.isInList(elementFromWS.id))
-                   }
+                {
-                 });
+                     this.state.TrackList_.updateTrack(elementFromWS);
                      
-               });
-             }
                 }else{
-               tmp = dataFromServer.Entities;
+                
+                  this.state.TrackList_.addTrack(structuredClone(new Track(elementFromWS)));
                 }
-             // console.log(tmp);
+               
+                 
+               });
+             
+            //  console.log(this.state.TrackList_.getSize());
                this.setState((state) => ({
-             //  Entities: structuredClone(dataFromServer.Entities)
+            //  //  Entities: structuredClone(dataFromServer.Entities)
-              Entities: structuredClone(tmp)
+            //   Entities: structuredClone(tmp)
      
-             })
+             }))
-             
-             )
            }
            
          }
@@ -127,42 +113,10 @@ class SimControl extends Component {
      
          setEntityOnFocus(Entity) 
          {
-           if(Entity === undefined)
-           {
-             this.resetEntityOnFocus();
-             return;
-           }
-     
-           this.getEntityFromID(this.state.Entities,Entity)
            console.log(Entity);
           this.setState({
-             EntityOnFocus: Entity
+            EntityOnFocus: structuredClone(this.state.TrackList_.getTrack(Entity))
-           });
+          })
-           this.state.Entities.forEach((element, index) => {
-             // console.log(element);
-     
-             if(element.id === Entity.EntityID)
-             {
-               var tmpList = structuredClone(this.state.Entities);
-               tmpList[index].onFocus = true;  
-               if(Entity.NewPos !== undefined)
-               {
-                 tmpList[index].Position = Entity.NewPos        
-               }
-               this.setState({
-                 Entities: structuredClone(tmpList)
-               });
-               if(Entity.dragged !== undefined)
-               {
-                 if(Entity.dragged === true)
-                 {
-                   tmpList[index].dragged = true;
-                 }
-               }
-               console.log(tmpList[index]);
-     
-             }
-           });
      
          }
          resetEntityOnFocus()
@@ -194,20 +148,44 @@ class SimControl extends Component {
      
          Functions = {
          updateEntities: this.updateEntities.bind(this),
-         resetEntityOnFocus: this.resetEntityOnFocus.bind(this)
+         resetEntityOnFocus: this.resetEntityOnFocus.bind(this),
+         PositionClicked: this.setFocusPosition.bind(this)
          }
          
          render() {
      
-         const {name} = this.state;
          return (
            <div className="App">
              
              <div className="Content">
                
-             <Controls Functions= {this.Functions} Client= {client} Entities= {this.state.Entities} updateEntities = {this.updateEntities} EntityOnFocus = {this.state.EntityOnFocus} PositionClicked = {this.state.PositionClicked} />
+             {/* <Controls TrackList = {this.state.TrackList_} Functions= {this.Functions} Client= {client}  Entities= {this.state.Entities} updateEntities = {this.updateEntities} EntityOnFocus = {this.state.EntityOnFocus} PositionClicked = {this.state.PositionClicked} /> */}
+            <div className="controls">
+            <Tracklist entities= {this.state.TrackList_} />
+             <Tabs
+              defaultActiveKey="home"
+              transition={false}
+              id="noanim-tab-example"
+              className="mb-3"
+            >
+              <Tab eventKey="home" title="Home">
+                <EntityControl 
+                  Functions = {this.props.Functions} 
+                  Client = { client } 
+                  Entity = { this.state.EntityOnFocus} 
+                  PositionClicked =  {this.props.PositionClicked}
+                />        
+              </Tab>
+              <Tab eventKey="internalTrack" title="Internaltrack">
+               Internaltracklist
+              </Tab>
+              <Tab eventKey="orders" title="Orders">
+               Orders
+              </Tab>
+            </Tabs>
+            </div>
             
-             <OpenSeaMap Entities= {this.state.Entities} Client= {client} updateEntities = {this.updateEntities} setEntityOnFocus = {this.setEntityOnFocus.bind(this)} setFocusPosition = {this.setFocusPosition.bind(this)}/>
+             <OpenSeaMap TrackListMap = {this.state.TrackList_.getTracks()} TrackList = {this.state.TrackList_} setFocusPosition = {this.setFocusPosition.bind(this)} setEntityOnFocus = {this.setEntityOnFocus.bind(this)} />
              </div>
              
            

webapp/src/components/SimControl/SimControl.scss

@@ -0,0 +1,5 @@
+.controls{
+    /* display: flex; */
+    width: 24%;
+    float: left;
+}

webapp/src/components/SimControl/Track.tsx

@@ -0,0 +1,38 @@
+class Track{
+    Id : string;
+    Name =  String();
+    Type = String();
+    Side = String();
+    Course = Number();
+    Speed = Number();
+    External = Boolean();
+    Height = Number();
+    Position = [Number(), Number()]
+    isOnFucus = Boolean();
+    isOnEdit = Boolean();
+
+    constructor(input)
+    {
+        if(input.id !== undefined)
+        {
+            this.Id = input.id;
+        }else{
+            return;
+        }
+ 
+        this.Name = input.Name;
+        this.Course = input.Course;
+        this.Speed = input.Speed;
+        this.External = input.External;
+        this.Height = input.Height;
+        this.Position = input.Position;
+        this.Type = input.Type;
+        this.Side = input.Side;
+        this.isOnFucus = false;
+        this.isOnEdit = false;
+
+        
+
+    }
+};
+export default Track

webapp/src/components/SimControl/Tracklist.tsx

@@ -0,0 +1,86 @@
+
+import { ObjectType } from 'typescript';
+import Track from './Track'
+
+
+class TrackListCLass
+{
+    constructor()
+        {
+            this.trackMap = new Map<string, Track>();
+        }
+    
+    
+    trackMap: Map<string, Track>  ;
+
+   
+    getTrack(id :string)
+    {
+        return this.trackMap.get(id);
+    }
+
+    isInList(id :string)
+    {
+        return this.trackMap.has(id);
+    }
+
+    addTrack(track :Track)
+    {
+        this.trackMap.set(track.Id,track);
+    }
+
+    updateTrack(input: { id: string; Name: string; Course: number; Speed: number; External: boolean; Height: number; Position: number[]; Type: string; Side: string; })
+    {
+        
+      var Track =   this.trackMap.get(input.id);
+      if(Track === undefined)
+      {
+        return;
+      }
+
+      if(Track.isOnEdit === false)
+      {
+        console.log("update");
+        Track.Name = input.Name;
+        Track.Course = input.Course;
+        Track.Speed = input.Speed;
+        Track.External = input.External;
+        Track.Height = input.Height;
+        Track.Position = input.Position;
+        Track.Type = input.Type;
+        Track.Side = input.Side;
+       
+      }
+    }
+
+    getKeys()
+    {
+        return this.trackMap.keys;
+    }
+    getSize()
+    {
+        return this.trackMap.size;
+    }
+
+    getTracks() 
+    {   
+        var Tracks = new Array<Track>();
+        this.trackMap.forEach((val,index) => 
+            Tracks.push(val)
+        )
+        
+
+        return Tracks;
+    }
+
+
+    getTrackMap()
+    {
+        return this.trackMap;
+    }
+
+   
+}
+
+
+export default  TrackListCLass

webapp/src/components/SimControl/components/EntityControl/EntityControl.jsx

@@ -29,42 +29,81 @@ function EntityControl(props)
    
  
       
-    useEffect(() => {    // Update the document title using the browser API    document.title = `You clicked ${count} times`;  
+    // useEffect(() => {    // Update the document title using the browser API    document.title = `You clicked ${count} times`;  
 
     //     console.log(props.Entity);
 
+    //         if(props.Entity !== undefined)
+    //         {   
+    //             setEntity(Entity);
+    //             setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position,height:round(props.Entity.Height,RoundPrecision)})
+
+                
+
+    //             // // console.log(props.Entity)
+    //             // if(Entity === undefined)
+    //             // {
+    //             //     setEntity(props.Entity);
+    //             //     setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position,height:round(props.Entity.Height,RoundPrecision) })
+
+    //             // }else if(Entity.id !== props.Entity.id)
+    //             // {
+    //             //     setEntity(props.Entity);
+    //             //     setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position,height:round(props.Entity.Height,RoundPrecision)})
+    //             //     console.log("new entity")
+    //             // } else if(Entity.id === props.Entity.id && Entity.Position !== props.Entity.Position)
+    //             // {
+    //             //     setFormData({...formData,position:props.Entity.Position,height:round(props.Entity.Height,RoundPrecision)})
+    //             //     setPositionDragged(true);
+    //             //     console.log("dragged");
+
+    //             // }
+    //             // setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position})
+
+    //         }
+
+      
+
+      
+        
+    // },[Entity, props.Entity]);
+
+    useEffect(() => {
+        // console.log(props.Entity);
+
+        // console.log(Entity);
         if(props.Entity !== undefined)
         {
-                // console.log(props.Entity)
+            setEntity(structuredClone(props.Entity));
             if(Entity === undefined)
             {
                 setEntity(props.Entity);
                 setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position,height:round(props.Entity.Height,RoundPrecision) })
 
-                }else if(Entity.id !== props.Entity.id)
+            }else if(Entity.Id !== props.Entity.Id)
             {
                 setEntity(props.Entity);
                 setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position,height:round(props.Entity.Height,RoundPrecision)})
-
+                console.log("new entity")
-                } else if(Entity.id === props.Entity.id && Entity.Position !== props.Entity.Position)
+            } else if(Entity.Id === props.Entity.Id && Entity.Position !== props.Entity.Position)
             {
                 setFormData({...formData,position:props.Entity.Position,height:round(props.Entity.Height,RoundPrecision)})
                 setPositionDragged(true);
-                    
+                console.log("dragged");
 
             }
-                // setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position})
+        }else{
+            setFormData({name:"",course:"",speed:"",position:["",""],height:"" })
 
         }
         
 
+    },[props.Entity])
 
 
  
-    },[props.Entity,props]);
-
     useEffect(() => {
-        if(props.PositionCliecked !== undefined)
+        if(props.PositionClicked !== undefined)
         {   
             //  setEntity(undefined);
             // console.log(props.PositionCliecked)
@@ -256,7 +295,7 @@ const handleClick = (e) => {
                 {
                   Data: "Entity",
                   Type: "Update",
-                  ID: Entity.id,
+                  ID: Entity.Id,
                   Speed: formData.speed.toString(),
                   Course: formData.course.toString(),
                   Position: [formData.position[0].toString(),formData.position[1].toString()],

webapp/src/components/SimControl/components/EntityControl/controls.jsx

@@ -7,6 +7,7 @@ import round from '../../../Utils';
 // import {w3cwebsocket as W3CWebSocket} from "websocket"
 import Tab from 'react-bootstrap/Tab';
 import Tabs from 'react-bootstrap/Tabs';
+import Track from '../../Track';
 
 
 class Controls extends React.Component
@@ -16,17 +17,26 @@ state = {
   EntityOnFocus: undefined,
 }
 
-  componentDidMount()
-  {
  
-  if (this.props.Entities === undefined) 
+  getEntityOnEdit(Entities)
   {
-    this.props.Entities = new Array();
+  //  console.log(Entities.getTracks());
+  //  Entities.getTracks().map()
+  var val = undefined;
+  var array = Entities.getTracks();
+ for (let index = 0; index <  array.length; index++) 
+ {
+  if(array[index].isOnEdit === true)
+  {
+    val = array[index];
   }
   
  } 
  
 
+  return val;
+  }
+
 
  saveScenario(e)  
  {   
@@ -44,32 +54,7 @@ state = {
  
   
   render() {
-   function getEntityFromID(Entities, SelectedEntity)
-    {
-      if(SelectedEntity !== undefined) 
-      {
-        var tmp = {};
-        // tmp.NewPos= new Array(0,0);
-        // console.log(tmp);
  
-        Entities.map((val) => {
-          if(val.id === SelectedEntity.EntityID)
-          {
-             tmp = val
-            // tmp = JSON.parse(JSON.stringify(val));
-            // console.log(tmp);
-            val.dragged = SelectedEntity.dragged;
-            if(SelectedEntity.dragged === undefined)
-            {
-              val.dragged = false;
-            }
-          }
-          return tmp;
-        })
-        // console.log(tmp);
-        return tmp;
-      }
-    }
 
 
 
@@ -77,11 +62,11 @@ state = {
     // console.log(getEntityFromID(this.props.Entities,this.props.EntityOnFocus));
         return (
           <div className="controls">
-            <Tracklist entities= {this.props.Entities} />
+            <Tracklist entities= {this.props.TrackList} />
           <br />
           <div><button onClick={ this.saveScenario}> Save Scenario</button></div>      
 
-              <Tabs
+              {/* <Tabs
               defaultActiveKey="home"
               transition={false}
               id="noanim-tab-example"
@@ -91,8 +76,7 @@ state = {
                 <EntityControl 
                   Functions = {this.props.Functions} 
                   Client = { this.props.Client } 
-                  Entity = { getEntityFromID(this.props.Entities,this.props.EntityOnFocus)} 
+                  TrackList = { this.props.TrackList} 
-                  EntityOnFocus= {this.props.EntityOnFocus} 
                   PositionCliecked =  {this.props.PositionClicked}
                 />        
               </Tab>
@@ -102,7 +86,7 @@ state = {
               <Tab eventKey="orders" title="Orders">
                Orders
               </Tab>
-            </Tabs>
+            </Tabs> */}
             <div className="controls">
               {/* <button onClick={this.props.updateEntities}>update</button>                 */}
 

webapp/src/components/SimControl/components/EntityControl/index.js

@@ -0,0 +1,3 @@
+import EntityControl from "../EntityControl/EntityControl";
+
+export default EntityControl;

webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx

@@ -7,12 +7,15 @@ import "./OpenSeaMap.scss";
 import {w3cwebsocket as W3CWebSocket} from "websocket";
 // import ContainerDimensions  from 'react-container-dimensions';
 import {} from "leaflet-contextmenu";
+import TrackListCLass from "../../Tracklist.tsx";
+import Track from "../../Track.tsx";
 
 
 class OpenSeaMap extends Component {
 
+  
   state =  {
-    EntityOnFocus: undefined,
+    EntityOnFocus: Track,
   } 
   updateDimensions() {
     const height = window.innerWidth >= 950 ? window.innerHeight : 400
@@ -25,7 +28,9 @@ class OpenSeaMap extends Component {
 
   componentDidMount() {
     window.addEventListener("resize", this.updateDimensions.bind(this))
-    console.log(this.state.EntityOnFocus);
+    // console.log(this.state.EntityOnFocus);
+
+  
 
 
   }
@@ -50,56 +55,64 @@ class OpenSeaMap extends Component {
   }
 
 
-  setOnFocus(e)
+  setOnEdit(e)
   {
-    console.log(e.relatedTarget);
+    var Track = this.props.TrackList.getTrack(e.relatedTarget.options.data);
-    e.relatedTarget.dragging.enable();
+    Track.isOnEdit = true;
-    e.relatedTarget.options.draggable = true;
+    // console.log(Track);
-    var Ent = {
+
-      EntityID : e.relatedTarget.options.data,
+    
-      NewPos : undefined   
-    }
     this.setState((state) =>({
-      EntityOnFocus: Ent
+      EntityOnFocus: Track
     }))
-    this.props.setEntityOnFocus(Ent)
+    this.props.setEntityOnFocus(Track.Id);
-    // this.draggable = true;
+
+    // this.props.setEntityOnFocus(Ent)
+    // // this.draggable = true;
   }
 
 
   resetFocus(e)
   {
-
+    if(e !== undefined)
-    this.state.EntityOnFocus = undefined;
+    {
+      var Track = this.props.TrackList.getTrack(e.relatedTarget.options.data);
+      Track.isOnEdit = false;
+      console.log(Track);
+    }
     this.props.setEntityOnFocus(undefined);
 
   }
 
 
+  setNewEntityPosition(e)
+  {
+    // console.log(e.target.options);
+    var Track = this.props.TrackList.getTrack(e.target.options.data);
+    Track.isOnEdit = true;
+    Track.Position = [e.target._latlng.lat,e.target._latlng.lng];
+    // console.log(Track);
+    this.props.setEntityOnFocus(e.target.options.data);
+
+  }
+
+
 
   makeIcon(index, entity,props,state)
   {
-    var isOnFocus = false;
-    if(this.state.EntityOnFocus !== undefined){
-      // console.log(entity.id+ " " , this.state.EntityOnFocus);
-      // console.log(props+ " " , this.state.EntityOnFocus);
 
-      if(entity.id === this.state.EntityOnFocus.EntityID)
+    // console.log(entity);
+    var isOnFocus = false;
+
+      if(entity.isOnEdit === true)
       {
         isOnFocus = true
-        // if(this.state.EntityOnFocus.NewPos !== undefined)
-        // {
-        //  entity.pos =  this.state.EntityOnFocus.NewPos;
-        // }
         
       }
 
-    }
+    var icon = createIcon(entity.Type,entity.Side)
-
-    var icon;
-    icon = createIcon(entity.Type,entity.Side)
     return (
-      <Marker name={entity.Name} key={index} icon={icon} position={entity.Position} data={entity.id} 
+      <Marker name={entity.Name}  key={index} icon={icon} position={entity.Position} data={entity.Id} 
       draggable={isOnFocus? true : false}
       contextmenu={true}
       contextmenuWidth={140}
@@ -107,7 +120,7 @@ class OpenSeaMap extends Component {
       contextmenuItems={[{
         text:"Edit",
         index:0,
-        callback: this.setOnFocus.bind(this),
+        callback: this.setOnEdit.bind(this),
       },{    
         text:"Delete",
         index: 1,
@@ -120,8 +133,7 @@ class OpenSeaMap extends Component {
           }
           console.log(JSON.stringify(msg));
           props.Client.send(JSON.stringify(msg))
-          state.EntityOnFocus = undefined;
+          this.markerOnClick.bind(this)
-          props.setEntityOnFocus(undefined)
 
         },
         // separator: true,
@@ -133,23 +145,13 @@ class OpenSeaMap extends Component {
   }, {
       text:"Exit",
       callback: this.resetFocus.bind(this),
-      // function()
+      
-      // {
-      //   state.EntityOnFocus = undefined;
-      //   props.setEntityOnFocus(undefined);
-      // },
-      // separator: true,
       index: 3
   }]}
-  //     contextmenuItems: [{
+ 
-  //   text: 'Circle 1',
-  //   callback: function() {
-  //     circleContextClick(circle1);
-  //   }
-  // }]
       eventHandlers={{
         click: (e) => {
-          // console.log(e.target);  
+          console.log(e.target);  
           // var Ent = {
           //   EntityID :  e.target.options.data,
           //   NewPos : undefined
@@ -159,31 +161,12 @@ class OpenSeaMap extends Component {
           //   EntityOnFocus: Ent
           // }))
           // this.props.setEntityOnFocus(Ent);
+          this.props.setEntityOnFocus(e.target.options.data)
 
           // this.props.setEntityOnFocus(e.target.options.data);
         },
-        dragend: (e) =>
+        dragend: this.setNewEntityPosition.bind(this),
-        { 
-          var Ent = {
-            EntityID :  e.target.options.data,
-            NewPos : [e.target._latlng.lat,e.target._latlng.lng],
-            dragged: true
         
-          }
-          this.setState((state) =>({
-            EntityOnFocus: Ent
-          }))
-          
-          this.props.setEntityOnFocus(Ent);
-          // console.log(e.target);
-          
-          // console.log(e.target._latlng);
-          
-        },
-        // contextmenu: (e) => 
-        // {
-        //   console.log("right click");
-        // }
       }} 
       // eventHandlers={this.MarkerEventHandler}
        >
@@ -214,7 +197,7 @@ const  LocationFinderDummy = (props) => {
         
            click(e) {
 
-             console.log(props)
+            //  console.log(props)
              props.props.resetFocus();
             // props.props.state.EntityOnFocus =undefined
              
@@ -247,9 +230,15 @@ const  LocationFinderDummy = (props) => {
         <TileLayer
           url="https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png" />    
           {/* {positions} */}
-          {this.props.Entities.map((pos, index) => (
+          {/* <Marker position={[55,8]} ></Marker> */}
-            this.makeIcon(index,pos,this.props,this.state)
+          {/* {console.log(this.props)} */}
+          {
+            this.props.TrackListMap.map((element,index) => (
+            this.makeIcon(index,element)
           ))}
+          {/* {this.props.Entities.map((pos, index) => (
+            this.makeIcon(index,pos,this.props,this.state)
+             ))} */}
       </MapContainer>
        </div>
     );

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import './tracklist.scss'
-import round from '../../../../Utils';
+import round from '../../../Utils';
 
 
 
@@ -26,7 +26,7 @@ class Tracklist extends React.Component
                         </tr>
                         </thead>
                         <tbody>
-                        { this.props.entities.map((val,index) => {
+                        { this.props.entities.getTracks().map((val,index) => {
                             return (
                                 <tr key={index}>
                                     <td >{val.Name}</td>

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

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