diff options
| -rw-r--r-- | bh20simplewebuploader/static/main.css | 11 | ||||
| -rw-r--r-- | bh20simplewebuploader/static/main.js | 50 | ||||
| -rw-r--r-- | bh20simplewebuploader/templates/form.html | 25 |
3 files changed, 41 insertions, 45 deletions
diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css index 30b1d04..609ae19 100644 --- a/bh20simplewebuploader/static/main.css +++ b/bh20simplewebuploader/static/main.css @@ -147,6 +147,17 @@ footer { justify-content: space-around; } +.metadata input#metadata_upload:checked ~ #metadata_upload_form_spot { + display: block; +} + +.metadata input#metadata_upload ~ #metadata_upload_form_spot { + display: none; +} + +.invisible { + display: none; +} @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 ab810cd..e8d4776 100644 --- a/bh20simplewebuploader/static/main.js +++ b/bh20simplewebuploader/static/main.js @@ -1,37 +1,21 @@ -let r = new XMLHttpRequest(); -let test; -r.open("GET", scriptRoot + "/api/getAllaccessions", true); -r.onreadystatechange = function () { - if (r.readyState != 4 || r.status != 200) return; - test = r.responseText; - console.log(JSON.parse(test)); -}; -r.send(); -let uploadForm = document.getElementById('metadata_upload_form') -let uploadFormSpot = document.getElementById('metadata_upload_form_spot') -let fillForm = document.getElementById('metadata_fill_form') -let fillFormSpot = document.getElementById('metadata_fill_form_spot') +fetch(scriptRoot + "/api/getAllaccessions") + .then(response => { + return response.json(); + }) + .then(data => { + console.log('test'); + console.log(data); + }) -function setUploadMode() { - // Make the upload form the one in use - uploadFormSpot.appendChild(uploadForm) - fillFormSpot.removeChild(fillForm) -} - -function setFillMode() { - // Make the fillable form the one in use - uploadFormSpot.removeChild(uploadForm) - fillFormSpot.appendChild(fillForm) -} - -function setMode() { - // Pick mode based on radio - if (document.getElementById('metadata_upload').checked) { - setUploadMode() +/** + * Show form if checked + */ +let fillFormSpot = document.getElementById('metadata_fill_form_spot'); +function displayForm() { + if (document.getElementById('metadata_form').checked) { + fillFormSpot.classList.remove("invisible"); } else { - setFillMode() + fillFormSpot.classList.add("invisible"); + console.log("visible"); } } - -// Start in mode appropriate to selected form item -setMode() diff --git a/bh20simplewebuploader/templates/form.html b/bh20simplewebuploader/templates/form.html index 7b1fd98..ea3caab 100644 --- a/bh20simplewebuploader/templates/form.html +++ b/bh20simplewebuploader/templates/form.html @@ -46,16 +46,16 @@ </div> <div class="metadata"> - <label>Select metadata submission method:</label> - <br> - <input type="radio" id="metadata_form" name="metadata_type" value="fill" onchange="setMode()" checked required> - <label for="metadata_form">Fill in metadata manually</label> - <input type="radio" id="metadata_upload" name="metadata_type" value="upload" onchange="setMode()" required> - <label for="metadata_upload">Upload metadata file</label> - <br> - <small>Make sure the metadata has submitter attribution details.</small> - - <div id="metadata_upload_form_spot"> + <label>Select metadata submission method:</label> + <br> + <input type="radio" id="metadata_form" name="metadata_type" value="fill" checked onchange="displayForm()" required> + <label for="metadata_form">Fill in metadata manually</label> + <input type="radio" id="metadata_upload" name="metadata_type" value="upload" onchange="displayForm()" required> + <label for="metadata_upload">Upload metadata file</label> + <br> + <small>Make sure the metadata has submitter attribution details.</small> + + <div id="metadata_upload_form_spot"> <div id="metadata_upload_form"> <br> <label for="metadata">Select JSON or YAML metadata file following <a href="https://github.com/arvados/bh20-seq-resource/blob/master/bh20sequploader/bh20seq-schema.yml" target="_blank">this schema</a> and <a href="https://github.com/arvados/bh20-seq-resource/blob/master/example/metadata.yaml" target="_blank">example</a> (max 50K):</label> @@ -63,9 +63,9 @@ <input type="file" id="metadata" name="metadata" accept=".json,.yml,.yaml" required> <br> </div> - </div> - </div> + </div> + </div> <div id="metadata_fill_form_spot"> <div id="metadata_fill_form"> {% for record in fields %} @@ -103,6 +103,7 @@ {% endif %} {% endfor %} </div> + </div> |