fixed pagination, added tooltip that display date to the table

Joshuajee · Apr 10, 2021 · a643aa3 · a643aa3
1 parent 0bc73db
commit a643aa3
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 25 deletions.
diff --git a/index.js b/index.js
@@ -51,7 +51,10 @@ app.get("/symbol/:symbol/:start", (req, res) => {
     let page = parseInt(req.params.start)
     let dataPerPage = 20
     let start = 1 + (page - 1) * dataPerPage 
-    let end = start + dataPerPage - 1
+    let next = page + 1
+    let notFirstPage = page !== 1
+
+
 
     symbols.find({name:caption}, (err, data) => {
 
@@ -63,25 +66,42 @@ app.get("/symbol/:symbol/:start", (req, res) => {
 
             console.log(data)
 
-            for(let i = 0; i < data.length; i++) data[i].index = start + i
+            let dataLength = -1
+
+            for(let i = 0; i < data.length; i++){
+
+                data[i].index = start + i
+                dataLength++
+
+            }
+
+            for(let i = 0; i < numberOfPages; i++){
 
-            for(let i = 0; i < numberOfPages; i++) pages.push(i + 1)
+                if(page === i + 1)
+                    pages.push([i + 1, caption, true])
+                else
+                    pages.push([i + 1, caption, false])
+
+            }
+
+            let end = start + dataLength
+            let notLastPage = page !== numberOfPages
 
-            res.render('symbol', {data, caption, start, end, pages, page});
+            res.render('symbol', {data, caption, start, end, pages, next, notFirstPage, notLastPage});
 
             console.log("Start : ", start)
             console.log("Count : ", count)
             console.log("Number Of Pages : ", numberOfPages)
+            console.log(notFirstPage)
 
         })
 
 
-    }).lean().skip(start).limit(dataPerPage).sort({timeStamp:-1})
-
-
+    }).lean().skip(start - 1).limit(dataPerPage).sort("-timeStamp")
 
 })
 
+
 app.get("/ping", (req, res) => {
 
 

diff --git a/views/home.hbs b/views/home.hbs
@@ -1,5 +1,9 @@
-<ul>
+<center>
+
+    <h4> Get Data Gotten From Myfxbook </h4>
+
     {{#each symbol}}
-        <li><a href=symbol/{{this}}/1> {{this}} </a> </li>
+        <a href=symbol/{{this}}/1> {{this}} </a> ||
     {{/each}}
-</ul>
+
+</center>
diff --git a/views/layouts/main.hbs b/views/layouts/main.hbs
@@ -27,24 +27,23 @@
   border-radius: 6px;
  
   /* Position the tooltip text - see examples below! */
-  position: absolute;
-  top: 50vh;
   z-index: 1;
 }
 
 /* Show the tooltip text when you mouse over the tooltip container */
 .tooltip:hover .tooltiptext {
   visibility: visible;
   position: fixed;
-  top: 10vh;
-  left: 20vw;
+  min-width: 250px;
+  max-width: 350px;
 }
 </style>
-    <!---
+
     <meta
       name="description"
       content="Download Forex sentiments and Historical data on forex sentiment data Gotten from myfxbook.com"
     />
+    <!---
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     -->
     <title>My Forexbook</title>
@@ -63,6 +62,14 @@
 
     <!-- Compiled and minified JavaScript -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+
+    <script type="text/javascript">
+
+      var elems = document.querySelectorAll('.tooltipped');
+      var options = {}
+      var instances = M.Tooltip.init(elems, options);
+    
+    </script>
 
 
 </html>
diff --git a/views/symbol.hbs b/views/symbol.hbs
@@ -17,11 +17,12 @@
 
     {{#each data}}
 
-        <tr class="tooltip">
-            <td> {{index}} </td> <td> {{shortPercentage}}% </td> <td>{{longPercentage}}% </td> 
+        <tr class="tooltipped" data-position="left" data-tooltip="{{date}}">
+
+            <td> {{index}}</td> <td> {{shortPercentage}}% </td> <td>{{longPercentage}}% </td> 
             <td> {{shortVolume}} lots </td> <td> {{longVolume}} lots </td> <td> {{totalPositions}} </td>
             <td> {{avgShortPrice}} </td>  <td> {{avgLongPrice}} </td>
-            <td> <span class="tooltiptext">{{date}}</span> </td>
+
         </tr>
 
     {{/each}}
@@ -33,21 +34,28 @@
 <center>
 
     <ul class="pagination">
-
-        <li class="disabled"><a href="/symbol/{{caption}}/1"><i class="material-icons">chevron_left</i></a></li>
+
+    {{#if notFirstPage}}
+        <li><a href="/symbol/{{caption}}/1"><i class="material-icons">chevron_left</i></a></li>
+    {{/if}}
 
     {{#each pages}}
 
-        {{#if this}}
-            <li class="waves-effect active"><a href="/symbol/{{caption}}/{{this}}">{{this}}</a></li>
+        {{#if this.[2]}}
+
+            <li class="waves-effect active"><a href=/symbol/{{this.[1]}}/{{this.[0]}}>{{this.[0]}}</a></li>
+
         {{else}}
-            <li class="waves-effect"><a href="/symbol/{{caption}}/{{this}}">{{this}}</a></li>
+
+            <li class="waves-effect"><a href=/symbol/{{this.[1]}}/{{this.[0]}}>{{this.[0]}}</a></li>
+
         {{/if}}
 
     {{/each}}
-
-        <li class="waves-effect"><a href="/symbol/{{caption}}/6"><i class="material-icons">chevron_right</i></a></li>
 
+    {{#if notLastPage}}
+        <li class="waves-effect"><a href=/symbol/{{caption}}/{{next}}><i class="material-icons">chevron_right</i></a></li>
+    {{/if}}
     </ul>
 
 </center>