Display the output of the queries as prettified JSON for now

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>