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

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;