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

ADD: added Bootstrag

Browse Source
This commit is contained in:
hwinkel
2023-10-14 17:39:51 +02:00
parent 2518b43645
commit 023188bc12
4 changed files with 317 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,12 @@
import React from "react"
import {useState,useEffect, useRef} from 'react';
import { useForm, SubmitHandler } from "react-hook-form"
import Form from 'react-bootstrap/Form';
import FloatingLabel from 'react-bootstrap/FloatingLabel';
import 'bootstrap/dist/css/bootstrap.min.css';
import './controls.css'
@@ -16,7 +22,7 @@ function EntityControl(props)
const [CourseInControl, setCourseInControl] = useState(false);
// const [Speed, setSpeed] = useState();
const [formData, setFormData] = useState({name: "",course: 0,speed: 0,position: [0,0]});
const [formData, setFormData] = useState({name: "",course: 0,speed: 0,position: [0,0,0]});
@@ -143,9 +149,9 @@ const handleClick = (e) => {
}
}
console.log(msg);
console.log(JSON.stringify(msg));
// props.Client.send(JSON.stringify(msg));
props.Client.send(JSON.stringify(msg));
// alert(`Course: ${formData.course}`);
}
// console.log(Entity)
@@ -157,33 +163,74 @@ const handleClick = (e) => {
<form onSubmit={handleSubmit}>
<div className="ControlsComponent">
<div class="parent">
<div class="div1">
<div class="NameInput">
<input className="EntityinputField NameInput" name="Name" type="text" onChange={handleNameInput} 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 class="parent">
<div class="div1">
<div className="ControlLineHeader">
{/* <div className="LineHeader">Kind:</div> */}
<div>
<FloatingLabel controlId="floatingSelect" label="Kind"/>
<Form.Select id="floatingSelect" >
<option></option>
<option value="plattform"> Plattform</option>
<div className="ControlHeader">Lon:</div><input className="ControlInput" name="Lon" readOnly={true} type="text" onClick={handleClick} value={formData.position[1]}/>
</div>
</div>
</Form.Select>
</div>
</div>
</div>
<div class="div2">
<div className="ControlLineHeader">
<div className="LineHeader">Domain:</div>
<select name="domain">
<option name="surface">Surface</option>
</select>
</div>
</div>
<div class="div3">
<div className="ControlLineHeader">
<div className="LineHeader">Type:</div>
<select name="type">
<option name="F124"> F124</option>
</select>
</div>
</div>
<div class="div4">
<div class="NameInput">
<div className="ControlLineHeader">Name:</div>
<input className="EntityinputField NameInput" name="Name" type="text" onChange={handleNameInput} value={formData.name} />
</div>
</div>
<div class="div5">
<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="div6">
<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="div7">
<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="div8">
<div className="flex">
<div className="ControlHeader">Lon:</div><input className="ControlInput" name="Lon" readOnly={true} type="text" onClick={handleClick} value={formData.position[1]}/>
</div>
</div>
<div class="div9">
<div className="flex">
<div className="ControlHeader">Height:</div><input className="ControlInput" name="height" readOnly={true} type="text" onClick={handleClick} value={formData.position[2]}/>
</div>
</div>
</div>
<div> <button type='submit'>Save</button> <button>Delete</button></div>
</div>
</form>