From 7b8594debceb93a1fa400d48fe1dcff943bd5af6 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Thu, 26 Jun 2025 23:44:25 +0200
Subject: Implement stop sheet modal for map stop interactions (#27)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: arielcostas <94913521+arielcostas@users.noreply.github.com>
Co-authored-by: Ariel Costas Guerrero <ariel@costas.dev>
---
 src/frontend/app/components/RegularTable.tsx | 129 +++++++++++++++------------
 1 file changed, 72 insertions(+), 57 deletions(-)

(limited to 'src/frontend/app/components/RegularTable.tsx')

diff --git a/src/frontend/app/components/RegularTable.tsx b/src/frontend/app/components/RegularTable.tsx
index e5b3782..8b01410 100644
--- a/src/frontend/app/components/RegularTable.tsx
+++ b/src/frontend/app/components/RegularTable.tsx
@@ -3,70 +3,85 @@ import { type StopDetails } from "../routes/estimates-$id";
 import LineIcon from "./LineIcon";
 
 interface RegularTableProps {
-    data: StopDetails;
-    dataDate: Date | null;
+  data: StopDetails;
+  dataDate: Date | null;
 }
 
-export const RegularTable: React.FC<RegularTableProps> = ({ data, dataDate }) => {
-    const { t } = useTranslation();
+export const RegularTable: React.FC<RegularTableProps> = ({
+  data,
+  dataDate,
+}) => {
+  const { t } = useTranslation();
 
-    const absoluteArrivalTime = (minutes: number) => {
-        const now = new Date()
-        const arrival = new Date(now.getTime() + minutes * 60000)
-        return Intl.DateTimeFormat(navigator.language, {
-            hour: '2-digit',
-            minute: '2-digit'
-        }).format(arrival)
-    }
+  const absoluteArrivalTime = (minutes: number) => {
+    const now = new Date();
+    const arrival = new Date(now.getTime() + minutes * 60000);
+    return Intl.DateTimeFormat(
+      typeof navigator !== "undefined" ? navigator.language : "en",
+      {
+        hour: "2-digit",
+        minute: "2-digit",
+      }
+    ).format(arrival);
+  };
 
-    const formatDistance = (meters: number) => {
-        if (meters > 1024) {
-            return `${(meters / 1000).toFixed(1)} km`;
-        } else {
-            return `${meters} ${t('estimates.meters', 'm')}`;
-        }
+  const formatDistance = (meters: number) => {
+    if (meters > 1024) {
+      return `${(meters / 1000).toFixed(1)} km`;
+    } else {
+      return `${meters} ${t("estimates.meters", "m")}`;
     }
+  };
 
-    return <table className="table">
-        <caption>{t('estimates.caption', 'Estimaciones de llegadas a las {{time}}', { time: dataDate?.toLocaleTimeString() })}</caption>
+  return (
+    <table className="table">
+      <caption>
+        {t("estimates.caption", "Estimaciones de llegadas a las {{time}}", {
+          time: dataDate?.toLocaleTimeString(),
+        })}
+      </caption>
 
-        <thead>
-            <tr>
-                <th>{t('estimates.line', 'Línea')}</th>
-                <th>{t('estimates.route', 'Ruta')}</th>
-                <th>{t('estimates.arrival', 'Llegada')}</th>
-                <th>{t('estimates.distance', 'Distancia')}</th>
-            </tr>
-        </thead>
+      <thead>
+        <tr>
+          <th>{t("estimates.line", "Línea")}</th>
+          <th>{t("estimates.route", "Ruta")}</th>
+          <th>{t("estimates.arrival", "Llegada")}</th>
+          <th>{t("estimates.distance", "Distancia")}</th>
+        </tr>
+      </thead>
 
-        <tbody>
-            {data.estimates
-                .sort((a, b) => a.minutes - b.minutes)
-                .map((estimate, idx) => (
-                    <tr key={idx}>
-                        <td><LineIcon line={estimate.line} /></td>
-                        <td>{estimate.route}</td>
-                        <td>
-                            {estimate.minutes > 15
-                                ? absoluteArrivalTime(estimate.minutes)
-                                : `${estimate.minutes} ${t('estimates.minutes', 'min')}`}
-                        </td>
-                        <td>
-                            {estimate.meters > -1
-                                ? formatDistance(estimate.meters)
-                                : t('estimates.not_available', 'No disponible')
-                            }
-                        </td>
-                    </tr>
-                ))}
-        </tbody>
+      <tbody>
+        {data.estimates
+          .sort((a, b) => a.minutes - b.minutes)
+          .map((estimate, idx) => (
+            <tr key={idx}>
+              <td>
+                <LineIcon line={estimate.line} />
+              </td>
+              <td>{estimate.route}</td>
+              <td>
+                {estimate.minutes > 15
+                  ? absoluteArrivalTime(estimate.minutes)
+                  : `${estimate.minutes} ${t("estimates.minutes", "min")}`}
+              </td>
+              <td>
+                {estimate.meters > -1
+                  ? formatDistance(estimate.meters)
+                  : t("estimates.not_available", "No disponible")}
+              </td>
+            </tr>
+          ))}
+      </tbody>
 
-        {data?.estimates.length === 0 && (
-            <tfoot>
-                <tr>
-                    <td colSpan={4}>{t('estimates.none', 'No hay estimaciones disponibles')}</td>
-                </tr>
-            </tfoot>
-        )}
+      {data?.estimates.length === 0 && (
+        <tfoot>
+          <tr>
+            <td colSpan={4}>
+              {t("estimates.none", "No hay estimaciones disponibles")}
+            </td>
+          </tr>
+        </tfoot>
+      )}
     </table>
-}
+  );
+};
-- 
cgit v1.3