ADD: added Bootstrag

2023-10-14 17:39:51 +02:00
parent 2518b43645
commit 023188bc12
4 changed files with 317 additions and 31 deletions
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -11,8 +11,10 @@
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
+        "bootstrap": "^5.3.2",
        "milsymbol": "^2.2.0",
        "react": "^18.2.0",
+        "react-bootstrap": "^2.9.0",
        "react-container-dimensions": "^1.4.1",
        "react-dom": "^18.2.0",
        "react-hook-form": "^7.46.2",
@@ -3452,6 +3454,29 @@
        }
      }
    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.8.0.tgz",
+      "integrity": "sha512-Y54xs483rglN5DxbwfCPHxnkvZ+gZ0LbSYmR72LyWPGft8hN/lrl1VRS1EW2SMjnkEWlj+Km2mwvA3kEHDUA0A==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
    "node_modules/@react-leaflet/core": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
@@ -3462,6 +3487,45 @@
        "react-dom": "^18.0.0"
      }
    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.11",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.11.tgz",
+      "integrity": "sha512-Ft/ncTULZN6ldGHiF/k5qt72O8JyRMOeg0tApvCni8LkoiEahO+z3TNxfXIVGy890YtWVDvJAl662dVJSJXvMw==",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.6.tgz",
+      "integrity": "sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@popperjs/core": "^2.11.6",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.4.9",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/uncontrollable": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
    "node_modules/@rollup/plugin-babel": {
      "version": "5.3.1",
      "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3780,6 +3844,14 @@
        "url": "https://github.com/sponsors/gregberge"
      }
    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.3.tgz",
+      "integrity": "sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
    "node_modules/@testing-library/dom": {
      "version": "9.3.3",
      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz",
@@ -4172,6 +4244,14 @@
        "@types/react": "*"
      }
    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.7.tgz",
+      "integrity": "sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/resolve": {
      "version": "1.17.1",
      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -4248,6 +4328,11 @@
      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.4.tgz",
      "integrity": "sha512-IDaobHimLQhjwsQ/NMwRVfa/yL7L/wriQPMhw1ZJall0KX6E1oxk29XMDeilW5qTIg5aoiqf5Udy8U/51aNoQQ=="
    },
+    "node_modules/@types/warning": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.1.tgz",
+      "integrity": "sha512-ywJmriP+nvjBKNBEMaNZgj2irZHoxcKeYcyMLbqhYKbDVn8yCIULy2Ol/tvIb37O3IBeZj3RU4tXqQTtGwoAMg=="
+    },
    "node_modules/@types/ws": {
      "version": "8.5.5",
      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
@@ -5480,6 +5565,24 @@
      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
    },
+    "node_modules/bootstrap": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
+      "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
    "node_modules/brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -5758,6 +5861,11 @@
      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz",
      "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ=="
    },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
    "node_modules/clean-css": {
      "version": "5.3.2",
      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -6796,6 +6904,15 @@
        "utila": "~0.4"
      }
    },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
    "node_modules/dom-serializer": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -14075,6 +14192,23 @@
        "react-is": "^16.13.1"
      }
    },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/prop-types-extra/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
    "node_modules/prop-types/node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -14249,6 +14383,35 @@
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
    },
+    "node_modules/react-bootstrap": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.0.tgz",
+      "integrity": "sha512-dGh6fGjqR9MBzPOp2KbXJznt1Zy6SWepXYUdxMT18Zu/wJ73HCU8JNZe9dfzjmVssZYsJH9N3HHE4wAtQvNz7g==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.5",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.6.6",
+        "@types/react-transition-group": "^4.4.6",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-container-dimensions": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/react-container-dimensions/-/react-container-dimensions-1.4.1.tgz",
@@ -14355,6 +14518,11 @@
        "react-dom": "^18.0.0"
      }
    },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
    "node_modules/react-refresh": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -14435,6 +14603,21 @@
        }
      }
    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
    "node_modules/react-use-websocket": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/react-use-websocket/-/react-use-websocket-4.4.0.tgz",
@@ -16417,6 +16600,20 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
    "node_modules/underscore": {
      "version": "1.12.1",
      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
@@ -16651,6 +16848,14 @@
        "makeerror": "1.0.12"
      }
    },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "node_modules/watchpack": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -6,8 +6,10 @@
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.3.2",
    "milsymbol": "^2.2.0",
    "react": "^18.2.0",
+    "react-bootstrap": "^2.9.0",
    "react-container-dimensions": "^1.4.1",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.46.2",
--- a/webapp/src/components/control/EntityControl.jsx
+++ b/webapp/src/components/control/EntityControl.jsx
@@ -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)
@@ -159,31 +165,72 @@ const handleClick = (e) => {
        <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  className="ControlLineHeader">
+                {/* <div className="LineHeader">Kind:</div> */}
+                <div>
+                <FloatingLabel controlId="floatingSelect" label="Kind"/>
+                <Form.Select  id="floatingSelect" > 
+                    <option></option>
+                    <option value="plattform"> Plattform</option>
+
+                </Form.Select>
+
+                </div>
                </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  className="ControlLineHeader">
+                <div className="LineHeader">Domain:</div>
+                <select name="domain"> 
+                    <option name="surface">Surface</option>
+
+                </select>
+                </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  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="div6">
+            <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>
--- a/webapp/src/components/control/controls.css
+++ b/webapp/src/components/control/controls.css
@@ -13,7 +13,8 @@ display: grid;
    width: 30%;
 }
 .NameInput{
-    margin: 0 auto;
+    /* margin: 0 auto; */
+    display: flex;
 }
 .EntityinputField{
    /* border: none; */
@@ -27,7 +28,19 @@ display: grid;

 .ControlHeader{
 float: left;
-width: 30%;
+width: 50%;
+}
+.ControlLineHeader
+{
+    float: left;
+    width: 100%;
+}
+.LineHeader{
+    display: flex;
+    float: left;
+}
+.sizedSelect{
+    width: 50% !important;
 }

 .ControlValues{
@@ -35,7 +48,7 @@ float: left;
 display: contents;
 }

-.parent {
+/* .parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3 2em);
@@ -47,5 +60,24 @@ display: contents;
    .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; }
+    .div5 { grid-area: 3 / 1 / 4 / 2; } */
+
+
+    .parent {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-template-rows: repeat(6, 2em);
+        grid-column-gap: 0px;
+        grid-row-gap: 0px;
+        }
+        
+    .div1 { grid-area: 1 / 1 / 2 / 4; }
+    .div2 { grid-area: 2 / 1 / 3 / 4; }
+    .div3 { grid-area: 3 / 1 / 4 / 4; }
+    .div4 { grid-area: 4 / 1 / 5 / 4; }
+    .div5 { grid-area: 5 / 1 / 6 / 2; }
+    .div6 { grid-area: 5 / 2 / 6 / 3; }
+    .div7 { grid-area: 6 / 1 / 7 / 2; }
+    .div8 { grid-area: 6 / 2 / 7 / 3; }
+    .div9 { grid-area: 6 / 3 / 7 / 4; }