Building the View Page and managing it's backend and frontend both. #29 #36

helpers/getOverview.js

@@ -1,8 +1,8 @@
 // Stock Overview Helper Function
-
 const axios = require("axios");
 
 module.exports = async function getOverview(symbol) {
+
   let data = await axios
     .get(
       `https://www.alphavantage.co/query?function=OVERVIEW&symbol=${symbol}&apikey=${process.env.ALPHA_VANTAGE_KEY}`
@@ -14,6 +14,9 @@ module.exports = async function getOverview(symbol) {
       Exchange: resp.data.Exchange,
       Currency: resp.data.Currency,
       Country: resp.data.Country,
+      weeksHigh: resp.data['52WeekHigh'],
+      weeksLow: resp.data['52WeekLow'],
+      Desc: resp.data.Description,
       Sector: resp.data.Sector,
       MarketCap: new Intl.NumberFormat("en-US", {
         style: "currency",
@@ -24,6 +27,12 @@ module.exports = async function getOverview(symbol) {
         currency: "USD",
       }).format(resp.data.EBITDA),
       PERatio: resp.data.PERatio,
+      PriceToBookRatio: resp.data.PriceToBookRatio,
+      EPS: resp.data.EPS,
+      DividendYield: resp.data.DividendYield,
+      BookValue: resp.data.BookValue,
+      ProfitMargin: resp.data.ProfitMargin,
+      RevenueTTM: resp.data.RevenueTTM
     }))
     .catch((err) => {
       console.log(err);

helpers/getPrice.js

@@ -6,8 +6,10 @@ const alpha = require("alphavantage")({
 
 module.exports = async function getPrice(symbol) {
   let stockPrice = alpha.data.quote(symbol).then((res) => {
-    let price = res["Global Quote"]["05. price"];
-    return price;
+    let latestPrice = res["Global Quote"]["05. price"];
+    let low = res["Global Quote"]["04. low"];
+    let high = res["Global Quote"]["03. high"];
+    return {latestPrice,high,low};
   });
   return stockPrice;
 };

public/css/style.css

@@ -10,16 +10,3 @@ body {
   box-sizing: border-box;
 }
 
-.data-table {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 50px 0 30px 0;
-}
-
-.chartjs-container {
-  position: relative;
-  margin: auto;
-  height: 75vh;
-  width: 75vw;
-}

routes/api/cart.js

@@ -17,9 +17,8 @@ const getPrice = require("../../helpers/getPrice");
 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" });
+  res.status(200).render("cart", { layout: "layouts/app", symbol, price, href: '/market', avatar: req.user.image });
+
 });
 
 // @desc    To buy

routes/api/market.js

@@ -15,9 +15,7 @@ const { ensureAuth, ensureGuest } = require("../../middleware/auth");
 // @route    GET /Market
 // @access   Private
 router.get("/", ensureAuth, async (req, res) => {
-  res
-    .status(200)
-    .render("market", { layout: "layouts/app", jsonData, href: "/market" });
+  res.status(200).render("market", { layout: "layouts/app", jsonData, href: '/market', avatar: req.user.image });
 });
 
 module.exports = router;

routes/api/view.js

@@ -4,6 +4,7 @@
 
 const express = require("express");
 const router = express.Router();
+const getPrice = require("../../helpers/getPrice");
 const alpha = require("alphavantage")({
   key: process.env.ALPHA_VANTAGE_KEY,
 });
@@ -17,6 +18,7 @@ const { ensureAuth } = require("../../middleware/auth");
 router.get("/:symbol", ensureAuth, async (req, res) => {
   const symbol = req.params.symbol;
   let data = await getOverview(symbol);
+  let { latestPrice, low, high } = await getPrice(symbol);
   let AssetType = data["AssetType"];
   let assetName = data["Name"];
   let assetExchange = data["Exchange"];
@@ -26,6 +28,15 @@ router.get("/:symbol", ensureAuth, async (req, res) => {
   let MarketCap = data["MarketCap"];
   let Ebitda = data["EBITDA"];
   let PERatio = data["PERatio"];
+  let PriceToBookRatio = data["PriceToBookRatio"];
+  let EPS = data["EPS"];
+  let DividendYield = data["DividendYield"];
+  let BookValue = data["BookValue"];
+  let ProfitMargin = data["ProfitMargin"];
+  let RevenueTTM = data["RevenueTTM"];
+  let Desc = data["Desc"];
+  let weeksLow = data["weeksLow"];
+  let weeksHigh = data["weeksHigh"];
 
   // console.log(data);
   alpha.data
@@ -35,7 +46,6 @@ router.get("/:symbol", ensureAuth, async (req, res) => {
 
       //   const assetInformation = data["Meta Data"]["1. Information"];
       //   const lastRefreshed = data["Meta Data"]["3. Last Refreshed"];
-
       let dates = [];
       let opening = [];
       let closing = [];
@@ -44,7 +54,7 @@ router.get("/:symbol", ensureAuth, async (req, res) => {
       let volumes = [];
       const keys = Object.getOwnPropertyNames(intraDay);
 
-      for (let i = 0; i < 50; i++) {
+      for (let i = 0; i < 40; i++) {
         dates.push(keys[i]);
         opening.push(intraDay[keys[i]]["1. open"]);
         highs.push(intraDay[keys[i]]["2. high"]);
@@ -53,13 +63,15 @@ router.get("/:symbol", ensureAuth, async (req, res) => {
         volumes.push(intraDay[keys[i]]["5. volume"]);
       }
       // reverse so dates appear from left to right
-
       dates.reverse();
       closing.reverse();
       //   dates = JSON.stringify(dates);
       //   closing = JSON.stringify(closing);
 
       res.status(200).render("view", {
+        layout: "layouts/app",
+        href: '/market',
+        avatar: req.user.image,
         symbol,
         data,
         dates,
@@ -77,11 +89,23 @@ router.get("/:symbol", ensureAuth, async (req, res) => {
         MarketCap,
         Ebitda,
         PERatio,
+        PriceToBookRatio,
+        EPS,
+        DividendYield,
+        BookValue,
+        ProfitMargin,
+        RevenueTTM,
+        Desc,
+        latestPrice,
+        high,
+        low,
+        weeksLow,
+        weeksHigh,
       });
     })
     .catch((err) => {
-      // Handle the error
-      console.log(err);
+      console.error(err);
+      res.render("error/500");
     });
 });
 

views/cart.ejs

@@ -1,40 +1,106 @@
-<h1>Cart</h1>
+<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>
+          </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>
 
-<table>
-  <thead>
-    <tr>
-      <th>Company Symbol</th>
-      <th>Price</th>
-      <th>No of Stock</th>
-      <th>Buy</th>
-    </tr>
-  </thead>
-  <tbody>
-    <form action="/cart/buy" method="POST">
-      <tr>
-        <td>
-          <input
-            readonly
-            type="text"
-            name="companySymbol"
-            id="companySymbol"
-            value="<%= symbol %>"
-          />
-        </td>
-        <td>
-          <input
-            readonly
-            type="Number"
-            name="stockPrice"
-            id="stockPrice"
-            value="<%= price %>"
-          />
-        </td>
-        <td>
-          <input type="Number" name="noOfStock" id="noOfStock" value="1" />
-        </td>
-        <td><input type="submit" value="BUY" /></td>
-      </tr>
-    </form>
-  </tbody>
-</table>
+          </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>

views/layouts/app.ejs

@@ -19,7 +19,7 @@
   </head>
 
   <body>
-    <div class="md:flex flex-col md:flex-row md:min-h-screen w-full">
+    <div class="md:flex flex-col bg-gray-300 md:flex-row min-h-screen w-full">
       <%- include('../partials/_nav.ejs') %> <%- body %>
     </div>
     <script src="javascript/script.js"></script>

views/market.ejs

@@ -1,5 +1,5 @@
-<section class="text-gray-700 body-font md:ml-64 md:mx-auto">
-  <div class="container px-5 py-24 mx-auto">
+<section class="text-gray-700 body-font md:pl-64 md:mx-auto">
+  <div class="container px-5 py-24 mx-auto md:px-auto">
     <div class="flex flex-wrap -m-4">
       <% for(var i=0; i < jsonData.length; i++) { %>
 

views/partials/_nav.ejs

@@ -1,10 +1,10 @@
 <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
 <div @click.away="open = false"
-  class="flex flex-col w-full md:w-64 text-gray-700 bg-white flex-shrink-0 md:h-screen md:z-50 md:fixed md:left-0 md:top-0"
+  class="flex flex-col w-full md:w-56 lg:w-64 text-gray-700 bg-white flex-shrink-0 md:h-screen  md:z-50 md:fixed md:left-0 md:top-0"
   x-data="{ open: false }">
   <div class="flex-shrink-0 px-6 py-4 flex flex-row items-center justify-between">
     <h1 class="font-bold uppercase border-b border-gray-100 w-full text-center">
-      <a href="/" class="hover:text-gray-900 tracking-widest text-2xl md:text-3xl pb-2 pt-32">Tradebyte</a>
+      <a href="/" class="hover:text-gray-900 tracking-widest text-2xl md:text-2xl lg:text-3xl pb-2 pt-32">Tradebyte</a>
     </h1>
     <button class="rounded-lg md:hidden rounded-lg focus:outline-none focus:shadow-outline" @click="open = !open">
       <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
@@ -19,10 +19,10 @@
   </div>
   <nav :class="{'block': open, 'hidden': !open}" class="flex-grow md:block px-4 pb-4 md:pb-0">
     <div class="flex justify-center align-center rounded-full">
-      <img class="mx-20 h-20 w-20 border-8 border-blue-600 box-1 rounded-full" src="images/profile.jpg" alt=" " />
+      <img class="h-20 w-20 border-8 border-blue-600 box-1 rounded-full" src="<%= avatar %>" alt="" />
     </div>
-    <a class="block w-2/4 max-w-xs md:w-3/5 p-2 mt-4 mb-8 mx-auto text-xs font-bold text-gray-900 focus:shadow-outline flex justify-center bg-green-200 rounded-full text-green-900 font-bold"
-      href="#"><svg class="w-5 mr-1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+    <a class="block w-2/5 md:w-4/5 max-w-xs lg:w-3/5 p-2 mt-4 mb-8 mx-auto text-xs font-bold text-gray-900 focus:shadow-outline flex justify-center bg-green-200 rounded-full text-green-900 font-bold"
+      href="#"><svg class="w-5 mr-1 " fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
         viewBox="0 0 24 24" stroke="currentColor">
         <path d="M5 13l4 4L19 7"></path>
       </svg>Trading Active</a>

views/portfolio.ejs

@@ -1,4 +1,5 @@
-<main class="relative px-16 py-6 md:col-span-4 bg-gray-300 md:ml-64 md:mx-auto">
+<main class="px-16 py-6 md:col-span-4 bg-gray-300 md:pl-64 md:mx-auto">
+
 
     <!-- header -->