From f9e59160817d5fb062bf370d33c8aa2fc2032104 Mon Sep 17 00:00:00 2001 From: Henry Winkel Date: Wed, 20 Dec 2023 15:44:26 +0100 Subject: [PATCH] ADD: addded a tracklist sanitizer --- .../src/components/SimControl/SimControl.jsx | 40 +++++++++---- .../src/components/SimControl/Tracklist.tsx | 33 ++++++++++ .../EntityControl/EntityControl.jsx | 10 ++-- .../components/Equipment/Equipment.css | 0 .../components/Equipment/Equipment.jsx | 60 +++++++++++++++++++ .../components/Equipment/index.js | 3 + .../components/OpenSeaMap/OpenSeaMap.jsx | 45 ++++++++++---- .../components/Tracklist/tracklist.jsx | 23 ++++--- 8 files changed, 178 insertions(+), 36 deletions(-) create mode 100644 webapp/src/components/SimControl/components/EntityControl/components/Equipment/Equipment.css create mode 100644 webapp/src/components/SimControl/components/EntityControl/components/Equipment/Equipment.jsx create mode 100644 webapp/src/components/SimControl/components/EntityControl/components/Equipment/index.js diff --git a/webapp/src/components/SimControl/SimControl.jsx b/webapp/src/components/SimControl/SimControl.jsx index 72f5ee9..96edb0b 100644 --- a/webapp/src/components/SimControl/SimControl.jsx +++ b/webapp/src/components/SimControl/SimControl.jsx @@ -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} /> - - + + + + + Internaltracklist Orders @@ -188,7 +202,7 @@ class SimControl extends Component { - + diff --git a/webapp/src/components/SimControl/Tracklist.tsx b/webapp/src/components/SimControl/Tracklist.tsx index c147324..a81c021 100644 --- a/webapp/src/components/SimControl/Tracklist.tsx +++ b/webapp/src/components/SimControl/Tracklist.tsx @@ -61,6 +61,17 @@ class TrackListCLass return this.trackMap.size; } + getArrayOfKeys() + { + var Tracks = new Array(); + this.trackMap.forEach((val,index) => + Tracks.push(val.Id) + ) + + + return Tracks; + } + getTracks() { var Tracks = new Array(); @@ -78,6 +89,28 @@ class TrackListCLass return this.trackMap; } + deteleTrack(id :string) + { + this.trackMap.delete(id); + } + + deleteAll() + { + this.trackMap.clear(); + } + + checkifTrackIsStillSended(tracksFromWS: Array) + { + this.trackMap.forEach((val,index) => { + if(!tracksFromWS.includes(val.Id)) + { + this.deteleTrack(val.Id); + console.log("deleted: " + val.Id); + }; + }); + + } + } diff --git a/webapp/src/components/SimControl/components/EntityControl/EntityControl.jsx b/webapp/src/components/SimControl/components/EntityControl/EntityControl.jsx index 18b502b..a09d68f 100644 --- a/webapp/src/components/SimControl/components/EntityControl/EntityControl.jsx +++ b/webapp/src/components/SimControl/components/EntityControl/EntityControl.jsx @@ -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(); } diff --git a/webapp/src/components/SimControl/components/EntityControl/components/Equipment/Equipment.css b/webapp/src/components/SimControl/components/EntityControl/components/Equipment/Equipment.css new file mode 100644 index 0000000..e69de29 diff --git a/webapp/src/components/SimControl/components/EntityControl/components/Equipment/Equipment.jsx b/webapp/src/components/SimControl/components/EntityControl/components/Equipment/Equipment.jsx new file mode 100644 index 0000000..c4c87b9 --- /dev/null +++ b/webapp/src/components/SimControl/components/EntityControl/components/Equipment/Equipment.jsx @@ -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 ( + +
+ {EntitySelected ? '' : 'no Entity Selected'} +
+ ); +} + +export default Equipment; \ No newline at end of file diff --git a/webapp/src/components/SimControl/components/EntityControl/components/Equipment/index.js b/webapp/src/components/SimControl/components/EntityControl/components/Equipment/index.js new file mode 100644 index 0000000..261d700 --- /dev/null +++ b/webapp/src/components/SimControl/components/EntityControl/components/Equipment/index.js @@ -0,0 +1,3 @@ +import Equipment from "./Equipment"; + +export default Equipment; diff --git a/webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx b/webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx index 4958ee8..76cd0fd 100644 --- a/webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx +++ b/webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx @@ -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) diff --git a/webapp/src/components/SimControl/components/Tracklist/tracklist.jsx b/webapp/src/components/SimControl/components/Tracklist/tracklist.jsx index 1bf2476..f807baf 100644 --- a/webapp/src/components/SimControl/components/Tracklist/tracklist.jsx +++ b/webapp/src/components/SimControl/components/Tracklist/tracklist.jsx @@ -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(
@@ -26,7 +35,7 @@ class Tracklist extends React.Component - { this.props.entities.getTracks().map((val,index) => { + { props.entities.getTracks().map((val,index) => { return ( @@ -44,7 +53,7 @@ class Tracklist extends React.Component
{val.Name}
); - } + }