Move JS to external file. Generalise functions.

Move the javascript to an external file to ease development.

Generalise some functions to make it easier to reuse the code down the line.

2 files changed, 210 insertions, 99 deletions

diff --git a/wqflask/wqflask/static/new/javascript/auth/search_genotypes.js b/wqflask/wqflask/static/new/javascript/auth/search_genotypes.js
new file mode 100644
index 00000000..39999e76
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/auth/search_genotypes.js
@@ -0,0 +1,207 @@
+/**
+ * Build a checkbox: For internal use only
+ * @param {Genotype Dataset object} A genotype dataset object
+ * @param {String} A string to initialise the checkbox
+ */
+function __build_checkbox__(dataset, checkbox_str) {
+    cell = $("<td>");
+    check = $(checkbox_str);
+    check.val(JSON.stringify(dataset));
+    cell.append(check);
+    return cell;
+}
+
+function link_checkbox(dataset) {
+    return __build_checkbox__(
+	dataset,
+	'<input type="checkbox" class="checkbox checkbox-selected" ' +
+	    'name="selected_datasets" checked="checked">');
+}
+
+function search_checkbox(dataset) {
+    return __build_checkbox__(
+	dataset,
+	'<input type="checkbox" class="checkbox checkbox-search" ' +
+	    'name="search_datasets">');
+}
+
+function table_cell(value) {
+    cell = $("<td>");
+    cell.html(value);
+    return cell;
+}
+
+/**
+ * Render the table
+ * @param {String} The selector for the table's ID
+ * @param {String} The name of the data-* attribute holding the table's data
+ * @param {Function} The function to call to generate the appropriate checkbox
+ */
+function render_table(table_id, data_attr_name, checkbox_function) {
+    $(table_id + " tbody tr").remove();
+    table_data = JSON.parse($(table_id).attr(data_attr_name));
+    if(table_data.length < 1) {
+	row = $("<tr>")
+	cell = $('<td colspan="100%" align="center">');
+	cell.append(
+	    $('<span class="glyphicon glyphicon-info-sign text-info">'));
+	cell.append("&nbsp;");
+	cell.append("No genotype datasets remaining.");
+	row.append(cell);
+	$(table_id + " tbody").append(row);
+    }
+    table_data.forEach(function(dataset) {
+	row = $("<tr>")
+	row.append(checkbox_function(dataset));
+	row.append(table_cell(dataset.InbredSetName));
+	row.append(table_cell(dataset.dataset_name));
+	row.append(table_cell(dataset.dataset_fullname));
+	row.append(table_cell(dataset.dataset_shortname));
+	$(table_id + " tbody").append(row);
+    });
+}
+
+function in_array(dataset, datasets) {
+    found = datasets.filter(function(dst) {
+	return (dst.SpeciesId == dataset.SpeciesId &&
+		dst.InbredSetId == dataset.InbredSetId &&
+		dst.GenoFreezeId == dataset.GenoFreezeId);
+    });
+    return found.length > 0;
+}
+
+function remove_from_table_data(dataset, table_data_source) {
+    let table_id = table_data_source.table_id.selector;
+    let data_attr_name = table_data_source.data_attribute_name;
+    without_dataset = JSON.parse($(table_id).attr(data_attr_name)).filter(
+	function(dst) {
+	    return !(dst.SpeciesId == dataset.SpeciesId &&
+		     dst.InbredSetId == dataset.InbredSetId &&
+		     dst.GenoFreezeId == dataset.GenoFreezeId);
+	});
+    $(table_id).attr(data_attr_name, JSON.stringify(without_dataset));
+}
+
+function add_to_table_data(dataset, table_data_source) {
+    let table_id = table_data_source.table_id.selector;
+    let data_attr_name = table_data_source.data_attribute_name;
+    table_data = JSON.parse($(table_id).attr(data_attr_name));
+    if(!in_array(dataset, table_data)) {
+	table_data.push(dataset);
+    }
+    $(table_id).attr(data_attr_name, JSON.stringify(Array.from(table_data)));
+}
+
+function toggle_link_button() {
+    num_groups = $("#frm-link-genotypes select option").length - 1;
+    num_selected = JSON.parse(
+	$("#tbl-link-genotypes").attr("data-selected-datasets")).length;
+    if(num_groups > 0 && num_selected > 0) {
+	$("#frm-link-genotypes input[type='submit']").prop("disabled", false);
+    } else {
+	$("#frm-link-genotypes input[type='submit']").prop("disabled", true);
+    }
+}
+
+class InvalidCSSIDSelector extends Error {
+    constructor(message) {
+	super(message);
+	this.name = "InvalidCSSIDSelector";
+    }
+}
+
+class InvalidDataAttributeName extends Error {
+    constructor(message) {
+	super(message);
+	this.name = "InvalidDataAttributeName";
+    }
+}
+
+/**
+ * CSSIDSelector: A CSS ID Selector
+ * @param {String} A CSS selector of the form '#...'
+ */
+class CSSIDSelector {
+    constructor(selector) {
+	if(!selector.startsWith("#")) {
+	    throw new InvalidCSSIDSelector(
+		"Expected the CSS selector to begin with a `#` character.");
+	}
+	let id_str = selector.slice(1, selector.length);
+	if(document.getElementById(id_str) == null) {
+	    throw new InvalidCSSIDSelector(
+		"Element with ID '" + id_str + "' does not exist.");
+	}
+	this.selector = selector;
+    }
+}
+
+/**
+ * TableDataSource: A type to represent a table's data source
+ * @param {String} A CSS selector for an ID
+ * @param {String} A `data-*` attribute name
+ */
+class TableDataSource {
+    constructor(table_id, data_attribute_name) {
+	this.table_id = new CSSIDSelector(table_id);
+	let data = document.querySelector(
+	    table_id).getAttribute(data_attribute_name);
+	if(data == null) {
+	    throw new InvalidDataAttributeName(
+		"data-* attribute '" + data_attribute_name + "' does not exist " +
+		    "for table with ID '" + table_id.slice(1, table_id.length) +
+		    "'.");
+	} else {
+	    this.data_attribute_name = data_attribute_name;
+	}
+    }
+}
+
+/**
+ * Switch the dataset from search table to selection table and vice versa
+ * @param {Object} A genotype dataset
+ * @param {TableDataSource} The table to switch the dataset from
+ * @param {TableDataSource} The table to switch the dataset to
+ */
+function select_deselect_dataset(dataset, source, destination) {
+    dest_selector = destination.table_id.selector
+    dest_data = JSON.parse(
+	$(dest_selector).attr(destination.data_attribute_name));
+    add_to_table_data(dataset, destination); // Add to destination table
+    remove_from_table_data(dataset, source); // Remove from source table
+    /***** BEGIN: Re-render tables *****/
+    // The `render_table` could be modified to use the checkbox creator function
+    // from the `TableDataSource` object, once that is modified to have that.
+    render_table(
+	"#tbl-link-genotypes", "data-selected-datasets", link_checkbox);
+    render_table("#tbl-genotypes", "data-datasets", search_checkbox);
+    toggle_link_button();
+    /***** END: Re-render tables *****/
+}
+
+$(document).ready(function() {
+    let search_table = new TableDataSource("#tbl-genotypes", "data-datasets");
+    let link_table = new TableDataSource(
+	"#tbl-link-genotypes", "data-selected-datasets");
+
+    $("#frm-search-traits").submit(function(event) {
+	event.preventDefault();
+	return false;
+    });
+
+    /* $("#txt-query").keyup(debounced_search()); */
+
+    $("#tbl-genotypes").on("change", ".checkbox-search", function(event) {
+        if(this.checked) {
+	    select_deselect_dataset(
+		JSON.parse(this.value), search_table, link_table);
+        }
+    });
+
+    $("#tbl-link-genotypes").on("change", ".checkbox-selected", function(event) {
+	if(!this.checked) {
+	    select_deselect_dataset(
+		JSON.parse(this.value), link_table, search_table);
+	}
+    });
+});
diff --git a/wqflask/wqflask/templates/oauth2/data-list-genotype.html b/wqflask/wqflask/templates/oauth2/data-list-genotype.html
index 3ef810ec..3b7cfc1f 100644
--- a/wqflask/wqflask/templates/oauth2/data-list-genotype.html
+++ b/wqflask/wqflask/templates/oauth2/data-list-genotype.html
@@ -54,7 +54,7 @@
 	  {%for dataset in selected_datasets%}
 	  <tr>
 	    <td>
-	      <input type="checkbox" class="checkbox checkbox-link"
+	      <input type="checkbox" class="checkbox checkbox-selected"
 		     name="selected_datasets"
 		     value='{{dataset | tojson}}' />
 	    </td>
@@ -151,102 +151,6 @@
 {%endblock%}
 
 {%block js%}
-<script language="javascript" type="text/javascript">
-  function link_checkbox(dataset) {
-      cell = $("<td>");
-      check = $('<input type="checkbox" class="checkbox checkbox-selected" ' +
-		'name="selected_datasets" checked="checked">');
-      check.val(JSON.stringify(dataset));
-      cell.append(check);
-      return cell;
-  }
-
-  function table_cell(value) {
-      cell = $("<td>");
-      cell.html(value);
-      return cell;
-  }
-
-  function render_table(table_id, data_attr_name) {
-      $(table_id + " tbody tr").remove();
-      table_data = JSON.parse($(table_id).attr(data_attr_name));
-      if(table_data.length < 1) {
-	  row = $("<tr>")
-	  cell = $('<td colspan="100%" align="center">');
-	  cell.append(
-	      $('<span class="glyphicon glyphicon-info-sign text-info">'));
-	  cell.append("&nbsp;");
-	  cell.append("No genotype datasets remaining.");
-	  row.append(cell);
-	  $(table_id + " tbody").append(row);
-      }
-      table_data.forEach(function(dataset) {
-	  row = $("<tr>")
-	  row.append(link_checkbox(dataset));
-	  row.append(table_cell(dataset.InbredSetName));
-	  row.append(table_cell(dataset.dataset_name));
-	  row.append(table_cell(dataset.dataset_fullname));
-	  row.append(table_cell(dataset.dataset_shortname));
-	  $(table_id + " tbody").append(row);
-      });
-  }
-
-  function in_array(dataset, datasets) {
-      found = datasets.filter(function(dst) {
-	  return (dst.SpeciesId == dataset.SpeciesId &&
-		  dst.InbredSetId == dataset.InbredSetId &&
-		  dst.GenoFreezeId == dataset.GenoFreezeId);
-      });
-      return found.length > 0;
-  }
-
-  function remove_from_table_data(dataset, table_id, data_attr_name) {
-      without_dataset = JSON.parse($(table_id).attr(data_attr_name)).filter(
-	  function(dst) {
-	      return !(dst.SpeciesId == dataset.SpeciesId &&
-		       dst.InbredSetId == dataset.InbredSetId &&
-		       dst.GenoFreezeId == dataset.GenoFreezeId);
-	  });
-      $(table_id).attr(data_attr_name, JSON.stringify(without_dataset));
-  }
-
-  function toggle_link_button() {
-      num_groups = $("#frm-link-genotypes select option").length - 1;
-      num_selected = JSON.parse(
-	  $("#tbl-link-genotypes").attr("data-selected-datasets")).length;
-      if(num_groups > 0 && num_selected > 0) {
-	  $("#frm-link-genotypes input[type='submit']").prop("disabled", false);
-      } else {
-	  $("#frm-link-genotypes input[type='submit']").prop("disabled", true);
-      }
-  }
-
-  $(document).ready(function() {
-      $("#frm-search-traits").submit(function(event) {
-	  event.preventDefault();
-	  return false;
-      });
-      /* $("#txt-query").keyup(debounced_search()); */
-      $(".checkbox-search").change(function(event) {
-          if(this.checked) {
-              selected = JSON.parse(
-		  $("#tbl-link-genotypes").attr("data-selected-datasets"));
-	      this_item = JSON.parse(this.value);
-	      if(!in_array(this_item, selected)) {
-		  selected.push(this_item);
-	      }
-	      $("#tbl-link-genotypes").attr(
-		  "data-selected-datasets",
-		  JSON.stringify(Array.from(selected)));
-	      /* Remove from source table */
-	      remove_from_table_data(
-		  this_item, "#tbl-genotypes", "data-datasets");
-	      /* Re-render tables */
-	      render_table("#tbl-link-genotypes", "data-selected-datasets");
-	      render_table("#tbl-genotypes", "data-datasets");
-	      toggle_link_button();
-          }
-      });
-  });
-</script>
+<script src="/static/new/javascript/auth/search_genotypes.js"
+	language="javascript" type="text/javascript"></script>
 {%endblock%}