Updated Garage page to fix row formatting

Updated History page for vehicles Updated GUI and added return buttons on both Upload pages for history (pages are incomplete)
dheffer · Mar 31, 2024 · 9625f6a · 9625f6a
1 parent fe93437
commit 9625f6a
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 44 deletions.
diff --git a/frontend/src/pages/garage/Garage.js b/frontend/src/pages/garage/Garage.js
@@ -59,25 +59,23 @@ function Garage(props) {
 
                     {
                         props.info != null ?
-                        props.info.map((vehicle, index) => {
-                            //console.log(garageVehicles[0][0].configurations.year);
-                            vehicle_count++;
-                            if (vehicle_count === 1 || vehicle_count % 3 === 0) {
-                                return (
-                                    <Row key={index} xs={1} md={3} className="g-4">
-                                        <Col key={vehicle.configurations.name}>
-                                            <Vehicle vehicle={vehicle} id={index}/>
-                                        </Col>
-                                    </Row>
-                                )
-                            }
-                            return (
-                                <Col key={vehicle.configurations.name}>
-                                    <Vehicle vehicle={vehicle} id={index}/>
-                                </Col>
-                            )
-                        }) : null
+                            props.info.reduce((rows, vehicle, index) => {
+                                if (index % 3 === 0) {
+                                    rows.push([]);
+                                }
+                                rows[rows.length - 1].push(
+                                    <Col key={vehicle.configurations.name}>
+                                        <Vehicle vehicle={vehicle} id={index}/>
+                                    </Col>
+                                );
+                                return rows;
+                            }, []).map((row, rowIndex) => (
+                                <Row key={rowIndex} xs={1} md={3} className="g-4">
+                                    {row}
+                                </Row>
+                            )) : null
                     }
+
                 </div>
                 <div className="col-md-1 order-md-3"></div>
             </div>

diff --git a/frontend/src/pages/maintenance-history/ManualVehicleHistory.js b/frontend/src/pages/maintenance-history/ManualVehicleHistory.js
@@ -1,9 +1,17 @@
+import Button from "react-bootstrap/Button";
+import {Link} from "react-router-dom";
+import { useNavigate} from "react-router-dom";
+
 function ManualVehicleHistory() {
+    let navigate = useNavigate();
+
     return (
         <div>
             <h1>Manual Vehicle History</h1>
-            <p>Enter vehicle history manually</p>
-            <p>Placeholder</p>
+            <p>Uh oh! This page isn't finished yet!</p>
+            <Button onClick={() => navigate(-1)}>
+                Go Back
+            </Button>
         </div>
     )
 }

diff --git a/frontend/src/pages/maintenance-history/UploadNavbar.js b/frontend/src/pages/maintenance-history/UploadNavbar.js
@@ -1,10 +1,24 @@
 import {Link} from "react-router-dom";
+import Button from "react-bootstrap/Button";
 
 function UploadNavbar() {
     return (
-        <div>
-            <Link to="/garage/vehicle-history/upload">Upload</Link>
-            <Link to="/garage/vehicle-history/manual">Manual</Link>
+        <div className="container">
+            <div className="row">
+                <div className="col-md-1 order-md-1"/>
+                <div className="col-md-10 order-md-2">
+                    <div className="d-flex justify-content-center">
+                        <Link to={"/garage/vehicle-history/upload"} className="me-3">
+                            <Button variant="primary">Upload</Button>
+                        </Link>
+
+                        <Link to={"/garage/vehicle-history/manual"} className="ml-3">
+                            <Button variant="primary">Manual</Button>
+                        </Link>
+                    </div>
+                </div>
+                <div className="col-md-1 order-md-3"/>
+            </div>
         </div>
     );
 }

diff --git a/frontend/src/pages/maintenance-history/UploadVehicleHistory.js b/frontend/src/pages/maintenance-history/UploadVehicleHistory.js
@@ -1,9 +1,16 @@
+import {useNavigate} from "react-router-dom";
+import Button from "react-bootstrap/Button";
+
 function UploadVehicleHistory() {
+    let navigate = useNavigate();
+
     return (
         <div>
             <h1>Upload Vehicle History</h1>
-            <p>Upload a file</p>
-            <p>Placeholder</p>
+            <p>Uh oh! This page isn't finished yet!</p>
+            <Button onClick={() => navigate(-1)}>
+                Go Back
+            </Button>
         </div>
     )
 }

diff --git a/frontend/src/pages/vehicle/VehicleHistory.js b/frontend/src/pages/vehicle/VehicleHistory.js
@@ -46,18 +46,26 @@ function VehicleHistory(props) {
                 <Route path="/garage/vehicle-history/:vehicle/*"/>
             </Routes>
 
-            <UploadNavbar/>
-            <Routes>
-                <Route path="/garage/vehicle-history/upload"/>
-                <Route path="/garage/vehicle-history/manual"/>
-            </Routes>
             <div className="row">
                 <div className="col-md-1 order-md-1"/>
                 <div className="col-md-10 order-md-2">
                     <div className="row">
                         <div className="col-md-1"/>
-                        <div className="col-md-10">
-                            <h1>Vehicle History</h1>
+                        <div className="col-md-10 mt-4">
+                            <Row>
+                                <Col>
+                                    <h1>Vehicle History</h1>
+                                </Col>
+                                <Col>
+                                    <UploadNavbar/>
+                                    <Routes>
+                                        <Route path="/garage/vehicle-history/upload"/>
+                                        <Route path="/garage/vehicle-history/manual"/>
+                                    </Routes>
+                                </Col>
+                                <Col/>
+                            </Row>
+
                         </div>
                         <div className="col-md-1"/>
                     </div>

diff --git a/frontend/src/pages/vehicle/VehicleNavbar.js b/frontend/src/pages/vehicle/VehicleNavbar.js
@@ -9,23 +9,23 @@ function VehicleNavbar(props) {
 
     return (
         <div className="container">
-            <div className="d-flex justify-content-center">
-                <Link to={"/garage/vehicle-info/" + configId}
-                      state={{configId: configId}}
-                      className="me-3">
-                    {<Button variant={infoSelected}>Info</Button>}
-                </Link>
 
-                <Link to={"/garage/vehicle-history/" + configId}
-                      state={{configId: configId}}
-                      className="ml-3">
-                    <Button variant={historySelected}>History</Button>
-                </Link>
-            </div>
             <div className="row">
                 <div className="col-md-1 order-md-1"/>
                 <div className="col-md-10 order-md-2">
+                    <div className="d-flex justify-content-center">
+                        <Link to={"/garage/vehicle-info/" + configId}
+                              state={{configId: configId}}
+                              className="me-3">
+                            {<Button variant={infoSelected}>Info</Button>}
+                        </Link>
 
+                        <Link to={"/garage/vehicle-history/" + configId}
+                              state={{configId: configId}}
+                              className="ml-3">
+                            <Button variant={historySelected}>History</Button>
+                        </Link>
+                    </div>
                 </div>
                 <div className="col-md-1 order-md-3"/>
             </div>