You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
5.3 KiB
121 lines
5.3 KiB
{% 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 %}
|
|
</script>
|
|
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='diff-overview.js')}}" defer></script>
|
|
|
|
<div id="settings">
|
|
<h1>Differences</h1>
|
|
<form class="pure-form " action="" method="GET">
|
|
<fieldset>
|
|
|
|
<label for="diffWords" class="pure-checkbox">
|
|
<input type="radio" name="diff_type" id="diffWords" value="diffWords"/> Words</label>
|
|
<label for="diffLines" class="pure-checkbox">
|
|
<input type="radio" name="diff_type" id="diffLines" value="diffLines" checked=""/> Lines</label>
|
|
|
|
<label for="diffChars" class="pure-checkbox">
|
|
<input type="radio" name="diff_type" id="diffChars" value="diffChars"/> Chars</label>
|
|
<!-- @todo - when mimetype is JSON, select this by default? -->
|
|
<label for="diffJson" class="pure-checkbox">
|
|
<input type="radio" name="diff_type" id="diffJson" value="diffJson" /> JSON</label>
|
|
|
|
{% if versions|length >= 1 %}
|
|
<label for="diff-version">Compare newest (<span id="current-v-date"></span>) with</label>
|
|
<select id="diff-version" name="previous_version">
|
|
{% for version in versions|reverse %}
|
|
<option value="{{version}}" {% if version== current_previous_version %} selected="" {% endif %}>
|
|
{{version}}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<button type="submit" class="pure-button pure-button-primary">Go</button>
|
|
{% endif %}
|
|
</fieldset>
|
|
</form>
|
|
<del>Removed text</del>
|
|
<ins>Inserted Text</ins>
|
|
<span>
|
|
<!-- https://github.com/kpdecker/jsdiff/issues/389 ? -->
|
|
<label for="ignoreWhitespace" class="pure-checkbox" id="label-diff-ignorewhitespace">
|
|
<input type="checkbox" id="ignoreWhitespace" name="ignoreWhitespace"/> Ignore Whitespace</label>
|
|
</span>
|
|
</div>
|
|
|
|
<div id="diff-jump">
|
|
<a onclick="next_diff();">Jump</a>
|
|
</div>
|
|
|
|
<script type="text/javascript" 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=""><a href="#text">Text</a></li>
|
|
<li class="tab" id="screenshot-tab"><a href="#screenshot">Screenshot</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">
|
|
<div class="tip">Pro-tip: Use <strong>show current snapshot</strong> tab to visualise what will be ignored.
|
|
</div>
|
|
<div class="snapshot-age">{{watch_a.snapshot_text_ctime|format_timestamp_timeago}}</div>
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<!-- just proof of concept copied straight from github.com/kpdecker/jsdiff -->
|
|
<td id="a" style="display: none;">{{previous}}</td>
|
|
<td id="b" style="display: none;">{{newest}}</td>
|
|
<td id="diff-col">
|
|
<span id="result"></span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
Diff algorithm from the amazing <a href="https://github.com/kpdecker/jsdiff">github.com/kpdecker/jsdiff</a>
|
|
</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 type="text/javascript" src="{{url_for('static_content', group='js', filename='diff.min.js')}}"></script>
|
|
|
|
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='diff-render.js')}}"></script>
|
|
|
|
|
|
{% endblock %} |