Display the output of the queries as prettified JSON for now

2 files changed, 66 insertions, 13 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");
 }