{%extends "base.html"%}
{%from "flash_messages.html" import flash_messages%}
{%from "upload_progress_indicator.html" import upload_progress_indicator%}

{%block title%}Data Upload{%endblock%}

{%block contents%}
<h1 class="heading">data upload</h1>

<div class="explainer">
  <p>Each of the sections below gives you a different option for data upload.
    Please read the documentation for each section carefully to understand what
    each section is about.</p>
</div>

<h2 class="heading">R/qtl2 Bundles</h2>

<div class="explainer">
  <p>This feature combines and extends the two upload methods below. Instead of
    uploading one item at a time, the R/qtl2 bundle you upload can contain both
    the genotypes data (samples/individuals/cases and their data) and the
    expression data.</p>
  <p>The R/qtl2 bundle, additionally, can contain extra metadata, that neither
    of the methods below can handle.</p>

  <a href={{url_for("upload.rqtl2.select_species")}}
     title="Upload a zip bundle of R/qtl2 files">
    <button class="btn btn-main">upload R/qtl2 bundle</button></a>
</div>

<h2 class="heading">Expression Data</h2>

<div class="explainer">
  <p>This feature enables you to upload expression data. It expects the data to
    be in <strong>tab-separated values (TSV)</strong> files. The data should be
    a simple matrix of <em>phenotype × sample</em>, i.e. The first column is a
    list of the <em>phenotypes</em> and the first row is a list of
    <em>samples/cases</em>.</p>

  <p>If you haven't done so please go to this page to learn the requirements for
    file formats and helpful suggestions to enter your data in a fast and easy
    way.</p>

  <ol>
    <li><strong>PLEASE REVIEW YOUR DATA.</strong>Make sure your data complies
      with our system requirements. (
      <a href="{{url_for('entry.data_review')}}#data-concerns"
	 title="Details for the data expectations.">Help</a>
      )</li>
    <li><strong>UPLOAD YOUR DATA FOR DATA VERIFICATION.</strong> We accept
      <strong>.csv</strong>, <strong>.txt</strong> and <strong>.zip</strong>
      files (<a href="{{url_for('entry.data_review')}}#file-types"
	 title="Details for the data expectations.">Help</a>)</li>
  </ol>
</div>

<form action="{{url_for('entry.upload_file')}}"
      method="POST"
      enctype="multipart/form-data"
      id="frm-upload-expression-data">
  <legend class="heading">upload expression data</legend>
  {{flash_messages("error-expr-data")}}

  <fieldset>
    <label for="select_species01">Species</label>
    <select id="select_species01"
	    name="speciesid"
	    required="required">
      <option value="">Select species</option>
      {%for aspecies in species%}
      <option value="{{aspecies.SpeciesId}}">{{aspecies.MenuName}}</option>
      {%endfor%}
    </select>
  </fieldset>

  <fieldset>
    <legend>file type</legend>

    <input type="radio" name="filetype" value="average" id="filetype_average"
	   required="required" class="form-col-1" />
    <label for="filetype_average" class="form-col-2">average</label>

    <input type="radio" name="filetype" value="standard-error"
	   id="filetype_standard_error" required="required"
	   class="form-col-1" />
    <label for="filetype_standard_error" class="form-col-2">
      standard error
    </label>
  </fieldset>

  <fieldset>
    <span id="no-file-error" class="alert-error" style="display: none;">
      No file selected
    </span>
    <label for="file_upload" class="form-col-1">select file</label>
    <input type="file" name="qc_text_file" id="file_upload"
	   accept="text/plain, text/tab-separated-values, application/zip"
	   class="form-col-2"/>
  </fieldset>

  <fieldset>
    <input type="submit" value="upload file" class="btn btn-main form-col-2" />
  </fieldset>
</form>

{{upload_progress_indicator()}}

<h2 class="heading">samples/cases</h2>

<div class="explainer">
  <p>For the expression data above, you need the samples/cases in your file to
    already exist in the GeneNetwork database. If there are any samples that do
    not already exist the upload of the expression data will fail.</p>
  <p>This section gives you the opportunity to upload any missing samples</p>
</div>

<form method="POST" action="{{url_for('samples.select_species')}}">
  <legend class="heading">upload samples</legend>
  <fieldset>
    <label for="select_species02">Species</label>
    <select id="select_species02" name="species_id" required="required">
      <option value="">Select species</option>
      {%for spec in species%}
      <option value="{{spec.SpeciesId}}">{{spec.MenuName}}</option>
      {%endfor%}
    </select>
  </fieldset>

  <fieldset>
    <input type="submit" value="submit" class="btn btn-main form-col-2" />
  </fieldset>
</form>

{%endblock%}


{%block javascript%}
<script type="text/javascript" src="static/js/upload_progress.js"></script>
<script type="text/javascript">
  function setup_formdata(form) {
      var formdata = new FormData();
      formdata.append(
	  "speciesid",
	  form.querySelector("#select_species01").value)
      formdata.append(
	  "qc_text_file",
	  form.querySelector("input[type='file']").files[0]);
      formdata.append(
	  "filetype",
	  selected_filetype(
	      Array.from(form.querySelectorAll("input[type='radio']"))));
      return formdata;
  }

  setup_upload_handlers(
      "frm-upload-expression-data", make_data_uploader(setup_formdata));
</script>
{%endblock%}