Implement UI for dataset selection

As part of updating the database with the new data, there is a need to
select the appropriate dataset that the data belongs to, and this
commit provides the UI to assist the user do that.

3 files changed, 94 insertions, 0 deletions

diff --git a/qc_app/templates/dbupdate_error.html b/qc_app/templates/dbupdate_error.html
new file mode 100644
index 0000000..83e34fe
--- /dev/null
+++ b/qc_app/templates/dbupdate_error.html
@@ -0,0 +1,12 @@
+{%extends "base.html"%}
+
+{%block title%}DB Update Error{%endblock%}
+
+{%block contents%}
+<h1 class="heading">database update error</h2>
+
+<p class="alert-error">
+  <strong>Database Update Error</strong>: {{error_message}}
+</p>
+
+{%endblock%}
diff --git a/qc_app/templates/parse_results.html b/qc_app/templates/parse_results.html
index 358c5e8..1a224e8 100644
--- a/qc_app/templates/parse_results.html
+++ b/qc_app/templates/parse_results.html
@@ -12,4 +12,11 @@
 
 {{errors_display(errors, "No errors found in the file", "We found the following errors")}}
 
+{%if errors | length == 0 %}
+<form method="post" action="{{url_for('dbinsert.select_dataset')}}">
+  <input type="hidden" name="job_id" value="{{job_id}}" />
+  <input type="submit" value="update database" class="btn btn-main" />
+</form>
+{%endif%}
+
 {%endblock%}
diff --git a/qc_app/templates/select_dataset.html b/qc_app/templates/select_dataset.html
new file mode 100644
index 0000000..5fefccc
--- /dev/null
+++ b/qc_app/templates/select_dataset.html
@@ -0,0 +1,75 @@
+{%extends "base.html"%}
+
+{%block title%}Select Dataset{%endblock%}
+
+{%block contents%}
+<h1 class="heading">{{job_name}}: select dataset</h2>
+
+<form method="POST" data-menu-content="{{menu_contents}}">
+  <input type="hidden" name="job_id" value="{{job_id}}" />
+
+  <fieldset>
+    <label for="species">species:</label>
+    <select id="species" name="species">
+      {%for row in species:%}
+      <option value="{{row[0]}}"
+	      {%if row[0] == default_species:%}
+	      selected="selected"
+	      {%endif%}>
+	{{row[1]}}
+      </option>
+      {%endfor%}
+    </select>
+  </fieldset>
+
+  <fieldset>
+    <label for="group">group:</label>
+    <select id="group" name="group">
+      {%for grouping, grps in groups.items():%}
+      <optgroup label="{{grouping}}">
+	{%for group in grps:%}
+	<option value="{{group[0]}}">{{group[1]}}</option>
+	{%endfor%}
+      </optgroup>
+      {%endfor%}
+    </select>
+  </fieldset>
+
+  <fieldset>
+    <label for="type">type:</label>
+    <select id="type" name="type">
+      {%for grouping, typs in types.items():%}
+      <optgroup label="{{grouping}}">
+	{%for type in typs:%}
+	<option value="{{type[0]}}">{{type[1]}}</option>
+	{%endfor%}
+      </optgroup>
+      {%endfor%}
+    </select>
+  </fieldset>
+
+  <fieldset>
+    <label for="dataset">dataset:</label>
+    <select id="dataset" name="dataset">
+      {%for dataset_id, name1, name2 in datasets:%}
+      <option value="{{dataset_id}}">[{{name1}}] {{name2}}</option>
+      {%endfor%}
+    </select>
+  </fieldset>
+
+  <fieldset>
+    <input type="submit" class="btn btn-main" value="update database" />
+  </fieldset>
+
+</form>
+
+{%endblock%}
+
+{%block javascript%}
+<script type="text/javascript" src="/static/js/dbinsert.js"></script>
+<script type="text/javascript">
+  document.getElementById("species").addEventListener("change", update_menu);
+  document.getElementById("group").addEventListener("change", update_menu);
+  document.getElementById("type").addEventListener("change", update_menu);
+</script>
+{%endblock%}