Add table layout like iTranvias, remake settings page

10 files changed, 513 insertions, 117 deletions

diff --git a/src/AppContext.tsx b/src/AppContext.tsx
new file mode 100644
index 0000000..373e624
--- /dev/null
+++ b/src/AppContext.tsx
@@ -0,0 +1,70 @@
+import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+
+type Theme = 'light' | 'dark';
+type TableStyle = 'regular'|'grouped';
+
+interface AppContextProps {
+  theme: Theme;
+  setTheme: React.Dispatch<React.SetStateAction<Theme>>;
+  toggleTheme: () => void;
+  
+  tableStyle: TableStyle;
+  setTableStyle: React.Dispatch<React.SetStateAction<TableStyle>>;
+  toggleTableStyle: () => void;
+}
+
+const AppContext = createContext<AppContextProps | undefined>(undefined);
+
+export const AppProvider = ({ children }: { children: ReactNode }) => {
+  //#region Theme
+  const [theme, setTheme] = useState<Theme>(() => {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+      return savedTheme as Theme;
+    }
+    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    return prefersDark ? 'dark' : 'light';
+  });
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+  //#endregion
+
+  //#region Table Style
+  const [tableStyle, setTableStyle] = useState<TableStyle>(() => {
+    const savedTableStyle = localStorage.getItem('tableStyle');
+    if (savedTableStyle) {
+      return savedTableStyle as TableStyle;
+    }
+    return 'regular';
+  });
+
+  const toggleTableStyle = () => {
+    setTableStyle((prevTableStyle) => (prevTableStyle === 'regular' ? 'grouped' : 'regular'));
+  }
+
+  useEffect(() => {
+    localStorage.setItem('tableStyle', tableStyle);
+  }, [tableStyle]);
+  //#endregion
+
+  return (
+    <AppContext.Provider value={{ theme, setTheme, toggleTheme, tableStyle, setTableStyle, toggleTableStyle }}>
+      {children}
+    </AppContext.Provider>
+  );
+};
+
+export const useApp = () => {
+  const context = useContext(AppContext);
+  if (!context) {
+    throw new Error('useApp must be used within a AppProvider');
+  }
+  return context;
+};
\ No newline at end of file
diff --git a/src/ThemeContext.tsx b/src/ThemeContext.tsx
deleted file mode 100644
index 203b70a..0000000
--- a/src/ThemeContext.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
-
-type Theme = 'light' | 'dark';
-
-interface ThemeContextProps {
-  theme: Theme;
-  toggleTheme: () => void;
-}
-
-const ThemeContext = createContext<ThemeContextProps | undefined>(undefined);
-
-export const ThemeProvider = ({ children }: { children: ReactNode }) => {
-  const [theme, setTheme] = useState<Theme>(() => {
-    const savedTheme = localStorage.getItem('theme');
-    if (savedTheme) {
-      return savedTheme as Theme;
-    }
-    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-    return prefersDark ? 'dark' : 'light';
-  });
-
-  useEffect(() => {
-    document.documentElement.setAttribute('data-theme', theme);
-    localStorage.setItem('theme', theme);
-  }, [theme]);
-
-  const toggleTheme = () => {
-    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
-  };
-
-  return (
-    <ThemeContext.Provider value={{ theme, toggleTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-};
-
-export const useTheme = () => {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return context;
-};
\ No newline at end of file
diff --git a/src/components/GroupedTable.tsx b/src/components/GroupedTable.tsx
new file mode 100644
index 0000000..6581967
--- /dev/null
+++ b/src/components/GroupedTable.tsx
@@ -0,0 +1,84 @@
+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 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`;
+        }
+    }
+
+    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} style={{ verticalAlign: 'top' }}>
+                                <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/RegularTable.tsx b/src/components/RegularTable.tsx
new file mode 100644
index 0000000..8f0605f
--- /dev/null
+++ b/src/components/RegularTable.tsx
@@ -0,0 +1,70 @@
+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/main.tsx b/src/main.tsx
index 762aa0d..060e1b8 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -8,7 +8,7 @@ import { Estimates } from './pages/Estimates.tsx'
 import { StopMap } from './pages/Map.tsx'
 import { Layout } from './Layout.tsx'
 import { About } from './pages/About.tsx'
-import { ThemeProvider } from './ThemeContext'
+import { AppProvider } from './AppContext.tsx'
 import ErrorBoundary from './ErrorBoundary'
 
 const router = createBrowserRouter([
@@ -36,8 +36,8 @@ const router = createBrowserRouter([
 
 createRoot(document.getElementById('root')!).render(
   <ErrorBoundary>
-    <ThemeProvider>
+    <AppProvider>
       <RouterProvider router={router} />
-    </ThemeProvider>
+    </AppProvider>
   </ErrorBoundary>
 )
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 918d484..7e1b0d3 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -1,8 +1,9 @@
-import { Moon, Sun } from "lucide-react";
-import { useTheme } from "../ThemeContext";
+import { List, Moon, Sun, Table, Table2, TableCellsMerge, TableColumnsSplit } from "lucide-react";
+import { useApp } from "../AppContext";
+import "../styles/About.css";
 
 export function About() {
-    const {theme, toggleTheme} = useTheme();
+    const { theme, setTheme, tableStyle, setTableStyle } = useApp();
 
     return (
         <div className="about-page">
@@ -11,12 +12,36 @@ export function About() {
                 Aplicación web para encontrar paradas y tiempos de llegada de los autobuses
                 urbanos de Vigo, España.
             </p>
-            <button className="form-button" onClick={toggleTheme}>
-                {theme === 'light' ?
-                    <><Moon size={24} /> Usar modo oscuro</> :
-                    <><Sun size={24} /> Usar modo claro</>
-                }
-            </button>
+            <section className="settings-section">
+                <h2>Ajustes</h2>
+                <div className="settings-content-inline">
+                    <label htmlFor="theme" className="form-label-inline">Modo:</label>
+                    <select id="theme" className="form-select-inline" value={theme} onChange={(e) => setTheme(e.target.value)}>
+                        <option value="light">Claro</option>
+                        <option value="dark">Oscuro</option>
+                    </select>
+                </div>
+                <div className="settings-content-inline">
+                    <label htmlFor="tableStyle" className="form-label-inline">Estilo de tabla:</label>
+                    <select id="tableStyle" className="form-select-inline" value={tableStyle} onChange={(e) => setTableStyle(e.target.value)}>
+                        <option value="regular">Mostrar por orden</option>
+                        <option value="grouped">Agrupar por línea</option>
+                    </select>
+                </div>
+                <details className="form-details">
+                    <summary>¿Qué significa esto?</summary>
+                    <p>
+                        La tabla de horarios puede mostrarse de dos formas:
+                    </p>
+                    <dl>
+                        <dt>Mostrar por orden</dt>
+                        <dd>Las paradas se muestran en el orden en que se visitan. Aplicaciones como Infobus (Vitrasa) usan este estilo.</dd>
+                        <dt>Agrupar por línea</dt>
+                        <dd>Las paradas se agrupan por la línea de autobús. Aplicaciones como iTranvias (A Coruña) o Moovit (más o menos) usan este estilo.</dd>
+                    </dl>
+                </details>
+            </section>
+            <h2>Créditos</h2>
             <p>
                 <a href="https://github.com/arielcostas/urbanovigo-web" className="about-link">
                     Código en GitHub
@@ -26,7 +51,7 @@ export function About() {
                 </a>
             </p>
             <p>
-                Datos obtenidos de <a href="https://datos.vigo.org">datos.vigo.org</a> bajo 
+                Datos obtenidos de <a href="https://datos.vigo.org">datos.vigo.org</a> bajo
                 licencia <a href="https://opendefinition.org/licenses/odc-by/">Open Data Commons Attribution License</a>
             </p>
         </div>
diff --git a/src/pages/Estimates.tsx b/src/pages/Estimates.tsx
index a445300..900ffc5 100644
--- a/src/pages/Estimates.tsx
+++ b/src/pages/Estimates.tsx
@@ -1,11 +1,13 @@
 import { JSX, useEffect, useState } from "react";
 import { useParams } from "react-router";
 import { StopDataProvider } from "../data/StopDataProvider";
-import LineIcon from "../components/LineIcon";
 import { Star } from 'lucide-react';
 import "../styles/Estimates.css";
+import { RegularTable } from "../components/RegularTable";
+import { useApp } from "../AppContext";
+import { GroupedTable } from "../components/GroupedTable";
 
-interface StopDetails {
+export interface StopDetails {
 	stop: {
 		id: number;
 		name: string;
@@ -32,6 +34,7 @@ export function Estimates(): JSX.Element {
 	const [dataDate, setDataDate] = useState<Date | null>(null);
 	const [favourited, setFavourited] = useState(false);
 	const params = useParams();
+	const { tableStyle } = useApp();
 
 	useEffect(() => {
 		loadData(params.stopId!)
@@ -48,22 +51,6 @@ export function Estimates(): JSX.Element {
 		);
 	}, [params.stopId]);
 
-	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`;
-		}
-	}
 
 	const toggleFavourite = () => {
 		if (favourited) {
@@ -87,48 +74,9 @@ export function Estimates(): JSX.Element {
 			</div>
 
 			<div className="table-responsive">
-				<table className="table">
-					<caption>Estimaciones de llegadas a las {dataDate?.toLocaleTimeString()}</caption>
-
-					<thead>
-						<tr>
-							<th>Línea</th>
-							<th>Ruta</th>
-							<th>Minutos</th>
-							<th>Metros</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>
+				{tableStyle === 'grouped' ?
+					<GroupedTable data={data} dataDate={dataDate} /> :
+					<RegularTable data={data} dataDate={dataDate} />}
 			</div>
 		</div>
 	)
diff --git a/src/styles/About.css b/src/styles/About.css
new file mode 100644
index 0000000..934577d
--- /dev/null
+++ b/src/styles/About.css
@@ -0,0 +1,94 @@
+/* About page specific styles */
+.about-page {
+    text-align: center;
+    padding: 1rem;
+}
+
+.about-version {
+    color: var(--subtitle-color);
+    font-size: 0.9rem;
+    margin-top: 2rem;
+}
+
+.about-description {
+    margin-top: 1rem;
+    line-height: 1.6;
+}
+
+.settings-section {
+    margin-bottom: 2em;
+    padding: 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background-color: var(--message-background-color);
+    text-align: left;
+}
+
+.settings-section h2 {
+    margin-bottom: 1em;
+}
+
+.settings-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-bottom: 1em;
+}
+
+.settings-content-inline {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1em;
+}
+
+.settings-section .form-button {
+    margin-bottom: 1em;
+    padding: 0.75rem 1.5rem;
+    font-size: 1.1rem;
+}
+
+.settings-section .form-select-inline {
+    margin-left: 0.5em;
+    padding: 0.5rem;
+    font-size: 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+}
+
+.settings-section .form-label-inline {
+    font-weight: 500;
+}
+
+.settings-section .form-label {
+    display: block;
+    margin-bottom: 0.5em;
+    font-weight: 500;
+}
+
+.settings-section .form-description {
+    margin-top: 0.5em;
+    font-size: 0.9rem;
+    color: var(--subtitle-color);
+}
+
+.settings-section .form-details {
+    margin-top: 0.5em;
+    font-size: 0.9rem;
+    color: var(--subtitle-color);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 0.5rem;
+}
+
+.settings-section .form-details summary {
+    cursor: pointer;
+    font-weight: 500;
+}
+
+.settings-section .form-details p {
+    margin-top: 0.5em;
+}
+
+.settings-section p {
+    margin-top: 0.5em;
+}
\ No newline at end of file
diff --git a/src/styles/Estimates.css b/src/styles/Estimates.css
index d9fa0ab..1fce445 100644
--- a/src/styles/Estimates.css
+++ b/src/styles/Estimates.css
@@ -25,4 +25,67 @@
 
 .table tfoot td {
   text-align: center;
+}
+
+/* Estimates page specific styles */
+.estimates-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.estimates-stop-id {
+    font-size: 1rem;
+    color: var(--subtitle-color);
+    margin-left: 0.5rem;
+}
+
+.estimates-arrival {
+    color: #28a745;
+    font-weight: 500;
+}
+
+.estimates-delayed {
+    color: #dc3545;
+}
+
+.button-group {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+}
+
+.button {
+    padding: 0.75rem 1rem;
+    background-color: var(--button-background-color);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+}
+
+.button:hover {
+    background-color: var(--button-hover-background-color);
+}
+
+.button:disabled {
+    background-color: var(--button-disabled-background-color);
+    cursor: not-allowed;
+}
+
+.star-icon {
+    margin-right: 0.5rem;
+    color: #ccc;
+    fill: none;
+}
+
+.star-icon.active {
+    color: var(--star-color); /* Yellow color for active star */
+    fill: var(--star-color);
 }
\ No newline at end of file
diff --git a/src/styles/Map.css b/src/styles/Map.css
new file mode 100644
index 0000000..3af112a
--- /dev/null
+++ b/src/styles/Map.css
@@ -0,0 +1,86 @@
+/* Map page specific styles */
+.map-container {
+    height: calc(100vh - 140px);
+    margin: -16px;
+    margin-bottom: 1rem;
+    position: relative;
+}
+
+/* Fullscreen map styles */
+.fullscreen-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    padding: 0;
+    margin: 0;
+    max-width: none;
+    overflow: hidden;
+}
+
+.fullscreen-map {
+    width: 100%;
+    height: 100%;
+}
+
+.fullscreen-loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 100vw;
+    font-size: 1.8rem;
+    font-weight: 600;
+    color: var(--text-color);
+}
+
+/* Map marker and popup styles */
+.stop-marker {
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    transition: all 0.2s ease-in-out;
+}
+
+.stop-marker:hover {
+    transform: scale(1.2);
+}
+
+.maplibregl-popup {
+    max-width: 250px;
+}
+
+.maplibregl-popup-content {
+    padding: 12px;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.popup-line-icons {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 6px 0;
+    gap: 5px;
+}
+
+.popup-line {
+    display: inline-block;
+    background-color: var(--button-background-color);
+    color: white;
+    padding: 2px 6px;
+    margin-right: 4px;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-weight: 500;
+}
+
+.popup-link {
+    display: block;
+    margin-top: 8px;
+    color: var(--button-background-color);
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.popup-link:hover {
+    text-decoration: underline;
+}
\ No newline at end of file