Finished Status Bar

Submit-Validation not yet implemented

anwendung/src/components/StatusBar.jsx

@@ -1,32 +1,36 @@
-import React, {useState} from "react"
+import React, { useState, useEffect } from "react";
-import {baseURL} from "@/components/Constants";
+import { baseURL } from "@/components/Constants";
-import {console} from "next/dist/compiled/@edge-runtime/primitives/console";
 
-export default function StatusBar(p)
+export default function StatusBar(p) {
-{
     const module = p.module;
+    const [index, setIndex] = useState(-1);
 
-    let url = baseURL + "/entries/planned?sessionid=" + localStorage.getItem("sessionid");
+    useEffect(() => {
-
+        const url = baseURL + "/entries/planned?sessionid=" + localStorage.getItem("sessionid");
-    fetch(url).then(response => response.json()).then(entries => {
+        fetch(url)
-        let testindex = 1;
+            .then((response) => response.json())
-        entries.forEach(e => {
+            .then((entries) => {
-            if (e.moduleid == module.id){
+                let newIndex = -1;
-                testindex = 2;
+                if (entries !== null) {
-                if (module.activated == 0){
+                    entries.forEach((e) => {
-                    testindex = 3;
+                        if (e.moduleid == module.id) {
+                            if (module.activated == 0) {
+                                newIndex = 2;
+                            } else {
+                                newIndex = 1;
+                            }
+                        }
+                    });
+                    if (newIndex === -1) {
+                        newIndex = 0;
+                    }
                 }
-            }
+                setIndex(newIndex);
-        })
+            });
-        console.log(testindex);
+    }, [module.id, module.activated]);
-    })
 
-
-    if(p.progress > 100) p.progress = 100;
     let classNames = ["not-started", "started", "finished"];
-    let index = p.progress / 50;
+    let actives = ["", "", ""];
-
-    let actives = ["", "", ""]
     actives[index] = "active";
 
     return (
@@ -35,12 +39,13 @@ export default function StatusBar(p)
                 <span className={"step " + classNames[0] + " " + actives[0]}>1</span>
                 <span className={"step " + classNames[1] + " " + actives[1]}>2</span>
                 <span className={"step " + classNames[2] + " " + actives[2]}>3</span>
-                <div className={"progress-bar " + classNames[index]}
+                <div
-                     style={{
+                    className={"progress-bar " + classNames[index]}
-                         width: p.progress + "%"
+                    style={{
-                     }}
+                        width: 100 + "%",
+                    }}
                 ></div>
             </div>
         </div>
-    )
+    );
-}
+}