add progress bar for canteen plan

src/index.css

@@ -17,6 +17,31 @@
     cursor: none;
 }
 
+.progress-bar {
+    justify-content: center;
+    border-radius: 10px;
+    padding: 0 5px;
+    display: flex;
+    height: 10px;
+    width: 100%;;
+}
+
+.progress-bar-fill {
+    border-radius: 10px;
+    height: 10px;
+    width: 0;
+    animation-timing-function: linear;
+}
+
+.progress-bar-animate {
+    animation-name: progress-bar-animation;
+}
+
+@keyframes progress-bar-animation {
+    0% { width: 0; }
+    100% { width: 100%; }
+}
+
 /* inter-200 - latin_latin-ext */
 @font-face {
     font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */

src/meta/ProgressBar.tsx

+const ProgressBar = (props: { duration: number, idName: string, callbackFunction: () => void }) => {
+
+  const runCallback = () => {
+    props.callbackFunction();
+    const el = document.getElementById(props.idName);
+    if (el) {
+      el.classList.remove('progress-bar-animate');
+      void el.offsetWidth;
+      el.classList.add('progress-bar-animate');
+    }
+  }
+
+  return (
+    <div className="progress-bar">
+      <div 
+        id={props.idName}
+        className={'progress-bar-fill progress-bar-animate bg-zinc-700'}
+        style={{ animationDuration: `${props.duration}ms` }} 
+        onAnimationEnd={() => runCallback()}
+      />
+    </div>
+  );
+};
+
+export default ProgressBar;

src/panels/Mensaplan/MensaplanPanel.tsx

@@ -4,6 +4,7 @@ import PanelTitle from "../../meta/PanelTitle";
 import PanelContent from "../../meta/PanelContent";
 import {CanteenAPIResponse} from "./types/canteenAPI";
 import {Leaf, Plant, Bone, Record, Fish, ForkKnife} from "@phosphor-icons/react";
+import ProgressBar from "../../meta/ProgressBar";
 
 type Dish = {
   name: string,
@@ -138,9 +139,9 @@ const MensaplanPanel = (props: {definition: MensaPanelDefinition}) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    const update = async () => {
-      switch (cycle.current % 2) {
+  const updateGroup = () => {
+    cycle.current = (cycle.current + 1) % 2;
+    switch (cycle.current) {
       case 0:
         setGroupName("Menüs");
         setDishes(menus.current);
@@ -149,18 +150,12 @@ const MensaplanPanel = (props: {definition: MensaPanelDefinition}) => {
         setGroupName("Aktionsteller");
         setDishes(specials.current);
         break;
+      default:
+        console.error("You fucked up bad!");
+        break;
     }
-
-      cycle.current = (cycle.current + 1) % 2;
   }
 
-    update();
-    const interval = setInterval(update, 20 * 1000);
-
-    return () => {
-      clearInterval(interval);
-    }
-  }, []);
 
   return (
     <PanelWrapper>
@@ -206,6 +201,7 @@ const MensaplanPanel = (props: {definition: MensaPanelDefinition}) => {
           </div>
         )}
       </PanelContent>
+      <ProgressBar duration={20000} idName={'mena-progress'} callbackFunction={updateGroup} />
     </PanelWrapper>
   );
 };