{% extends "newbase.html" %}
{% load static %}
{% load rowerfilters %}

{% block title %}File loading{% endblock %}

{% block meta %}
<script type='text/javascript'
        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
</script>
<script type='text/javascript'
        src='https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js'>
</script>
<script>
</script>
{% endblock %}

{% block main %}
<h1>Upload Course Standard Times File</h1>

<ul class="main-content">
  <li class="grid_4">
    <div id="id_dropregion watermark invisible">
      <p>Drag and drop files here.
        </p>
        <p>
        If you're updating an existing set of standard times,
        existing groups with challenge entries will be updated. New
        groups will be created. All groups with challenge entries will
        remain, even if you delete them from the CSV file. So, it
      is not possible to remove groups if there have been starts in this group.</p>
      <p>
        If you want to still remove those groups, it is better to set the
        existing set of standard times to inactive and upload a new one.
        </p>
    </div>
    <div id="id_drop-files" class="grid_12 alpha drop-files">
      <form id="file_form" enctype="multipart/form-data" method="post">
        {% if form.errors %}
        <p style="color: red;">
          Please correct the error{{ form.errors|pluralize }} below.
        </p>
        {% endif %}

        <table>
          {{ form.as_table }}
        </table>
        {% csrf_token %}
        <p>
          <input type="submit" value="Submit">
        </p>
      </form>
    </div>
  </li>
</ul>




{% endblock %}

{% block sidebar %}
{% include 'menu_racing.html' %}
{% endblock %}


{% block scripts %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      var td = new FormData();
      var formdatasetok = false;
      try {
      td.set('aap','noot');
      formdatasetok = true;
      console.log('FormData.set OK');
      }
  catch(err) {
  console.log('FormData.set not OK');
  formdatasetok = false;
  }

      if (!formdatasetok) {
      $("#id_dropregion").remove();
      }

  if (formdatasetok) {

  $(document).ready(function() {
  var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
  console.log("CSRF token",csrftoken);

  function csrfSafeMethod(method) {
  // these HTTP methods do not require CSRF protection
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }
  $.ajaxSetup({
  beforeSend: function(xhr, settings) {
  if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
  xhr.setRequestHeader("X-CSRFToken", csrftoken);
  }
  }
  });
  console.log("Loading dropper");
  jQuery.event.props.push('dataTransfer');

      $(window).on('dragenter', function() {
      $("#id_drop-files").css("background-color","#E9E9E4");
      $("#id_dropregion").addClass("watermark").removeClass("invisible");})

      $(window).on('dragleave', function() {
      $("#id_drop-files").css("background-color","#FFFFFF");
      $("#id_dropregion").removeClass("watermark").addClass("invisible");})

  var frm = $("#file_form");

  if( window.FormData === undefined ) {
  console.log('no formdata');
  alert("No FormData");
  } else {
  console.log('we have formdata');
  }

  var data = new FormData(frm[0]);


  $('#id_file').on('change', function(evt) {
     var f = this.files[0];
  console.log(f);
    var istcx = false;
  var isgzip = false;
  var size1 = 10485760;
  var size2 = 1048576;
  if ((/\.(tcx|TCX)/i).test(f.name)) {
  istcx = true;
  console.log('tcx');
  if ((/\.(gz|GZ)/i).test(f.name)) {
  isgzip = true;
  console.log('gzip');
  size1 /= 5;
  size2 /= 5;
  }
  }
  console.log(size1)
  console.log(size2)
  if (f.size > size1) {
  alert("File Size must be smaller than 10 MB");
  this.value = null;
  } else {

  if (f.size > size2) {
  $('#id_offline').val('True');
  $('#id_offline').prop('checked','True');
  data.set($('#id_offline').attr('name'),$('#id_offline').prop('checked'));
  console.log("Set offline to True");
}
  }

});

  $('input').each(function( i ) {
  $(this).change(function() {
  if ($(this).attr('type') == 'checkbox') {
    data.set($(this).attr('name'),$(this).prop('checked'));
    console.log($(this).attr('id'),$(this).attr('name'),$(this).attr('notes'),$(this).prop('checked'));
  } else {
    data.set($(this).attr('name'),$(this).val());
      if ($(this).attr('id') == 'id_file') {
        data.set("file",this.files[0]);
    }
    console.log($(this).attr('name'),$(this).val());
  };
  });});

  $('textarea').each(function( i ) {
    $(this).change(function() {
      data.set($(this).attr('name'),$(this).val());
      console.log($(this).attr('name'),$(this).val());
    });
  });

  $('select').each(function( i ) {
  console.log($(this).attr('name'),$(this).val());
  $(this).change(function() {
  data.set($(this).attr('name'),$(this).val());
  console.log($(this).attr('id'),$(this).attr('name'),$(this).val());
  });
  });

  frm.submit(function() {
  console.log("Form submission");
  $(data.values()).each(function(value) {
  console.log(value);
  });

  $("#id_drop-files").replaceWith(
  '<div id="id_waiting"><img src="/static/img/rowingtimer.gif" width="60" height="50" style="width:60px">'
  );
  $.ajax({
    data: data,
    type: $(this).attr('method'),
    url: window.location.pathname,
    contentType: false,
    processData: false,
    error: function(result) {
    $("#id_waiting").replaceWith(
    '<div id="id_failed" class="grid_12 alpha message">Your upload failed</div>'
    );
    setTimeout(function() {
    location.reload();
    },1000);
    },
    success: function(result) {
    console.log('got something back');
        console.log(result);
    if (result.result == 1) {
        window.location.href = result.url;
        } else {
        console.log(result," reloading");
        location.reload();
        };
    }
    });
  return false;
    });


    $('#id_drop-files').bind({
  drop: function(e) {
  e.preventDefault();
  console.log("you dropped something");
  var files = e.dataTransfer.files;
  console.log(files[0]);

    var f = files[0];
    var istcx = false;
    var isgzip = false;
    var size1 = 10485760;
    var size2 = 1048576;
    if ((/\.(tcx|TCX)/i).test(f.name)) {
    istcx = true;
    console.log('tcx');
    if ((/\.(gz|GZ)/i).test(f.name)) {
    isgzip = true;
    console.log('gzip');
    size1 /= 5;
    size2 /= 5;
    }
    }
    console.log(f);
    console.log(size1)
    console.log(size2)
    if (f.size > size1) {
    alert("File Size must be smaller than 10 MB");
    $("#id_file").value = 0;
    return false;
    }
        data.set("file",f);
//    data.append("file",f);

        $("#id_file").replaceWith('<div id="id_file">'+files[0].name+'&nbsp; <a class="remove" href="javascript:void(0);"><b><font color="red">X</font></b></a></div>');
  },
  mouseenter:function(){$("#id_drop-files").css("background-color","#E9E9E4");},
  mouseleave:function(){$("#id_drop-files").css("background-color","#FFFFFF");},
  dragover:function(e){
  e.preventDefault();
  $("#id_drop-files").css("background-color","#E9E9E4");},
  dragleave:function(e){ e.preventDefault();},
    });
    $(document).on("click", "a.remove", function() {
    $(this).parent().replaceWith('<td><input id="id_file" name="file" type="file" /></td>');
    });
  });
};
    </script>

    {% endblock %}