1 files changed, 95 insertions, 0 deletions
diff --git a/gn2/wqflask/templates/display_diffs.html b/gn2/wqflask/templates/display_diffs.html
new file mode 100644
index 00000000..ce50c1b4
--- /dev/null
+++ b/gn2/wqflask/templates/display_diffs.html
@@ -0,0 +1,95 @@
+{% 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") %}
+    {% set header = diff.get("Columns", "Strain Name,Value,SE,Count") %}
+    {% 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-additions">
+                <thead>
+                    <th scope="col">Added Data ({{ header }})</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-modifications">
+                <thead>
+                    <th scope="col">Original</th>
+                    <th scope="col">Current</th>
+                    <th scope="col">Diff ({{ header }})</th>
+                </thead>
+                <tbody>
+                    {% for data in modifications %}
+                    <tr>
+                        <td>{{ data.get("Original") }}</td>
+                        <td>{{ data.get("Current") }}</td>
+                        <td><pre>{{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-deletions">
+                <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-additions').dataTable();
+     $('#table-modifications').dataTable();
+     $('#table-deletions').dataTable();
+ });
+</script>
+{% endblock %}