From 8760d188faebe552028f3142a821d0851df4e1e9 Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Thu, 7 Dec 2023 12:40:37 +0300
Subject: Samples: Provide preview feature.

---
 qc_app/templates/samples/upload-samples.html | 56 +++++++++++++++++++++++-----
 1 file changed, 46 insertions(+), 10 deletions(-)

(limited to 'qc_app/templates/samples')

diff --git a/qc_app/templates/samples/upload-samples.html b/qc_app/templates/samples/upload-samples.html
index b19e38c..23dc8a8 100644
--- a/qc_app/templates/samples/upload-samples.html
+++ b/qc_app/templates/samples/upload-samples.html
@@ -46,13 +46,21 @@
   <fieldset>
     <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
     <label class="form-col-1">species:</label>
-    <label class="form-col-2">{{species.SpeciesName}} [{{species.MenuName}}]</label>
+    <span class="form-col-2">{{species.SpeciesName}} [{{species.MenuName}}]</span>
   </fieldset>
 
   <fieldset>
     <input type="hidden" name="inbredset_id" value="{{population.InbredSetId}}" />
     <label class="form-col-1">grouping/population:</label>
-    <label class="form-col-2">{{population.Name}} [{{population.FullName}}]</label>
+    <span class="form-col-2">{{population.Name}} [{{population.FullName}}]</span>
+  </fieldset>
+
+  <fieldset>
+    <input id="chk:heading"
+	   type="checkbox"
+	   name="first_line_heading"
+	   class="form-col-1" />
+    <label for="chk:heading" class="form-col-2">first line is a heading?</label>
   </fieldset>
 
   <fieldset>
@@ -68,27 +76,34 @@
       <option value=";">Semicolon</option>
       <option value="other">Other</option>
     </select>
-    <input type="text" name="other_separator" class="form-col-2" />
-    <label class="form-col-2">
+    <input id="txt:separator"
+	   type="text"
+	   name="other_separator"
+	   class="form-col-2" />
+    <span class="form-col-2">
       This is the character that separates the fields in your CSV file. If you
       select "<strong>Other</strong>", then you must provide the separator in
       the text field provided.
-    </label>
+    </span>
   </fieldset>
 
   <fieldset>
     <label for="txt:delimiter" class="form-col-1">field delimiter</label>
-    <input type="text" name="field_delimiter" class="form-col-2" />
-    <label class="form-col-2">
+    <input id="txt:delimiter"
+	   type="text"
+	   name="field_delimiter"
+	   maxlength="1"
+	   class="form-col-2" />
+    <span class="form-col-2">
       If there is a character delimiting the string texts within particular
       fields in your CSV, provide the character here. This can be left blank if
       no such delimiters exist in your file.
-    </label>
+    </span>
   </fieldset>
 
   <fieldset>
-    <label for="file_upload" class="form-col-1">select file</label>
-    <input type="file" name="samples_file" id="file_upload"
+    <label for="file:samples" class="form-col-1">select file</label>
+    <input type="file" name="samples_file" id="file:samples"
 	   accept="text/csv, text/tab-separated-values"
 	   class="form-col-2" />
   </fieldset>
@@ -100,8 +115,29 @@
   </fieldset>
 </form>
 
+<table id="tbl:samples-preview">
+  <caption class="heading">preview content</caption>
+
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Name2</th>
+      <th>Symbol</th>
+      <th>Alias</th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr id="default-row">
+      <td colspan="4">
+	Please make some selections to preview the data.</td>
+    </tr>
+  </tbody>
+</table>
+
 {%endblock%}
 
 
 {%block javascript%}
+<script src="/static/js/upload_samples.js" type="text/javascript"></script>
 {%endblock%}
-- 
cgit v1.2.3