261 lines
8.0 KiB
HTML
261 lines
8.0 KiB
HTML
{% extends "newbase.html" %}
|
|
{% load static %}
|
|
{% load rowerfilters %}
|
|
|
|
{% block title %}Rowsandall Courses List{% endblock %}
|
|
{% block scripts %}
|
|
|
|
{% endblock %}
|
|
{% block main %}
|
|
<style>
|
|
#mypointer {
|
|
cursor: pointer;
|
|
}
|
|
tr:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
<h1>Courses</h1>
|
|
|
|
<ul class="main-content">
|
|
<li class="grid_4">
|
|
<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.
|
|
</p>
|
|
<p>
|
|
Rowsandall courses are compatible with Google Earth and with
|
|
<a href="http://performancephones.com/crewnerd/">CrewNerd</a>. You can create
|
|
and alter courses in Google Earth, and if you have CrewNerd and
|
|
a Rowsandall account, you can easily synchronize your courses between
|
|
the two applications, allowing you to use CrewNerd to get in-boat information
|
|
about the course.
|
|
</p>
|
|
</li>
|
|
<li class="grid_1">
|
|
<form id="searchform" action="/rowers/list-courses/"
|
|
method="get" accept-charset="utf-8">
|
|
{{ searchform }}
|
|
<input type="submit" value="GO"></input>
|
|
</form>
|
|
</li>
|
|
{% if location %}
|
|
<li>
|
|
<p><a href="/rowers/list-courses/?nearby=true">Filter courses closest to you</a></p>
|
|
<p>{% if city %}{{ city }}{% endif %} {{ country_name }}, time zone {{ time_zone }}</p>
|
|
</li>
|
|
<a href="/rowers/list-courses/">All courses</a>
|
|
</li>
|
|
{% endif %}
|
|
<li>
|
|
<a href="/rowers/list-courses/?liked=true">Courses I like</a>
|
|
</li>
|
|
<li class="grid_4">
|
|
{% if courses %}
|
|
<p>
|
|
<form enctype="multipart/form-data" method="post">
|
|
{% csrf_token %}
|
|
<input name="courses" type="submit" value="Download selected courses">
|
|
Click on a column header to sort the table.
|
|
<table width="100%" class="listtable shortpadded" id="courseTable">
|
|
<thead>
|
|
<tr>
|
|
<th> Download</th>
|
|
<th onClick="sortTable(1)"> Country</th>
|
|
<th onClick="sortTable(2)"> Name</th>
|
|
<th onClick="sortTable(3)"> Distance</th>
|
|
<th onClick="sortTable(4)"> Updated on</th>
|
|
{% if not user.is_anonymous %}
|
|
<th onClick="sortTable(5)"> Like</th>
|
|
{% endif %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for course in courses %}
|
|
<tr>
|
|
<td> <input type="checkbox" value={{ course.id }} name="courseid"> </td>
|
|
<td> {{ course.country }} </td>
|
|
<td>
|
|
<a href="/rowers/courses/{{ course.id }}/">{{ course.name }}</a>
|
|
</td>
|
|
<td>
|
|
{{ course.distance }} m
|
|
</td>
|
|
<td>
|
|
{{ course.updated|date:"Y-m-d" }}
|
|
</td>
|
|
{% if not user.is_anonymous %}
|
|
<td>
|
|
{% if course in rower.followed_courses.all %}
|
|
<a class="unfollow" href="/rowers/courses/{{ course.id }}/unfollow"><span class="icon"><i class="fas fa-star"></i></span></a>
|
|
{% else %}
|
|
<a class="follow" href="/rowers/courses/{{ course.id }}/follow"><span class="icon"><i class="far fa-star"></i></span></a>
|
|
{% endif %}
|
|
</tr>
|
|
{% endif %}
|
|
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</form>
|
|
</p>
|
|
{% else %}
|
|
<p> No courses found </p>
|
|
{% endif %}
|
|
</li>
|
|
<li>
|
|
<a href="/rowers/courses/upload/">Add Courses</a>
|
|
</li>
|
|
|
|
<li class="grid_4">
|
|
<h2>How-to</h2>
|
|
<p>
|
|
|
|
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.
|
|
There is also a <a href="https://performancephones.com/custom-courses/">written tutorial</a> by CrewNerd.
|
|
</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>
|
|
|
|
<script type='text/javascript'
|
|
src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
|
|
</script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$(document).on('click', 'a.follow', function(event) {
|
|
event.preventDefault();
|
|
var ajaxEndpoint = $(this).attr('href');
|
|
var $ajaxLink = $(this);
|
|
var id = ajaxEndpoint.split('/').slice(-2, -1)[0];
|
|
console.log(id, ajaxEndpoint)
|
|
|
|
$.ajax({
|
|
url: ajaxEndpoint,
|
|
method: 'GET',
|
|
success: function(response) {
|
|
console.log(response);
|
|
$ajaxLink.removeClass('follow').addClass('unfollow');
|
|
$ajaxLink.attr('href', '/rowers/courses/' + id + '/unfollow')
|
|
$ajaxLink.find('i').removeClass('far').removeClass('fa-star').addClass('fas').addClass('fa-star'); // Change star icon to filled
|
|
$ajaxLink.find('.icon i').attr('class', 'fas fa-star');
|
|
$ajaxLink.find('.icon i').html('');
|
|
$ajaxLink.html('<span class="icon"><i class="fas fa-star"></i></span>');
|
|
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error(error);
|
|
}
|
|
|
|
});
|
|
});
|
|
$(document).on('click', 'a.unfollow', function(event) {
|
|
event.preventDefault();
|
|
var ajaxEndpoint = $(this).attr('href');
|
|
var $ajaxLink = $(this);
|
|
var id = ajaxEndpoint.split('/').slice(-2, -1)[0];
|
|
console.log(id, ajaxEndpoint)
|
|
|
|
$.ajax({
|
|
url: ajaxEndpoint,
|
|
method: 'GET',
|
|
success: function(response) {
|
|
console.log(response);
|
|
$ajaxLink.removeClass('unfollow').addClass('follow');
|
|
$ajaxLink.attr('href', '/rowers/courses/' + id + '/follow')
|
|
$ajaxLink.find('i').removeClass('fas').removeClass('fa-star').addClass('far').addClass('fa-star'); // Change star icon to outline
|
|
$ajaxLink.find('.icon i').attr('class', 'far fa-star');
|
|
$ajaxLink.find('.icon i').html('');
|
|
$ajaxLink.html('<span class="icon"><i class="far fa-star"></i></span>');
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error(error);
|
|
}
|
|
|
|
});
|
|
});
|
|
|
|
|
|
});
|
|
</script>
|
|
<script>
|
|
var ascending = true;
|
|
|
|
function sortTable(col) {
|
|
var table, rows, switching, i, x, y, shouldSwitch;
|
|
table = document.getElementById("courseTable");
|
|
switching = true;
|
|
while (switching) {
|
|
switching = false;
|
|
rows = table.rows;
|
|
for (i = 1; i < (rows.length - 1); i++) {
|
|
shouldSwitch = false;
|
|
x = rows[i].getElementsByTagName("td")[col];
|
|
y = rows[i + 1].getElementsByTagName("td")[col];
|
|
if (ascending) {
|
|
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
|
|
shouldSwitch = true;
|
|
break;
|
|
}
|
|
} else {
|
|
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
|
|
shouldSwitch = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if (shouldSwitch) {
|
|
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
|
|
switching = true;
|
|
}
|
|
}
|
|
ascending = !ascending; // Reverse the sorting order
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block sidebar %}
|
|
{% include 'menu_racing.html' %}
|
|
{% endblock %}
|