progress bar

src/App.js

@@ -8,7 +8,6 @@ import {
   Form,
   Grid,
   InputNumber,
-  Progress,
   Row,
   Select,
   Slider,
@@ -36,6 +35,27 @@ const Constants = {
   },
 };
 
+const PROGRES_BAR_INTERVAL_TIME = 20;
+
+function setProgressBarTime(milliseconds) {
+  const elem = document.getElementById("progress-bar-time");
+
+  if (elem === null) return;
+
+  if (milliseconds <= 0) {
+    elem.innerText = "";
+    return;
+  }
+
+  const seconds = Math.floor(milliseconds / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+
+  elem.innerText = `${hours > 0 ? hours + "h " : ""}${
+    minutes > 0 ? (minutes % 60) + "m " : ""
+  }${seconds % 60}s`;
+}
+
 function App() {
   const screens = useBreakpoint();
   const [form] = useForm();
@@ -47,14 +67,10 @@ function App() {
   const [durationUnit, setDurationUnit] = useState("seconds");
 
   const remainingTimeRef = useRef(0);
-  const [remainingTime, setRemainingTime] = useState(0);
-  const [procesStatus, setProcessStatus] = useState("");
-
-  const intervalRef = useRef(null);
+  const [processStatus, setProcessStatus] = useState("");
 
   const setRemainingTimeProgress = (time) => {
     remainingTimeRef.current = time;
-    setRemainingTime(time);
   };
 
   const showErrorMessage = () => {
@@ -90,36 +106,42 @@ function App() {
   }, []);
 
   useEffect(() => {
-    intervalRef.current = setInterval(() => {
-      if (remainingTimeRef.current <= 0) {
-        clearInterval(intervalRef.current);
-        return;
+    let elem = document.getElementById("progress-bar");
+    let width = 1;
+    let currentProgress = 0;
+
+    if (elem === null) return;
+
+    const intervalId = setInterval(frame, PROGRES_BAR_INTERVAL_TIME);
+
+    function frame() {
+      if (width >= 100) {
+        clearInterval(intervalId);
+        setRemainingTimeProgress(0);
+
+        if (processStatus !== "Angehalten" && processStatus !== "")
+          setProcessStatus("Fertig");
+      } else {
+        width = (100 / remainingTimeRef.current) * currentProgress + 1;
+
+        currentProgress += PROGRES_BAR_INTERVAL_TIME;
+        elem.style.width = width + "%";
       }
 
-      setRemainingTime((prev) => {
-        const newTime = prev - 150;
-
-        if (newTime <= 0) {
-          clearInterval(intervalRef.current);
-          setRemainingTimeProgress(0);
-          setProcessStatus("Fertig");
-        }
-
-        return newTime;
-      });
-    }, 150);
+      setProgressBarTime(remainingTimeRef.current - currentProgress);
+    }
 
     return () => {
-      clearInterval(intervalRef.current);
+      clearInterval(intervalId);
     };
   }, [remainingTimeRef.current]);
 
   const sendControlRequest = (urlPath) => {
-    setRemainingTimeProgress(0);
-
     form
       .validateFields()
       .then((values) => {
+        setProcessStatus("Sende Anfrage");
+
         myFetch({
           url: urlPath,
           method: "POST",
@@ -172,39 +194,44 @@ function App() {
           layout="vertical"
           onFinish={() => sendControlRequest("/start")}
         >
-          <Form.Item
-            label={`Status${procesStatus !== "" ? `: ${procesStatus}` : ""}`}
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              paddingBottom: 4,
+            }}
           >
-            <Space style={{ display: "block" }}>
-              <Progress
-                percent={
-                  procesStatus === "Fertig"
-                    ? 100
-                    : 100 -
-                      (
-                        (100 / remainingTimeRef.current) *
-                        remainingTime
-                      ).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>
+            <span>{`Status${
+              processStatus !== "" ? `: ${processStatus}` : ""
+            }`}</span>
+
+            <span
+              id="progress-bar-time"
+              style={{
+                display: "inline-block",
+                width: 100,
+                textAlign: "right",
+              }}
+            />
+          </div>
+
+          <div
+            style={{
+              backgroundColor: "#f1f0f1",
+              height: 8,
+              borderRadius: 12,
+            }}
+          >
+            <div
+              id="progress-bar"
+              style={{
+                width: "0%",
+                height: "100%",
+                backgroundColor: "#98ccfc",
+                borderRadius: 12,
+              }}
+            />
+          </div>
 
           <Divider />
 
@@ -341,6 +368,8 @@ function App() {
                   block
                   danger
                   onClick={() => {
+                    setProcessStatus("Sende Anfrage");
+
                     myFetch({
                       url: "/stop",
                       method: "POST",
@@ -355,7 +384,7 @@ function App() {
                       .catch((error) => {
                         console.error(error);
                         showErrorMessage();
-                        setProcessStatus("");
+                        setProcessStatus("Angehalten");
 
                         setRemainingTimeProgress(0);
                       });