mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-11-14 18:58:49 -05:00
104 lines
4.7 KiB
React
104 lines
4.7 KiB
React
// WebUI Bootstrap Entry
|
|
// Purpose: Boots the React application and mounts global providers/router roots. Scope: Defines top-level route wiring and root render lifecycle for the browser app.
|
|
import { lazy, StrictMode, Suspense } from 'react'
|
|
import { createRoot } from 'react-dom/client'
|
|
import { createBrowserRouter, Route, RouterProvider, Routes } from 'react-router-dom'
|
|
import './index.css'
|
|
// Theme artwork is a separate style concern from global component utilities. Loading its dedicated
|
|
// entrypoint here keeps every route consistent without returning theme definitions to index.css.
|
|
import './themes/styles/index.css'
|
|
import DriverPageRoot from './driver/DriverPageRoot.jsx'
|
|
import { SocketProvider } from './context/SocketContext.jsx'
|
|
import { SessionProvider } from './context/SessionContext.jsx'
|
|
import { TelemetryProvider } from './context/TelemetryContext.jsx'
|
|
import { ChatProvider } from './context/ChatContext.jsx'
|
|
import SpectatorApp from './spectate/SpectatorApp/SpectatorAppRoot.jsx'
|
|
import MiniSummaryApp from './mini/MiniSummaryApp/MiniSummaryAppRoot.jsx'
|
|
import ServerDisplayApp from './display/ServerDisplayApp/ServerDisplayAppRoot.jsx'
|
|
import ScannerApp from './scanner/ScannerApp/ScannerAppRoot.jsx'
|
|
import { SettingsProvider } from './settings/index.js'
|
|
import DeterrenceChaos from './components/DeterrenceChaos/index.jsx'
|
|
import AnalyticsReporter from './analytics/AnalyticsReporter.jsx'
|
|
import PtzAppRoot from './ptz/PtzAppRoot.jsx'
|
|
import MicApp from './mic/MicApp.jsx'
|
|
import OperatingModeRouteSync from './components/OperatingModeRouteSync/index.jsx'
|
|
import PageExitGuard from './components/PageExitGuard/index.jsx'
|
|
import InitialSessionOverlay from './components/InitialSessionOverlay/index.jsx'
|
|
import AppErrorBoundary from './components/AppErrorBoundary.jsx'
|
|
|
|
// Reporting and administration carry substantial route-specific libraries.
|
|
// Loading each only on its own route keeps charting and JSON Schema tooling out
|
|
// of ordinary rover-control sessions without changing either application's
|
|
// internal ownership.
|
|
const FleetReportsApp = lazy(() => import('./reports/FleetReportsApp.jsx'))
|
|
const AdminApp = lazy(() => import('./admin/AdminApp.jsx'))
|
|
const SetupApp = lazy(() => import('./admin/SetupApp.jsx'))
|
|
|
|
function lazyRoute(element, label) {
|
|
return (
|
|
<Suspense fallback={<div className="min-h-screen bg-neutral-950 p-1 text-sm text-slate-300">Loading {label}…</div>}>
|
|
{element}
|
|
</Suspense>
|
|
)
|
|
}
|
|
|
|
// A data router provides one blocker for links, programmatic navigation, and history.
|
|
const router = createBrowserRouter([{
|
|
path: '*',
|
|
element: (
|
|
<>
|
|
<AnalyticsReporter />
|
|
<OperatingModeRouteSync />
|
|
<PageExitGuard />
|
|
<Routes>
|
|
<Route path="/" element={<DriverPageRoot />} />
|
|
{/* The retired desktop composition remains available for direct comparison
|
|
without duplicating the driver shell or changing canonical mobile layouts. */}
|
|
<Route path="/old" element={<DriverPageRoot oldDesktop />} />
|
|
<Route path="/spectate" element={<SpectatorApp />} />
|
|
<Route path="/mini" element={<MiniSummaryApp />} />
|
|
<Route path="/display" element={<ServerDisplayApp />} />
|
|
<Route path="/mic" element={<MicApp />} />
|
|
<Route path="/scanner" element={<ScannerApp />} />
|
|
<Route path="/setup" element={lazyRoute(<SetupApp />, 'setup')} />
|
|
<Route path="/admin" element={lazyRoute(<AdminApp />, 'administration')} />
|
|
{/*
|
|
PTZ is a separate route so the driver layout and its replay
|
|
panel are not mounted behind the camera controller. This
|
|
also makes orientation changes a PTZ layout concern instead
|
|
of a local overlay-open state owned by the driver page.
|
|
*/}
|
|
<Route path="/ptz" element={<PtzAppRoot />} />
|
|
<Route
|
|
path="/reports"
|
|
element={lazyRoute(<FleetReportsApp />, 'fleet reports')}
|
|
/>
|
|
</Routes>
|
|
</>
|
|
),
|
|
}])
|
|
|
|
createRoot(document.getElementById('root')).render(
|
|
<AppErrorBoundary>
|
|
<StrictMode>
|
|
<SocketProvider>
|
|
<SessionProvider>
|
|
{/* Every route depends on the first authoritative session snapshot.
|
|
Mounting this opaque layer at the shared provider boundary prevents
|
|
incomplete route-specific placeholders from flashing while still
|
|
allowing every application tree to initialize underneath it. */}
|
|
<InitialSessionOverlay />
|
|
<TelemetryProvider>
|
|
<SettingsProvider>
|
|
<ChatProvider>
|
|
<DeterrenceChaos />
|
|
<RouterProvider router={router} />
|
|
</ChatProvider>
|
|
</SettingsProvider>
|
|
</TelemetryProvider>
|
|
</SessionProvider>
|
|
</SocketProvider>
|
|
</StrictMode>
|
|
</AppErrorBoundary>,
|
|
)
|