Skip to content

Commit

Permalink
Merge pull request #45 from fabcodingzest/fix_Cart/#29
Browse files Browse the repository at this point in the history 
Worked on Cart Frontend and Backend both while fixing some UI issues. Fix/#29
  • Loading branch information
@iampavangandhi
iampavangandhi authored Aug 18, 2020
2 parents 1d055bf + f8f772c commit 7036d59
Show file tree
Hide file tree
Showing 6 changed files with 165 additions and 174 deletions.
21 changes: 21 additions & 0 deletions helpers/getCompanyNameAndLogo.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
// Get Stock Company symbol Function
const axios = require("axios");

module.exports = async function getCompanyNameAndLogo(symbol) {

let data = await axios
.get(
`https://www.alphavantage.co/query?function=OVERVIEW&symbol=${symbol}&apikey=${process.env.ALPHA_VANTAGE_KEY}`
)
.then(async (resp) => {
let companyName = resp.data.Name;
console.log(companyName);
let logoSrc = await axios.get(`https://autocomplete.clearbit.com/v1/companies/suggest?query=:${companyName.split(' ')[0]}`).then((resp) => resp.data[0].logo).catch(err => console.log(err));
return { companyName, logoSrc };
})
.catch((err) => {
console.log(err);
});

return data;
};
16 changes: 7 additions & 9 deletions routes/api/cart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const { ensureAuth } = require("../../middleware/auth");

const User = require("../../models/User");
const getPrice = require("../../helpers/getPrice");
const getCompanyNameAndLogo = require("../../helpers/getCompanyNameAndLogo");

// TODO
// Stocks Cart Buy/Sell
Expand All @@ -16,24 +17,21 @@ 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);
const { companyName, logoSrc } = await getCompanyNameAndLogo(symbol);
res.status(200).render("cart", { layout: "layouts/app", symbol, latestPrice, logoSrc, companyName, href: '/market', avatar: req.user.image });
});

// @desc To buy
// @route POST /cart/buy
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
177 changes: 72 additions & 105 deletions views/cart.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,106 +1,73 @@
<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-56 lg: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 grig-gap-0 md:gap-4 lg:grid-rows-3 bg-white shadow-md p-2 lg:p-6 text-center">
<div class="text-xs text-left lg:text-lg font-bold uppercase flex items-center lg:justify-center">
Company Name
</div>
<div class="text-xs lg:text-lg font-bold flex items-center lg:items-center lg:row-span-2">
<div class="flex flex-col items-center justify-center w-full">
<img class="hidden lg:block h-16" src="<%= logoSrc %> " alt="<%= companyName %>">
<p class="font-medium text-left text-xs md:text-sm lg:text-center lg:text-lg w-full md:break-all"
><%= companyName %></p>
</div>
</div>
<div
class="hidden md:block text-xs lg:text-lg font-bold uppercase md:flex md:items-center md:justify-center lg:items-start">
Unit Price
</div>
<div class="hidden md:block md:flex md:justify-center text-xs lg:text-lg font-bold uppercase lg:row-span-2">
<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 text-xs text-center font-semibold uppercase flex items-center justify-center">
Qty
</div>
<div
class="hidden md:block text-xs lg:text-lg font-bold uppercase md:flex md:items-center md:justify-center lg:items-start">
Quantity
</div>
<div class=" text-xs lg:text-lg font-bold uppercase flex items-center justify-center lg:row-span-2">
<div class="h-8">
<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=" text-xs lg:text-lg text-right font-bold uppercase flex items-center justify-end lg:items-start">
Total Price
</div>
<div class=" text-xs lg:text-lg font-bold uppercase flex items-center justify-end lg:row-span-2">
<p class="text-xs md: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-black font-semibold text-xs lg:text-sm py-3 px-4 rounded"><span
class="hidden md:inline-block">Proceed to</span> 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>
18 changes: 9 additions & 9 deletions views/market.ejs
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<section class="text-gray-700 body-font md:ml-64 md:mx-auto md:pl-8 md:pr-14 w-screen inline">
<section class="text-gray-700 body-font md:ml-56 lg:ml-64 md:mx-auto md:pr-14 w-screen inline">
<div class="container px-5 py-10 mx-auto md:px-auto">
<div class="my-4 absolute-center">
<h4 class="text-gray-700 lg:text-6xl text-5xl font-semibold leading-none tracking-wider px-5">Favorite Stocks</h2>
</div>
<div class="container px-5 py-16 mx-auto pl-4">
<div class="container py-16 mx-auto">

<div class="flex -m-4 inline-block overflow-x-auto whitespace-no-wrap">
<% for(var i=0; i < compactData.length; i++) { %>
Expand Down Expand Up @@ -40,17 +40,17 @@


<!-- genral stocks section -->
<div class="pr-12">
<div class="px-auto">
<div class="my-4 absolute-center pt-20">
<h4 class="text-gray-700 lg:text-6xl text-5xl font-semibold leading-none tracking-wider px-5">Trending Stocks</h2>
</div>

<div class="md:flex -m-4 inline-block flex-wrap pt-10">
<div class="md:flex -m-4 inline-block mx-auto w-full flex-wrap pt-10">
<% for(var i=min; i < max; i++) { %>
<div class="lg:w-1/4 md:w-1/2 p-4 w-54">
<div class="py-6 max-w-sm rounded overflow-hidden shadow-lg hover:bg-white transition duration-500 bg-white ">
<div class="space-y-10">
<div class="lg:w-1/4 md:w-1/2 p-4 w-54 flex justify-center">
<div class="flex items-center justify-center py-6 min-h-full w-full rounded overflow-hidden shadow-lg hover:bg-white transition duration-500 bg-white ">
<div class="space-y-10 w-full">
<div class="py-2 px-4 md:px-10">
<div class="space-y-5">
<div class="font-bold text-2xl text-center mb-2">
Expand All @@ -59,8 +59,8 @@
<p class="text-gray-700 text-center text-base">
<%- totalData[i]["Company Name"] %>
</p>
<div class="flex justify-between px-6 md:px-2">
<button class="w-14 bg-white tracking-wide text-gray-700 font-bold rounded border-b-2 border-blue-500 hover:border-blue-600 hover:bg-blue-500 hover:text-white shadow-md py-2 px-2 inline-flex items-center">
<div class="flex justify-around px-6 md:px-2 w-2/3 mx-auto">
<button class="mr-1 w-14 bg-white tracking-wide text-gray-700 font-bold rounded border-b-2 border-blue-500 hover:border-blue-600 hover:bg-blue-500 hover:text-white shadow-md py-2 px-2 inline-flex items-center">
<span class="mx-auto"><a href="/view/<%- totalData[i]["Symbol"] %>">VIEW</a></span>
</button>
Expand Down
Loading

0 comments on commit 7036d59

Please sign in to comment.