diff --git a/webapp/package-lock.json b/webapp/package-lock.json index aef21f4..2c5b63a 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -23,6 +23,7 @@ "react-scripts": "^5.0.1", "react-use-websocket": "^4.3.1", "sass": "^1.66.1", + "typescript": "^5.2.2", "web-vitals": "^2.1.4", "websocket": "^1.0.34" } @@ -16627,16 +16628,15 @@ } }, "node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", - "peer": true, + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", + "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=4.2.0" + "node": ">=14.17" } }, "node_modules/unbox-primitive": { diff --git a/webapp/package.json b/webapp/package.json index 4dbe338..cf502de 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -18,6 +18,7 @@ "react-scripts": "^5.0.1", "react-use-websocket": "^4.3.1", "sass": "^1.66.1", + "typescript": "^5.2.2", "web-vitals": "^2.1.4", "websocket": "^1.0.34" }, diff --git a/webapp/src/components/SimControl/SimControl.jsx b/webapp/src/components/SimControl/SimControl.jsx index d999b0f..7dbc404 100644 --- a/webapp/src/components/SimControl/SimControl.jsx +++ b/webapp/src/components/SimControl/SimControl.jsx @@ -1,8 +1,16 @@ import React, { Component } from "react"; import {w3cwebsocket as W3CWebSocket} from "websocket" // import Header from './components/Header'; -import Controls from "./components/control/controls"; import OpenSeaMap from "./components/OpenSeaMap/OpenSeaMap"; +import EntityControl from './components/EntityControl/EntityControl'; +import Tracklist from './components/Tracklist' + +import Tab from 'react-bootstrap/Tab'; +import Tabs from 'react-bootstrap/Tabs'; + +import TrackListClass from "./Tracklist.tsx"; +import Track from "./Track.tsx"; + const config = { // apiUrl: process.env.REACT_APP_WEBAPP_WS_URL, @@ -17,7 +25,8 @@ class SimControl extends Component { state = { Entities: [], EntityOnFocus: undefined, - PositionClicked: undefined + PositionClicked: undefined, + TrackList_: new TrackListClass() } componentDidMount() { @@ -33,55 +42,32 @@ class SimControl extends Component { if(dataFromServer.Data === "COP") { - if(dataFromServer.Entities === undefined) - { - dataFromServer.Entities = []; - } - // console.log(this.state.EntityOnFocus); - let tmp = new Array(); ; - - if(this.state.Entities !== undefined && this.state.Entities.length !== 0){ - - if(dataFromServer.Entities.length > 0) - { + + + + + dataFromServer.Entities.forEach((elementFromWS, indexWS) => { - - if (this.isStored(elementFromWS.id) !== true) - { - tmp.push(elementFromWS); - } - this.state.Entities.forEach((elementStored, indexStore) => { - if(elementFromWS.id === elementStored.id) - { - // console.log(elementStored); - - if(elementStored.onFocus !==true | elementStored.onFocus === undefined) - { - tmp.push(elementFromWS); - - }else - { - tmp.push(elementStored); - } - }else{ - // console.log(elementFromWS); - // tmp.push(elementFromWS); - } - }); + + // console.log(elementFromWS); + if(this.state.TrackList_.isInList(elementFromWS.id)) + { + this.state.TrackList_.updateTrack(elementFromWS); + + }else{ + + this.state.TrackList_.addTrack(structuredClone(new Track(elementFromWS))); + } + }); - } - }else{ - tmp = dataFromServer.Entities; - } - // console.log(tmp); - this.setState((state) => ({ - // Entities: structuredClone(dataFromServer.Entities) - Entities: structuredClone(tmp) - - }) - ) + // console.log(this.state.TrackList_.getSize()); + this.setState((state) => ({ + // // Entities: structuredClone(dataFromServer.Entities) + // Entities: structuredClone(tmp) + + })) } } @@ -127,42 +113,10 @@ class SimControl extends Component { setEntityOnFocus(Entity) { - if(Entity === undefined) - { - this.resetEntityOnFocus(); - return; - } - - this.getEntityFromID(this.state.Entities,Entity) console.log(Entity); - this.setState({ - EntityOnFocus: Entity - }); - this.state.Entities.forEach((element, index) => { - // console.log(element); - - if(element.id === Entity.EntityID) - { - var tmpList = structuredClone(this.state.Entities); - tmpList[index].onFocus = true; - if(Entity.NewPos !== undefined) - { - tmpList[index].Position = Entity.NewPos - } - this.setState({ - Entities: structuredClone(tmpList) - }); - if(Entity.dragged !== undefined) - { - if(Entity.dragged === true) - { - tmpList[index].dragged = true; - } - } - console.log(tmpList[index]); - - } - }); + this.setState({ + EntityOnFocus: structuredClone(this.state.TrackList_.getTrack(Entity)) + }) } resetEntityOnFocus() @@ -194,20 +148,44 @@ class SimControl extends Component { Functions = { updateEntities: this.updateEntities.bind(this), - resetEntityOnFocus: this.resetEntityOnFocus.bind(this) + resetEntityOnFocus: this.resetEntityOnFocus.bind(this), + PositionClicked: this.setFocusPosition.bind(this) } render() { - const {name} = this.state; return (
- + {/* */} +
+ + + + + + + Internaltracklist + + + Orders + + +
- +
diff --git a/webapp/src/components/SimControl/SimControl.scss b/webapp/src/components/SimControl/SimControl.scss index e69de29..f5cdcdd 100644 --- a/webapp/src/components/SimControl/SimControl.scss +++ b/webapp/src/components/SimControl/SimControl.scss @@ -0,0 +1,5 @@ +.controls{ + /* display: flex; */ + width: 24%; + float: left; +} \ No newline at end of file diff --git a/webapp/src/components/SimControl/Track.tsx b/webapp/src/components/SimControl/Track.tsx new file mode 100644 index 0000000..e11bd1d --- /dev/null +++ b/webapp/src/components/SimControl/Track.tsx @@ -0,0 +1,38 @@ +class Track{ + Id : string; + Name = String(); + Type = String(); + Side = String(); + Course = Number(); + Speed = Number(); + External = Boolean(); + Height = Number(); + Position = [Number(), Number()] + isOnFucus = Boolean(); + isOnEdit = Boolean(); + + constructor(input) + { + if(input.id !== undefined) + { + this.Id = input.id; + }else{ + return; + } + + this.Name = input.Name; + this.Course = input.Course; + this.Speed = input.Speed; + this.External = input.External; + this.Height = input.Height; + this.Position = input.Position; + this.Type = input.Type; + this.Side = input.Side; + this.isOnFucus = false; + this.isOnEdit = false; + + + + } +}; +export default Track \ No newline at end of file diff --git a/webapp/src/components/SimControl/Tracklist.tsx b/webapp/src/components/SimControl/Tracklist.tsx new file mode 100644 index 0000000..5b9594a --- /dev/null +++ b/webapp/src/components/SimControl/Tracklist.tsx @@ -0,0 +1,86 @@ + +import { ObjectType } from 'typescript'; +import Track from './Track' + + +class TrackListCLass +{ + constructor() + { + this.trackMap = new Map(); + } + + + trackMap: Map ; + + + getTrack(id :string) + { + return this.trackMap.get(id); + } + + isInList(id :string) + { + return this.trackMap.has(id); + } + + addTrack(track :Track) + { + this.trackMap.set(track.Id,track); + } + + updateTrack(input: { id: string; Name: string; Course: number; Speed: number; External: boolean; Height: number; Position: number[]; Type: string; Side: string; }) + { + + var Track = this.trackMap.get(input.id); + if(Track === undefined) + { + return; + } + + if(Track.isOnEdit === false) + { + console.log("update"); + Track.Name = input.Name; + Track.Course = input.Course; + Track.Speed = input.Speed; + Track.External = input.External; + Track.Height = input.Height; + Track.Position = input.Position; + Track.Type = input.Type; + Track.Side = input.Side; + + } + } + + getKeys() + { + return this.trackMap.keys; + } + getSize() + { + return this.trackMap.size; + } + + getTracks() + { + var Tracks = new Array(); + this.trackMap.forEach((val,index) => + Tracks.push(val) + ) + + + return Tracks; + } + + + getTrackMap() + { + return this.trackMap; + } + + +} + + +export default TrackListCLass \ No newline at end of file diff --git a/webapp/src/components/SimControl/components/control/EntityControl.jsx b/webapp/src/components/SimControl/components/EntityControl/EntityControl.jsx similarity index 80% rename from webapp/src/components/SimControl/components/control/EntityControl.jsx rename to webapp/src/components/SimControl/components/EntityControl/EntityControl.jsx index 3fae0d8..2630cf7 100644 --- a/webapp/src/components/SimControl/components/control/EntityControl.jsx +++ b/webapp/src/components/SimControl/components/EntityControl/EntityControl.jsx @@ -27,44 +27,83 @@ function EntityControl(props) const [formData, setFormData] = useState({name: "",course: 0 ,speed: 0,position: [0,0],height:0}); - + - useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; + // useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; - // console.log(props.Entity); + // console.log(props.Entity); - if(props.Entity !== undefined) - { - // console.log(props.Entity) - if(Entity === undefined) - { - setEntity(props.Entity); - setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position,height:round(props.Entity.Height,RoundPrecision) }) + // if(props.Entity !== undefined) + // { + // setEntity(Entity); + // setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position,height:round(props.Entity.Height,RoundPrecision)}) - }else if(Entity.id !== props.Entity.id) - { - setEntity(props.Entity); - setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position,height:round(props.Entity.Height,RoundPrecision)}) + - } else if(Entity.id === props.Entity.id && Entity.Position !== props.Entity.Position) - { - setFormData({...formData,position:props.Entity.Position,height:round(props.Entity.Height,RoundPrecision)}) - setPositionDragged(true); - + // // // console.log(props.Entity) + // // if(Entity === undefined) + // // { + // // setEntity(props.Entity); + // // setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,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}) + // // }else if(Entity.id !== props.Entity.id) + // // { + // // setEntity(props.Entity); + // // setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position,height:round(props.Entity.Height,RoundPrecision)}) + // // 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)}) + // // setPositionDragged(true); + // // console.log("dragged"); - } + // // } + // // setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position}) + + // } - },[props.Entity,props]); + // },[Entity, props.Entity]); useEffect(() => { - if(props.PositionCliecked !== undefined) + // console.log(props.Entity); + + // console.log(Entity); + if(props.Entity !== undefined) + { + setEntity(structuredClone(props.Entity)); + if(Entity === undefined) + { + setEntity(props.Entity); + setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position,height:round(props.Entity.Height,RoundPrecision) }) + + }else if(Entity.Id !== props.Entity.Id) + { + setEntity(props.Entity); + setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position,height:round(props.Entity.Height,RoundPrecision)}) + 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)}) + setPositionDragged(true); + console.log("dragged"); + + } + }else{ + setFormData({name:"",course:"",speed:"",position:["",""],height:"" }) + + } + + + },[props.Entity]) + + + + useEffect(() => { + if(props.PositionClicked !== undefined) { // setEntity(undefined); // console.log(props.PositionCliecked) @@ -256,7 +295,7 @@ const handleClick = (e) => { { Data: "Entity", Type: "Update", - ID: Entity.id, + ID: Entity.Id, Speed: formData.speed.toString(), Course: formData.course.toString(), Position: [formData.position[0].toString(),formData.position[1].toString()], diff --git a/webapp/src/components/SimControl/components/control/controls.css b/webapp/src/components/SimControl/components/EntityControl/controls.css similarity index 100% rename from webapp/src/components/SimControl/components/control/controls.css rename to webapp/src/components/SimControl/components/EntityControl/controls.css diff --git a/webapp/src/components/SimControl/components/control/controls.jsx b/webapp/src/components/SimControl/components/EntityControl/controls.jsx similarity index 63% rename from webapp/src/components/SimControl/components/control/controls.jsx rename to webapp/src/components/SimControl/components/EntityControl/controls.jsx index bee6758..7f10a1d 100644 --- a/webapp/src/components/SimControl/components/control/controls.jsx +++ b/webapp/src/components/SimControl/components/EntityControl/controls.jsx @@ -7,6 +7,7 @@ import round from '../../../Utils'; // import {w3cwebsocket as W3CWebSocket} from "websocket" import Tab from 'react-bootstrap/Tab'; import Tabs from 'react-bootstrap/Tabs'; +import Track from '../../Track'; class Controls extends React.Component @@ -16,16 +17,25 @@ state = { EntityOnFocus: undefined, } - componentDidMount() - { - if (this.props.Entities === undefined) + getEntityOnEdit(Entities) { - this.props.Entities = new Array(); + // console.log(Entities.getTracks()); + // Entities.getTracks().map() + var val = undefined; + var array = Entities.getTracks(); + for (let index = 0; index < array.length; index++) + { + if(array[index].isOnEdit === true) + { + val = array[index]; } - } + } + + return val; + } saveScenario(e) @@ -44,32 +54,7 @@ state = { render() { - function getEntityFromID(Entities, SelectedEntity) - { - if(SelectedEntity !== undefined) - { - var tmp = {}; - // tmp.NewPos= new Array(0,0); - // console.log(tmp); - - Entities.map((val) => { - if(val.id === SelectedEntity.EntityID) - { - tmp = val - // tmp = JSON.parse(JSON.stringify(val)); - // console.log(tmp); - val.dragged = SelectedEntity.dragged; - if(SelectedEntity.dragged === undefined) - { - val.dragged = false; - } - } - return tmp; - }) - // console.log(tmp); - return tmp; - } - } + @@ -77,11 +62,11 @@ state = { // console.log(getEntityFromID(this.props.Entities,this.props.EntityOnFocus)); return (
- +
- @@ -102,7 +86,7 @@ state = { Orders - + */}
{/* */} diff --git a/webapp/src/components/SimControl/components/EntityControl/index.js b/webapp/src/components/SimControl/components/EntityControl/index.js new file mode 100644 index 0000000..d7df142 --- /dev/null +++ b/webapp/src/components/SimControl/components/EntityControl/index.js @@ -0,0 +1,3 @@ +import EntityControl from "../EntityControl/EntityControl"; + +export default EntityControl; diff --git a/webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx b/webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx index 8b27862..4958ee8 100644 --- a/webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx +++ b/webapp/src/components/SimControl/components/OpenSeaMap/OpenSeaMap.jsx @@ -7,12 +7,15 @@ import "./OpenSeaMap.scss"; import {w3cwebsocket as W3CWebSocket} from "websocket"; // import ContainerDimensions from 'react-container-dimensions'; import {} from "leaflet-contextmenu"; +import TrackListCLass from "../../Tracklist.tsx"; +import Track from "../../Track.tsx"; class OpenSeaMap extends Component { + state = { - EntityOnFocus: undefined, + EntityOnFocus: Track, } updateDimensions() { const height = window.innerWidth >= 950 ? window.innerHeight : 400 @@ -25,7 +28,9 @@ class OpenSeaMap extends Component { componentDidMount() { window.addEventListener("resize", this.updateDimensions.bind(this)) - console.log(this.state.EntityOnFocus); + // console.log(this.state.EntityOnFocus); + + } @@ -50,64 +55,72 @@ class OpenSeaMap extends Component { } - setOnFocus(e) + setOnEdit(e) { - console.log(e.relatedTarget); - e.relatedTarget.dragging.enable(); - e.relatedTarget.options.draggable = true; - var Ent = { - EntityID : e.relatedTarget.options.data, - NewPos : undefined - } + var Track = this.props.TrackList.getTrack(e.relatedTarget.options.data); + Track.isOnEdit = true; + // console.log(Track); + + this.setState((state) =>({ - EntityOnFocus: Ent + EntityOnFocus: Track })) - this.props.setEntityOnFocus(Ent) - // this.draggable = true; + this.props.setEntityOnFocus(Track.Id); + + // this.props.setEntityOnFocus(Ent) + // // this.draggable = true; } resetFocus(e) { - - this.state.EntityOnFocus = undefined; + if(e !== undefined) + { + var Track = this.props.TrackList.getTrack(e.relatedTarget.options.data); + Track.isOnEdit = false; + console.log(Track); + } this.props.setEntityOnFocus(undefined); } + setNewEntityPosition(e) + { + // console.log(e.target.options); + var Track = this.props.TrackList.getTrack(e.target.options.data); + Track.isOnEdit = true; + Track.Position = [e.target._latlng.lat,e.target._latlng.lng]; + // console.log(Track); + this.props.setEntityOnFocus(e.target.options.data); + + } + + makeIcon(index, entity,props,state) { - var isOnFocus = false; - if(this.state.EntityOnFocus !== undefined){ - // console.log(entity.id+ " " , this.state.EntityOnFocus); - // console.log(props+ " " , this.state.EntityOnFocus); - if(entity.id === this.state.EntityOnFocus.EntityID) + // console.log(entity); + var isOnFocus = false; + + if(entity.isOnEdit === true) { isOnFocus = true - // if(this.state.EntityOnFocus.NewPos !== undefined) - // { - // entity.pos = this.state.EntityOnFocus.NewPos; - // } - + } - } - - var icon; - icon = createIcon(entity.Type,entity.Side) + var icon = createIcon(entity.Type,entity.Side) return ( - { - // console.log(e.target); + console.log(e.target); // var Ent = { // EntityID : e.target.options.data, // NewPos : undefined @@ -159,31 +161,12 @@ class OpenSeaMap extends Component { // EntityOnFocus: Ent // })) // this.props.setEntityOnFocus(Ent); + this.props.setEntityOnFocus(e.target.options.data) // this.props.setEntityOnFocus(e.target.options.data); }, - dragend: (e) => - { - var Ent = { - EntityID : e.target.options.data, - NewPos : [e.target._latlng.lat,e.target._latlng.lng], - dragged: true - - } - this.setState((state) =>({ - EntityOnFocus: Ent - })) - - this.props.setEntityOnFocus(Ent); - // console.log(e.target); - - // console.log(e.target._latlng); - - }, - // contextmenu: (e) => - // { - // console.log("right click"); - // } + dragend: this.setNewEntityPosition.bind(this), + }} // eventHandlers={this.MarkerEventHandler} > @@ -214,7 +197,7 @@ const LocationFinderDummy = (props) => { click(e) { - console.log(props) + // console.log(props) props.props.resetFocus(); // props.props.state.EntityOnFocus =undefined @@ -247,9 +230,15 @@ const LocationFinderDummy = (props) => { {/* {positions} */} - {this.props.Entities.map((pos, index) => ( + {/* */} + {/* {console.log(this.props)} */} + { + this.props.TrackListMap.map((element,index) => ( + this.makeIcon(index,element) + ))} + {/* {this.props.Entities.map((pos, index) => ( this.makeIcon(index,pos,this.props,this.state) - ))} + ))} */}
); diff --git a/webapp/src/components/SimControl/components/control/Tracklist/index.js b/webapp/src/components/SimControl/components/Tracklist/index.js similarity index 100% rename from webapp/src/components/SimControl/components/control/Tracklist/index.js rename to webapp/src/components/SimControl/components/Tracklist/index.js diff --git a/webapp/src/components/SimControl/components/control/Tracklist/tracklist.jsx b/webapp/src/components/SimControl/components/Tracklist/tracklist.jsx similarity index 93% rename from webapp/src/components/SimControl/components/control/Tracklist/tracklist.jsx rename to webapp/src/components/SimControl/components/Tracklist/tracklist.jsx index bb3ee70..1bf2476 100644 --- a/webapp/src/components/SimControl/components/control/Tracklist/tracklist.jsx +++ b/webapp/src/components/SimControl/components/Tracklist/tracklist.jsx @@ -1,12 +1,12 @@ import React from 'react'; import './tracklist.scss' -import round from '../../../../Utils'; +import round from '../../../Utils'; class Tracklist extends React.Component { - + render() { @@ -26,7 +26,7 @@ class Tracklist extends React.Component - { this.props.entities.map((val,index) => { + { this.props.entities.getTracks().map((val,index) => { return ( {val.Name} diff --git a/webapp/src/components/SimControl/components/control/Tracklist/tracklist.scss b/webapp/src/components/SimControl/components/Tracklist/tracklist.scss similarity index 100% rename from webapp/src/components/SimControl/components/control/Tracklist/tracklist.scss rename to webapp/src/components/SimControl/components/Tracklist/tracklist.scss diff --git a/webapp/src/components/SimControl/components/control/index.js b/webapp/src/components/SimControl/components/control/index.js deleted file mode 100644 index 2e505b2..0000000 --- a/webapp/src/components/SimControl/components/control/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import Controls from "./controls.jsx"; - -export default Controls;