Provide UI for viewing species details.

2 files changed, 111 insertions, 1 deletions

diff --git a/uploader/species/views.py b/uploader/species/views.py
index f2d7545..6009f03 100644
--- a/uploader/species/views.py
+++ b/uploader/species/views.py
@@ -38,7 +38,14 @@ def list_species():
 def view_species(species_id: int):
     """View details of a particular species and menus to act upon it."""
     with database_connection(app.config["SQL_URI"]) as conn:
-        return species_by_id(conn, species_id)
+        species = species_by_id(conn, species_id)
+        if bool(species):
+            return render_template("species/view-species.html",
+                                   species=species,
+                                   activelink="view-species")
+        flash("Could not find a species with the given identifier.",
+              "alert-danger")
+        return redirect(url_for("species.view_species"))
 
 @speciesbp.route("/create", methods=["GET", "POST"])
 @require_login
diff --git a/uploader/templates/species/view-species.html b/uploader/templates/species/view-species.html
new file mode 100644
index 0000000..a0eb54b
--- /dev/null
+++ b/uploader/templates/species/view-species.html
@@ -0,0 +1,103 @@
+{%extends "species/base.html"%}
+{%from "flash_messages.html" import flash_all_messages%}
+
+{%block title%}View Species{%endblock%}
+
+{%block pagetitle%}View Species{%endblock%}
+
+{%block css%}
+<style type="text/css">
+  dd {
+      margin-left: 3em;
+      font-size: 0.88em;
+  }
+  .card {
+      margin-top: 0.3em;
+      border-width: 1px;
+      border-style: solid;
+      border-radius: 0.3em;
+      border-color: #AAAAAA;
+      padding: 0.5em;
+  }
+</style>
+{%endblock%}
+
+{%block lvl3_breadcrumbs%}
+<li {%if activelink=="view-species"%}
+    class="breadcrumb-item active"
+    {%else%}
+    class="breadcrumb-item"
+    {%endif%}>
+  <a href="{{url_for('species.view_species', species_id=species.SpeciesId)}}">View</a>
+</li>
+{%endblock%}
+
+{%block contents%}
+<div class="row">
+  <h2>Details on species {{species.FullName}}</h2>
+
+  <dl>
+    <dt>Common Name</dt>
+    <dd>{{species.SpeciesName}}</dd>
+
+    <dt>Scientific Name</dt>
+    <dd>{{species.FullName}}</dd>
+
+    <dt>Taxonomy ID</dt>
+    <dd>{{species.TaxonomyId}}</dd>
+  </dl>
+
+  <h3>Actions</h3>
+
+  <p>
+    You can proceed to perform any of the following actions for species
+    {{species.FullName}}
+  </p>
+
+  <ol>
+    <li>
+      <a href="#"
+         title="Upload genotypes for {{species.FullName}}">Upload Genotypes</a>
+    </li>
+    <li>
+      <a href="#"
+         title="Create/Edit populations for {{species.FullName}}">
+        Manage populations</a>
+    </li>
+    <li><a href="#" title="">any other action, perhaps &hellip;</a></li>
+  </ol>
+
+  
+</div>
+{%endblock%}
+
+{%block sidebarcontents%}
+<div class="card">
+  <div class="card-body">
+    <h5 class="card-title">Species Extras</h5>
+    <div class="card-text">
+      <p>Some extra internal-use details (mostly for UI concerns on GeneNetwork)</p>
+      <p>
+        <small>
+          If you do not understand what the following are about, simply ignore them
+          &mdash;
+          They have no bearing whatsoever on your data, or its analysis.
+        </small>
+      </p>
+      <dl>
+        <dt>Family</dt>
+        <dd>{{species.Family}}</dd>
+
+        <dt>FamilyOrderId</dt>
+        <dd>{{species.FamilyOrderId}}</dd>
+
+        <dt>OrderId</dt>
+        <dd>{{species.OrderId}}</dd>
+      </dl>
+    </div>
+    <a href="#"
+       class="card-link"
+       title="Edit the species' internal-use details.">Edit</a>
+  </div>
+</div>
+{%endblock%}