From 87628425bd83d3d142fbf9383ef727047cd8f9d1 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 @@
<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>
--
cgit v1.2.3