better more intuitive course update
This commit is contained in:
Sander Roosendaal
319
rowers/templates/course_form_update.html
Normal file
319
rowers/templates/course_form_update.html
Normal file
@@ -0,0 +1,319 @@
|
||||
{% extends "newbase.html" %}
|
||||
{% load staticfiles %}
|
||||
{% 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) {
|
||||
setTimeout(1000);
|
||||
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+' <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 %}
|
||||
Reference in New Issue
Block a user