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

ADD: addded a tracklist sanitizer

Browse Source
This commit is contained in:
Henry Winkel
2023-12-20 15:44:26 +01:00
parent 8a4795296e
commit f9e5916081
8 changed files with 178 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,7 @@ import {w3cwebsocket as W3CWebSocket} from "websocket"
import OpenSeaMap from "./components/OpenSeaMap/OpenSeaMap";
import EntityControl from './components/EntityControl/EntityControl';
import Tracklist from './components/Tracklist'
import Equipment from './components/EntityControl/components/Equipment'
import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';
@@ -41,15 +42,19 @@ class SimControl extends Component {
client.onmessage = (message) => {
const dataFromServer = JSON.parse(message.data);
// console.log('reply: ', dataFromServer);
if(dataFromServer.Data === "COP")
// console.log('reply: ', dataFromServer);
if(dataFromServer.Data === "COP" && dataFromServer.Entities !== undefined )
{
var idsFromWs = [];
dataFromServer.Entities.forEach((elementFromWS, indexWS) => {
idsFromWs.push(elementFromWS.id);
});
this.state.TrackList_.checkifTrackIsStillSended(idsFromWs);
// this.state.TrackList_.deleteAll();
var allTracks = this.state.TrackList_.getArrayOfKeys();
dataFromServer.Entities.forEach((elementFromWS, indexWS) => {
// console.log(elementFromWS);
@@ -62,6 +67,7 @@ class SimControl extends Component {
this.state.TrackList_.addTrack(structuredClone(new Track(elementFromWS)));
}
});
@@ -71,6 +77,11 @@ class SimControl extends Component {
// Entities: structuredClone(tmp)
}))
}else if(dataFromServer.Entities === undefined)
{
this.state.TrackList_.deleteAll();
console.log("delting all");
console.log(this.state.TrackList_.getSize());
}
}
@@ -143,7 +154,7 @@ class SimControl extends Component {
setFocusPosition(props)
{
// console.log(Entity);
console.log(props);
this.setState({
PositionClicked: props
});
@@ -176,11 +187,14 @@ class SimControl extends Component {
Functions = {this.props.Functions}
Client = { client }
Entity = { this.state.EntityOnFocus}
PositionClicked = {this.props.PositionClicked}
PositionClicked = {this.state.PositionClicked}
/>
</Tab>
<Tab eventKey="EntityTrackList" title="Entity Tracklist">
<EntityTrackList Entity = { this.state.EntityOnFocus} />
<Tab eventKey="Equipment" title="Equipment">
<Equipment Entity ={this.state.EntityOnFocus} />
</Tab>
<Tab eventKey="internalTrack" title="internal Tracks">
Internaltracklist
</Tab>
<Tab eventKey="orders" title="Orders">
Orders
@@ -188,7 +202,7 @@ class SimControl extends Component {
</Tabs>
</div>
<OpenSeaMap TrackListMap = {this.state.TrackList_.getTracks()} TrackList = {this.state.TrackList_} setFocusPosition = {this.setFocusPosition.bind(this)} setEntityOnFocus = {this.setEntityOnFocus.bind(this)} />
<OpenSeaMap Client = {client} TrackListMap = {this.state.TrackList_.getTracks()} TrackList = {this.state.TrackList_} setFocusPosition = {this.setFocusPosition.bind(this)} setEntityOnFocus = {this.setEntityOnFocus.bind(this)} />
</div>

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

@@ -61,6 +61,17 @@ class TrackListCLass
return this.trackMap.size;
}
getArrayOfKeys()
{
var Tracks = new Array<string>();
this.trackMap.forEach((val,index) =>
Tracks.push(val.Id)
)
return Tracks;
}
getTracks()
{
var Tracks = new Array<Track>();
@@ -78,6 +89,28 @@ class TrackListCLass
return this.trackMap;
}
deteleTrack(id :string)
{
this.trackMap.delete(id);
}
deleteAll()
{
this.trackMap.clear();
}
checkifTrackIsStillSended(tracksFromWS: Array<string>)
{
this.trackMap.forEach((val,index) => {
if(!tracksFromWS.includes(val.Id))
{
this.deteleTrack(val.Id);
console.log("deleted: " + val.Id);
};
});
}
}

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

@@ -109,14 +109,14 @@ function EntityControl(props)
if(props.PositionClicked !== undefined)
{
// setEntity(undefined);
// console.log(props.PositionCliecked)
console.log(props.PositionClicked)
var pos = [0,0];
pos[0] = props.PositionCliecked.lat;
pos[1] = props.PositionCliecked.lng
pos[0] = props.PositionClicked.lat;
pos[1] = props.PositionClicked.lng
setFormData({...formData,name:"",course:0,speed:0,position:pos});
}
},[props.PositionCliecked])
},[props.PositionClicked])
@@ -242,7 +242,7 @@ const handleClick = (e) => {
}
setFormData({name:'',course:0,speed:0,position:[0,0],height:0})
setEntity(undefined)
props.Functions.resetEntityOnFocus();
// props.Functions.resetEntityOnFocus();
}

0
webapp/src/components/SimControl/components/EntityControl/components/Equipment/Equipment.css Normal file
View File

60
webapp/src/components/SimControl/components/EntityControl/components/Equipment/Equipment.jsx Normal file
View File

@@ -0,0 +1,60 @@
import React from "react"
import {useState,useEffect, useRef} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './Equipment.css'
function Equipment(props)
{
const [Entity, setEntity] = useState(undefined);
const [EntitySelected, setEntitySelected] = useState(false)
useEffect(() => {
if(props.Entity !== undefined)
{
setEntity(props.Entity);
setEntitySelected(true);
}else
{
setEntitySelected(false);
}
console.log(props)
},[props.Entity])
return (
<div>
<b>{EntitySelected ? '' : 'no Entity Selected'}</b>
</div>
);
}
export default Equipment;

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

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

45
webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx
View File

@@ -71,6 +71,26 @@ class OpenSeaMap extends Component {
// // this.draggable = true;
}
deleteEntity(e)
{
var Track = this.props.TrackList.getTrack(e.relatedTarget.options.data);
if(Track !== undefined)
{
var msg =
{
Data: "Entity",
Type: "Delete",
ID: Track.Id,
}
console.log(JSON.stringify(msg));
this.props.Client.send(JSON.stringify(msg))
this.forceUpdate();
}
}
resetFocus(e)
{
@@ -124,18 +144,20 @@ class OpenSeaMap extends Component {
},{
text:"Delete",
index: 1,
callback: function() {
var msg =
{
Data: "Entity",
Type: "Delete",
ID: entity.id,
}
console.log(JSON.stringify(msg));
props.Client.send(JSON.stringify(msg))
this.markerOnClick.bind(this)
callback: this.deleteEntity.bind(this),
},
// callback: function() {
// var msg =
// {
// Data: "Entity",
// Type: "Delete",
// ID: entity.id,
// }
// console.log(JSON.stringify(msg));
// props.Client.send(JSON.stringify(msg))
// this.markerOnClick.bind(this)
// },
// separator: true,
}, {
text:"Test",
@@ -203,6 +225,7 @@ const LocationFinderDummy = (props) => {
// props.props.props.setEntityOnFocus(undefined);
props.props.props.setFocusPosition(e.latlng)

23
webapp/src/components/SimControl/components/Tracklist/tracklist.jsx
View File

@@ -1,16 +1,25 @@
import React from 'react';
import './tracklist.scss'
import round from '../../../Utils';
import {useState,useEffect, useRef} from 'react';
class Tracklist extends React.Component
{
// class Tracklist extends React.Component
function Tracklist(props) {
render()
{
useEffect(() => {
console.log("tracklist")
return(
},[])
return(
<div className="tracklist">
<table>
<thead>
@@ -26,7 +35,7 @@ class Tracklist extends React.Component
</tr>
</thead>
<tbody>
{ this.props.entities.getTracks().map((val,index) => {
{ props.entities.getTracks().map((val,index) => {
return (
<tr key={index}>
<td >{val.Name}</td>
@@ -44,7 +53,7 @@ class Tracklist extends React.Component
</table>
</div>
);
}
}