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

ADD: added debug webseit und fixed some bugs

Browse Source
This commit is contained in:
Henry Winkel
2024-02-15 18:39:44 +01:00
parent f9e5916081
commit 5a59f87f13
14 changed files with 460 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,6 +14,9 @@ import Track from "./Track.tsx";
import './SimControl.scss'
import EntityTrackList from "./components/EntityTrackList";
import { getWSTestMessage } from "../api/APICalls";
const config = {
@@ -33,6 +36,12 @@ class SimControl extends Component {
TrackList_: new TrackListClass()
}
componentWillUnmount()
{
// client.close();
}
componentDidMount() {
console.log(config.apiUrl);
@@ -111,13 +120,13 @@ class SimControl extends Component {
updateEntities()
{
var msg =
{
Type: "Request",
Data: "COP"
// var msg =
// {
// Type: "Request",
// Data: "COP"
}
client.send(JSON.stringify(msg));
// }
client.send(getWSTestMessage());
}
getEntityFromID(Entities, SelectedEntity)
@@ -154,7 +163,7 @@ class SimControl extends Component {
setFocusPosition(props)
{
console.log(props);
// console.log(props);
this.setState({
PositionClicked: props
});

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

@@ -97,7 +97,7 @@ function EntityControl(props)
}else{
console.log("reset");
setFormData({name:"",course:"",speed:"",position:["",""],height:"" })
setEntity(undefined);
}
@@ -109,7 +109,7 @@ function EntityControl(props)
if(props.PositionClicked !== undefined)
{
// setEntity(undefined);
console.log(props.PositionClicked)
// console.log(props.PositionClicked)
var pos = [0,0];
pos[0] = props.PositionClicked.lat;
pos[1] = props.PositionClicked.lng

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

@@ -1,13 +1,12 @@
// import { useMapEvents } from 'react-leaflet/hooks'
import React, { Component } from "react";
import { MapContainer, TileLayer,Marker, Popup, Tooltip,useMapEvents,contextmenu } from 'react-leaflet'
import { friend,Hostile, iconShip,createIcon } from "./icon";
import { MapContainer, TileLayer,Marker, Popup, Tooltip,useMapEvents } from 'react-leaflet'
import { createIcon } from "./icon";
import "./OpenSeaMap.scss";
import {w3cwebsocket as W3CWebSocket} from "websocket";
// 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";
@@ -35,6 +34,8 @@ class OpenSeaMap extends Component {
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions.bind(this))
}
@@ -50,7 +51,7 @@ class OpenSeaMap extends Component {
}
markerOnClick(e) {
console.log(e);
// console.log(e);
}
@@ -67,27 +68,29 @@ class OpenSeaMap extends Component {
}))
this.props.setEntityOnFocus(Track.Id);
// this.props.setEntityOnFocus(Ent)
// // this.draggable = true;
}
deleteEntity(e)
deleteEntity(id)
{
var Track = this.props.TrackList.getTrack(e.relatedTarget.options.data);
if(Track !== undefined)
// console.log(id);
try {
var msg =
{
var msg =
{
Data: "Entity",
Type: "Delete",
ID: Track.Id,
}
console.log(JSON.stringify(msg));
this.props.Client.send(JSON.stringify(msg))
this.forceUpdate();
Data: "Entity",
Type: "Delete",
ID: id,
}
this.props.TrackList.deteleTrack(id);
this.props.Client.send(JSON.stringify(msg))
this.forceUpdate();
} catch (error) {
console.log(error);
}
}
@@ -97,7 +100,11 @@ class OpenSeaMap extends Component {
if(e !== undefined)
{
var Track = this.props.TrackList.getTrack(e.relatedTarget.options.data);
Track.isOnEdit = false;
if(Track !== undefined)
{
Track.isOnEdit = false;
}
console.log(Track);
}
this.props.setEntityOnFocus(undefined);
@@ -132,7 +139,7 @@ class OpenSeaMap extends Component {
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={entity.Id} icon={icon} position={entity.Position} data={entity.Id}
draggable={isOnFocus? true : false}
contextmenu={true}
contextmenuWidth={140}
@@ -144,21 +151,7 @@ class OpenSeaMap extends Component {
},{
text:"Delete",
index: 1,
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,
callback: this.deleteEntity.bind(this,entity.Id),
}, {
text:"Test",
callback: this.markerOnClick.bind(this),
@@ -173,19 +166,11 @@ class OpenSeaMap extends Component {
eventHandlers={{
click: (e) => {
console.log(e.target);
// var Ent = {
// EntityID : e.target.options.data,
// NewPos : undefined
// }
// this.setState((state) =>({
// EntityOnFocus: Ent
// }))
// this.props.setEntityOnFocus(Ent);
console.log(entity.Name);
console.log(entity.id);
this.props.setEntityOnFocus(e.target.options.data)
// this.props.setEntityOnFocus(e.target.options.data);
},
dragend: this.setNewEntityPosition.bind(this),
@@ -193,15 +178,11 @@ class OpenSeaMap extends Component {
// eventHandlers={this.MarkerEventHandler}
>
{/* <Popup>
Omu-Aran the Head Post of Igbomina land,
is a town in the Nigerian state of Kwara.
It originated from Ife and currently the local
government headquarters of Irepodun local government.
</Popup> */}
<Tooltip direction='bottom' offset={[0,13]} opacity={1} permanent>
<span>{entity.Name}</span>
</Tooltip>
</Marker>
);
}
@@ -236,14 +217,11 @@ const LocationFinderDummy = (props) => {
// this.state.EntityOnFocus = undefined;
return null;
};
// const positions = this.props.Positions.map((pos, index) => (
// <Marker name={"test"} key={index} position={pos.position} icon= {ship} />
// ));
return (
<div className='map' style={{ height: this.state.height }} >
<MapContainer center={[54, 11]} zoom={6} scrollWheelZoom={true} contextmenu={false}
<MapContainer center={[54, 11]} zoom={6} scrollWheelZoom={true} contextmenu={false} attributionControl={false}
>
<LocationFinderDummy props ={{props:this.props, resetFocus:this.resetFocus.bind(this)}} />
@@ -252,16 +230,12 @@ const LocationFinderDummy = (props) => {
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<TileLayer
url="https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png" />
{/* {positions} */}
{/* <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>
);