process bar

src/App.js

@@ -73,8 +73,15 @@ function App() {
       .then((response) => {
         console.log(response);
 
-        setRemainingTimeProgress(response.runningUntil);
+        if (response.acceleration !== undefined)
-        setProcessStatus(response.status);
+          setAcceleration(response.acceleration);
+        if (response.duration !== undefined)
+          form.setFieldValue("duration", response.duration === true ? 1 : 0);
+        if (response.distance !== undefined) setDistance(response.distance);
+        if (response.direction !== undefined) setDirection(response.direction);
+        if (response.runningUntil !== undefined)
+          setRemainingTimeProgress(response.runningUntil);
+        if (response.status !== undefined) setProcessStatus(response.status);
       })
       .catch((error) => {
         console.error(error);
@@ -90,16 +97,17 @@ function App() {
       }
 
       setRemainingTime((prev) => {
-        const newTime = prev - 1000;
+        const newTime = prev - 150;
 
         if (newTime <= 0) {
-          remainingTimeRef.current = 0;
           clearInterval(intervalRef.current);
+          setRemainingTimeProgress(0);
+          setProcessStatus("Fertig");
         }
 
         return newTime;
       });
-    }, 1000);
+    }, 150);
 
     return () => {
       clearInterval(intervalRef.current);
@@ -107,6 +115,8 @@ function App() {
   }, [remainingTimeRef.current]);
 
   const sendControlRequest = (urlPath) => {
+    setRemainingTimeProgress(0);
+
     form
       .validateFields()
       .then((values) => {
@@ -165,18 +175,35 @@ function App() {
           <Form.Item
             label={`Status${procesStatus !== "" ? `: ${procesStatus}` : ""}`}
           >
-            <Progress
+            <Space style={{ display: "block" }}>
-              percent={
+              <Progress
-                100 -
+                percent={
-                Math.round((remainingTime / remainingTimeRef.current) * 100)
+                  procesStatus === "Fertig"
-              }
+                    ? 100
-              type="line"
+                    : 100 -
-              status="active"
+                      (
-              strokeColor={{
+                        (100 / remainingTimeRef.current) *
-                from: "#108ee9",
+                        remainingTime
-                to: "#87d068",
+                      ).toFixed(2)
-              }}
+                }
-            />
+                showInfo={false}
+                type="line"
+                status="active"
+                strokeColor={{
+                  from: "#108ee9",
+                  to: "#87d068",
+                }}
+              />
+              <span
+                style={{
+                  display: "inline-block",
+                  width: 100,
+                  textAlign: "right",
+                }}
+              >
+                {(remainingTime / 1000).toFixed(1)} Sekunden
+              </span>
+            </Space>
           </Form.Item>
 
           <Divider />