added time picker

src/App.js

@@ -9,9 +9,9 @@ import {
   Grid,
   InputNumber,
   Row,
-  Select,
   Slider,
   Space,
+  TimePicker,
 } from "antd";
 import { useForm } from "antd/es/form/Form";
 import useMessage from "antd/es/message/useMessage";
@@ -143,6 +143,15 @@ function App() {
       .then((values) => {
         setProcessStatus("Sende Anfrage");
 
+        let durationInSeconds = 0;
+
+        if (values.duration !== undefined) {
+          const duration = values.duration;
+
+          durationInSeconds =
+            duration.$s + duration.$m * 60 + duration.$H * 3600;
+        }
+
         myFetch({
           url: urlPath,
           method: "POST",
@@ -150,7 +159,7 @@ function App() {
             distance: distance,
             acceleration: acceleration,
             direction: direction,
-            duration: values.duration * (durationUnit === "seconds" ? 1 : 60),
+            duration: durationInSeconds,
           },
           showNotification: messageApi,
         })
@@ -194,6 +203,7 @@ function App() {
           form={form}
           layout="vertical"
           onFinish={() => sendControlRequest("/start")}
+          requiredMark={false}
         >
           <div
             style={{
@@ -291,24 +301,17 @@ function App() {
             </Row>
           </Form.Item>
 
-          <Form.Item name="duration" label="Dauer" initialValue={5}>
-            <InputNumber
-              step={1}
-              min={Constants.DURATION.MIN}
-              max={Constants.DURATION.MAX}
-              addonAfter={
-                <Select
-                  style={{
-                    width: 120,
-                  }}
-                  value={durationUnit}
-                  onChange={(value) => setDurationUnit(value)}
-                >
-                  <Select.Option value="seconds">Sekunden</Select.Option>
-                  <Select.Option value="minutes">Minuten</Select.Option>
-                </Select>
-              }
-            />
+          <Form.Item
+            name="duration"
+            label="Dauer"
+            rules={[
+              {
+                required: true,
+                message: "Bitte geben Sie die Dauer ein",
+              },
+            ]}
+          >
+            <TimePicker showNow={false} />
           </Form.Item>
 
           <Form.Item label="Beschleunigung">