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";
import PanelContent from "../../meta/PanelContent";
import {StationResponse} from "./types/vrrfAPI";
import {Warning} from "@phosphor-icons/react";
import {AnimatePresence, motion} from 'framer-motion';
export type FahrplanPanelDefinition = {
stops: string[],
......@@ -106,7 +107,7 @@ const FahrplanPanel = (props: {definition: FahrplanPanelDefinition}) => {
<PanelWrapper>
<PanelTitle title={"ÖPNV Monitor"}/>
<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) => (
<PlanElement
key={route.uid}
......@@ -127,7 +128,7 @@ const FahrplanPanel = (props: {definition: FahrplanPanelDefinition}) => {
</div>
</div>
)}
</div>
</motion.div>
</PanelContent>
</PanelWrapper>
......
import { motion } from 'framer-motion';
import React from 'react';
import {motion} from 'framer-motion';
import React, {useEffect, useState} from 'react';
import ProgressIndicator from "./ProgressIndicator";
import classNames from "../../../util/classNames";
......@@ -13,8 +13,55 @@ const PlanElement = (props: {
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 (
<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={classNames(
"flex justify-center items-center text-lg h-10 w-20 leading-none",
......@@ -41,7 +88,7 @@ const PlanElement = (props: {
))
}
</motion.ol>
</div>
</motion.div>
);
};
......@@ -49,16 +96,16 @@ export default PlanElement;
const trainIdentifierToColor = (identifier: string): string => {
if(identifier.startsWith("S")) {
if (identifier.startsWith("S")) {
return "bg-green-700";
}
if(identifier.startsWith("X")) {
if (identifier.startsWith("X")) {
return "bg-pink-700";
}
// Fixme: This should just be "if first is number"
if(identifier.startsWith("4")) {
if (identifier.startsWith("4")) {
return "bg-sky-700";
}
......@@ -67,7 +114,7 @@ const trainIdentifierToColor = (identifier: string): string => {
const deDortmund = (input: string): string => {
// Don't remove the city from central station location
if(input.toLowerCase().includes("HBf")) {
if (input.toLowerCase().includes("HBf")) {
return input;
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment