mirror of
https://github.com/dgtlmoon/changedetection.io.git
synced 2026-05-03 08:10:37 +00:00
dgtlmoon
204 lines
10 KiB
HTML
204 lines
10 KiB
HTML
{% extends 'base.html' %}
|
|
{% from '_helpers.html' import render_field, render_checkbox_field, render_button %}
|
|
{% 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('ui.ui_edit.highlight_submit_ignore_url', uuid=uuid)}}";
|
|
const watch_url= {{watch_a.link|tojson}};
|
|
|
|
// Initial scroll position: if set, scroll to this line number in #difference on page load
|
|
const initialScrollToLineNumber = {{ initial_scroll_line_number|default('null') }};
|
|
</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
|
|
<script src="{{url_for('static_content', group='js', filename='plugins.js')}}"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/piexifjs@1.0.6/piexif.min.js"></script>
|
|
<script src="{{url_for('static_content', group='js', filename='snippet-to-image.js')}}"></script>
|
|
<script src="{{url_for('static_content', group='js', filename='diff-overview.js')}}" defer></script>
|
|
|
|
|
|
<div id="settings">
|
|
<form class="pure-form " action="{{ url_for("ui.ui_diff.diff_history_page", uuid=uuid) }}" method="GET" id="diff-form">
|
|
<fieldset class="diff-fieldset">
|
|
{% if versions|length >= 1 %}
|
|
<span style="white-space: nowrap;">
|
|
<label id="change-from" for="diff-from-version" class="from-to-label">{{ _('From') }}</label>
|
|
<select id="diff-from-version" name="from_version" class="needs-localtime">
|
|
{%- for version in versions|reverse -%}
|
|
<option value="{{ version }}" {% if version== from_version %} selected="" {% endif %}>
|
|
{{ version }}{#{% if loop.index == 2 %} (Previous){% endif %}#}
|
|
</option>
|
|
{%- endfor -%}
|
|
</select>
|
|
</span>
|
|
<span style="white-space: nowrap;">
|
|
<label id="change-to" for="diff-to-version" class="from-to-label">{{ _('To') }}</label>
|
|
<select id="diff-to-version" name="to_version" class="needs-localtime">
|
|
{%- for version in versions|reverse -%}
|
|
<option value="{{ version }}" {% if version== to_version %} selected="" {% endif %}>
|
|
{{ version }}{#{% if loop.first %} (Current){% endif %}#}
|
|
</option>
|
|
{%- endfor -%}
|
|
</select>
|
|
</span>
|
|
{#<button type="submit" class="pure-button pure-button-primary reset-margin">Go</button>#}
|
|
{% endif %}
|
|
</fieldset>
|
|
<fieldset id="diff-style">
|
|
<span>
|
|
<label for="diffWords" class="pure-checkbox">
|
|
<input type="radio" name="type" id="diffWords" value="diffWords" {% if diff_prefs.type == 'diffWords' %}checked=""{% endif %}> {{ _('Words') }}</label>
|
|
</span>
|
|
<span>
|
|
<label for="diffLines" class="pure-checkbox">
|
|
<input type="radio" name="type" id="diffLines" value="diffLines" {% if diff_prefs.type == 'diffLines' %}checked=""{% endif %}> {{ _('Lines') }}</label>
|
|
</span>
|
|
<span>
|
|
<label for="ignoreWhitespace" class="pure-checkbox" id="label-diff-ignorewhitespace">
|
|
<input type="checkbox" id="ignoreWhitespace" name="ignoreWhitespace" {% if diff_prefs.ignoreWhitespace %}checked=""{% endif %}> {{ _('Ignore Whitespace') }}</label>
|
|
</span>
|
|
<span>
|
|
<label for="changesOnly" class="pure-checkbox" id="label-diff-changes">
|
|
<input type="checkbox" id="changesOnly" name="changesOnly" {% if diff_prefs.changesOnly %}checked=""{% endif %}> {{ _('Same/non-changed') }}</label>
|
|
</span>
|
|
<span>
|
|
<label for="removed" class="pure-checkbox" id="label-diff-removed">
|
|
<input type="checkbox" id="removed" name="removed" {% if diff_prefs.removed %}checked=""{% endif %}> {{ _('Removed') }}</label>
|
|
</span>
|
|
<span>
|
|
<label for="added" class="pure-checkbox" id="label-diff-added">
|
|
<input type="checkbox" id="added" name="added" {% if diff_prefs.added %}checked=""{% endif %}> {{ _('Added') }}</label>
|
|
</span>
|
|
<span>
|
|
<label for="replaced" class="pure-checkbox" id="label-diff-replaced">
|
|
<input type="checkbox" id="replaced" name="replaced" {% if diff_prefs.replaced %}checked=""{% endif %}> {{ _('Replaced') }}</label>
|
|
</span>
|
|
</fieldset>
|
|
{%- if versions|length >= 2 -%}
|
|
<div id="keyboard-nav">
|
|
<strong>{{ _('Keyboard:') }} </strong>
|
|
<a href="" class="pure-button pure-button-primary" id="btn-previous"> ← {{ _('Previous') }}</a>
|
|
<a class="pure-button pure-button-primary" id="btn-next" href=""> → {{ _('Next') }}</a>
|
|
</div>
|
|
{%- endif -%}
|
|
</form>
|
|
</div>
|
|
|
|
<div id="diff-jump" style="display:none;"><!-- disabled for now -->
|
|
<a id="jump-next-diff" title="{{ _('Jump to next difference') }}">{{ _('Jump') }}</a>
|
|
</div>
|
|
|
|
<script src="{{url_for('static_content', group='js', filename='tabs.js')}}" defer></script>
|
|
<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 %}
|
|
<li class="tab" id="text-tab"><a href="#text">{{ _('Text') }}</a></li>
|
|
<li class="tab" id="screenshot-tab"><a href="#screenshot">{{ _('Current screenshot') }}</a></li>
|
|
<li class="tab" id="extract-tab"><a href="{{ url_for('ui.ui_diff.diff_history_page_extract_GET', uuid=uuid)}}">{{ _('Extract Data') }}</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="diff-ui">
|
|
<div class="tab-pane-inner" id="error-text">
|
|
<div class="snapshot-age error">{{watch_a.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_a.snapshot_error_screenshot_ctime|format_seconds_ago}} {{ _('seconds ago') }}</div>
|
|
<img id="error-screenshot-img" style="max-width: 80%" alt="{{ _('Current error-ing screenshot from most recent request') }}" >
|
|
</div>
|
|
|
|
<div class="tab-pane-inner" id="text">
|
|
{%- if (content | default('')).split('\n') | length > 100 -%}
|
|
<div id="cell-diff-jump-visualiser" style="user-select: none;">
|
|
{%- for cell in diff_cell_grid -%}
|
|
<div{% if cell.class %} class="{{ cell.class }}"{% endif %}></div>
|
|
{%- endfor -%}
|
|
</div>
|
|
{%- endif -%}
|
|
{%- if password_enabled_and_share_is_off -%}
|
|
<div class="tip">{{ _('Pro-tip: You can enable') }} <strong>{{ _('"share access when password is enabled"') }}</strong> {{ _('from settings.') }}
|
|
</div>
|
|
{%- endif -%}
|
|
{%- if llm_configured -%}
|
|
<div id="llm-diff-summary-area"{% if not llm_diff_summary %} data-pending="1"{% endif %}>
|
|
<span class="llm-diff-summary-label">✨ {{ _('AI Change Summary') }}</span>
|
|
{%- if llm_diff_summary -%}
|
|
<p class="llm-diff-summary-text">{{ llm_diff_summary }}</p>
|
|
{%- else -%}
|
|
<p class="llm-diff-summary-text llm-diff-summary-loading">{{ _('Generating summary…') }}</p>
|
|
{%- endif -%}
|
|
</div>
|
|
{%- endif -%}
|
|
<div id="text-diff-heading-area" style="user-select: none;">
|
|
<div class="snapshot-age"><span>{{ from_version|format_timestamp_timeago }}</span>
|
|
{%- if note -%}<span class="note"><strong>{{ note }}</strong></span>{%- endif -%}
|
|
<a href="{{ url_for("ui.ui_preview.preview_page", uuid=uuid) }}">{{ _('Goto single snapshot') }}</a>
|
|
</div>
|
|
</div>
|
|
<pre id="difference" style="border-left: 2px solid #ddd;">{{ content| diff_unescape_difference_spans }}</pre>
|
|
<div id="diff-visualiser-area-after" style="user-select: none;">
|
|
<strong>{{ _('Tip:') }}</strong> {{ _('Highlight text to share or add to ignore lists.') }}
|
|
</div>
|
|
</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>
|
|
{% if is_html_webdriver %}
|
|
{% if screenshot %}
|
|
<div class="snapshot-age">{{watch_a.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>
|
|
|
|
<script>
|
|
const newest_version_timestamp = {{newest_version_timestamp}};
|
|
</script>
|
|
<script src="{{url_for('static_content', group='js', filename='diff-render.js')}}"></script>
|
|
|
|
{% if llm_configured %}
|
|
<script>
|
|
$(function () {
|
|
var $area = $('#llm-diff-summary-area');
|
|
if (!$area.length || !$area.data('pending')) return;
|
|
|
|
var fromVersion = $('#diff-from-version').val();
|
|
var toVersion = $('#diff-to-version').val();
|
|
var summaryUrl = "{{ url_for('ui.ui_diff.diff_llm_summary', uuid=uuid) }}";
|
|
|
|
$.getJSON(summaryUrl, { from_version: fromVersion, to_version: toVersion })
|
|
.done(function (data) {
|
|
if (data.summary) {
|
|
$area.find('.llm-diff-summary-text')
|
|
.removeClass('llm-diff-summary-loading')
|
|
.text(data.summary);
|
|
$area.removeAttr('data-pending');
|
|
} else {
|
|
$area.remove();
|
|
}
|
|
})
|
|
.fail(function () {
|
|
$area.remove();
|
|
});
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
|
|
{% endblock %}
|