"History" page - Use faster server side "difference" rendering, show ignored/triggered rows (#3442)

changedetectionio/static/js/diff-overview.js

@@ -1,11 +1,92 @@
+function setupDiffNavigation() {
+    var $fromSelect = $('#diff-from-version');
+    var $toSelect = $('#diff-to-version');
+    var $fromSelected = $fromSelect.find('option:selected');
+    var $toSelected = $toSelect.find('option:selected');
+
+    if ($fromSelected.length && $toSelected.length) {
+        // Find the previous pair (move both back one position)
+        var $prevFrom = $fromSelected.prev();
+        var $prevTo = $toSelected.prev();
+
+        // Find the next pair (move both forward one position)
+        var $nextFrom = $fromSelected.next();
+        var $nextTo = $toSelected.next();
+
+        // Build URL with current diff preferences
+        var currentParams = new URLSearchParams(window.location.search);
+
+        // Previous button: only show if both can move back
+        if ($prevFrom.length && $prevTo.length) {
+            currentParams.set('from_version', $prevFrom.val());
+            currentParams.set('to_version', $prevTo.val());
+            $('#btn-previous').attr('href', '?' + currentParams.toString());
+        } else {
+            $('#btn-previous').remove();
+        }
+
+        // Next button: only show if both can move forward
+        if ($nextFrom.length && $nextTo.length) {
+            currentParams.set('from_version', $nextFrom.val());
+            currentParams.set('to_version', $nextTo.val());
+            $('#btn-next').attr('href', '?' + currentParams.toString());
+        } else {
+            $('#btn-next').remove();
+        }
+    }
+
+    // Keyboard navigation
+    window.addEventListener('keydown', function (event) {
+        // Don't trigger if user is typing in an input field
+        if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA' || event.target.tagName === 'SELECT') {
+            return;
+        }
+
+        var $fromSelected = $fromSelect.find('option:selected');
+        var $toSelected = $toSelect.find('option:selected');
+
+        if ($fromSelected.length && $toSelected.length) {
+            if (event.key === 'ArrowLeft') {
+                var $prevFrom = $fromSelected.prev();
+                var $prevTo = $toSelected.prev();
+                if ($prevFrom.length && $prevTo.length) {
+                    var prevHref = $('#btn-previous').attr('href');
+                    if (prevHref) {
+                        event.preventDefault();
+                        window.location.href = prevHref;
+                    }
+                }
+            } else if (event.key === 'ArrowRight') {
+                var $nextFrom = $fromSelected.next();
+                var $nextTo = $toSelected.next();
+                if ($nextFrom.length && $nextTo.length) {
+                    var nextHref = $('#btn-next').attr('href');
+                    if (nextHref) {
+                        event.preventDefault();
+                        window.location.href = nextHref;
+                    }
+                }
+            }
+        }
+    }, false);
+}
+
 $(document).ready(function () {
     $('.needs-localtime').each(function () {
         for (var option of this.options) {
             var dateObject = new Date(option.value * 1000);
-            option.label = dateObject.toLocaleString(undefined, {dateStyle: "full", timeStyle: "medium"});
+            var formattedDate = dateObject.toLocaleString(undefined, {dateStyle: "full", timeStyle: "medium"});
+            // Preserve any existing text in the label (like "(Previous)" or "(Current)")
+            var existingText = option.text.replace(option.value, '').trim();
+            option.label = existingText ? formattedDate + ' ' + existingText : formattedDate;
         }
     });
 
+    // Setup keyboard navigation for diff versions
+    if ($('#diff-from-version').length && $('#diff-to-version').length) {
+        setupDiffNavigation();
+    }
+
     // Load it when the #screenshot tab is in use, so we dont give a slow experience when waiting for the text diff to load
     window.addEventListener('hashchange', function (e) {
         toggle(location.hash);
@@ -27,16 +108,51 @@ $(document).ready(function () {
         }
     }
 
-    const article = $('.highlightable-filter')[0];
+    const article = $('#difference')[0];
 
     // We could also add the  'touchend' event for touch devices, but since
     // most iOS/Android browsers already show a dialog when you select
     // text (often with a Share option) we'll skip that
-    article.addEventListener('mouseup', dragTextHandler, false);
-    article.addEventListener('mousedown', clean, false);
+    if (article) {
+        article.addEventListener('mousedown', clean, false);
+    }
+
+    // Because they might 'mouse up' outside the article but on the page
+    const d_page = $(".difference-page")[0]
+    if (d_page ) {
+        d_page.addEventListener('mouseup', dragTextHandler, false);
+    }
+
+
+    $('#highlightSnippetActions a').bind('click', function (e) {
+        if (!window.getSelection().toString().trim().length) {
+            alert('Oops no text selected!');
+            return;
+        }
+
+        $.ajax({
+            type: "POST",
+            url: highlight_submit_ignore_url,
+            data: {'mode': $(this).data('mode'), 'selection': window.getSelection().toString()},
+            statusCode: {
+                400: function () {
+                    // More than likely the CSRF token was lost when the server restarted
+                    alert("There was a problem processing the request, please reload the page.");
+                }
+            }
+        }).done(function (data) {
+            // @todo some feedback
+            alert("'Ignore' Filters for this watch were updated.")
+            clean();
+
+        }).fail(function (data) {
+            console.log(data);
+            alert('There was an error communicating with the server.');
+        })
+    });
 
     function clean(event) {
-      $("#highlightSnippet").remove();
+        $('#bottom-horizontal-offscreen').hide();
     }
 
     // Listen for Escape key press
@@ -51,46 +167,9 @@ $(document).ready(function () {
 
         // Check if any text was selected
         if (window.getSelection().toString().length > 0) {
-
-            // Find out how much (if any) user has scrolled
-            var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
-
-            // Get cursor position
-            const posX = event.clientX;
-            const posY = event.clientY + 20 + scrollTop;
-
-            // Append HTML to the body, create the "Tweet Selection" dialog
-            document.body.insertAdjacentHTML('beforeend', '<div id="highlightSnippet" style="position: absolute; top: ' + posY + 'px; left: ' + posX + 'px;"><div class="pure-form-message-inline" style="font-size: 70%">Ignore any change on any line which contains the selected text.</div><br><a data-mode="exact" href="javascript:void(0);" class="pure-button button-secondary button-xsmall">Ignore exact text</a>&nbsp;</div>');
-
-            if (/\d/.test(window.getSelection().toString())) {
-                // Offer regex replacement
-                document.getElementById("highlightSnippet").insertAdjacentHTML('beforeend', '<a data-mode="digit-regex"  href="javascript:void(0);" class="pure-button button-secondary button-xsmall">Ignore text including number changes</a>');
-            }
-
-            $('#highlightSnippet a').bind('click', function (e) {
-                if(!window.getSelection().toString().trim().length) {
-                    alert('Oops no text selected!');
-                    return;
-                }
-
-                $.ajax({
-                    type: "POST",
-                    url: highlight_submit_ignore_url,
-                    data: {'mode': $(this).data('mode'), 'selection': window.getSelection().toString()},
-                    statusCode: {
-                        400: function () {
-                            // More than likely the CSRF token was lost when the server restarted
-                            alert("There was a problem processing the request, please reload the page.");
-                        }
-                    }
-                }).done(function (data) {
-                    $("#highlightSnippet").html(data)
-                }).fail(function (data) {
-                    console.log(data);
-                    alert('There was an error communicating with the server.');
-                });
-            });
-
+            $('#bottom-horizontal-offscreen').show();
+        } else {
+            clean();
         }
     }
 
@@ -100,4 +179,12 @@ $(document).ready(function () {
             alert('Error - You are trying to compare the same version.');
         }
     });
+
+    // Auto-submit form on change of any input elements (checkboxes, radio buttons, dropdowns)
+    $('#diff-form').on('change', 'input[type="checkbox"], input[type="radio"], select', function (e) {
+        // Check if we're trying to compare the same version before submitting
+        if ($('select[name=from_version]').val() !== $('select[name=to_version]').val()) {
+            $('#diff-form').submit();
+        }
+    });
 });