aboutsummaryrefslogtreecommitdiff
path: root/bh20simplewebuploader/templates/form.html
blob: 847545c58aa99e675afee5c81ec8316ff7bda416 (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
130
131
<!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.
  Note that most fields in the form are optional.
                    </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>