diff options
| -rw-r--r-- | uploader/phenotypes/views.py | 2 | ||||
| -rw-r--r-- | uploader/static/css/styles.css | 4 | ||||
| -rw-r--r-- | uploader/templates/phenotypes/index.html | 28 | ||||
| -rw-r--r-- | uploader/templates/species/macro-select-species.html | 54 |
4 files changed, 47 insertions, 41 deletions
diff --git a/uploader/phenotypes/views.py b/uploader/phenotypes/views.py index ddec54c..e0ce521 100644 --- a/uploader/phenotypes/views.py +++ b/uploader/phenotypes/views.py @@ -62,7 +62,7 @@ def index(): with database_connection(app.config["SQL_URI"]) as conn: if not bool(request.args.get("species_id")): return render_template("phenotypes/index.html", - species=order_by_family(all_species(conn)), + species=all_species(conn), activelink="phenotypes") species = species_by_id(conn, request.args.get("species_id")) diff --git a/uploader/static/css/styles.css b/uploader/static/css/styles.css index 6f26621..bf7305e 100644 --- a/uploader/static/css/styles.css +++ b/uploader/static/css/styles.css @@ -144,3 +144,7 @@ body { border-bottom: solid #88BBEE; text-transform: capitalize; } + +input[type="search"] { + border-radius: 5px; +} 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%} diff --git a/uploader/templates/species/macro-select-species.html b/uploader/templates/species/macro-select-species.html index 36ed102..21a5631 100644 --- a/uploader/templates/species/macro-select-species.html +++ b/uploader/templates/species/macro-select-species.html @@ -1,38 +1,32 @@ {%macro select_species_form(form_action, species)%} -{%if species | length > 0%} <form method="GET" action="{{form_action}}" class="form-horizontal"> + <label class="control-label">What species do you want to work with?</label> + {%if species | length != 0%} + <table id="tbl-select-species" class="table compact stripe" + data-species-list='{{species | tojson}}'> + <div class=""> + <thead> + <tr> + <th></th> + <th>Species Name</th> + </tr> + </thead> + + <tbody></tbody> + </table> + {%endif%} + <div class="form-group"> - <label for="select-species" class="control-label col-sm-2">Species</label> - <div class="col-sm-10"> - <select id="select-species" - name="species_id" - class="form-control" - required="required"> - <option value="">Select Species</option> - {%for group in species%} - {{group}} - <optgroup {%if group[0][1] is not none%} - label="{{group[0][1].capitalize()}}" - {%else%} - label="Undefined" - {%endif%}> - {%for aspecies in group[1]%} - <option value="{{aspecies.SpeciesId}}">{{aspecies.MenuName}}</option> - {%endfor%} - </optgroup> - {%endfor%} - </select> - </div> + <label class="control-label" for="rdo-cant-find-species"> + <input id="rdo-cant-find-species" type="radio" name="species_id" value="CREATE-SPECIES" /> + I cannot find the species I want — create it!</label> </div> - <div class="col-sm-offset-2 col-sm-10"> - <input type="submit" value="Select" class="btn btn-primary" /> + <div class="form-group"> + <input type="submit" + class="btn btn-primary col-sm-offset-1" + value="continue" /> </div> + </form> -{%else%} -<p class="text-danger"> - <span class="glyphicon glyphicon-exclamation-mark"></span> - We could not find species to select from! -</p> -{%endif%} {%endmacro%} |