⚡ toggle favorite

bongudth · Jun 19, 2022 · d666ce7 · d666ce7
1 parent 20ca802
commit d666ce7
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 8 deletions.
diff --git a/books/views.py b/books/views.py
@@ -19,7 +19,12 @@ def book_all(request):
 
 def book_detail(request, slug):
     book = get_object_or_404(Book, slug=slug)
-    return render(request, 'library/books/detail.html', {'book': book})
+    is_favourite = book.favourite.filter(id=request.user.id).exists()
+    context = {
+        'book': book,
+        'is_favourite': is_favourite,
+    }
+    return render(request, 'library/books/detail.html', context)
 
 
 def book_filter_by_category(request, slug):
@@ -50,7 +55,12 @@ def favourite_add(request):
         book = get_object_or_404(Book, id=book_id)
         book.favourite.add(request.user)
         favourite_quantity = request.user.favourite_books.all().count()
-        response = JsonResponse({'favourite_quantity': favourite_quantity})
+        is_favourite = book.favourite.filter(id=request.user.id).exists()
+        context = {
+            'favourite_quantity': favourite_quantity,
+            'is_favourite': is_favourite,
+        }
+        response = JsonResponse(context)
         return response
 
 
@@ -60,5 +70,10 @@ def favourite_delete(request):
         book = get_object_or_404(Book, id=book_id)
         book.favourite.remove(request.user)
         favourite_quantity = request.user.favourite_books.all().count()
-        response = JsonResponse({'favourite_quantity': favourite_quantity})
+        is_favourite = book.favourite.filter(id=request.user.id).exists()
+        context = {
+            'favourite_quantity': favourite_quantity,
+            'is_favourite': is_favourite,
+        }
+        response = JsonResponse(context)
         return response
diff --git a/db.sqlite3 b/db.sqlite3
diff --git a/templates/library/books/detail.html b/templates/library/books/detail.html
@@ -22,7 +22,7 @@
                         15px 8px 2px #26282c;
         " />
     <div class="d-flex gap-2" style="position: absolute; top: calc(20% + 440px); left: 15%;">
-        <button id="btn-add-favorite" value="{{ book.id }}" type="button" class="btn btn-outline-light d-flex align-items-center gap-2">
+        <button id="btn-toggle-favourite" value="{{ book.id }}" type="button" class="btn {% if is_favourite %}btn-success{% else %}btn-outline-light{% endif %} d-flex align-items-center gap-2">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-bookmark-star" viewBox="0 0 16 16">
                 <path d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"/>
                 <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>
@@ -49,21 +49,36 @@ <h2 class="display-5 d-flex align-items-start justify-content-start gap-4" style
 </div>
 
 <script>
-    $(document).on('click', '#btn-add-favorite', function(e) {
-        e.preventDefault();
+    var isFavourite = {{ is_favourite|yesno:"true,false" }};
+
+    function toggleFavorite(url) {
         $.ajax({
             type: 'POST',
-            url: '{% url "books:favourite_add" %}',
+            url: url,
             data: {
-                'book_id': $('#btn-add-favorite').val(),
+                'book_id': $('#btn-toggle-favourite').val(),
                 'csrfmiddlewaretoken': '{{ csrf_token }}',
                 action: 'post',
             },
             success: function(json) {
                 document.getElementById('favourite_quantity').innerHTML = json.favourite_quantity;
+                isFavourite = json.is_favourite;
             },
             error: function(xhr, errmsg, err) {},
         })
+    }
+
+    $(document).on('click', '#btn-toggle-favourite', function(e) {
+        e.preventDefault();
+        if (isFavourite) {
+            $('#btn-toggle-favourite').removeClass('btn-success');
+            $('#btn-toggle-favourite').addClass('btn-outline-light');
+            toggleFavorite('{% url "books:favourite_delete" %}')
+        } else {
+            $('#btn-toggle-favourite').removeClass('btn-outline-light');
+            $('#btn-toggle-favourite').addClass('btn-success');
+            toggleFavorite('{% url "books:favourite_add" %}')
+        }
     })
 </script>