Column sorting (#838)

changedetectionio/__init__.py

@@ -76,7 +76,7 @@ app.config['LOGIN_DISABLED'] = False
 
 # Disables caching of the templates
 app.config['TEMPLATES_AUTO_RELOAD'] = True
-
+app.jinja_env.add_extension('jinja2.ext.loopcontrols')
 csrf = CSRFProtect()
 csrf.init_app(app)
 

changedetectionio/model/Watch.py

@@ -83,6 +83,13 @@ class model(dict):
 
         return False
 
+    @property
+    def label(self):
+        # Used for sorting
+        if self['title']:
+            return self['title']
+        return self['url']
+
     @property
     def last_changed(self):
         # last_changed will be the newest snapshot, but when we have just one snapshot, it should be 0

changedetectionio/store.py

@@ -529,3 +529,13 @@ class ChangeDetectionStore:
     def update_3(self):
         # see https://github.com/dgtlmoon/changedetection.io/pull/835
         return
+
+    # `last_changed` not needed, we pull that information from the history.txt index
+    def update_4(self):
+        for uuid, watch in self.data['watching'].items():
+            try:
+                # Remove it from the struct
+                del(watch['last_changed'])
+            except:
+                continue
+        return

changedetectionio/templates/_pagination.jinja

@@ -0,0 +1,7 @@
+{% 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,6 +1,7 @@
 {% 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>
 
@@ -32,22 +33,31 @@
         {% endfor %}
     </div>
 
+    {% set sort_order = request.args.get('order', 'desc') == 'desc' %}
+    {% set sort_attribute = request.args.get('sort', 'last_changed')   %}
+    {% set pagination_page = request.args.get('page', 0) %}
+
     <div id="watch-table-wrapper">
         <table class="pure-table pure-table-striped watch-table">
             <thead>
             <tr>
                 <th>#</th>
                 <th></th>
-                <th></th>
-                <th>Last Checked</th>
-                <th>Last Changed</th>
+                {% set link_order = "asc" if sort_order else "desc" %}
+                <th><a href="{{url_for('index', sort='label', order=link_order)}}">Website</a></th>
+                <th><a href="{{url_for('index', sort='last_checked', order=link_order)}}">Last Checked</a></th>
+                <th><a href="{{url_for('index', sort='last_changed', order=link_order)}}">Last Changed</a></th>
                 <th></th>
             </tr>
             </thead>
             <tbody>
 
+            {% set sorted_watches = watches|sort(attribute=sort_attribute, reverse=sort_order) %}
+            {% for watch in sorted_watches %}
 
-            {% for watch in watches|sort(attribute='last_changed', reverse=True) %}
+            {# 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') }}
                 {% if watch.last_error is defined and watch.last_error != False %}error{% endif %}
@@ -113,6 +123,10 @@
                 <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(sorted_watches,3, pagination_page) }}
+         #}
+
     </div>
 </div>
 {% endblock %}