gui: pagination for mined blocks

gui/assets/public/css/dcrpool.css

@@ -7291,41 +7291,6 @@ a.text-dark:hover, a.text-dark:focus {
     color: inherit;
     border-color: #dee2e6; } }
 
-/**
- * Fluid Props
- */
-@font-face {
-  font-family: "dcrstakepool-code";
-  src: url("fonts/SourceCodePro-Regular/SourceCodePro-Regular.ttf.woff2") format("woff2"), url("fonts/SourceCodePro-Regular/SourceCodePro-Regular.ttf.woff") format("woff"), url("fonts/SourceCodePro-Regular/SourceCodePro-Regular.ttf") format("truetype"), url("fonts/SourceCodePro-Regular/SourceCodePro-Regular.eot") format("embedded-opentype"); }
-
-@font-face {
-  font-family: "dcrstakepool";
-  src: url("fonts/SourceSansPro-Regular/SourceSansPro-Regular.ttf.woff2") format("woff2"), url("fonts/SourceSansPro-Regular/SourceSansPro-Regular.ttf.woff") format("woff"), url("fonts/SourceSansPro-Regular/SourceSansPro-Regular.ttf") format("truetype"), url("fonts/SourceSansPro-Regular/SourceSansPro-Regular.eot") format("embedded-opentype"); }
-
-@font-face {
-  font-family: "dcrstakepool";
-  src: url("fonts/SourceSansPro-Semibold/SourceSansPro-Semibold.ttf.woff2") format("woff2"), url("fonts/SourceSansPro-Semibold/SourceSansPro-Semibold.ttf.woff") format("woff"), url("fonts/SourceSansPro-Semibold/SourceSansPro-Semibold.ttf") format("truetype"), url("fonts/SourceSansPro-Semibold/SourceSansPro-Semibold.eot") format("embedded-opentype");
-  font-weight: bold; }
-
-@font-face {
-  font-family: "dcrstakepool";
-  src: url("fonts/SourceSansPro-It/SourceSansPro-It.ttf.woff2") format("woff2"), url("fonts/SourceSansPro-It/SourceSansPro-It.ttf.woff") format("woff"), url("fonts/SourceSansPro-It/SourceSansPro-It.ttf") format("truetype"), url("fonts/SourceSansPro-It/SourceSansPro-It.eot") format("embedded-opentype");
-  font-style: italic; }
-
-@font-face {
-  font-family: "dcrstakepool";
-  src: url("fonts/SourceSansPro-SemiboldIt/SourceSansPro-SemiboldIt.ttf.woff2") format("woff2"), url("fonts/SourceSansPro-SemiboldIt/SourceSansPro-SemiboldIt.ttf.woff") format("woff"), url("fonts/SourceSansPro-SemiboldIt/SourceSansPro-SemiboldIt.ttf") format("truetype"), url("fonts/SourceSansPro-SemiboldIt/SourceSansPro-SemiboldIt.eot") format("embedded-opentype");
-  font-style: italic;
-  font-weight: bold; }
-
-html, body {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: "dcrstakepool", "Verdana", "sans-serif" !important; }
-
-pre, code {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: "dcrstakepool-code", "Courier New", "monospace" !important; }
-
 h1 {
   font-size: 18px;
   line-height: 1.25;
@@ -8479,8 +8444,13 @@ input[type="submit"]:disabled {
   color: #0c1e3e; }
 
 
-.table td {
-  border-top: 1px solid #F3F5F6; }
+.table tbody td {
+  border-top: 1px solid #F3F5F6;
+}
+
+.table tbody:last-child td {
+  border-bottom: 1px solid #F3F5F6;
+}
 
 .table-scroll-y .table {
   margin-bottom: 0; }

gui/assets/public/css/pagination.css

@@ -0,0 +1,65 @@
+.page-select {
+  display: flex;
+}
+
+.paginationjs {
+  font-size: 16px;
+  box-sizing: initial;
+  margin-left: auto;
+}
+.paginationjs:after {
+  display: table;
+  content: " ";
+  clear: both;
+}
+.paginationjs .paginationjs-pages {
+  float: left;
+}
+.paginationjs .paginationjs-pages ul {
+  float: left;
+  margin: 0;
+  padding: 0;
+}
+.paginationjs .paginationjs-pages li {
+  float: left;
+  list-style: none;
+}
+.paginationjs .paginationjs-pages li > a {
+  width: 22px;
+  height: 22px;
+  line-height: 22px;
+  margin: 0 2px;
+  display: block;
+  background: #fff;
+  color: #3D5873;
+  text-decoration: none;
+  text-align: center;
+  border-radius: 3px;
+}
+.paginationjs .paginationjs-pages li > a:hover {
+  background: #eee;
+}
+.paginationjs .paginationjs-pages li.active > a {
+  background:#E6EAED;
+  color: #2970FF;
+}
+.paginationjs .paginationjs-pages li.disabled > a {
+  opacity: .3;
+}
+.paginationjs .paginationjs-pages li.disabled > a:hover {
+  background: none;
+}
+
+.paginationjs .pagination-arrow {
+  height: 100%;
+  width: 100%;
+  background-repeat: no-repeat;
+  background-size: 13px 12px;
+  background-position: center;
+}
+.paginationjs .pagination-arrow-right {
+  background-image: url(/images/right_arrow.svg);
+}
+.paginationjs .pagination-arrow-left {
+  background-image: url(/images/left_arrow.svg);
+}

gui/assets/public/js/pagination.js

@@ -0,0 +1,25 @@
+$('#mined-blocks-page-select').pagination({
+    dataSource: "/mined_blocks",
+    autoHideNext: false,
+    autoHidePrevious: false,
+    hideWhenLessThanOnePage: true,
+    pageSize: 10,
+    nextText: '<div class="pagination-arrow pagination-arrow-right"></div>',
+    prevText: '<div class="pagination-arrow pagination-arrow-left"></div>',
+    locator: "blocks",
+    totalNumberLocator: function(response) {
+        return response.count;
+    },
+    callback: function(data) {
+        var html = '';
+
+        if (data.length > 0) {
+            $.each(data, function(index, item){
+                html += '<tr><td><a href="' + item.blockurl + '" rel="noopener noreferrer">' + item.blockheight + '</a></td><td>' + item.miner + '</td><td><span class="dcr-label">' + item.minedby + '</span></td></tr>';
+            });
+        } else {
+            html += '<tr><td colspan="100%"><span class="no-data">No mined blocks</span></td></tr>';
+        }
+        $('#mined-blocks-table-body').html(html);
+    }
+})

gui/assets/public/js/socket.js

@@ -1,5 +1,4 @@
 var quotaSort;
-var minedBlocksSort;
 
 document.addEventListener("DOMContentLoaded", function () {
     workTable = document.getElementById('work-quota-table');
@@ -10,14 +9,6 @@ document.addEventListener("DOMContentLoaded", function () {
         });
     }
 
-    minedTable = document.getElementById('mined-blocks-table');
-
-    if (minedTable != null) {
-        minedBlocksSort = new Tablesort(minedTable, {
-            descending: true
-        });
-    }
-
     ws = new WebSocket('wss://' + window.location.host + '/ws');
     ws.addEventListener('message', function (e) {
         var msg = JSON.parse(e.data);
@@ -28,10 +19,6 @@ document.addEventListener("DOMContentLoaded", function () {
             msg.workquotas = [];
         }
         updateWorkQuotas(msg.workquotas);
-        if (msg.minedblocks == null) {
-            msg.minedblocks = [];
-        }
-        updateMinedBlocks(msg.minedblocks);
     });
 });
 
@@ -51,57 +38,6 @@ function removeElement(el) {
     el.parentNode.removeChild(el);
 }
 
-function updateMinedBlocks(minedBlocks) {
-    blocksTable = document.getElementById('mined-blocks-table');
-
-    if (blocksTable == null) {
-        return;
-    }
-
-    blocksTableBody = blocksTable.querySelector('tbody');
-
-    // Ensure all received blocks are in the table
-    var changeMade = false;
-    for (i = 0; i < minedBlocks.length; i++) {
-        var exists = false;
-        var rows = blocksTableBody.querySelectorAll('tr');
-        for (j = 0; j < rows.length; j++) {
-            var blockHeight = rows[j].getAttribute('data-row-id');
-            if (minedBlocks[i].blockheight == blockHeight) {
-                exists = true;
-                break;
-            }
-        }
-
-        if (exists == false) {
-            // Add a new row for this block
-            var newRow = blocksTableBody.insertRow(0);
-            newRow.setAttribute("data-row-id", minedBlocks[i].blockheight);
-            var a = document.createElement('a');
-            a.setAttribute('href', minedBlocks[i].blockurl);
-            a.innerHTML = minedBlocks[i].blockheight;
-            newRow.insertCell(0).appendChild(a);
-            newRow.insertCell(1).innerHTML = minedBlocks[i].miner;
-            var span = document.createElement('span');
-            span.innerHTML = minedBlocks[i].minedby;
-            span.className = "dcr-label";
-            newRow.insertCell(2).appendChild(span); 
-            flashElement(newRow);
-            changeMade = true;
-        }
-    }
-
-    if (changeMade) {
-        minedBlocksSort.refresh();
-    }
-
-    // Remove all but the 10 most recent blocks
-    var rowsToRemove = blocksTableBody.querySelectorAll('tr:nth-child(10) ~ tr');
-    for (j = 0; j < rowsToRemove.length; j++) {
-        removeElement(rowsToRemove[j]);
-    }
-}
-
 function updateWorkQuotas(quotas) {
     quotasTable = document.getElementById('work-quota-table');