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.
161 lines
7.3 KiB
161 lines
7.3 KiB
{% extends 'base.html' %}
|
|
{% from '_helpers.jinja' 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('highlight_submit_ignore_url', uuid=uuid)}}";
|
|
|
|
</script>
|
|
<script 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 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>
|
|
<li class="tab" id="extract-tab"><a href="#extract">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">
|
|
<div class="tip">Pro-tip: Use <strong>show current snapshot</strong> tab to visualise what will be ignored, highlight text to add to ignore filters</div>
|
|
|
|
{% 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 %}
|
|
|
|
<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" class="highlightable-filter"></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 class="tab-pane-inner" id="extract">
|
|
<form id="extract-data-form" class="pure-form pure-form-stacked edit-form"
|
|
action="{{ url_for('diff_history_page', uuid=uuid) }}#extract"
|
|
method="POST">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
|
|
<p>This tool will extract text data from all of the watch history.</p>
|
|
|
|
<div class="pure-control-group">
|
|
{{ render_field(extract_form.extract_regex) }}
|
|
<span class="pure-form-message-inline">
|
|
A <strong>RegEx</strong> is a pattern that identifies exactly which part inside of the text that you want to extract.<br>
|
|
|
|
<p>
|
|
For example, to extract only the numbers from text ‐<br>
|
|
<strong>Raw text</strong>: <code>Temperature <span style="color: red">5.5</span>°C in Sydney</code><br>
|
|
<strong>RegEx to extract:</strong> <code>Temperature <span style="color: red">([0-9\.]+)</span></code><br>
|
|
</p>
|
|
<p>
|
|
<a href="https://RegExr.com/">Be sure to test your RegEx here.</a>
|
|
</p>
|
|
<p>
|
|
Each RegEx group bracket <code>()</code> will be in its own column, the first column value is always the date.
|
|
</p>
|
|
</span>
|
|
</div>
|
|
<div class="pure-control-group">
|
|
{{ render_button(extract_form.extract_submit_button) }}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const newest_version_timestamp = {{newest_version_timestamp}};
|
|
</script>
|
|
<script src="{{url_for('static_content', group='js', filename='diff.min.js')}}"></script>
|
|
|
|
<script src="{{url_for('static_content', group='js', filename='diff-render.js')}}"></script>
|
|
|
|
|
|
{% endblock %}
|