Skip to content

Commit

Permalink
Improved Cart UI & managed some backend calcs
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabcodingzest
fabcodingzest committed Aug 17, 2020
1 parent f70181b commit 9fb5d84
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 113 deletions.
13 changes: 5 additions & 8 deletions routes/api/cart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ const getPrice = require("../../helpers/getPrice");
// @route GET /cart/:symbol
router.get("/:symbol", ensureAuth, async (req, res) => {
const symbol = req.params.symbol;
const price = await getPrice(symbol);
res.status(200).render("cart", { layout: "layouts/app", symbol, price, href: '/market', avatar: req.user.image });
const {latestPrice} = await getPrice(symbol);
res.status(200).render("cart", { layout: "layouts/app", symbol, latestPrice, href: '/market', avatar: req.user.image });

});

Expand All @@ -26,14 +26,11 @@ router.get("/:symbol", ensureAuth, async (req, res) => {
router.post("/buy", ensureAuth, async (req, res) => {
let data = req.body;
let user = req.user;
let stockPrice = req.body.stockPrice;
let noOfStock = req.body.noOfStock;
let totalAmount = stockPrice * noOfStock;
let stockPrice = data.stockPrice;
let noOfStock = data.noOfStock;
let totalAmount = parseFloat(stockPrice * noOfStock).toFixed(4);

try {
console.log(req.user);
console.log(req.body);
// req.body.user = req.user.id
if (totalAmount > req.user.balance) {
let ExtraBalance = totalAmount - req.user.balance;
res.render("transaction", {
Expand Down
172 changes: 67 additions & 105 deletions views/cart.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,106 +1,68 @@
<div class="flex flex-col w-full py-8 px-4 md:py-16 md:px-8 text-gray-800 md:w-full md:ml-64">
<h1 class="text-2xl lg:text-4xl font-bold">Buy Stock</h1>
<div>
<table class="w-full text-sm lg:text-base border-4 " cellspacing="0">
<thead>
<tr class="h-12 uppercase">
<th class="text-left">Product</th>
<th class="lg:text-right text-left pl-5 lg:pl-0">
<span class="lg:hidden" title="Quantity">Qtd</span>
<span class="hidden lg:inline">Quantity</span>
</th>
<th class="hidden text-right md:table-cell">Unit price</th>
<th class="text-right">Total price</th>
</tr>
</thead>
<tbody>
<tr class="bg-gray-600 border-b-2 text-white">
<td>
<a href="#">
<p class="mb-2 md:ml-4">Earphone</p>
<form action="" method="POST">
<button type="submit" class="md:ml-4">
<small>(Remove item)</small>
</button>
</form>
</a>
</td>
<td class="justify-center md:justify-end md:flex mt-2">
<div class="w-20 h-10">
<div class="relative flex flex-row w-full h-8">
<input type="number" value="1"
class="w-full font-semibold text-center text-gray-700 bg-gray-200 outline-none focus:outline-none hover:text-black focus:text-black" />
</div>
<div class="relative md:ml-64 py-6 px-3 w-full">
<div class="mx-auto max-w-6xl flex flex-col w-full px-4 md:py-12 md:px-8 text-gray-800">
<h1 class="text-2xl lg:text-4xl font-bold mt-8 mb-4">Buy Stock</h1>
<form action="/cart/buy" method="POST">
<div class="w-full text-sm lg:text-base border-4">
</div>
<div
class="new grid grid-flow-col grid-cols-3 md:grid-cols-4 grid-rows-2 md:gap-4 bg-white shadow-md p-2 lg:p-6 text-center">
<div class="head text-xs text-left lg:text-lg font-bold uppercase">
Company Name
</div>
<div class="head text-xs lg:text-lg font-bold uppercase">
<input class="text-sm font-medium text-left text-xs lg:text-lg w-full" value="<%= symbol %>"
name="companySymbol" id="companySymbol" readonly />
</div>
<div class="hidden md:block head text-xs lg:text-lg font-bold uppercase">
Unit Price
</div>
<div class="hidden md:block head text-xs lg:text-lg font-bold uppercase">
<input class="text-sm lg:text-center font-medium text-xs lg:text-lg w-full text-center"
value="<%= latestPrice %>" name="stockPrice" id="stockPrice" readonly />
</div>
<div class="md:hidden head text-xs font-semibold uppercase">
Qty
</div>
<div class="hidden md:block head text-xs lg:text-lg font-bold uppercase">
Quantity
</div>
<div class="head text-xs lg:text-lg font-bold uppercase">
<div class="h-10">
<div class="relative flex flex-row w-full h-8">
<input type="number" value="1" min=1 name="noOfStock" id="noOfStock"
class="w-full font-semibold text-center text-gray-700 bg-gray-200 outline-none focus:outline-none hover:text-black focus:text-black" />
</div>
</td>
<td class="hidden text-right md:table-cell">
<span class="text-sm lg:text-base font-medium">
10.00€
</span>
</td>
<td class="text-right">
<span class="text-sm lg:text-base font-medium pr-1">
20.00€
</span>
</td>
</tr>
<tr class="bg-gray-600 border-b-2 text-white">
<td>
<p class="mb-2 md:ml-4">Tesla Model 3</p>
<form action="" method="POST">
<button type="submit" class="700 md:ml-4">
<small>(Remove item)</small>
</button>
</form>
</td>
<td class="justify-center md:justify-end md:flex md:mt-4">
<div class="w-20 h-10">
<div class="relative flex flex-row w-full h-8">
<input type="number" value="1"
class="w-full font-semibold text-center text-gray-700 bg-gray-200 outline-none focus:outline-none hover:text-black focus:text-black" />
</div>
</div>
</td>
<td class="hidden text-right md:table-cell">
<span class="text-sm lg:text-base font-medium">
49,600.01€
</span>
</td>
<td class="text-right">
<span class="text-sm lg:text-base font-medium pr-1">
148,800.03€
</span>
</td>
</tr>
<tr class="bg-gray-600 border-b-2 text-white">
<td>
<p class="mb-2 md:ml-4">Bic 4 colour pen</p>
<form action="" method="POST">
<button type="submit" class="md:ml-4">
<small>(Remove item)</small>
</button>
</form>
</td>
<td class="justify-center md:justify-end md:flex md:mt-4">
<div class="w-20 h-10">
<div class="relative flex flex-row w-full h-8">
<input type="number" value="1"
class="w-full font-semibold text-center text-gray-700 bg-gray-200 outline-none focus:outline-none hover:text-black focus:text-black" />
</div>
</div>

</td>
<td class="hidden text-right md:table-cell">
<span class="text-sm lg:text-base font-medium">
1.50€
</span>
</td>
<td class="text-right">
<span class="text-sm lg:text-base font-medium pr-1">
7.50€
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="head text-xs lg:text-lg text-right font-bold uppercase">
Total Price
</div>
<div class="head text-xs lg:text-lg font-bold uppercase">
<p class="text-sm font-medium text-right text-xs lg:text-lg break-words" id="totalPrice">
<span class="total-price">
<%= latestPrice %>
</span>$
</p>
</div>
</div>
<div class="flex justify-end w-full items-center">
<a href="/market"
class="block uppercase ml-0 md:ml-auto mt-4 shadow bg-blue-800 hover:bg-indigo-700 focus:shadow-outline focus:outline-none text-white font-semibold text-xs lg:text-sm py-3 px-4 rounded">Back
to Market</a>
<button type='submit'
class="block uppercase mt-4 ml-4 shadow bg-yellow-500 hover:bg-yellow-600 focus:shadow-outline focus:outline-none text-white font-semibold text-xs lg:text-sm py-3 px-4 rounded">Proceed
to Checkout</button>
</div>
</form>
</div>
</div>
<script>
const stockPrice = document.querySelector('#stockPrice')
const noOfStock = document.querySelector('#noOfStock')
const totalPrice = document.querySelector('.total-price')
noOfStock.addEventListener('change', (e) => {
e.preventDefault()
const val = e.target.value
totalPrice.textContent = parseFloat(stockPrice.value * val).toFixed(4)
})
</script>

0 comments on commit 9fb5d84

Please sign in to comment.