From 8a4795296e181e26893b926a7bac624e0c4e631c Mon Sep 17 00:00:00 2001 From: hwinkel Date: Fri, 10 Nov 2023 13:28:11 +0100 Subject: [PATCH] ADD: added request for tracklist for entity --- webapp/package-lock.json | 27 ++++ webapp/package.json | 1 + .../src/components/SimControl/SimControl.jsx | 7 +- .../src/components/SimControl/SimControl.scss | 1 + .../src/components/SimControl/Tracklist.tsx | 1 - .../EntityControl/EntityControl.jsx | 5 +- .../components/EntityControl/controls.css | 5 - .../EntityTrackList/EntityTrackList.jsx | 136 ++++++++++++++++++ .../EntityTrackList.scss} | 0 .../components/EntityTrackList/index.js | 3 + 10 files changed, 177 insertions(+), 9 deletions(-) create mode 100644 webapp/src/components/SimControl/components/EntityTrackList/EntityTrackList.jsx rename webapp/src/components/SimControl/components/{EntityInternalTracklist/index.js => EntityTrackList/EntityTrackList.scss} (100%) create mode 100644 webapp/src/components/SimControl/components/EntityTrackList/index.js diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 2c5b63a..b39fa2e 100644 --- a/webapp/package-lock.json +++ b/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", diff --git a/webapp/package.json b/webapp/package.json index cf502de..d770882 100644 --- a/webapp/package.json +++ b/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" }, diff --git a/webapp/src/components/SimControl/SimControl.jsx b/webapp/src/components/SimControl/SimControl.jsx index 7dbc404..72f5ee9 100644 --- a/webapp/src/components/SimControl/SimControl.jsx +++ b/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} /> - - Internaltracklist + + Orders diff --git a/webapp/src/components/SimControl/SimControl.scss b/webapp/src/components/SimControl/SimControl.scss index f5cdcdd..8edb945 100644 --- a/webapp/src/components/SimControl/SimControl.scss +++ b/webapp/src/components/SimControl/SimControl.scss @@ -2,4 +2,5 @@ /* display: flex; */ width: 24%; float: left; + min-width: 400px; } \ No newline at end of file diff --git a/webapp/src/components/SimControl/Tracklist.tsx b/webapp/src/components/SimControl/Tracklist.tsx index 5b9594a..c147324 100644 --- a/webapp/src/components/SimControl/Tracklist.tsx +++ b/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; diff --git a/webapp/src/components/SimControl/components/EntityControl/EntityControl.jsx b/webapp/src/components/SimControl/components/EntityControl/EntityControl.jsx index 2630cf7..18b502b 100644 --- a/webapp/src/components/SimControl/components/EntityControl/EntityControl.jsx +++ b/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:"" }) } diff --git a/webapp/src/components/SimControl/components/EntityControl/controls.css b/webapp/src/components/SimControl/components/EntityControl/controls.css index 7078082..03fca6b 100644 --- a/webapp/src/components/SimControl/components/EntityControl/controls.css +++ b/webapp/src/components/SimControl/components/EntityControl/controls.css @@ -1,8 +1,3 @@ -.controls{ - /* display: flex; */ - width: 24%; - float: left; -} .ControlsComponent{ display: grid; diff --git a/webapp/src/components/SimControl/components/EntityTrackList/EntityTrackList.jsx b/webapp/src/components/SimControl/components/EntityTrackList/EntityTrackList.jsx new file mode 100644 index 0000000..7014f98 --- /dev/null +++ b/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( +
+ + + + + + + + + + + + + + + { TrackList.map((val,index) => { + return ( + + + + + + + + + + + ) + })} + +
NameCourseSpeedDistanceBearingKindSide
{val.Name}{val.Course}{val.Speed}{}{}{val.Type}{val.Side}
+
+ + + +)} + +export default EntityTrackList; \ No newline at end of file diff --git a/webapp/src/components/SimControl/components/EntityInternalTracklist/index.js b/webapp/src/components/SimControl/components/EntityTrackList/EntityTrackList.scss similarity index 100% rename from webapp/src/components/SimControl/components/EntityInternalTracklist/index.js rename to webapp/src/components/SimControl/components/EntityTrackList/EntityTrackList.scss diff --git a/webapp/src/components/SimControl/components/EntityTrackList/index.js b/webapp/src/components/SimControl/components/EntityTrackList/index.js new file mode 100644 index 0000000..99cc6e3 --- /dev/null +++ b/webapp/src/components/SimControl/components/EntityTrackList/index.js @@ -0,0 +1,3 @@ +import EntityTrackList from "./EntityTrackList"; + +export default EntityTrackList; \ No newline at end of file