{% 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>
{% endblock %}

{% block main %}
<div id="id_main">
<ul class="main-content">
  <li class="grid_2">
    <div id="id_dropregion" class="watermark invisible">
      <p>Drag and drop files here </p>
    </div>
    <div id="id_drop-files" class="drop-files">
      <form id="file_form" enctype="multipart/form-data" action="{{ formloc }}" method="post">
        <h1>Upload Workout File</h1>
        {% if user.is_authenticated and user|coach_rowers %}
        <p>Looking for <a href="/rowers/workout/upload/team/">Team Manager
            Upload?</a></p>
        {% endif %}
        {% 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>
          &nbsp;<input type="submit" value="Submit">
        </p>
    </div>

  </li>
  <li class="grid_2">
    <h1>Optional extra actions</h1>
    <p>
      <table>
	{{ optionsform.as_table }}

      </table>
    </p>
    <p>
      You can select one static plot to be generated immediately for
      this workout. You can select to export to major fitness
      platforms automatically.
      If you check "make private", this workout will not be visible to your followers and will not show up in your teams' workouts list. With the Landing Page option, you can select to which (workout related) page you will be
      taken after a successfull upload.
    </p>

    <p>
      If you don't have a workout file but have written down the splits,
      you can create a workout file yourself from <a href="/static/dummy_workout_template.xls">this template</a>
    </p>


    <p><b>Select Files with the File button or drag them on the marked area</b></p>

  </li>



  </form>
</ul>
</div>
{% endblock %}

    {% block scripts %}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  $( document ).ready(function() {
      var boattypes = {
	  '1x': '1x (single)',
	  '2x': '2x (double)',
	  '2x+': '2x+ (coxed double)',
	  '2-': '2- (pair)',
	  '2+': '2+ (coxed pair)',
	  '3x+': '3x+ (coxed triple)',
	  '3x-': '3x- (triple)',
	  '4x': '4x (quad)',
	  '4x+': '4x+ (coxed quad)',
	  '4-': '4- (four)',
	  '4+': '4+ (coxed four)',
	  '8+': '8+ (eight)',
	  '8x+': '8x+ (octuple scull)',
      }
      
      var ergtypes = {
	  'static': 'Concept2 static',
	  'dynamic': 'Concept2 dynamic',
	  'slides': 'Concept2 slides',
	  'rp3': 'RP3',
	  'waterrower': 'Water Rower',
	  'other': 'Other Indoor Rower',	  
      }

      $('#id_workouttype').on('change', function(){
          if (
              $(this).val() == 'water'
		  || $(this).val() == 'coastal'
		  || $(this).val() == 'c-boat'
		  || $(this).val() == 'churchboat'
          ) {
              var $el = $('#id_boattype');
	      $el.empty();
	      $.each(boattypes, function(key,value) {
		  if ( key == '{{ workout.boattype }}') {
		      $el.append($("<option></option").attr("value", key).attr("selected", "selected").text(value));
		  } else {
		      $el.append($("<option></option").attr("value", key).text(value));
		  }
	      });
	      $el.toggle(true);
	      
          }
	  else if (
	      $(this).val() == 'rower'
	  ) {
              var $el = $('#id_boattype');
	      $el.empty();
	      $.each(ergtypes, function(key,value) {
		  if ( key == '{{ workout.boattype }}') {
		      $el.append($("<option></option").attr("value", key).attr("selected", "selected").text(value));
		  } else {
		      $el.append($("<option></option").attr("value", key).text(value));
		  }
	      });
	      $el.toggle(true);	    
	  }
	  else {
              $('#id_boattype').toggle(false);
              $('#id_boattype').val('1x');
	  }
	  if (
              $(this).val() == 'rower'
		  || $(this).val() == 'dynamic'
		  || $(this).val() == 'slides'
	  ) {
              $('#id_dragfactor').toggle(true);
	  } else {
              $('#id_dragfactor').toggle(false);
              $('#id_dragfactor').val('0');
	  }
	  
      });
      $('#id_workouttype').change();
  });
  </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 = 2097152;
	      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");
		      $('#extra_message').text('Because of the large size, we recommend to use  background processing. You will receive email when it is done.');
		      $('#extra_message').addClass('message');
		  }
	      }
	      
	  });
	  
	  $('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).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('id'),$(this).attr('name'),$(this).val());
		  };
	      });});
	  
	  $('textarea').each(function( i ) {
	      $(this).change(function() {
		  data.set($(this).attr('name'),$(this).val());
		  console.log($(this).attr('id'),$(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_main").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: '/rowers/workout/upload/',
		  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;
		  }
		  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");
		      $('#extra_message').text('Because of the large size, we recommend to use  background processing. You will receive email when it is done.');
		      $('#extra_message').addClass('message');
		  }
		  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 %}


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