diff --git a/src/panels/Fahrplan/FahrplanPanel.tsx b/src/panels/Fahrplan/FahrplanPanel.tsx index a603ea28f767a71a004e4b462941ad77aa0bb709..696dcb3fbcaefad2d3ff14025f3c8ac6392bdfab 100644 --- a/src/panels/Fahrplan/FahrplanPanel.tsx +++ b/src/panels/Fahrplan/FahrplanPanel.tsx @@ -23,7 +23,8 @@ type Route = { name: string, arrival: Date, delay?: number, - countdown: number + countdown: number, + cancelled: boolean }[], countdown: number } @@ -70,7 +71,8 @@ const FahrplanPanel = (props: {definition: FahrplanPanelDefinition}) => { name: departure.internal.stop, arrival, delay, - countdown: parseInt(departure.countdown) + countdown: parseInt(departure.countdown), + cancelled: departure.is_cancelled === 1 } ], countdown: parseInt(departure.countdown) @@ -81,7 +83,8 @@ const FahrplanPanel = (props: {definition: FahrplanPanelDefinition}) => { name: departure.internal.stop, arrival, delay: stringToDelay(departure.delay), - countdown: parseInt(departure.countdown) + countdown: parseInt(departure.countdown), + cancelled: departure.is_cancelled === 1 }) newRoutes[existing_ind].stops = newRoutes[existing_ind].stops diff --git a/src/panels/Fahrplan/components/PlanElement.tsx b/src/panels/Fahrplan/components/PlanElement.tsx index d4d3f8e4c2a74e039790aa15e5aadd0d46e920b8..b6921c01d315b0f14a5bc94b8c8e829feac029eb 100644 --- a/src/panels/Fahrplan/components/PlanElement.tsx +++ b/src/panels/Fahrplan/components/PlanElement.tsx @@ -10,7 +10,8 @@ const PlanElement = (props: { stops: { name: string, arrival: Date, - delay?: number + delay?: number, + cancelled: boolean }[] }) => { const [shown, setShown] = useState<boolean>(true); @@ -87,6 +88,7 @@ const PlanElement = (props: { name={deDortmund(stop.name)} arrival={stop.arrival} delay={stop.delay} + cancelled={stop.cancelled} /> )) } diff --git a/src/panels/Fahrplan/components/ProgressIndicator.tsx b/src/panels/Fahrplan/components/ProgressIndicator.tsx index c5e71e1e9c3249e76936f2b13dbe1500602fc8ce..6f0960044b99e4b045d47fa3f6ee6dce3829fa57 100644 --- a/src/panels/Fahrplan/components/ProgressIndicator.tsx +++ b/src/panels/Fahrplan/components/ProgressIndicator.tsx @@ -5,7 +5,8 @@ type ProgressIndicatorProps = { id: string, name: string, arrival: Date, - delay?: number + delay?: number, + cancelled: boolean } export default function ProgressIndicator(props: Readonly<ProgressIndicatorProps>) { @@ -18,7 +19,10 @@ export default function ProgressIndicator(props: Readonly<ProgressIndicatorProps <div className={"flex-1"}></div> </div> - <div className="relative flex flex-row items-center gap-4"> + <div className={classNames("relative flex flex-row items-center gap-4", props.cancelled ? "text-red-400" : "")} + style={{ + textDecoration: props.cancelled ? "line-through" : "inherit" + }}> <div className={"w-20 flex flex-row justify-center"}> <span className="h-[2.6rem] flex items-center" aria-hidden="true"> <span className="relative z-10 w-[1.5rem] h-[1.5rem] flex items-center justify-center bg-zinc-400 rounded-full"> @@ -31,7 +35,7 @@ export default function ProgressIndicator(props: Readonly<ProgressIndicatorProps {props.name} </div> - <div className={classNames("tabular-nums", props.delay ? "text-red-400" : "text-zinc-300")}> + <div className={classNames("tabular-nums", (props.delay || props.cancelled) ? "text-red-400" : "text-zinc-300")}> {props.delay ? ( <span className={"text-red-400"}> (+{props.delay})