Refactoring

Split constant display into three js components, deleted bottom buttons, added name into navbar and removed h1 to increase space. remade all pages with classname="pagecontainer" to have uniform heights

package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "cors": "^2.8.5",
     "mapbox": "^1.0.0-beta10",
     "mapbox-gl": "^3.3.0",
     "react": "^18.2.0",

run_lmcc_mac.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+# Installing dependencies
+echo "Installing npm dependencies..."
+npm install
+
+# Starting the server
+echo "Starting the server with npm start..."
+npm start

run_lmcc_windows.ps1

@@ -0,0 +1,7 @@
+# Install dependencies
+Write-Output "Installing Dependencies..."
+npm install
+
+# Start the app using npm start
+Write-Output "Starting the app..."
+npm start

server.py

@@ -1,24 +1,28 @@
-from fastapi import FastAPI
+from fastapi import FastAPI, HTTPException
 import httpx
 from fastapi.middleware.cors import CORSMiddleware
+import logging
+
+logging.basicConfig(level=logging.DEBUG)
+logger = logging.getLogger(__name__)
 
 app = FastAPI()
 
 # Configure CORS
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["*"],  # Allows all origins
+    allow_origins=["*"],
     allow_credentials=True,
-    allow_methods=["*"],  # Allows all methods
-    allow_headers=["*"],  # Allows all headers
+    allow_methods=["*"],
+    allow_headers=["*"],
 )
 
-app = FastAPI()
-
-# Define a helper function to fetch JSON from the server
 async def fetch_json(url: str):
     async with httpx.AsyncClient() as client:
         response = await client.get(url)
+        if response.status_code != 200:
+            logger.error(f"Failed to fetch data from {url}, status code: {response.status_code}")
+            return {"error": f"Failed to fetch data, status code: {response.status_code}"}
         return response.json()
 
 # Endpoint to handle general JSON files like COMM.json, DCU.json, etc.

src/App.css

@@ -11,7 +11,7 @@ h1 {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 10vh;
+  height: 5vh;
   margin: 0;
 }
 

src/App.js

@@ -1,27 +1,24 @@
 import React from 'react';
 import './App.css'; 
 import Navbar from "./components/Navbar";
-import BottomButtons from "./components/BottomButtons.js";
 import {
   BrowserRouter as Router,
   Routes,
   Route,
 } from "react-router-dom";
-import Setup from "./pages/setup";
-import Rover from "./pages/rover";
-import Rocks from "./pages/rocks";
-import Nav from "./pages/nav";
-import Ingress from "./pages/ingress";
-import Equipment from "./pages/equipment";
-import Egress from "./pages/egress";
-import Constant from './pages/constant';
+import Setup from "./pages/focus/setup";
+import Rover from "./pages/focus/rover";
+import Rocks from "./pages/focus/rocks";
+import Nav from "./pages/focus/nav";
+import Ingress from "./pages/focus/ingress";
+import Equipment from "./pages/focus/equipment";
+import Egress from "./pages/focus/egress";
+import Constant from './pages/constant/constant.js';
 
 
 function App() {
   return (
     <div>
-      <h1>CUITS 2024 LMCC</h1>
-
       <Router>
         <Navbar />
         <Routes>
@@ -35,7 +32,6 @@ function App() {
           <Route path="/Rover" element={<Rover />} />
           <Route path="/Ingress" element={<Ingress />} />
         </Routes>
-        <BottomButtons />
       </Router>
     </div>
   );

src/components/Navbar.js

@@ -8,6 +8,7 @@ const Navbar = () => {
             <Nav style={{ height: '10vh' }}>
                 <NavMenu>
                     <img className="img" src={require("./../assets/Images/logo.jpg")} alt="Logo"/>
+                    <h1 id="title">CUITS 2024 LMCC</h1>
                     <NavLink to="/Constant" activeStyle>
                         Constant
                     </NavLink>

src/components/navbar.css

@@ -2,4 +2,10 @@
     height: 3rem;
     width: auto;
     margin-right: 10px;
+}
+
+#title {
+    color: white;
+    font-size: x-large;
+    margin-right: 50px;
 }

src/pages-style/constant.css

@@ -2,6 +2,27 @@
   box-sizing: border-box;
 }
 
+/* Style each column to take up exactly one-third of the container width and full height */
+#lcol, #mcol, #rcol {
+  flex: 1; /* Each column flexes to fill one-third of the space */
+  height: 100%; /* Full height of the parent */
+  box-sizing: border-box; /* Includes padding and border in the element's total width and height */
+}
+
+#mcol {
+  border-left: 1px solid #ccc; /* Adds a divider to the left of the middle column */
+  border-right: 1px solid #ccc; /* Adds a divider to the right of the middle column */
+}
+
+/* Ensure the content does not overflow from each column */
+#lcol > *, #mcol > *, #rcol > * {
+  overflow: auto;
+  height: 100%;
+}
+
+/*OLD*/
+
+
 .container {
   display: flex;
   height: 73vh;

src/pages-style/ingressegress.css

@@ -1,7 +1,4 @@
-.ingressegress-container {
-    display: flex;
-    height: 73vh;
-}
+
 
 .left-column {
     flex: 1;
@@ -32,7 +29,7 @@
 
 .ProcedureItem {
     display: none;
-    height: 60vh;
+    height: 80vh;
 }
 
 .ProcedureItem.show {

src/pages-style/nav.css

@@ -1,12 +1,12 @@
 
 
-.navPage {
-    height: 73vh;
+#navPage {
+    display: block;
 }
 
 .map-container {
     max-width: 100%;
-    height: 60vh;
+    height: 100%;
     padding: 0;
     margin: 0;
 }

src/pages-style/page.css

@@ -0,0 +1,8 @@
+.pagecontainer {
+  display: flex;
+  height: 90vh; /* 100% of the viewport height */
+  width: 100vw; /* 100% of the viewport width */
+  margin: 0;
+  padding: 0;
+  overflow: hidden; /* Prevents any content from overflowing */
+}

src/pages-style/rocks.css

@@ -8,7 +8,6 @@
     height: 85vh; /* fills 85% of the page */
     background-color: red;
     text-align: center;
-    padding-bottom: 75px; /* creates space for bottom nav bar */
 }
 
 .bottom-nav-container {

src/pages-style/rover.css

@@ -1,7 +1,7 @@
 .rover-page {
     display: flex;
     flex-direction: column;
-  }
+}
 
   .header-rover {
     text-align: center;