From 08c92a7900d8a49f28e5df303f39befe0957e207 Mon Sep 17 00:00:00 2001 From: Henry Winkel Date: Fri, 27 Oct 2023 14:10:48 +0200 Subject: [PATCH] ADD: added changes to the EntityControl panel --- webapp/src/App.jsx | 13 +- .../src/components/OpenSeaMap/OpenSeaMap.jsx | 3 +- .../src/components/control/EntityControl.jsx | 116 +++++++++--------- webapp/src/components/control/controls.jsx | 36 +++--- 4 files changed, 86 insertions(+), 82 deletions(-) diff --git a/webapp/src/App.jsx b/webapp/src/App.jsx index e816b94..3ae568d 100644 --- a/webapp/src/App.jsx +++ b/webapp/src/App.jsx @@ -120,12 +120,12 @@ class App extends Component { } this.getEntityFromID(this.state.Entities,Entity) - // console.log(Entity); + console.log(Entity); this.setState({ EntityOnFocus: Entity }); this.state.Entities.forEach((element, index) => { - console.log(element); + // console.log(element); if(element.id === Entity.EntityID) { @@ -138,6 +138,15 @@ class App extends Component { this.setState({ Entities: structuredClone(tmpList) }); + if(Entity.dragged !== undefined) + { + if(Entity.dragged === true) + { + tmpList[index].dragged = true; + } + } + console.log(tmpList[index]); + } }); diff --git a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx b/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx index 24a9dc0..bc8f5c5 100644 --- a/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx +++ b/webapp/src/components/OpenSeaMap/OpenSeaMap.jsx @@ -125,7 +125,8 @@ class OpenSeaMap extends Component { { var Ent = { EntityID : e.target.options.data, - NewPos : [e.target._latlng.lat,e.target._latlng.lng] + NewPos : [e.target._latlng.lat,e.target._latlng.lng], + dragged: true } this.setState((state) =>({ diff --git a/webapp/src/components/control/EntityControl.jsx b/webapp/src/components/control/EntityControl.jsx index 20683f7..a65142b 100644 --- a/webapp/src/components/control/EntityControl.jsx +++ b/webapp/src/components/control/EntityControl.jsx @@ -20,72 +20,42 @@ function EntityControl(props) const [Entity, setEntity] = useState(undefined); // const [Course, setCourse] = useState(''); - const [CourseInControl, setCourseInControl] = useState(false); + const [PositionDragged, setPositionDragged] = useState(false); // const [Speed, setSpeed] = useState(); - const [formData, setFormData] = useState({name: "",course: "" ,speed: 0,position: [0,0,0]}); + const [formData, setFormData] = useState({name: "",course: "" ,speed: 0,position: [0,0],height:0}); useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; - // if(Entity.id !== props.Entity.id) - // { + // console.log(props.Entity); + if(props.Entity !== undefined) { console.log(props.Entity) if(Entity === undefined) { setEntity(props.Entity); - setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position}) + setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position,height:props.Entity.Height }) }else if(Entity.id !== props.Entity.id) { setEntity(props.Entity); - setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position}) + setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position,height:props.Entity.Height}) } else if(Entity.id === props.Entity.id && Entity.Position !== props.Entity.Position) { - setFormData({...formData,position:props.Entity.Position}) + setFormData({...formData,position:props.Entity.Position,height:props.Entity.Height}) + setPositionDragged(true); + } // setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position}) } - // } - - // if(CourseInControl === false) - // { - // // setSpeed(props.Entity.Speed); - - // if(props.Entity !== undefined) - // { - // if(props.Entity.NewPos !== undefined) - // { - - // setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.NewPos}) - // console.log(props.Entity) - // } - // else - // { - - // setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position}) - // } - // }else{ - // // setFormData({name:"",course:"",speed:"",position:['','']}) - // // if(Entity.id !== props.Entity.id) - // // { - // // setEntity(props.Entity); - - // // } - // // console.log(props.Entity) - - // } - // // setFormData({speed:props.Entity.Speed}) - - - // } + @@ -118,12 +88,11 @@ const handleClick = (e) => { }; const handleCourseInput= (e) => { - console.log(e.currentTarget.value) + // console.log(e.currentTarget.value) // console.log(isNaN(e.nativeEvent?.data)) // if(!isNaN(e.nativeEvent?.data)) if(Number.isInteger(parseFloat(e.currentTarget.value)) | e.nativeEvent?.data === null ) { - setFormData({...formData,course:e.currentTarget.value}); if(props.Entity !== undefined) { @@ -144,7 +113,7 @@ const handleClick = (e) => { }; const handleSpeedInput= (e) => { - console.log(e.nativeEvent?.data) + // console.log(e.nativeEvent?.data) // if(!isNaN(e.nativeEvent?.data)) if(Number.isInteger(parseFloat(e.currentTarget.value)) | e.nativeEvent?.data === null ) { @@ -189,7 +158,6 @@ const handleClick = (e) => { } break; case "Lon": - console.log(e.currentTarget.value) if(Number.isInteger(parseFloat(e.currentTarget.value)) | e.nativeEvent?.data === null) { @@ -208,17 +176,25 @@ const handleClick = (e) => { break; case "Height": - setFormData({...formData,position:[formData.position[0],formData.position[1],e.currentTarget.value] }); + setFormData({...formData,height:e.currentTarget.value.replace(",",".")}); + if(props.Entity !== undefined) + { + props.Entity.Height=e.currentTarget.value.replace(",","."); + } break; default: break; } + setPositionDragged(true); } const emptyForm= (e) => { - props.Entity.onFocus = undefined; + if(props.Entity !== undefined) + { + props.Entity.onFocus = undefined; + } setFormData({name:'',course:'',speed:'',position:['','']}) setEntity(undefined) props.Functions.resetEntityOnFocus(); @@ -227,10 +203,17 @@ const handleClick = (e) => { const resetForm = (e)=> { - setFormData({name:props.Entity.Name,course:Entity.Course,speed:Entity.Speed,position:Entity.Position}) - props.Entity.Position = Entity.Position; - props.Entity.Course = Entity.Course; - props.Entity.Speed = Entity.Speed; + if(props.Entity !== undefined) + { + console.log("resetting") + setFormData({name:props.Entity.Name,course:Entity.Course,speed:Entity.Speed,position:Entity.Position}) + props.Entity.Position = Entity.Position; + props.Entity.Course = Entity.Course; + props.Entity.Speed = Entity.Speed; + } + else { + emptyForm(); + } } // const handleChange = (event) => { @@ -250,21 +233,33 @@ const handleClick = (e) => { Data: "Entity", Type: "New", Name: formData.name, - Speed: formData.speed, - Course: formData.course, - Position: formData.position + Speed: formData.speed.toString(), + Course: formData.course.toString(), + Position: formData.position, + Height: formData.height, + SetPosition: true } }else { + var setPos; + if(PositionDragged === true) + { + setPos = true; + }else{ + setPos = false; + } + var msg = { Data: "Entity", Type: "Update", ID: Entity.id, - Speed: formData.speed, - Course: formData.course, - Position: formData.position + Speed: formData.speed.toString(), + Course: formData.course.toString(), + Position: formData.position, + Height: formData.height, + SetPosition: setPos } @@ -352,13 +347,13 @@ const handleClick = (e) => {
Speed - +
Lat - +
@@ -375,7 +370,7 @@ const handleClick = (e) => {
Height {/* */} - +
{/*
Height:
@@ -383,10 +378,11 @@ const handleClick = (e) => {
-
+
+ ); } diff --git a/webapp/src/components/control/controls.jsx b/webapp/src/components/control/controls.jsx index 6ed1734..f911a5d 100644 --- a/webapp/src/components/control/controls.jsx +++ b/webapp/src/components/control/controls.jsx @@ -58,32 +58,30 @@ state = { tmp = val // tmp = JSON.parse(JSON.stringify(val)); // console.log(tmp); - + val.dragged = SelectedEntity.dragged; + if(SelectedEntity.dragged === undefined) + { + val.dragged = false; + } // console.log(SelectedEntity); - if(SelectedEntity.NewPos !== undefined) - { - // Object.assign(tmp, {NewPos: [{},{}]}); - Object.assign(val, {NewPos: [{},{}]}); + // 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.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); + // // 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; } return tmp;