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

ADD: added TRacklistClass and track class

Browse Source
This commit is contained in:
Henry Winkel
2023-11-09 17:19:45 +01:00
parent 46f041d58e
commit 8f703dd1c7
15 changed files with 350 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 (
<div className="App">
<div className="Content">
<Controls Functions= {this.Functions} Client= {client} Entities= {this.state.Entities} updateEntities = {this.updateEntities} EntityOnFocus = {this.state.EntityOnFocus} PositionClicked = {this.state.PositionClicked} />
{/* <Controls TrackList = {this.state.TrackList_} Functions= {this.Functions} Client= {client} Entities= {this.state.Entities} updateEntities = {this.updateEntities} EntityOnFocus = {this.state.EntityOnFocus} PositionClicked = {this.state.PositionClicked} /> */}
<div className="controls">
<Tracklist entities= {this.state.TrackList_} />
<Tabs
defaultActiveKey="home"
transition={false}
id="noanim-tab-example"
className="mb-3"
>
<Tab eventKey="home" title="Home">
<EntityControl
Functions = {this.props.Functions}
Client = { client }
Entity = { this.state.EntityOnFocus}
PositionClicked = {this.props.PositionClicked}
/>
</Tab>
<Tab eventKey="internalTrack" title="Internaltrack">
Internaltracklist
</Tab>
<Tab eventKey="orders" title="Orders">
Orders
</Tab>
</Tabs>
</div>
<OpenSeaMap Entities= {this.state.Entities} Client= {client} updateEntities = {this.updateEntities} setEntityOnFocus = {this.setEntityOnFocus.bind(this)} setFocusPosition = {this.setFocusPosition.bind(this)}/>
<OpenSeaMap TrackListMap = {this.state.TrackList_.getTracks()} TrackList = {this.state.TrackList_} setFocusPosition = {this.setFocusPosition.bind(this)} setEntityOnFocus = {this.setEntityOnFocus.bind(this)} />
</div>

5
webapp/src/components/SimControl/SimControl.scss
View File

@@ -0,0 +1,5 @@
.controls{
/* display: flex; */
width: 24%;
float: left;
}

38
webapp/src/components/SimControl/Track.tsx Normal file
View File

@@ -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

86
webapp/src/components/SimControl/Tracklist.tsx Normal file
View File

@@ -0,0 +1,86 @@
import { ObjectType } from 'typescript';
import Track from './Track'
class TrackListCLass
{
constructor()
{
this.trackMap = new Map<string, Track>();
}
trackMap: Map<string, Track> ;
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<Track>();
this.trackMap.forEach((val,index) =>
Tracks.push(val)
)
return Tracks;
}
getTrackMap()
{
return this.trackMap;
}
}
export default TrackListCLass

89
webapp/src/components/SimControl/components/control/EntityControl.jsx → webapp/src/components/SimControl/components/EntityControl/EntityControl.jsx
View File

@@ -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()],

0
webapp/src/components/SimControl/components/control/controls.css → webapp/src/components/SimControl/components/EntityControl/controls.css
View File

56
webapp/src/components/SimControl/components/control/controls.jsx → webapp/src/components/SimControl/components/EntityControl/controls.jsx
View File

@@ -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 (
<div className="controls">
<Tracklist entities= {this.props.Entities} />
<Tracklist entities= {this.props.TrackList} />
<br />
<div><button onClick={ this.saveScenario}> Save Scenario</button></div>
<Tabs
{/* <Tabs
defaultActiveKey="home"
transition={false}
id="noanim-tab-example"
@@ -91,8 +76,7 @@ state = {
<EntityControl
Functions = {this.props.Functions}
Client = { this.props.Client }
Entity = { getEntityFromID(this.props.Entities,this.props.EntityOnFocus)}
EntityOnFocus= {this.props.EntityOnFocus}
TrackList = { this.props.TrackList}
PositionCliecked = {this.props.PositionClicked}
/>
</Tab>
@@ -102,7 +86,7 @@ state = {
<Tab eventKey="orders" title="Orders">
Orders
</Tab>
</Tabs>
</Tabs> */}
<div className="controls">
{/* <button onClick={this.props.updateEntities}>update</button> */}

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

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

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

@@ -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 (
<Marker name={entity.Name} key={index} icon={icon} position={entity.Position} data={entity.id}
<Marker name={entity.Name} key={index} icon={icon} position={entity.Position} data={entity.Id}
draggable={isOnFocus? true : false}
contextmenu={true}
contextmenuWidth={140}
contextmenuItems={[{
text:"Edit",
index:0,
callback: this.setOnFocus.bind(this),
callback: this.setOnEdit.bind(this),
},{
text:"Delete",
index: 1,
@@ -120,8 +133,7 @@ class OpenSeaMap extends Component {
}
console.log(JSON.stringify(msg));
props.Client.send(JSON.stringify(msg))
state.EntityOnFocus = undefined;
props.setEntityOnFocus(undefined)
this.markerOnClick.bind(this)
},
// separator: true,
@@ -133,23 +145,13 @@ class OpenSeaMap extends Component {
}, {
text:"Exit",
callback: this.resetFocus.bind(this),
// function()
// {
// state.EntityOnFocus = undefined;
// props.setEntityOnFocus(undefined);
// },
// separator: true,
index: 3
}]}
// contextmenuItems: [{
// text: 'Circle 1',
// callback: function() {
// circleContextClick(circle1);
// }
// }]
eventHandlers={{
click: (e) => {
// 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) => {
<TileLayer
url="https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png" />
{/* {positions} */}
{this.props.Entities.map((pos, index) => (
{/* <Marker position={[55,8]} ></Marker> */}
{/* {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)
))}
))} */}
</MapContainer>
</div>
);

0
webapp/src/components/SimControl/components/control/Tracklist/index.js → webapp/src/components/SimControl/components/Tracklist/index.js
View File

6
webapp/src/components/SimControl/components/control/Tracklist/tracklist.jsx → webapp/src/components/SimControl/components/Tracklist/tracklist.jsx
View File

@@ -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
</tr>
</thead>
<tbody>
{ this.props.entities.map((val,index) => {
{ this.props.entities.getTracks().map((val,index) => {
return (
<tr key={index}>
<td >{val.Name}</td>

0
webapp/src/components/SimControl/components/control/Tracklist/tracklist.scss → webapp/src/components/SimControl/components/Tracklist/tracklist.scss
View File

3
webapp/src/components/SimControl/components/control/index.js
View File

@@ -1,3 +0,0 @@
import Controls from "./controls.jsx";
export default Controls;