From a4cd33115291ba5ab8def084c2f55ef52c233623 Mon Sep 17 00:00:00 2001 From: hwinkel Date: Wed, 18 Oct 2023 22:17:52 +0200 Subject: [PATCH] ADD: added util function and fix problem with updatin entityOnFocus --- webapp/src/App.jsx | 62 +++++++++++++++++-- .../src/components/OpenSeaMap/OpenSeaMap.jsx | 8 +-- .../src/components/OpenSeaMap/OpenSeaMap.scss | 2 +- webapp/src/components/Utils.jsx | 6 ++ .../src/components/control/EntityControl.jsx | 37 +++++++++-- .../control/Tracklist/tracklist.jsx | 6 +- webapp/src/components/control/controls.jsx | 12 ++-- 7 files changed, 107 insertions(+), 26 deletions(-) create mode 100644 webapp/src/components/Utils.jsx diff --git a/webapp/src/App.jsx b/webapp/src/App.jsx index 9ee5ade..1fea1c8 100644 --- a/webapp/src/App.jsx +++ b/webapp/src/App.jsx @@ -33,6 +33,8 @@ class App extends Component { PositionClicked: undefined } + + componentDidMount() { console.log(config.apiUrl); @@ -48,17 +50,46 @@ class App extends Component { { // console.log(this.state.EntityOnFocus); - this.setState((state) => ({ - Entities: structuredClone(dataFromServer.Entities) + var tmp = [] + if(this.state.Entities.length !== 0){ + + + dataFromServer.Entities.forEach((elementFromWS, indexWS) => { + + this.state.Entities.forEach((elementStored, indexStore) => { + if(elementFromWS.id === elementStored.id) + { + + if(elementStored.onFocus !==true | elementStored.onFocus === undefined) + { + tmp.push(elementFromWS); + }else + { + tmp.push(elementStored); + } + } + }); + + }); + }else{ + tmp = dataFromServer.Entities; + } + // console.log(tmp); + this.setState((state) => ({ + // Entities: structuredClone(dataFromServer.Entities) + Entities: structuredClone(tmp) + }) ) } } + + /// interval for updates setInterval(() => { - // this.updateEntities(); - }, 1000); + this.updateEntities(); + }, 2000); } @@ -103,6 +134,22 @@ class App extends Component { }); } + resetEntityOnFocus() + { + if(this.state.EntityOnFocus !== undefined) + { + this.state.Entities.map((element ,index) => { + if(element.id === this.state.EntityOnFocus.EntityID) + { + this.state.Entities[index].onFocus = undefined; + } + }) + console.log(this.state.Entities) + this.setState({ + EntityOnFocus: undefined + }) + } + } setFocusPosition(props) @@ -114,7 +161,10 @@ class App extends Component { }); } - + Functions = { + updateEntities: this.updateEntities.bind(this), + resetEntityOnFocus: this.resetEntityOnFocus.bind(this) + } render() { const {name} = this.state; @@ -123,7 +173,7 @@ class App extends Component {
- +
diff --git a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx b/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx index 6005027..070fcb3 100644 --- a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx +++ b/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx @@ -15,7 +15,7 @@ class OpenSeaMap extends Component { EntityOnFocus: undefined, } updateDimensions() { - const height = window.innerWidth >= 992 ? window.innerHeight : 400 + const height = window.innerWidth >= 950 ? window.innerHeight : 400 this.setState({ height: height }) } @@ -39,9 +39,9 @@ class OpenSeaMap extends Component { { // console.log(e.target) // this.setState({ currentPos: e.latlng }); - console.log(e.latlng); + // console.log(e.latlng); - console.log("hello world"); + // console.log("hello world"); } @@ -83,7 +83,7 @@ class OpenSeaMap extends Component { } state.EntityOnFocus = Ent; props.setEntityOnFocus(Ent) - console.log(state.EntityOnFocus); + // console.log(state.EntityOnFocus); } }, { text:"Delete", diff --git a/webapp/src/components/OpenSeaMap/OpenSeaMap.scss b/webapp/src/components/OpenSeaMap/OpenSeaMap.scss index f66ad82..fee4194 100644 --- a/webapp/src/components/OpenSeaMap/OpenSeaMap.scss +++ b/webapp/src/components/OpenSeaMap/OpenSeaMap.scss @@ -11,7 +11,7 @@ // display: flex; padding-top: 10px; // height: 750px; - width: 75.5%; + width: 72%; // padding-left: 20%; display: inline-flex; // height: 80%; diff --git a/webapp/src/components/Utils.jsx b/webapp/src/components/Utils.jsx new file mode 100644 index 0000000..b75d3c8 --- /dev/null +++ b/webapp/src/components/Utils.jsx @@ -0,0 +1,6 @@ +const round = (n, dp) => { + const h = +('1'.padEnd(dp + 1, '0')) // 10 or 100 or 1000 or etc + return Math.round(n * h) / h + } + + export default round \ No newline at end of file diff --git a/webapp/src/components/control/EntityControl.jsx b/webapp/src/components/control/EntityControl.jsx index 249cc04..f5a81cb 100644 --- a/webapp/src/components/control/EntityControl.jsx +++ b/webapp/src/components/control/EntityControl.jsx @@ -46,7 +46,7 @@ function EntityControl(props) setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position}) } }else{ - setFormData({name:"",course:"",speed:"",position:['','']}) + // setFormData({name:"",course:"",speed:"",position:['','']}) } // setFormData({speed:props.Entity.Speed}) @@ -77,7 +77,8 @@ function EntityControl(props) const handleClick = (e) => { if(e.detail === 2) { - setCourseInControl(true); + console.log(e) + // setCourseInControl(true); e.target.readOnly = false; // e.target.style = "border: 1px solid" } @@ -94,24 +95,48 @@ const handleClick = (e) => { }; const handleSpeedInput= (e) => { - console.log(e.target) + // console.log(e.target) if(!isNaN(e.nativeEvent?.data)) { setFormData({...formData,speed:e.currentTarget.value}); } + console.log(formData.speed) }; const handleNameInput = (e) => { setFormData({...formData,name:e.currentTarget.value}); } + const handleInput = (e) => { + console.log(e.target.name) + switch (e.target.name) { + case "Lat": + if(!isNaN(e.nativeEvent?.data) ) + { + setFormData({...formData,position:[e.currentTarget.value,formData.position[1],formData.position[2]] }); + } + + break; + case "Lon": + setFormData({...formData,position:[formData.position[0],e.currentTarget.value,formData.position[2]] }); + + break; + case "Height": + setFormData({...formData,position:[formData.position[0],formData.position[1],e.currentTarget.value] }); + + break; + default: + break; + } + } const emptyForm= (e) => { setFormData({name:'',course:'',speed:'',position:['','']}) setEntity(undefined) + props.Functions.resetEntityOnFocus(); } @@ -240,14 +265,14 @@ const handleClick = (e) => {
Lat - +
Lon {/* */} - +
{/*
Lon:
@@ -257,7 +282,7 @@ const handleClick = (e) => {
Height {/* */} - +
{/*
Height:
diff --git a/webapp/src/components/control/Tracklist/tracklist.jsx b/webapp/src/components/control/Tracklist/tracklist.jsx index 66fc446..2e7649e 100644 --- a/webapp/src/components/control/Tracklist/tracklist.jsx +++ b/webapp/src/components/control/Tracklist/tracklist.jsx @@ -1,6 +1,6 @@ import React from 'react'; import './tracklist.scss' - +import round from '../../Utils'; @@ -31,8 +31,8 @@ class Tracklist extends React.Component {val.Name} {val.Course} {val.Speed} - {val.Position[0]} - {val.Position[1]} + {round(val.Position[0],3)} + {round(val.Position[1],3)} {val.Type} {val.Side} diff --git a/webapp/src/components/control/controls.jsx b/webapp/src/components/control/controls.jsx index ac06a88..e06eca6 100644 --- a/webapp/src/components/control/controls.jsx +++ b/webapp/src/components/control/controls.jsx @@ -3,7 +3,7 @@ import './controls.css' // import { sendMsg } from '../api'; import Tracklist from './Tracklist' import EntityControl from './EntityControl'; - +import round from '../Utils'; // import {w3cwebsocket as W3CWebSocket} from "websocket" @@ -16,10 +16,10 @@ import EntityControl from './EntityControl'; // 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 -} +// 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 { @@ -101,7 +101,7 @@ state = {
- +