From 023188bc1269a15adbe6113af8aa471ed05d2968 Mon Sep 17 00:00:00 2001 From: hwinkel Date: Sat, 14 Oct 2023 17:39:51 +0200 Subject: [PATCH] ADD: added Bootstrag --- webapp/package-lock.json | 205 ++++++++++++++++++ webapp/package.json | 2 + .../src/components/control/EntityControl.jsx | 101 ++++++--- webapp/src/components/control/controls.css | 40 +++- 4 files changed, 317 insertions(+), 31 deletions(-) diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 620a6be..2e6d166 100644 --- 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", diff --git a/webapp/package.json b/webapp/package.json index 9baa824..6c78b60 100644 --- 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", diff --git a/webapp/src/components/control/EntityControl.jsx b/webapp/src/components/control/EntityControl.jsx index 040574b..86d6156 100644 --- 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) @@ -157,33 +163,74 @@ const handleClick = (e) => {
-
-
-
- -
-
-
-
Course:
-
-
-
-
Speed:
-
-
-
-
-
Lat:
-
-
-
-
+
+
+
+ {/*
Kind:
*/} +
+ + + + -
Lon:
-
-
+
+
+
+
+
+
Domain:
+ +
+
+
+
+
Type:
+ +
+
+
+
+
Name:
+ +
+ +
+
+
Course:
+
+
+ +
+
+
Speed:
+
+ +
+
+
+
Lat:
+
+
+
+
+
Lon:
+
+
+
+
+
Height:
+
+
+
+
diff --git a/webapp/src/components/control/controls.css b/webapp/src/components/control/controls.css index 3aa9cac..52d9b0f 100644 --- 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; }