henry/CloudSimWebApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD: added request for tracklist for entity

Browse Source
This commit is contained in:
hwinkel
2023-11-10 13:28:11 +01:00
parent 8f703dd1c7
commit 8a4795296e
10 changed files with 177 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
webapp/package-lock.json generated
View File

@@ -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",

1
webapp/package.json
View File

@@ -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"
},

7
webapp/src/components/SimControl/SimControl.jsx
View File

@@ -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">
Internaltracklist
<Tab eventKey="EntityTrackList" title="Entity Tracklist">
<EntityTrackList Entity = { this.state.EntityOnFocus} />
</Tab>
<Tab eventKey="orders" title="Orders">
Orders

1
webapp/src/components/SimControl/SimControl.scss
View File

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

1
webapp/src/components/SimControl/Tracklist.tsx
View File

@@ -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;

5
webapp/src/components/SimControl/components/EntityControl/EntityControl.jsx
View File

@@ -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:"" })
}

5
webapp/src/components/SimControl/components/EntityControl/controls.css
View File

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

136
webapp/src/components/SimControl/components/EntityTrackList/EntityTrackList.jsx Normal file
View File

@@ -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;

0
webapp/src/components/SimControl/components/EntityInternalTracklist/index.js → webapp/src/components/SimControl/components/EntityTrackList/EntityTrackList.scss
View File

3
webapp/src/components/SimControl/components/EntityTrackList/index.js Normal file
View File

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