Pagination on main page

app.js

@@ -30,11 +30,11 @@ app.use(bodyParser.urlencoded({ extended: false }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));
 
-app.use('/', index);
 app.use('/address', address);
 app.use('/transaction', transaction);
 app.use('/block', block);
 app.use('/search', search);
+app.use('/', index);
 
 // catch 404 and forward to error handler
 app.use(function(req, res, next) {

package.json

@@ -18,17 +18,17 @@
   },
   "dependencies": {
     "body-parser": "~1.18.2",
-    "cookie-parser": "~1.4.3",
+    "cookie-parser": "^1.4.5",
     "debug": "~2.6.9",
-    "express": "^4.16.4",
+    "express": "^4.17.1",
     "forever": "^0.15.3",
-    "fs-ext": "^1.2.1",
-    "moment": "^2.24.0",
+    "fs-ext": "^1.3.0",
+    "moment": "^2.29.1",
     "morgan": "~1.9.0",
-    "mysql": "^2.15.0",
-    "mysql2": "^1.5.1",
-    "pug": "^2.0.0-rc.4",
-    "sequelize": "^5.1.0",
+    "mysql": "^2.18.1",
+    "mysql2": "^1.7.0",
+    "pug": "^2.0.4",
+    "sequelize": "^5.22.3",
     "sequelize-cli": "^3.2.0",
     "serve-favicon": "~2.4.5"
   }

public/stylesheets/style.css

@@ -85,3 +85,13 @@ div.pagination {
   overflow: hidden;
   margin-top: .5em;
 }
+
+div.pagination-wrapper {
+  margin-top: .5em;
+  text-align: center;
+}
+
+div.pagination-wrapper .paginator {
+  margin-left: .5em;
+  display: inline-block;
+}

routes/index.js

@@ -3,6 +3,9 @@ var express = require('express');
 var router = express.Router();
 var HeightOffset = require('../config/config')['syncHeightOffset'] || 0;
 
+const BLOCKS_PER_PAGE = 50;
+const PAGINATION_LIMIT = 5;
+
 function formatRate(hashrate, decimals = 2) {
     if (hashrate === 0) return '0 H/s';
 
@@ -32,23 +35,66 @@ function formatRate(bytes, decimals = 2) {
     return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
 }
 
+function getPagination(count, page) {
+  const pagesCount = count > BLOCKS_PER_PAGE ? Math.ceil(count / BLOCKS_PER_PAGE) : 0;
+  let pagination = null;
+  if (pagesCount) {
+    pagination = {
+      'left': null,
+      'range': [],
+      'right': null,
+    }
+
+    const pagLimitHalf = Math.ceil(PAGINATION_LIMIT / 2);
+
+    const pagRangeLeft = page - pagLimitHalf;
+    if (pagRangeLeft < 3) {
+      pagination.range[0] = 1;
+    } else {
+      pagination.left = 1;
+      pagination.range[0] = pagRangeLeft;
+    }
+
+    const pagRangeRight = page + pagLimitHalf;
+    if (pagRangeRight > pagesCount - 3) {
+      pagination.range[1] = pagesCount;
+    } else {
+      pagination.right = pagesCount;
+      pagination.range[1] = pagRangeRight;
+    }
+  }
+  return pagination;
+}
+
 /* GET home page. */
-router.get('/', async function(req, res, next) {
+router.get('/:offset*?', async function(req, res, next) {
+
+  const paramPage = parseInt(req.params.offset);
+  const page = isNaN(paramPage) || paramPage < 1 ? 1 : paramPage;
+  const offset = BLOCKS_PER_PAGE * (page - 1);
 
   const blocks = await models.Block.findAll({
     attributes: ['height', 'hash', 'time', 'difficulty', 'hashrate'],
     order: [['height', 'DESC']],
-    limit: 50,
+    limit: BLOCKS_PER_PAGE,
+    offset,
   });
-  blocks.forEach(function(arrayItem) {
+
+  const count = await models.Block.count();
+  const pagination = getPagination(count, page);
+
+  blocks.forEach((arrayItem) => {
     arrayItem.ago = arrayItem.time.toUTCString().substring(5);
     arrayItem.difficulty = parseFloat(arrayItem.difficulty).toFixed(8);
     arrayItem.hashrate = formatRate(arrayItem.hashrate, 4);
     arrayItem.hash_short = shorterHash(arrayItem.hash);
   });
+
   res.render('index', {
     HeightOffset,
+    pagination,
     blocks,
+    page,
   });
 });
 

views/index.pug

@@ -23,3 +23,22 @@ block content
         td #{block.hashrate}
         td
           a(href='/block/' + block.hash + '/') #{block.hash_short}
+
+block pagination
+  if pagination
+    if pagination.left
+      a.paginator(href='/' + pagination.left + '/') #{pagination.left}
+      span.paginator ...
+
+
+    - var n = pagination.range[0]
+    - var m = pagination.range[1]
+    while n <= m
+      if n != page
+        a.paginator(href='/' + n + '/') #{n++}
+      else
+        span.paginator #{n++}
+
+    if pagination.right
+      span.paginator ...
+      a.paginator(href='/' + pagination.right + '/') #{pagination.right}

views/layout.pug

@@ -19,3 +19,5 @@ html(lang='en')
           input(type="submit", value=">>")
       div.content
         block content
+      div.pagination-wrapper
+        block pagination