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

ADD: adden grid layout to entity input

Browse Source
This commit is contained in:
hwinkel
2023-09-30 17:31:48 +02:00
parent a34ea5ab04
commit 3a3901fbec
5 changed files with 78 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,26 +16,32 @@ function EntityControl(props)
const [CourseInControl, setCourseInControl] = useState(false);
const [Speed, setSpeed] = useState();
const [formData, setFormData] = useState({name: "",course: "",speed: ""});
const [formData, setFormData] = useState({name: "",course: 0,speed: 0,position: [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)
{
console.log("los")
// setSpeed(props.Entity.Speed);
setFormData({course:props.Entity.Course,speed:props.Entity.Speed})
if(Array.isArray(props.Entity.Position) === true)
{
setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:props.Entity.Position})
}else{
setFormData({name:props.Entity.Name,course:props.Entity.Course,speed:props.Entity.Speed,position:['','']})
}
// setFormData({speed:props.Entity.Speed})
}
},[props.Entity]);
},[props.Entity,props]);
@@ -71,6 +77,9 @@ const handleClick = (e) => {
const emptyForm= (e) =>
{
setFormData({name:'',course:'',speed:'',position:['','']})
setEntity('')
}
// const handleChange = (event) => {
@@ -81,31 +90,43 @@ const handleClick = (e) => {
const handleSubmit = (e) => {
e.preventDefault();
console.log(e.target.data);
alert(`Course: ${formData.course}`
);
console.log(formData)
// alert(`Course: ${formData.course}`);
}
// console.log(Entity)
// console.log(EntityOnFocus)
return (
<div>
<div><button onClick={ emptyForm}> New</button> </div>
<form onSubmit={handleSubmit}>
<div className="ControlsComponent">
<div>{Entity.id}</div>
<div>
<div className="ControlHeader">Name</div>
<div className="ControlValues">{Entity.Name}</div>
</div>
<div>
<div className="ControlHeader">Course</div>
<div className="ControlValues" > <input className="EntityinputField" name="Course" readOnly={false} type="text" maxLength={3} onClick={handleClick} onChange={handleCourseInput} value={formData.course} /></div>
<div class="parent">
<div class="div1">
<div class="NameInput">
<input className="EntityinputField NameInput" name="Name" readOnly={false} type="text" maxLength={3} onClick={handleClick} onChange={handleCourseInput} value={formData.name} />
</div>
</div>
<div class="div2">
<div className="ControlHeader">Course:</div>
<div className="ControlValues" > <input className="EntityinputField" name="Course" readOnly={false} type="text" maxLength={3} onClick={handleClick} onChange={handleCourseInput} value={formData.course} /></div>
</div>
<div class="div3">
<div className="ControlHeader">Speed:</div>
<div id="Speed" className="ControlValues"><input className="EntityinputField" name="Speed" readOnly={true} type="text" onClick={handleClick} onChange={handleSpeedInput} value={formData.speed} /></div>
</div>
<div class="div5">
<div className="flex">
<div className="ControlHeader">Lat:</div><input className="ControlInput" name="Lat" readOnly={true} type="text" onClick={handleClick} value={formData.position[0]} />
</div>
</div>
<div class="div6">
<div className="flex">
</div>
<div>
<div className="ControlHeader">Speed</div>
<div id="Speed" className="ControlValues"><input className="EntityinputField" name="Speed" readOnly={true} type="text" onClick={handleClick} onChange={handleSpeedInput} value={formData.speed} /></div>
<div className="ControlHeader">Lon:</div><input className="ControlInput" name="Lon" readOnly={true} type="text" onClick={handleClick} value={formData.position[1]}/>
</div>
</div>
</div>
<div> <button type='submit'>Save</button> <button>Delete</button></div>