1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
{%extends "species/base.html"%}
{%from "flash_messages.html" import flash_all_messages%}
{%block title%}Create Species{%endblock%}
{%block pagetitle%}Create Species{%endblock%}
{%block lvl2_breadcrumbs%}
<li {%if activelink=="create-species"%}
class="breadcrumb-item active"
{%else%}
class="breadcrumb-item"
{%endif%}>
<a href="{{url_for('species.create_species')}}">Create</a>
</li>
{%endblock%}
{%block contents%}
<div class="row">
<form id="frm-create-species"
method="POST"
action="{{url_for('species.create_species', return_to=return_to)}}"
class="form-horizontal">
<legend>Create Species</legend>
{{flash_all_messages()}}
<input type="hidden" name="return_to" value="{{return_to}}">
<div class="form-group">
<label for="txt-taxonomy-id" class="control-label col-sm-2">
Taxonomy ID</label>
<div class="col-sm-10">
<div class="input-group">
<input id="txt-taxonomy-id"
name="species_taxonomy_id"
type="text"
class="form-control" />
<span class="input-group-btn">
<button id="btn-search-taxonid" class="btn btn-info">Search</button>
</span>
</div>
<small class="form-text text-small text-muted">
Use
<a href="https://www.ncbi.nlm.nih.gov/Taxonomy/taxonomyhome.html/"
title="NCBI's Taxonomy Browser homepage"
target="_blank">
NCBI's Taxonomy Browser homepage</a> to search for the species you
want. If the species exists on NCBI, they will have a Taxonomy ID. Copy
that Taxonomy ID to this field, and click "Search" to auto-fill the
details.<br />
This field is optional.</small>
</div>
</div>
<div class="form-group">
<label for="txt-species-name" class="control-label col-sm-2">Common Name</label>
<div class="col-sm-10">
<input id="txt-species-name"
name="common_name"
type="text"
class="form-control"
required="required" />
<small class="form-text text-muted">This is the day-to-day term used by
laymen, e.g. Mouse (instead of Mus musculus), round worm (instead of
Ascaris lumbricoides), etc.<br />
For species without this, just enter the scientific name.
</small>
</div>
</div>
<div class="form-group">
<label for="txt-species-scientific" class="control-label col-sm-2">
Scientific Name</label>
<div class="col-sm-10">
<input id="txt-species-scientific"
name="scientific_name"
type="text"
class="form-control"
required="required" />
<small class="form-text text-muted">This is the scientific name for the
species e.g. Homo sapiens, Mus musculus, etc.</small>
</div>
</div>
<div class="form-group">
<label for="select-species-family" class="control-label col-sm-2">Family</label>
<div class="col-sm-10">
<select id="select-species-family"
name="species_family"
required="required"
class="form-control">
<option value="ungrouped">I do not know what to pick</option>
{%for family in families%}
<option value="{{family}}">{{family}}</option>
{%endfor%}
</select>
<small class="form-text text-muted">
This is a rough grouping of the species.</small>
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<input type="submit"
value="create new species"
class="btn btn-primary" />
</div>
</form>
</div>
{%endblock%}
{%block javascript%}
<script>
var lastTaxonId = null;
var fetch_taxonomy = (taxonId) => {
var uri = (
"https://rest.uniprot.org/taxonomy/" + encodeURIComponent(taxonId));
$.get(
uri,
{},
(data, textStatus, jqXHR) => {
if(textStatus == "success") {
lastTaxonId = taxonId;
$("#txt-species-scientific").val(data.scientificName);
$("#txt-species-name").val(data.commonName);
return false;
}
msg = (
"Request to '${uri}' failed with message '${textStatus}'. "
+ "Please try again later, or fill the details manually.");
alert(msg);
console.error(msg, data, textStatus);
return false;
},
"json");
};
$("#btn-search-taxonid").on("click", (event) => {
event.preventDefault();
taxonId = $("#txt-taxonomy-id").val();
if((taxonId !== "") && (taxonId !== lastTaxonId)) {
fetch_taxonomy(taxonId);
}
});
</script>
{%endblock%}
|
