added direction button and drive to point button

package-lock.json

@@ -8,6 +8,7 @@
       "name": "camera-slider-web",
       "version": "0.1.0",
       "dependencies": {
+        "@ant-design/icons": "^5.4.0",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^5.4.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/App.js

@@ -1,7 +1,9 @@
+import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons";
 import {
   Button,
   Card,
   Col,
+  Divider,
   Form,
   Grid,
   InputNumber,
@@ -35,6 +37,7 @@ function App() {
 
   const [distance, setDistance] = useState([20, 50]);
   const [acceleration, setAcceleration] = useState(0);
+  const [direction, setDirection] = useState(0);
 
   useEffect(() => {
     // todo: fetch to esp to get current values
@@ -64,6 +67,11 @@ function App() {
           onFinish={() => {
             console.log("finish");
 
+            form
+              .validateFields()
+              .then((values) => {})
+              .catch((err) => console.error(err));
+
             // todo: fetch to update values
           }}
         >
@@ -168,12 +176,46 @@ function App() {
             </Row>
           </Form.Item>
 
+          <Form.Item name="direction" label="Richtung">
+            <Row>
+              <Col xs={11}>
+                <Button
+                  block
+                  type={direction === 0 ? "primary" : "default"}
+                  shape="round"
+                  icon={<ArrowLeftOutlined />}
+                  onClick={() => setDirection(0)}
+                >
+                  Links
+                </Button>
+              </Col>
+              <Col xs={11} offset={2}>
+                <Button
+                  block
+                  type={direction === 1 ? "primary" : "default"}
+                  shape="round"
+                  icon={<ArrowRightOutlined />}
+                  iconPosition="end"
+                  onClick={() => setDirection(1)}
+                >
+                  Rechts
+                </Button>
+              </Col>
+            </Row>
+          </Form.Item>
+
           <Form.Item>
             <Button type="primary" htmlType="submit" block>
               Speichern
             </Button>
           </Form.Item>
         </Form>
+
+        <Divider />
+
+        <Button type="primary" block>
+          Fahre zum nächsten Punkt
+        </Button>
       </Card>
     </div>
   );