Skip to content

Commit

Permalink
Show Upload Options on Table when no slides (#249)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@AbdulRashidReshamwala @birm
AbdulRashidReshamwala and birm authored Mar 25, 2020
1 parent 83cb9ae commit 376e253
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 80 deletions.
2 changes: 1 addition & 1 deletion apps/landing/landing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,4 +120,4 @@ <h3>Source Code</h3>



</html>
</html>
4 changes: 2 additions & 2 deletions apps/signup/signup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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']">
Expand Down Expand Up @@ -113,4 +113,4 @@ <H1>User Signup</H1>
}
</script>
</body>
</html>
</html>
155 changes: 78 additions & 77 deletions apps/table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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%;">
Expand Down

0 comments on commit 376e253

Please sign in to comment.