136 lines
3.8 KiB
JavaScript
136 lines
3.8 KiB
JavaScript
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; |