UI - Ability to preview/view single changes by timestamp using keyboard or select box(#1916)

changedetectionio/__init__.py

@@ -175,6 +175,7 @@ def main():
     #         proxy_set_header Host "localhost";
     #         proxy_set_header X-Forwarded-Prefix /app;
 
+
     if os.getenv('USE_X_SETTINGS'):
         logger.info("USE_X_SETTINGS is ENABLED")
         from werkzeug.middleware.proxy_fix import ProxyFix

changedetectionio/flask_app.py

@@ -1063,6 +1063,8 @@ def changedetection_app(config=None, datastore_o=None):
         content = []
         ignored_line_numbers = []
         trigger_line_numbers = []
+        versions = []
+        timestamp = None
 
         # More for testing, possible to return the first/only
         if uuid == 'first':
@@ -1082,24 +1084,18 @@ def changedetection_app(config=None, datastore_o=None):
         if (watch.get('fetch_backend') == 'system' and system_uses_webdriver) or watch.get('fetch_backend') == 'html_webdriver' or watch.get('fetch_backend', '').startswith('extra_browser_'):
             is_html_webdriver = True
 
-        # Never requested successfully, but we detected a fetch error
         if datastore.data['watching'][uuid].history_n == 0 and (watch.get_error_text() or watch.get_error_snapshot()):
             flash("Preview unavailable - No fetch/check completed or triggers not reached", "error")
-            output = render_template("preview.html",
+        else:
-                                     content=content,
+            # So prepare the latest preview or not
-                                     history_n=watch.history_n,
+            preferred_version = request.args.get('version')
-                                     extra_stylesheets=extra_stylesheets,
+            versions = list(watch.history.keys())
-#                                     current_diff_url=watch['url'],
+            timestamp = versions[-1]
-                                     watch=watch,
+            if preferred_version and preferred_version in versions:
-                                     uuid=uuid,
+                timestamp = preferred_version
-                                     is_html_webdriver=is_html_webdriver,
-                                     last_error=watch['last_error'],
-                                     last_error_text=watch.get_error_text(),
-                                     last_error_screenshot=watch.get_error_snapshot())
-            return output
 
-        timestamp = list(watch.history.keys())[-1]
             try:
+                versions = list(watch.history.keys())
                 tmp = watch.get_history_snapshot(timestamp).splitlines()
 
                 # Get what needs to be highlighted
@@ -1131,8 +1127,10 @@ def changedetection_app(config=None, datastore_o=None):
 
         output = render_template("preview.html",
                                  content=content,
+                                 current_version=timestamp,
                                  history_n=watch.history_n,
                                  extra_stylesheets=extra_stylesheets,
+                                 extra_title=f" - Diff - {watch.label} @ {timestamp}",
                                  ignored_line_numbers=ignored_line_numbers,
                                  triggered_line_numbers=trigger_line_numbers,
                                  current_diff_url=watch['url'],
@@ -1142,7 +1140,10 @@ def changedetection_app(config=None, datastore_o=None):
                                  is_html_webdriver=is_html_webdriver,
                                  last_error=watch['last_error'],
                                  last_error_text=watch.get_error_text(),
-                                 last_error_screenshot=watch.get_error_snapshot())
+                                 last_error_screenshot=watch.get_error_snapshot(),
+                                 versions=versions
+                                )
+
 
         return output
 

changedetectionio/static/js/diff-overview.js

@@ -8,6 +8,13 @@ $(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"});
+        }
+    });
+
     // 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);

changedetectionio/static/js/diff-render.js

@@ -79,12 +79,7 @@ $(document).ready(function () {
         $('#jump-next-diff').click();
     }
 
-    $('.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"});
-        }
-    })
     onDiffTypeChange(
         document.querySelector('#settings [name="diff_type"]:checked'),
     );

changedetectionio/static/js/preview.js

@@ -0,0 +1,49 @@
+function redirect_to_version(version) {
+    var currentUrl = window.location.href;
+    var baseUrl = currentUrl.split('?')[0]; // Base URL without query parameters
+    var anchor = '';
+
+    // Check if there is an anchor
+    if (baseUrl.indexOf('#') !== -1) {
+        anchor = baseUrl.substring(baseUrl.indexOf('#'));
+        baseUrl = baseUrl.substring(0, baseUrl.indexOf('#'));
+    }
+    window.location.href = baseUrl + '?version=' + version + anchor;
+}
+
+document.addEventListener('keydown', function (event) {
+    var selectElement = document.getElementById('preview-version');
+    if (selectElement) {
+        var selectedOption = selectElement.querySelector('option:checked');
+        if (selectedOption) {
+            if (event.key === 'ArrowLeft') {
+                if (selectedOption.previousElementSibling) {
+                    redirect_to_version(selectedOption.previousElementSibling.value);
+                }
+            } else if (event.key === 'ArrowRight') {
+                if (selectedOption.nextElementSibling) {
+                    redirect_to_version(selectedOption.nextElementSibling.value);
+                }
+            }
+        }
+    }
+});
+
+
+document.getElementById('preview-version').addEventListener('change', function () {
+    redirect_to_version(this.value);
+});
+
+var selectElement = document.getElementById('preview-version');
+if (selectElement) {
+    var selectedOption = selectElement.querySelector('option:checked');
+    if (selectedOption) {
+        if (selectedOption.previousElementSibling) {
+            document.getElementById('btn-previous').href = "?version=" + selectedOption.previousElementSibling.value;
+        }
+        if (selectedOption.nextElementSibling) {
+            document.getElementById('btn-next').href = "?version=" + selectedOption.nextElementSibling.value;
+        }
+
+    }
+}

changedetectionio/templates/preview.html

@@ -9,19 +9,47 @@
         const highlight_submit_ignore_url = "{{url_for('highlight_submit_ignore_url', uuid=uuid)}}";
     </script>
     <script src="{{ url_for('static_content', group='js', filename='diff-overview.js') }}" defer></script>
-
+    <script src="{{ url_for('static_content', group='js', filename='preview.js') }}" defer></script>
     <script src="{{ url_for('static_content', group='js', filename='tabs.js') }}" defer></script>
+    {% if versions|length >= 2 %}
+        <div id="settings" style="text-align: center;">
+            <form class="pure-form " action="" method="POST">
+                <fieldset>
+                    <label for="preview-version">Select timestamp</label> <select id="preview-version"
+                                                                                 name="from_version"
+                                                                                 class="needs-localtime">
+                    {% for version in versions|reverse %}
+                        <option value="{{ version }}" {% if version == current_version %} selected="" {% endif %}>
+                            {{ version }}
+                        </option>
+                    {% endfor %}
+                </select>
+                    <button type="submit" class="pure-button pure-button-primary">Go</button>
+
+                </fieldset>
+            </form>
+                <br>
+                <strong>Keyboard: </strong><a href="" class="pure-button pure-button-primary" id="btn-previous">
+                &larr; Previous</a> &nbsp; <a class="pure-button pure-button-primary" id="btn-next" href="">
+                &rarr; Next</a>
+        </div>
+    {% endif %}
+
     <div class="tabs">
         <ul>
-        {% if last_error_text %}<li class="tab" id="error-text-tab"><a href="#error-text">Error Text</a></li> {% endif %}
+            {% if last_error_text %}
-        {% if last_error_screenshot %}<li class="tab" id="error-screenshot-tab"><a href="#error-screenshot">Error Screenshot</a></li> {% endif %}
+                <li class="tab" id="error-text-tab"><a href="#error-text">Error Text</a></li> {% endif %}
+            {% if last_error_screenshot %}
+                <li class="tab" id="error-screenshot-tab"><a href="#error-screenshot">Error Screenshot</a>
+                </li> {% endif %}
             {% if history_n > 0 %}
                 <li class="tab" id="text-tab"><a href="#text">Text</a></li>
                 <li class="tab" id="screenshot-tab"><a href="#screenshot">Screenshot</a></li>
             {% endif %}
         </ul>
     </div>
-<form><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"></form>
+
+
     <div id="diff-ui">
         <div class="tab-pane-inner" id="error-text">
             <div class="snapshot-age error">{{ watch.error_text_ctime|format_seconds_ago }} seconds ago</div>
@@ -31,13 +59,16 @@
         </div>
 
         <div class="tab-pane-inner" id="error-screenshot">
-        <div class="snapshot-age error">{{watch.snapshot_error_screenshot_ctime|format_seconds_ago}} seconds ago</div>
+            <div class="snapshot-age error">{{ watch.snapshot_error_screenshot_ctime|format_seconds_ago }} seconds ago
-        <img id="error-screenshot-img"  style="max-width: 80%" alt="Current erroring screenshot from most recent request" >
+            </div>
+            <img id="error-screenshot-img" style="max-width: 80%"
+                 alt="Current erroring screenshot from most recent request">
         </div>
 
         <div class="tab-pane-inner" id="text">
             <div class="snapshot-age">{{ watch.snapshot_text_ctime|format_timestamp_timeago }}</div>
-        <span class="ignored">Grey lines are ignored</span> <span class="triggered">Blue lines are triggers</span> <span class="tip"><strong>Pro-tip</strong>: Highlight text to add to ignore filters</span>
+            <span class="ignored">Grey lines are ignored</span> <span class="triggered">Blue lines are triggers</span>
+            <span class="tip"><strong>Pro-tip</strong>: Highlight text to add to ignore filters</span>
 
             <table>
                 <tbody>