69 lines
2.0 KiB
JavaScript
69 lines
2.0 KiB
JavaScript
import React from "react";
|
|
import ReactDOM from "react-dom/client";
|
|
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
|
import SummaryRoute from "./routes/SummaryRoute";
|
|
import BrowseRoute from "./routes/BrowseRoute";
|
|
import SettingsRoute from "./routes/SettingsRoute";
|
|
import MapRoute from "./routes/MapRoute";
|
|
import StatisticsRoute from "./routes/StatisticsRoute";
|
|
import CableDetailRoute from "./routes/CableDetailRoute";
|
|
|
|
// Root
|
|
const root = ReactDOM.createRoot(document.getElementById("root"));
|
|
|
|
// Socket handler
|
|
console.log("Connecting to WebSocket server.");
|
|
const socket = new WebSocket("ws://localhost:9000");
|
|
socket.addEventListener("open", function (event) {
|
|
console.log("Websocket connected.");
|
|
console.log("Welcome to Belden Jukebox!");
|
|
init();
|
|
});
|
|
|
|
|
|
// Initialize the app
|
|
const init = () => {
|
|
const router = createBrowserRouter([
|
|
{
|
|
path: "/",
|
|
element: <SummaryRoute socket={socket}></SummaryRoute>,
|
|
// errorElement: <ErrorRoute></ErrorRoute>,
|
|
},
|
|
{
|
|
path: "/browse",
|
|
element: <BrowseRoute socket={socket}></BrowseRoute>,
|
|
// errorElement: <ErrorRoute></ErrorRoute>,
|
|
},
|
|
{
|
|
path: "/settings",
|
|
element: <SettingsRoute socket={socket}></SettingsRoute>,
|
|
// errorElement: <ErrorRoute></ErrorRoute>,
|
|
},
|
|
{
|
|
path: "/map",
|
|
element: <MapRoute socket={socket}></MapRoute>,
|
|
// errorElement: <ErrorRoute></ErrorRoute>,
|
|
},
|
|
{
|
|
path: "/statistics",
|
|
element: <StatisticsRoute socket={socket}></StatisticsRoute>,
|
|
// errorElement: <ErrorRoute></ErrorRoute>,
|
|
},
|
|
{
|
|
path: "/browse/cable/:cablePos",
|
|
element: <CableDetailRoute socket={socket} />,
|
|
// errorElement: <ErrorRoute></ErrorRoute>,
|
|
},
|
|
{
|
|
path: "/map/cable/:cablePos",
|
|
element: <CableDetailRoute socket={socket} />,
|
|
// errorElement: <ErrorRoute></ErrorRoute>,
|
|
},
|
|
]);
|
|
|
|
root.render(
|
|
<div>
|
|
<RouterProvider router={router} />
|
|
</div>
|
|
);
|
|
}; |