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

ADD: reworked the entity edit field

Browse Source
This commit is contained in:
Henry Winkel
2023-10-26 17:52:31 +02:00
parent a4cd331152
commit 2d46ee3774
7 changed files with 165 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,42 +17,75 @@ function EntityControl(props)
const [Entity, setEntity] = useState({});
const [Entity, setEntity] = useState(undefined);
// const [Course, setCourse] = useState('');
const [CourseInControl, setCourseInControl] = useState(false);
// const [Speed, setSpeed] = useState();
const [formData, setFormData] = useState({name: "",course: 0,speed: 0,position: [0,0,0]});
const [formData, setFormData] = useState({name: "",course: "" ,speed: 0,position: [0,0,0]});
useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`;
// console.log(props.Entity);
setEntity(props.Entity);
if(CourseInControl === false)
{
// setSpeed(props.Entity.Speed);
if(props.Entity !== undefined)
// if(Entity.id !== props.Entity.id)
// {
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})
}
else
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})
}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})
} else if(Entity.id === props.Entity.id && Entity.Position !== props.Entity.Position)
{
setFormData({...formData,position:props.Entity.Position})
}
}else{
// setFormData({name:"",course:"",speed:"",position:['','']})
// setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position})
}
// setFormData({speed:props.Entity.Speed})
// }
// 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})
}
// }
@@ -85,41 +118,93 @@ const handleClick = (e) => {
};
const handleCourseInput= (e) => {
console.log(e.target)
console.log(isNaN(e.nativeEvent?.data))
if(!isNaN(e.nativeEvent?.data))
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)
{
props.Entity.Course = e.currentTarget.value.replace(",",".");
}
}
// if(e.currentTarget.value === "")
// {
// setFormData({...formData,course:0});
// props.Entity.Course = 0;
// }
};
const handleSpeedInput= (e) => {
// console.log(e.target)
if(!isNaN(e.nativeEvent?.data))
console.log(e.nativeEvent?.data)
// if(!isNaN(e.nativeEvent?.data))
if(Number.isInteger(parseFloat(e.currentTarget.value)) | e.nativeEvent?.data === null )
{
setFormData({...formData,speed:e.currentTarget.value});
if(props.Entity !== undefined)
{
props.Entity.Speed = e.currentTarget.value.replace(",",".");
}
}
console.log(formData.speed)
}
// if(e.nativeEvent?.data == null)
// {
// setFormData({...formData,speed:0});
// props.Entity.Speed = 0;
// }
// console.log(formData.speed)
};
const handleNameInput = (e) => {
setFormData({...formData,name:e.currentTarget.value});
}
const handleInput = (e) => {
console.log(e.target.name)
// console.log(e.target.name)
switch (e.target.name) {
case "Lat":
if(!isNaN(e.nativeEvent?.data) )
if(Number.isInteger(parseFloat(e.currentTarget.value)) | e.nativeEvent?.data === null)
{
// e.currentTarget.value = e.currentTarget.value.replace(",",".");
setFormData({...formData,position:[e.currentTarget.value,formData.position[1],formData.position[2]] });
}
if(props.Entity !== undefined)
{
props.Entity.Position[0]=e.currentTarget.value.replace(",",".");
}
break;
case "Lon":
setFormData({...formData,position:[formData.position[0],e.currentTarget.value,formData.position[2]] });
console.log(e.currentTarget.value)
if(Number.isInteger(parseFloat(e.currentTarget.value)) | e.nativeEvent?.data === null)
{
setFormData({...formData,position:[formData.position[0],e.currentTarget.value,formData.position[2]] });
if(props.Entity !== undefined)
{
props.Entity.Position[1]=e.currentTarget.value.replace(",",".");
}
}
// else if(e.nativeEvent?.data == null) {
// // setFormData({...formData,position:[formData.position[0],0,formData.position[2]] });
// }
break;
case "Height":
@@ -133,13 +218,21 @@ const handleClick = (e) => {
const emptyForm= (e) =>
{
props.Entity.onFocus = undefined;
setFormData({name:'',course:'',speed:'',position:['','']})
setEntity(undefined)
props.Functions.resetEntityOnFocus();
}
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;
}
// const handleChange = (event) => {
// const { name, value } = event.target;
// setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
@@ -251,7 +344,7 @@ const handleClick = (e) => {
<div class="input-group mb-3">
<span class="input-group-text">Course</span>
<input className="EntityinputField" name="Course" readOnly={false} type="text" maxLength={3} onClick={handleClick} onChange={handleCourseInput} value={formData.course} />
<input className="EntityinputField" name="Course" readOnly={false} type="text" onClick={handleClick} onChange={handleCourseInput} value={formData.course} />
</div>
@@ -290,7 +383,8 @@ const handleClick = (e) => {
</div>
</div>
<div> <button type='submit'>Save</button> <button>Delete</button></div>
<div> <button type='submit'>Save</button> <button onClick={resetForm}> RESET</button></div>
</div>
</form>
</div>