refactoring page buttons and front page time loads

xmrnodes/app.py

@@ -27,7 +27,7 @@ app.secret_key = app.config["SECRET_KEY"]
 @app.route("/", methods=["GET", "POST"])
 def index():
     form = SubmitNode()
-    itp = 20
+    itp = 10
     page = request.args.get("page", 1)
     try:
         page = int(page)
@@ -52,7 +52,7 @@ def index():
         nodes = nodes.where(Node.is_tor==True)
 
     paginated = nodes.paginate(page, itp)
-    total_pages = nodes.count() / itp
+    total_pages = int(nodes.count() / itp) + 1
     return render_template(
         "index.html",
         nodes=paginated,

xmrnodes/static/css/style.css

@@ -61,3 +61,11 @@ input[type="text"] {
 .container2 {
   padding: 4em;
 }
+
+.page-btn {
+  text-align: center;
+}
+
+.current-page-btn {
+  background-color: #b8b8b8;
+}

xmrnodes/templates/index.html

@@ -57,7 +57,7 @@
           <td>{{ node.last_height }}</td>
           <td>{{ node.datetime_checked | humanize }}</td>
           <td>{% for hc in node.healthchecks %}
-            {% if loop.index > loop.length - 11 %}
+            {% if loop.index > loop.length - 6 %}
             <span class="dot glowing-{% if hc.health %}green{% else %}red{% endif %}"></span>
             {% endif %}
           {% endfor %}
@@ -66,12 +66,11 @@
       {% endfor %}
       </tbody>
     </table>
-    {% if page > 1 %}
+    <div class="page-btn">
-      <a href="/?page={{ page - 1 }}" class="pure-button btn">Back</a>
+      {% for p in range(1, total_pages + 1) %}
-    {% endif %}
+        <a href="/?page={{ p }}" class="pure-button btn {% if p == page %}current-page-btn{% endif %}">{{ p }}</a>
-    {% if page < total_pages and total_pages > 0 %}
+      {% endfor %}
-      <a href="/?page={{ page + 1 }}" class="pure-button btn">Next</a>
+    </div>
-    {% endif %}
     {% else %}
     <p>No nodes in the database yet...</p>
     {% endif %}