From f0f968b28bda251b12800facf03486eefe730424 Mon Sep 17 00:00:00 2001
From: hwinkel <winkelh@hsu-hh.de>
Date: Mon, 16 Oct 2023 21:26:04 +0200
Subject: [PATCH] ADD: added entity input field with bootstrap

---
 .../src/components/control/EntityControl.jsx  | 104 ++++++++++++------
 webapp/src/components/control/controls.css    |  14 ++-
 2 files changed, 80 insertions(+), 38 deletions(-)

diff --git a/webapp/src/components/control/EntityControl.jsx b/webapp/src/components/control/EntityControl.jsx
index 86d6156..249cc04 100644
--- a/webapp/src/components/control/EntityControl.jsx
+++ b/webapp/src/components/control/EntityControl.jsx
@@ -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>
 
-                </Form.Select>
-
-                </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>
-            
+
+            <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 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="div6">
+                <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>
 
diff --git a/webapp/src/components/control/controls.css b/webapp/src/components/control/controls.css
index 52d9b0f..785381a 100644
--- a/webapp/src/components/control/controls.css
+++ b/webapp/src/components/control/controls.css
@@ -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; }