added verify, bar codes and select seats

Shyamak-Seth · Shyamak-Seth · commit a5a899de6a27 · 2024-05-07T23:28:44.000+05:30
diff --git a/routers/indexRouter.js b/routers/indexRouter.js
@@ -28,7 +28,7 @@ router.post('/', async (req, res) => {
         const distance = earthRadius * c;
 
         const timeTaken = Math.round((distance / 45) * 60)
-        return [(50 + (12.5 * distance)).toFixed(2), distance.toFixed(2), timeTaken];
+        return [(15 + (6.5 * distance)).toFixed(2), distance.toFixed(2), timeTaken];
     }
     const allDrivers = await Users.findOne({type: 'Driver', status: 'free'})
     const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'
@@ -38,7 +38,7 @@ router.post('/', async (req, res) => {
     }
     const currentRides = await Rides.find({})
     for (let i = 0; i < currentRides.length; i++) {
-        const maxLimit = currentRides[i].vehicle == 'auto' ? 3 : 10
+        const maxLimit = currentRides[i].vehicle == 'auto' ? 3 : 16
         if (currentRides[i].riders.length >= maxLimit) {
             continue;
         } else {
@@ -49,7 +49,8 @@ router.post('/', async (req, res) => {
                 currentMyLocations = currentRides[i].myLocation,
                 currentTimes = currentRides[i].time,
                 currentLatitudes = currentRides[i].latitude,
-                currentLongitudes = currentRides[i].longitude
+                currentLongitudes = currentRides[i].longitude,
+                currentSeats = currentRides[i].seats
             if (newPeople.includes(req.user.email)) {
                 return res.redirect('/')
             };
@@ -58,13 +59,14 @@ router.post('/', async (req, res) => {
             if (currentRides[i].vehicle == 'bus') {
                 currentPrices.push(getFare(latitude, longitude, myLatitude, myLongitude)[0])
             } else {
-                currentPrices.push(20 + (4.5 * getFare(latitude, longitude, myLatitude, myLongitude)[1]))
+                currentPrices.push(15 + (7.5 * getFare(latitude, longitude, myLatitude, myLongitude)[1]))
             }
             currentMyLocations.push(myFinalHomeLocation)
             currentDistances.push(getFare(latitude, longitude, myLatitude, myLongitude)[1])
             currentTimes.push(getFare(latitude, longitude, myLatitude, myLongitude)[2])
             currentLatitudes.push(Number(latitude))
             currentLongitudes.push(Number(longitude))
+            currentSeats.push('noseatfound')
             await Rides.updateOne({rideId: currentRides[i].rideId}, {
                 $set: {
                     riders: newPeople,
@@ -74,7 +76,8 @@ router.post('/', async (req, res) => {
                     distance: currentDistances,
                     time: currentTimes,
                     latitude: currentLatitudes,
-                    longitude: currentLongitudes
+                    longitude: currentLongitudes,
+                    seats: currentSeats
                 }
             })
             const foundMyUser = await Users.findOne({email: req.user.email})
@@ -102,12 +105,13 @@ router.post('/', async (req, res) => {
         vehicle: 'auto',
         otp: finalOtp,
         rideId: myNewRideId,
-        price: [20 + (4.5 * getFare(latitude, longitude, myLatitude, myLongitude)[1])],
+        price: [15 + (7.5 * getFare(latitude, longitude, myLatitude, myLongitude)[1])],
         distance: [getFare(latitude, longitude, myLatitude, myLongitude)[1]],
         myLocation: [myFinalHomeLocation],
         time: [getFare(latitude, longitude, myLatitude, myLongitude)[2]],
         latitude: [Number(latitude)],
-        longitude: [Number(longitude)]
+        longitude: [Number(longitude)],
+        seats: ['noseatfound']
     })
     await newRide.save()
     await Users.updateOne({email: req.user.email}, {
diff --git a/routers/selectRouter.js b/routers/selectRouter.js
@@ -1,23 +1,78 @@
 const router = require('express').Router()
-const Ride = require('../schemas/rideSchema')
+const Ride = require('../schemas/rideSchema'),
+    User = require('../schemas/userSchema')
 
 router.get('/', async (req, res) => {
     const allRides = await Ride.find({})
     var verified = false
+    var seats = []
+    var mySeat = 'noseatfound'
+    var myPrice = myDriver = myTime = myDistance = myPickup = myDropOff = myLatitude = myLongitude = ''
+    var foundDriver;
     for (let i = 0; i < allRides.length; i++) {
         if (allRides[i].riders.includes(req.user.email)) {
+            foundDriver = await User.findOne({email: allRides[i].driver})
+            const overallIndex = allRides[i].riders.indexOf(req.user.email)
+            myPrice = allRides[i].price[overallIndex]
+            myTime = allRides[i].time[overallIndex]
+            myDistance = allRides[i].distance[overallIndex]
+            myPickup = allRides[i].myLocation[overallIndex].slice(0, 32) + '...'
+            myDropOff = allRides[i].location[overallIndex].slice(0, 32) + '...'
+            myLatitude = allRides[i].latitude[overallIndex]
+            myLongitude = allRides[i].longitude[overallIndex]
+            myDriver = allRides[i].driver
             if (allRides[i].vehicle == 'bus') {
                 verified = true
+                seats = allRides[i].seats
+                mySeat = allRides[i].seats[overallIndex]
                 break
             }
         }
     }
     if (verified) {
-        return res.render('select', {user: req.user})
+        return res.render('select', {
+            user: req.user, 
+            seats: seats, 
+            mySeat: mySeat,
+            price: myPrice,
+            time: myTime,
+            distance: myDistance,
+            pickup: myPickup,
+            dropoff: myDropOff,
+            latitude: myLatitude,
+            longitude: myLongitude,
+            driver: myDriver,
+            pfp: foundDriver.pfp
+        })
     } else {
         return res.redirect('/status')
     }
-    console.log(verified)
+})
+
+router.post('/', async (req, res) => {
+    try {
+        const {seat} = req.body
+        const allRides = await Ride.find({})
+        var rideId = ''
+        for (let i = 0; i < allRides.length; i++) {
+            if (allRides[i].riders.includes(req.user.email)) {
+                const overallIndex = allRides[i].riders.indexOf(req.user.email),
+                    currentPrices = allRides[i].price
+                allRides[i].seats[overallIndex] = seat
+                allRides[i].price[overallIndex] = Number(allRides[i].price[overallIndex]) + 30
+                await Ride.updateOne({rideId: allRides[i].rideId}, {
+                    $set: {
+                        seats: allRides[i].seats,
+                        price: currentPrices
+                    }
+                })
+                return res.sendStatus(200)
+            }
+        }
+    } catch (err) {
+        console.log(err)
+        res.sendStatus(400)
+    }
 })
 
 module.exports = router
diff --git a/routers/statusRouter.js b/routers/statusRouter.js
@@ -3,13 +3,14 @@ const User = require('../schemas/userSchema')
 const Ride = require('../schemas/rideSchema')
 
 router.get('/', async (req, res) => {
-    const foundUser = await User.findOne({email: req.user.email})
-    if (foundUser.status == 'free') return res.redirect('/')
+    const user = req.user
+    if (user.status == 'free') return res.redirect('/')
     var myRide = {riders: []};
     const foundRides = await Ride.find({})
+    const allUsers = await User.find({})
     for (let i = 0; i < foundRides.length; i++) {
-        if (foundRides[i].riders.includes(req.user.email)) {
-            const overallIndex = foundRides[i].riders.indexOf(req.user.email)
+        if (foundRides[i].riders.includes(user.email)) {
+            const overallIndex = foundRides[i].riders.indexOf(user.email)
             const foundDriver = await User.findOne({email: foundRides[i].driver})
             myRide.price = foundRides[i].price[overallIndex]
             myRide.distance = foundRides[i].distance[overallIndex]
@@ -20,8 +21,13 @@ router.get('/', async (req, res) => {
             myRide.latitude = Number(foundRides[i].latitude[overallIndex])
             myRide.longitude = Number(foundRides[i].longitude[overallIndex])
             for (let k = 0; k < foundRides[i].riders.length; k++) {
-                const theFoundUser = await User.findOne({email: foundRides[i].riders[k]})
-                myRide.riders.push(theFoundUser)
+                for (let n = 0; n < allUsers.length; n++) {
+                    if (allUsers[n].email == foundRides[i].riders[k]) {
+                        myRide.riders.push(allUsers[n])
+                    }
+                }
+                // const theFoundUser = await User.findOne({email: foundRides[i].riders[k]})
+                // myRide.riders.push(theFoundUser)
             }
             if (foundRides[i].location[overallIndex].length > 20) {
                 myRide.dropOff = foundRides[i].location[overallIndex].substring(0, 20) + '...'
@@ -36,7 +42,7 @@ router.get('/', async (req, res) => {
             break
         }
     }
-    res.render('status', {user: foundUser, ride: myRide})
+    res.render('status', {user: req.user, ride: myRide})
 })
 
 router.post('/vehicle', async (req, res) => {
@@ -85,6 +91,7 @@ router.post('/cancel', async (req, res) => {
             foundRides[i].time.splice(overallIndex, 1)
             foundRides[i].latitude.splice(overallIndex, 1)
             foundRides[i].longitude.splice(overallIndex, 1)
+            foundRides[i].seats.splice(overallIndex, 1)
             console.log(foundRides[i])
             await Ride.updateOne({rideId: foundRides[i].rideId}, {
                 $set: {
@@ -95,7 +102,8 @@ router.post('/cancel', async (req, res) => {
                     distance: foundRides[i].distance,
                     time: foundRides[i].time,
                     latitude: foundRides[i].latitude,
-                    longitude: foundRides[i].longitude
+                    longitude: foundRides[i].longitude,
+                    seats: foundRides[i].seats
                 }
             })
             await User.updateOne({email: req.user.email}, {
diff --git a/routers/tempRouter.js b/routers/tempRouter.js
@@ -0,0 +1,14 @@
+const router = require('express').Router()
+const Ride = require('../schemas/rideSchema')
+const User = require('../schemas/userSchema')
+
+router.get('/', async (req, res) => {
+    const foundRide = await Ride.findOne({rideId: 'xHxW6J9lIiSER5fV1Kre'})
+    await Ride.updateOne({rideId: 'xHxW6J9lIiSER5fV1Kre'}, {
+        $set: {
+            seats: ['a3']
+        }
+    })
+})
+
+module.exports = router
diff --git a/routers/verifyRouter.js b/routers/verifyRouter.js
@@ -0,0 +1,12 @@
+const router = require('express').Router(),
+    Ride = require('../schemas/rideSchema')
+
+router.get('/', (req, res) => {
+    res.render('verify')
+})
+
+router.post('/', async (req, res) => {
+
+})
+
+module.exports = router
diff --git a/schemas/rideSchema.js b/schemas/rideSchema.js
@@ -41,6 +41,11 @@ const driverSchema = new Schema({
     longitude: {
         type: Array,
         required: true
+    },
+    seats: {
+        type: Array,
+        required: true,
+        default: []
     }
 })
 
diff --git a/server.js b/server.js
@@ -22,7 +22,9 @@ const indexRouter = require('./routers/indexRouter'),
     statusRouter = require('./routers/statusRouter'),
     helpRouter = require('./routers/helpRouter'),
     apiRouter = require('./routers/apiRouter'),
-    selectRouter = require('./routers/selectRouter')
+    selectRouter = require('./routers/selectRouter'),
+    tempRouter = require('./routers/tempRouter'),
+    verifyRouter = require('./routers/verifyRouter')
     
 app.use(express.static('public'))
 app.set('view engine', 'ejs')
@@ -57,5 +59,7 @@ app.use('/status', ensureAuthenticated, ensureKyc, statusRouter)
 app.use('/help', ensureAuthenticated, ensureKyc, helpRouter)
 app.use('/rewards', ensureAuthenticated, ensureKyc, rewardsRouter)
 app.use('/select', ensureAuthenticated, selectRouter)
+app.use('/temp', tempRouter)
+app.use('/verify', verifyRouter)
 
 app.listen(PORT, console.log(`Ordin <3 TS listening on port ${PORT}`))
diff --git a/views/partials/cursor.ejs b/views/partials/cursor.ejs
@@ -36,7 +36,7 @@
         pointer-events: none;
         transition: top 0.15s ease-out, left 0.15s ease-out, width 0.15s ease-out,
             height 0.15s ease-out, background-color 0.15s ease-out;
-        z-index: 1001;
+        z-index: 9999999;
     }
     * {
         box-sizing: border-box;
diff --git a/views/select.ejs b/views/select.ejs
diff --git a/views/status.ejs b/views/status.ejs
diff --git a/views/verify.ejs b/views/verify.ejs

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@`
`36`	`36`	`pointer-events: none;`
`37`	`37`	`transition: top 0.15s ease-out, left 0.15s ease-out, width 0.15s ease-out,`
`38`	`38`	`height 0.15s ease-out, background-color 0.15s ease-out;`
`39`		`- z-index: 1001;`
	`39`	`+ z-index: 9999999;`
`40`	`40`	`}`
`41`	`41`	`* {`
`42`	`42`	`box-sizing: border-box;`
-Original file line number
+Diff line change
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Select Seats</title>
 +    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
 +    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
 +    <link rel="icon" href="logo.png" type="image/png">
 +    <style>
 +        * {box-sizing: border-box;}
 +        .container {
 +            width: 75vw;
 +            margin-left: 12.5vw;
 +            display: flex;
 +            justify-content: space-between;
 +            margin-top: 5vw;
 +        }
 +        .seatsContainer {
 +            width: 25vw;
 +            border: 1px solid white;
 +            border-radius: 2.5vw;
 +            padding-bottom: 1.5vw;
 +            height: 53.5vw;
 +        }
 +        .seatsKaStampPolygonThingy {
 +            clip-path: polygon(0% 0%, 0% 100%, 75% 100%, 100% 0%);
 +            border-top-left-radius: 2.5vw;
 +            width: 15vw;
 +            height: 10vw;
 +            background-color: #ccc;
 +            padding: 1px;
 +            transform: translate(-0.56px, -0.56px)
 +        }
 +        .seatContainer {
 +            position: relative;
 +            width: 4.5vw;
 +            height: 4.5vw;
 +            border: 0.1vw solid white;
 +            border-radius: 0.8vw;
 +            display: flex;
 +            align-items: flex-end;
 +        }
 +        .seatsRow {
 +            display: flex;
 +            justify-content: space-around;
 +        }
 +        .seatGola {
 +            border: 0.1vw solid white;
 +            border-radius: 1.3vw;
 +            height: 1.5vw;
 +            width: 100%;
 +            transform: translateY(0.048vw);
 +        }
 +        .right {
 +            width: 35vw;
 +        }
 +        .right h1 {
 +            margin: 0.5vw 0px 1.5vw 0px;
 +            font-size: 2.3vw;
 +        }
 +        .rightBox {
 +            border-radius: 1.7vw;
 +            height: 17.5vw;
 +            background-color: #18181b;
 +            padding: 1.6vw 2vw;
 +        }
 +        .boxKaHead {
 +            display: flex;
 +            justify-content: space-between;
 +            align-items: center;
 +        }
 +        .boxKaHead p {
 +            font-size: 1.15vw;
 +            text-align: right;
 +        }
 +        .boxKaHead p:nth-child(2) {
 +            color: #53faaa;
 +            font-size: 1vw;
 +            margin-top: 0.33vw;
 +        }
 +        .driverInfo img {
 +            border-radius: 3vw;
 +            width: 3.2vw;
 +            height: 3.2vw;
 +            object-fit: cover;
 +            margin-right: 0.8vw;
 +        }
 +        .driverInfo {
 +            display: flex;
 +            align-items: center;
 +            font-size: 1.15vw;
 +        }
 +        p.driverInfoTextInfo {
 +            font-size: 1vw;
 +            color: #53faaa;
 +            display: flex;
 +            align-items: center;
 +            gap: 0.45vw;
 +            margin-top: 0.33vw;
 +        }
 +        .dot {
 +            width: 0.2vw;
 +            height: 0.2vw;
 +            background-color: rgba(255, 255, 255, 0.3);
 +            border-radius: 0.2vw;
 +        }
 +        .busIcon {
 +            color: black;
 +            background-color: #466eff;
 +            padding: 0.23vw 1.2vw;
 +            font-size: 1vw;
 +            border-radius: 0.5vw;
 +        }
 +        .pickupInfoContainer {
 +            display: flex;
 +            height: 100%;
 +            gap: 1.5vw;
 +            margin-left: 0.5vw;
 +            margin-top: 1.9vw;
 +        }
 +        .pickupInfoContainer img {
 +            height: 7.5vw;
 +        }
 +        .pickupInfo {
 +            flex: 1;
 +        }
 +        .pickupItem {
 +            display: flex;
 +            justify-content: space-between;
 +            align-items: center;
 +        }
 +        .pickupItem p {
 +            font-size: 1vw;
 +            line-height: 1.4;
 +        }
 +        .pickupItem p:nth-child(1) {
 +            color: rgba(255, 255, 255, 0.3);
 +        }
 +        .pickupItem:nth-child(2) {
 +            margin-top: 3.2vw;
 +        }
 +        .leaflet-container {
 +            width: 35vw;
 +            height: 29.35vw;
 +            border-radius: 1.7vw;
 +            margin-top: 1.9vw;
 +            border: 2px solid #131316;
 +            background: none;
 +            outline: none;
 +        }
 +        .continue {
 +            border: none;
 +            outline: none;
 +            cursor: pointer;
 +            transition: 0.3s;
 +            border-radius: 0.5vw;
 +            color: black;
 +            background-color: #53faaa;
 +            font-size: 0.95vw;
 +            height: fit-content;
 +            padding: 0.6vw 1.8vw;
 +        }
 +    </style>
 </head>
 <body>
     <%- include('./partials/cursor.ejs') %>
 +    <div class="container">
 +        <div class="seatsContainer">
 +            <div class="seatsKaStampPolygonThingy">
 +                <div class="seatsKaStampPolygonThingy" style="width: 100%; height: 100%; background-color: #131316;"></div>
 +            </div>
 +            <div class="seatsRow" style="margin-top: 3.5vw;">
 +                <div class="seatContainer selectableSeats" data-cursor="pointer" data-value="a1">
 +                    <div class="seatGola"></div>
 +                </div>
 +                <div class="seatContainer selectableSeats" data-cursor="pointer" data-value="a2">
 +                    <div class="seatGola"></div>
 +                </div>
 +                <div class="seatContainer" style="visibility: hidden">
 +                    <div class="seatGola"></div>
 +                </div>
 +                <div class="seatContainer selectableSeats" data-cursor="pointer" data-value="a3">
 +                    <div class="seatGola"></div>
 +                </div>
 +            </div>
 +            <div class="seatsRow" style="margin-top: 1.5vw;">
 +                <div class="seatContainer selectableSeats" data-cursor="pointer" data-value="b1">
 +                    <div class="seatGola"></div>
 +                </div>
 +                <div class="seatContainer selectableSeats" data-cursor="pointer" data-value="b2">
 +                    <div class="seatGola"></div>
 +                </div>
 +                <div class="seatContainer" style="visibility: hidden">
 +                    <div class="seatGola"></div>
 +                </div>
 +                <div class="seatContainer selectableSeats" style="transform: rotate(180deg)" data-cursor="pointer" data-value="b3">
 +                    <div class="seatGola"></div>
 +                </div>
 +            </div>
 +            <div class="seatsRow" style="margin-top: 3.5vw;">
 +                <div class="seatContainer selectableSeats" style="transform: rotate(90deg)" data-cursor="pointer" data-value="c1">
 +                    <div class="seatGola"></div>
 +                </div>
 +                <div class="seatContainer" style="visibility: hidden;">
 +                    <div class="seatGola"></div>
 +                </div>
 +                <div class="seatContainer" style="visibility: hidden;">
 +                    <div class="seatGola"></div>
 +                </div>
 +                <div class="seatContainer selectableSeats" style="transform: rotate(270deg)" data-cursor="pointer" data-value="c2">
 +                    <div class="seatGola"></div>
 +                </div>
 +            </div>
 +            <div class="seatsRow" style="margin-top: 1.5vw;">
 +                <div class="seatContainer selectableSeats" style="transform: rotate(90deg)" data-cursor="pointer" data-value="d1">
 +                    <div class="seatGola"></div>
 +                </div>
 +                <div class="seatContainer" style="visibility: hidden;">
 +                    <div class="seatGola"></div>
 +                </div>
 +                <div class="seatContainer" style="visibility: hidden;">
 +                    <div class="seatGola"></div>
 +                </div>
 +                <div class="seatContainer selectableSeats" style="transform: rotate(270deg)" data-cursor="pointer" data-value="d2">
 +                    <div class="seatGola"></div>
 +                </div>
 +            </div>
 +            <div class="seatsRow" style="margin-top: 3.5vw;">
 +                <div class="seatContainer selectableSeats" data-cursor="pointer" data-value="e1">
 +                    <div class="seatGola"></div>
 +                </div>
 +                <div class="seatContainer selectableSeats" data-cursor="pointer" data-value="e2">
 +                    <div class="seatGola"></div>
 +                </div>
 +                <div class="seatContainer" style="visibility: hidden; transform: rotate(180deg)">
 +                    <div class="seatGola"></div>
 +                </div>
 +                <div class="seatContainer selectableSeats" data-cursor="pointer" data-value="e3">
 +                    <div class="seatGola"></div>
 +                </div>
 +            </div>
 +            <div class="seatsRow" style="margin-top: 1.5vw;">
 +                <div class="seatContainer selectableSeats" data-cursor="pointer" data-value="f1">
 +                    <div class="seatGola"></div>
 +                </div>
 +                <div class="seatContainer selectableSeats" data-cursor="pointer" data-value="f2">
 +                    <div class="seatGola"></div>
 +                </div>
 +                <div class="seatContainer" style="visibility: hidden;">
 +                    <div class="seatGola"></div>
 +                </div>
 +                <div class="seatContainer selectableSeats" data-cursor="pointer" data-value="f3">
 +                    <div class="seatGola"></div>
 +                </div>
 +            </div>
 +        </div>
 +        <div class="right">
 +            <h1><span style="color: #466eff">Select</span> Seat</h1>
 +            <div class="rightBox">
 +                <div class="boxKaHead">
 +                    <div class="driverInfo">
 +                        <img src="<%= pfp %>">
 +                        <div class="driverInfoText">
 +                            <p><%= driver %> &nbsp;<span class="busIcon">Bus</span></p>
 +                            <p class="driverInfoTextInfo"><%= time %> Mins <span class="dot"></span> <%= distance %> Km</p>
 +                        </div>
 +                    </div>
 +                    <div class="prices">
 +                        <p>₹<%= price %></p>
 +                        <p>+30.00</p>
 +                    </div>
 +                </div>
 +                <div class="pickupInfoContainer">
 +                    <img src="pickup.png">
 +                    <div class="pickupInfo">
 +                        <div class="pickupItem">
 +                            <div>
 +                                <p>Pickup</p>
 +                                <p><%= pickup %></p>
 +                            </div>
 +                        </div>
 +                        <div class="pickupItem">
 +                            <div>
 +                                <p>Drop Off</p>
 +                                <p><%= dropoff %></p>
 +                            </div>
 +                            <div class="continue" data-cursor="pointer" onclick="window.location.href = '/status'">Continue</div>
 +                        </div>
 +                    </div>
 +                </div>
 +            </div>
 +            <div id="map" style="position: relative"></div>
 +        </div>
 +    </div>
 +    <script>
 +        var foundOverallSeat, currentlySelected
 +        <% for (let i = 0; i < seats.length; i++) { %>
 +            if ('<%= seats[i] %>' != 'noseatfound') {
 +                foundOverallSeat = document.querySelector('[data-value="<%= seats[i] %>"]')
 +                foundOverallSeat.children[0].style.border = '0.1vw solid rgba(255, 255, 255, 0.4)'
 +                foundOverallSeat.style.border = '0.1vw solid rgba(255, 255, 255, 0.4)'
 +                foundOverallSeat.children[0].style.borderRadius = '1.3vw'
 +                foundOverallSeat.style.borderRadius = '0.8vw'
 +                foundOverallSeat.setAttribute('data-disabled', 'true')
 +            }
 +        <% } %>
 +        <% if (mySeat != 'noseatfound') { %>
 +        const foundSeat = document.querySelector('[data-value="<%= mySeat %>"]')
 +        foundSeat.children[0].style.border = '0.1vw solid #466eff'
 +        foundSeat.style.border = '0.1vw solid #466eff'
 +        foundSeat.children[0].style.borderRadius = '1.3vw'
 +        foundSeat.style.borderRadius = '0.8vw'
 +        foundSeat.setAttribute('data-disabled', 'false')
 +        currentlySelected = '<%= mySeat %>'
 +        <% } %>
 +        function showPosition() {
 +            var redMarker = L.icon({
 +                iconUrl: '/marker.png',
 +                iconSize: [80, 80],
 +                iconAnchor: [40, 40],
 +                popupAnchor: [1, -34],
 +                shadowSize: [41, 41]
 +            });
 +            console.log('called')
 +            var map = L.map('map', {zoomControl: false, attributionControl: false}).setView([<%= latitude %>, <%= longitude %>], 16);
 +            L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
 +                subdomains: 'abcd',
 +                maxZoom: 19
 +            }).addTo(map);
 +            const mapContainer = document.querySelector('.leaflet-container')
 +            var marker = L.marker([<%= latitude %>, <%= longitude %>], {icon: redMarker}).addTo(map);
 +        }
 +        showPosition()
 +        const allSelectableSeats = document.getElementsByClassName('selectableSeats')
 +        for (let i = 0; i < allSelectableSeats.length; i++) {
 +            allSelectableSeats[i].addEventListener('click', () => {
 +                if (allSelectableSeats[i].getAttribute('data-disabled') == 'true') return
 +                const selectedSeat = allSelectableSeats[i].getAttribute('data-value')
 +                console.log(selectedSeat)
 +                fetch('/select', {
 +                    method: 'POST',
 +                    body: JSON.stringify({
 +                        seat: selectedSeat
 +                    }),
 +                    headers: {
 +                        'Content-Type': 'application/json'
 +                    }
 +                })
 +                .then(async response => {
 +                    if (response.ok) {
 +                        window.location.reload()
 +                    } else {
 +                        console.log('bhosdike')
 +                    }
 +                })
 +                .catch(err => {
 +                    console.log('Error: ' + err)
 +                })
 +            })
 +        }
 +    </script>
 </body>
 </html>
-Original file line number
+Diff line change
     <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
     <link rel="icon" type="image/png" href="/logo.png">
     <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
 +    <script src="https://unpkg.com/bwip-js"></script>
 +    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/barcodes/JsBarcode.code128.min.js"></script>
     <style>
 +        ::-webkit-scrollbar {
 +            display: block !important;
 +            border-top-right-radius: 50px;
 +            width: 0.6vw;
 +        }
 +        ::-webkit-scrollbar-track {
 +            border-top-right-radius: 100vw;
 +            border-bottom-right-radius: 100vw;
 +            background-color: #000;
 +        }
 +        ::-webkit-scrollbar-thumb {
 +            background-color: #0d0d0d;
 +        }
         * {
             box-sizing: border-box;
             margin: 0;
             width: 15vw;
             padding: 1vw;
             text-align: center;
 +            transition: 0.6s;
+        }
         .otpContainer p {
             margin: 0.8vw 0;
             text-align: center;
             font-size: 1.1vw;
+        }
 -        .otpContainer div {
 -            border: 2px solid #466EFF;
 -            border-radius: 2px;
 -            display: inline;
 -            margin-right: 0.5vw;
 -            padding: 0px 0.7vw;
 -            font-size: 1.6vw;
 +        .otpContainer svg {
 +            width: 10vw;
+        }
         .pfp {
             width: 4vw !important;
         .rideStatusPageLink {
             color: #466EFF !important;
+        }
 -    </style>
 +        .fullBodyOverlay {
 +            background-color: rgba(0, 0, 0, 0.9);
 +            position: fixed;
 +            top: 0;
 +            left: 0;
 +            width: 100vw;
 +            height: 100vh;
 +            display: flex;
 +            align-items: center;
 +            justify-content: center;
 +            display: none;
 +            opacity: 0;
 +            z-index: 1000000;
 +            transition: 0.3s opacity;
 +        }
 +        .fullBodyOverlay svg {
 +            max-width: 90vw;
 +            transform: scale(1.6, 1.6) !important;
 +        }
 +        </style>
 </head>
 <body>
     <%- include('./partials/cursor.ejs') %>
         <h1><span style="color: #466EFF;">Ride</span> Status</h1>
         <p>Track your journey in a few clicks!</p>
     </div>
 +    <div class="fullBodyOverlay" id="fullBodyOverlay" onclick="toggleOverlay(event)">
 +        <svg id="barcode"></svg>
 +    </div>
     <main class="main">
         <div class="container">
             <div id="map" style="position: relative">
 -                <div class="otpContainer"></div>
 +                <div class="otpContainer">
 +                    <p>Code for this ride</p>
 +                    <svg id="barcode2"></svg>
 +                </div>
             </div>
             <div class="right">
                 <div class="top">
                     </div>
                 </div>
                 <div class="bottom">
 -                    <div class="maindiv">
 +                    <div class="maindiv" style="overflow: auto;">
                         <h1>Grouped <span style="color: #466EFF;">Riders</span> <span style="color: rgba(244, 244, 244, 0.25);">(<%= ride.riders.length %>)</span></h1>
                         <div class="riders">
                             <% for (let i = 0; i < ride.riders.length; i++) { %>
         </div>
     </main>
     <script>
 -        function showPosition() {
 +        JsBarcode("#barcode", "<%= ride.otp %>", {
 +            format: 'code128',
 +            displayValue: false,
 +            lineColor: "black",
 +            background: "#fff"
 +        });
 +        JsBarcode("#barcode2", "<%= ride.otp %>", {
 +            format: 'code128',
 +            displayValue: false,
 +            lineColor: "#466eff",
 +            background: "transparent",
 +            height: 55
 +        });
 +        (function showPosition() {
             var redMarker = L.icon({
                 iconUrl: '/marker.png',
                 iconSize: [80, 80],
                 maxZoom: 19
             }).addTo(map);
             const mapContainer = document.querySelector('.leaflet-container')
 -            const customOverlay = document.createElement('div'),
 -                otp1 = document.createElement('div'),
 -                otp2 = document.createElement('div'),
 -                otp3 = document.createElement('div'),
 -                otp4 = document.createElement('div'),
 -                overlayP = document.createElement('p')
 -            customOverlay.className = 'otpContainer'
 -            otp1.innerHTML = '<%= ride.otp[0] %>'
 -            otp2.innerHTML = '<%= ride.otp[1] %>'
 -            otp3.innerHTML = '<%= ride.otp[2] %>'
 -            otp4.innerHTML = '<%= ride.otp[3] %>'
 -            overlayP.innerHTML = 'OTP for this ride'
 -            customOverlay.appendChild(overlayP)
 -            customOverlay.appendChild(otp1)
 -            customOverlay.appendChild(otp2)
 -            customOverlay.appendChild(otp3)
 -            customOverlay.appendChild(otp4)
 -            mapContainer.appendChild(customOverlay)
 +            const customOverlay = document.createElement('div')
             var marker = L.marker([<%= ride.latitude %>, <%= ride.longitude %>], {icon: redMarker}).addTo(map);
 +        })()
 +        const otpContainer = document.getElementsByClassName('otpContainer')[0]
 +        otpContainer.addEventListener('click', (e) => {
 +            document.getElementById('fullBodyOverlay').style.display = 'flex'
 +            document.getElementById('fullBodyOverlay').style.opacity = '1'
 +        })
 +        function toggleOverlay(e) {
 +            if (e.target != document.getElementById('barcode')) {
 +                e.target.style.display = 'none'
 +                e.target.style.opacity = '0'
 +            }
+        }
 -        showPosition()
+-
         </script>
 </body>
 </html>
-Original file line number
+Diff line change
 +<!DOCTYPE html>
 +<html lang="en">
 +<head>
 +    <meta charset="UTF-8">
 +    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +    <title>Document</title>
 +    <script src="https://cdn.jsdelivr.net/npm/quagga/dist/quagga.min.js"></script>
 +    <script src="https://unpkg.com/bwip-js"></script>
 +</head>
 +<body>
 +    <canvas id="barcode"></canvas>
 +    <div id="barcode-scanner" width="640" height="480"></div>
 +    <button id="btn">Start</button>
 +    <script>
 +        document.getElementById('btn').addEventListener('click', () => {
 +            Quagga.init({
 +                inputStream: {
 +                    name: "Live",
 +                    type: "LiveStream",
 +                    target: "#barcode-scanner"
 +                },
 +                decoder: {
 +                    readers: ["ean_reader", "upc_reader"]
 +                }
 +                }, function(err) {
 +                if (err) {
 +                    console.error(err);
 +                    return;
 +                }
 +                console.log("QuaggaJS initialized successfully");
 +                Quagga.start();
 +            });
 +        })
 +        Quagga.onDetected(function(result) {
 +            console.log("Barcode detected and processed", result);
 +        });
 +        bwipjs.toCanvas(document.getElementById('barcode'), {
 +            bcid: 'code128',
 +            text: 'humbewaaa',
 +            scale: 3,
 +            height: 10,
 +            includetext: false,
 +            barcolor: '#466eff'
 +        }, function (err, canvas) {
 +            if (err) {
 +                console.error(err);
 +            } else {
 +                document.body.appendChild(canvas);
 +            }
 +        });
 +    </script>
 +</body>
 +</html>