Realtime update if edit/preview/diff page currently checking

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) {

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;
+}
+

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);

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);

changedetectionio/templates/base.html

@@ -233,6 +233,8 @@
       {% block content %}{% endblock %}
     </section>
     <script src="{{url_for('static_content', group='js', filename='toggle-theme.js')}}" defer></script>
+
+    <div id="checking-now-fixed-tab" style="display: none;"><span class="spinner"></span><span>&nbsp;Checking now</span></div>
   </body>
 
 </html>