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

ADD: added changes to the EntityControl panel

Browse Source
This commit is contained in:
Henry Winkel
2023-10-27 14:10:48 +02:00
parent 2d46ee3774
commit 08c92a7900
4 changed files with 86 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
webapp/src/App.jsx
View File

@@ -120,12 +120,12 @@ class App extends Component {
} }
this.getEntityFromID(this.state.Entities,Entity) this.getEntityFromID(this.state.Entities,Entity)
// console.log(Entity); console.log(Entity);
this.setState({ this.setState({
EntityOnFocus: Entity EntityOnFocus: Entity
}); });
this.state.Entities.forEach((element, index) => { this.state.Entities.forEach((element, index) => {
console.log(element); // console.log(element);
if(element.id === Entity.EntityID) if(element.id === Entity.EntityID)
{ {
@@ -138,6 +138,15 @@ class App extends Component {
this.setState({ this.setState({
Entities: structuredClone(tmpList) Entities: structuredClone(tmpList)
}); });
if(Entity.dragged !== undefined)
{
if(Entity.dragged === true)
{
tmpList[index].dragged = true;
}
}
console.log(tmpList[index]);
} }
}); });

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

@@ -125,7 +125,8 @@ class OpenSeaMap extends Component {
{ {
var Ent = { var Ent = {
EntityID : e.target.options.data, 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) =>({ this.setState((state) =>({

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

@@ -20,72 +20,42 @@ function EntityControl(props)
const [Entity, setEntity] = useState(undefined); const [Entity, setEntity] = useState(undefined);
// const [Course, setCourse] = useState(''); // const [Course, setCourse] = useState('');
const [CourseInControl, setCourseInControl] = useState(false); const [PositionDragged, setPositionDragged] = useState(false);
// const [Speed, setSpeed] = useState(); // 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`; 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) if(props.Entity !== undefined)
{ {
console.log(props.Entity) console.log(props.Entity)
if(Entity === undefined) if(Entity === undefined)
{ {
setEntity(props.Entity); 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) }else if(Entity.id !== props.Entity.id)
{ {
setEntity(props.Entity); 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) } 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}) // 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) => { const handleCourseInput= (e) => {
console.log(e.currentTarget.value) // console.log(e.currentTarget.value)
// console.log(isNaN(e.nativeEvent?.data)) // console.log(isNaN(e.nativeEvent?.data))
// if(!isNaN(e.nativeEvent?.data)) // if(!isNaN(e.nativeEvent?.data))
if(Number.isInteger(parseFloat(e.currentTarget.value)) | e.nativeEvent?.data === null ) if(Number.isInteger(parseFloat(e.currentTarget.value)) | e.nativeEvent?.data === null )
{ {
setFormData({...formData,course:e.currentTarget.value}); setFormData({...formData,course:e.currentTarget.value});
if(props.Entity !== undefined) if(props.Entity !== undefined)
{ {
@@ -144,7 +113,7 @@ const handleClick = (e) => {
}; };
const handleSpeedInput= (e) => { const handleSpeedInput= (e) => {
console.log(e.nativeEvent?.data) // console.log(e.nativeEvent?.data)
// if(!isNaN(e.nativeEvent?.data)) // if(!isNaN(e.nativeEvent?.data))
if(Number.isInteger(parseFloat(e.currentTarget.value)) | e.nativeEvent?.data === null ) if(Number.isInteger(parseFloat(e.currentTarget.value)) | e.nativeEvent?.data === null )
{ {
@@ -189,7 +158,6 @@ const handleClick = (e) => {
} }
break; break;
case "Lon": case "Lon":
console.log(e.currentTarget.value)
if(Number.isInteger(parseFloat(e.currentTarget.value)) | e.nativeEvent?.data === null) if(Number.isInteger(parseFloat(e.currentTarget.value)) | e.nativeEvent?.data === null)
{ {
@@ -208,17 +176,25 @@ const handleClick = (e) => {
break; break;
case "Height": 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; break;
default: default:
break; break;
} }
setPositionDragged(true);
} }
const emptyForm= (e) => const emptyForm= (e) =>
{ {
props.Entity.onFocus = undefined; if(props.Entity !== undefined)
{
props.Entity.onFocus = undefined;
}
setFormData({name:'',course:'',speed:'',position:['','']}) setFormData({name:'',course:'',speed:'',position:['','']})
setEntity(undefined) setEntity(undefined)
props.Functions.resetEntityOnFocus(); props.Functions.resetEntityOnFocus();
@@ -227,10 +203,17 @@ const handleClick = (e) => {
const resetForm = (e)=> const resetForm = (e)=>
{ {
setFormData({name:props.Entity.Name,course:Entity.Course,speed:Entity.Speed,position:Entity.Position}) if(props.Entity !== undefined)
props.Entity.Position = Entity.Position; {
props.Entity.Course = Entity.Course; console.log("resetting")
props.Entity.Speed = Entity.Speed; 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) => { // const handleChange = (event) => {
@@ -250,21 +233,33 @@ const handleClick = (e) => {
Data: "Entity", Data: "Entity",
Type: "New", Type: "New",
Name: formData.name, Name: formData.name,
Speed: formData.speed, Speed: formData.speed.toString(),
Course: formData.course, Course: formData.course.toString(),
Position: formData.position Position: formData.position,
Height: formData.height,
SetPosition: true
} }
}else { }else {
var setPos;
if(PositionDragged === true)
{
setPos = true;
}else{
setPos = false;
}
var msg = var msg =
{ {
Data: "Entity", Data: "Entity",
Type: "Update", Type: "Update",
ID: Entity.id, ID: Entity.id,
Speed: formData.speed, Speed: formData.speed.toString(),
Course: formData.course, Course: formData.course.toString(),
Position: formData.position Position: formData.position,
Height: formData.height,
SetPosition: setPos
} }
@@ -352,13 +347,13 @@ const handleClick = (e) => {
<div class="div6"> <div class="div6">
<div class="input-group mb-3"> <div class="input-group mb-3">
<span class="input-group-text">Speed</span> <span class="input-group-text">Speed</span>
<input className="EntityinputField" name="Speed" readOnly={true} type="text" onClick={handleClick} onChange={handleSpeedInput} value={formData.speed} /> <input className="EntityinputField" name="Speed" onChange={handleSpeedInput} value={formData.speed} />
</div> </div>
</div> </div>
<div class="div7"> <div class="div7">
<div class="input-group mb-3 NumberInputsGroup"> <div class="input-group mb-3 NumberInputsGroup">
<span class="input-group-text">Lat</span> <span class="input-group-text">Lat</span>
<input className="ControlInput NumberInputs" name="Lat" readOnly={true} type="text" onClick={handleClick} onChange={handleInput} value={formData.position[0]} /> <input className="ControlInput NumberInputs" name="Lat" type="text" onChange={handleInput} value={formData.position[0]} />
</div> </div>
</div> </div>
<div class="div8"> <div class="div8">
@@ -375,7 +370,7 @@ const handleClick = (e) => {
<div class="input-group mb-3 NumberInputsGroup"> <div class="input-group mb-3 NumberInputsGroup">
<span class="input-group-text">Height</span> <span class="input-group-text">Height</span>
{/* <input className="ControlInput" name="Lat" readOnly={true} type="text" onClick={handleClick} value={formData.position[0]} /> */} {/* <input className="ControlInput" name="Lat" readOnly={true} type="text" onClick={handleClick} value={formData.position[0]} /> */}
<input className="ControlInput NumberInputs" name="Height" readOnly={true} type="text" onClick={handleClick} onChange={handleInput} value={formData.position[2]}/> <input className="ControlInput NumberInputs" name="Height" readOnly={true} type="text" onClick={handleClick} onChange={handleInput} value={formData.height}/>
</div> </div>
{/* <div className="ControlHeader">Height:</div> {/* <div className="ControlHeader">Height:</div>
<div className="flex"> <div className="flex">
@@ -383,10 +378,11 @@ const handleClick = (e) => {
</div> </div>
</div> </div>
<div> <button type='submit'>Save</button> <button onClick={resetForm}> RESET</button></div> <div> <button type='submit'>Save</button> </div>
</div> </div>
</form> </form>
<button onClick={resetForm}> RESET</button>
</div> </div>
); );
} }

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

@@ -58,32 +58,30 @@ state = {
tmp = val tmp = val
// tmp = JSON.parse(JSON.stringify(val)); // tmp = JSON.parse(JSON.stringify(val));
// console.log(tmp); // console.log(tmp);
val.dragged = SelectedEntity.dragged;
if(SelectedEntity.dragged === undefined)
{
val.dragged = false;
}
// console.log(SelectedEntity); // console.log(SelectedEntity);
if(SelectedEntity.NewPos !== undefined) // if(SelectedEntity.NewPos !== undefined)
{ // {
// Object.assign(tmp, {NewPos: [{},{}]}); // // Object.assign(tmp, {NewPos: [{},{}]});
Object.assign(val, {NewPos: [{},{}]}); // Object.assign(val, {NewPos: [{},{}]});
// tmp.OldPos = val.Position; // // tmp.OldPos = val.Position;
// Object.assign(tmp, {NewPos: [round(SelectedEntity.NewPos[0],3),0]}); // // Object.assign(tmp, {NewPos: [round(SelectedEntity.NewPos[0],3),0]});
// val.NewPos = SelectedEntity.NewPos; // // val.NewPos = SelectedEntity.NewPos;
val.NewPos[0] = round(SelectedEntity.NewPos[0],3); // val.NewPos[0] = round(SelectedEntity.NewPos[0],3);
val.NewPos[1] = round(SelectedEntity.NewPos[1],3); // val.NewPos[1] = round(SelectedEntity.NewPos[1],3);
// tmp.NewPos[0] = round(SelectedEntity.NewPos[0],3); // // tmp.NewPos[0] = round(SelectedEntity.NewPos[0],3);
// tmp.NewPos[1] = round(SelectedEntity.NewPos[1],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; return tmp;