{% 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 KML Course File</h1>

<ul class="main-content">
  <li class="grid_4">
    <div id="id_dropregion watermark invisible">
      <p>Drag and drop files here </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 class="button" type="submit" value="Submit">
        </p>
      </form>
    </div>
  </li>
  <li class="grid_4">
    <h2>How-to</h2>
    <p>
      Courses allow you to mark the start & finish lines of your
      test pieces and measure the time spent on the course (as opposed
      to the total duration of a workout). This allows you to row and rank
      marked courses.

      To create a course, you use <a href="https://www.google.com/earth/">Google Earth</a>
      to mark the start and finish lines using polygons. The process is identical
      to creating custom courses for the
      <a href="http://performancephones.com/crewnerd/">CrewNerd</a>
      app.

    </p>

    <p>CrewNerd has published a nice video tutorial of the process.
      <a href="https://youtu.be/whhWFmMJbhM">Click here</a> to see the video. The part
      we're interested in starts at 2:05.
    </p>

    <p>
      In addition to start and finish areas, on rowsandall.com you can add additional
      polygons to mark areas that you must pass (in that order). This allows for
      courses with turns around buoys, respecting buoy lines, or respecting traffic
      patterns on rivers and lakes.
    </p>

    <p>
      <ul>
        <li>Open Google Earth</li>
        <li>Create a folder "Courses" under "Temporary Places" or under "My Places"</li>
        <li>Create a folder for each Course under "Courses", and for each course:</li>
        <li>Create Start polygon</li>
        <li>Optional: Create First "must row through" polygon</li>
        <li>Optional: Create subsequent "must row through" polygons</li>
        <li>Create Finish polygon</li>
        <li>Save "Courses" as KML file</li>
        <li>Upload the file to rowsandall.com using the "Add Courses" button</li>
      </ul>
    </p>

    <p>You are allowed to have multiple courses in one KML file.
      Your CrewNerd "courses.kml" file works out of the box</p>

    <p>The site doesn't test for duplicate courses.</p>

  </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).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());
console.log(data)
};
});});

$('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(data)
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: '/rowers/courses/{{ course.id }}/update/',
contentType: false,
processData: false,
error: function(result) {
$("#id_waiting").replaceWith(
'<div id="id_failed" class="grid_12 alpha message">Your upload failed</div>'
);
console.log(data);
setTimeout(1000);
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 %}