From 376e2538e2c37ed357822de37875676329bcadac Mon Sep 17 00:00:00 2001
From: Abdul Rashid <ar1242112@gmail.com>
Date: Wed, 25 Mar 2020 22:22:39 +0530
Subject: [PATCH] Show Upload Options on Table when no slides (#249)

* fixed missing id in app/signup/signup.html

* added missing id attribute to in put field in apps/signup/signup.html

* fixed missing id attribute of email input field  in apps/signup/signup.html

* fixed issue where upload and reload pages would not show if there was no data

* fix upload issues

* Moved buttons above the table

Co-authored-by: Ryan Birmingham <birm@rbirm.us>
---
 apps/landing/landing.html |   2 +-
 apps/signup/signup.html   |   4 +-
 apps/table.html           | 155 +++++++++++++++++++-------------------
 3 files changed, 81 insertions(+), 80 deletions(-)

diff --git a/apps/landing/landing.html b/apps/landing/landing.html
index 621859a8f..08d4805e7 100644
--- a/apps/landing/landing.html
+++ b/apps/landing/landing.html
@@ -120,4 +120,4 @@ <h3>Source Code</h3>
 
 
 
-</html>
+</html>
\ No newline at end of file
diff --git a/apps/signup/signup.html b/apps/signup/signup.html
index ed3c71625..3c3094f37 100644
--- a/apps/signup/signup.html
+++ b/apps/signup/signup.html
@@ -55,7 +55,7 @@
       <H1>User Signup</H1>
 
       <div class="txtb">
-        <input type="text" onblur="validateEmail(this);" placeholder="Email" >
+        <input id="name" type="text" onblur="validateEmail(this);" placeholder="Email" >
       </div>
       <div class="txtb">
         <input id="collections" type="text" placeholder="['list','of','collections']">
@@ -113,4 +113,4 @@ <H1>User Signup</H1>
       }
     </script>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/apps/table.html b/apps/table.html
index 15f1e8144..7a0dbdad6 100644
--- a/apps/table.html
+++ b/apps/table.html
@@ -85,6 +85,81 @@ <h1 class="h1">caMicroscope</h1>
 	</div>
 
 	<div class='p-2 bg-light' style="flex-grow: 1;">
+		<button type="button" class="btn btn-success float-right mb-2"
+			onclick="(()=>{location.reload();return false;})()">Reload</button>
+		<button type="button" class="btn btn-primary float-right mb-2 mr-2" data-toggle="modal"
+			data-target="#upload-dialog">Upload</button>
+			<div class="modal fade" id="upload-dialog" tabindex="-1" role="dialog"
+			aria-labelledby="title-of-dialog" aria-hidden="true">
+			<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 class="modal-title" id="title-of-dialog">Upload New Slide</h5>
+						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+							<span aria-hidden="true">&times;</span>
+						</button>
+					</div>
+					<div class="modal-body">
+						<div>
+							<div id="upload_form">
+								<div class="alert alert-info" role="alert">
+
+									<h3>Steps for uploading.</h3>
+									<ul>
+										<li>Select the file as Input. The <b>Token</b> field should be filled automatically, and start uploading.</li>
+										<li> Provide the destination filename with extension.</li>
+										<li>Click on the <b>Finish Upload</b> to complete the upload </li>
+										<li>Finally <b>Post</b> it to caMicroscope</li>
+									</ul>
+								</div>
+								<div>
+									<form>
+										<table class="table table-borderless" cellpadding="5" cellspacing="0">
+											<tr>
+												<td align="right"><b>Files</b></td>
+												<td id="fileUploadInput"><input type="file" id="input"
+														onchange="handle_upload(this.files)" multiple></td>
+											</tr>
+											<tr id="fileIdRow">
+												<td align="right"><b>ID</b></td>
+											</tr>
+											<tr id="filenameRow">
+												<td align="right"><b>Filename</b></td>
+											</tr>
+											<tr id="tokenRow">
+												<td align="right"><b>Token</b></td>
+											</tr>
+											<tr id="slidenameRow">
+												<td align="right"><b>Slidename</b></td>
+											</tr>
+										</table>
+
+										<div class="text-center">
+											<button class="btn btn-primary" type="button" id="finish_btn"
+												value="Finish Upload" onclick="validateForm(finish_upload)">Finish
+												Upload</button>
+											<button class="btn btn-secondary" type="button" id="check_btn"
+												value="Check" onclick="CheckBtn()">Check</button>
+											<button class="btn btn-success" type="button" id="post_btn" value="Post"
+												onclick="validateForm(PostBtn)">Post</button>
+										</div>
+
+									</form>
+								</div>
+								<div class="text-center p-2">
+									<div id="load_status" class="p-1"></div>
+									<div id="json_table"></div>
+								</div>
+							</div>
+						</div>
+
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+					</div>
+				</div>
+			</div>
+			</div>
 		<div class="container">
 
 			<div>
@@ -100,87 +175,13 @@ <h3 class="text-center h3 mb-0">Available Slides</h3>
 						</select>
 						<input id="search-table" type="text" class="form-control" placeholder="Search&hellip;">
 					</div>
-					<button type="button" class="btn btn-success float-right mb-2"
-						onclick="(()=>{location.reload();return false;})()">Reload</button>
-					<button type="button" class="btn btn-primary float-right mb-2 mr-2" data-toggle="modal"
-						data-target="#upload-dialog">Upload</button>
 				</div>
 				<table id='datatables' class="table table-striped"></table>
 			</div>
-
-			<div class="modal fade" id="upload-dialog" tabindex="-1" role="dialog"
-				aria-labelledby="title-of-dialog" aria-hidden="true">
-				<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
-					<div class="modal-content">
-						<div class="modal-header">
-							<h5 class="modal-title" id="title-of-dialog">Upload New Slide</h5>
-							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-								<span aria-hidden="true">&times;</span>
-							</button>
-						</div>
-						<div class="modal-body">
-							<div>
-								<div id="upload_form">
-									<div class="alert alert-info" role="alert">
-
-										<h3>Steps for uploading.</h3>
-										<ul>
-											<li>Select the file as Input. The <b>Token</b> field should be filled automatically, and start uploading.</li>
-											<li> Provide the destination filename with extension.</li>
-											<li>Click on the <b>Finish Upload</b> to complete the upload </li>
-											<li>Finally <b>Post</b> it to caMicroscope</li>
-										</ul>
-									</div>
-									<div>
-										<form>
-											<table class="table table-borderless" cellpadding="5" cellspacing="0">
-												<tr>
-													<td align="right"><b>Files</b></td>
-													<td id="fileUploadInput"><input type="file" id="input"
-															onchange="handle_upload(this.files)" multiple></td>
-												</tr>
-												<tr id="fileIdRow">
-													<td align="right"><b>ID</b></td>
-												</tr>
-												<tr id="filenameRow">
-													<td align="right"><b>Filename</b></td>
-												</tr>
-												<tr id="tokenRow">
-													<td align="right"><b>Token</b></td>
-												</tr>
-												<tr id="slidenameRow">
-													<td align="right"><b>Slidename</b></td>
-												</tr>
-											</table>
-
-											<div class="text-center">
-												<button class="btn btn-primary" type="button" id="finish_btn"
-													value="Finish Upload" onclick="validateForm(finish_upload)">Finish
-													Upload</button>
-												<button class="btn btn-secondary" type="button" id="check_btn"
-													value="Check" onclick="CheckBtn()">Check</button>
-												<button class="btn btn-success" type="button" id="post_btn" value="Post"
-													onclick="validateForm(PostBtn)">Post</button>
-											</div>
-
-										</form>
-									</div>
-									<div class="text-center p-2">
-										<div id="load_status" class="p-1"></div>
-										<div id="json_table"></div>
-									</div>
-								</div>
-							</div>
-
-						</div>
-						<div class="modal-footer">
-							<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-						</div>
-					</div>
-				</div>
-			</div>
-
+		
+		
 		</div>
+
 	</div>
 
 	<div class="text-center text-white bg-dark p-3" style="position: static;bottom: 0;width: 100%;">