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

ADD: added possibility to drag marker and get the new position for updating a entity

Browse Source
This commit is contained in:
hwinkel
2023-10-01 10:22:37 +02:00
parent 3a3901fbec
commit 229a4d7906
4 changed files with 91 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
webapp/src/App.jsx
View File

@@ -29,7 +29,7 @@ const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
class App extends Component {
state = {
Entities: [],
EntityOnFocus: []
EntityOnFocus: undefined
}
componentDidMount() {
@@ -41,7 +41,7 @@ class App extends Component {
client.onmessage = (message) => {
const dataFromServer = JSON.parse(message.data);
console.log('reply: ', dataFromServer);
// console.log('reply: ', dataFromServer);
if(dataFromServer.Data === "COP")
{
@@ -97,6 +97,7 @@ class App extends Component {
setEntityOnFocus(Entity)
{
// console.log(Entity);
this.setState({
EntityOnFocus: Entity

63
webapp/src/components/OpenSeaMap/OpenSeaMap.jsx
View File

@@ -1,7 +1,7 @@
// import { useMapEvents } from 'react-leaflet/hooks'
import React, { Component } from "react";
import { MapContainer, TileLayer,Marker, Popup } from 'react-leaflet'
import { MapContainer, TileLayer,Marker, Popup, Tooltip } from 'react-leaflet'
import { friend,Hostile, iconShip,createIcon } from "./icon";
import "./OpenSeaMap.scss";
import {w3cwebsocket as W3CWebSocket} from "websocket";
@@ -10,7 +10,9 @@ import ContainerDimensions from 'react-container-dimensions';
class OpenSeaMap extends Component {
state = {
EntityOnFocus: undefined
}
updateDimensions() {
const height = window.innerWidth >= 992 ? window.innerHeight : 400
this.setState({ height: height })
@@ -37,6 +39,25 @@ class OpenSeaMap extends Component {
console.log("hello world");
}
// MarkerEventHandler = useMemo(
// (e) => ({
// dragend() {
// // const marker = markerRef.current
// // if (marker != null) {
// // // setPosition(marker.getLatLng())
// // }
// console.log(e)
// },
// click: (e) =>
// {
// this.props.setEntityOnFocus(e.target.options.data);
// }
// }),
// [],
// )
makeIcon(index, entity)
{
var icon;
@@ -44,12 +65,42 @@ class OpenSeaMap extends Component {
return (
<Marker name={entity.Name} key={index} icon={icon} position={entity.Position} data={entity.id}
draggable={true}
eventHandlers={{
click: (e) => {
// console.log(e.target.options.data); // will print 'FooBar' in console
this.props.setEntityOnFocus(e.target.options.data);
var Ent = {
Name : e.target.options.data,
NewPos : undefined
}
this.setState((state) =>({
EntityOnFocus: e.target.options.data
}))
this.props.setEntityOnFocus(Ent);
// this.props.setEntityOnFocus(e.target.options.data);
},
}} >
dragend: (e) =>
{
var Ent = {
Name : e.target.options.data,
NewPos : [e.target._latlng.lat,e.target._latlng.lng]
}
this.setState((state) =>({
EntityOnFocus: e.target.options.data
}))
this.props.setEntityOnFocus(Ent);
// console.log(e.target);
// console.log(e.target._latlng);
}
}}
// eventHandlers={this.MarkerEventHandler}
>
{/* <Popup>
Omu-Aran the Head Post of Igbomina land,
@@ -57,8 +108,10 @@ class OpenSeaMap extends Component {
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>
);
}

8
webapp/src/components/control/EntityControl.jsx
View File

@@ -22,21 +22,23 @@ function EntityControl(props)
useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`;
console.log(props.Entity);
// console.log(props.Entity);
setEntity(props.Entity);
if(CourseInControl === false)
{
// setSpeed(props.Entity.Speed);
if(Array.isArray(props.Entity.Position) === true)
if(props.Entity !== undefined)
{
setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position})
}else{
setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:['','']})
setFormData({name:"",course:"",speed:"",position:['','']})
}
// setFormData({speed:props.Entity.Speed})
}

24
webapp/src/components/control/controls.jsx
View File

@@ -4,7 +4,7 @@ import './controls.css'
import Tracklist from './Tracklist'
import EntityControl from './EntityControl';
import {w3cwebsocket as W3CWebSocket} from "websocket"
// import {w3cwebsocket as W3CWebSocket} from "websocket"
// const config = {
@@ -16,7 +16,10 @@ import {w3cwebsocket as W3CWebSocket} from "websocket"
// const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/");
const round = (n, dp) => {
const h = +('1'.padEnd(dp + 1, '0')) // 10 or 100 or 1000 or etc
return Math.round(n * h) / h
}
class Controls extends React.Component
{
@@ -41,18 +44,29 @@ state = {
render() {
function getEntityFromID(Entities, SelectedKey)
function getEntityFromID(Entities, SelectedEntity)
{
if(SelectedEntity !== undefined)
{
let tmp = [];
Entities.map((val,index) => {
if(val.id === SelectedKey)
Entities.map((val) => {
if(val.id === SelectedEntity.Name)
{
tmp = val
if(SelectedEntity.NewPos !== undefined)
{
tmp.OldPos = val.Position;
tmp.Position[0] = round(SelectedEntity.NewPos[0],3);
tmp.Position[1] = round(SelectedEntity.NewPos[1],3);
}
tmp.NewPos = SelectedEntity.NewPos;
}
})
return tmp;
}
}
// console.log(getEntityFromID(this.props.Entities,this.props.EntityOnFocus));