Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Worked on Cart Frontend and Backend both while fixing some UI issues. Fixes#29 #45

Merged
merged 4 commits into from
Aug 18, 2020
+165 −174
Merged

Worked on Cart Frontend and Backend both while fixing some UI issues. Fixes#29 #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9fb5d84
Improved Cart UI & managed some backend calcs
fabcodingzest Aug 17, 2020
e105ea1
Improved Cart UI with Company logos
fabcodingzest Aug 17, 2020
4b97491
Merge branch 'master' of https://github.com/iampavangandhi/TradeByte …
fabcodingzest Aug 18, 2020
f8f772c
Improving cart, fixing market & portfolio UI bugs
fabcodingzest Aug 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions helpers/getCompanyNameAndLogo.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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