Merge pull request #11 from Southeastern-Louisiana-University/Trips

Trips

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

@@ -11,8 +11,8 @@ import ticket from './ticket.svg';
 import {useState} from 'react';
 import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
 import TrainStations from '../../pages/Stations/TrainStations';
-import TrainRoutes from '../../pages/TrainRoutes';
-import Trips from '../../pages/Trips';
+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/Profile';
@@ -63,7 +63,7 @@ function NavBar() {
  <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"}>Trips</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>

SP23.P03.Web/ClientApp/src/pages/Profile/Profile.js

@@ -1,14 +1,14 @@
 import React from "react";
-import { Container, ListGroupItem } from "react-bootstrap";
+import { Container } from "react-bootstrap";
 import AuthService from "../../services/AuthService";
 import Button from "react-bootstrap/Button";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
 import Placeholder from "../../components/Placeholder";
 import profileperson from "./profileperson.svg";
 import Card from "react-bootstrap/Card";
-import ListGroup from "react-bootstrap/ListGroup";
 import ticket from "./ticket.svg";
+import barcode from "./barcode.jpg";
 function Profile() {
  const currentUser = AuthService.getCurrentUser();
  const navigate = useNavigate();
@@ -21,13 +21,16 @@ function Profile() {
  );
  }
  async function logOut() {
+ localStorage.removeItem("user");
+ navigate("/");
+ window.location.reload();
  await axios.post("/api/authentication/logout")
  .then(function(response) {
  if (response.status === 200) {
  console.log("It's 200");
- localStorage.removeItem("user");
- navigate("/");
- window.location.reload()
+ // localStorage.removeItem("user");
+ // navigate("/");
+ // window.location.reload()
  console.log(response.data);
  }
  })
@@ -47,12 +50,20 @@ function Profile() {
  Your Booked Tickets
  </h5> 
  </Card.Text>
- <ListGroup style={{textAlign: 'left'}}>
- <ListGroupItem>Ticket</ListGroupItem>
- <ListGroupItem>data</ListGroupItem>
- <ListGroupItem>goes</ListGroupItem>
- <ListGroupItem>here</ListGroupItem>
- </ListGroup>
+ <Card style={{ width: '18rem', padding: '10px'}}>
+ <Card.Header>Ticket #57244</Card.Header>
+ <Card.Body>
+ <Card.Text>
+ Date Booked: 05/20/23<br/>
+ From: Hammond, LA - 05/30/23<br/>
+ To: Houston, TX - 05/30/23<br/>
+ Train: Siemens Charger #5<br/>
+ Seat: Coach<br/>
+ $150 <br/>
+ <img src={barcode} alt="ticket" width="125px" height="70px" style={{margin: '10px'}}/>
+ </Card.Text>
+ </Card.Body>
+ </Card>
  <Button variant="danger" onClick={logOut} style={{marginTop: '20px'}}>Log Out</Button>
  </Card.Body>
  </Card>

SP23.P03.Web/ClientApp/src/pages/Route/GetRoutes.js

@@ -0,0 +1,54 @@
+import axios from "axios";
+import React, { useState, useEffect } from "react";
+import Card from "react-bootstrap/Card";
+import Container from "react-bootstrap/Container";
+import Loading from "../../components/Loading";
+import ListGroup from 'react-bootstrap/ListGroup';
+
+function routeStations(obj) {
+ var rs = [];
+ for(let i = 0; i < obj.length; i++) {
+ rs.push(<ListGroup.Item>{obj[i].name + " - " + obj[i].address + " - " + obj[i].city + ", " + obj[i].state}</ListGroup.Item>);
+ }
+ return rs;
+}
+function GetRoutes() {
+ const [routes, setRoute] = useState();
+ useEffect(() => {
+ axios.get("api/routes").then((response) => {
+ setRoute(response.data)
+ console.log(response.data);
+ }).catch((err) => {console.log(err)})
+ }, [])
+ return (
+ <Container>
+ {routes ? (
+ routes.map((route) => {
+ return (
+ <Card key={route.id}>
+ <Card.Body>
+ <Card.Title><h2>{route.name}</h2></Card.Title>
+ <Card.Text>
+ <i>{route.order}</i><br/>
+ </Card.Text>
+ <Card.Text>
+ <h5>{route.description}</h5>
+ </Card.Text>
+ <Card.Text className="text-start">
+ <b>Serving Train Stations:</b>
+ <ListGroup>
+ {routeStations(route.trainStations)}
+ </ListGroup>
+ </Card.Text>
+ </Card.Body>
+ </Card>
+ )
+ })
+ ) : (
+ <Loading/>
+ )}
+ </Container>
+ );
+}
+
+export default GetRoutes;

SP23.P03.Web/ClientApp/src/pages/TrainRoutes.js → SP23.P03.Web/ClientApp/src/pages/Route/TrainRoutes.js

@@ -1,12 +1,12 @@
 import React from "react";
 import { Container } from "react-bootstrap";
-import Placeholder from "../components/Placeholder";
+import GetRoutes from "./GetRoutes";
 
 function TrainRoutes() {
  return (
  <Container className="text-center">
- <h1>Routes</h1>
- <Placeholder />
+ <h1>Our Routes</h1>
+ <GetRoutes/>
  </Container>
  );
 }

SP23.P03.Web/ClientApp/src/pages/Stations/GetStations.js

@@ -12,6 +12,7 @@ function GetStations() {
  useEffect(() => {
  axios.get("api/stations").then((response) => {
  setStation(response.data)
+ console.log(response.data);
  }).catch((err) => {console.log(err)})
  }, [])
  return (

SP23.P03.Web/ClientApp/src/pages/TripBooking/SearchTrips.js

@@ -0,0 +1,102 @@
+
+import React from "react";
+import Card from "react-bootstrap/Card";
+import Container from "react-bootstrap/Container";
+import Loading from "../../components/Loading";
+import ListGroup from 'react-bootstrap/ListGroup';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Button from 'react-bootstrap/Button';
+import Accordion from 'react-bootstrap/Accordion';
+import Badge from 'react-bootstrap/Badge';
+//import { useNavigate } from "react-router-dom";
+function SearchTrips({searchtrips}) {
+ // const navigate = useNavigate();
+ function convertTime(militarytime) {
+ var time = militarytime.split(":");
+ var hours = time[0];
+ var minutes = time[1];
+ var timeValue = "" + ((hours > 12) ? hours -12 :hours);
+ timeValue += (minutes < 10) ? ":00" : ":" + minutes;
+ timeValue += (hours >= 12) ? " PM" : " AM";
+ return timeValue;
+ }
+ /*function navtest() {
+ navigate("/");
+ }*/
+ function tripStations(obj) {
+ var ts = [];
+ for (let i = 0; i < obj.length; i++) {
+ ts.push(<ListGroup.Item>{obj[i].city + ", " + obj[i].state + ": " + obj[i].arrivalDate + ", " + convertTime(obj[i].arrivalTime)}</ListGroup.Item>)
+ }
+ return ts;
+ }
+ return (
+ <Container>
+ {searchtrips ? (
+ searchtrips.map((searchtrip) => {
+ return (
+ <Card key={searchtrip.id} /*onClick={() => navtest()}*/>
+ <Card.Body>
+ <Card.Title>Travelling the {searchtrip.routeName} Route </Card.Title>
+ <Card.Text className="text-start">
+ <h4><i>Amenities/Seating Available:</i></h4>
+ <Row>
+ <Col>{searchtrip.coachSeatsLeft > 0 ? 
+ <div><h5>Coach</h5>
+ <Button>Book</Button>
+ </div> : 
+ <div><h5><s>Coach</s></h5>
+ <Button disabled>Book</Button>
+ </div>}</Col>
+ <Col>{searchtrip.firstClassSeatsLeft > 0 ?
+ <div><h5>First Class</h5>
+ <Button>Book</Button>
+ </div> : 
+ <div><h5><s>First Class</s></h5>
+ <Button disabled>Book</Button>
+ </div>}</Col>
+ <Col>{searchtrip.sleepersLeft > 0 ?
+ <div><h5>Sleeper</h5> 
+ <Button>Book</Button>
+ </div> : <div><h5><s>Sleeper</s></h5> 
+ <Button disabled>Book</Button>
+ </div>}</Col>
+ <Col>{searchtrip.roomletsLeft > 0 ?
+ <div><h5>Roomlet</h5>
+ <Button>Book</Button>
+ </div> : <div><h5><s>Roomlet</s></h5>
+ <Button disabled>Book</Button>
+ </div>}</Col>
+ <Col>{searchtrip.dining === 'true' ?
+ <div><h5>Dining</h5></div> :
+ <div><h5><s>Dining</s></h5></div>}</Col>
+ <Col>
+ <h4>Starting At</h4>
+ <h2><Badge pill bg="info">${searchtrip.coachPrice + searchtrip.basePrice}</Badge></h2>
+ </Col>
+ </Row>
+ <br/>
+ <Accordion>
+ <Accordion.Item eventKey="0">
+ <Accordion.Header><h4>View Estimated Arrival Times</h4></Accordion.Header>
+ <Accordion.Body>
+ <ListGroup>
+ {tripStations(searchtrip.tripStations)}
+ </ListGroup>
+ </Accordion.Body>
+ </Accordion.Item>
+ </Accordion>
+ </Card.Text>
+ </Card.Body>
+ </Card>
+ )
+ })
+ ) : (
+ <Loading/>
+ )}
+ </Container>
+ );
+}
+
+export default SearchTrips

SP23.P03.Web/ClientApp/src/pages/TripBooking/TripBooking.js

@@ -1,29 +1,42 @@
 import React from "react";
+import axios from "axios";
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import Card from "react-bootstrap/Card";
 import Form from "react-bootstrap/Form";
 import Button from "react-bootstrap/Button";
 import magglass from "./search.svg";
-function handler(e) {
- e.preventDefault();
- const start = e.target.start.value;
- const departdate = e.target.departdate.value;
- const departtime = e.target.departtime.value;
-
- const end = e.target.end.value;
- const arrivaldate = e.target.arrivaldate.value;
- const arrivaltime = e.target.arrivaltime.value;
- alert("Start place is" + start + ", depart date is " + departdate + ", depart time is " + departtime + "\nEnd place is" +
- end + ", arrival date is " + arrivaldate + ", arrival time is " + arrivaltime);
-
-}
+import SearchTrips from "./SearchTrips";
+import {useState} from "react";
 function Tickets() {
+ const [searchtrips, setSearchTrips] = useState();
+ async function getSearchTrips(e) {
+ e.preventDefault();
+ const departlocation = e.target.departlocation.value;
+ const departdate = e.target.departdate.value;
+ const departtime = e.target.departtime.value;
+
+ const arrivallocation = e.target.arrivallocation.value;
+ const arrivaldate = e.target.arrivaldate.value;
+ const arrivaltime = e.target.arrivaltime.value;
+ /* alert("Start place is " + departlocation + ", depart date is " + departdate + ", depart time is " + departtime + "\nEnd place is " +
+ arrivallocation + ", arrival date is " + arrivaldate + ", arrival time is " + arrivaltime);*/
+
+ await axios.post("/api/trips/finddeparture", 
+ {departlocation, departdate, departtime, arrivallocation, arrivaldate, arrivaltime})
+ .then(function(response) {
+ if (response.status === 200) {
+ console.log("It's 200");
+ console.log(response.data);
+ setSearchTrips(response.data);
+ }
+ }).catch((err) => {console.log(err)});
+ }
  return (
  <Container className="text-center">
  <h1 style={{padding: '15px'}}>Find A Train</h1>
- <Form onSubmit={handler}>
+ <Form onSubmit={getSearchTrips}>
  <Row>
  <Col>
  <Card style={{padding: '15px'}}>
@@ -33,7 +46,7 @@ function Tickets() {
  <Col>
  <Form.Group>
  <Form.Label>Starting Location</Form.Label>
- <Form.Control type="text" placeholder="Enter state or station" name="start"/>
+ <Form.Control type="text" placeholder="Enter state or station" name="departlocation"/>
  </Form.Group>
  </Col>
  <Col>
@@ -61,7 +74,7 @@ function Tickets() {
  <Col>
  <Form.Group>
  <Form.Label>Ending Location</Form.Label>
- <Form.Control type="text" placeholder="Enter state or station" name="end"/>
+ <Form.Control type="text" placeholder="Enter state or station" name="arrivallocation"/>
  </Form.Group>
  </Col>
  <Col>
@@ -85,6 +98,7 @@ function Tickets() {
  <Button type="submit" style={{margin: '15px'}} size="lg">
  <img src={magglass} alt="glass" style={{paddingRight: '10px'}}/>Search</Button>
  </Form>
+ <div>{searchtrips ? <SearchTrips searchtrips={searchtrips} /> : null}</div>
  </Container>
  );
 }