From 417930355fbe6089536c60c3ffba75c8691ca581 Mon Sep 17 00:00:00 2001 From: Ariel Costas Guerrero Date: Mon, 8 Dec 2025 00:33:16 +0100 Subject: feat: add StopHelpModal component and integrate help functionality in Estimates --- src/frontend/app/components/StopHelpModal.tsx | 153 +++++++++++++++++++++ .../Stops/ConsolidatedCirculationCard.tsx | 60 ++++++-- 2 files changed, 199 insertions(+), 14 deletions(-) create mode 100644 src/frontend/app/components/StopHelpModal.tsx (limited to 'src/frontend/app/components') diff --git a/src/frontend/app/components/StopHelpModal.tsx b/src/frontend/app/components/StopHelpModal.tsx new file mode 100644 index 0000000..87e02f9 --- /dev/null +++ b/src/frontend/app/components/StopHelpModal.tsx @@ -0,0 +1,153 @@ +import { AlertTriangle, Clock, LocateIcon } from "lucide-react"; +import React from "react"; +import { useTranslation } from "react-i18next"; +import { Sheet } from "react-modal-sheet"; + +interface StopHelpModalProps { + isOpen: boolean; + onClose: () => void; +} + +export const StopHelpModal: React.FC = ({ + isOpen, + onClose, +}) => { + const { t } = useTranslation(); + + return ( + + + + +
+
+

+ {t("stop_help.title")} +

+ +
+
+
+ +
+
+

+ {t("stop_help.realtime_ok")} +

+

+ {t("stop_help.realtime_ok_desc")} +

+
+
+ +
+
+ +
+
+

+ {t("stop_help.realtime_warning")} +

+

+ {t("stop_help.realtime_warning_desc")} +

+
+
+ +
+
+ +
+
+

+ {t("stop_help.scheduled")} +

+

+ {t("stop_help.scheduled_desc")} +

+
+
+ +
+
+ +
+
+

+ {t("stop_help.gps")} +

+

+ {t("stop_help.gps_desc")} +

+
+
+
+
+ +
+

+ {t("stop_help.punctuality")} +

+ +
+
+ + {t("stop_help.punctuality_ontime_label", "En hora")} + +

+ {t("stop_help.punctuality_ontime")} +

+
+ +
+ + {t("stop_help.punctuality_early_label", "Adelanto")} + +

+ {t("stop_help.punctuality_early")} +

+
+ +
+ + {t("stop_help.punctuality_late_label", "Retraso")} + +

+ {t("stop_help.punctuality_late")} +

+
+
+
+ +
+

+ {t("stop_help.gps_quality")} +

+ +
+
+ + {t("stop_help.gps_reliable_label", "GPS fiable")} + +

+ {t("stop_help.gps_reliable")} +

+
+ +
+ + {t("stop_help.gps_imprecise_label", "GPS impreciso")} + +

+ {t("stop_help.gps_imprecise")} +

+
+
+
+
+ + + + + ); +}; diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx index 8a2eb94..635c0ce 100644 --- a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx +++ b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx @@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next"; import LineIcon from "~components/LineIcon"; import { type ConsolidatedCirculation } from "~routes/stops-$id"; +import { AlertTriangle, LocateIcon } from "lucide-react"; import "./ConsolidatedCirculationCard.css"; interface ConsolidatedCirculationCardProps { @@ -119,8 +120,9 @@ export const ConsolidatedCirculationCard: React.FC< // On time if (delta === 0) { return { - label: reduced ? "OK" : t("estimates.delay_on_time", "En hora (0 min)"), + label: reduced ? "OK" : t("estimates.delay_on_time"), tone: "delay-ok", + kind: "delay", } as const; } @@ -129,40 +131,71 @@ export const ConsolidatedCirculationCard: React.FC< const tone = delta <= 2 ? "delay-ok" : delta <= 10 ? "delay-warn" : "delay-critical"; return { - label: reduced ? `R${delta}` : t("estimates.delay_positive", "Retraso de {{minutes}} min", { + label: reduced ? `R${delta}` : t("estimates.delay_positive", { minutes: delta, }), tone, + kind: "delay", } as const; } // Early const tone = absDelta <= 2 ? "delay-ok" : "delay-early"; return { - label: reduced ? `A${absDelta}` : t("estimates.delay_negative", "Adelanto de {{minutes}} min", { + label: reduced ? `A${absDelta}` : t("estimates.delay_negative", { minutes: absDelta, }), tone, + kind: "delay", } as const; }, [estimate.schedule, estimate.realTime, t, reduced]); const metaChips = useMemo(() => { - const chips: Array<{ label: string; tone?: string }> = []; + const chips: Array<{ label: string; tone?: string, kind?: "regular" | "gps" | "delay" | "warning" }> = []; + if (delayChip) { chips.push(delayChip); } + if (estimate.schedule) { chips.push({ label: `${parseServiceId(estimate.schedule.serviceId)} · ${getTripIdDisplay( estimate.schedule.tripId )}`, + kind: "regular", }); } + if (estimate.realTime && estimate.realTime.distance >= 0) { - chips.push({ label: formatDistance(estimate.realTime.distance) }); + chips.push({ label: formatDistance(estimate.realTime.distance), kind: "regular" }); + } + + if (estimate.currentPosition) { + if (estimate.isPreviousTrip) { + chips.push({ label: t("estimates.previous_trip"), kind: "gps" }); + } else { + chips.push({ label: t("estimates.bus_gps_position"), kind: "gps" }); + } + } + + if (timeClass === "time-delayed") { + chips.push({ + label: reduced ? "!" : t("estimates.low_accuracy"), + tone: "warning", + kind: "warning", + }); } + + if (timeClass === "time-scheduled") { + chips.push({ + label: reduced ? "⧗" : t("estimates.no_realtime"), + tone: "warning", + kind: "warning", + }); + } + return chips; - }, [delayChip, estimate.schedule, estimate.realTime]); + }, [delayChip, estimate.schedule, estimate.realTime, timeClass, t, reduced]); // Check if bus has GPS position (live tracking) const hasGpsPosition = !!estimate.currentPosition; @@ -218,6 +251,9 @@ export const ConsolidatedCirculationCard: React.FC< case "delay-early": chipColourClasses = "bg-blue-400/20 dark:bg-blue-600/30 text-blue-700 dark:text-blue-300"; break; + case "warning": + chipColourClasses = "bg-orange-400/20 dark:bg-orange-600/30 text-orange-700 dark:text-orange-300"; + break; default: chipColourClasses = "bg-black/[0.06] dark:bg-white/[0.12] text-[var(--text-color)]"; } @@ -227,6 +263,8 @@ export const ConsolidatedCirculationCard: React.FC< key={`${chip.label}-${idx}`} className={`text-xs px-2 py-0.5 rounded-full flex items-center justify-center gap-1 shrink-0 ${chipColourClasses}`} > + {chip.kind === "gps" && ()} + {chip.kind === "warning" && ()} {chip.label} ); @@ -284,14 +322,6 @@ export const ConsolidatedCirculationCard: React.FC< ); })()} - {hasGpsPosition && ( -
- -
- )}
{etaValue} @@ -307,6 +337,8 @@ export const ConsolidatedCirculationCard: React.FC< key={`${chip.label}-${idx}`} className={`meta-chip ${chip.tone ?? ""}`.trim()} > + {chip.kind === "gps" && ()} + {chip.kind === "warning" && ()} {chip.label} ))} -- cgit v1.3