ADD: added request for tracklist for entity

webapp/package-lock.json

@@ -24,6 +24,7 @@
         "react-use-websocket": "^4.3.1",
         "sass": "^1.66.1",
         "typescript": "^5.2.2",
+        "usehooks-ts": "^2.9.1",
         "web-vitals": "^2.1.4",
         "websocket": "^1.0.34"
       }
@@ -8432,6 +8433,19 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -16795,6 +16809,19 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/usehooks-ts": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.9.1.tgz",
+      "integrity": "sha512-2FAuSIGHlY+apM9FVlj8/oNhd+1y+Uwv5QNkMQz1oSfdHk4PXo1qoCw9I5M7j0vpH8CSWFJwXbVPeYDjLCx9PA==",
+      "engines": {
+        "node": ">=16.15.0",
+        "npm": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/utf-8-validate": {
       "version": "5.0.10",
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",

webapp/package.json

@@ -19,6 +19,7 @@
     "react-use-websocket": "^4.3.1",
     "sass": "^1.66.1",
     "typescript": "^5.2.2",
+    "usehooks-ts": "^2.9.1",
     "web-vitals": "^2.1.4",
     "websocket": "^1.0.34"
   },

webapp/src/components/SimControl/SimControl.jsx

@@ -11,6 +11,9 @@ import Tabs from 'react-bootstrap/Tabs';
 import TrackListClass  from "./Tracklist.tsx";
 import Track from "./Track.tsx";
 
+import './SimControl.scss'
+import EntityTrackList from "./components/EntityTrackList";
+
 
 const config = {
     // apiUrl: process.env.REACT_APP_WEBAPP_WS_URL,
@@ -176,8 +179,8 @@ class SimControl extends Component {
                   PositionClicked =  {this.props.PositionClicked}
                 />        
               </Tab>
-              <Tab eventKey="internalTrack" title="Internaltrack">
+              <Tab eventKey="EntityTrackList" title="Entity Tracklist">
-               Internaltracklist
+               <EntityTrackList Entity = { this.state.EntityOnFocus}  />
               </Tab>
               <Tab eventKey="orders" title="Orders">
                Orders

webapp/src/components/SimControl/SimControl.scss

@@ -2,4 +2,5 @@
     /* display: flex; */
     width: 24%;
     float: left;
+    min-width: 400px;
 }

webapp/src/components/SimControl/Tracklist.tsx

@@ -40,7 +40,6 @@ class TrackListCLass
 
       if(Track.isOnEdit === false)
       {
-        console.log("update");
         Track.Name = input.Name;
         Track.Course = input.Course;
         Track.Speed = input.Speed;

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

@@ -87,12 +87,15 @@ function EntityControl(props)
                 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)})
+                // setFormData({...formData,position:props.Entity.Position,height:round(props.Entity.Height,RoundPrecision)})
+                setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position,height:round(props.Entity.Height,RoundPrecision)})
+
                 setPositionDragged(true);
                 console.log("dragged");
 
             }
         }else{
+            console.log("reset");
             setFormData({name:"",course:"",speed:"",position:["",""],height:"" })
 
         }

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

@@ -1,8 +1,3 @@
-.controls{
-    /* display: flex; */
-    width: 24%;
-    float: left;
-}
 
 .ControlsComponent{
 display: grid;

webapp/src/components/SimControl/components/EntityTrackList/EntityTrackList.jsx

@@ -0,0 +1,136 @@
+import { useEffect } from "react";
+import { useState } from "react";
+
+import { useInterval } from 'usehooks-ts'
+
+const config = {
+    // apiUrl: process.env.REACT_APP_WEBAPP_WS_URL,
+    apiUrl: "192.168.3.13",
+    apiProt: 30747
+  }
+const client = new WebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
+  
+
+
+function EntityTrackList( props)
+{
+    
+    const [Entity, setEntity] = useState(undefined);
+    // const [client, setclient] = useState(new WebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/"));
+
+    // const client = new WebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
+        const [TrackList, setTrackList] = useState([]);
+    client.onopen =() =>{
+        console.log("ws client for tracklist is connected");
+        // var msg = 
+        //    {
+        //      Data: "COP",
+        //      Type: "EntityTrackList"
+         
+        //    }
+        //    client.send(JSON.stringify(msg));
+    }
+
+    client.onmessage = (message) => {
+        console.log(message);
+        if(Array.isArray(message)=== true)
+        {
+            
+        }
+    }
+
+    useInterval(
+        () => {
+          // Your custom logic here
+        //   setCount(count + 1)
+        console.log("updating")
+        updateTracklist();
+        },
+        // Delay in milliseconds or null to stop it
+        5000
+        // isPlaying ? delay : null,
+      )
+    
+    const  updateTracklist = () =>
+      {
+        if(Entity !== undefined)
+        {
+            var msg = 
+            {
+              Data: "COP",
+              Type: "EntityTrackList",
+              ID: props.Entity.Id
+          
+            }
+            client.send(JSON.stringify(msg));
+        }
+
+      }
+    useEffect(() => {
+            console.log("wird neu gerendert")
+    },[])
+
+    useEffect(() => {
+        if(props.Entity !== undefined)
+        {
+            if(Entity === undefined)
+            {
+                setEntity(props.Entity);
+            }else
+            {
+                if(props.Entity.Id !== Entity.Id)
+                {
+                    setEntity(props.Entity);
+                }
+            }
+            updateTracklist();
+
+        }
+        console.log(props.Entity);
+
+    },[props.Entity])
+
+    // useEffect(() =>
+    // {
+
+    // },[Entity])
+
+return(
+    <div className="tracklist">
+                    <table>
+                        <thead>
+                        <tr className='TracklistHeader'>
+                            <th className='TracklistHeaderCell'>Name</th>
+                            <th className='TracklistHeaderCell'>Course</th>
+                            <th className='TracklistHeaderCell'>Speed</th>
+                            <th className='TracklistHeaderCell'>Distance</th>
+                            <th className='TracklistHeaderCell'>Bearing</th>
+                            <th className='TracklistHeaderCell'>Kind</th>
+                            <th className='TracklistHeaderCell'>Side</th>
+
+                        </tr>
+                        </thead>
+                        <tbody>
+                        { TrackList.map((val,index) => {
+                            return (
+                                <tr key={index}>
+                                    <td >{val.Name}</td>
+                                    <td className='TracklistCell'>{val.Course}</td>
+                                    <td className='TracklistCell'>{val.Speed}</td>
+                                    <td className='TracklistCell'>{}</td>
+                                    <td className='TracklistCell'>{}</td>
+                                    <td className='TracklistCell'>{val.Type}</td>
+                                    <td className='TracklistCell'>{val.Side}</td>
+
+                                </tr>
+                            )
+                        })}
+                        </tbody>
+                    </table>
+                </div>
+
+
+
+)}
+
+export default EntityTrackList;

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

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