From 2518b436452d581a024e172d298676adc76ed669 Mon Sep 17 00:00:00 2001 From: hwinkel Date: Mon, 2 Oct 2023 17:56:53 +0200 Subject: [PATCH] ADD: the api call to create a new Entity --- webapp/src/App.jsx | 17 ++++- .../src/components/OpenSeaMap/OpenSeaMap.jsx | 27 ++++++- .../src/components/control/EntityControl.jsx | 71 ++++++++++++++++--- webapp/src/components/control/controls.jsx | 45 +++++++++--- 4 files changed, 136 insertions(+), 24 deletions(-) diff --git a/webapp/src/App.jsx b/webapp/src/App.jsx index 3dfb920..30818ad 100644 --- a/webapp/src/App.jsx +++ b/webapp/src/App.jsx @@ -29,7 +29,8 @@ const client = new W3CWebSocket("ws://"+config.apiUrl+":"+config.apiProt+"/"); class App extends Component { state = { Entities: [], - EntityOnFocus: undefined + EntityOnFocus: undefined, + PositionClicked: undefined } componentDidMount() { @@ -104,6 +105,16 @@ class App extends Component { }); } + + setFocusPosition(props) + { + + // console.log(Entity); + this.setState({ + PositionClicked: props + }); + } + render() { @@ -113,9 +124,9 @@ class App extends Component {
- + - +
diff --git a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx b/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx index 2c350b2..5c554f7 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, Tooltip } from 'react-leaflet' +import { MapContainer, TileLayer,Marker, Popup, Tooltip,useMapEvents } from 'react-leaflet' import { friend,Hostile, iconShip,createIcon } from "./icon"; import "./OpenSeaMap.scss"; import {w3cwebsocket as W3CWebSocket} from "websocket"; @@ -11,7 +11,7 @@ import ContainerDimensions from 'react-container-dimensions'; class OpenSeaMap extends Component { state = { - EntityOnFocus: undefined + EntityOnFocus: undefined, } updateDimensions() { const height = window.innerWidth >= 992 ? window.innerHeight : 400 @@ -36,9 +36,13 @@ class OpenSeaMap extends Component { handleClick(e) { // console.log(e.target) + // this.setState({ currentPos: e.latlng }); + console.log(e.latlng); + console.log("hello world"); } + // MarkerEventHandler = useMemo( // (e) => ({ // dragend() { @@ -115,7 +119,24 @@ class OpenSeaMap extends Component { ); } + setPos(props) + { + console.log(props); + + this.props.setFocusPosition([1,2]) + } + render() { +const LocationFinderDummy = (props) => { + const map = useMapEvents({ + click(e) { + + props.props.setFocusPosition(e.latlng) + // console.log(e.latlng); + }, + }); + return null; + }; // const positions = this.props.Positions.map((pos, index) => ( // // )); @@ -123,6 +144,8 @@ class OpenSeaMap extends Component { return (
+ + { + if(props.PositionCliecked !== undefined) + { + console.log(props.PositionCliecked) + var pos = [0,0]; + pos[0] = props.PositionCliecked.lat; + pos[1] = props.PositionCliecked.lng + setFormData({...formData,position:pos}); + } + + },[props.PositionCliecked]) + + // Entity.Entity.Course @@ -76,11 +95,16 @@ const handleClick = (e) => { } }; + const handleNameInput = (e) => { + setFormData({...formData,name:e.currentTarget.value}); + + } + const emptyForm= (e) => { setFormData({name:'',course:'',speed:'',position:['','']}) - setEntity('') + setEntity(undefined) } @@ -91,8 +115,37 @@ const handleClick = (e) => { const handleSubmit = (e) => { e.preventDefault(); - console.log(e.target.data); - console.log(formData) + // console.log(e.target.data); + // console.log(formData) + console.log(Entity) + if(Entity === undefined) + { + var msg = + { + Data: "Entity", + Type: "New", + Speed: formData.speed, + Course: formData.course, + Position: formData.position + + } + + }else { + var msg = + { + Data: "Entity", + Type: "Update", + ID: Entity.id, + Speed: formData.speed, + Course: formData.course, + Position: formData.position + + } + + } + console.log(msg); + + // props.Client.send(JSON.stringify(msg)); // alert(`Course: ${formData.course}`); } // console.log(Entity) @@ -107,7 +160,7 @@ const handleClick = (e) => {
- +
diff --git a/webapp/src/components/control/controls.jsx b/webapp/src/components/control/controls.jsx index ce6f651..41698cc 100644 --- a/webapp/src/components/control/controls.jsx +++ b/webapp/src/components/control/controls.jsx @@ -48,22 +48,47 @@ state = { { if(SelectedEntity !== undefined) { - let tmp = []; + var tmp = {}; + // tmp.NewPos= new Array(0,0); + // console.log(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 = val + // tmp = JSON.parse(JSON.stringify(val)); + // console.log(tmp); + + + // console.log(SelectedEntity); + + if(SelectedEntity.NewPos !== undefined) + { + // Object.assign(tmp, {NewPos: [{},{}]}); + Object.assign(val, {NewPos: [{},{}]}); + + // tmp.OldPos = val.Position; + // Object.assign(tmp, {NewPos: [round(SelectedEntity.NewPos[0],3),0]}); + // val.NewPos = SelectedEntity.NewPos; + val.NewPos[0] = round(SelectedEntity.NewPos[0],3); + val.NewPos[1] = round(SelectedEntity.NewPos[1],3); + + // tmp.NewPos[0] = round(SelectedEntity.NewPos[0],3); + // tmp.NewPos[1] = round(SelectedEntity.NewPos[1],3); + + }else{ + + // Object.assign(tmp, {NewPos: val.Position}); + + // tmp.NewPosition[1] = val.Position[1]; + } - tmp.NewPos = SelectedEntity.NewPos; + // tmp.NewPos = SelectedEntity.NewPos; } - + return tmp; }) + // console.log(tmp); return tmp; } } @@ -76,7 +101,7 @@ state = {
- +