Django custom button counter

Question

I want to have 2 buttons at the bottom of my each post like that:

I need suggestions how could I achieve that. I tried django-vote library, but it does not work for me.

My code:

<--template.html-->
<div class="post-bottom overflow">
   <ul class="nav navbar-nav post-nav">
       <li><a href="#"><i class="fa fa-tag"></i>0 Creative</a></li>
       <li><a href="#"><i class="fa fa-heart"></i>32 Love</a></li>
   </ul>
</div>

_

###**VIEWS.PY**###
class IndexView(generic.ListView):
   template_name = 'web_serv/index.html'
   context_object_name = 'post_list'
   paginate_by = 10

   def get_queryset(self):
       queryset = Post.objects.all()

       if self.request.GET.get('category'):
           queryset = queryset.filter(category=self.request.GET.get('category', ''))
       return queryset

   def get_context_data(self, **kwargs):
       context = super(IndexView, self).get_context_data(**kwargs)
       context['category_list'] = Category.objects.all()
       return context

_

#models.py#
class Post(VoteModel, models.Model):
    title = models.CharField(max_length=200)
    author = models.CharField(max_length=40)
    category = models.ForeignKey(Category)
    picture = ImageWithThumbsField(sizes=((850, 400), (66, 66)))
    content = models.TextField()
    created_date = models.DateTimeField(default=timezone.now)

    class Meta:
        ordering = ['-created_date']

    def __str__(self):
        return self.title + ' - ' + str(self.created_date.date())

Any suggestions are welcome :)

Answer 1

What you are asking is a bit of work, so here's the rough outline. You can duplicate PostLove if you want to add a PostCreative as well.

models.py

class PostLove(models.Model):
    user = models.ManyToManyField(settings.AUTH_USER_MODEL, blank=True, related_name='postlovesAsUser')
    post = models.ForeignKey(Post, on_delete=models.CASCADE, related_name='postlovesAsPost')
    total_loves = models.IntegerField(default=0)

    def __str__(self):
        return '{0}'.format(self.post.title)

views.py

class PostLoveView(View):
    def post(self, request):
        data = {}
        user = request.user

        post_id = int(request.POST['post_id'])
        post = get_object_or_404(Post, id=post_id)

        loved, created = PostLove.objects.get_or_create(post=post)

        user_loved = get_object_or_none(PostLove, user=user, post=post)

        if user_loved:
            loved.user.remove(user)
            PostLove.objects.filter(post=post).update(total_loves=F('total_loves')-1)
            data['success'] = 'unloved'
        else:
            loved.user.add(user)
            PostLove.objects.filter(user=user, post=post).update(total_loves=F('total_loves')+1)
            data['success'] = 'loved'

        return JsonResponse(data)

urls.py

url(r'^post-love/$', views.PostLoveView.as_view(), name='post_love'),

html

<div class="post-bottom overflow">
   <ul class="nav navbar-nav post-nav">
       <li><a href="#"><i class="fa fa-tag"></i>0 Creative</a></li>
       <li><a id="love-button" data-post-id="{{ post.id }}" href="#"><i class="fa fa-heart"></i><span id="love-count">32</span> Love</a></li>
   </ul>
</div>

javascript

$("#love-button").click(function(e) {
  e.preventDefault();

  var $this = $(this),
      postID = $this.data('post-id'),
      $totalLoves = $('#love-count'),
      total = parseInt($totalLoves.html()),;

  $.ajax({
    type: "POST",
    url: "{{ url 'post_love' }}",
    data: {"post_id": postID}
  })
  .done(function(response) {
    alert("Success")

    var is_loved = JSON.parse(response)['success'];

    if (is_loved == "loved") {
        $totalLoves.html(total + 1);
    } else if (is_loved = "unloved") {
        $totalLoves.html(total - 1);
    }

  })
  .fail(function() {
    alert("Failure")
  })
})

You can then migrate your DB to create the new models and you should be done.