Repository: AdityaKumawat97/MERN-BUS-APP
Branch: master
Commit: a363d0c32a68
Files: 57
Total size: 114.8 KB
Directory structure:
gitextract_jky4zb8k/
├── .gitattributes
├── README.md
├── backend/
│ ├── app.js
│ ├── auth/
│ │ └── auth.js
│ ├── bin/
│ │ └── www
│ ├── config/
│ │ ├── jwtConfig.js
│ │ ├── keys.js
│ │ └── passport.js
│ ├── models/
│ │ ├── Buses.js
│ │ └── User.js
│ ├── package.json
│ ├── public/
│ │ ├── index.html
│ │ └── stylesheets/
│ │ └── style.css
│ ├── routes/
│ │ ├── loggedInUser.js
│ │ ├── login.js
│ │ ├── register.js
│ │ └── routeSelection.js
│ └── routes.json
└── frontend/
├── .gitignore
├── README.md
├── debug.log
├── package.json
├── public/
│ ├── index.html
│ ├── manifest.json
│ └── robots.txt
└── src/
├── App.css
├── App.js
├── App.test.js
├── components/
│ ├── API/
│ │ └── api.js
│ ├── BusList/
│ │ ├── BusList.js
│ │ └── busList.css
│ ├── Homepage/
│ │ ├── Homepage.js
│ │ └── homepage.css
│ ├── Login-Signup/
│ │ ├── LogOrsign.js
│ │ ├── Signup.js
│ │ ├── SignupFunctions.js
│ │ ├── logOrsign.css
│ │ ├── loginFunctions.js
│ │ └── signup.css
│ ├── PaymentTab/
│ │ ├── PaymentTab.css
│ │ ├── PaymentTab.js
│ │ └── utils.js
│ ├── Profile/
│ │ ├── Profile.js
│ │ └── profile.css
│ ├── RouteSelection/
│ │ ├── RouteSelection.css
│ │ └── RouteSelection.js
│ ├── SeatSelection/
│ │ ├── SeatSelection.js
│ │ └── Tab.css
│ ├── TicketPage/
│ │ ├── TicketPage.css
│ │ └── TicketPage.js
│ └── routeSelector/
│ ├── Routeselector.css
│ ├── Routeselector.js
│ └── routeApifunc.js
├── index.css
├── index.js
├── serviceWorker.js
└── setupTests.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitattributes
================================================
# Auto detect text files and perform LF normalization
* text=auto
================================================
FILE: README.md
================================================
# MERN-BUS-APP
## MFRP (My First Real Project) assigned by Cognizant during Internship
A Bus ticket booking application made using MERN Stack (MongoDB, Express js, React js, Node js)
The Bus ticket application is composed of the following Features:
### Front-End
* Sign-In & Sign-Up Pages.
* Uses Token based system, so only registered users can access the website passport js.
* Password hashing using passport js.
* Has a profile page, which will display all information about the signed in user.
* List of cities for users to choose from (starting city & destination city).
* Getting list of bus's of different companies with various details.
* Seat selection page has a very user friendly environment, which also generates dynamic forms for storing data's of passengers.
* Has a Confirmation page, which gets a debit card data using react-credit-cards. This version of the application does not include handling the payment process.
* Final page has a ticket displaying component, it displays all passenger data and also generates a random number as a transaction ID.
### Back-End
* Uses Express js based application for the backend process.
* Uses MongoDB atlas for storing the collections.
* Uses passport js for authenticating user and token based system.
* Uses passport js for hashing the password before sending the data to the cloud.
* This version does not support dynamic seat data being stored from cloud.
This project also demonstrates:
* a typcial React project layout structure
**Screenshots:**
Landing Page:
Signing In Page:
Bus Selection Page:
Seat Selection Page:
Payment & Confirmation Page:
---
## Developed With
* [Visual Studio Code](https://code.visualstudio.com/) - A source code editor developed by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring
* [Node.js](https://nodejs.org/en/) - Javascript runtime
* [React](https://reactjs.org/) - A javascript library for building user interfaces
* [Babel](https://babeljs.io/) - A transpiler for javascript
* [Webpack](https://webpack.js.org/) - A module bundler
* [SCSS](http://sass-lang.com/) - A css metalanguage
* [Bootstrap 4](https://getbootstrap.com/) - Bootstrap is an open source toolkit for developing with HTML, CSS, and JS
* [Axios](https://github.com/axios/axios) - Promise based HTTP client for the browser and node.js
* [Express js](http://expressjs.com/) - Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
* [MongoDB atlas](https://www.mongodb.com/cloud/atlas) - MongoDB Atlas is the global cloud database service for modern applications.
* [Passport Js](http://www.passportjs.org/) - Passport is authentication middleware for Node.js. Extremely flexible and modular, Passport can be unobtrusively dropped in to any Express-based web application.
---
## Getting Started
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
### Prerequisites
The following software is required to be installed on your system:
* Node 8.x
* Npm 3.x
Type the following commands in the terminal to verify your node and npm versions
```bash
node -v
npm -v
```
### Install
Follow the following steps to get development environment running.
* Clone _'MERN-BUS-APP.git'_ repository from GitHub
```bash
git clone https://github.com/AdityaKumawat97/MERN-BUS-APP.git
```
_OR USING SSH_
```bash
git clone git@github.com:AdityaKumawat97/MERN-BUS-APP.git
```
* Install node modules
```bash
cd MERN-BUS-APP
cd frontend
npm install
cd..
cd backend
npm install
```
### Starting both front end and back end servers
* Build application
This command will start the mongodb and the front end part.
```bash
cd frontend
npm start
cd..
cd backend
npm run devStart
```
---
================================================
FILE: backend/app.js
================================================
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var mongoose = require('mongoose');
var passport = require('passport');
const cors = require('cors')
var app = express();
// Login and Register
require('./auth/auth');
const login = require('./routes/login')
const loggedInPage = require('./routes/loggedInUser');
// ----------------------------------------------------
const bookingRoute = require('./routes/routeSelection')
var registerRouter = require('./routes/register');
//--------------------------------------------------------
//DB Config
const DB_URL = require('./config/keys').MongoURI;
//connect to mongo
//---------------------------------------------
mongoose.connect(DB_URL, {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() => {
console.log("Connected to MongoDB")
})
.catch(err => {
throw err
})
//---------------------------------------------
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(cors())
app.use('/', login);
app.use('/booking', bookingRoute);
app.use('/register', registerRouter); // To register page
app.use('/user', passport.authenticate('jwt', { session: false }), loggedInPage); //To Secure Route
module.exports = app;
================================================
FILE: backend/auth/auth.js
================================================
const passport = require('passport');
const localStrategy = require('passport-local').Strategy;
const User = require('../models/User')
var bodyParser = require('body-parser')
const bcrypt = require('bcrypt');
//Create a passport middleware to handle User login
passport.use('login', new localStrategy({
usernameField: 'email',
passwordField: 'password'
}, async (email, password, done) => {
try {
//Find the user associated with the email provided by the user
const user = await User.findOne({ email });
if (user === null) {
//If the user isn't found in the database, return a message
return done(null, false, { message: 'User not found' });
}
//Validate password and make sure it matches with the corresponding hash stored in the database
//If the passwords match, it returns a value of true.
const validate1 = await bcrypt.compare(password, user.password, function (err, result) {
if (err) console.log(err);
if (result) return done(null, user, { message: 'Logged in Successfully' });
else return done(null, false, { message: 'Wrong Password' });
});
} catch (error) {
return done(error);
}
}));
const JWTstrategy = require('passport-jwt').Strategy;
//We use this to extract the JWT sent by the user
const ExtractJWT = require('passport-jwt').ExtractJwt;
//This verifies that the token sent by the user is valid
passport.use(new JWTstrategy({
//secret we used to sign our JWT
secretOrKey: 'top_secret',
//we expect the user to send the token as a query parameter with the name 'secret_token'
jwtFromRequest: ExtractJWT.fromUrlQueryParameter('secret_token')
}, async (token, done) => {
try {
//Pass the user details to the next middleware
return done(null, token.user);
} catch (error) {
done(error);
}
}));
================================================
FILE: backend/bin/www
================================================
#!/usr/bin/env node
/**
* Module dependencies.
*/
var app = require('../app');
var debug = require('debug')('backend:server');
var http = require('http');
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '8080');
app.set('port', port);
console.log("Server UP and Running at 8080")
/**
* Create HTTP server.
*/
var server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
/**
* Normalize a port into a number, string, or false.
*/
function normalizePort(val) {
var port = parseInt(val, 10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
}
/**
* Event listener for HTTP server "error" event.
*/
function onError(error) {
if (error.syscall !== 'listen') {
throw error;
}
var bind = typeof port === 'string'
? 'Pipe ' + port
: 'Port ' + port;
// handle specific listen errors with friendly messages
switch (error.code) {
case 'EACCES':
console.error(bind + ' requires elevated privileges');
process.exit(1);
break;
case 'EADDRINUSE':
console.error(bind + ' is already in use');
process.exit(1);
break;
default:
throw error;
}
}
/**
* Event listener for HTTP server "listening" event.
*/
function onListening() {
var addr = server.address();
var bind = typeof addr === 'string'
? 'pipe ' + addr
: 'port ' + addr.port;
debug('Listening on ' + bind);
}
================================================
FILE: backend/config/jwtConfig.js
================================================
const JWTstrategy = require('passport-jwt').Strategy;
const ExtractJWT = require('passport-jwt').ExtractJwt;
const passport = require('passport');
passport.use(new JWTstrategy({
secretOrKey: 'top_secret',
jwtFromRequest: ExtractJWT.fromUrlQueryParameter('secret_token')
}, async (token, done) => {
try {
return done(null, token.user);
} catch (error) {
done(error);
}
}));
================================================
FILE: backend/config/keys.js
================================================
module.exports = {
MongoURI: "mongodb+srv://AdityaNew:123@cluster0-rsoqu.mongodb.net/test?retryWrites=true&w=majority"
}
================================================
FILE: backend/config/passport.js
================================================
const passport = require("passport");
const localStrategy = require("passport-local").Strategy;
const User = require("../models/User");
passport.use(
"login",
new localStrategy({
usernameField: "email",
passwordField: "password",
},
async(email, password, done) => {
try {
const user = await User.findOne({ email });
if (!user) {
return done(null, false, { message: "User not found" });
}
const validate = await user.isValidPassword(password);
if (!validate) {
return done(null, false, { message: "Wrong Password" });
}
return done(null, user, { message: "Logged in Successfully" });
} catch (error) {
return done(error);
}
}
)
);
================================================
FILE: backend/models/Buses.js
================================================
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const BusSchema = new Schema({
companyName: {
type: String
},
busType: {
type: String
},
busNumber: {
type: String
},
startCity: {
type: String
},
destination: {
type: String
},
totalSeats: {
type: String
},
availableSeats: {
type: String
},
pricePerSeat: {
type: String
}
}, {collection: "buses"})
const bus = mongoose.model('bus', BusSchema)
module.exports = bus;
================================================
FILE: backend/models/User.js
================================================
const mongoose = require("mongoose");
const Schema = mongoose.Schema;
const UserSchema = new Schema({
name: {
type: String,
required: true,
},
email: {
type: String,
required: true,
},
password: {
type: String,
required: true,
},
mobile: {
type: String,
required: true,
},
gender: {
type: String,
required: true,
},
dob: {
type: Date,
required: false,
},
});
const User = mongoose.model("user", UserSchema);
module.exports = User;
================================================
FILE: backend/package.json
================================================
{
"name": "backend",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"devStart": "nodemon ./bin/www"
},
"dependencies": {
"bcrypt": "^4.0.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"cookie-parser": "~1.4.4",
"cors": "^2.8.5",
"debug": "~2.6.9",
"express": "~4.16.1",
"express-session": "^1.17.1",
"jsonwebtoken": "^8.5.1",
"moment": "^2.26.0",
"mongoose": "^5.9.16",
"morgan": "~1.9.1",
"passport": "^0.4.1",
"passport-jwt": "^4.0.0",
"passport-local": "^1.0.0"
}
}
================================================
FILE: backend/public/index.html
================================================
<html>
<head>
<title>Express</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<h1>Express</h1>
<p>Welcome to Express</p>
</body>
</html>
================================================
FILE: backend/public/stylesheets/style.css
================================================
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
================================================
FILE: backend/routes/loggedInUser.js
================================================
const express = require('express');
const router = express.Router();
//Displays information tailored according to the logged in user
router.get('/profile', (req, res, next) => {
res.json({
user: req.user,
token: req.query.secret_token
})
});
module.exports = router;
================================================
FILE: backend/routes/login.js
================================================
const express = require("express");
const passport = require("passport");
const User = require("../models/User");
const jwt = require("jsonwebtoken");
var bcrypt = require("bcrypt");
const router = express.Router();
router.post("/login", async(req, res, next) => {
const { email, password } = req.body;
try {
User.findOne({ email: email }, (err, doc) => {
console.log(doc);
if (err) {} else {
if (!doc) {} else {
bcrypt.compare(password, doc.password, function(error, response) {
console.log(response);
const token = jwt.sign({ doc }, "top_secret");
res.status(200).json({ token });
});
}
}
});
} catch (error) {}
// passport.authenticate("login", async(err, user, info) => {
// try {
// if (err || !user) {
// const error = new Error("No User Found");
// console.log("Yellow", err);
// return next(error);
// }
// req.login(user, { session: false }, async(error) => {
// if (error) return next(error);
// const body = {
// _id: user._id,
// name: user.name,
// email: user.email,
// gender: user.gender,
// };
// const token = jwt.sign({ user: body }, "top_secret");
// return res.json({ token });
// });
// } catch (error) {
// return next(error);
// }
// })(req, res, next);
});
// router.get('/Login', (req, res) => {
// res.send("Login Here")
// })
module.exports = router;
================================================
FILE: backend/routes/register.js
================================================
var express = require('express');
var router = express.Router();
var User = require('../models/User')
var bcrypt = require('bcrypt');
var moment = require('moment');
var bodyParser = require('body-parser')
router.get('/', (req, res) => {
res.send("Register Here")
});
//Body-Parser
var jsonParser = bodyParser.json()
router.post('/', jsonParser, async (req, res) => {
//Hash Password
const hashPassword = await bcrypt.hash(req.body.password, 10)
let user = {
name: req.body.name,
email: req.body.email,
password: hashPassword,
mobile: req.body.mobile,
gender: req.body.gender,
dob: moment(req.body.dob).format('YYYY-MM-DD')
}
let newUser = new User(user)
// console.log(newUser)
newUser.save((err, reslut) => {
if (err) console.log(err)
else res.status(201).json(reslut)
})
});
module.exports = router;
================================================
FILE: backend/routes/routeSelection.js
================================================
var express = require('express');
var router = express.Router();
var bus = require('../models/Buses');
// router.get('/', (req, res) => {
// bus.find({ companyName, startCity, totalseats, availableseats }, (err, result) => {
// if (err) res.send(err)
// else res.json({ result })
// })
// })
router.post('/', (req, res) => {
bus.find({ 'startCity': req.body.startCity, 'destination': req.body.destination }).exec((err, bus) => {
if (err) {
res.json({ status: false, message: "error while searching" })
}
else res.json({ bus })
})
})
router.post('/', (req, res) => {
bus.findOne({ _id: req.body.bId }, (err, bus) => {
if (err) {
res.json({ status: false, message: "error while searching with ID" })
}
else
res.json({ bus })
})
})
// router.post('/', (req, res) => {
// let newBus = new bus(req.body)
// newBus.save((err, bus) => {
// if (err) console.log(err)
// else res.status(201).json(bus)
// })
// })
module.exports = router;
================================================
FILE: backend/routes.json
================================================
[
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Chennai",
"destination": "bangalore",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "ORANGE BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Chennai",
"destination": "bangalore",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Chennai",
"destination": "Hyderabad",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "ORANGE BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Chennai",
"destination": "Hyderabad",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Chennai",
"destination": "Coimbatore",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "ORANGE BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Chennai",
"destination": "Coimbatore",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Chennai",
"destination": "Vishakapatnam",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Chennai",
"destination": "Salem",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Chennai",
"destination": "Tirunelveli",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Bangalore",
"destination": "Chennai",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Bangalore",
"destination": "Salem",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Bangalore",
"destination": "Hyderabad",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Bangalore",
"destination": "Coimbatore",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Bangalore",
"destination": "Vishakapatnam",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Bangalore",
"destination": "Kochi",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Kochi",
"destination": "Bangalore",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Kochi",
"destination": "Vishakapatnam",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Kochi",
"destination": "Chennai",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Kochi",
"destination": "Salem",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Kochi",
"destination": "Coimbatore",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Kochi",
"destination": "OOty",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "RED BUS",
"busType": "Multi AXLE AC",
"busNumber": "TN 27 110099",
"startCity": "Kochi",
"destination": "",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/08/2020"
},
{
"CompanyName": "Santhosh Travels bus",
"busType": "Multi AXLE AC",
"busNumber": "AP 27 110099",
"startCity": "Kakinada",
"destination": "",
"totalSeats": "36",
"availableSeats": "20",
"pricePerSeat": "1000",
"date": "22/04/2021"
}
]
================================================
FILE: frontend/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
================================================
FILE: frontend/README.md
================================================
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `yarn start`
Runs the app in the development mode.<br />
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.<br />
You will also see any lint errors in the console.
### `yarn test`
Launches the test runner in the interactive watch mode.<br />
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `yarn build`
Builds the app for production to the `build` folder.<br />
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.<br />
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `yarn eject`
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
### Analyzing the Bundle Size
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
### Making a Progressive Web App
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
### Advanced Configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
### Deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
### `yarn build` fails to minify
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
================================================
FILE: frontend/debug.log
================================================
[0530/011756.906:ERROR:scoped_process_suspend.cc(31)] NtSuspendProcess: An attempt was made to access an exiting process. (0xc000010a)
[0530/011757.834:ERROR:process_info.cc(118)] ReadProcessMemory bool __cdecl crashpad::(anonymous namespace)::ReadStruct(HANDLE, crashpad::WinVMAddress, T *) [T = crashpad::process_types::PEB<crashpad::process_types::internal::Traits64>]: Only part of a ReadProcessMemory or WriteProcessMemory request was completed. (0x12B)
[0530/011757.843:ERROR:process_info.cc(551)] ReadProcessData failed
================================================
FILE: frontend/package.json
================================================
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@types/date-fns": "^2.6.0",
"axios": "^0.19.2",
"bootstrap": "^4.5.0",
"jwt-decode": "^2.2.0",
"react": "^16.13.1",
"react-credit-cards": "^0.8.2",
"react-datepicker": "^2.16.0",
"react-dom": "^16.13.1",
"react-icons": "^3.10.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.1",
"react-transition-group": "^4.4.1",
"redux": "^4.0.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
================================================
FILE: frontend/public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Unique Travels</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
================================================
FILE: frontend/public/manifest.json
================================================
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
================================================
FILE: frontend/public/robots.txt
================================================
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
================================================
FILE: frontend/src/App.css
================================================
body {
background: url('./bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;
}
.page{
position: absolute;
}
.fade-appear, .fade-enter {
opacity: 0;
z-index: 1;
}
.fade-appear-active, .fade-enter.fade-enter-active {
opacity: 1;
transition: opacity 300ms linear 150ms;
}
.fade-exit{
opacity: 1;
}
.fade-exit.fade-exit-active{
opacity: 1;
transition: opacity 150ms linear;
}
================================================
FILE: frontend/src/App.js
================================================
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css'
import Homepage from './components/Homepage/Homepage'
import RouteSelection from './components/RouteSelection/RouteSelection'
import LogOrsign from './components/Login-Signup/LogOrsign'
import Signup from './components/Login-Signup/Signup'
import Profile from './components/Profile/Profile'
import TicketPage from './components/TicketPage/TicketPage'
import './App.css';
function App() {
return (
<div className="App">
<Router>
<Switch>
<Route path="/" exact render={props => <Homepage {...props} />} />
<Route path="/login" render={props => <LogOrsign {...props} />} />
<Route path="/register" render={props => <Signup {...props} />} />
<Route path="/routes" exact render={props => <RouteSelection {...props} />} />
<Route path="/profile" exact render={props => <Profile {...props} />} />
<Route path="/getTicket" exact render={props => <TicketPage {...props} />} />
</Switch>
</Router>
</div>
);
}
export default App;
================================================
FILE: frontend/src/App.test.js
================================================
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
================================================
FILE: frontend/src/components/API/api.js
================================================
import axios from 'axios'
export default axios.create({
baseURL: 'http//localhost:8080'
})
================================================
FILE: frontend/src/components/BusList/BusList.js
================================================
import React, { useState, useEffect } from 'react'
import { FaAngleDoubleDown } from "react-icons/fa";
import './busList.css'
export default function BusList({ value: dataInp }) {
const [obj, setObj] = useState('')
const [reset, Setreset] = useState(false)
const [arrowDown, setArrowDown] = useState(false)
const [clas, SetClas] = useState(true)
useEffect(() => {
setObj(dataInp)
}, [dataInp])
const handleSubmit = bId => {
localStorage.setItem("selectedBusId", bId)
SetClas(false)
setArrowDown(true)
}
const handleReset = (e) => {
if (clas === false) {
Setreset(true)
SetClas(true)
setArrowDown(false)
}
localStorage.removeItem("selectedBusId")
}
const renderFunction = () => {
return dataInp.map((bus, idx) => {
// let bId = bus._id
return (
<div key={idx} className="card mt-5 buslist">
<div class="row ml-3">
<div class="col-6 col-sm-3 mt-2 font-weight-bold ">Brand</div>
<div class="col-6 col-sm-3 mt-2 font-weight-bold ">From</div>
<div class="col-6 col-sm-3 mt-2 font-weight-bold ">To</div>
<div class="col-6 col-sm-3 mt-2 font-weight-bold ">Price</div>
<div class="w-100 d-none d-md-block"></div>
{console.log(bus.seatArray)}
<div class="col-6 col-sm-3 mb-4">{bus.companyName}</div>
<div class="col-6 col-sm-3 mb-4">{bus.startCity}</div>
<div class="col-6 col-sm-3 mb-4">{bus.destination}</div>
<div class="col-6 col-sm-3 mb-4">{bus.pricePerSeat}</div>
<div class="col-6 col-sm-4 mb-2 ml-0">
<button className={clas ? "btn btn-primary btn-md" : "btn btn-primary btn-md disabled"} onClick={(bId) => { handleSubmit(bus._id) }} >Book Now</button>
</div>
<div class="col-6 col-sm-4 mb-2 ml-0">
<span className={reset ? "badge badge-danger ml-5" : "disabled"} onClick={e => handleReset(e)}>Reset</span>
</div>
</div>
</div >
)
})
}
return (
<div className="">
{renderFunction()}
<div className={arrowDown ? "activeArrow" : "nonActive"}>
<FaAngleDoubleDown />
</div>
</div>
)
}
================================================
FILE: frontend/src/components/BusList/busList.css
================================================
.buslist {
margin-top: 20px;
background-color: rgba(240, 248, 255, 0.548);
}
.row {
margin-left: 15px;
}
.nonActive {
display: none;
}
.activeArrow {
color: rgb(0, 63, 0);
position: absolute;
margin-top: 50px;
left: 270px;
animation: bounce 0.5s infinite linear;
}
@-webkit-keyframes bounce {
0% {
top: 0;
}
50% {
top: -0.2em;
}
70% {
top: -0.3em;
}
100% {
top: 0;
}
}
@-moz-keyframes bounce {
0% {
top: 0;
}
50% {
top: -0.2em;
}
70% {
top: -0.3em;
}
100% {
top: 0;
}
}
@-o-keyframes bounce {
0% {
top: 0;
}
50% {
top: -0.2em;
}
70% {
top: -0.3em;
}
100% {
top: 0;
}
}
@-ms-keyframes bounce {
0% {
top: 0;
}
50% {
top: -0.2em;
}
70% {
top: -0.3em;
}
100% {
top: 0;
}
}
@keyframes bounce {
0% {
top: 0;
}
50% {
top: -0.2em;
}
70% {
top: -0.3em;
}
100% {
top: 0;
}
}
.nonActive {
display: none;
}
================================================
FILE: frontend/src/components/Homepage/Homepage.js
================================================
import React from 'react'
import './homepage.css'
export default function Homepage({ history }) {
const enterSite = e => {
e.preventDefault()
history.push('/login')
}
return (
<div className='container maint-cnt'>
<div className="header-nav">
<span className="mytext1"> Unique Travels </span>
</div>
<div className="">
</div>
<div className="container">
<div className="slogan">
<h1>
<span>always Travel</span>
<div className="message">
<div className="word1">Uniquely</div>
<div className="word2">Safely</div>
<div className="word3">with a smile</div>
</div>
</h1>
</div>
<a href="/#" onClick={e => enterSite(e)} className="mainBtn">
<svg width="277" height="62">
<defs>
<linearGradient id="grad1">
<stop offset="0%" stopColor="#FF8282" />
<stop offset="100%" stopColor="#E178ED" />
</linearGradient>
</defs>
<rect x="5" y="5" rx="25" fill="none" stroke="url(#grad1)" width="266" height="50"></rect>
</svg>
<span >Get Started!</span>
</a>
</div>
</div>
)
}
================================================
FILE: frontend/src/components/Homepage/homepage.css
================================================
.header-nav {
text-align: center;
position: absolute;
top: 1%;
left: 50%;
transform: translate(-50%, -9%);
width: 100%;
z-index: 1000;
}
/* .hide-nav-link-bar{
z-index: -1;
} */
.header-nav span {
text-transform: uppercase;
display: block;
}
.mytext1 {
color: #fff;
text-shadow: 0 0 2px rgba(255, 255, 255, 0.425), 0 0 4px rgba(255, 255, 255, 0.425), 0 0 8px rgba(255, 255, 255, 0.425), 0 0 32px rgba(0, 255, 255, 0.425), 0 0 64px rgba(0, 255, 255, 0.425), 0 0 90px rgba(0, 255, 255, 0.425);
font-family: 'Piedra', cursive;
font-size: 50px;
font-weight: 200;
letter-spacing: 8px;
margin-bottom: 20px;
background: #456e976c;
border-radius: 5px;
position: relative;
animation: text 3s 1;
}
@keyframes text {
0% {
color: white;
margin-bottom: -40px;
}
30% {
letter-spacing: 25px;
margin-bottom: -40px;
}
85% {
letter-spacing: 8px;
margin-bottom: -40px;
color: white
}
}
.mainBtn {
position: relative;
left: 74%;
margin-top: 50%;
display: inline-block;
width: 277px;
height: 50px;
font-size: 1em;
font-weight: bold;
line-height: 60px;
text-align: center;
text-transform: uppercase;
background-color: transparent;
cursor: pointer;
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 17px;
letter-spacing: 0.045em;
z-index: 1000;
}
.mainBtn svg {
position: absolute;
top: 0;
left: 0;
}
.mainBtn svg rect {
/* stroke: #EC0033; */
stroke-width: 4;
stroke-dasharray: 353, 0;
stroke-dashoffset: 0;
-webkit-transition: all 600ms ease;
transition: all 600ms ease;
}
.mainBtn span {
background: rgb(130, 230, 255);
background: -moz-linear-gradient(left, rgba(130, 230, 255, 1) 0%, rgb(130, 230, 255) 100%);
background: -webkit-linear-gradient(left, rgba(130, 230, 255, 1) 0%, rgba(130, 230, 255, 1) 100%);
background: linear-gradient(to right, rgba(130, 230, 255, 1) 0%, rgb(130, 230, 255) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8282', endColorstr='#e178ed', GradientType=1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.mainBtn:hover svg rect {
stroke-width: 4;
stroke-dasharray: 196, 543;
stroke-dashoffset: 437;
}
.maint-cnt {
height: 100%;
width: 100%;
}
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
background: black;
}
h1 {
color: #333;
font-family: tahoma;
font-size: 3rem;
font-weight: 100;
line-height: 1.5;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
position: relative;
width: 550px;
}
h1 span {
font-size: 30px;
margin-left: 15px;
color: black;
}
.message {
background-color: rgba(255, 255, 255, 0.062);
border-radius:5px;
color: #333;
display: block;
font-weight: 500;
overflow: hidden;
position: absolute;
padding-left: 0.5rem;
top: 0.2rem;
left: 270px;
animation: openclose 5s ease-in-out infinite;
}
.word1, .word2, .word3 {
font-family: tahoma;
font-size: 2.9rem;
}
@keyframes openclose {
0% {
top: 0.2rem;
width: 0;
}
5% {
width: 0;
}
15% {
width: 230px;
}
30% {
top: 0.2rem;
width: 230px;
}
33% {
top: 0.2rem;
width: 0;
}
35% {
top: 0.2rem;
width: 0;
}
38% {
top: -4.5rem;
}
48% {
top: -4.5rem;
width: 190px;
}
62% {
top: -4.5rem;
width: 190px;
}
66% {
top: -4.5rem;
width: 0;
text-indent: 0;
}
71% {
top: -9rem;
width: 0;
text-indent: 5px;
}
86% {
top: -9rem;
width: 285px;
}
95% {
top: -9rem;
width: 285px;
}
98% {
top: -9rem;
width: 0;
text-indent: 5px;
}
100% {
top: 0;
width: 0;
text-indent: 0;
}
}
.word3 {
font-size: 2.5rem;
}
.slogan {
position: absolute;
top: 170px;
left: 645px;
}
================================================
FILE: frontend/src/components/Login-Signup/LogOrsign.js
================================================
import React, { useState } from 'react'
import * as logFunc from './loginFunctions.js'
import './logOrsign.css'
import { FaFacebookF, FaTwitterSquare } from "react-icons/fa";
export default function LogOrsign({ history }) {
let [userData, setUserData] = useState({})
const getToSignUp = e => {
e.preventDefault()
history.push('/register')
}
const handleChangeEvent = (e, title) => {
let value = e.target.value
setUserData({ ...userData, [title]: value })
}
const submitData = e => {
e.preventDefault()
// console.log(userData)
logFunc.logUserIn(userData)
.then(response => response.data)
.then(data => {
let { token } = data
sessionStorage.setItem('authToken', token)
history.push('/routes')
})
}
return (
<div className="container">
<section className="myform-area">
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-8">
<div className="form-area login-form">
<div className="form-content">
<h2>Login</h2>
<p>you chose the right option</p>
<ul>
<li><a href="/#" className="facebook"><FaFacebookF /></a></li>
</ul>
<ul>
<li><a href="/#" className="twitter"><FaTwitterSquare /></a></li>
</ul>
</div>
<div className="form-input">
<h2>Enter Credentials</h2>
<form onSubmit={(e) => { submitData(e) }}>
<div class="form-group">
<input className="loginInfo" type="email" name="name" required onChange={e => handleChangeEvent(e, 'email')} />
<label>Email-Id</label>
</div>
<div class="form-group">
<input className="loginInfo" type="password" name="password" required onChange={e => handleChangeEvent(e, 'password')} />
<label>password</label>
</div>
<div class="myform-button">
<button type="submit" className="myform-btn">Login</button>
</div>
<div>
<small className="form-text text-muted signup-text">Already a User?
</small>
<span className="signUPtext"><a href="/#" onClick={(e) => getToSignUp(e)}>Sign-Up</a></span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
</div >
)
}
================================================
FILE: frontend/src/components/Login-Signup/Signup.js
================================================
import React, { useState } from "react";
import * as signupFunc from "./SignupFunctions";
import { FaFacebookF, FaTwitterSquare } from "react-icons/fa";
import "./signup.css";
export default function Signup({ history }) {
let [newUser, setnewUser] = useState({});
const handleChangeEvent = (e, field) => {
let fieldValue = e.target.value;
setnewUser({...newUser, [field]: fieldValue });
// if (field === 'email') {
// var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
// if (fieldValue.match(mailformat)) {
// setnewUser({ ...newUser, [field]: fieldValue })
// return true
// } else {
// alert("You have entered an invalid email address!");
// return false
// }
// } else if (field === 'password') {
// var passwordFormat = /^[A-Za-z]\w{7,14}$/;
// if (fieldValue.match(passwordFormat)) {
// setnewUser({ ...newUser, [field]: fieldValue })
// return true
// }else{
// alert("Input Password and Submit [7 to 15 characters which contain only characters, numeric digits, underscore and first character must be a letter]")
// }
};
// sign in
const getToSignIn = (e) => {
e.preventDefault();
history.push("/login");
};
// submiting data to backend
const submitData = (e) => {
e.preventDefault();
signupFunc.registerUser(newUser).then((response) => response.data);
console.log(newUser);
history.push("/login");
};
return ( <
div className = "container" >
<
div className = "flex-container" >
<
div className = "row full" >
<
div className = "col-md-12" >
<
div className = "form-container" >
<
div className = "form-container-in" > < /div> <
div className = "row sgnUp " >
<
div className = "col-md-6 right-divider pdding" >
<
h3 className = "lead-text mn-txt" > Join Us with Social < /h3> <
div className = "icon-soc-fb" >
<
FaFacebookF / >
<
/div> <
div className = "icon-soc-tw" >
<
FaTwitterSquare / >
<
/div> <
/div> <
div className = "left-divider" >
<
div className = "col-md-6" >
<
form onSubmit = {
(e) => submitData(e) } >
<
div className = "form-group2" >
<
label htmlFor = "name" > Name: < /label> <
input id = "name"
type = "text"
className = "form-control sgnUp"
onChange = {
(e) => handleChangeEvent(e, "name") }
/> <
/div> <
div class = "form-group2" >
<
label htmlFor = "email" > Email - ID: < /label> <
input required id = "email"
type = "email"
className = "form-control sgnUp"
onChange = {
(e) => handleChangeEvent(e, "email") }
/> <
/div> <
div class = "form-group2" >
<
label htmlFor = "mob-number" > Mobile - No.: < /label> <
input required id = "mob-number"
type = "text"
className = "form-control sgnUp"
onChange = {
(e) => handleChangeEvent(e, "mobile") }
/> <
/div> <
div class = "form-check form-check-inline rd" >
<
input required class = "form-check-input"
type = "radio"
id = "Male"
name = "gender"
value = "Male"
onChange = {
(e) => handleChangeEvent(e, "gender") }
/> <
label class = "form-check-label"
htmlFor = "Male" >
Male <
/label> <
/div> <
div class = "form-check form-check-inline rd" >
<
input required class = "form-check-input"
type = "radio"
id = "Female"
name = "gender"
value = "Female"
onChange = {
(e) => handleChangeEvent(e, "gender") }
/> <
label class = "form-check-label"
htmlFor = "Female" >
Female <
/label> <
/div> <
div class = "form-group2" >
<
label htmlFor = "password" > Password: < /label> <
input required id = "password"
type = "password"
className = "form-control sgnUp"
onChange = {
(e) => handleChangeEvent(e, "password") }
/> <
/div> <
div class = "form-group2" >
<
input required type = "submit"
value = "submit"
className = "btn-primary btnn form-submit sub-btn sgnUp" /
>
<
/div> <
div >
<
small className = "form-text text-muted link-text" >
Already a User ?
<
/small> <
span className = "signuptext" >
<
a href = "/#"
onClick = {
(e) => getToSignIn(e) } >
Sign - In <
/a> <
/span> <
/div> <
/form> <
/div> <
/div> <
/div> <
/div> <
/div> <
/div> <
/div> <
/div>
);
}
================================================
FILE: frontend/src/components/Login-Signup/SignupFunctions.js
================================================
import axios from 'axios'
export function registerUser(newUserDetails){
let apiUrl = 'http://localhost:8080/register'
return axios.post(apiUrl,newUserDetails,{
headers:{
'Content-Type': 'application/json'
}
})
}
================================================
FILE: frontend/src/components/Login-Signup/logOrsign.css
================================================
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
* {
margin: 0;
padding: 0
}
a, a:hover {
text-decoration: none;
}
.myform-area {
overflow: hidden;
padding: 60px 0;
/* background-image: url('../../bg.jpg'); */
position: relative;
padding-top: 100px;
padding-bottom: 100px;
}
.myform-area .form-area {
position: relative;
background: rgba(103, 58, 183, 0.7);
width: 700px;
height: 400px;
overflow: hidden;
box-shadow: 0 0 40px 0 #0a0a0a;
}
.myform-area .form-area .form-content, .myform-area .form-area .form-input {
position: relative;
width: 50%;
height: 100%;
float: left;
box-sizing: border-box;
}
.myform-area .form-area .form-content {
width: 50%;
padding: 40px 30px;
}
.myform-area .form-area .form-content h2 {
color: #fff;
}
.myform-area .form-area .form-content p {
color: #fff;
}
.myform-area .form-area .form-content ul {
margin-top: 50px;
}
.myform-area .form-area .form-content ul li {
display: inline-block;
margin-right: 10px;
}
.myform-area .form-area .form-content a i {
margin-right: 10px;
}
.myform-area .form-area .form-content .facebook {
display: block;
position: relative;
top: -39px;
padding: 8px 140px;
background: #3B579D;
color: #fff;
font-size: 15px;
text-transform: capitalize;
border-radius: 4px;
border: 1px solid #3B579D;
transition: all .5s;
}
.myform-area .form-area .form-content .facebook:hover, .myform-area .form-area .form-content .facebook:focus {
background: transparent;
}
.myform-area .form-area .form-content .twitter {
display: block;
position: relative;
top: -48px;
padding: 8px 140px;
background: #00ACED;
color: #fff;
font-size: 15px;
text-transform: capitalize;
border-radius: 4px;
border: 1px solid #00ACED;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.myform-area .form-area .form-content .twitter:hover, .myform-area .form-area .form-content .twitter:focus {
background: transparent;
}
.myform-area .form-area .form-input {
background-color: white;
position: relative;
overflow: hidden;
box-shadow: 0 0 40px 0 #e1e1e1;
}
.myform-area .form-area .form-input {
width: 50%;
background: #fff;
padding: 40px 30px;
}
.myform-area .form-area .form-input h2 {
margin-bottom: 20px;
color: #07315B;
}
.myform-area .form-area .form-input input {
position: relative;
height: 60px;
padding: 20px 0;
}
.myform-area .form-area .form-input textarea {
height: 120px;
padding: 20px 0;
}
.myform-area .form-area .form-input input, .myform-area .form-area .form-input textarea {
text-transform: capitalize;
width: 100%;
box-sizing: border-box;
outline: none;
border: none;
border-bottom: 2px solid #e1e1e1;
color: #07315B;
}
.myform-area .form-area .form-input form .form-group {
position: relative;
}
.myform-area .form-area .form-input form .form-group label {
position: absolute;
text-transform: capitalize;
top: 20px;
left: 0;
pointer-events: none;
font-size: 14px;
color: #595959;
margin-bottom: 0;
transition: all .6s;
}
.myform-area .form-area .form-input input:focus~label, .myform-area .form-area .form-input textarea:focus~label, .myform-area .form-area .form-input input:valid~label, .myform-area .form-area .form-input textarea:valid~label {
top: -5px;
opacity: 0;
left: 0;
color: rgba(103, 58, 183);
font-size: 12px;
color: #07315B;
font-weight: bold;
}
.myform-area .form-area .form-input input:focus, .myform-area .form-area .form-input textarea:focus, .myform-area .form-area .form-input input:valid, .myform-area .form-area .form-input textarea:valid {
border-bottom: 2px solid rgba(103, 58, 183);
}
.myform-area .form-area .form-text {
margin-top: 30px;
}
.myform-area .form-area .form-text span a {
color: rgba(103, 58, 183);
}
.myform-area .form-area .myform-button {
margin-top: 30px;
}
.myform-area .form-area .myform-button .myform-btn {
width: 100%;
height: 50px;
font-size: 17px;
background: rgba(103, 58, 183);
border: none;
border-radius: 50px;
color: #fff;
outline: none;
cursor: pointer;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.myform-area .form-area .myform-button .myform-btn:hover {
background: #07315B;
}
.signup-text {
padding-bottom: 5px;
padding-left: 18%;
}
.signUPtext {
color: green;
position: relative;
left: 50%;
top: -27px;
padding-right: 10px;
cursor: pointer;
}
.signUPtext:hover {
color: rgb(71, 158, 71);
}
.loginInfo{
margin-left:5px;
}
================================================
FILE: frontend/src/components/Login-Signup/loginFunctions.js
================================================
import axios from 'axios'
export function logUserIn(userCredentials) {
let apiUrl = 'http://localhost:8080/login'
return axios.post(apiUrl,userCredentials, {
headers: {
'Content-Type': 'application/json'
}
})
}
export function loadRoutes(){
const authToken = sessionStorage.getItem('authToken' || '')
let apiUrl = `http://localhost:8080/user/profile?secret_token=${authToken}`
return axios.get(apiUrl)
}
export function getCurrentUserDetails(authToken){
const token = authToken
let apiUrl = `http://localhost:8080/user/profile?secret_token=${token}`
return axios.get(apiUrl)
}
================================================
FILE: frontend/src/components/Login-Signup/signup.css
================================================
.container {
width: 100vw;
height: 100vh;
background-size: cover;
}
.form-container-in {
box-shadow: 0 0 40px 0 #000000;
}
.form-container-in {
position: absolute;
background-color: rgba(245, 245, 245, 0.486);
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.9;
}
.log-container {
text-align: center;
}
.flex-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
/*centers items on the line (the x-axis by default)*/
align-items: center;
}
p.lead {
padding: 5px 10px;
position: relative;
z-index: 10;
}
.row.full {
width: 80%;
}
.right-divider {
background: rgba(103, 58, 183, 0.7);
padding-top: 30px;
}
.left-divider {
border-left: solid 1px rgb(3, 4, 5);
width: 50%;
background: white;
padding-top: 30px;
padding-left: 20px;
}
.lead-text {
text-align: center;
padding: 15px 10px;
font-weight: 300;
font-size: 1.8em;
line-height: 15px;
letter-spacing: 1px;
text-transform: uppercase;
}
/* social */
#social-media {
position: relative;
top: 100px;
top: 25vh;
font-size: 1rem;
text-align: center;
overflow: hidden;
}
.btnn {
width: 100%;
clear: both;
white-space: nowrap;
font-size: .8em;
display: block;
border-radius: 5px;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);
margin: 2px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
overflow: hidden
}
.btnn:hover {
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.45);
}
.btnn:focus {
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.4);
}
.btnn>span, .btnn-icon>i {
float: left;
padding: 13px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
line-height: 1em
}
.btnn>span {
padding: 14px 18px 16px;
white-space: nowrap;
color: #FFF;
background: #b8b8b8
}
.btnn:hover>span {
color: #212121;
font-weight: 900;
}
.btnn:focus>span {
background: #9a9a9a
}
.btnn-icon>i {
border-radius: 5px 0 0 5px;
position: relative;
width: 20px;
text-align: center;
font-size: 1.25em;
color: #fff;
background: #212121
}
.btnn-icon>i:after {
content: "";
border: 8px solid;
border-color: transparent transparent transparent #222;
position: absolute;
top: 13px;
right: -15px
}
.btnn-icon:hover>i, .btnn-icon:focus>i {
color: #FFF;
}
.btnn-icon>span {
border-radius: 0 5px 5px 0
}
/*Facebook*/
.icon-soc-fb {
display: block;
padding: 8px 100px;
background: #3B579D;
color: #fff;
margin-top: 20px;
margin-left: 25px;
font-size: 20px;
text-transform: capitalize;
border-radius: 4px;
text-align: center;
border: 1px solid #3B579D;
width: 80%;
transition: all .5s;
}
.icon-soc-fb:hover {
background: transparent;
}
.icon-soc-tw {
display: block;
padding: 8px 100px;
background: rgb(93, 153, 223);
color: #fff;
margin-top: 20px;
margin-left: 25px;
font-size: 20px;
text-transform: capitalize;
border-radius: 4px;
text-align: center;
border: 1px solid #3B579D;
width: 80%;
transition: all .5s;
}
.icon-soc-tw:hover {
background: transparent;
}
.media-container {
padding: 5px 20px;
}
input.form-submit {
padding: 5px 20px;
font-size: 1.3em;
font-weight: 300;
text-transform: capitalize;
margin-top: 30px;
}
.form-group2 {
width: 20em;
padding-left: 20px;
}
.rd {
padding-left: 20px;
padding-bottom: 10px;
padding-top: 2px;
}
.rd>input {
padding-left: 20px;
}
.mn-txt {
margin-bottom: 100px;
color: white;
font-size: 30px;
}
.link-text {
padding-bottom: 5px;
padding-left: 50%;
}
.signuptext {
color: green;
position: relative;
left: 100%;
top: -27px;
padding-right: 10px;
cursor: pointer;
}
.signuptext:hover {
color: rgb(71, 158, 71);
}
.sub-btn {
background: rgba(103, 58, 183);
border-color: rgba(103, 58, 183);
}
.sub-btn:hover {
background: #07315B;
}
.female-radio {
padding-left: 20px;
}
.sgnUp {
margin-left: 0;
}
.pdding{
padding-left:0;
}
================================================
FILE: frontend/src/components/PaymentTab/PaymentTab.css
================================================
.paym {
/* border:1px solid white; */
height: auto;
background-color: #00abeeb0;
}
.App-payment {
padding: 10px 30px;
text-align: center;
margin-top: 20px;
border: 1px solid white;
background-color: rgba(255, 255, 255, 0.603);
border-radius: 5px;
margin-bottom:20px;
padding-bottom:30px;
}
.credit-form {
margin-top: 31px;
max-width: 400px;
margin-right: 19px;
}
.actionButton {
margin-top: 15px;
}
.frm-ctrl {
border-radius: 5px;
width: 80%;
height: 38px;
padding: 0px 5px;
text-align: center;
}
.cl1 {
float: left;
width: 60%;
}
.columnTwo {
float: right;
width: 54%;
padding: 10px;
margin: 0;
text-align: center;
margin-left: 43px;
border: 1px solid rgb(255, 255, 255);
background-color: rgba(255, 255, 255, 0.603);
height: fit-content;
margin-top: 20px;
border-radius: 5px;
margin-bottom:20px;
}
.btCustom {
width: 62%;
margin-left: 17px;
}
.pPayment {
text-transform: uppercase;
font-weight: 900;
font-size: larger;
}
.cvc {
width: 57px;
margin-left: 27px;
text-align: center;
}
.pt{
padding-left:0;
}
.usrName{
text-transform: capitalize;
}
.hdng{
font-weight: bold;
}
.hr1{
background-color: black;
width:38%;
position:absolute;
left:51%;
top:37%;
}
.hr2{
background-color: black;
width:38%;
position:absolute;
left:51%;
top:55%;
}
.hr3{
background-color: rgba(94, 91, 91, 0.685);
}
================================================
FILE: frontend/src/components/PaymentTab/PaymentTab.js
================================================
import React from 'react'
import Card from 'react-credit-cards'
import './PaymentTab.css'
import jwt_decode from 'jwt-decode'
import {
formatCreditCardNumber,
formatCVC,
formatExpirationDate,
formatFormData
} from './utils'
import 'react-credit-cards/es/styles-compiled.css'
export default class App extends React.Component {
state = {
number: '',
name: '',
expiry: '',
cvc: '',
issuer: '',
focused: '',
formData: '',
token: ''
}
componentDidMount() {
const tok = sessionStorage.getItem('authToken')
const decoded = jwt_decode(tok)
this.setState({ token: decoded.user })
}
handleCallback = ({ issuer }, isValid) => {
if (isValid) {
this.setState({ issuer })
}
}
handleInputFocus = ({ target }) => {
this.setState({
focused: target.name
})
}
handleInputChange = ({ target }) => {
if (target.name === 'number') {
target.value = formatCreditCardNumber(target.value)
} else if (target.name === 'expiry') {
target.value = formatExpirationDate(target.value)
} else if (target.name === 'cvc') {
target.value = formatCVC(target.value)
}
this.setState({
[target.name]: target.value
})
}
handleSubmit = e => {
e.preventDefault()
const { issuer } = this.state
const formData = [...e.target.elements]
.filter(d => d.name)
.reduce((acc, d) => {
acc[d.name] = d.value
return acc
}, {})
this.setState({ formData })
this.form.reset()
}
moveToTicketPage = e => {
e.preventDefault()
localStorage.setItem('paymentData', JSON.stringify(this.state.token))
window.location.href = '/getTicket'
}
renderNamesOfPassenger = () => {
let passArray = localStorage.getItem('nameData')
if (passArray) {
let nameArray = JSON.parse(passArray)
return nameArray.map((name, idx) => {
return <p key = { idx } > { name } < /p>
})
}
}
renderSeatNumbers = () => {
let seatArray = localStorage.getItem('reservedSeats')
if (seatArray) {
let seaArr = JSON.parse(seatArray)
return seaArr.map((seat, idx) => {
return <p key = { idx } > { seat } < /p>
})
}
}
getSumTotal = () => {
let count = 0
let tax = 150
let seatArray = localStorage.getItem('reservedSeats')
if (seatArray) {
let seaArr = JSON.parse(seatArray)
for (let i = 0; i < seaArr.length; i++) {
count++
}
return ( <
div >
<
hr className = 'hr3' / >
<
p > { 1000 * count } < /p> <p> +{tax} </p > < p > { 1000 * count + tax } < /p>{' '} <
/div>
)
}
}
render() {
const {
name,
number,
expiry,
cvc,
focused,
issuer,
formData,
token
} = this.state
return ( <
div className = 'paym' >
<
div className = 'row' >
<
div key = 'Payment' >
<
div className = 'App-payment cl-1' >
<
p className = 'pPayment' > Enter Credit card details < /p>{' '} <
Card number = { number }
name = { name }
expiry = { expiry }
cvc = { cvc }
focused = { focused }
callback = { this.handleCallback }
/>{' '} <
form className = 'credit-form'
ref = { c => (this.form = c) }
onSubmit = { this.handleSubmit } >
<
div className = 'form-group' >
<
input type = 'tel'
name = 'number'
className = 'frm-ctrl'
placeholder = 'Card Number'
pattern = '[\d| ]{16,22}'
required onChange = { this.handleInputChange }
onFocus = { this.handleInputFocus }
/>{' '} <
/div>{' '} <
div className = 'form-group' >
<
input type = 'text'
name = 'name'
className = 'frm-ctrl'
placeholder = 'Name'
required onChange = { this.handleInputChange }
onFocus = { this.handleInputFocus }
/>{' '} <
/div>{' '} <
div className = 'form-group' >
<
input type = 'tel'
name = 'expiry'
className = 'frm-ctrl'
placeholder = 'Valid Thru'
pattern = '\d\d/\d\d'
required onChange = { this.handleInputChange }
onFocus = { this.handleInputFocus }
/>{' '} <
/div>{' '} <
div className = 'form-group' >
<
input type = 'tel'
name = 'cvc'
className = 'frm-ctrl cvc'
placeholder = 'CVC'
pattern = '\d{3,4}'
required onChange = { this.handleInputChange }
onFocus = { this.handleInputFocus }
/>{' '} <
/div>{' '} <
input type = 'hidden'
name = 'issuer'
value = { issuer }
/>{' '} <
div className = '' >
<
button onClick = { e => this.moveToTicketPage(e) }
className = 'btn btn-light btCustom' >
PAY { ' ' } <
/button>{' '} <
/div>{' '} <
/form>{' '} <
/div>{' '} <
/div>{' '} <
div className = 'columnTwo' >
<
h3 > Unique Travels < /h3>{' '} <
div >
<
p > BOOKING DETAILS < /p>{' '} <
div className = 'row' >
<
div className = 'col-6 pt' >
<
p className = 'hdng' > Username < /p> <hr className='hr3' / >
<
p className = 'hdng' > Date < /p> <p className='hdng'> From </p >
<
p className = 'hdng' > To < /p> <hr className='hr3' / >
<
p className = 'hdng' > Passengers < /p>{' '} { this.renderNamesOfPassenger() } < hr className = 'hr3' / >
<
p className = 'hdng' > Ticket price < /p>{' '} <
p className = 'hdng' > Tax < /p>{' '} <
p className = 'hdng' > Toal Sum < /p>{' '} <
/div>{' '} <
div className = 'col-6' >
<
hr className = 'hr3' / >
<
p className = 'usrName' > { ' ' } { localStorage.getItem('date') } { ' ' } <
/p>{' '} <
p className = 'usrName' > { localStorage.getItem('start') } < /p>{' '} <
p className = 'usrName' > { ' ' } { localStorage.getItem('destination') } { ' ' } <
/p>{' '} <
hr className = 'hr3' / >
<
p className = 'hdng' >
Seat No { ' ' } <
/p> {this.renderSeatNumbers()} <p> {this.getSumTotal()} </p >
<
/div>{' '} <
/div>{' '} <
/div>{' '} <
/div>{' '} <
/div>{' '} <
/div>
)
}
}
================================================
FILE: frontend/src/components/PaymentTab/utils.js
================================================
import Payment from "payment";
function clearNumber(value = "") {
return value.replace(/\D+/g, "");
}
export function formatCreditCardNumber(value) {
if (!value) {
return value;
}
const issuer = Payment.fns.cardType(value);
const clearValue = clearNumber(value);
let nextValue;
switch (issuer) {
case "amex":
nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(
4,
10
)} ${clearValue.slice(10, 15)}`;
break;
case "dinersclub":
nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(
4,
10
)} ${clearValue.slice(10, 14)}`;
break;
default:
nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(
4,
8
)} ${clearValue.slice(8, 12)} ${clearValue.slice(12, 19)}`;
break;
}
return nextValue.trim();
}
export function formatCVC(value, prevValue, allValues = {}) {
const clearValue = clearNumber(value);
let maxLength = 4;
if (allValues.number) {
const issuer = Payment.fns.cardType(allValues.number);
maxLength = issuer === "amex" ? 4 : 3;
}
return clearValue.slice(0, maxLength);
}
export function formatExpirationDate(value) {
const clearValue = clearNumber(value);
if (clearValue.length >= 3) {
return `${clearValue.slice(0, 2)}/${clearValue.slice(2, 4)}`;
}
return clearValue;
}
export function formatFormData(data) {
return Object.keys(data).map(d => `${d}: ${data[d]}`);
}
================================================
FILE: frontend/src/components/Profile/Profile.js
================================================
import React, { useState, useEffect } from 'react'
import './profile.css'
import jwt_decode from 'jwt-decode'
export default function Profile({ history }) {
const [token, setToken] = useState({})
useEffect(() => {
const tok = sessionStorage.getItem('authToken')
const decoded = jwt_decode(tok)
setToken(decoded.user)
}, [])
const goBackToRoutes = e => {
e.preventDefault()
history.push('/routes')
}
return ( <
div className = 'container' >
<
section className = 'profile' >
<
header className = 'header' >
<
div className = 'details' >
<
img src = 'https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b38c22a46932485790a3f52c61fcbe5a'
alt = 'John Doe'
className = 'profile-pic' /
>
<
h1 className = 'heading' > { token?.name } < /h1>{' '} <
div className = 'location' >
<
svg class = 'svg-icon'
width = '18'
height = '18'
viewBox = '0 0 24 24'
fill = 'currentColor' >
<
path d = 'M17.388,4.751H2.613c-0.213,0-0.389,0.175-0.389,0.389v9.72c0,0.216,0.175,0.389,0.389,0.389h14.775c0.214,0,0.389-0.173,0.389-0.389v-9.72C17.776,4.926,17.602,4.751,17.388,4.751 M16.448,5.53L10,11.984L3.552,5.53H16.448zM3.002,6.081l3.921,3.925l-3.921,3.925V6.081z M3.56,14.471l3.914-3.916l2.253,2.253c0.153,0.153,0.395,0.153,0.548,0l2.253-2.253l3.913,3.916H3.56z M16.999,13.931l-3.921-3.925l3.921-3.925V13.931z' > { ' ' } <
/path>{' '} <
/svg>{' '} <
p > { token?.email } < /p>{' '} <
/div> <
div className = 'stats' >
<
div className = 'col-4' >
<
h4 > 20 < /h4> <p> Reviews </p > { ' ' } <
/div>{' '} <
div className = 'col-4' >
<
h4 > 10 < /h4> <p> Bookings </p > { ' ' } <
/div>{' '} <
div className = 'col-4' >
<
h4 > 5 < /h4> <p> 5 - Star </p > { ' ' } <
/div>{' '} <
/div>{' '} <
div className = 'stat2' >
<
div className = 'col-12' >
<
button className = 'btn btn-dark bck'
onClick = { e => goBackToRoutes(e) } >
GO BACK { ' ' } <
/button>{' '} <
/div>{' '} <
/div>{' '} <
/div>{' '} <
/header>{' '} <
/section>{' '} <
/div>
)
}
================================================
FILE: frontend/src/components/Profile/profile.css
================================================
@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
body {
margin: 0;
font-family: 'Lato', sans-serif;
}
.profile {
padding: 30px 30px;
}
.header {
min-height: 60vh;
background: rgba(36, 132, 192, 0.637);
background: linear-gradient(to right, rgba(236, rgba(162, 0, 255, 0.719), 0.658), #009FFF);
color: white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.45);
}
.details {
text-align: center;
}
.profile-pic {
height: 6rem;
width: 6rem;
object-fit: center;
border-radius: 50%;
border: 2px solid #fff;
}
.location p {
display: inline-block;
}
.location svg {
vertical-align: middle;
}
.stats {
display: flex;
}
.stats .col-4 {
width: 10rem;
text-align: center;
}
.heading {
font-weight: 400;
font-size: 1.3rem;
margin: 1rem 0;
text-transform: uppercase;
}
.stat2 {
display: flex;
}
.stats .col-12 {
width: 10rem;
text-align: center;
}
.bck {
background-color: rgba(36, 104, 192, 0.637) !important;
}
================================================
FILE: frontend/src/components/RouteSelection/RouteSelection.css
================================================
.ic .li a {
cursor: pointer;
}
.routePicker {
padding: 30px 18px;
}
.dropdown>.dropdown-menu {
top: 200%;
transition: 0.3s all ease-in-out;
}
.dropdown:hover>.dropdown-menu {
display: block;
top: 100%;
}
.dropdown>.dropdown-toggle:active {
pointer-events: none;
}
================================================
FILE: frontend/src/components/RouteSelection/RouteSelection.js
================================================
import React from 'react'
import RouteSelector from '../routeSelector/Routeselector'
import SeatSelection from '../SeatSelection/SeatSelection'
import PaymentTab from '../PaymentTab/PaymentTab'
export default function RouteSelection({ history }) {
const handleUserIcon = e => {
e.preventDefault()
history.push('/profile')
}
const handleSignOut = e => {
e.preventDefault()
sessionStorage.removeItem('authToken')
localStorage.removeItem('reservedSeats')
localStorage.removeItem('nameData')
localStorage.clear()
history.push('/')
}
const handleLogoClick = e => {
e.preventDefault()
history.push('/routes')
}
return (
<div className="container">
<div>
<nav className="mb-4 navbar navbar-expand-lg navbar-dark bg-unique hm-gradient">
<a href="/#" className="navbar-brand Company-Log" onClick={(e) => handleLogoClick(e)}>UT</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-3" aria-controls="navbarSupportedContent-3" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent-3">
<ul className="navbar-nav ml-auto nav-flex-icons ic">
<li className="nav-item">
<a href="/#" className="nav-link waves-effect waves-light" onClick={e => handleUserIcon(e)}><i className="fa fa-user user"></i></a>
</li>
<li className="nav-item">
<a href="/#" className="nav-link waves-effect waves-light" onClick={e => handleSignOut(e)}>Sign-Out</a>
</li>
</ul>
</div>
</nav>
</div>
<div>
<ul className="nav nav-pills">
<li className="nav-item">
<a className="nav-link active" data-toggle="pill" href="#home">Select Bus</a>
</li>
<li className="nav-item">
<a className="nav-link " data-toggle="pill" href="#menu1">Select Seat</a>
</li>
<li className="nav-item">
<a className="nav-link" data-toggle="pill" href="#menu2">Payment</a>
</li>
</ul>
<div className="tab-content">
<div className="tab-pane container active mn-box" id="home"><RouteSelector /></div>
<div className="tab-pane container fade mn-box" id="menu1"><SeatSelection /></div>
<div className="tab-pane container fade mn-box" id="menu2"><PaymentTab /></div>
</div>
</div>
</div>
)
}
================================================
FILE: frontend/src/components/SeatSelection/SeatSelection.js
================================================
import React, { useState } from 'react'
import { FaAngleDoubleDown } from "react-icons/fa";
import './Tab.css'
export default function SeatSelection() {
const [name, setName] = useState([])
const [arrowDown, setArrowDown] = useState(false)
const [gender, setGender] = useState([])
const [reservedSeat, setReservedSeat] = useState(["1A", "2A", "2B", "3B", "4A", "5C", "6A", "7B", "7C", '8B', "9B", "9C"])
const [seatNumber, setSeatnumber] = useState([])
// const [passengers, setPassengers] = useState([])
// useEffect(()=>{
// let bId = localStorage.getItem('selectedBusId')
// if(bId){
// getSeatArray(bId)
// }
// else return
// },[localStorage])
// const getSeatArray = async bId => {
// const baseURL = "http://localhost:8080/booking/"
// await axios.get(baseURL, bId)
// .this(response=>response.data)
// .this(data=>{
// setReservedSeat(data)
// console.log(reservedSeat)
// })
// }
const getSeatNumber = (e) => {
renderPassengerData(seatNumber)
let newSeat = e.target.value
if (reservedSeat.includes(newSeat)) {
e.disabled = true
if (seatNumber.includes(newSeat)) {
setSeatnumber(seatNumber.filter(seat => seat !== newSeat))
}
} else {
setSeatnumber([...seatNumber, newSeat])
setReservedSeat([...reservedSeat, newSeat])
console.log(seatNumber)
}
}
const handleGender = (e, seatNo) => {
const { value } = e.target
setGender(gender.concat(value))
// console.log(value)
// setPassengers(prevState => ({ ...prevState, SeatNo: seatNo, Gender: value }))
}
const handlePassengerName = (e, seatNo) => {
e.preventDefault()
let value = e.target.value
// console.log(value)
if (!value) {
return (setName("name is required"))
} else {
setName(name.concat(value))
// setPassengers(prevState => ({ ...prevState, SeatNo: seatNo, Name: value }))
}
}
const handleSubmitDetails = e => {
e.preventDefault()
setArrowDown(true)
localStorage.setItem("reservedSeats", JSON.stringify(seatNumber))
localStorage.setItem("nameData", JSON.stringify(name))
console.log(name)
console.log(gender)
}
const renderPassengerData = (seatArray) => {
return seatArray.map((seat, idx) => {
return (
<form key={idx} className="form seatfrm">
<p class="text-capitalize text-center">Seat No:{seat}</p>
<input className="form-control seatInp" onBlur={e => handlePassengerName(e, seat)} type="text" name="passenger-name" placeholder="Enter Name" />
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="male" value="Male" onClick={e => handleGender(e, seat)} />
<label class="form-check-label" for="male">Male</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="female" value="Female" onClick={e => handleGender(e, seat)} />
<label class="form-check-label" htmlFor="female">Female</label>
</div>
</form>)
})
}
return (
<div className="ss">
<div className="row">
<div className="column1">
<div className="plane">
<form onChange={e => getSeatNumber(e)}>
<ol className="cabin fuselage">
<li className="row row--1">
<ol className="seats" type="A">
<li className="seat">
<input type="checkbox" disabled value="1A" id="1A" />
<label htmlFor="1A">1A</label>
</li>
<li className="seat">
<input type="checkbox" id="1B" value="1B" />
<label htmlFor="1B">1B</label>
</li>
<li className="seat">
<input type="checkbox" value="1C" id="1C" />
<label htmlFor="1C">1C</label>
</li>
</ol>
</li>
<li className="row row--2">
<ol className="seats" type="A">
<li className="seat">
<input type="checkbox" disabled value="2A" id="2A" />
<label htmlFor="2A">2A</label>
</li>
<li className="seat">
<input type="checkbox" disabled value="2B" id="2B" />
<label htmlFor="2B">2B</label>
</li>
<li className="seat">
<input type="checkbox" value="2C" id="2C" />
<label htmlFor="2C">2C</label>
</li>
</ol>
</li>
<li className="row row--3">
<ol className="seats" type="A">
<li className="seat">
<input type="checkbox" value="3A" id="3A" />
<label htmlFor="3A">3A</label>
</li>
<li className="seat">
<input type="checkbox" disabled value="3B" id="3B" />
<label htmlFor="3B">3B</label>
</li>
<li className="seat">
<input type="checkbox" value="3C" id="3C" />
<label htmlFor="3C">3C</label>
</li>
</ol>
</li>
<li className="row row--4">
<ol className="seats" type="A">
<li className="seat">
<input type="checkbox" disabled value="4A" id="4A" />
<label htmlFor="4A">4A</label>
</li>
<li className="seat">
<input type="checkbox" value="4B" id="4B" />
<label htmlFor="4B">4B</label>
</li>
<li className="seat">
<input type="checkbox" value="4C" id="4C" />
<label htmlFor="4C">4C</label>
</li>
</ol>
</li>
<li className="row row--5">
<ol className="seats" type="A">
<li className="seat">
<input type="checkbox" value="5A" id="5A" />
<label htmlFor="5A">5A</label>
</li>
<li className="seat">
<input type="checkbox" value="5B" id="5B" />
<label htmlFor="5B">5B</label>
</li>
<li className="seat">
<input type="checkbox" disabled value="5C" id="5C" />
<label htmlFor="5C">5C</label>
</li>
</ol>
</li>
<li className="row row--6">
<ol className="seats" type="A">
<li className="seat">
<input type="checkbox" disabled value="6A" id="6A" />
<label htmlFor="6A">6A</label>
</li>
<li className="seat">
<input type="checkbox" value="6B" id="6B" />
<label htmlFor="6B">6B</label>
</li>
<li className="seat">
<input type="checkbox" value="6C" id="6C" />
<label htmlFor="6C">6C</label>
</li>
</ol>
</li>
<li className="row row--7">
<ol className="seats" type="A">
<li className="seat">
<input type="checkbox" value="7A" id="7A" />
<label htmlFor="7A">7A</label>
</li>
<li className="seat">
<input type="checkbox" disabled value="7B" id="7B" />
<label htmlFor="7B">7B</label>
</li>
<li className="seat">
<input type="checkbox" disabled value="7C" id="7C" />
<label htmlFor="7C">7C</label>
</li>
</ol>
</li>
<li className="row row--8">
<ol className="seats" type="A">
<li className="seat">
<input type="checkbox" value="8A" id="8A" />
<label htmlFor="8A">8A</label>
</li>
<li className="seat">
<input type="checkbox" disabled value="8B" id="8B" />
<label htmlFor="8B">8B</label>
</li>
<li className="seat">
<input type="checkbox" value="8C" id="8C" />
<label htmlFor="8C">8C</label>
</li>
</ol>
</li>
<li className="row row--9">
<ol className="seats" type="A">
<li className="seat">
<input type="checkbox" value="9A" id="9A" />
<label htmlFor="9A">9A</label>
</li>
<li className="seat">
<input type="checkbox" disabled value="9B" id="9B" />
<label htmlFor="9B">9B</label>
</li>
<li className="seat">
<input type="checkbox" disabled value="9C" id="9C" />
<label htmlFor="9C">9C</label>
</li>
</ol>
</li>
<li className="row row--10">
<ol className="seats" type="A">
<li className="seat">
<input type="checkbox" value="10A" id="10A" />
<label htmlFor="10A">10A</label>
</li>
<li className="seat">
<input type="checkbox" value="10B" id="10B" />
<label htmlFor="10B">10B</label>
</li>
<li className="seat">
<input type="checkbox" value="10C" id="10C" />
<label htmlFor="10C">10C</label>
</li>
</ol>
</li>
</ol>
</form>
</div>
</div>
<div className="column2">
<div className="seatInfo">
<form className="form-group">
{renderPassengerData(seatNumber)}
</form>
<div>
<button onClick={e => handleSubmitDetails(e)} className="btn btn-info seatBT">
Confirm Details
</button>
</div>
<div className={arrowDown ? "activeArrow2" : "nonActive"}>
<FaAngleDoubleDown />
</div>
</div>
</div>
</div>
</div>
)
}
================================================
FILE: frontend/src/components/SeatSelection/Tab.css
================================================
*, *:before, *:after {
box-sizing: border-box;
}
html {
font-size: 16px;
}
.plane {
margin: 50px 0px;
max-width: 300px;
background-color: rgba(255, 255, 255, 0.534);
border-radius:5px;
}
.fuselage {
border: 1px solid #d8d8d8;
}
ol {
list-style: none;
padding: 0;
margin: 0;
}
.seats {
display: flex;
justify-content: space-around;
flex-direction: row;
flex-wrap: nowrap;
width: 800px;
}
.seat {
display: flex;
flex: 0 0 14.2857142857%;
padding: 5px;
position: relative;
}
.seat:nth-child(3) {
margin-right: 14.2857142857%;
}
.seat input[type=checkbox] {
position: absolute;
opacity: 0;
}
.seat input[type=checkbox]:checked+label {
background: #bada55;
color: black;
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
animation-duration: 300ms;
animation-fill-mode: both;
}
.seat input[type=checkbox]:disabled+label {
background: rgb(212, 112, 112);
text-indent: -9999px;
overflow: hidden;
}
.seat input[type=checkbox]:disabled+label:after {
content: "X";
text-indent: 0;
position: absolute;
top: 4px;
left: 50%;
transform: translate(-50%, 0%);
}
.seat input[type=checkbox]:disabled+label:hover {
box-shadow: none;
cursor: not-allowed;
}
.seat label {
display: block;
position: relative;
width: 100%;
text-align: center;
font-size: 14px;
font-weight: bold;
line-height: 1.5rem;
padding: 4px 0;
background: #00771a;
border-radius: 5px;
animation-duration: 300ms;
animation-fill-mode: both;
color: white;
}
.seat label:before {
content: "";
position: absolute;
width: 75%;
height: 75%;
top: 1px;
left: 50%;
transform: translate(-50%, 0%);
background: rgba(255, 255, 255, 0.4);
border-radius: 3px;
}
.seat label:hover {
cursor: pointer;
box-shadow: 0 0 0px 2px #7d86eb;
}
@-webkit-keyframes rubberBand {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes rubberBand {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
.column1 {
float: left;
width: 40%;
}
.column2 {
float: left;
width: 55%;
padding: 0;
margin: 0;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.ss {
/* width: auto; */
width: 100%;
border: 1px solid #00acee;
background-color: #00abeeb0;
}
.seatInfo {
/* position: relative; */
left:-50px;
margin-top:49px;
border: 1px solid white;
height: auto;
border-radius: 5px;
}
.seatfrm{
border:1px solid white;
}
.seatInp{
margin-right:-8px;
width:50%;
}
.form-check{
margin-left: 32px;
margin-top:5px;
}
.seatBT{
display:block;
margin-left:36%;
}
.hideBT{
display:none;
}
.activeArrow2 {
color: rgb(0, 63, 0);
position: absolute;
margin-top:50px;
left: 370px;
animation: bounce 0.5s infinite linear;
}
@-webkit-keyframes bounce {
0% {
top: 0;
}
50% {
top: -0.2em;
}
70% {
top: -0.3em;
}
100% {
top: 0;
}
}
@-moz-keyframes bounce {
0% {
top: 0;
}
50% {
top: -0.2em;
}
70% {
top: -0.3em;
}
100% {
top: 0;
}
}
@-o-keyframes bounce {
0% {
top: 0;
}
50% {
top: -0.2em;
}
70% {
top: -0.3em;
}
100% {
top: 0;
}
}
@-ms-keyframes bounce {
0% {
top: 0;
}
50% {
top: -0.2em;
}
70% {
top: -0.3em;
}
100% {
top: 0;
}
}
@keyframes bounce {
0% {
top: 0;
}
50% {
top: -0.2em;
}
70% {
top: -0.3em;
}
100% {
top: 0;
}
}
================================================
FILE: frontend/src/components/TicketPage/TicketPage.css
================================================
.tpMain {
width: 100%;
padding: 2px 100px;
height: 500px;
margin-left: 220px;
}
*, *::after {
box-sizing: border-box;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
color: #454f54;
background-color: #f4f5f6;
background-image: linear-gradient(to bottom left, #abb5ba, #d5dadd);
}
.ticket {
display: grid;
grid-template-rows: auto 1fr auto;
max-width: 24rem;
}
.ticket__header, .ticket__body, .ticket__footer {
padding: 1rem;
background-color: #fff;
border: 1px solid #abb5ba;
box-shadow: 0 2px 4px rgba(41, 54, 61, 0.25);
}
.ticket__header {
font-size: 1.3rem;
border-top: 0.25rem solid #dc143c;
border-bottom: none;
box-shadow: none;
padding: 20px 80px;
}
.ticket__wrapper {
box-shadow: 0 2px 4px rgba(41, 54, 61, 0.25);
border-radius: 0.375em 0.375em 0 0;
overflow: hidden;
}
.ticket__divider {
position: relative;
height: 1rem;
background-color: #fff;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.ticket__divider::after {
content: '';
position: absolute;
height: 50%;
width: 100%;
top: 0;
border-bottom: 2px dashed #e9ebed;
}
.ticket__notch {
position: absolute;
left: -0.5rem;
width: 1rem;
height: 1rem;
overflow: hidden;
}
.ticket__notch::after {
content: '';
position: relative;
display: block;
width: 2rem;
height: 2rem;
right: 100%;
top: -50%;
border: 0.5rem solid #fff;
border-radius: 50%;
box-shadow: inset 0 2px 4px rgba(41, 54, 61, 0.25);
}
.ticket__notch--right {
left: auto;
right: -0.5rem;
}
.ticket__notch--right::after {
right: 0;
}
.ticket__body {
border-bottom: none;
border-top: none;
}
.ticket__body>*+* {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #e9ebed;
}
.ticket__section>*+* {
margin-top: 0.25rem;
}
.ticket__section>h3 {
font-size: 1.125rem;
margin-bottom: 0.5rem;
}
.ticket__header {
font-weight: bold;
font-size: 1.25rem;
}
.ticket__footer {
border-top: 2px dashed #e9ebed;
border-radius: 0 0 0.325rem 0.325rem;
font-size:1.25rem;
}
.seatNo {
display: inline-block;
}
.names{
text-transform: capitalize;
}
.idData{
font-size:15px;
text-transform: uppercase;
}
================================================
FILE: frontend/src/components/TicketPage/TicketPage.js
================================================
import React from 'react'
import './TicketPage.css'
export default function TicketPage({ history }) {
const handleSignOut = e => {
e.preventDefault()
sessionStorage.removeItem('authToken')
localStorage.removeItem('reservedSeats')
localStorage.removeItem('nameData')
localStorage.clear()
history.push('/')
}
const handleBookAgainIcon = e => {
e.preventDefault()
history.push('/routes')
}
const getLocationData = () => {
let from = localStorage.getItem("start")
let to = localStorage.getItem("destination")
return (
<div>
<p>From: {from}</p>
<p>To: {to}</p>
</div>
)
}
const getPassengerName = () => {
let nameArray = localStorage.getItem("nameData")
let names = JSON.parse(nameArray)
return names.map((name, idx) => {
return (
<div key={idx}>
<p className="names">{name}</p>
</div>
)
})
}
const getSeatNumbers = () => {
let noArray = localStorage.getItem("reservedSeats")
let arr = JSON.parse(noArray)
return arr.map((element, idx) => {
return (
<div key={idx}>
<p classsName="seatNo">{element}</p>
</div>
)
})
}
const getIdNumber = () => {
let tokenData = localStorage.getItem("selectedBusId")
return (
<p className="idData">
{tokenData}
</p>
)
}
const getDateValue = () => {
let dat = localStorage.getItem("date")
return <p>On: {dat}, 10 AM (Hourly commute)</p>
}
return (
<div className="container">
<div>
<nav className="mb-4 navbar navbar-expand-lg navbar-dark bg-unique hm-gradient">
<a href="/#" className="navbar-brand Company-Log">UT</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-3" aria-controls="navbarSupportedContent-3" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent-3">
<ul className="navbar-nav ml-auto nav-flex-icons ic">
<li className="nav-item">
<a href="/#" className="nav-link waves-effect waves-light" onClick={e => handleBookAgainIcon(e)}>Book Again</a>
</li>
<li className="nav-item">
<a href="/#" className="nav-link waves-effect waves-light" onClick={e => handleSignOut(e)}>Sign-Out</a>
</li>
</ul>
</div>
</nav>
</div>
<div className="tpMain">
<article className="ticket">
<header className="ticket__wrapper">
<div className="ticket__header">
1 🎟 UNIQUE TRAVELS
</div>
</header>
<div className="ticket__divider">
<div className="ticket__notch"></div>
<div className="ticket__notch ticket__notch--right"></div>
</div>
<div className="ticket__body">
<section className="ticket__section">
{getLocationData()}
{getSeatNumbers()}
<p>Your seats are together <span>{getDateValue()}</span></p>
</section>
<section className="ticket__section">
<h3>Passenger Names</h3>
{getPassengerName()}
</section>
<section className="ticket__section">
<h3>Payment Method</h3>
<p>Credit Card</p>
</section>
</div>
<footer className="ticket__footer">
<p>Transaction-ID</p>
{getIdNumber()}
</footer>
</article>
</div>
</div>
)
}
================================================
FILE: frontend/src/components/routeSelector/Routeselector.css
================================================
.rdc {
margin-left: -15px;
height: auto;
width: auto;
border: 1px solid #00acee;
background-color: #00abeeb0;
}
.dropdown:hover>.dropdown-menu {
display: block;
}
.dropdown>.dropdown-toggle:active {
pointer-events: none;
}
.main-container{
height:auto;
padding:15px 20px;
}
.dropdown{
display:inline-block
}
::-webkit-datetime-edit { padding: 4px; }
.date{
position: relative;
top:2px;
}
.getRoute{
margin-left: 180px;
}
select.selectpicker {
display: inline-block;
margin: 0 auto;
padding-left: 20px;
padding:7px 7px;
border-radius:5px;
outline:none;
border: none;
}
.btn-new {
background-color: rgb(68, 141, 214);
}
input{
margin-right:10px;
margin-left:35px;
}
.margin-left{
margin-left: 200px;
}
================================================
FILE: frontend/src/components/routeSelector/Routeselector.js
================================================
import React, { useState } from 'react'
import './Routeselector.css'
import * as apiCall from './routeApifunc'
import BusList from '../BusList/BusList'
export default function Routeselector() {
const [dataInp, setData] = useState("")
const [startCity, setStartCity] = useState('')
const [destination, setDestination] = useState('')
const handleToCity = e => {
e.preventDefault()
setDestination({ destination: e.target.value })
localStorage.setItem("destination", e.target.value)
}
const renderBusList = (dataInp) => {
if (Object.keys(dataInp).length > 0) {
return (<BusList value={dataInp} />)
}
}
const handleFromCity = e => {
e.preventDefault()
setStartCity({ startCity: e.target.value })
localStorage.setItem("start", e.target.value)
// console.log(startCity)
}
const getRoutes = e => {
e.preventDefault()
// console.log(startCity,destination)
apiCall.getRoutesFromApi(startCity.startCity, destination.destination)
.then(response => response.data)
.then(data => {
setData(data.bus)
})
}
const handleDate = e => {
e.preventDefault()
// console.log(e.target.value)
localStorage.setItem("date", e.target.value)
}
return (
<div className="rdc">
<div className="form-group inline"></div>
<div className="main-container">
<form className="form-inline" onSubmit={e => getRoutes(e)}>
<select name="ad_account_selected" data-style="btn-new" class="selectpicker" onChange={e => { handleFromCity(e) }}>
<option>FROM</option>
<option>Chennai</option>
<option>Bangalore</option>
</select>
<select name="ad_account_selected" data-style="btn-new" class="selectpicker" onChange={e => { handleToCity(e) }}>
<option>TO</option>
<option>Hyderabad</option>
<option>Coimbatore</option>
<option>Vishakapatnam</option>
<option>Bangalore</option>
<option>Chenai</option>
</select>
<input onChange={e => { handleDate(e) }} type="date"></input>
<input type="submit" className=" btn btn-primary btn-md getRoute" />
</form>
<div>
{renderBusList(dataInp)}
</div>
</div>
</div>
)
}
================================================
FILE: frontend/src/components/routeSelector/routeApifunc.js
================================================
import axios from 'axios'
export async function getRoutesFromApi(startCity, destination) {
const baseURL = "http://localhost:8080/booking/"
let incoming = await axios.post(baseURL, { startCity, destination })
return incoming
}
================================================
FILE: frontend/src/index.css
================================================
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
================================================
FILE: frontend/src/index.js
================================================
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<App />
,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
================================================
FILE: frontend/src/serviceWorker.js
================================================
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl, {
headers: { 'Service-Worker': 'script' },
})
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready
.then(registration => {
registration.unregister();
})
.catch(error => {
console.error(error.message);
});
}
}
================================================
FILE: frontend/src/setupTests.js
================================================
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';
gitextract_jky4zb8k/
├── .gitattributes
├── README.md
├── backend/
│ ├── app.js
│ ├── auth/
│ │ └── auth.js
│ ├── bin/
│ │ └── www
│ ├── config/
│ │ ├── jwtConfig.js
│ │ ├── keys.js
│ │ └── passport.js
│ ├── models/
│ │ ├── Buses.js
│ │ └── User.js
│ ├── package.json
│ ├── public/
│ │ ├── index.html
│ │ └── stylesheets/
│ │ └── style.css
│ ├── routes/
│ │ ├── loggedInUser.js
│ │ ├── login.js
│ │ ├── register.js
│ │ └── routeSelection.js
│ └── routes.json
└── frontend/
├── .gitignore
├── README.md
├── debug.log
├── package.json
├── public/
│ ├── index.html
│ ├── manifest.json
│ └── robots.txt
└── src/
├── App.css
├── App.js
├── App.test.js
├── components/
│ ├── API/
│ │ └── api.js
│ ├── BusList/
│ │ ├── BusList.js
│ │ └── busList.css
│ ├── Homepage/
│ │ ├── Homepage.js
│ │ └── homepage.css
│ ├── Login-Signup/
│ │ ├── LogOrsign.js
│ │ ├── Signup.js
│ │ ├── SignupFunctions.js
│ │ ├── logOrsign.css
│ │ ├── loginFunctions.js
│ │ └── signup.css
│ ├── PaymentTab/
│ │ ├── PaymentTab.css
│ │ ├── PaymentTab.js
│ │ └── utils.js
│ ├── Profile/
│ │ ├── Profile.js
│ │ └── profile.css
│ ├── RouteSelection/
│ │ ├── RouteSelection.css
│ │ └── RouteSelection.js
│ ├── SeatSelection/
│ │ ├── SeatSelection.js
│ │ └── Tab.css
│ ├── TicketPage/
│ │ ├── TicketPage.css
│ │ └── TicketPage.js
│ └── routeSelector/
│ ├── Routeselector.css
│ ├── Routeselector.js
│ └── routeApifunc.js
├── index.css
├── index.js
├── serviceWorker.js
└── setupTests.js
SYMBOL INDEX (24 symbols across 15 files)
FILE: backend/app.js
constant DB_URL (line 26) | const DB_URL = require('./config/keys').MongoURI;
FILE: frontend/src/App.js
function App (line 12) | function App() {
FILE: frontend/src/components/BusList/BusList.js
function BusList (line 4) | function BusList({ value: dataInp }) {
FILE: frontend/src/components/Homepage/Homepage.js
function Homepage (line 3) | function Homepage({ history }) {
FILE: frontend/src/components/Login-Signup/LogOrsign.js
function LogOrsign (line 5) | function LogOrsign({ history }) {
FILE: frontend/src/components/Login-Signup/SignupFunctions.js
function registerUser (line 3) | function registerUser(newUserDetails){
FILE: frontend/src/components/Login-Signup/loginFunctions.js
function logUserIn (line 3) | function logUserIn(userCredentials) {
function loadRoutes (line 13) | function loadRoutes(){
function getCurrentUserDetails (line 19) | function getCurrentUserDetails(authToken){
FILE: frontend/src/components/PaymentTab/PaymentTab.js
method componentDidMount (line 26) | componentDidMount() {
FILE: frontend/src/components/PaymentTab/utils.js
function clearNumber (line 3) | function clearNumber(value = "") {
function formatCreditCardNumber (line 7) | function formatCreditCardNumber(value) {
function formatCVC (line 40) | function formatCVC(value, prevValue, allValues = {}) {
function formatExpirationDate (line 52) | function formatExpirationDate(value) {
function formatFormData (line 62) | function formatFormData(data) {
FILE: frontend/src/components/RouteSelection/RouteSelection.js
function RouteSelection (line 6) | function RouteSelection({ history }) {
FILE: frontend/src/components/SeatSelection/SeatSelection.js
function SeatSelection (line 4) | function SeatSelection() {
FILE: frontend/src/components/TicketPage/TicketPage.js
function TicketPage (line 3) | function TicketPage({ history }) {
FILE: frontend/src/components/routeSelector/Routeselector.js
function Routeselector (line 5) | function Routeselector() {
FILE: frontend/src/components/routeSelector/routeApifunc.js
function getRoutesFromApi (line 3) | async function getRoutesFromApi(startCity, destination) {
FILE: frontend/src/serviceWorker.js
function register (line 23) | function register(config) {
function registerValidSW (line 57) | function registerValidSW(swUrl, config) {
function checkValidServiceWorker (line 101) | function checkValidServiceWorker(swUrl, config) {
function unregister (line 131) | function unregister() {
Condensed preview — 57 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (128K chars).
[
{
"path": ".gitattributes",
"chars": 66,
"preview": "# Auto detect text files and perform LF normalization\n* text=auto\n"
},
{
"path": "README.md",
"chars": 4228,
"preview": "# MERN-BUS-APP\n## MFRP (My First Real Project) assigned by Cognizant during Internship\n\nA Bus ticket booking application"
},
{
"path": "backend/app.js",
"chars": 1449,
"preview": "var express = require('express');\nvar path = require('path');\nvar cookieParser = require('cookie-parser');\nvar logger = "
},
{
"path": "backend/auth/auth.js",
"chars": 1918,
"preview": "\nconst passport = require('passport');\nconst localStrategy = require('passport-local').Strategy;\nconst User = require('."
},
{
"path": "backend/bin/www",
"chars": 1638,
"preview": "#!/usr/bin/env node\n\n/**\n * Module dependencies.\n */\n\nvar app = require('../app');\nvar debug = require('debug')('backend"
},
{
"path": "backend/config/jwtConfig.js",
"chars": 414,
"preview": "const JWTstrategy = require('passport-jwt').Strategy;\nconst ExtractJWT = require('passport-jwt').ExtractJwt;\nconst passp"
},
{
"path": "backend/config/keys.js",
"chars": 124,
"preview": "module.exports = {\n MongoURI: \"mongodb+srv://AdityaNew:123@cluster0-rsoqu.mongodb.net/test?retryWrites=true&w=majorit"
},
{
"path": "backend/config/passport.js",
"chars": 896,
"preview": "const passport = require(\"passport\");\nconst localStrategy = require(\"passport-local\").Strategy;\nconst User = require(\".."
},
{
"path": "backend/models/Buses.js",
"chars": 567,
"preview": "const mongoose = require('mongoose');\nconst Schema = mongoose.Schema;\n\n\nconst BusSchema = new Schema({\n companyName: "
},
{
"path": "backend/models/User.js",
"chars": 577,
"preview": "const mongoose = require(\"mongoose\");\nconst Schema = mongoose.Schema;\n\nconst UserSchema = new Schema({\n name: {\n "
},
{
"path": "backend/package.json",
"chars": 586,
"preview": "{\n \"name\": \"backend\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"scripts\": {\n \"start\": \"node ./bin/www\",\n \"devSt"
},
{
"path": "backend/public/index.html",
"chars": 176,
"preview": "<html>\n\n<head>\n <title>Express</title>\n <link rel=\"stylesheet\" href=\"/stylesheets/style.css\">\n</head>\n\n<body>\n <h1>Ex"
},
{
"path": "backend/public/stylesheets/style.css",
"chars": 111,
"preview": "body {\n padding: 50px;\n font: 14px \"Lucida Grande\", Helvetica, Arial, sans-serif;\n}\n\na {\n color: #00B7FF;\n}\n"
},
{
"path": "backend/routes/loggedInUser.js",
"chars": 294,
"preview": "const express = require('express');\n\nconst router = express.Router();\n\n\n//Displays information tailored according to the"
},
{
"path": "backend/routes/login.js",
"chars": 1794,
"preview": "const express = require(\"express\");\nconst passport = require(\"passport\");\nconst User = require(\"../models/User\");\nconst "
},
{
"path": "backend/routes/register.js",
"chars": 917,
"preview": "var express = require('express');\nvar router = express.Router();\nvar User = require('../models/User')\nvar bcrypt = requi"
},
{
"path": "backend/routes/routeSelection.js",
"chars": 1105,
"preview": "var express = require('express');\nvar router = express.Router();\nvar bus = require('../models/Buses');\n\n\n// router.get('"
},
{
"path": "backend/routes.json",
"chars": 7106,
"preview": "[\n {\n \"CompanyName\": \"RED BUS\",\n \"busType\": \"Multi AXLE AC\",\n \"busNumber\": \"TN 27 110099\",\n "
},
{
"path": "frontend/.gitignore",
"chars": 310,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "frontend/README.md",
"chars": 2870,
"preview": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Available Scrip"
},
{
"path": "frontend/debug.log",
"chars": 527,
"preview": "[0530/011756.906:ERROR:scoped_process_suspend.cc(31)] NtSuspendProcess: An attempt was made to access an exiting process"
},
{
"path": "frontend/package.json",
"chars": 1055,
"preview": "{\n \"name\": \"frontend\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"^"
},
{
"path": "frontend/public/index.html",
"chars": 2609,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\" />\n <link href=\"https://maxcdn.bootstrapcdn.com/font-a"
},
{
"path": "frontend/public/manifest.json",
"chars": 492,
"preview": "{\n \"short_name\": \"React App\",\n \"name\": \"Create React App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n "
},
{
"path": "frontend/public/robots.txt",
"chars": 67,
"preview": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
},
{
"path": "frontend/src/App.css",
"chars": 544,
"preview": "body {\n background: url('./bg.jpg');\n background-repeat: no-repeat;\n background-position: center center;\n ba"
},
{
"path": "frontend/src/App.js",
"chars": 1171,
"preview": "import React from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\nimport 'bootstrap/"
},
{
"path": "frontend/src/App.test.js",
"chars": 280,
"preview": "import React from 'react';\nimport { render } from '@testing-library/react';\nimport App from './App';\n\ntest('renders lear"
},
{
"path": "frontend/src/components/API/api.js",
"chars": 95,
"preview": "import axios from 'axios'\nexport default axios.create({\n baseURL: 'http//localhost:8080'\n})\n"
},
{
"path": "frontend/src/components/BusList/BusList.js",
"chars": 2627,
"preview": "import React, { useState, useEffect } from 'react'\nimport { FaAngleDoubleDown } from \"react-icons/fa\";\nimport './busList"
},
{
"path": "frontend/src/components/BusList/busList.css",
"chars": 1163,
"preview": ".buslist {\n margin-top: 20px;\n background-color: rgba(240, 248, 255, 0.548);\n}\n\n.row {\n margin-left: 15px;\n}\n\n."
},
{
"path": "frontend/src/components/Homepage/Homepage.js",
"chars": 1624,
"preview": "import React from 'react'\nimport './homepage.css'\nexport default function Homepage({ history }) {\n const enterSite = "
},
{
"path": "frontend/src/components/Homepage/homepage.css",
"chars": 4359,
"preview": ".header-nav {\n text-align: center;\n position: absolute;\n top: 1%;\n left: 50%;\n transform: translate(-50%,"
},
{
"path": "frontend/src/components/Login-Signup/LogOrsign.js",
"chars": 3538,
"preview": "import React, { useState } from 'react'\nimport * as logFunc from './loginFunctions.js'\nimport './logOrsign.css'\nimport {"
},
{
"path": "frontend/src/components/Login-Signup/Signup.js",
"chars": 5304,
"preview": "import React, { useState } from \"react\";\nimport * as signupFunc from \"./SignupFunctions\";\nimport { FaFacebookF, FaTwitte"
},
{
"path": "frontend/src/components/Login-Signup/SignupFunctions.js",
"chars": 253,
"preview": "import axios from 'axios'\n\nexport function registerUser(newUserDetails){\n let apiUrl = 'http://localhost:8080/registe"
},
{
"path": "frontend/src/components/Login-Signup/logOrsign.css",
"chars": 4814,
"preview": "@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');\n* {\n margin: 0;\n padding: 0\n}\n\na, a:hover {"
},
{
"path": "frontend/src/components/Login-Signup/loginFunctions.js",
"chars": 645,
"preview": "import axios from 'axios'\n\nexport function logUserIn(userCredentials) {\n let apiUrl = 'http://localhost:8080/login'\n "
},
{
"path": "frontend/src/components/Login-Signup/signup.css",
"chars": 4242,
"preview": ".container {\n width: 100vw;\n height: 100vh;\n background-size: cover;\n}\n\n.form-container-in {\n box-shadow: 0 "
},
{
"path": "frontend/src/components/PaymentTab/PaymentTab.css",
"chars": 1531,
"preview": ".paym {\n /* border:1px solid white; */\n height: auto;\n background-color: #00abeeb0;\n}\n\n.App-payment {\n paddi"
},
{
"path": "frontend/src/components/PaymentTab/PaymentTab.js",
"chars": 7559,
"preview": "import React from 'react'\nimport Card from 'react-credit-cards'\nimport './PaymentTab.css'\nimport jwt_decode from 'jwt-de"
},
{
"path": "frontend/src/components/PaymentTab/utils.js",
"chars": 1632,
"preview": "import Payment from \"payment\";\n\nfunction clearNumber(value = \"\") {\n return value.replace(/\\D+/g, \"\");\n}\n\nexport funct"
},
{
"path": "frontend/src/components/Profile/Profile.js",
"chars": 2519,
"preview": "import React, { useState, useEffect } from 'react'\nimport './profile.css'\nimport jwt_decode from 'jwt-decode'\n\nexport de"
},
{
"path": "frontend/src/components/Profile/profile.css",
"chars": 1110,
"preview": "@import url(\"https://fonts.googleapis.com/css?family=Lato:400,400i,700\");\nbody {\n margin: 0;\n font-family: 'Lato',"
},
{
"path": "frontend/src/components/RouteSelection/RouteSelection.css",
"chars": 296,
"preview": ".ic .li a {\n cursor: pointer;\n}\n\n.routePicker {\n padding: 30px 18px;\n}\n\n.dropdown>.dropdown-menu {\n top: 200%;\n"
},
{
"path": "frontend/src/components/RouteSelection/RouteSelection.js",
"chars": 3084,
"preview": "import React from 'react'\nimport RouteSelector from '../routeSelector/Routeselector'\nimport SeatSelection from '../SeatS"
},
{
"path": "frontend/src/components/SeatSelection/SeatSelection.js",
"chars": 15084,
"preview": "import React, { useState } from 'react'\nimport { FaAngleDoubleDown } from \"react-icons/fa\";\nimport './Tab.css'\nexport de"
},
{
"path": "frontend/src/components/SeatSelection/Tab.css",
"chars": 5298,
"preview": "*, *:before, *:after {\n box-sizing: border-box;\n}\n\nhtml {\n font-size: 16px;\n}\n\n.plane {\n margin: 50px 0px;\n "
},
{
"path": "frontend/src/components/TicketPage/TicketPage.css",
"chars": 2379,
"preview": ".tpMain {\n width: 100%;\n padding: 2px 100px;\n height: 500px;\n margin-left: 220px;\n}\n\n*, *::after {\n box-s"
},
{
"path": "frontend/src/components/TicketPage/TicketPage.js",
"chars": 4594,
"preview": "import React from 'react'\nimport './TicketPage.css'\nexport default function TicketPage({ history }) {\n\n const handleS"
},
{
"path": "frontend/src/components/routeSelector/Routeselector.css",
"chars": 802,
"preview": ".rdc {\n margin-left: -15px;\n height: auto;\n width: auto;\n border: 1px solid #00acee;\n background-color: #"
},
{
"path": "frontend/src/components/routeSelector/Routeselector.js",
"chars": 2682,
"preview": "import React, { useState } from 'react'\nimport './Routeselector.css'\nimport * as apiCall from './routeApifunc'\nimport Bu"
},
{
"path": "frontend/src/components/routeSelector/routeApifunc.js",
"chars": 239,
"preview": "import axios from 'axios'\n\nexport async function getRoutesFromApi(startCity, destination) {\n const baseURL = \"http://"
},
{
"path": "frontend/src/index.css",
"chars": 366,
"preview": "body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Can"
},
{
"path": "frontend/src/index.js",
"chars": 461,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as "
},
{
"path": "frontend/src/serviceWorker.js",
"chars": 5086,
"preview": "// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the ap"
},
{
"path": "frontend/src/setupTests.js",
"chars": 255,
"preview": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).to"
}
]
About this extraction
This page contains the full source code of the AdityaKumawat97/MERN-BUS-APP GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 57 files (114.8 KB), approximately 31.6k tokens, and a symbol index with 24 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.