changedetection.io/changedetectionio/templates/preview.html

{% extends 'base.html' %}

{% block content %}
    <script>
        const screenshot_url = "{{url_for('static_content', group='screenshot', filename=uuid)}}";
        {% if last_error_screenshot %}
            const error_screenshot_url = "{{url_for('static_content', group='screenshot', filename=uuid, error_screenshot=1) }}";
        {% endif %}
        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_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>


    <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>
            <pre>
            {{ last_error_text }}
        </pre>
        </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>
            <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>

            <table>
                <tbody>
                <tr>
                    <td id="diff-col" class="highlightable-filter">
                        {% for row in content %}
                            <div class="{{ row.classes }}">{{ row.line }}</div>
                        {% endfor %}
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <div class="tab-pane-inner" id="screenshot">
            <div class="tip">
                For now, Differences are performed on text, not graphically, only the latest screenshot is available.
            </div>
            <br>
            {% if is_html_webdriver %}
                {% if screenshot %}
                    <div class="snapshot-age">{{ watch.snapshot_screenshot_ctime|format_timestamp_timeago }}</div>
                    <img style="max-width: 80%" id="screenshot-img" alt="Current screenshot from most recent request">
                {% else %}
                    No screenshot available just yet! Try rechecking the page.
                {% endif %}
            {% else %}
                <strong>Screenshot requires Playwright/WebDriver enabled</strong>
            {% endif %}
        </div>
    </div>
{% endblock %}