Move old data viewer UI to new path (#185)

* New path and topbar fix * Fix for tests
McMaster-Baja-Racing · Jan 12, 2025 · 05dc391 · 05dc391
1 parent b1b01ca
commit 05dc391
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 42 deletions.
diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts
@@ -1,6 +1,6 @@
 import { defineConfig, devices } from '@playwright/test';
 
-export const WEB_SERVER_URL = 'http://localhost:5173';
+export const WEB_SERVER_URL = 'http://localhost:5173/old';
 
 /**
  * Read environment variables from file.

diff --git a/front-end/src/components/App.css b/front-end/src/components/App.css
@@ -5,12 +5,11 @@
 }
 
 .App-body {
-  height: calc(100vh - 5rem);
+  height: calc(100vh);
   background-color: #3d0202;
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 5rem;
   font-size: calc(10px + 2vmin);
   color: white;
 }

diff --git a/front-end/src/components/App.tsx b/front-end/src/components/App.tsx
@@ -4,17 +4,17 @@ import { UploadModal } from './modal/upload/UploadModal';
 import { HelpModal } from './modal/help/helpModal';
 import { DownloadModal } from './modal/download/DownloadModal';
 import { useEffect, useState } from 'react';
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route, useLocation } from 'react-router-dom';
 import Topbar from './Topbar/Topbar';
 import Views from './views/Views/Views';
 import $ from 'jquery';
 import { MAX_VIEWS } from './views/viewsConfig';
 import Chart from './views/Chart/Chart';
 import MapChart from './map/MapChart/MapChart';
-import { RouterComponent } from '@lib/navigationUtils';
 import ModelViewer from './model/ModelViewer';
 
 const App = () => {
+  const location = useLocation();
 
   // State for holding which modal should be open
   const [modal, setModal] = useState('');
@@ -42,47 +42,55 @@ const App = () => {
     $('div.success').slideDown(500).delay(2000).slideUp(1000);
   }, [successMessage]);
 
-
-
   return (
-    <RouterComponent>
-      <div className="App">
+    <div className="App">
+      {location.pathname !== '/' && (
         <Topbar setModal={setModal} numViews={numViews} setNumViews={setNumViews} />
-        <header className="App-body">
-          <div className="success">{successMessage.message}</div>
-          {modal === 'Create' ? <CreateGraphModal 
-            setModal={setModal} 
-            setViewInformation={setViewInformation} 
-            setSuccessMessage={setSuccessMessage} 
+      )}
+      <header className="App-body">
+        <div className="success">{successMessage.message}</div>
+        {modal === 'Create' ? <CreateGraphModal 
+          setModal={setModal} 
+          setViewInformation={setViewInformation} 
+          setSuccessMessage={setSuccessMessage} 
+          viewInformation={viewInformation} 
+          buttonID={buttonID} 
+          setNumViews={setNumViews} 
+          numViews={numViews} 
+          video={video} 
+          setVideo={setVideo}
+        /> : null}
+        {modal === 'Upload' ? <UploadModal 
+          setModal={setModal} 
+          setSuccessMessage={setSuccessMessage} 
+        /> : null}
+        {modal === 'Download' ? <DownloadModal setModal={setModal} /> : null}
+        {modal === 'Help' ? <HelpModal setModal={setModal} /> : null}
+        <Routes>
+          <Route path="*" element={<Views 
             viewInformation={viewInformation} 
-            buttonID={buttonID} 
-            setNumViews={setNumViews} 
+            setModal={setModal} 
+            setButtonID={setButtonID} 
             numViews={numViews} 
+            videoTimestamp={videoTimestamp} 
+            setVideoTimestamp={setVideoTimestamp} 
             video={video} 
-            setVideo={setVideo}
-          /> : null}
-          {modal === 'Upload' ? <UploadModal 
+          />} />
+          <Route path="/map" element={<MapChart />} />
+          <Route path="/IMU" element={<ModelViewer />} />
+          <Route path='/old' element={
+          <Views 
+            viewInformation={viewInformation} 
             setModal={setModal} 
-            setSuccessMessage={setSuccessMessage} 
-          /> : null}
-          {modal === 'Download' ? <DownloadModal setModal={setModal} /> : null}
-          {modal === 'Help' ? <HelpModal setModal={setModal} /> : null}
-          <Routes>
-            <Route path="*" element={<Views 
-              viewInformation={viewInformation} 
-              setModal={setModal} 
-              setButtonID={setButtonID} 
-              numViews={numViews} 
-              videoTimestamp={videoTimestamp} 
-              setVideoTimestamp={setVideoTimestamp} 
-              video={video} 
-            />} />
-            <Route path="/map" element={<MapChart />} />
-            <Route path="/IMU" element={<ModelViewer />} />
-          </Routes>
-        </header>
-      </div>
-    </RouterComponent>
+            setButtonID={setButtonID} 
+            numViews={numViews} 
+            videoTimestamp={videoTimestamp} 
+            setVideoTimestamp={setVideoTimestamp} 
+            video={video} 
+          />} />
+        </Routes>
+      </header>
+    </div>
   );
 
 };

diff --git a/front-end/src/components/Topbar/Topbar.css b/front-end/src/components/Topbar/Topbar.css
@@ -5,7 +5,7 @@
     padding: 1rem 0rem 1rem 0rem;
     color: whitesmoke;
     font-size: 2rem;
-    position: fixed;
+    position: sticky;
     z-index: 1;
     width: 100%;
     height: 3rem;

diff --git a/front-end/src/index.jsx b/front-end/src/index.jsx
@@ -2,11 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './styles/index.css';
 import App from './components/App';
+import { RouterComponent } from '@lib/navigationUtils';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <RouterComponent>
+      <App />
+    </RouterComponent>
   </React.StrictMode>
 );