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)
// 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]);
}
});

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

@@ -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) =>({

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

@@ -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) => {
<div class="div6">
<div class="input-group mb-3">
<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 class="div7">
<div class="input-group mb-3 NumberInputsGroup">
<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 class="div8">
@@ -375,7 +370,7 @@ const handleClick = (e) => {
<div class="input-group mb-3 NumberInputsGroup">
<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 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 className="ControlHeader">Height:</div>
<div className="flex">
@@ -383,10 +378,11 @@ const handleClick = (e) => {
</div>
</div>
<div> <button type='submit'>Save</button> <button onClick={resetForm}> RESET</button></div>
<div> <button type='submit'>Save</button> </div>
</div>
</form>
<button onClick={resetForm}> RESET</button>
</div>
);
}

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

@@ -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;