diff options
| -rw-r--r-- | bh20simplewebuploader/static/main.css | 31 | ||||
| -rw-r--r-- | bh20simplewebuploader/static/main.js | 48 | ||||
| -rw-r--r-- | bh20simplewebuploader/templates/form.html | 18 |
3 files changed, 79 insertions, 18 deletions
diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css index 94d38bf..20003f9 100644 --- a/bh20simplewebuploader/static/main.css +++ b/bh20simplewebuploader/static/main.css @@ -42,7 +42,7 @@ form h4 { text-transform: 'uppercase'; } -.intro, form { +.intro, form, .search { padding: 20px; } @@ -59,7 +59,6 @@ form h4 { } .button { - width: 6em; border-radius: 5px; background: #0ED1CD; margin: 0.3em auto; @@ -120,6 +119,17 @@ span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; } column-width: 250px; } +pre code { + background-color: #eee; + display: flex; + width: max-content; + margin: 0 auto; + overflow-y: scroll; + max-height: 300px; + padding: 10px; + border: solid 1px black; +} + .record { display: flex; flex-direction: column; @@ -180,10 +190,27 @@ footer { display: none; } +.loader { + display: block; + border: 5px solid #f3f3f3; /* Light grey */ + border-top: 5px solid #3498db; /* Blue */ + border-radius: 50%; + width: 20px; + height: 20px; + margin-right: auto; + margin-left: auto; + animation: spin 1.5s linear infinite; +} + .invisible { display: none; } +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + @media only screen and (max-device-width: 480px) { .grid-container { display: flex; diff --git a/bh20simplewebuploader/static/main.js b/bh20simplewebuploader/static/main.js index e8d4776..0f79fdf 100644 --- a/bh20simplewebuploader/static/main.js +++ b/bh20simplewebuploader/static/main.js @@ -1,11 +1,38 @@ -fetch(scriptRoot + "/api/getAllaccessions") - .then(response => { - return response.json(); - }) - .then(data => { - console.log('test'); - console.log(data); - }) +function fetchAPI(apiEndPoint) { + fetch(scriptRoot + apiEndPoint) + .then(response => { + return response.json(); + }) + .then(data => { + document.getElementById("json").textContent = JSON.stringify(data, undefined, 2); + document.getElementById("results").classList.remove("invisible"); + document.getElementById("loader").classList.add("invisible"); + }); + document.getElementById("results").classList.add("invisible"); + document.getElementById("loader").classList.remove("invisible"); + +} + +let search = () => { + let m = document.getElementById('search-input').value; + fetchAPI(scriptRoot + "/api/getDetailsForSeq?seq=" + encodeURIComponent(m)); +} + +let fetchSEQBySpecimen = () => { + fetchAPI("/api/getSEQbySpecimenSource"); +} + +let fetchSEQByLocation = () => { + fetchAPI("/api/getSEQbyLocation"); +} + +let fetchSEQByTech = () => { + fetchAPI("/api/getSEQbytech"); +} + +let fetchAllaccessions = () => { + fetchAPI("/api/getAllaccessions"); +}; /** * Show form if checked @@ -14,8 +41,7 @@ let fillFormSpot = document.getElementById('metadata_fill_form_spot'); function displayForm() { if (document.getElementById('metadata_form').checked) { fillFormSpot.classList.remove("invisible"); - } else { - fillFormSpot.classList.add("invisible"); - console.log("visible"); + return; } + fillFormSpot.classList.add("invisible"); } diff --git a/bh20simplewebuploader/templates/form.html b/bh20simplewebuploader/templates/form.html index e01b846..5d1e1b1 100644 --- a/bh20simplewebuploader/templates/form.html +++ b/bh20simplewebuploader/templates/form.html @@ -20,21 +20,29 @@ <div class="filter-options" action="#"> <p>[Demo] Display content sequences by: </p> - <button class="button">Source</button> - <button class="button">Location</button> + <div> + <button class="button" onclick="fetchSEQBySpecimen()">Specimen Source</button> + <button class="button" onclick="fetchSEQByLocation()">Location</button> + <button class="button" onclick="fetchSEQByTech()">Tech</button> + <button class="button" onclick="fetchAllaccessions()">Allaccessions</button> + </div> + </div> - <form class="search"> + <div class="search"> <input id="search-input" id="global-search" type="search" placeholder="FASTA uri" required> <button class="button search-button" type="submit" onclick="search()"> <span class="icon ion-search"> <span class="sr-only">Search</span> </span> </button> - </form> + </div> </section> - <section class="results"> + <div id="loader" class="loader invisible"></div> + + <section id="results" class="invisible"> + <pre><code id="json"></code></pre> </section> <section> |