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

FahrplanPanel: Added Animations

parent 930739bc
No related branches found
No related tags found
No related merge requests found
...@@ -5,6 +5,7 @@ import PanelTitle from "../../meta/PanelTitle"; ...@@ -5,6 +5,7 @@ import PanelTitle from "../../meta/PanelTitle";
import PanelContent from "../../meta/PanelContent"; import PanelContent from "../../meta/PanelContent";
import {StationResponse} from "./types/vrrfAPI"; import {StationResponse} from "./types/vrrfAPI";
import {Warning} from "@phosphor-icons/react"; import {Warning} from "@phosphor-icons/react";
import {AnimatePresence, motion} from 'framer-motion';
export type FahrplanPanelDefinition = { export type FahrplanPanelDefinition = {
stops: string[], stops: string[],
...@@ -106,7 +107,7 @@ const FahrplanPanel = (props: {definition: FahrplanPanelDefinition}) => { ...@@ -106,7 +107,7 @@ const FahrplanPanel = (props: {definition: FahrplanPanelDefinition}) => {
<PanelWrapper> <PanelWrapper>
<PanelTitle title={"ÖPNV Monitor"}/> <PanelTitle title={"ÖPNV Monitor"}/>
<PanelContent className={"flex flex-col"}> <PanelContent className={"flex flex-col"}>
<div className={"flex-1 flex flex-col gap-3"}> <motion.div layout transition={{duration: .3, ease: "easeOut"}} className={"flex-1 flex flex-col gap-3"}>
{routes.map((route) => ( {routes.map((route) => (
<PlanElement <PlanElement
key={route.uid} key={route.uid}
...@@ -127,7 +128,7 @@ const FahrplanPanel = (props: {definition: FahrplanPanelDefinition}) => { ...@@ -127,7 +128,7 @@ const FahrplanPanel = (props: {definition: FahrplanPanelDefinition}) => {
</div> </div>
</div> </div>
)} )}
</div> </motion.div>
</PanelContent> </PanelContent>
</PanelWrapper> </PanelWrapper>
......
import {motion} from 'framer-motion'; import {motion} from 'framer-motion';
import React from 'react'; import React, {useEffect, useState} from 'react';
import ProgressIndicator from "./ProgressIndicator"; import ProgressIndicator from "./ProgressIndicator";
import classNames from "../../../util/classNames"; import classNames from "../../../util/classNames";
...@@ -13,8 +13,55 @@ const PlanElement = (props: { ...@@ -13,8 +13,55 @@ const PlanElement = (props: {
delay?: number delay?: number
}[] }[]
}) => { }) => {
const [shown, setShown] = useState<boolean>(true);
useEffect(() => {
const update = () => {
const latestStop = props.stops.reduce((accu, curr) => {
if (curr.arrival >= accu) {
return curr.arrival;
}
return accu;
}, new Date(0));
if ((new Date()).getTime() <= latestStop.getTime()) {
setShown(true);
} else {
setShown(false);
}
};
update();
const updateInterval = setInterval(update, 1000);
return () => {
clearInterval(updateInterval);
}
}, []);
return ( return (
<div> <motion.div
className={"overflow-hidden"}
initial={{
opacity: 0,
translateX: "-100%"
}}
animate={shown ? {
opacity: 1,
translateX: "0%",
marginTop: "0rem"
} : {
opacity: 0,
translateX: "100%",
height: 0,
marginTop: "-0.75rem"
}}
transition={{
duration: .5,
ease: "easeOut",
staggerChildren: .3
}}
>
<div className={"flex flex-row gap-4 items-center font-semibold"}> <div className={"flex flex-row gap-4 items-center font-semibold"}>
<div className={classNames( <div className={classNames(
"flex justify-center items-center text-lg h-10 w-20 leading-none", "flex justify-center items-center text-lg h-10 w-20 leading-none",
...@@ -41,7 +88,7 @@ const PlanElement = (props: { ...@@ -41,7 +88,7 @@ const PlanElement = (props: {
)) ))
} }
</motion.ol> </motion.ol>
</div> </motion.div>
); );
}; };
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment