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)
return (
<Marker name={entity.Name} key={index} icon={icon} position={entity.Position} data={entity.id}
draggable={true}
eventHandlers={{
click: (e) => {
// 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;
padding-top: 10px;
// height: 750px;
width: 78.5%;
width: 75.5%;
// padding-left: 20%;
display: inline-flex;
// height: 80%;

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>

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

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

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

@@ -1,6 +1,6 @@
.controls{
/* display: flex; */
width: 20%;
width: 24%;
float: left;
}
@@ -8,10 +8,21 @@
display: grid;
/* grid-template-columns: auto auto auto; */
}
.ControlInput{
/* border: none; */
width: 30%;
}
.NameInput{
margin: 0 auto;
}
.EntityinputField{
border: none;
width: 50%;
display: block;
/* border: none; */
width: 30%;
display: flex;
}
.flex{
display: flex !important;
}
.ControlHeader{
@@ -21,4 +32,20 @@ width: 30%;
.ControlValues{
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; }