From f726c71bf1636a838f45363d1613763a2926e34f Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Wed, 12 Jun 2024 16:38:54 -0500
Subject: Update html templates to use bootstrap for styling

---
 qc_app/templates/select_dataset.html | 102 +++++++++++++++++------------------
 1 file changed, 48 insertions(+), 54 deletions(-)

(limited to 'qc_app/templates/select_dataset.html')

diff --git a/qc_app/templates/select_dataset.html b/qc_app/templates/select_dataset.html
index 3c9bd6b..2f07de8 100644
--- a/qc_app/templates/select_dataset.html
+++ b/qc_app/templates/select_dataset.html
@@ -10,17 +10,17 @@
 {%block contents%}
 <h2 class="heading">{{filename}}: select dataset</h2>
 
-<div class="two-column-with-separator">
+<div class="row">
   <form method="POST" action="{{url_for('dbinsert.final_confirmation')}}"
 	id="select-dataset-form" class="two-col-sep-col1">
-    <legend>choose existing dataset</legend>
+    <legend class="heading">choose existing dataset</legend>
     {{hidden_fields(
     filename, filetype, species=species, genechipid=genechipid,
     studyid=studyid, totallines=totallines)}}
 
-    <fieldset>
-      <label for="datasetid" class="form-col-1">dataset:</label>
-      <select id="datasetid" name="datasetid" class="form-col-2"
+    <div class="form-group">
+      <label for="datasetid" class="form-label">dataset:</label>
+      <select id="datasetid" name="datasetid" class="form-control"
 	      {%if datasets | length == 0:%}
 	      disabled="disabled"
 	      {%endif%}>
@@ -30,23 +30,24 @@
 	</option>
 	{%endfor%}
       </select>
-    </fieldset>
+    </div>
 
-    <fieldset>
-      <input type="submit" class="btn btn-primary form-col-2"
-	     value="update database"
-	     {%if datasets | length == 0:%}
-	     disabled="disabled"
-	     {%endif%} />
-    </fieldset>
-  </form>
+    <button type="submit" class="btn btn-primary"
+	    {%if datasets | length == 0:%}
+	    disabled="disabled"
+	    {%endif%} />update database</button>
+</form>
+</div>
 
+<div class="row">
   <p class="two-col-sep-separator">OR</p>
+</div>
 
+<div class="row">
   <form method="POST" id="create-dataset-form"
 	action="{{url_for('dbinsert.create_dataset')}}"
 	class="two-col-sep-col2">
-    <legend>create new dataset</legend>
+    <legend class="heading">create new dataset</legend>
     {{hidden_fields(
     filename, filetype, species=species, genechipid=genechipid,
     studyid=studyid, totallines=totallines)}}
@@ -61,9 +62,9 @@
     {%endif%}
     {%endwith%}
 
-    <fieldset>
-      <label for="avgid" class="form-col-1">average:</label>
-      <select id="avgid" name="avgid" required="required" class="form-col-2">
+    <div class="form-group">
+      <label for="avgid" class="form-label">average:</label>
+      <select id="avgid" name="avgid" required="required" class="form-control">
 	<option value="">Select averaging method</option>
 	{%for method in avgmethods:%}
 	<option value="{{method['AvgMethodId']}}"
@@ -74,46 +75,46 @@
 	</option>
 	{%endfor%}
       </select>
-    </fieldset>
+    </div>
 
-    <fieldset>
-      <label for="datasetname" class="form-col-1">name:</label>
+    <div class="form-group">
+      <label for="datasetname" class="form-label">name:</label>
       <input id="datasetname" name="datasetname" type="text"
-	     class="form-col-2"
+	     class="form-control"
 	     {%if datasetname is defined %}
 	     value="{{datasetname}}"
 	     {%endif%} />
-    </fieldset>
+    </div>
 
-    <fieldset>
-      <label for="datasetname2" class="form-col-1">name 2:</label>
+    <div class="form-group">
+      <label for="datasetname2" class="form-label">name 2:</label>
       <input id="datasetname2" name="datasetname2" type="text"
-	     required="required" class="form-col-2"
+	     required="required" class="form-control"
 	     {%if datasetname2 is defined %}
 	     value="{{datasetname2}}"
 	     {%endif%} />
-    </fieldset>
+    </div>
 
-    <fieldset>
-      <label for="datasetfullname" class="form-col-1">full name:</label>
+    <div class="form-group">
+      <label for="datasetfullname" class="form-label">full name:</label>
       <input id="datasetfullname" name="datasetfullname" type="text"
-	     required="required" class="form-col-2"
+	     required="required" class="form-control"
 	     {%if datasetfullname is defined %}
 	     value="{{datasetfullname}}"
 	     {%endif%} />
-    </fieldset>
+    </div>
 
-    <fieldset>
-      <label for="datasetshortname" class="form-col-1">short name:</label>
+    <div class="form-group">
+      <label for="datasetshortname" class="form-label">short name:</label>
       <input id="datasetshortname" name="datasetshortname" type="text"
-	     required="required" class="form-col-2"
+	     required="required" class="form-control"
 	     {%if datasetshortname is defined %}
 	     value="{{datasetshortname}}"
 	     {%endif%} />
-    </fieldset>
+    </div>
 
-    <fieldset>
-      <label for="datasetpublic" class="form-col-1">public:</label>
+    <div class="form-group">
+      <label for="datasetpublic" class="form-label">public:</label>
       <input id="datasetpublic" name="datasetpublic" type="number"
 	     required="required" min="0" max="2"
 	     {%if datasetpublic is defined %}
@@ -121,10 +122,10 @@
 	     {%else%}
 	     value="0"
 	     {%endif%}
-	     class="form-col-2" />
-    </fieldset>
+	     class="form-control" />
+    </div>
 
-    <fieldset>
+    <div class="form-group">
       <label for="datasetconfidentiality">confidentiality:</label>
       <input id="datasetconfidentiality" name="datasetconfidentiality"
 	     type="number" required="required" min="0" max="2"
@@ -133,12 +134,12 @@
 	     {%else%}
 	     value="0"
 	     {%endif%}
-	     class="form-col-2" />
-    </fieldset>
+	     class="form-control" />
+    </div>
 
-    <fieldset>
-      <label for="datasetdatascale" class="form-col-1">data scale:</label>
-      <select id="datasetdatascale" name="datasetdatascale" class="form-col-2">
+    <div class="form-group">
+      <label for="datasetdatascale" class="form-label">data scale:</label>
+      <select id="datasetdatascale" name="datasetdatascale" class="form-control">
 	<option value="">None</option>
 	{%for dscale in datascales:%}
 	<option value="{{dscale}}"
@@ -151,17 +152,10 @@
 	</option>
 	{%endfor%}
       </select>
-    </fieldset>
+    </div>
 
-    <fieldset>
-      <input type="submit" value="create new dataset"
-	     class="btn btn-primary form-col-2" />
-    </fieldset>
+    <button type="submit" class="btn btn-primary">create new dataset</button>
   </form>
-
 </div>
 
 {%endblock%}
-
-{%block javascript%}
-{%endblock%}
-- 
cgit v1.2.3