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

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

@@ -43,7 +43,7 @@ class OpenSeaMap extends Component {
icon = createIcon(entity.Type,entity.Side) icon = createIcon(entity.Type,entity.Side)
return ( return (
<Marker name={entity.Name} key={index} icon={icon} position={entity.Position} data={entity.id} <Marker name={entity.Name} key={index} icon={icon} position={entity.Position} data={entity.id}
draggable={true}
eventHandlers={{ eventHandlers={{
click: (e) => { click: (e) => {
// console.log(e.target.options.data); // will print 'FooBar' in console // console.log(e.target.options.data); // will print 'FooBar' in console

2
webapp/src/components/OpenSeaMap/OpenSeaMap.scss
View File

@@ -11,7 +11,7 @@
// display: flex; // display: flex;
padding-top: 10px; padding-top: 10px;
// height: 750px; // height: 750px;
width: 78.5%; width: 75.5%;
// padding-left: 20%; // padding-left: 20%;
display: inline-flex; display: inline-flex;
// height: 80%; // height: 80%;

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

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

4
webapp/src/components/control/Tracklist/tracklist.scss
View File

@@ -1,8 +1,8 @@
.tracklist .tracklist
{ {
display: flex; display: flex;
max-height: 500px; max-height: 40%;
height: 500px; height: 300px;
display: block; display: block;
} }

35
webapp/src/components/control/controls.css
View File

@@ -1,6 +1,6 @@
.controls{ .controls{
/* display: flex; */ /* display: flex; */
width: 20%; width: 24%;
float: left; float: left;
} }
@@ -8,10 +8,21 @@
display: grid; display: grid;
/* grid-template-columns: auto auto auto; */ /* grid-template-columns: auto auto auto; */
} }
.ControlInput{
/* border: none; */
width: 30%;
}
.NameInput{
margin: 0 auto;
}
.EntityinputField{ .EntityinputField{
border: none; /* border: none; */
width: 50%; width: 30%;
display: block; display: flex;
}
.flex{
display: flex !important;
} }
.ControlHeader{ .ControlHeader{
@@ -21,4 +32,20 @@ width: 30%;
.ControlValues{ .ControlValues{
float: left; float: left;
display: contents;
} }
.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3 2em);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div1 { grid-area: 1 / 1 / 2 / 3; }
.div2 { grid-area: 2 / 1 / 3 / 2; }
.div3 { grid-area: 2 / 2 / 3 / 3; }
.div4 { grid-area: 3 / 2 / 4 / 3; }
.div5 { grid-area: 3 / 1 / 4 / 2; }