Merge branch 'develop' into feature/charts-microservice

rowers/templates/courses_challenges.html

@@ -23,6 +23,24 @@
   <li class="grid_4">
     <h1>Courses you might like</h1>
   </li>
+  <li class="grid_4">
+    <p>
+      Whether you routinely row between two landmarks on your river and want to compare
+      times from one day to the other, or like a little competition between
+      rowers in your neighborhood, Rowsandall courses are for you! They are useful for GPS-based timing
+      of your time on the course, and enable easy, informal, timed event on any body of water you like.
+    </p>
+    <p>
+      On Rowsandall, rowers share courses and organize challenges. We're showing you a few on this page,
+      but there are many more to explore. You can also add your own. 
+    </p>
+    <p>
+      These courses are designed to be compatible with
+      <a href="https://performancephones.com/custom-courses/">CrewNerd Custom Courses</a>. You
+      can synchronize the list of liked courses to the CrewNerd app on your phone, so you can get
+      on-the-water indications of your time on the course. 
+    </p>
+  </li>
   <li>
     <p>
       <a href="/rowers/list-courses/">All Courses</a>
@@ -35,6 +53,13 @@
   <a href="/rowers/courses/{{ course.course.id }}/">
   <h2>{{ course.course.name }}</h2>
   </a>
+  <p>
+    {% if course.course in rower.followed_courses.all %}
+    <a class="unfollow" href="/rowers/courses/{{ course.course.id }}/unfollow"><span class="icon"><i class="fas fa-heart"></i></span></a>
+    {% else %}
+    <a class="follow" href="/rowers/courses/{{ course.course.id }}/follow"><span class="icon"><i class="far fa-heart"></i></span></a>
+    {% endif %}
+  </p>
   <p>{{ course.course.country }}</p>
   <p>{{ course.course.distance }}m</p>
   <div class="mapdiv" id="{{ course.course.id }}">
@@ -100,6 +125,68 @@
 
 </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-heart').addClass('fas').addClass('fa-heart'); // Change star icon to filled
+		  $ajaxLink.find('.icon i').attr('class', 'fas fa-heart');
+		  $ajaxLink.find('.icon i').html('');
+		  $ajaxLink.html('<span class="icon"><i class="fas fa-heart"></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-heart').addClass('far').addClass('fa-heart'); // Change star icon to outline
+		  $ajaxLink.find('.icon i').attr('class', 'far fa-heart');
+		  $ajaxLink.find('.icon i').html('');
+		  $ajaxLink.html('<span class="icon"><i class="far fa-heart"></i></span>');
+	      },
+	      error: function(xhr, status, error) {
+		  console.error(error);
+	      }
+	      
+	  });
+      });
+
+      
+  });
+  </script>
+
+
 {% endblock %}
 
 {% block sidebar %}

rowers/templates/list_courses.html

@@ -92,9 +92,9 @@
 	      {% 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>
+		<a class="unfollow" href="/rowers/courses/{{ course.id }}/unfollow"><span class="icon"><i class="fas fa-heart"></i></span></a>
 		{% else %}
-		<a class="follow" href="/rowers/courses/{{ course.id }}/follow"><span class="icon"><i class="far fa-star"></i></span></a>
+		<a class="follow" href="/rowers/courses/{{ course.id }}/follow"><span class="icon"><i class="far fa-heart"></i></span></a>
 		{% endif %}
             </tr>
 	    {% endif %}
@@ -178,10 +178,10 @@
 		  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('i').removeClass('far').removeClass('fa-heart').addClass('fas').addClass('fa-heart'); // Change star icon to filled
+		  $ajaxLink.find('.icon i').attr('class', 'fas fa-heart');
 		  $ajaxLink.find('.icon i').html('');
-		  $ajaxLink.html('<span class="icon"><i class="fas fa-star"></i></span>');
+		  $ajaxLink.html('<span class="icon"><i class="fas fa-heart"></i></span>');
 
 	      },
 	      error: function(xhr, status, error) {
@@ -204,10 +204,10 @@
 		  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('i').removeClass('fas').removeClass('fa-heart').addClass('far').addClass('fa-heart'); // Change star icon to outline
+		  $ajaxLink.find('.icon i').attr('class', 'far fa-heart');
 		  $ajaxLink.find('.icon i').html('');
-		  $ajaxLink.html('<span class="icon"><i class="far fa-star"></i></span>');
+		  $ajaxLink.html('<span class="icon"><i class="far fa-heart"></i></span>');
 	      },
 	      error: function(xhr, status, error) {
 		  console.error(error);