kopia lustrzana https://github.com/dgtlmoon/changedetection.io
UI - Adding pagination to watch list (#1549)
dgtlmoon
GitHub
rodzic
966600d28e
commit
e1f5dfb703
|
|
@ -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'),
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
@import "parts/_arrows";
|
||||
@import "parts/_browser-steps";
|
||||
@import "parts/_extra_proxies";
|
||||
@import "parts/_pagination";
|
||||
@import "parts/_spinners";
|
||||
@import "parts/_variables";
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
@ -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') %}
|
||||
|
||||
{# WIP for pagination, disabled for now
|
||||
{% if not ( loop.index >= 3 and loop.index <=4) %}{% continue %}{% endif %} -->
|
||||
#}
|
||||
{% for watch in (watches|sort(attribute=sort_attribute, reverse=sort_order == 'asc'))[pagination.skip:pagination.skip+pagination.per_page] %}
|
||||
<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(sorted_watches,3, pagination_page) }}
|
||||
#}
|
||||
|
||||
{{ pagination.links }}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue