aboutsummaryrefslogtreecommitdiff
path: root/bh20simplewebuploader/templates/form.html
blob: b9b377608fb2862ffe1a164257a37846db60fdbe (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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
  {% include 'header.html' %}
    <body>
      {% include 'banner.html' %}
      {% include 'menu.html' %}

        <section>
            <form action="/submit" method="POST" enctype="multipart/form-data" id="main_form" class="grid-container">
                <div class="fasta-file-select">
                    <h2><svg class="bi bi-cloud-upload" width="1.2em" height="1.2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.887 6.2l-.964-.165A2.5 2.5 0 103.5 11H6v1H3.5a3.5 3.5 0 11.59-6.95 5.002 5.002 0 119.804 1.98A2.501 2.501 0 0113.5 12H10v-1h3.5a1.5 1.5 0 00.237-2.981L12.7 7.854l.216-1.028a4 4 0 10-7.843-1.587l-.185.96z"/>
                        <path fill-rule="evenodd" d="M5 8.854a.5.5 0 00.707 0L8 6.56l2.293 2.293A.5.5 0 1011 8.146L8.354 5.5a.5.5 0 00-.708 0L5 8.146a.5.5 0 000 .708z" clip-rule="evenodd"/>
                        <path fill-rule="evenodd" d="M8 6a.5.5 0 01.5.5v8a.5.5 0 01-1 0v-8A.5.5 0 018 6z" clip-rule="evenodd"/>
                    </svg> Upload SARS-CoV-2 Sequence</h2>

                    <label for="fasta">Select FASTA file of assembled genome (form upload <span class="dropt" title="For larger files or bulk uploads you can use a CLI uploader">max 50K<span style="width:500px;"></span></span>; FASTQ and BAM is coming soon): </label>
                    <br>
                    <input type="file" id="fasta" name="fasta" accept=".fa,.fasta,.fna,.fq" required>
                    <br>
                    <small>
                    When uploading your data you need to agree to a <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a> or <a href="https://creativecommons.org/share-your-work/public-domain/cc0/">CC0 license</a>. </small>
                </div>

                <div class="metadata">
                    <label>Select metadata submission method:</label>
                    <br>
                    <input type="radio" id="metadata_form" name="metadata_type" value="fill" checked  onchange="setMode()" 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">
                        <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/maximum_metadata_example.yaml" target="_blank">example</a> (max 50K):</label>
                          <br>
                          <input type="file" id="metadata" name="metadata" accept=".json,.yml,.yaml" required>
                          <br>
                        </div>
                    </div>

                </div>

                <div id="metadata_fill_form_spot">
                    <div id="metadata_fill_form">
                        {% for record in fields %}

                        {% if 'heading' in record %}
                        {% if loop.index > 1 and 2 < 3  %} <!-- for emacs matching elements -->
                    </div>
                    {% endif %}
                    <div class="record"> <!-- from block, e.g. host fields -->
                        <h4>{{ record['heading'] }}</h4>
                        {% else %} <!-- handles one field -->
                        <div class="field-group" data-keypath="{{ record['id'] }}">
                            <div class="field" data-number="0">
                                <label for="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}" title="{{ record.get('docstring', '') }}">
                                    {{ record['label'] }}
                                    {{ "*" if record['required'] else "" }}
                                    {% if 'docstring' in record %}
                                      <a href='javascript:alert({{ record['docstring'] | tojson }})'></a>
                                    {% endif %}
                                    {% if 'ref_iri' in record %}
                                      <a href="{{ record['ref_iri'] }}" target="_blank" title="Ontology Link">🔗</a>
                                    {% endif %}
                                </label>
                                {% if record['type'] == 'select' %}
                                  <select class="control" id="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}" name="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}" {{ "required" if record['required'] else "" }}>
                                      <option value="" selected>Choose one...</option>
                                    {% for option in record['options'] %}
                                      <option value="{{ option[1] }}">{{ option[0] }}</option>
                                    {% endfor %}
                                  </select>
                                {% else %} <!-- input field -->
                                  <input class="control"
                                         type="{{ record['type'] }}"
                                         id="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}"
                                         {{ 'value=http://purl.obolibrary.org/obo/NCBITaxon_9606' if record['id']=='metadata.host.host_species'}}
                                         {{ 'placeholder=http://www.wikidata.org/entity/Q30' if record['id']=='metadata.sample.collection_location'}}
                                         {{ 'placeholder=MyUniqueSampleId.1' if record['id']=='metadata.sample.sample_id'}}
                                         {{ 'value=http://purl.obolibrary.org/obo/NCBITaxon_2697049' if record['id']=='metadata.virus.virus_species'}}
                                         {{ 'readonly=1 value=http://genenetwork.org/submission' if record['id']=='metadata.id'}}
                                         name="{{ record['id'] }}{{ '[0]' if record['list'] else ''}}"
                                         {{ "required" if record['required'] else "" }} {{ ("step=" + record['step']) if 'step' in record else ""}}>
                                {% endif %}
                            </div>
                            {% if record['list'] %}
                              <button type="button" title="Remove field" class="remove-field invisible"></button>
                              <button type="button" title="Add field" class="add-field"></button>
                            {% endif %}
                        </div>
                        {% endif %}
                        {% if loop.index == loop.length %}
                    </div>
                    {% endif %}
                    {% endfor %}
                </div>

                </div>

                <input class="submit" id="submit" onclick="on_submit_button()" type="submit" value="Add to Pangenome">
            </form>
        </section>

{% include 'footer.html' %}

<script type="text/javascript">
  // Find all the add and remove field buttons and hook up the listeners.
  for (let button of document.getElementsByClassName('add-field')) {
      button.addEventListener('click', addField)
  }
  for (let button of document.getElementsByClassName('remove-field')) {
      button.addEventListener('click', removeField)
  }
  // let scriptRoot = {{ request.script_root|tojson|safe }};
  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')

  setMode()

</script>

   </body>
</html>