Self-Hosted
/
changedetection.io
mirror of https://github.com/dgtlmoon/changedetection.io.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

code cleanup

Browse Source
pull/317/head
ntmmfts 3 years ago
parent fe10d289a0
commit 54e79268c1
4 changed files with 152 additions and 111 deletions
Show Stats Download Patch File Download Diff File

1
changedetectionio/__init__.py
Unescape View File

@ -306,6 +306,7 @@ def changedetection_app(config=None, datastore_o=None):
datastore.needs_write = True
return redirect(url_for('index', tag = limit_tag))
# Sort by last_changed and add the uuid which is usually the key..
sorted_watches = []
for uuid, watch in datastore.data['watching'].items():

43
changedetectionio/static/js/tbltools.js
Unescape View File

@ -39,9 +39,7 @@ function load_functions() {
// retrieve saved sorting
getSort();
// sort if not default
//if (sort_column != 9 || sort_order != 1) {
sortTable(sort_column);
//}
// search
if (isSessionStorageSupported()) {
// retrieve search
@ -54,7 +52,7 @@ function load_functions() {
// sorting
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0, sortimgs, sortableimgs;
table = document.getElementById("watch-table");
switching = true;
//Set the sorting direction, either default 9, 1 or saved
@ -129,7 +127,7 @@ function sortTable(n) {
}
// hide all asc/desc sort arrows
sortimgs = document.querySelectorAll('[id^="sort-"]');
for (var i = 0; i < sortimgs.length; i++) {
for (i = 0; i < sortimgs.length; i++) {
sortimgs[i].style.display = "none";
}
// show current asc/desc sort arrow and set sort_order var
@ -141,7 +139,7 @@ function sortTable(n) {
}
// show all sortable indicators
sortableimgs = document.querySelectorAll('[id^="sortable-"]');
for (var i = 0; i < sortableimgs.length; i++) {
for (i = 0; i < sortableimgs.length; i++) {
sortableimgs[i].style.display = "";
}
// hide sortable indicator from current column
@ -155,21 +153,22 @@ function sortTable(n) {
// check/uncheck all checkboxes
function checkAll(e) {
var i;
var checkboxes = document.getElementsByName('check');
var checkboxFunctions = document.querySelectorAll('[id=checkbox-functions]');
if (e.checked) {
for (var i = 0; i < checkboxes.length; i++) {
for (i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = true;
}
for (var i = 0; i < checkboxFunctions.length; i++) {
for (i = 0; i < checkboxFunctions.length; i++) {
checkboxFunctions[i].style.display = "";
}
}
else {
for (var i = 0; i < checkboxes.length; i++) {
for (i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = false;
}
for (var i = 0; i < checkboxFunctions.length; i++) {
for (i = 0; i < checkboxFunctions.length; i++) {
checkboxFunctions[i].style.display = "none";
}
}
@ -177,6 +176,7 @@ function checkAll(e) {
// check/uncheck checkall checkbox if all other checkboxes are checked/unchecked
function checkChange(){
var i;
var totalCheckbox = document.querySelectorAll('input[name="check"]').length;
var totalChecked = document.querySelectorAll('input[name="check"]:checked').length;
var checkboxFunctions = document.querySelectorAll('[id=checkbox-functions]');
@ -187,12 +187,12 @@ function checkChange(){
document.getElementsByName("showhide")[0].checked=false;
}
if(totalChecked == 0) {
for (var i = 0; i < checkboxFunctions.length; i++) {
for (i = 0; i < checkboxFunctions.length; i++) {
checkboxFunctions[i].style.display = "none";
}
}
else {
for (var i = 0; i < checkboxFunctions.length; i++) {
for (i = 0; i < checkboxFunctions.length; i++) {
checkboxFunctions[i].style.display = "";
}
}
@ -226,7 +226,7 @@ function tblSearch(evt) {
// restripe after searching or sorting
function restripe () {
var visrows = [];
var i, visrows = [];
var table = document.getElementById("watch-table");
var rows = table.getElementsByTagName("tr");
@ -235,7 +235,7 @@ function restripe () {
visrows.push(rows[i]);
}
}
for (var i=0 ; i<visrows.length; i++) {
for (i=0 ; i<visrows.length; i++) {
var row = visrows[i];
var cells = row.getElementsByTagName("td");
for(var j=0; j<cells.length; j++) {
@ -245,39 +245,40 @@ function restripe () {
cells[j].style.background = "#f2f2f2";
}
}
//cells[0].innerText = i+1;
//uncomment to re-number rows ascending: cells[0].innerText = i+1;
}
}
// get checked or all uuids
function getChecked(items) {
var i, checkedArr, uuids = '';
if ( items === undefined ) {
var checkedArr = document.querySelectorAll('input[name="check"]:checked');
checkedArr = document.querySelectorAll('input[name="check"]:checked');
}
else {
var checkedArr = document.querySelectorAll('input[name="check"]');
checkedArr = document.querySelectorAll('input[name="check"]');
}
if ( checkedArr.length > 0 ) {
let output = [];
for (var i = 0; i < checkedArr.length; i++ ) {
for (i = 0; i < checkedArr.length; i++ ) {
output.push( checkedArr[i].parentNode.parentNode.getAttribute("id") );
}
var uuids = "";
for (var i = 0; i < checkedArr.length; i++ ) {
for (i = 0; i < checkedArr.length; i++ ) {
if (i < checkedArr.length - 1 ) {
uuids += output[i] + ",";
} else {
uuids += output[i];
}
}
} else {
uuids = '';
}
return uuids;
}
// process selected watches
function processChecked(func, tag) {
var uuids, result;
if ( func == 'mark_all_notviewed' ) {
uuids = getChecked('all');
}

109
changedetectionio/static/styles/styles.css
Unescape View File

@ -114,35 +114,16 @@ section.content {
color: #fff;
font-weight: normal;
}
#play-pause {
line-height: .8em;
}
#checkbox-functions {
position: fixed;
left: 10%;
text-align: left;
/*display: grid;*/
}
#checkbox-functions .pure-button {
background: #0078e7;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#danger .pure-button {
background: #e7096e;
}
.watch-table td.title-col, #actions {
text-align: center;
}
.watch-table #clickable {
.watch-table .clickable {
cursor: pointer;
}
.watch-table #sortarrow {
.watch-table .sortarrow {
color: #0078e7;
}
.watch-table #hidden {
.watch-table .hidden {
display: none;
}
.watch-table tr.unviewed {
@ -181,18 +162,24 @@ section.content {
display: flex;
justify-content: center;
}
#post-list-buttons, #post-list-buttons-top {
#post-list-buttons {
padding: 0;
margin: 0;
}
#post-list-buttons li, #post-list-buttons-top li {
#post-list-buttons-top {
display: grid;
padding-left: 0;
}
#post-list-buttons li {
display: inline-block;
}
#flexlayout {
display: flex;
justify-content: space-between;
}
#flexlayout-bottom {
float: right;
}
#categories {
text-align: left;
margin-top: auto;
@ -201,18 +188,6 @@ section.content {
text-align: right;
margin-top: auto;
}
#recheck-and-rss {
display: inline-flex;
}
#controls-bottom {
text-align: right;
margin-bottom: auto;
direction: rtl;
}
.watch-table tfoot {
bottom: 0;
position: fixed;
}
#post-list-buttons-top a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
@ -225,6 +200,63 @@ section.content {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#post-list-buttons-top a {
display: grid;
display: -ms-grid;
}
#checkbox-functions ul {
padding-left: 0px;
}
#post-list-buttons-top-grid li {
list-style-type: none;
}
#checkbox-functions {
position: fixed;
left: 10%;
text-align: left;
font-family: monospace;
display: grid;
display: -ms-grid; /* IE grid support */
-ms-grid-columns: 1fr; /* IE grid support */
}
#grid-item-1 { /* IE grid support */
-ms-grid-column: 1;
-ms-grid-row: 1;
}
#grid-item-2 { /* IE grid support */
-ms-grid-column: 1;
-ms-grid-row: 2;
}
#grid-item-3 { /* IE grid support */
-ms-grid-column: 1;
-ms-grid-row: 3;
}
#grid-item-4 { /* IE grid support */
-ms-grid-column: 1;
-ms-grid-row: 4;
}
#checkbox-functions .pure-button {
background: #0078e7;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#recheck-and-rss {
margin-top: auto;
}
#recheck-and-rss ul {
display: inline-flex;
}
#controls-bottom {
text-align: right;
margin-bottom: auto;
direction: rtl;
}
.watch-table tfoot {
bottom: 0;
position: fixed;
}
body:after {
content: "";
background: linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%);
@ -508,6 +540,9 @@ body:before {
border-bottom-left-radius: initial;
border-bottom-right-radius: initial;
}
#checkbox-functions .pure-button.button-tag.danger {
background: #e70069;
}
.button-tag.active {
background: #9c9c9c;
font-weight: bold;

110
changedetectionio/templates/watch-overview.html
Unescape View File

@ -2,7 +2,7 @@
{% block content %}
{% from '_helpers.jinja' import render_simple_field %}
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='tbltools.js')}}"></script>
<script src="{{url_for('static_content', group='js', filename='tbltools.js')}}"></script>
<div class="box">
@ -27,51 +27,52 @@
{% endif %}
{% endfor %}
</div>
<div id="controls-top">
<ul id="post-list-buttons-top">
<span id="checkbox-functions" style="display: none;">
<li>
<a href="javascript:processChecked('recheck_selected', '{{ active_tag }}');" class="pure-button button-tag " title="Recheck Selected{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%}">Recheck</a>
</li><br>
<li>
<a href="javascript:processChecked('mark_selected_notviewed', '{{ active_tag }}');" class="pure-button button-tag " title="Mark Selected as Unviewed{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%}">Unviewed</a>
</li><br>
<li>
<a href="javascript:processChecked('mark_selected_viewed', '{{ active_tag }}');" class="pure-button button-tag " title="Mark Selected as Viewed{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%}">Viewed</a>
</li><br>
<span id="danger">
<li>
<a href="javascript:processChecked('delete_selected', '{{ active_tag }}');" class="pure-button button-tag " title="Delete Selected{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%}">Delete</a>
</li>
</span>
</span>
<span id="recheck-and-rss">
<li>
<a href="{{ url_for('api_watch_checknow', tag=active_tag) }}" class="pure-button button-tag ">Recheck
All {% if active_tag%}in "{{active_tag}}"{%endif%}</a>
</li>
<li>
<a href="{{ url_for('index', tag=active_tag , rss=true)}}"><img id="feed-icon" src="{{url_for('static_content', group='images', filename='Generic_Feed-icon.svg')}}" height="15px"></a>
</li>
</span>
<div id="recheck-and-rss">
<ul id="post-list-buttons">
<li>
<a href="{{ url_for('api_watch_checknow', tag=active_tag) }}" class="pure-button button-tag ">Recheck
All {% if active_tag%}in "{{active_tag}}"{%endif%}</a>
</li>
<li>
<a href="{{ url_for('index', tag=active_tag , rss=true)}}"><img id="feed-icon" src="{{url_for('static_content', group='images', filename='Generic_Feed-icon.svg')}}" height="15px"></a>
</li>
</ul>
</div>
</div>
<div id="controls-top">
<div id="checkbox-functions" style="display: none;">
<ul id="post-list-buttons-top-grid">
<li #id="grid-item-1">
<a href="javascript:processChecked('recheck_selected', '{{ active_tag }}');" class="pure-button button-tag " title="Recheck Selected{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%}">Recheck&nbsp;</a>
</li>
<li #id="grid-item-2">
<a href="javascript:processChecked('mark_selected_notviewed', '{{ active_tag }}');" class="pure-button button-tag " title="Mark Selected as Unviewed{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%}">Unviewed</a>
</li>
<li #id="grid-item-3">
<a href="javascript:processChecked('mark_selected_viewed', '{{ active_tag }}');" class="pure-button button-tag " title="Mark Selected as Viewed{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%}">Viewed&nbsp;&nbsp;</a>
</li>
<li #id="grid-item-4">
<a href="javascript:processChecked('delete_selected', '{{ active_tag }}');" class="pure-button button-tag danger " title="Delete Selected{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%}">Delete&nbsp;&nbsp;</a>
</li>
</ul>
</div>
</div>
<div>
<table class="pure-table pure-table-striped watch-table" id="watch-table">
<thead>
<tr id="header">
<th>#</th>
<th onclick="sortTable(1)"><span id="clickable" title="Sort by Checked"><input type="checkbox" name="showhide" onchange="checkAll(this)" title="Check/Uncheck All">&nbsp;&nbsp;<span id="sortable-1"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span id="sortarrow"><span id="sort-1a" style="display:none;">&#9650;</span><span id="sort-1d" style="display:none;">&#9660;</span></span></span></th>
<th id="play-pause" onclick="sortTable(2)"><span id="clickable" title="Sort by Pause/Resume"><a href="{{url_for('index', pause='pause-all', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='pause.svg')}}" alt="Pause" title="Pause All {%if active_tag%}in &quot;{{active_tag}}&quot; {%endif%}"/></a>&nbsp;<a href="{{url_for('index', pause='resume-all', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='play.svg')}}" alt="Resume" title="Resume All {%if active_tag%}in &quot;{{active_tag}}&quot; {%endif%}"/></a>&nbsp;&nbsp;<span id="sortable-2"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span id="sortarrow"><span id="sort-2a" style="display:none;">&#9650;</span><span id="sort-2d" style="display:none;">&#9660;</span></span></span></th>
<th id="play-pause" onclick="sortTable(3)"><span id="clickable" title="Sort by Viewed/Unviewed"><a href="javascript:processChecked('mark_all_notviewed', '{{ active_tag }}');"><img src="{{url_for('static_content', group='images', filename='notviewed.svg')}}" alt="Uniewed" title="Mark All{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%} as Unviewed"/></a>&nbsp;<a href="{{url_for('mark_all_viewed', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='viewed.svg')}}" alt="Viewed" title="Mark All{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%} as Viewed"/></a>&nbsp;&nbsp;<span id="sortable-3"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span id="sortarrow"><span id="sort-3a" style="display:none;">&#9650;</span><span id="sort-3d" style="display:none;">&#9660;</span></span></span></th>
<th onclick="sortTable(5)"><span id="clickable" title="Sort by Title">Title&nbsp;&nbsp;<span id="sortable-5"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span id="sortarrow"><span id="sort-5a" style="display:none;">&#9650;</span><span id="sort-5d" style="display:none;">&#9660;</span></span></span></th>
<th id="hidden"></th>
<th onclick="sortTable(7)"><span id="clickable" title="Sort by Last Checked">Checked&nbsp;&nbsp;<span id="sortable-7"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span id="sortarrow"><span id="sort-7a" style="display:none;">&#9650;</span><span id="sort-7d" style="display:none;">&#9660;</span></span></span></th>
<th id="hidden"></th>
<th onclick="sortTable(9)"><span id="clickable" title="Sort by Last Changed">Changed&nbsp;&nbsp;<span id="sortable-9" style="display:none;"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span id="sortarrow"><span id="sort-9a" style="display:none;">&#9650;</span><span id="sort-9d">&#9660;</span></span></span></th>
<th id="hidden"></th>
<th onclick="sortTable(1)"><span class="clickable" title="Sort by Checked"><input type="checkbox" name="showhide" onchange="checkAll(this)" title="Check/Uncheck All">&nbsp;&nbsp;<span id="sortable-1"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span class="sortarrow"><span id="sort-1a" style="display:none;">&#9650;</span><span id="sort-1d" style="display:none;">&#9660;</span></span></span></th>
<th onclick="sortTable(2)"><span class="clickable" title="Sort by Pause/Resume"><a href="{{url_for('index', pause='pause-all', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='pause.svg')}}" alt="Pause" title="Pause All {%if active_tag%}in &quot;{{active_tag}}&quot; {%endif%}"/></a>&nbsp;<a href="{{url_for('index', pause='resume-all', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='play.svg')}}" alt="Resume" title="Resume All {%if active_tag%}in &quot;{{active_tag}}&quot; {%endif%}"/></a>&nbsp;&nbsp;<span id="sortable-2"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span class="sortarrow"><span id="sort-2a" style="display:none;">&#9650;</span><span id="sort-2d" style="display:none;">&#9660;</span></span></span></th>
<th onclick="sortTable(3)"><span class="clickable" title="Sort by Viewed/Unviewed"><a href="javascript:processChecked('mark_all_notviewed', '{{ active_tag }}');"><img src="{{url_for('static_content', group='images', filename='notviewed.svg')}}" alt="Uniewed" title="Mark All{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%} as Unviewed"/></a>&nbsp;<a href="{{url_for('mark_all_viewed', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='viewed.svg')}}" alt="Viewed" title="Mark All{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%} as Viewed"/></a>&nbsp;&nbsp;<span id="sortable-3"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span class="sortarrow"><span id="sort-3a" style="display:none;">&#9650;</span><span id="sort-3d" style="display:none;">&#9660;</span></span></span></th>
<th onclick="sortTable(5)"><span class="clickable" title="Sort by Title">Title&nbsp;&nbsp;<span id="sortable-5"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span class="sortarrow"><span id="sort-5a" style="display:none;">&#9650;</span><span id="sort-5d" style="display:none;">&#9660;</span></span></span></th>
<th class="hidden"></th>
<th onclick="sortTable(7)"><span class="clickable" title="Sort by Last Checked">Checked&nbsp;&nbsp;<span id="sortable-7"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span class="sortarrow"><span id="sort-7a" style="display:none;">&#9650;</span><span id="sort-7d" style="display:none;">&#9660;</span></span></span></th>
<th class="hidden"></th>
<th onclick="sortTable(9)"><span class="clickable" title="Sort by Last Changed">Changed&nbsp;&nbsp;<span id="sortable-9" style="display:none;"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span class="sortarrow"><span id="sort-9a" style="display:none;">&#9650;</span><span id="sort-9d">&#9660;</span></span></span></th>
<th class="hidden"></th>
<th>Actions</th>
</tr>
</thead>
@ -109,16 +110,16 @@
<span class="watch-tag-list">{{ watch.tag}}</span>
{% endif %}
</td>
<td id="hidden">{{ watch.title if watch.title else watch.url }}</td> <!-- col 5, title sorting -->
<td class="hidden">{{ watch.title if watch.title else watch.url }}</td> <!-- col 5, title sorting -->
<td class="last-checked">{{watch|format_last_checked_time}}</td>
<td id="hidden">{{ watch.last_checked }}</td> <!-- col 7, last_checked sorting -->
<td class="hidden">{{ watch.last_checked }}</td> <!-- col 7, last_checked sorting -->
<td class="last-changed">{% if watch.history|length >= 2 and watch.last_changed %}
{{watch.last_changed|format_timestamp_timeago}}
{% else %}
Not yet
{% endif %}
</td>
<td id="hidden">{{ watch.last_changed }}</td> <!-- col 9, last_changed sorting -->
<td class="hidden">{{ watch.last_changed }}</td> <!-- col 9, last_changed sorting -->
<td id="actions">
<a href="{{ url_for('api_watch_checknow', uuid=watch.uuid, tag=request.args.get('tag')) }}"
class="pure-button button-small pure-button-primary">Recheck</a>
@ -137,18 +138,21 @@
</table>
</div>
<div id="controls-bottom">
<ul id="post-list-buttons">
<span id="recheck-and-rss">
<li>
<a href="{{ url_for('index', tag=active_tag , rss=true)}}"><img id="feed-icon" src="{{url_for('static_content', group='images', filename='Generic_Feed-icon.svg')}}" height="15px"></a>
</li>
<li>
<a href="{{ url_for('api_watch_checknow', tag=active_tag) }}" class="pure-button button-tag ">Recheck
All {% if active_tag%}in "{{active_tag}}"{%endif%}</a>
</li>
</span>
</ul>
<div id="flexlayout-bottom">
<div id="controls-bottom">
<ul id="post-list-buttons">
<li>
<a href="{{ url_for('index', tag=active_tag , rss=true)}}"><img id="feed-icon" src="{{url_for('static_content', group='images', filename='Generic_Feed-icon.svg')}}" height="15px"></a>
</li>
<li>
<a href="{{ url_for('api_watch_checknow', tag=active_tag) }}" class="pure-button button-tag ">Recheck
All {% if active_tag%}in "{{active_tag}}"{%endif%}</a>
</li>
</ul>
</div>
</div>
</div>
{% endblock %}
</div>
{% endblock %}

Write Preview
Loading…
Cancel
Save