Skip to content
Snippets Groups Projects
Commit c171e2a3 authored by Niklas Schrötler's avatar Niklas Schrötler
Browse files

Merge branch 'master' into 'master'

add progress bar for canteen plan

See merge request !10
parents a4f5585b 723fd71d
No related branches found
No related tags found
No related merge requests found
...@@ -17,6 +17,31 @@ ...@@ -17,6 +17,31 @@
cursor: none; 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 */ /* inter-200 - latin_latin-ext */
@font-face { @font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
......
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;
...@@ -4,6 +4,7 @@ import PanelTitle from "../../meta/PanelTitle"; ...@@ -4,6 +4,7 @@ import PanelTitle from "../../meta/PanelTitle";
import PanelContent from "../../meta/PanelContent"; import PanelContent from "../../meta/PanelContent";
import {CanteenAPIResponse} from "./types/canteenAPI"; import {CanteenAPIResponse} from "./types/canteenAPI";
import {Leaf, Plant, Bone, Record, Fish, ForkKnife} from "@phosphor-icons/react"; import {Leaf, Plant, Bone, Record, Fish, ForkKnife} from "@phosphor-icons/react";
import ProgressBar from "../../meta/ProgressBar";
type Dish = { type Dish = {
name: string, name: string,
...@@ -138,9 +139,9 @@ const MensaplanPanel = (props: {definition: MensaPanelDefinition}) => { ...@@ -138,9 +139,9 @@ const MensaplanPanel = (props: {definition: MensaPanelDefinition}) => {
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
useEffect(() => { const updateGroup = () => {
const update = async () => { cycle.current = (cycle.current + 1) % 2;
switch (cycle.current % 2) { switch (cycle.current) {
case 0: case 0:
setGroupName("Menüs"); setGroupName("Menüs");
setDishes(menus.current); setDishes(menus.current);
...@@ -149,18 +150,12 @@ const MensaplanPanel = (props: {definition: MensaPanelDefinition}) => { ...@@ -149,18 +150,12 @@ const MensaplanPanel = (props: {definition: MensaPanelDefinition}) => {
setGroupName("Aktionsteller"); setGroupName("Aktionsteller");
setDishes(specials.current); setDishes(specials.current);
break; 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 ( return (
<PanelWrapper> <PanelWrapper>
...@@ -206,6 +201,7 @@ const MensaplanPanel = (props: {definition: MensaPanelDefinition}) => { ...@@ -206,6 +201,7 @@ const MensaplanPanel = (props: {definition: MensaPanelDefinition}) => {
</div> </div>
)} )}
</PanelContent> </PanelContent>
<ProgressBar duration={20000} idName={'mena-progress'} callbackFunction={updateGroup} />
</PanelWrapper> </PanelWrapper>
); );
}; };
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment