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.

2 files changed, 124 insertions, 0 deletions

diff --git a/qc_app/static/css/styles.css b/qc_app/static/css/styles.css
index 9e5a4ec..4d0fa8c 100644
--- a/qc_app/static/css/styles.css
+++ b/qc_app/static/css/styles.css
@@ -101,3 +101,22 @@ table {
     border: 2px solid;
     border-radius: 1em;
 }
+
+form {
+    width: 30%;
+}
+
+fieldset {
+    border-style: none;
+    display: grid;
+    grid-template-columns: 5em 1fr;
+    column-gap: 5px;
+}
+
+label {
+    grid-column: 1 / 2;
+}
+
+input,select,button {
+    grid-column: 2 / 3;
+}
diff --git a/qc_app/static/js/dbinsert.js b/qc_app/static/js/dbinsert.js
new file mode 100644
index 0000000..3c0be54
--- /dev/null
+++ b/qc_app/static/js/dbinsert.js
@@ -0,0 +1,105 @@
+function remove_children(element) {
+    Array.from(element.children).forEach(child => {
+	element.removeChild(child);
+    });
+}
+
+function trigger_change_event(element) {
+    evt = new Event("change");
+    element.dispatchEvent(evt);
+}
+
+function setup_groups(group_data) {
+    elt = document.getElementById("group");
+    remove_children(elt);
+    the_groups = group_data.reduce(
+	function(acc, row) {
+	    grouping = row[2].slice(7).trim();
+	    if(acc[grouping] === undefined) {
+		acc[grouping] = [];
+	    }
+	    acc[grouping].push([row[0], row[1]]);
+	    return acc;
+	},
+	{});
+    for(grouping in the_groups) {
+	optgrp = document.createElement("optgroup");
+	optgrp.setAttribute("label", grouping);
+	the_groups[grouping].forEach(group => {
+	    opt = document.createElement("option");
+	    opt.setAttribute("value", group[0]);
+	    opt.appendChild(document.createTextNode(group[1]));
+	    optgrp.appendChild(opt);
+	});
+	elt.appendChild(optgrp);
+    }
+    trigger_change_event(elt);
+}
+
+function setup_types(type_data) {
+    elt = document.getElementById("type");
+    remove_children(elt);
+    the_types = type_data.reduce(function(acc, row) {
+	grp = row[2];
+	if(acc[grp] === undefined) {
+	    acc[grp] = [];
+	}
+	acc[grp].push([row[0], row[1]]);
+	return acc;
+    }, {});
+    for(type_group in the_types) {
+	optgrp = document.createElement("optgroup");
+	optgrp.setAttribute("label", type_group);
+	the_types[type_group].forEach(type => {
+	    opt = document.createElement("option");
+	    opt.setAttribute("value", type[0]);
+	    opt.appendChild(document.createTextNode(type[1]));
+	    optgrp.appendChild(opt);
+	});
+	elt.appendChild(optgrp);
+    }
+    trigger_change_event(elt);
+}
+
+function setup_datasets(dataset_data) {
+    console.info("DATASET DATA:", dataset_data);
+    elt = document.getElementById("dataset");
+    remove_children(elt);
+    dataset_data.forEach(dataset => {
+	opt = document.createElement("option");
+	opt.setAttribute("value", dataset[0]);
+	opt.appendChild(document.createTextNode(
+	    "[" + dataset[1] + "] " + dataset[2]));
+	elt.appendChild(opt);
+    });
+    trigger_change_event(elt);
+}
+
+function menu_contents() {
+    return JSON.parse(
+	document.getElementsByTagName("form")[0].getAttribute(
+	    "data-menu-content"));
+}
+
+function update_menu(event) {
+    menu = menu_contents();
+
+    species_elt = document.getElementById("species");
+    group_elt = document.getElementById("group");
+    type_elt = document.getElementById("type");
+    dataset_elt = document.getElementById("dataset");
+
+    if(event.target == species_elt) {
+	setup_groups(menu["groups"][species_elt.value]);
+    }
+
+    if(event.target == group_elt) {
+	setup_types(menu["types"][species_elt.value][group_elt.value]);
+    }
+
+    if(event.target == type_elt) {
+	setup_datasets(
+	    menu["datasets"][species_elt.value][group_elt.value][type_elt.value]
+	);
+    }
+}