aboutsummaryrefslogtreecommitdiff
path: root/src/frontend/app/components/RegularTable.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/frontend/app/components/RegularTable.tsx')
-rw-r--r--src/frontend/app/components/RegularTable.tsx129
1 files changed, 72 insertions, 57 deletions
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>
-}
+ );
+};