From 894e67863dbb89a4819e825fcdf7117021082b2a Mon Sep 17 00:00:00 2001 From: Ariel Costas Guerrero Date: Tue, 24 Jun 2025 13:29:50 +0200 Subject: Replace leaflet for maplibre, use react-router in framework mode --- src/frontend/app/root.tsx | 161 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 161 insertions(+) create mode 100644 src/frontend/app/root.tsx (limited to 'src/frontend/app/root.tsx') diff --git a/src/frontend/app/root.tsx b/src/frontend/app/root.tsx new file mode 100644 index 0000000..d90dba0 --- /dev/null +++ b/src/frontend/app/root.tsx @@ -0,0 +1,161 @@ +import { + isRouteErrorResponse, + Link, + Links, + Meta, + Outlet, + Scripts, + ScrollRestoration +} from "react-router"; + +import type { Route } from "./+types/root"; +import "@fontsource-variable/roboto"; +import "./root.css"; + +//#region Maplibre setup +import "maplibre-theme/icons.default.css"; +import "maplibre-theme/modern.css"; +import { Protocol } from "pmtiles"; +import maplibregl from "maplibre-gl"; +import { AppProvider } from "./AppContext"; +import { Map, MapPin, Settings } from "lucide-react"; +const pmtiles = new Protocol(); +maplibregl.addProtocol("pmtiles", pmtiles.tile); +//#endregion + +if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('/sw.js') + .then((registration) => { + console.log('Service Worker registered with scope:', registration.scope); + }) + .catch((error) => { + console.error('Service Worker registration failed:', error); + }); +} + +export const links: Route.LinksFunction = () => []; + +export function HydrateFallback() { + return "Loading..."; +} + +export function Layout({ children }: { children: React.ReactNode }) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + Busurbano + + + + + {children} + + + + + ); +} + +export default function App() { + const navItems = [ + { + name: 'Paradas', + icon: MapPin, + path: '/stops' + }, + { + name: 'Mapa', + icon: Map, + path: '/map' + }, + { + name: 'Ajustes', + icon: Settings, + path: '/settings' + } + ]; + + return ( + +
+ +
+
+ +
+ + + + + ); +} + +export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) { + let message = "Oops!"; + let details = "An unexpected error occurred."; + let stack: string | undefined; + + if (isRouteErrorResponse(error)) { + message = error.status === 404 ? "404" : "Error"; + details = + error.status === 404 + ? "The requested page could not be found." + : error.statusText || details; + } else if (import.meta.env.DEV && error && error instanceof Error) { + details = error.message; + stack = error.stack; + } + + return ( +
+

{message}

+

{details}

+ {stack && ( + 
+          {stack}
+
+ )} +
+ ); +} -- cgit v1.3