Rearranging course list and fixing the javascript

rowers/templates/list_courses.html

@@ -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>
 	    
@@ -67,50 +101,12 @@
     {% 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>
       <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 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 @@
 	      
 	  });
       });
-
+      $(document).on('click', 'a.unfollow', function(event) {
-      $("a.unfollow").click(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);