Replace sections with UI tabs.

1 files changed, 99 insertions, 65 deletions

diff --git a/uploader/templates/species/sui-view-species.html b/uploader/templates/species/sui-view-species.html
index c7ac956..aa26318 100644
--- a/uploader/templates/species/sui-view-species.html
+++ b/uploader/templates/species/sui-view-species.html
@@ -9,76 +9,110 @@
 
 {%block contents%}
 <div class="row">
-  <h2>{{step_indicator("2(a)")}} Select the Population</h2>
-
-  <p>Data belonging to a particular species is further divided into one or more
-    populations for easier handling. Please select the population you want to work
-    with.</p>
-
-  <form method="GET"
-        action="{{url_for('species.view_species', species_id=species.SpeciesId)}}"
-        class="form-horizontal">
-    <input type="hidden" name="streamlined_ui" value="{{streamlined_ui}}" />
-    {%if populations | length != 0%}
-
-    <p class="form-text">Search for, and select the population from the table
-      below.</p>
-
-    <div style="margin-top:3em;">
-      <table id="tbl-select-population" class="table compact stripe"
-             data-populations-list='{{populations | tojson}}'>
-        <thead>
-          <tr>
-            <th></th>
-            <th>Population</th>
-          </tr>
-        </thead>
-
-        <tbody></tbody>
-      </table>
-    </div>
-
-    {%else%}
-    <p class="form-text">
-      There are no populations currently defined for {{species['FullName']}}
-      ({{species['SpeciesName']}}).</p>
-    {%endif%}
-
-    <div class="row form-buttons">
-      <div class="col">
-        <input type="submit"
-               value="use selected population"
-               class="btn btn-primary" />
-      </div>
-
-      <div class="col"><strong>OR</strong></div>
-
-      <div class="col">
-        <a href="url_for('species.population.create_population',
-                 species_id=species.SpeciesId,
-                 return_to='species.view_species',
-                 streamlined_ui=streamlined_ui)"
-           title="Create a new population for species '{{species.Name}}'."
-           class="btn btn-outline-info">
-          Create a new population
-        </a>
-      </div>
-    </div>
+  <h2>{{step_indicator("2")}} Select Species Action</h2>
 
-  </form>
+  <p>You can manage species' populations and sequencing platforms here. Select
+    the tab for the feature you wish to continue working on.</p>
 </div>
 
-<div class="row">&nbsp;</div>
+<div class "row">
+  <ul class="nav nav-tabs" id="species-actions">
+    <li class="nav-item presentation">
+      <button class="nav-link active"
+              id="populations-tab"
+              data-bs-toggle="tab"
+              data-bs-target="#populations-content"
+              type="button"
+              role="tab"
+              aria-controls="populations-content"
+              aria-selected="true">Populations</button>
+    </li>
+    <li class="nav-item presentation">
+      <button class="nav-link"
+              id="sequencing-platforms-tab"
+              data-bs-toggle="tab"
+              data-bs-target="#sequencing-platforms-content"
+              type="button"
+              role="tab"
+              aria-controls="sequencing-platforms-content"
+              aria-selected="true">Sequencing Platforms</button>
+    </li>
+  </ul>
+</div>
 
 <div class="row">
-  <h2>{{step_indicator("2(b)")}} Manage sequencing platforms</h2>
-  <p>Upload and manage the sequencing platforms for species
-    '{{species.Name | title}} ({{species.FullName}})'
-    <a href="{{url_for('species.platforms.list_platforms',
-             species_id=species.SpeciesId,
-             streamlined_ui=streamlined_ui)}}"
-       title="Manage sequencing platforms for {{species.Name}}">here</a>.
-  </p>
+  <div class="tab-content" id="species-tabs-content">
+    <div class="tab-pane fade show active"
+         id="populations-content"
+         role="tabpanel"
+         aria-labelledby="populations-content-tab">
+      <p>Data belonging to a particular species is further divided into one or more
+        populations for easier handling. Please select the population you want to work
+        with.</p>
+
+      <form method="GET"
+            action="{{url_for('species.view_species', species_id=species.SpeciesId)}}"
+            class="form-horizontal">
+        {{add_http_feature_flags()}}
+        {%if populations | length != 0%}
+
+        <p class="form-text">Search for, and select the population from the table
+          below.</p>
+
+        <div style="margin-top:3em;">
+          <table id="tbl-select-population" class="table compact stripe"
+                 data-populations-list='{{populations | tojson}}'>
+            <thead>
+              <tr>
+                <th></th>
+                <th>Population</th>
+              </tr>
+            </thead>
+
+            <tbody></tbody>
+          </table>
+        </div>
+
+        {%else%}
+        <p class="form-text">
+          There are no populations currently defined for {{species['FullName']}}
+          ({{species['SpeciesName']}}).</p>
+        {%endif%}
+
+        <div class="row form-buttons">
+          <div class="col">
+            <input type="submit"
+                   value="use selected population"
+                   class="btn btn-primary" />
+          </div>
+
+          <div class="col"><strong>OR</strong></div>
+
+          <div class="col">
+            <a href="url_for('species.population.create_population',
+                     species_id=species.SpeciesId,
+                     return_to='species.view_species')"
+               title="Create a new population for species '{{species.Name}}'."
+               class="btn btn-outline-info">
+              Create a new population
+            </a>
+          </div>
+        </div>
+
+      </form>
+    </div>
+    <div class="tab-pane fade"
+         id="sequencing-platforms-content"
+         role="tabpanel"
+         aria-labelledby="sequencing-platforms-content-tab">
+      <p>Upload and manage the sequencing platforms for species
+        '{{species.Name | title}} ({{species.FullName}})'
+        <a href="{{url_for('species.platforms.list_platforms',
+                 species_id=species.SpeciesId)}}"
+           title="Manage sequencing platforms for {{species.Name}}">here</a>.
+      </p>
+    </div>
+  </div>
 </div>
 {%endblock%}