From e49b4367f1dab1c3acb3cd5d71ba09359c5ab4ee Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Thu, 29 Aug 2024 15:21:27 -0500
Subject: Initialise package for dealing with Species.

---
 uploader/templates/species/create-species.html | 116 +++++++++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 uploader/templates/species/create-species.html

(limited to 'uploader/templates/species/create-species.html')

diff --git a/uploader/templates/species/create-species.html b/uploader/templates/species/create-species.html
new file mode 100644
index 0000000..b96e2d3
--- /dev/null
+++ b/uploader/templates/species/create-species.html
@@ -0,0 +1,116 @@
+{%extends "species/base.html"%}
+{%from "flash_messages.html" import flash_all_messages%}
+
+{%block title%}Create Species{%endblock%}
+
+{%block pagetitle%}Create Species{%endblock%}
+
+{%block breadcrumbs%}
+<li {%if activelink=="create-species"%}
+    class="breadcrumb-item active"
+    {%else%}
+    class="breadcrumb-item"
+    {%endif%}>
+  <a href="{{url_for('species.create_species')}}">Species</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">
+      <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%}
-- 
cgit v1.2.3