From ad10d632b9ffb4433b696df374e77d9e932403d0 Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Sun, 26 Apr 2020 05:26:18 +0300 Subject: Display the output of the queries as prettified JSON for now --- bh20simplewebuploader/static/main.css | 31 ++++++++++++++++++-- bh20simplewebuploader/static/main.js | 48 ++++++++++++++++++++++++------- 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 @@

[Demo] Display content sequences by:

- - +
+ + + + +
+
- -
+ + +
-- cgit v1.2.3