UI - Ability to preview/view single changes by timestamp using keyboard or select box(#1916)
dgtlmoon
7 months ago
committed by
GitHub
parent
e4504fee49
commit
e27f66eb73
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,72 +1,103 @@
|
|||||||
{% extends 'base.html' %}
|
{% extends 'base.html' %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<script>
|
<script>
|
||||||
const screenshot_url="{{url_for('static_content', group='screenshot', filename=uuid)}}";
|
const screenshot_url = "{{url_for('static_content', group='screenshot', filename=uuid)}}";
|
||||||
{% if last_error_screenshot %}
|
{% if last_error_screenshot %}
|
||||||
const error_screenshot_url="{{url_for('static_content', group='screenshot', filename=uuid, error_screenshot=1) }}";
|
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">
|
||||||
|
← Previous</a> <a class="pure-button pure-button-primary" id="btn-next" href="">
|
||||||
|
→ Next</a>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% 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='tabs.js')}}" defer></script>
|
<div class="tabs">
|
||||||
<div class="tabs">
|
<ul>
|
||||||
<ul>
|
{% if last_error_text %}
|
||||||
{% if last_error_text %}<li class="tab" id="error-text-tab"><a href="#error-text">Error Text</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 last_error_screenshot %}
|
||||||
{% if history_n > 0 %}
|
<li class="tab" id="error-screenshot-tab"><a href="#error-screenshot">Error Screenshot</a>
|
||||||
<li class="tab" id="text-tab"><a href="#text">Text</a></li>
|
</li> {% endif %}
|
||||||
<li class="tab" id="screenshot-tab"><a href="#screenshot">Screenshot</a></li>
|
{% if history_n > 0 %}
|
||||||
{% endif %}
|
<li class="tab" id="text-tab"><a href="#text">Text</a></li>
|
||||||
</ul>
|
<li class="tab" id="screenshot-tab"><a href="#screenshot">Screenshot</a></li>
|
||||||
</div>
|
{% endif %}
|
||||||
<form><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"></form>
|
</ul>
|
||||||
<div id="diff-ui">
|
</div>
|
||||||
<div class="tab-pane-inner" id="error-text">
|
|
||||||
<div class="snapshot-age error">{{watch.error_text_ctime|format_seconds_ago}} seconds ago</div>
|
|
||||||
<pre>
|
<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 }}
|
{{ last_error_text }}
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tab-pane-inner" id="error-screenshot">
|
<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>
|
||||||
</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="tab-pane-inner" id="text">
|
||||||
<div class="snapshot-age">{{watch.snapshot_text_ctime|format_timestamp_timeago}}</div>
|
<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>
|
<table>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td id="diff-col" class="highlightable-filter">
|
<td id="diff-col" class="highlightable-filter">
|
||||||
{% for row in content %}
|
{% for row in content %}
|
||||||
<div class="{{row.classes}}">{{row.line}}</div>
|
<div class="{{ row.classes }}">{{ row.line }}</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tab-pane-inner" id="screenshot">
|
<div class="tab-pane-inner" id="screenshot">
|
||||||
<div class="tip">
|
<div class="tip">
|
||||||
For now, Differences are performed on text, not graphically, only the latest screenshot is available.
|
For now, Differences are performed on text, not graphically, only the latest screenshot is available.
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
{% if is_html_webdriver %}
|
{% if is_html_webdriver %}
|
||||||
{% if screenshot %}
|
{% if screenshot %}
|
||||||
<div class="snapshot-age">{{watch.snapshot_screenshot_ctime|format_timestamp_timeago}}</div>
|
<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" >
|
<img style="max-width: 80%" id="screenshot-img" alt="Current screenshot from most recent request">
|
||||||
{% else %}
|
{% else %}
|
||||||
No screenshot available just yet! Try rechecking the page.
|
No screenshot available just yet! Try rechecking the page.
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<strong>Screenshot requires Playwright/WebDriver enabled</strong>
|
<strong>Screenshot requires Playwright/WebDriver enabled</strong>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Loading…
Reference in new issue