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

ADD: added entity input field with bootstrap

Browse Source
This commit is contained in:
hwinkel
2023-10-16 21:26:04 +02:00
parent 023188bc12
commit f0f968b28b
2 changed files with 80 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,6 +3,7 @@ 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 InputGroup from 'react-bootstrap/InputGroup';
import 'bootstrap/dist/css/bootstrap.min.css';
@@ -130,6 +131,7 @@ const handleClick = (e) => {
{
Data: "Entity",
Type: "New",
Name: formData.name,
Speed: formData.speed,
Course: formData.course,
Position: formData.position
@@ -166,68 +168,100 @@ const handleClick = (e) => {
<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>
<InputGroup className="mb-3">
<InputGroup.Text id="basic-addon1">Kind</InputGroup.Text>
<Form.Select name="Kind" size="sm" >
<option selected value="plattform"> Plattform</option>
</Form.Select>
</InputGroup>
</div>
</div>
</div>
<div class="div2">
<div className="ControlLineHeader">
<div className="LineHeader">Domain:</div>
{/* <div className="LineHeader">Domain:</div>
<select name="domain">
<option name="surface">Surface</option>
</select>
</select> */}
<InputGroup className="mb-3">
<InputGroup.Text id="basic-addon1">Domain</InputGroup.Text>
<Form.Select name="Domain" >
<option selected value="Surface"> Surface</option>
</Form.Select>
</InputGroup>
</div>
</div>
<div class="div3">
<div className="ControlLineHeader">
<div className="LineHeader">Type:</div>
<select name="type">
<option name="F124"> F124</option>
</select>
</div>
<InputGroup className="mb-3">
<InputGroup.Text id="basic-addon1">Type</InputGroup.Text>
<Form.Select name="Domain" >
<option selected value="F124"> F124</option>
</Form.Select>
</InputGroup>
</div>
<div class="div4">
<div class="NameInput">
<InputGroup className="mb-3">
<InputGroup.Text id="basic-addon1">Name</InputGroup.Text>
<Form.Control
name="Name"
placeholder="Name"
aria-label="Name"
aria-describedby="basic-addon1"
value={formData.name}
onChange={handleNameInput}
/>
{/* <input name="Name" type="text" onChange={handleNameInput} value={formData.name} /> */}
</InputGroup>
{/* <div class="NameInput">
<div className="ControlLineHeader">Name:</div>
<input className="EntityinputField NameInput" name="Name" type="text" onChange={handleNameInput} value={formData.name} />
</div>
</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 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} />
</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 class="input-group mb-3">
<span class="input-group-text">Speed</span>
<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 class="input-group mb-3 NumberInputsGroup">
<span class="input-group-text">Lat</span>
<input className="ControlInput NumberInputs" 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 class="input-group mb-3 NumberInputsGroup" >
<span class="input-group-text">Lon</span>
{/* <input className="ControlInput" name="Lat" readOnly={true} type="text" onClick={handleClick} value={formData.position[0]} /> */}
<input className="ControlInput NumberInputs" name="Lon" readOnly={true} type="text" onClick={handleClick} value={formData.position[1]}/>
</div>
{/* <div className="flex">
<div className="ControlHeader">Lon:</div>
</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 class="input-group mb-3 NumberInputsGroup">
<span class="input-group-text">Height</span>
{/* <input className="ControlInput" name="Lat" readOnly={true} type="text" onClick={handleClick} value={formData.position[0]} /> */}
<input className="ControlInput NumberInputs" name="height" readOnly={true} type="text" onClick={handleClick} value={formData.position[2]}/>
</div>
{/* <div className="ControlHeader">Height:</div>
<div className="flex">
</div> */}
</div>
</div>

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

@@ -43,6 +43,14 @@ width: 50%;
width: 50% !important;
}
.NumberInputs{
width: 3.3em;
}
.NumberInputsGroup
{
flex-wrap: inherit !important;
}
.ControlValues{
float: left;
display: contents;
@@ -65,10 +73,10 @@ display: contents;
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(6, 2em);
grid-template-columns: repeat(3, 2fr);
grid-template-rows: repeat(6, 3em);
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-row-gap: 0px3
}
.div1 { grid-area: 1 / 1 / 2 / 4; }