Supply different versions to browse

This commit is contained in:
Leigh Morresi
2021-02-01 12:39:15 +01:00
parent 118814912f
commit 3e934e8f8c
3 changed files with 72 additions and 19 deletions

View File

@@ -2,34 +2,58 @@
{% block content %}
<div id="diff-ui">
<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" checked=""/> Words</label>
<label for="diffLines" class="pure-checkbox">
<input type="radio" name="diff_type" id="diffLines" value="diffLines"/> Lines</label>
<label for="diffChars" class="pure-checkbox">
<input type="radio" name="diff_type" id="diffChars" value="diffChars"/> Chars</label>
{% if versions|length >= 1 %}
<label for="diff-version">Compare newest with</label>
<select id="diff-version" name="previous_version">
{% for version in versions %}
<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>
<div id="settings">
<h3>Diff</h3>
<label><input type="radio" name="diff_type" value="diffChars"> Chars</label>
<label><input type="radio" name="diff_type" value="diffWords" > Words</label>
<label><input type="radio" name="diff_type" value="diffLines" checked=""> Lines</label>
</div>
<div id="diff-ui">
<table>
<tbody>
<tr>
<!-- just proof of concept copied straight from github.com/kpdecker/jsdiff -->
<!-- just proof of concept copied straight from github.com/kpdecker/jsdiff -->
<td id="a" style="display: none;">{{left}}</td>
<td id="b" style="display: none;">{{right}}</td>
<td>
<pre id="result"></pre>
<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>
Diff algorithm from the amazing <a href="https://github.com/kpdecker/jsdiff">github.com/kpdecker/jsdiff</a>
</div>
<script src="/static/js/diff.js"></script>
<script defer="">
var a = document.getElementById('a');
var b = document.getElementById('b');
var result = document.getElementById('result');
@@ -63,6 +87,19 @@ function changed() {
}
window.onload = function() {
/* Convert what is options from UTC time.time() to local browser time */
var diffList=document.getElementById("diff-version");
if (typeof(diffList) != 'undefined' && diffList != null) {
for (var option of diffList.options) {
//alert(option.value);
var dateObject = new Date(option.value*1000);
option.label=dateObject.toLocaleString();
}
}
onDiffTypeChange(document.querySelector('#settings [name="diff_type"]:checked'));
changed();
};
@@ -89,10 +126,11 @@ for (var i = 0; i < radio.length; i++) {
}
}
</script>
{% endblock %}