Merge pull request #12 from Southeastern-Louisiana-University/dev

Dev

SP23.P03.Web/ClientApp/package.json

@@ -6,6 +6,7 @@
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
+ "axios": "^1.3.4",
  "bootstrap": "^5.3.0-alpha1",
  "react": "^18.2.0",
  "react-bootstrap": "^2.7.2",

SP23.P03.Web/ClientApp/src/App.js

@@ -1,12 +1,13 @@
 import React from 'react';
-//import logo from './logo.svg';
 import './App.css';
 import NavBar from './components/NavBar/NavBar';
+import Footer from './components/Footer/Footer';
 
 function App() {
  return (
  <div>
  <NavBar/>
+ <Footer/>
  </div>
  /*<div className="App">
  <header className="App-header">

SP23.P03.Web/ClientApp/src/components/Footer/Footer.js

@@ -0,0 +1,25 @@
+import React from "react";
+import train from "./train.svg";
+function Footer() {
+ return (
+ <div style={{backgroundColor: '#d8b4fe', marginTop: '60px'}}>
+ <div className="container py-5">
+ <footer className="d-flex flex-wrap justify-content-between align-items-center border-top">
+ <p className="col-md-4 mb-0 text-body-secondary">&copy; 2023 EnTrack, Inc</p>
+
+ <div className="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
+ <img src={train} alt="a train" style={{margin: '15px'}}/>
+ </div>
+
+ <ul className="nav col-md-4 justify-content-end">
+ <li className="nav-item"><a href="/" className="nav-link px-2 text-body-secondary">Home</a></li>
+ <li className="nav-item"><a href="/prices" className="nav-link px-2 text-body-secondary">Pricing</a></li>
+ <li className="nav-item"><a href="/about" className="nav-link px-2 text-body-secondary">About</a></li>
+ </ul>
+ </footer>
+</div>
+</div>
+ );
+}
+
+export default Footer;

SP23.P03.Web/ClientApp/src/components/Loading.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Spinner from "react-bootstrap/Spinner";
+import Container from "react-bootstrap/Container";
+
+function Loading() {
+ return (
+ <Container className="text-center">
+ <h3>Loading...</h3>
+ <Spinner animation="border" variant="info" />
+ </Container>
+ );
+}
+
+export default Loading;

SP23.P03.Web/ClientApp/src/components/NavBar/NavBar.css

@@ -2,10 +2,6 @@
  background-color: #d8b4fe;
  margin: 10px 40px 10px 40px;
  border-radius: 30px;
- height: 60px;
+ height: 65px;
 }
-/*a.navbar-brand, a.navbar-brand:hover {
- color: white;
- font-size: 50px;
- font-family: 'Nunito', sans-serif;
-}*/
+

SP23.P03.Web/ClientApp/src/components/NavBar/NavBar.js

@@ -1,34 +1,37 @@
 import React from 'react';
 import Container from 'react-bootstrap/Container';
 import Navbar from 'react-bootstrap/Navbar';
-import Form from 'react-bootstrap/Form';
 import Button from 'react-bootstrap/Button';
 import Nav from 'react-bootstrap/Nav';
 import Offcanvas from 'react-bootstrap/Offcanvas';
 import './NavBar.css';
 import burger from './hamburger.svg';
-import magnifyingglass from './search.svg';
+import train from './train.svg';
+import ticket from './ticket.svg';
 import {useState} from 'react';
 import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
-import TrainStations from '../../pages/TrainStations';
-import TrainRoutes from '../../pages/TrainRoutes';
-import Trips from '../../pages/Trips';
-import Tickets from '../../pages/Tickets';
+import TrainStations from '../../pages/Stations/TrainStations';
+import TrainRoutes from '../../pages/Route/TrainRoutes';
+import Trips from '../../pages/Trips/Trips';
+import TripBooking from '../../pages/TripBooking/TripBooking';
 import Home from '../../pages/Home';
-import Profile from '../../pages/Profile';
+import Profile from '../../pages/Profile/Profile';
 import SignedIn from '../User/SignedIn';
 import NotSignedIn from '../User/NotSignedIn';
 import NotFound from '../../pages/NotFound';
-import Trains from '../../pages/Trains';
+import Trains from '../../pages/Trains/Trains';
+import About from '../../pages/About';
+import Prices from '../../pages/PricesAndSeating/Prices';
+import AuthService from '../../services/AuthService';
+import Col from "react-bootstrap/Col";
 
 function NavBar() {
+ const currentUser = AuthService.getCurrentUser();
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
- const handleShow = () => setShow(true);
-
- let userComponent; //test code, actually want to render based on backend authentication eventually
- let isLoggedIn = false;
- if (isLoggedIn) {
+ const handleShow = () => setShow(true); 
+ let userComponent;
+ if (currentUser != null) {
  userComponent = <SignedIn />
  }
  else {
@@ -38,71 +41,64 @@ function NavBar() {
  return (
  <Router>
  <Navbar className="main" sticky="top">
- <Container>
- <Navbar.Brand style={{cursor: 'pointer'}}> 
- <img onClick={handleShow}
+  <Container>
+  <Col className="d-flex justify-content-start">
+ <img onClick={handleShow} style={{cursor: 'pointer', paddingRight: '17px'}}
  alt="a burger"
  src={burger}
- width="50"
- height="50"
- className="d-inline-block align-center"
- />
- </Navbar.Brand>
- <Offcanvas show={show} onHide={handleClose}>
- <Offcanvas.Header closeButton style={{backgroundColor: '#d8b4fe'}}>
- <Offcanvas.Title><b>Menu</b></Offcanvas.Title>
- </Offcanvas.Header>
- <Offcanvas.Body style={{backgroundColor: '#f2e6ff'}}>
- <Nav style={{fontSize: '30px'}} onClick={handleClose}>
- <Nav.Link as={Link} to={"/trainstations"}>Train Stations</Nav.Link>
- <Nav.Link as={Link} to={"/routes"}>Routes</Nav.Link>
- <Nav.Link as={Link} to={"/trips"}>Trips</Nav.Link>
- <Nav.Link as={Link} to={"/tickets"}>Tickets</Nav.Link>
- <Nav.Link as={Link} to={"/trains"}>Trains</Nav.Link>
- </Nav>
- </Offcanvas.Body>
- </Offcanvas>
- <Navbar.Brand>
+ />
+ <Navbar.Brand>
  <Nav.Link as={Link} to={"/"}><i style={{color: 'white', fontSize: '50px', fontFamily: "'Nunito', sans-serif"}}>EnTrack</i></Nav.Link>
- </Navbar.Brand>
- <Nav className="me-auto"/>
- <img src={magnifyingglass} alt="magnifyingglass" className="me-3"/>
- <Form className="d-flex">
- <Form.Control
- type="search"
- placeholder="Looking for..."
- className="me-2"
- aria-label="Search"
- list="options"
- />
- <datalist id="options">
- <option value={"Train Stations"}/>
- <option value={"Routes"}/>
- <option value={"Trips"}/>
- <option value={"Tickets"}/>
- <option value={"Trains"}/>
- </datalist>
- <Button variant="light">Search</Button>
- </Form>
- <Nav className="me-auto"/*Somehow these (almost) center the search bar?*//> 
- <Nav className="me-auto"/>
- <div>
- {userComponent}
- </div>
- </Container>
- </Navbar>
- <div>
+ </Navbar.Brand>
+ <img
+ alt="a train"
+ src={train}
+ /> 
+ <Offcanvas show={show} onHide={handleClose}>
+ <Offcanvas.Header closeButton style={{backgroundColor: '#d8b4fe'}}>
+ <Offcanvas.Title><b>Menu</b></Offcanvas.Title>
+ </Offcanvas.Header>
+ <Offcanvas.Body style={{backgroundColor: '#f2e6ff'}}>
+ <Nav style={{fontSize: '30px'}} onClick={handleClose}>
+ <Nav.Link as={Link} to={"/tripbooking"}><b>Book a Trip</b></Nav.Link>
+ <Nav.Link as={Link} to={"/trainstations"}>Train Stations</Nav.Link>
+ <Nav.Link as={Link} to={"/routes"}>Routes</Nav.Link>
+ <Nav.Link as={Link} to={"/trips"}>Departures</Nav.Link>
+ <Nav.Link as={Link} to={"/trains"}>Trains</Nav.Link>
+ <Nav.Link as={Link} to={"/prices"}>Seating/Prices</Nav.Link>
+ <Nav.Link as={Link} to={"/about"}>About Us</Nav.Link>
+ </Nav>
+ </Offcanvas.Body>
+ </Offcanvas>
+ </Col>
+ <Col className="d-flex justify-content-center">
+ <Nav.Link as={Link} to={"/tripbooking"}>
+ <Button variant="light" size="lg" style={{color: '#d8b4fe'}}>
+ <img src={ticket} alt="a ticket" style={{marginRight: '10px'}}/>
+ Book a Trip
+ </Button>
+ </Nav.Link>
+ </Col>
+ <Col className="d-flex justify-content-end">
+ <div>
+ {userComponent}
+ </div>
+ </Col>
+
+ </Container>
+ </Navbar>
  <Routes>
  <Route path="/trainstations" element={<TrainStations />}/>
  <Route path="/routes" element={<TrainRoutes />}/>
  <Route path="/trips" element={<Trips />}/>
- <Route path="/tickets" element={<Tickets />}/>
+ <Route path="/tripbooking" element={<TripBooking />}/>
  <Route path="/profile" element={<Profile />}/>
  <Route path="/trains" element={<Trains />}/>
+ <Route path="/prices" element={<Prices />}/>
+ <Route path="/about" element={<About />}/>
  <Route path="/" element={<Home />}/>
  <Route path="*" element={<NotFound />} /*this route must be last*//>
  </Routes>
- </div>
  </Router>
  );
 }