diff options
| -rw-r--r-- | TODO | 26 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | public/css/main.css | 5 | ||||
| -rw-r--r-- | server.js | 112 | ||||
| -rw-r--r-- | views/error.ejs | 2 | ||||
| -rw-r--r-- | views/index.ejs | 188 | ||||
| -rw-r--r-- | views/login.ejs | 2 | ||||
| -rw-r--r-- | views/profile.ejs | 17 | ||||
| -rw-r--r-- | views/signup.ejs | 23 |
9 files changed, 252 insertions, 124 deletions
@@ -0,0 +1,26 @@ +Final: + Header: + [x] Navigation bar with active links + + Body: + [x] Paragraphs + [x] Headings + [x] Lists + [x] Images + [x] Videos + + Footer: + [x] “created by: “ + [ ] List of sources (maybe just W3Schools) + + Additionally: + [x] Divs + [x] Different fonts and colors (styling through CSS) + [x] Background color + + [x] JavaScript inserted in your HTML + + 3 other new things: + [x] 1: MongoDB + [x] 2: Node.js + [x] 2: JSX
\ No newline at end of file diff --git a/package.json b/package.json index 090cbb9..88ce0bd 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "ejs": "^3.1.2", "express": "^4.17.1", "express-session": "^1.17.1", + "formidable": "^1.2.2", "mongoose": "^5.9.12" } } diff --git a/public/css/main.css b/public/css/main.css index 0ff094b..a288d02 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -198,4 +198,9 @@ a { a:hover { /*color: #EA80FC !important;*/ transition: 0.5s; +} + +#example-video { + box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), + 0 15px 12px rgba(0, 0, 0, 0.22); }
\ No newline at end of file @@ -2,6 +2,8 @@ const express = require('express'); const path = require('path'); const bcrypt = require('bcrypt'); const session = require('express-session'); +const formidable = require('formidable'); +const fs = require('fs'); //const ejs = require('ejs'); const mongoose = require('mongoose'); const EntryItem = require('./models/entryItem'); @@ -44,79 +46,48 @@ app.get('/', async (req, res) => { //return next(err); } else { const entryItems = EntryItem; - // const entryItems = await EntryItem.find({user: user.name}); - //console.log(await entryItems.find({"type": "purchase"})); - // (await entryItems.find({ username: user.name, "type": "purchase" })).forEach(entryItem => { - // working - // }); - // let carF; - // let sellerF; - // let priceF; - // let dateF; const loop = await EntryItem.find({ "type": "purchase", user: user.username }); - //console.log(user.username) - //console.log(loop) - // (await loop).forEach(entryItem => { - // carF = entryItem.cars; - // sellerF = entryItem.seller; - // priceF = entryItem.price; - // dateF = entryItem.date; - // }); - // let carX; - // let sellerX; - // let priceX; - // let dateX; + const loopCount = await EntryItem.find({ + "type": "purchase", + "user": user.username + }).countDocuments(); + const loop2 = await EntryItem.find({ "type": "sale", "user": user.username }); - // (await loop2).forEach(entryItem => { - // carX = entryItem.cars; - // sellerX = entryItem.seller; - // priceX = entryItem.price; - // dateX = entryItem.date; - // }); - // let carY; - // let sellerY; - // let priceY; - // let dateY; + const loop2Count = await EntryItem.find({ + "type": "sale", + "user": user.username + }).countDocuments(); + const loop3 = await EntryItem.find({ "type": "trade", "user": user.username }); - // (await loop3).forEach(entryItem => { - // carY = entryItem.cars; - // sellerY = entryItem.seller; - // priceY = entryItem.price; - // dateY = entryItem.date; - // }); + const loop3Count = await EntryItem.find({ + "type": "trade", + "user": user.username + }).countDocuments(); + let EntryCount = await EntryItem.countDocuments(); + let UserCount = await User.countDocuments(); return res.render('index', { req: req, User: User, name: user.username, entryItems: entryItems, user: user, - loop: loop, - // carF: carF, - // sellerF: sellerF, - // priceF: priceF, - // dateF: dateF, - + loopCount: loopCount, loop2: loop2, - // carX: carX, - // sellerX: sellerX, - // priceX: priceX, - // dateX: dateX, - + loop2Count: loop2Count, loop3: loop3, - // carY: carY, - // sellerY: sellerY, - // priceY: priceY, - // dateY: dateY, + loop3Count: loop3Count, + EntryCount: EntryCount, + UserCount: UserCount }); // (await loop1).forEach(entryItem => { // }) @@ -181,7 +152,7 @@ app.post('/submitEntry', async (req, res) => { }); } - return res.redirect('/'); + return res.redirect(req.get('referer')); } }); @@ -238,7 +209,7 @@ app.post('/signup', async (req, res) => { return res.render('error'); } else { req.session.userId = user._id; - return res.redirect('/login'); + return res.redirect('/'); } }); } @@ -258,7 +229,7 @@ app.post('/logout', (req, res, next) => { app.get('/logout', (req, res, next) => { if (req.session) { - req.session.destroy((err) => { + req.session.userId.destroy((err) => { if (err) { return res.render('error'); } else { @@ -309,5 +280,36 @@ app.get('/terms', (req, res) => { res.render('terms'); }); +// app.post('/submitPFP', (req, res) => { +// let form = new formidable.IncomingForm(); +// form.parse(req, (err, fields, files) => { +// let oldPath = files.filetoupload.path; +// let newPath = __dirname + files.filetoupload.name; +// fs.rename(oldPath, newPath, (err) => { +// if (err) throw err; +// res.write('File uploaded and moved!'); +// res.end(); +// }) +// }) +// }); + +app.get('/marketplace', (req, res) => { + res.redirect('/') +}) + +app.post('/closeExampleVideo', async (req, res) => { + req.session.exampleVideo = false; + return res.redirect('/'); +}); + +app.post('/openExampleVideo', async (req, res) => { + req.session.exampleVideo = true; + return res.redirect('/'); +}); + +app.get('*', (req, res) => { + res.redirect('/') +}) + app.listen(80); console.log(`Listening on port 80.`); // honestly have no idea why it says port as undefined fix this when u feel like it )
\ No newline at end of file diff --git a/views/error.ejs b/views/error.ejs index b38f681..05344c0 100644 --- a/views/error.ejs +++ b/views/error.ejs @@ -110,7 +110,7 @@ </div> </div> - <footer> + <footer class="hideme"> <link rel="stylesheet" type="text/css" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" /> Made with <i class="icon ion-heart"></i> by <a href="https://kyzer.co/">Sin</a> (in only 10 hours). diff --git a/views/index.ejs b/views/index.ejs index 04d1cce..48144ba 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -95,12 +95,14 @@ </div> </nav> - <div class="container my-5 hideme"> - <form action="/submitEntry" method="POST" class="my-4 form-inline"> + <div class="container my-5"> + <form action="/submitEntry" method="POST" class="my-4 form-inline hideme"> <div class="row"> <div class="col-sm"> <label for="transactionType" class="sr-only">Type of transaction</label> - <select name="transactionType" id="transactionType" class="form-control mr-2" <% if (name === null) { %> disabled <% } %>> + <select name="transactionType" id="transactionType" class="form-control mr-2" + <% if (name === null) { %> disabled data-toggle="tooltip" data-placement="top" + title="Login to submit" <% } %>> <option value="purchase">Purchase</option> <option value="sale">Sale</option> <option value="trade">Trade</option> @@ -108,16 +110,21 @@ <label for="carsType" class="sr-only">Cars</label> <input type="text" name="carsType" id="carsType" class="form-control mr-2" - placeholder="Car(s)" min="2" max="16" required <% if (name === null) { %> disabled <% } %>> + placeholder="Car(s)" min="2" max="16" required <% if (name === null) { %> disabled + data-toggle="tooltip" data-placement="top" + title="Login to submit" <% } %>> <label for="sellerType" class="sr-only">Seller, Buyer or Trader's Name</label> <input type="text" name="sellerType" id="sellerType" class="form-control mr-2" placeholder="Seller/ Buyer/ Trader's Name" min="1" max="50" required - <% if (name === null) { %> disabled <% } %>> + <% if (name === null) { %> disabled data-toggle="tooltip" data-placement="top" + title="Login to submit" <% } %>> <label for="priceType" class="sr-only">Price or Received Cars</label> <input type="text" name="priceType" id="priceType" class="form-control mr-2" placeholder="Price/ Received Car(s)" min="1" required <% if (name === null) { %> disabled + data-toggle="tooltip" data-placement="top" + title="Login to submit" <% } %>> <% if (name === null) { %> @@ -131,116 +138,175 @@ </div> </form> - <div class="row"> + <div class="row"> <div class="col-sm"> - <h3 id="white-txt">Purchases</h3> + <h3 id="white-txt" class="hideme">Purchases</h3> <table class="table table-striped"> - <thead> + <thead class="hideme"> <tr> - <th id="white-txt">Car(s)</th> - <th id="white-txt">Seller</th> - <th id="white-txt">Price</th> - <th id="white-txt">TOS</th> + <th id="white-txt" class="hideme">Car(s)</th> + <th id="white-txt" class="hideme">Seller</th> + <th id="white-txt" class="hideme">Price</th> + <th id="white-txt" class="hideme" data-toggle="tooltip" data-placement="top" + title="Time of Sale">TOS</th> </tr> </thead> - <tbody> + <tbody class="hideme"> <% if (name === null) { %> <tr> - <td id="white-txt" class="highlightable">RX7</td> - <td id="white-txt" class="highlightable">Sin</td> - <td id="white-txt" class="highlightable">150000</td> - <td id="white-txt" class="highlightable">2020-05-06T08:08:34.827Z</td> + <td id="white-txt" class="highlightable hideme">RX7</td> + <td id="white-txt" class="highlightable hideme">Sin</td> + <td id="white-txt" class="highlightable hideme">150000</td> + <td id="white-txt" class="highlightable hideme">2020-05-06T08:08:34.827Z</td> </tr> <% } else { %> - <% loop.forEach(lp => { %> + <% if (loopCount < 1) { %> <tr> - <td id="white-txt" class="highlightable"><%= lp.cars %></td> - <td id="white-txt" class="highlightable"><%= lp.seller %></td> - <td id="white-txt" class="highlightable"><%= lp.price %></td> - <td id="white-txt" class="highlightable"><%= lp.date %></td> + <td id="white-txt" class="highlightable hideme"></td> + <td id="white-txt" class="highlightable hideme"></td> + <td id="white-txt" class="highlightable hideme"></td> + <td id="white-txt" class="highlightable hideme"></td> </tr> - <% }) %> + <% } else { %> + <% loop.forEach(lp => { %> + <tr> + <td id="white-txt" class="highlightable hideme"><%= lp.cars %></td> + <td id="white-txt" class="highlightable hideme"><%= lp.seller %></td> + <td id="white-txt" class="highlightable hideme"><%= lp.price %></td> + <td id="white-txt" class="highlightable hideme"><%= lp.date %></td> + </tr> + <% }) %> + <% } %> <% } %> </tbody> </table> </div> <div class="col-sm"> - <h3 id="white-txt">Sales</h3> + <h3 id="white-txt" class="hideme">Sales</h3> <table class="table table-striped"> - <thead> + <thead class="hideme"> <tr> - <th id="white-txt">Car(s)</th> - <th id="white-txt">Buyer</th> - <th id="white-txt">Price</th> - <th id="white-txt">TOS</th> + <th id="white-txt" class="hideme">Car(s)</th> + <th id="white-txt" class="hideme">Buyer</th> + <th id="white-txt" class="hideme">Price</th> + <th id="white-txt" class="hideme" data-toggle="tooltip" data-placement="top" + title="Time of Sale">TOS</th> </tr> </thead> - <tbody> + <tbody class="hideme"> <% if (name === null) { %> <tr> - <td id="white-txt" class="highlightable">R34</td> - <td id="white-txt" class="highlightable">Sin</td> - <td id="white-txt" class="highlightable">180000</td> - <td id="white-txt" class="highlightable">2020-05-04T02:02:56.8F9J</td> + <td id="white-txt" class="highlightable hideme">R34</td> + <td id="white-txt" class="highlightable hideme">Sin</td> + <td id="white-txt" class="highlightable hideme">180000</td> + <td id="white-txt" class="highlightable hideme">2020-05-04T02:02:56.8F9J</td> </tr> <% } else { %> - <% loop2.forEach(lp => { %> + <% if (loop2Count < 1) { %> <tr> - <td id="white-txt" class="highlightable"><%= lp.cars %></td> - <td id="white-txt" class="highlightable"><%= lp.seller %></td> - <td id="white-txt" class="highlightable"><%= lp.price %></td> - <td id="white-txt" class="highlightable"><%= lp.date %></td> + <td id="white-txt" class="highlightable hideme"></td> + <td id="white-txt" class="highlightable hideme"></td> + <td id="white-txt" class="highlightable hideme"></td> + <td id="white-txt" class="highlightable hideme"></td> </tr> - <% }) %> + <% } else { %> + <% loop2.forEach(lp => { %> + <tr> + <td id="white-txt" class="highlightable hideme"><%= lp.cars %></td> + <td id="white-txt" class="highlightable hideme"><%= lp.seller %></td> + <td id="white-txt" class="highlightable hideme"><%= lp.price %></td> + <td id="white-txt" class="highlightable hideme"><%= lp.date %></td> + </tr> + <% }) %> + <% } %> <% } %> </tbody> </table> </div> <div class="col-sm"> - <h3 id="white-txt">Trades</h3> + <h3 id="white-txt" class="hideme">Trades</h3> <table class="table table-striped"> - <thead> + <thead class="hideme"> <tr> <th id="white-txt">Received Car(s)</th> <th id="white-txt">Trader</th> <th id="white-txt">Traded Car(s)</th> - <th id="white-txt">TOS</th> + <th id="white-txt" data-toggle="tooltip" data-placement="top" title="Time of Sale">TOS</th> </tr> </thead> - <tbody> + <tbody class="hideme"> <% if (name === null) { %> <td id="white-txt" class="highlightable">R32</td> <td id="white-txt" class="highlightable">Sin</td> <td id="white-txt" class="highlightable">R34</td> <td id="white-txt" class="highlightable">2020-05-02T06:21:23.2J7F</td> <% } else { %> - <% loop3.forEach(lp => { %> + <% if (loop3Count < 1) { %> <tr> - <td id="white-txt" class="highlightable"><%= lp.cars %></td> - <td id="white-txt" class="highlightable"><%= lp.seller %></td> - <td id="white-txt" class="highlightable"><%= lp.price %></td> - <td id="white-txt" class="highlightable"><%= lp.date %></td> + <td id="white-txt" class="highlightable"></td> + <td id="white-txt" class="highlightable"></td> + <td id="white-txt" class="highlightable"></td> + <td id="white-txt" class="highlightable"></td> </tr> - <% }) %> + <% } else { %> + <% loop3.forEach(lp => { %> + <tr> + <td id="white-txt" class="highlightable"><%= lp.cars %></td> + <td id="white-txt" class="highlightable"><%= lp.seller %></td> + <td id="white-txt" class="highlightable"><%= lp.price %></td> + <td id="white-txt" class="highlightable"><%= lp.date %></td> + </tr> + <% }) %> + <% } %> <% } %> </tbody> </table> </div> </div> - <div class="newest hideme" style="position: absolute; top: 5%; left: 5%;"> - <h1 id="white-txt">TODO:</h1> - <ul style="position: relative; left: -25%;"> - <li id="white-txt">Add more API features</li> - <li id="white-txt">Add delete and change features (lol)</li> - <li id="white-txt">Add marketplace</li> - <li id="white-txt">Add automated password, email and<br /> username change requests</li> - <li id="white-txt">Add feature which imports old Sin's <br /> SS Logger desktop app data into web app.</li> - </ul> - </div> + <% if (name === 'sin') { %> + <div class="newest hideme" style="position: fixed; top: 5%; left: 5%;"> + <table class="table table-striped"> + <thead> + <tr> + <th id="white-txt">Users</th> + <th id="white-txt">Entries</th> + <th id="white-txt">Uptime</th> + </tr> + </thead> + <tbody> + <tr> + <td id="white-txt" class="highlightable"><%= UserCount %></td> + <td id="white-txt" class="highlightable"><%= EntryCount %></td> + <td id="white-txt" class="highlightable"><%= process.uptime() %></td> + </tr> + </tbody> + </table> + </div> + <% } %> + + <% if (req.session.exampleVideo) { %> + <div class="example-video__container hideme" style="position: absolute; bottom: 15px; left: 15px;"> + <form action="/closeExampleVideo" method="post"> + <button type="submit" class="btn btn-danger" style="float: right; font-size: 10px !important;" + data-toggle="tooltip" data-placement="top" title="Close the demo">Close Demo</button> + </form> + <br /> + + <iframe src="https://streamable.com/e/669gny?autoplay=1" width="578" height="325" frameborder="0" + allowfullscreen id="example-video"></iframe> + </div> + <% } else { %> + <div class="example-video__container hideme" style="position: fixed; bottom: 15px; left: 15px;"> + <form action="/openExampleVideo" method="post"> + <button type="submit" class="btn btn-info" + style="float: right; font-size: 10px !important;" data-toggle="tooltip" data-placement="top" title="Re-watch the demo">Re-watch Demo</button> + </form> + </div> + <% } %> </div> - <footer> + <footer class="hideme"> <link rel="stylesheet" type="text/css" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" /> Made with <i class="icon ion-heart"></i> by <a href="https://kyzer.co/">Sin</a> (in only 10 hours). diff --git a/views/login.ejs b/views/login.ejs index f7f0b6f..c282b7f 100644 --- a/views/login.ejs +++ b/views/login.ejs @@ -122,7 +122,7 @@ </div> </div> - <footer> + <footer class="hideme"> <link rel="stylesheet" type="text/css" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" /> Made with <i class="icon ion-heart"></i> by <a href="https://kyzer.co/">Sin</a> (in only 10 hours). diff --git a/views/profile.ejs b/views/profile.ejs index b949794..ff15c3b 100644 --- a/views/profile.ejs +++ b/views/profile.ejs @@ -106,9 +106,20 @@ <div class="col-sm"></div> <div class="col-sm"> <h4 class="pt-4" id="white-txt"> - <a href="https://www.youtube.com/watch?v=ZClu_I6U6aM" id="deez-nuts"> - <%= name %> + <a href="https://www.youtube.com/watch?v=ZClu_I6U6aM" id="deez-nuts" data-toggle="tooltip" + data-placement="top" title="Oh no, you found me..."> + <%= name %> </a> + <br /> + + <img src="https://i.imgur.com/qrrXOst.jpg" + alt="Profile Picture Default" width="120px" class="pt-4"> + <small class="form-text text-muted" style="font-size: 15px;">Custom PFPs coming soon!</small> + + <!-- <form action="/submitPFP" method="post"> + <input type="file" id="pfp-img" name="pfp-img" accept="image/*" required style="font-size: 16px;"> + <input type="submit" style="font-size: 16px;"> + </form> --> </h4> <form action="/logout" method="POST" class="my-4"> <div class="form-group"> @@ -123,7 +134,7 @@ </div> </div> - <footer> + <footer class="hideme"> <link rel="stylesheet" type="text/css" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" /> Made with <i class="icon ion-heart"></i> by <a href="https://kyzer.co/">Sin</a> (in only 10 hours). diff --git a/views/signup.ejs b/views/signup.ejs index b6b0eae..3d1356b 100644 --- a/views/signup.ejs +++ b/views/signup.ejs @@ -100,7 +100,7 @@ <div class="form-group"> <label for="emailSignup" class="sr-only">Email</label> <input type="email" name="emailSignup" id="emailSignup" class="form-control mr-2" - placeholder="Email" pattern=".{6,}" required> + placeholder="Email" pattern=".{6,}"> <small id="loginUserhelp" class="form-text text-muted">Don't worry, we never share your email with anyone. Fake users will be pruned and deleted.</small> </div> <div class="form-group"> @@ -111,8 +111,25 @@ </div> <div class="form-group"> <label for="passSignup" class="sr-only">Password</label> - <input type="password" name="passSignup" id="passSignup" class="form-control mr-2" + <input type="password" name="passSignup" id="passSignup" class="form-control mr-2 mb-2" placeholder="Password" pattern=".{3,}" required> + <input type="password" name="passSignupCheck" id="passSignupCheck" class="form-control mr-2" + placeholder="Confirm Password" pattern=".{3,}" required> + <script> + var password = document.getElementById("passSignup"), + confirm_password = document.getElementById("passSignupCheck"); + + function validatePassword() { + if (password.value != confirm_password.value) { + confirm_password.setCustomValidity("Passwords do not match!"); + } else { + confirm_password.setCustomValidity(''); + } + } + + password.onchange = validatePassword; + confirm_password.onkeyup = validatePassword; + </script> <small id="loginUserhelp" class="form-text text-muted">Pick something secure and easy to remember! Must be atleast 3 characters.</small> <div> <input type="checkbox" class="form-check-input" id="terms-check" required style="margin-left: 0 !important; margin-top: .45rem;"> @@ -132,7 +149,7 @@ </div> </div> - <footer> + <footer class="hideme"> <link rel="stylesheet" type="text/css" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" /> Made with <i class="icon ion-heart"></i> by <a href="https://kyzer.co/">Sin</a> (in only 10 hours). |