From 229a4d7906d9664ba83a1fef30086cc3492bc201 Mon Sep 17 00:00:00 2001 From: hwinkel Date: Sun, 1 Oct 2023 10:22:37 +0200 Subject: [PATCH] ADD: added possibility to drag marker and get the new position for updating a entity --- webapp/src/App.jsx | 5 +- .../src/components/OpenSeaMap/OpenSeaMap.jsx | 65 +++++++++++++++++-- .../src/components/control/EntityControl.jsx | 8 ++- webapp/src/components/control/controls.jsx | 34 +++++++--- 4 files changed, 91 insertions(+), 21 deletions(-) diff --git a/webapp/src/App.jsx b/webapp/src/App.jsx index 1974f8b..3dfb920 100644 --- a/webapp/src/App.jsx +++ b/webapp/src/App.jsx @@ -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 diff --git a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx b/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx index 6f3cd29..2c350b2 100644 --- a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx +++ b/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx @@ -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,19 +39,68 @@ 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; icon = createIcon(entity.Type,entity.Side) return ( { // 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} + > {/* 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. */} + + {entity.Name} + - ); } diff --git a/webapp/src/components/control/EntityControl.jsx b/webapp/src/components/control/EntityControl.jsx index fcda08e..87aa7f2 100644 --- a/webapp/src/components/control/EntityControl.jsx +++ b/webapp/src/components/control/EntityControl.jsx @@ -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}) + } diff --git a/webapp/src/components/control/controls.jsx b/webapp/src/components/control/controls.jsx index d10b3a6..ce6f651 100644 --- a/webapp/src/components/control/controls.jsx +++ b/webapp/src/components/control/controls.jsx @@ -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,17 +44,28 @@ state = { render() { - function getEntityFromID(Entities, SelectedKey) + function getEntityFromID(Entities, SelectedEntity) { - let tmp = []; - Entities.map((val,index) => { - if(val.id === SelectedKey) + if(SelectedEntity !== undefined) { - tmp = val + let tmp = []; + 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; } - - }) - return tmp; }