UI - Adding pagination to watch list (#1549)

changedetectionio/__init__.py

@@ -33,6 +33,8 @@ from flask import (
     url_for,
 )
 
+from flask_paginate import Pagination, get_page_parameter
+
 from changedetectionio import html_tools
 from changedetectionio.api import api_v1
 
@@ -419,6 +421,9 @@ def changedetection_app(config=None, datastore_o=None):
 
         existing_tags = datastore.get_all_tags()
         form = forms.quickWatchForm(request.form)
+        page = request.args.get(get_page_parameter(), type=int, default=1)
+        pagination = Pagination(page=page, total=len(datastore.data['watching']), per_page=int(os.getenv('pagination_per_page', 50)), css_framework = "semantic")
+
         output = render_template(
             "watch-overview.html",
                                  # Don't link to hosting when we're on the hosting environment
@@ -429,6 +434,7 @@ def changedetection_app(config=None, datastore_o=None):
                                  has_proxies=datastore.proxy_list,
                                  has_unviewed=datastore.has_unviewed,
                                  hosted_sticky=os.getenv("SALTED_PASS", False) == False,
+                                 pagination=pagination,
                                  queued_uuids=[q_uuid.item['uuid'] for q_uuid in update_q.queue],
                                  sort_attribute=request.args.get('sort') if request.args.get('sort') else request.cookies.get('sort'),
                                  sort_order=request.args.get('order') if request.args.get('order') else request.cookies.get('order'),

changedetectionio/static/styles/scss/parts/_pagination.scss

@@ -0,0 +1,37 @@
+.pagination-page-info {
+  color: #fff;
+  font-size: 0.85rem;
+  text-transform: capitalize;
+}
+
+.pagination.menu {
+  > * {
+    display: inline-block;
+  }
+
+  li {
+    display: inline-block;
+  }
+
+  a {
+    padding: 0.65rem;
+    margin: 3px;
+    border: none;
+    background: #444;
+    border-radius: 2px;
+    color: var(--color-text-button);
+    &.disabled {
+      display: none;
+    }
+    &.active {
+      font-weight: bold;
+      background: #888;
+    }
+
+    &:hover {
+      background: #999;
+    }
+  }
+
+
+}

changedetectionio/static/styles/scss/styles.scss

@@ -5,6 +5,7 @@
 @import "parts/_arrows";
 @import "parts/_browser-steps";
 @import "parts/_extra_proxies";
+@import "parts/_pagination";
 @import "parts/_spinners";
 @import "parts/_variables";
 

changedetectionio/static/styles/styles.css

@@ -95,6 +95,32 @@ ul#requests-extra_proxies {
   ul#requests-extra_proxies table tr {
     display: inline; }
 
+.pagination-page-info {
+  color: #fff;
+  font-size: 0.85rem;
+  text-transform: capitalize; }
+
+.pagination.menu > * {
+  display: inline-block; }
+
+.pagination.menu li {
+  display: inline-block; }
+
+.pagination.menu a {
+  padding: 0.65rem;
+  margin: 3px;
+  border: none;
+  background: #444;
+  border-radius: 2px;
+  color: var(--color-text-button); }
+  .pagination.menu a.disabled {
+    display: none; }
+  .pagination.menu a.active {
+    font-weight: bold;
+    background: #888; }
+  .pagination.menu a:hover {
+    background: #999; }
+
 /* spinner */
 .spinner,
 .spinner:after {

changedetectionio/templates/_pagination.jinja

@@ -1,7 +0,0 @@
-{% macro pagination(sorted_watches, total_per_page, current_page) %}
-  {{ sorted_watches|length }}
-
-  {% for row in sorted_watches|batch(total_per_page, ' ') %}
-    {{ loop.index}}
-  {% endfor %}
-{% endmacro %}

changedetectionio/templates/watch-overview.html

@@ -1,7 +1,6 @@
 {% extends 'base.html' %}
 {% block content %}
 {% from '_helpers.jinja' import render_simple_field, render_field %}
-{% from '_pagination.jinja' import pagination %}
 <script type="text/javascript" src="{{url_for('static_content', group='js', filename='jquery-3.6.0.min.js')}}"></script>
 <script type="text/javascript" src="{{url_for('static_content', group='js', filename='watch-overview.js')}}" defer></script>
 
@@ -41,6 +40,9 @@
         <button class="pure-button button-secondary button-xsmall" name="op" value="notification-default">Use default notification</button>
         <button class="pure-button button-secondary button-xsmall" style="background: #dd4242; font-size: 70%" name="op" value="delete">Delete</button>
     </div>
+    {% if watches|length >= pagination.per_page %}
+        {{ pagination.info }}
+    {% endif %}
     <div>
         <a href="{{url_for('index')}}" class="pure-button button-tag {{'active' if not active_tag }}">All</a>
         {% for tag in tags %}
@@ -55,6 +57,7 @@
     {% set pagination_page = request.args.get('page', 0) %}
 
     <div id="watch-table-wrapper">
+
         <table class="pure-table pure-table-striped watch-table">
             <thead>
             <tr>
@@ -70,11 +73,7 @@
             </thead>
             <tbody>
 
-            {% for watch in watches|sort(attribute=sort_attribute, reverse=sort_order == 'asc') %}
+            {% for watch in (watches|sort(attribute=sort_attribute, reverse=sort_order == 'asc'))[pagination.skip:pagination.skip+pagination.per_page] %}
-
-            {# WIP for pagination, disabled for now
-              {% if not ( loop.index >= 3 and loop.index <=4) %}{% continue %}{% endif %} -->
-             #}
             <tr id="{{ watch.uuid }}"
                 class="{{ loop.cycle('pure-table-odd', 'pure-table-even') }} processor-{{ watch['processor'] }}
                 {% if watch.last_error is defined and watch.last_error != False %}error{% endif %}
@@ -82,7 +81,7 @@
                 {% if watch.paused is defined and watch.paused != False %}paused{% endif %}
                 {% if watch.newest_history_key| int > watch.last_viewed and watch.history_n>=2 %}unviewed{% endif %}
                 {% if watch.uuid in queued_uuids %}queued{% endif %}">
-                <td class="inline checkbox-uuid" ><input name="uuids"  type="checkbox" value="{{ watch.uuid}} "/> <span>{{ loop.index }}</span></td>
+                <td class="inline checkbox-uuid" ><input name="uuids"  type="checkbox" value="{{ watch.uuid}} "/> <span>{{ loop.index+pagination.skip }}</span></td>
                 <td class="inline watch-controls">
                     {% if not watch.paused %}
                     <a class="state-off" href="{{url_for('index', op='pause', uuid=watch.uuid, tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='pause.svg')}}" alt="Pause checks" title="Pause checks" class="icon icon-pause"/></a>
@@ -179,10 +178,7 @@
                 <a href="{{ url_for('rss', tag=active_tag , token=app_rss_token)}}"><img alt="RSS Feed" id="feed-icon" src="{{url_for('static_content', group='images', filename='Generic_Feed-icon.svg')}}" height="15"></a>
             </li>
         </ul>
-        {# WIP for pagination, disabled for now
+        {{ pagination.links }}
-         {{ pagination(sorted_watches,3, pagination_page) }}
-         #}
-
     </div>
     </form>
 </div>

requirements.txt

@@ -2,6 +2,7 @@ eventlet>=0.31.0
 feedgen~=0.9
 flask-compress
 flask-login~=0.5
+flask-paginate
 flask_expects_json~=1.7
 flask_restful
 flask_wtf