- );
-}
-
-export default Garage;
\ No newline at end of file
diff --git a/frontend/src/pages/GarageNavbar.js b/frontend/src/pages/GarageNavbar.js
deleted file mode 100644
index 3e2d5a5..0000000
--- a/frontend/src/pages/GarageNavbar.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Link} from "react-router-dom";
-
-function GarageNavbar() {
- return (
-
- Info
- History
-
- );
-}
-
-export default GarageNavbar;
\ No newline at end of file
diff --git a/frontend/src/pages/NavBar.js b/frontend/src/pages/NavBar.js
index 6a69218..da79e62 100644
--- a/frontend/src/pages/NavBar.js
+++ b/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 (
-
- Home
- Login
- Garage
- Settings
-
+
+
+ Driveline
+
+
+
+
+
+
+
+
);
}
-export default NavBar;
\ No newline at end of file
+export default NavBar;
diff --git a/frontend/src/pages/Settings.js b/frontend/src/pages/Settings.js
index 14e9e08..9fd4449 100644
--- a/frontend/src/pages/Settings.js
+++ b/frontend/src/pages/Settings.js
@@ -5,6 +5,11 @@ export const Settings = () => {
Settings
Change your settings here
Placeholder
+
+
);
}
\ No newline at end of file
diff --git a/frontend/src/pages/VehicleInfo.js b/frontend/src/pages/VehicleInfo.js
deleted file mode 100644
index d9c4664..0000000
--- a/frontend/src/pages/VehicleInfo.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import {BrowserRouter, Routes, Route, useParams} from "react-router-dom";
-import GarageNavbar from "./GarageNavbar";
-
-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 (
-
-
-
-
-
-
-
-
{year} {model} {make}
-
-
- );
-}
-
-export default VehicleInfo;
\ No newline at end of file
diff --git a/frontend/src/pages/garage/AddRemoveNavbar.js b/frontend/src/pages/garage/AddRemoveNavbar.js
new file mode 100644
index 0000000..0bc63f2
--- /dev/null
+++ b/frontend/src/pages/garage/AddRemoveNavbar.js
@@ -0,0 +1,12 @@
+import {Link} from "react-router-dom";
+import {Button} from "react-bootstrap";
+
+function AddRemoveNavbar() {
+ return (
+
+
+
+ )
+}
+
+export default AddRemoveNavbar;
diff --git a/frontend/src/pages/AddVehicle.js b/frontend/src/pages/garage/AddVehicle.js
similarity index 100%
rename from frontend/src/pages/AddVehicle.js
rename to frontend/src/pages/garage/AddVehicle.js
diff --git a/frontend/src/pages/garage/Garage.js b/frontend/src/pages/garage/Garage.js
new file mode 100644
index 0000000..005b88d
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+ }/>
+
+
+
+ {chunkedVehicles.map((row, rowIndex) => (
+
+ {/* 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 (
+
+
+
+
+ {vehicle}
+
+ Some quick example text to build on the card title and make up the bulk of
+ the card's content.
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ })}
+
+ ))}
+
+
+
+
+ );
+}
+
+export default Garage;
\ No newline at end of file
diff --git a/frontend/src/pages/RemoveVehicle.js b/frontend/src/pages/garage/RemoveVehicle.js
similarity index 100%
rename from frontend/src/pages/RemoveVehicle.js
rename to frontend/src/pages/garage/RemoveVehicle.js
diff --git a/frontend/src/pages/ManualVehicleHistory.js b/frontend/src/pages/maintenance-history/ManualVehicleHistory.js
similarity index 100%
rename from frontend/src/pages/ManualVehicleHistory.js
rename to frontend/src/pages/maintenance-history/ManualVehicleHistory.js
diff --git a/frontend/src/pages/UploadNavbar.js b/frontend/src/pages/maintenance-history/UploadNavbar.js
similarity index 100%
rename from frontend/src/pages/UploadNavbar.js
rename to frontend/src/pages/maintenance-history/UploadNavbar.js
diff --git a/frontend/src/pages/UploadVehicleHistory.js b/frontend/src/pages/maintenance-history/UploadVehicleHistory.js
similarity index 100%
rename from frontend/src/pages/UploadVehicleHistory.js
rename to frontend/src/pages/maintenance-history/UploadVehicleHistory.js
diff --git a/frontend/src/pages/Vehicle.js b/frontend/src/pages/vehicle/Vehicle.js
similarity index 100%
rename from frontend/src/pages/Vehicle.js
rename to frontend/src/pages/vehicle/Vehicle.js
diff --git a/frontend/src/pages/VehicleHistory.js b/frontend/src/pages/vehicle/VehicleHistory.js
similarity index 79%
rename from frontend/src/pages/VehicleHistory.js
rename to frontend/src/pages/vehicle/VehicleHistory.js
index 882ceed..4493613 100644
--- a/frontend/src/pages/VehicleHistory.js
+++ b/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 (
-
+
-
-
+
+
diff --git a/frontend/src/pages/vehicle/VehicleInfo.js b/frontend/src/pages/vehicle/VehicleInfo.js
new file mode 100644
index 0000000..abf24ba
--- /dev/null
+++ b/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 (
+
+
+
+
+ Card title
+
+ This is a longer card with supporting text below as a natural
+ lead-in to additional content. This content is a little bit
+ longer.
+
+
+
+
+ ))}
+
\ No newline at end of file
diff --git a/frontend/src/pages/vehicle/VehicleNavbar.js b/frontend/src/pages/vehicle/VehicleNavbar.js
new file mode 100644
index 0000000..97b0cef
--- /dev/null
+++ b/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 (
+
+ Info
+ History
+
+ );
+}
+
+export default VehicleNavbar;
\ No newline at end of file