aboutsummaryrefslogtreecommitdiff
path: root/bh20simplewebuploader/templates/form.html
blob: 4ad41e272cdfb4af9fe1e206c4b6e2dc3c83d64d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Simple Web Uploader for Public SARS-CoV-2 Sequence Resource</title>
    </head>
    <body>
        <h1>Simple Web Uploader for Public SARS-CoV-2 Sequence Resource</h1>
        <hr>
        <p>
            This tool can be used to upload sequenced genomes of SARS-CoV-2 samples to the <a href="https://workbench.lugli.arvadosapi.com/collections/lugli-4zz18-z513nlpqm03hpca">Public SARS-CoV-2 Sequence Resource</a>. Your uploaded sequence will automatically be processed and incorporated into the public pangenome.
        </p>
        <hr>
        <form action="/submit" method="POST" enctype="multipart/form-data" id="main_form">
            <label for="fasta">Select FASTA file for assembled genome (max 1MB):</label>
            <br>
            <input type="file" id="fasta" name="fasta" accept=".fa,.fasta,.fna" required>
            <br>
            
            <label>Select metadata submission method:</label>
            <br>
            <input type="radio" id="metadata_upload" name="metadata_type" value="upload" onchange="setMode()" checked required>
            <label for="metadata_upload">Upload metadata file</label>
            <br>
            <input type="radio" id="metadata_form" name="metadata_type" value="fill" onchange="setMode()" required>
            <label for="metadata_form">Fill in metadata manually</label>
            <br>
            
            <div id="metadata_upload_form_spot">
                <div id="metadata_upload_form">
                    <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> (<a href="https://github.com/arvados/bh20-seq-resource/blob/master/example/metadata.yaml" target="_blank">Example 1</a>, <a href="https://github.com/arvados/bh20-seq-resource/blob/master/example/minimal_example.yaml" target="_blank">Example 2</a>, max 1MB):</label>
                    <br>
                    <input type="file" id="metadata" name="metadata" accept=".json,.yml,.yaml" required>
                    <br>
                </div>
            </div>
            
            <div id="metadata_fill_form_spot">
                <div id="metadata_fill_form">
                    {% for record in fields %}
                        {% if 'heading' in record %}
                            <h4>{{ record['heading'] }}</h4>
                        {% else %}
                            <label for="{{ record['id'] }}">
                                {{ record['label'] }}
                                {{ "*" if record['required'] else "" }}
                                {% if 'ref_url' in record %}
                                    <a href="{{ record['ref_url'] }}" title="More Info" target="_blank">?</a>
                                {% endif %}
                            </label>
                            <br>
                            <input type="{{ record['type'] }}" id="{{ record['id'] }}" name="{{ record['id'] }}" {{ "required" if record['required'] else "" }}>
                            <br>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
            
            <input type="submit" value="Add to Pangenome">
        </form>
        <hr>
        <small><a href="https://github.com/adamnovak/bh20-simple-web-uploader">Source</a> &middot; Made for <a href="https://github.com/virtual-biohackathons/covid-19-bh20">COVID-19-BH20</a></small>
        <script type="text/javascript">
            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')
            
            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()
                } else {
                    setFillMode()
                }
            }
            
            // Start in mode appropriate to selected form item
            setMode()
        </script>
    </body>
</html>