diff --git a/changedetectionio/static/js/socket.js b/changedetectionio/static/js/socket.js index 27ae9a35..e3f4cdbc 100644 --- a/changedetectionio/static/js/socket.js +++ b/changedetectionio/static/js/socket.js @@ -43,8 +43,9 @@ $(document).ready(function () { // Listen for periodically emitted watch data socket.on('watch_update', function (watch) { - console.log(`${watch.event_timestamp} - Watch update ${watch.uuid} - Checking now - ${watch.checking_now}`); + console.log(`${watch.event_timestamp} - Watch update ${watch.uuid} - Checking now - ${watch.checking_now} - UUID in URL ${window.location.href.includes(watch.uuid)}`); + // Updating watch table rows const $watchRow = $('tr[data-watch-uuid="' + watch.uuid + '"]'); if ($watchRow.length) { $($watchRow).toggleClass('checking-now', watch.checking_now); @@ -59,8 +60,9 @@ $(document).ready(function () { $('td.last-checked .innertext', $watchRow).text(watch.last_checked_text) $('td.last-checked', $watchRow).data('timestamp', watch.last_checked).data('fetchduration', watch.fetch_time); $('td.last-checked', $watchRow).data('eta_complete', watch.last_checked + watch.fetch_time); - } + + $('body').toggleClass('checking-now', watch.checking_now && window.location.href.includes(watch.uuid) ); }); } catch (e) { diff --git a/changedetectionio/static/styles/scss/parts/_socket.scss b/changedetectionio/static/styles/scss/parts/_socket.scss index 8eff565d..f5b649d5 100644 --- a/changedetectionio/static/styles/scss/parts/_socket.scss +++ b/changedetectionio/static/styles/scss/parts/_socket.scss @@ -1 +1,19 @@ // Styles for Socket.IO real-time updates +body.checking-now { + #checking-now-fixed-tab { + display: block !important; + } +} + +#checking-now-fixed-tab { + background: #ccc; + border-radius: 5px; + bottom: 0; + color: var(--color-text); + display: none; + font-size: 0.8rem; + left: 0; + padding: 5px; + position: fixed; +} + diff --git a/changedetectionio/static/styles/scss/styles.scss b/changedetectionio/static/styles/scss/styles.scss index 71d44039..07c4fc92 100644 --- a/changedetectionio/static/styles/scss/styles.scss +++ b/changedetectionio/static/styles/scss/styles.scss @@ -16,6 +16,7 @@ @import "parts/_watch_table"; @import "parts/_edit"; @import "parts/_conditions_table"; +@import "parts/_socket"; body { color: var(--color-text); diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css index 2b54e680..0cb31450 100644 --- a/changedetectionio/static/styles/styles.css +++ b/changedetectionio/static/styles/styles.css @@ -670,6 +670,20 @@ ul#conditions_match_logic { .fieldlist_formfields .addRuleRow:hover, .fieldlist_formfields .removeRuleRow:hover, .fieldlist_formfields .verifyRuleRow:hover { background-color: #999; } +body.checking-now #checking-now-fixed-tab { + display: block !important; } + +#checking-now-fixed-tab { + background: #ccc; + border-radius: 5px; + bottom: 0; + color: var(--color-text); + display: none; + font-size: 0.8rem; + left: 0; + padding: 5px; + position: fixed; } + body { color: var(--color-text); background: var(--color-background-page); diff --git a/changedetectionio/templates/base.html b/changedetectionio/templates/base.html index e9a82cf3..a2ac4d3f 100644 --- a/changedetectionio/templates/base.html +++ b/changedetectionio/templates/base.html @@ -233,6 +233,8 @@ {% block content %}{% endblock %} + +