aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
authorAriel Costas Guerrero <ariel@costas.dev>2025-05-26 10:48:43 +0200
committerAriel Costas Guerrero <ariel@costas.dev>2025-05-26 10:48:43 +0200
commit5ced7f916d94e86e9a7ec164bee56f9a8e3a2a3a (patch)
treeb1ef5afa17b4a2f9fb2cbd683afc2fb6d905b5e1 /src/components
parent4637373b50636e78dc2c7b6f99be879edb4ff7dc (diff)
Replace Azure SWA with custom server
Diffstat (limited to 'src/components')
-rw-r--r--src/components/GroupedTable.tsx74
-rw-r--r--src/components/LineIcon.css239
-rw-r--r--src/components/LineIcon.tsx17
-rw-r--r--src/components/RegularTable.tsx70
-rw-r--r--src/components/StopItem.css54
-rw-r--r--src/components/StopItem.tsx25
6 files changed, 0 insertions, 479 deletions
diff --git a/src/components/GroupedTable.tsx b/src/components/GroupedTable.tsx
deleted file mode 100644
index 58bb5ed..0000000
--- a/src/components/GroupedTable.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { StopDetails } from "../pages/Estimates";
-import LineIcon from "./LineIcon";
-
-interface GroupedTable {
- data: StopDetails;
- dataDate: Date | null;
-}
-
-export const GroupedTable: React.FC<GroupedTable> = ({ data, dataDate }) => {
- const formatDistance = (meters: number) => {
- if (meters > 1024) {
- return `${(meters / 1000).toFixed(1)} km`;
- } else {
- return `${meters} m`;
- }
- }
-
- const groupedEstimates = data.estimates.reduce((acc, estimate) => {
- if (!acc[estimate.line]) {
- acc[estimate.line] = [];
- }
- acc[estimate.line].push(estimate);
- return acc;
- }, {} as Record<string, typeof data.estimates>);
-
- const sortedLines = Object.keys(groupedEstimates).sort((a, b) => {
- const firstArrivalA = groupedEstimates[a][0].minutes;
- const firstArrivalB = groupedEstimates[b][0].minutes;
- return firstArrivalA - firstArrivalB;
- });
-
- return <table className="table">
- <caption>Estimaciones de llegadas a las {dataDate?.toLocaleTimeString()}</caption>
-
- <thead>
- <tr>
- <th>Línea</th>
- <th>Ruta</th>
- <th>Llegada</th>
- <th>Distancia</th>
- </tr>
- </thead>
-
- <tbody>
- {sortedLines.map((line) => (
- groupedEstimates[line].map((estimate, idx) => (
- <tr key={`${line}-${idx}`}>
- {idx === 0 && (
- <td rowSpan={groupedEstimates[line].length}>
- <LineIcon line={line} />
- </td>
- )}
- <td>{estimate.route}</td>
- <td>{`${estimate.minutes} min`}</td>
- <td>
- {estimate.meters > -1
- ? formatDistance(estimate.meters)
- : "No disponible"
- }
- </td>
- </tr>
- ))
- ))}
- </tbody>
-
- {data?.estimates.length === 0 && (
- <tfoot>
- <tr>
- <td colSpan={4}>No hay estimaciones disponibles</td>
- </tr>
- </tfoot>
- )}
- </table>
-} \ No newline at end of file
diff --git a/src/components/LineIcon.css b/src/components/LineIcon.css
deleted file mode 100644
index e7e8949..0000000
--- a/src/components/LineIcon.css
+++ /dev/null
@@ -1,239 +0,0 @@
-:root {
- --line-c1: rgb(237, 71, 19);
- --line-c3d: rgb(255, 204, 0);
- --line-c3i: rgb(255, 204, 0);
- --line-l4a: rgb(0, 153, 0);
- --line-l4c: rgb(0, 153, 0);
- --line-l5a: rgb(0, 176, 240);
- --line-l5b: rgb(0, 176, 240);
- --line-l6: rgb(204, 51, 153);
- --line-l7: rgb(150, 220, 153);
- --line-l9b: rgb(244, 202, 140);
- --line-l10: rgb(153, 51, 0);
- --line-l11: rgb(226, 0, 38);
- --line-l12a: rgb(106, 150, 190);
- --line-l12b: rgb(106, 150, 190);
- --line-l13: rgb(0, 176, 240);
- --line-l14: rgb(129, 142, 126);
- --line-l15a: rgb(216, 168, 206);
- --line-l15b: rgb(216, 168, 206);
- --line-l15c: rgb(216, 168, 168);
- --line-l16: rgb(129, 142, 126);
- --line-l17: rgb(214, 245, 31);
- --line-l18a: rgb(212, 80, 168);
- --line-l18b: rgb(0, 0, 0);
- --line-l18h: rgb(0, 0, 0);
- --line-l23: rgb(0, 70, 210);
- --line-l24: rgb(191, 191, 191);
- --line-l25: rgb(172, 100, 4);
- --line-l27: rgb(112, 74, 42);
- --line-l28: rgb(176, 189, 254);
- --line-l29: rgb(248, 184, 90);
- --line-l31: rgb(255, 255, 0);
- --line-a: rgb(119, 41, 143);
- --line-h: rgb(0, 96, 168);
- --line-h1: rgb(0, 96, 168);
- --line-h2: rgb(0, 96, 168);
- --line-h3: rgb(0, 96, 168);
- --line-lzd: rgb(61, 78, 167);
- --line-n1: rgb(191, 191, 191);
- --line-n4: rgb(102, 51, 102);
- --line-psa1: rgb(0, 153, 0);
- --line-psa4: rgb(0, 153, 0);
- --line-ptl: rgb(150, 220, 153);
- --line-turistico: rgb(102, 51, 102);
- --line-u1: rgb(172, 100, 4);
- --line-u2: rgb(172, 100, 4);
-}
-
-.line-icon {
- display: inline-block;
- padding: 0.25rem 0.5rem;
- margin-right: 0.5rem;
- border-bottom: 3px solid;
- font-size: 0.9rem;
- font-weight: 600;
- text-transform: uppercase;
- color: inherit;
- /* Prevent color change on hover */
-}
-
-.line-c1 {
- border-color: var(--line-c1);
-}
-
-.line-c3d {
- border-color: var(--line-c3d);
-}
-
-.line-c3i {
- border-color: var(--line-c3i);
-}
-
-.line-l4a {
- border-color: var(--line-l4a);
-}
-
-.line-l4c {
- border-color: var(--line-l4c);
-}
-
-.line-l5a {
- border-color: var(--line-l5a);
-}
-
-.line-l5b {
- border-color: var(--line-l5b);
-}
-
-.line-l6 {
- border-color: var(--line-l6);
-}
-
-.line-l7 {
- border-color: var(--line-l7);
-}
-
-.line-l9b {
- border-color: var(--line-l9b);
-}
-
-.line-l10 {
- border-color: var(--line-l10);
-}
-
-.line-l11 {
- border-color: var(--line-l11);
-}
-
-.line-l12a {
- border-color: var(--line-l12a);
-}
-
-.line-l12b {
- border-color: var(--line-l12b);
-}
-
-.line-l13 {
- border-color: var(--line-l13);
-}
-
-.line-l14 {
- border-color: var(--line-l14);
-}
-
-.line-l15a {
- border-color: var(--line-l15a);
-}
-
-.line-l15b {
- border-color: var(--line-l15b);
-}
-
-.line-l15c {
- border-color: var(--line-l15c);
-}
-
-.line-l16 {
- border-color: var(--line-l16);
-}
-
-.line-l17 {
- border-color: var(--line-l17);
-}
-
-.line-l18a {
- border-color: var(--line-l18a);
-}
-
-.line-l18b {
- border-color: var(--line-l18b);
-}
-
-.line-l18h {
- border-color: var(--line-l18h);
-}
-
-.line-l23 {
- border-color: var(--line-l23);
-}
-
-.line-l24 {
- border-color: var(--line-l24);
-}
-
-.line-l25 {
- border-color: var(--line-l25);
-}
-
-.line-l27 {
- border-color: var(--line-l27);
-}
-
-.line-l28 {
- border-color: var(--line-l28);
-}
-
-.line-l29 {
- border-color: var(--line-l29);
-}
-
-.line-l31 {
- border-color: var(--line-l31);
-}
-
-.line-a {
- border-color: var(--line-a);
-}
-
-.line-h {
- border-color: var(--line-h);
-}
-
-.line-h1 {
- border-color: var(--line-h1);
-}
-
-.line-h2 {
- border-color: var(--line-h2);
-}
-
-.line-h3 {
- border-color: var(--line-h3);
-}
-
-.line-lzd {
- border-color: var(--line-lzd);
-}
-
-.line-n1 {
- border-color: var(--line-n1);
-}
-
-.line-n4 {
- border-color: var(--line-n4);
-}
-
-.line-psa1 {
- border-color: var(--line-psa1);
-}
-
-.line-psa4 {
- border-color: var(--line-psa4);
-}
-
-.line-ptl {
- border-color: var(--line-ptl);
-}
-
-.line-turistico {
- border-color: var(--line-turistico);
-}
-
-.line-u1 {
- border-color: var(--line-u1);
-}
-
-.line-u2 {
- border-color: var(--line-u2);
-} \ No newline at end of file
diff --git a/src/components/LineIcon.tsx b/src/components/LineIcon.tsx
deleted file mode 100644
index 50fd1ec..0000000
--- a/src/components/LineIcon.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import './LineIcon.css';
-
-interface LineIconProps {
- line: string;
-}
-
-const LineIcon: React.FC<LineIconProps> = ({ line }) => {
- const formattedLine = /^[a-zA-Z]/.test(line) ? line : `L${line}`;
- return (
- <span className={`line-icon line-${formattedLine.toLowerCase()}`}>
- {formattedLine}
- </span>
- );
-};
-
-export default LineIcon; \ No newline at end of file
diff --git a/src/components/RegularTable.tsx b/src/components/RegularTable.tsx
deleted file mode 100644
index 8f0605f..0000000
--- a/src/components/RegularTable.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { StopDetails } from "../pages/Estimates";
-import LineIcon from "./LineIcon";
-
-interface RegularTableProps {
- data: StopDetails;
- dataDate: Date | null;
-}
-
-export const RegularTable: React.FC<RegularTableProps> = ({ data, dataDate }) => {
-
- 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 formatDistance = (meters: number) => {
- if (meters > 1024) {
- return `${(meters / 1000).toFixed(1)} km`;
- } else {
- return `${meters} m`;
- }
- }
-
- return <table className="table">
- <caption>Estimaciones de llegadas a las {dataDate?.toLocaleTimeString()}</caption>
-
- <thead>
- <tr>
- <th>Línea</th>
- <th>Ruta</th>
- <th>Llegada</th>
- <th>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} min`}
- </td>
- <td>
- {estimate.meters > -1
- ? formatDistance(estimate.meters)
- : "No disponible"
- }
- </td>
- </tr>
- ))}
- </tbody>
-
- {data?.estimates.length === 0 && (
- <tfoot>
- <tr>
- <td colSpan={4}>No hay estimaciones disponibles</td>
- </tr>
- </tfoot>
- )}
- </table>
-} \ No newline at end of file
diff --git a/src/components/StopItem.css b/src/components/StopItem.css
deleted file mode 100644
index 9feb2d1..0000000
--- a/src/components/StopItem.css
+++ /dev/null
@@ -1,54 +0,0 @@
-/* Stop Item Styling */
-
-.stop-notes {
- font-size: 0.85rem;
- font-style: italic;
- color: #666;
- margin: 2px 0;
-}
-
-.stop-amenities {
- display: flex;
- flex-wrap: wrap;
- gap: 4px;
- margin-top: 4px;
-}
-
-.amenity-tag {
- font-size: 0.75rem;
- background-color: #e8f4f8;
- color: #0078d4;
- border-radius: 4px;
- padding: 2px 6px;
- display: inline-block;
-}
-
-/* Different colors for different amenity types */
-.amenity-tag[data-amenity="shelter"] {
- background-color: #e3f1df;
- color: #107c41;
-}
-
-.amenity-tag[data-amenity="bench"] {
- background-color: #f0e8fc;
- color: #5c2e91;
-}
-
-.amenity-tag[data-amenity="real-time display"] {
- background-color: #fff4ce;
- color: #986f0b;
-}
-
-/* When there are alternate names available, show an indicator */
-.has-alternate-names {
- position: relative;
-}
-
-.has-alternate-names::after {
- content: "⋯";
- position: absolute;
- right: -15px;
- top: 0;
- color: #0078d4;
- font-weight: bold;
-} \ No newline at end of file
diff --git a/src/components/StopItem.tsx b/src/components/StopItem.tsx
deleted file mode 100644
index cf9ccfc..0000000
--- a/src/components/StopItem.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router';
-import StopDataProvider, { Stop } from '../data/StopDataProvider';
-import LineIcon from './LineIcon';
-
-interface StopItemProps {
- stop: Stop;
-}
-
-const StopItem: React.FC<StopItemProps> = ({ stop }) => {
-
- return (
- <li className="list-item">
- <Link className="list-item-link" to={`/estimates/${stop.stopId}`}>
- {stop.favourite && <span className="favourite-icon">★</span>} ({stop.stopId}) {StopDataProvider.getDisplayName(stop)}
- <div className="line-icons">
- {stop.lines?.map(line => <LineIcon key={line} line={line} />)}
- </div>
-
- </Link>
- </li>
- );
-};
-
-export default StopItem; \ No newline at end of file