sander/rowsandall
Private
Public Access
1
0
Fork 0
Code Activity

Rearranging course list and fixing the javascript

Browse Source
This commit is contained in:
Sander Roosendaal
2024-04-02 20:01:20 +02:00
parent ca94f86e5d
commit 441503a53c
1 changed files with 57 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
rowers/templates/list_courses.html
View File

@@ -18,6 +18,40 @@
<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>
@@ -51,9 +85,9 @@
</td>
<td>
{% if course in rower.followed_courses.all %}
<a class="unfollow" href="/rowers/courses/{{ course.id }}/unfollow"><i class="fas fa-star"></i></a>
<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"><i class="far fa-star"></i></a>
<a class="follow" href="/rowers/courses/{{ course.id }}/follow"><span class="icon"><i class="far fa-star"></i></span></a>
{% endif %}
</tr>
@@ -66,51 +100,13 @@
<p> No courses found </p>
{% endif %}
</li>
<li>
<p>
<form id="searchform" action="/rowers/list-courses/"
method="get" accept-charset="utf-8">
{{ searchform }}
<input type="submit" value="GO"></input>
</form>
</p>
{% if location %}
<p>
<a href="/rowers/list-courses/?nearby=true">Filter courses closest to you</a>
{{ city }} {{ country_name }} {{ time_zone }}
</p>
<p>
<a href="/rowers/list-courses/">All courses</a>
</p>
<p>
<a href="/rowers/list-courses/?liked=true">Courses I like</a>
</p>
{% endif %}
<p>
<li>
<a href="/rowers/courses/upload/">Add Courses</a>
</p>
{% if announcements %}
<h3>What's New?</h3>
{% for a in announcements %}
<div class="site-announcement-box">
<div class="site-announcement">
<i>{{ a.created }}:</i>
{{ a.announcement|urlize }}
</div>
</div>
{% endfor %}
<p>&nbsp;</p>
{% endif %}
</li>
</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
@@ -160,17 +156,25 @@
</script>
<script>
$(document).ready(function() {
$("a.follow").click(function(event) {
$(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.html('<i class="fas fa-star"></i>');
$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);
@@ -178,18 +182,24 @@
});
});
$("a.unfollow").click(function(event) {
$(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.html('<i class="far fa-star"></i>');
$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);