aboutsummaryrefslogtreecommitdiff
path: root/uploader/templates/species/create-species.html
blob: 0d0bedf550d37d863f8813ae53d9376515641d96 (plain)
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
{%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')}}">
    <legend>Create Species</legend>

    {{flash_all_messages()}}

    <div class="form-group">
      <label for="txt-taxonomy-id" class="form-label">
        Taxonomy ID</label>
      <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">Provide the taxonomy ID for
        your species that can be used to link to external sites like NCBI. Enter
        the taxonomy ID and click "Search" to auto-fill the form with data.
        <br />
        While it is recommended to provide a value for this field, doing so is
        optional.
      </small>
    </div>

    <div class="form-group">
      <label for="txt-species-name" class="form-label">Common Name</label>
      <input id="txt-species-name"
             name="common_name"
             type="text"
             class="form-control"
             required="required" />
      <small class="form-text text-muted">Provide the common, possibly
        non-scientific name for the species here, e.g. Human, Mouse, etc.</small>
    </div>

    <div class="form-group">
      <label for="txt-species-scientific" class="form-label">
        Scientific Name</label>
      <input id="txt-species-scientific"
             name="scientific_name"
             type="text"
             class="form-control"
             required="required" />
      <small class="form-text text-muted">Provide the scientific name for the
        species you are creating, e.g. Homo sapiens, Mus musculus, etc.</small>
    </div>

    <div class="form-group">
      <label for="select-species-family" class="form-label">Family</label>
      <select id="select-species-family"
              name="species_family"
              required="required"
              class="form-control">
        <option value="">Please select a grouping</option>
        {%for family in families%}
        <option value="{{family}}">{{family}}</option>
        {%endfor%}
      </select>
      <small class="form-text text-muted">
        This is a generic grouping for the species that determines under which
        grouping the species appears in the GeneNetwork menus</small>
    </div>

    <div class="form-group">
      <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%}