Supply different versions to browse

backend/backend.py

@@ -187,18 +187,28 @@ def diff_history_page(uuid):
     dates = list(watch['history'].keys())
     dates = [int(i) for i in dates]
     dates.sort(reverse=True)
+    dates = [str(i) for i in dates]
+
 
     left_file_contents = right_file_contents = ""
     l_file = watch['history'][str(dates[-1])]
     with open(l_file, 'r') as f:
         left_file_contents = f.read()
 
-    r_file  = watch['history'][str(dates[-2])]
+    previous_version = request.args.get('previous_version')
+    try:
+        r_file = watch['history'][str(previous_version)]
+    except KeyError:
+        # Not present, use a default value
+        r_file = watch['history'][str(dates[-2])]
+
     with open(r_file, 'r') as f:
         right_file_contents = f.read()
 
+    #print (dates, l_file, r_file)
     output = render_template("diff.html", watch_a=watch, messages=messages, left=left_file_contents,
-                             right=right_file_contents, extra_stylesheets=extra_stylesheets)
+                             right=right_file_contents, extra_stylesheets=extra_stylesheets, versions=dates[:-1],
+                             current_previous_version=str(previous_version))
     return output
 
 @app.route("/favicon.ico", methods=['GET'])

backend/static/css/diff.css

@@ -32,12 +32,17 @@ ins {
 }
 
 #settings {
-
-
-	line-height: 2em;
+    background: rgba(0,0,0,.05);
+        padding: 1em;
+    border-radius: 10px;
+    margin-bottom: 1em;
+    color: #fff;
+    font-size: 80%;
 }
 #settings label {
 	margin-left: 1em;
+	display: inline-block;
+	font-weight: normal;
 }
 
 .source {
@@ -53,7 +58,7 @@ ins {
 }
 
 #diff-ui {
-background: #fff;
+    background: #fff;
     padding: 2em;
     margin: 1em;
     border-radius: 5px;

backend/templates/diff.html

@@ -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 %}