Merge pull request #23 from dheffer/garage-layout-work

Garage page formatted with cards for display

frontend/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "mongodb": "^6.5.0",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",

frontend/src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './pages/App';
 import reportWebVitals from './reportWebVitals';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

frontend/src/pages/App.js

@@ -1,13 +1,14 @@
 import Login from "./Login";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import NavBar from "./NavBar";
-import Garage from "./Garage";
-import VehicleInfo from "./VehicleInfo";
-import VehicleHistory from "./VehicleHistory";
-import UploadVehicleHistory from "./UploadVehicleHistory";
-import ManualVehicleHistory from "./ManualVehicleHistory";
-import AddVehicle from "./AddVehicle";
-import RemoveVehicle from "./RemoveVehicle";
+import Garage from "./garage/Garage";
+import VehicleInfo from "./vehicle/VehicleInfo";
+import VehicleHistory from "./vehicle/VehicleHistory";
+import UploadVehicleHistory from "./maintenance-history/UploadVehicleHistory";
+import ManualVehicleHistory from "./maintenance-history/ManualVehicleHistory";
+import AddVehicle from "./garage/AddVehicle";
+import RemoveVehicle from "./garage/RemoveVehicle";
+import {Settings} from "./Settings";
 
 function App() {
   return (
@@ -20,14 +21,14 @@ function App() {
 
         <Route path="/garage" element={<Garage />}/>
         <Route path="/garage/add" element={<AddVehicle />}/>
-        <Route path="/garage/remove" element={<RemoveVehicle />}/>
+        <Route path="/garage/remove/:vehicle" element={<RemoveVehicle />}/>
 
         <Route path="/garage/vehicle-info/:vehicle" element={<VehicleInfo />} />
         <Route path="/garage/vehicle-history/:vehicle" element={<VehicleHistory />}  />
         <Route path="/garage/vehicle-history/upload" element={<UploadVehicleHistory />} />
         <Route path="/garage/vehicle-history/manual" element={<ManualVehicleHistory />} />
 
-        <Route path="/settings" />
+        <Route path="/settings" element={<Settings />}/>
       </Routes>
     </div>
     </BrowserRouter>

frontend/src/pages/NavBar.js

@@ -1,14 +1,26 @@
-import {Link} from "react-router-dom";
+import {Nav, Navbar} from "react-bootstrap";
+import Container from "react-bootstrap/Container";
+import React from "react";
 
 function NavBar() {
     return (
-        <div>
-            <Link to="/">Home</Link>
-            <Link to="/login">Login</Link>
-            <Link to="/garage">Garage</Link>
-            <Link to="/settings">Settings</Link>
-        </div>
+        <Navbar expand="lg" className="bg-body-tertiary">
+            <Container>
+                <Navbar.Brand href="/garage">Driveline</Navbar.Brand>
+                <Navbar.Toggle />
+                <Navbar.Collapse>
+                    <Nav>
+                        <Nav.Link href="/garage">Garage</Nav.Link>
+                        <Nav.Link href="/settings">Settings</Nav.Link>
+                    </Nav>
+
+                </Navbar.Collapse>
+                <Nav className={"ms-auto"}>
+                    <Navbar.Text >Signed in as: placeholder</Navbar.Text>
+                </Nav>
+            </Container>
+        </Navbar>
     );
 }
 
-export default NavBar;
+export default NavBar;

frontend/src/pages/Settings.js

@@ -5,6 +5,11 @@ export const Settings = () => {
             <h1>Settings</h1>
             <p>Change your settings here</p>
             <p>Placeholder</p>
+
+            <footer>
+                <a target="_blank" href="https://icons8.com/icon/vGQkspHvmobZ/settings">Settings</a> icon by <a
+                target="_blank" href="https://icons8.com">Icons8</a>
+            </footer>
         </div>
     );
 }

frontend/src/pages/garage/AddRemoveNavbar.js

@@ -0,0 +1,12 @@
+import {Link} from "react-router-dom";
+import {Button} from "react-bootstrap";
+
+function AddRemoveNavbar() {
+    return (
+        <div>
+
+        </div>
+    )
+}
+
+export default AddRemoveNavbar;

frontend/src/pages/garage/Garage.js

@@ -0,0 +1,78 @@
+import {BrowserRouter, Routes, Route, Link, useNavigate, useParams} from "react-router-dom";
+import VehicleInfo from "../vehicle/VehicleInfo";
+import Accordion from 'react-bootstrap/Accordion';
+import {Button, Card, Col, Row} from "react-bootstrap";
+import Container from 'react-bootstrap/Container';
+
+// TODO: REPLACE WITH REAL VALUES, THESE ARE USED AS TEST VALUES
+
+
+function Garage() {
+        // Divide the vehicles array into chunks of 3
+    const vehicles = ["2009 Nord Campy", "2015 Yotota Bav", "2019 Pesla Godel3", "2014 Nord Bustang",
+        "2017 Yotota Camry", "2016 Pesla GodelS", "2018 Nord Bustang", "2010 Yotota Bav"]
+    const chunkedVehicles = [];
+    let length = 0;
+    for (let i = 0; i < vehicles.length; i += 3) {
+        chunkedVehicles.push(vehicles.slice(i, i + 3));
+    }
+
+    return (
+        <div className="container">
+            <div className="row">
+                <div className="col-md-1 order-md-1"></div>
+                <div className="col-md-10 order-md-2">
+                    <div className="d-flex justify-content-evenly">
+                        <Link to="/garage/add"><Button>Add</Button></Link>
+                        <Routes>
+                            <Route path="/garage/add"/>
+                            <Route path="/garage/remove/:vehicle"/>
+                            <Route path={"/garage/vehicle-info/:vehicle"} element={<VehicleInfo/>}/>
+                        </Routes>
+                    </div>
+
+                    {chunkedVehicles.map((row, rowIndex) => (
+                        <Row key={rowIndex} xs={1} md={3} className="g-4">
+                            {/* Map over vehicles in the current row */}
+                            {row.map((vehicle, colIndex) => {
+                                let param = vehicle.replaceAll(" ", "-").toLowerCase();
+                                let year = vehicle.split(" ")[0];
+                                let model = vehicle.split(" ")[1];
+                                let make = vehicle.split(" ")[2];
+                                model = model[0].toUpperCase() + model.slice(1);
+                                make = make[0].toUpperCase() + make.slice(1);
+
+                                return (
+                                    <Col key={colIndex}>
+                                        <Card style={{width: '22rem'}} id={rowIndex + "-" + colIndex}>
+                                            <Card.Img variant="top"
+                                                      src="https://cdn.dealerk.it/cars/placeholder/placeholder-800.png"/>
+                                            <Card.Body>
+                                                <Card.Title>{vehicle}</Card.Title>
+                                                <Card.Text>
+                                                    Some quick example text to build on the card title and make up the bulk of
+                                                    the card's content.
+                                                </Card.Text>
+                                                <Card.Footer className="d-flex justify-content-around">
+                                                    <Link to={"/garage/vehicle-info/" + param}>
+                                                        <Button className={"btn btn-primary"}>View Info</Button>
+                                                    </Link>
+                                                    <Link to={"/garage/remove/" + param}>
+                                                        <Button>Remove</Button>
+                                                    </Link>
+                                                </Card.Footer>
+                                            </Card.Body>
+                                        </Card>
+                                    </Col>
+                                );
+                            })}
+                        </Row>
+                    ))}
+                </div>
+                <div className="col-md-1 order-md-3"></div>
+            </div>
+        </div>
+    );
+}
+
+export default Garage;

frontend/src/pages/VehicleHistory.js → frontend/src/pages/vehicle/VehicleHistory.js

@@ -1,6 +1,6 @@
 import {BrowserRouter, Routes, Route, useParams} from "react-router-dom";
-import GarageNavbar from "./GarageNavbar";
-import UploadNavbar from "./UploadNavbar";
+import VehicleNavbar from "./VehicleNavbar";
+import UploadNavbar from "../maintenance-history/UploadNavbar";
 
 function VehicleHistory() {
     let { vehicle } = useParams();
@@ -12,10 +12,10 @@ function VehicleHistory() {
     make.charAt(0).toUpperCase();
     return (
         <div>
-            <GarageNavbar />
+            <VehicleNavbar />
             <Routes>
-                <Route path="/garage/vehicle-info" />
-                <Route path="/garage/vehicle-history" />
+                <Route path="/garage/vehicle-info/:vehicle" />
+                <Route path="/garage/vehicle-history/:vehicle" />
             </Routes>
 
             <UploadNavbar />

frontend/src/pages/vehicle/VehicleInfo.js

@@ -0,0 +1,47 @@
+import {BrowserRouter, Routes, Route, useParams} from "react-router-dom";
+import VehicleNavbar from "./VehicleNavbar";
+import {Card, Col, Row} from "react-bootstrap";
+
+function VehicleInfo() {
+    let { vehicle } = useParams();
+    let parsed = vehicle.replaceAll("-", " ");
+    let year = parsed.split(" ")[0];
+    let model = parsed.split(" ")[1]
+    let make = parsed.split(" ")[2];
+    model = model[0].toUpperCase() + model.slice(1);
+    make = make[0].toUpperCase() + make.slice(1);
+    return (
+        <div>
+            <VehicleNavbar />
+            <Routes>
+                <Route path="/garage/vehicle-info/:vehicle" />
+                <Route path="/garage/vehicle-history/:vehicle" />
+            </Routes>
+
+            <p>{year} {model} {make}</p>
+
+        </div>
+    );
+}
+
+export default VehicleInfo;
+
+
+
+<Row xs={1} md={2} className="g-4">
+    {Array.from({ length: 4 }).map((_, idx) => (
+        <Col key={idx}>
+            <Card>
+                <Card.Img variant="top" src="holder.js/100px160" />
+                <Card.Body>
+                    <Card.Title>Card title</Card.Title>
+                    <Card.Text>
+                        This is a longer card with supporting text below as a natural
+                        lead-in to additional content. This content is a little bit
+                        longer.
+                    </Card.Text>
+                </Card.Body>
+            </Card>
+        </Col>
+    ))}
+</Row>

frontend/src/pages/vehicle/VehicleNavbar.js

@@ -0,0 +1,15 @@
+import {Link, useParams} from "react-router-dom";
+
+function VehicleNavbar() {
+    let { vehicle } = useParams();
+    let param = vehicle.replaceAll(" ", "-").toLowerCase();
+
+    return (
+        <div>
+            <Link to={"/garage/vehicle-info/"+param}>Info</Link>
+            <Link to={"/garage/vehicle-history/"+param} >History</Link>
+        </div>
+    );
+}
+
+export default VehicleNavbar;