Add interface for displaying diffs in a html page

2 files changed, 105 insertions, 1 deletions

diff --git a/wqflask/wqflask/metadata_edits.py b/wqflask/wqflask/metadata_edits.py
index fa6cfea3..593605b5 100644
--- a/wqflask/wqflask/metadata_edits.py
+++ b/wqflask/wqflask/metadata_edits.py
@@ -440,7 +440,14 @@ def show_diff(name):
     with open(os.path.join(f"{TMPDIR}/sample-data/diffs",
                            name), 'r') as myfile:
         content = myfile.read()
-    return Response(content, mimetype='text/json')
+    content = json.loads(content)
+    for data in content.get("Modifications"):
+        data["Diff"] = "\n".join(difflib.ndiff([data.get("Original")],
+                                               [data.get("Current")]))
+    return render_template(
+        "display_diffs.html",
+        diff=content
+    )
 
 
 @metadata_edit.route("<resource_id>/diffs/<file_name>/reject")
@@ -465,6 +472,7 @@ def approve_data(resource_id:str, file_name: str):
                            passwd=current_app.config.get("DB_PASS"),
                            host=current_app.config.get("DB_HOST"))
     TMPDIR = current_app.config.get("TMPDIR")
+    import pudb; pu.db
     with open(os.path.join(f"{TMPDIR}/sample-data/diffs",
                            file_name), 'r') as myfile:
         sample_data = json.load(myfile)
diff --git a/wqflask/wqflask/templates/display_diffs.html b/wqflask/wqflask/templates/display_diffs.html
new file mode 100644
index 00000000..edd889b5
--- /dev/null
+++ b/wqflask/wqflask/templates/display_diffs.html
@@ -0,0 +1,96 @@
+{% extends "base.html" %}
+{% block title %}Trait Submission{% endblock %}
+
+{% block css %}
+<link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='DataTables/css/jquery.dataTables.css') }}" />
+{% endblock %}
+
+{% block content %}
+<!-- Start of body -->
+<div class="container">
+    {% set additions = diff.get("Additions") %}
+    {% set modifications = diff.get("Modifications") %}
+    {% set deletions = diff.get("Deletions") %}
+
+    {% if additions %}
+    <h2>Additions Data:</h2>
+    <div class="row">
+        <div class="col-md-8">
+            <table class="table-responsive table-hover table-striped cell-border" id="table-approved">
+                <thead>
+                    <th scope="col">Added Data</</th>
+                </thead>
+                <tbody>
+                    {% for data in additions %}
+                    <tr>
+                        <td>{{ data }}</td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+    {% endif %}
+
+    {% if modifications %}
+    <h2>Modified Data:</h2>
+
+    <div class="row">
+        <div class="col-md-8">
+            <table class="table-responsive table-hover table-striped cell-border" id="table-approved">
+                <thead>
+                    <th scope="col">Original</</th>
+                    <th scope="col">Current</</th>
+                    <th scope="col">Diff</</th>
+                </thead>
+                <tbody>
+                    {% for data in modifications %}
+                    <tr>
+                        <td>{{ data.get("Original") }}</td>
+                        <td>{{ data.get("Current") }}</td>
+                        <td><pre style="font: courier">{{data.get("Diff")}}</pre></td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+    {% endif %}
+
+    {% if deletions %}
+    <h2>Deleted Data:</h2>
+    <div class="row">
+        <div class="col-md-8">
+            <table class="table-responsive table-hover table-striped cell-border" id="table-approved">
+                <thead>
+                    <th scope="col">Deleted Data</</th>
+                </thead>
+                <tbody>
+                    {% for data in deletions %}
+                    <tr>
+                        <td>{{ data }}</td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+    {% endif %}
+
+</div>
+{%endblock%}
+
+{% block js %}
+<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.js') }}"></script>
+<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='DataTables/js/jquery.dataTables.min.js') }}"></script>
+<script language="javascript" type="text/javascript">
+ gn_server_url = "{{ gn_server_url }}";
+
+ $(document).ready( function() {
+     $('#table-approved').dataTable();
+ })
+ $(document).ready( function() {
+     $('#table-rejected').dataTable();
+ })
+</script>
+{% endblock %}