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.

1 files changed, 75 insertions, 0 deletions

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