Select from searchable list and allow new species creation.

Select the species to use from a searchable list. In case the species
does not exist in the list, allow creation of the list.

1 files changed, 18 insertions, 10 deletions

diff --git a/uploader/templates/phenotypes/index.html b/uploader/templates/phenotypes/index.html
index 0c691e6..93159be 100644
--- a/uploader/templates/phenotypes/index.html
+++ b/uploader/templates/phenotypes/index.html
@@ -6,21 +6,29 @@
 
 {%block pagetitle%}Phenotypes{%endblock%}
 
+{%block css%}
+<link rel="stylesheet"
+      href="{{url_for('base.datatables', filename='css/jquery.dataTables.css')}}" />
+{%endblock%}
+
 
 {%block contents%}
 {{flash_all_messages()}}
 
 <div class="row">
-  <p>This section deals with phenotypes that
-    <span class="text-warning">
-      <span class="glyphicon glyphicon-exclamation-sign"></span>
-      … what are the characteristics of these phenotypes? …</span></p>
-  <p>Select the species to begin the process of viewing/uploading data about
-    your phenotypes</p>
+  {{select_species_form(url_for("species.populations.phenotypes.index"), species)}}
 </div>
+{%endblock%}
 
-<div class="row">
-  {{select_species_form(url_for("species.populations.phenotypes.index"),
-  species)}}
-</div>
+
+{%block javascript%}
+<script type="text/javascript"
+        src="{{url_for('base.datatables',
+             filename='js/jquery.dataTables.js')}}"></script>
+<script type="text/javascript" src="/static/js/species.js"></script>
+<script type="text/javascript">
+  $(function() {
+      speciesDataTable(JSON.parse($("#tbl-select-species").attr("data-species-list")));
+  });
+  </script>
 {%endblock%}