Vote feature with AJAX

Author: vagrant

app/Http/Controllers/VotesController.php

@@ -1,6 +1,6 @@
 <?php namespace TeachMe\Http\Controllers;
 
-use TeachMe\Entities\Ticket;
+use Illuminate\Http\Request;
 use TeachMe\Repositories\TicketRepository;
 use TeachMe\Repositories\VoteRepository;
 
@@ -18,18 +18,26 @@ public function __construct(
         $this->voteRepository = $voteRepository;
     }
 
-    public function submit($id)
+    public function submit($id, Request $request)
     {
         $ticket = $this->ticketRepository->findOrFail($id);
-        $this->voteRepository->vote(currentUser(), $ticket);
+        $success = $this->voteRepository->vote(currentUser(), $ticket);
+
+        if ($request->ajax()) {
+            return response()->json(compact('success'));
+        }
 
         return redirect()->back();
 	}
 
-    public function destroy($id)
+    public function destroy($id, Request $request)
     {
         $ticket = $this->ticketRepository->findOrFail($id);
-        $this->voteRepository->unvote(currentUser(), $ticket);
+        $success = $this->voteRepository->unvote(currentUser(), $ticket);
+
+        if ($request->ajax()) {
+            return response()->json(compact('success'));
+        }
 
         return redirect()->back();
     }

app/Repositories/VoteRepository.php

@@ -17,7 +17,10 @@ public function vote(User $user, Ticket $ticket)
 
     public function unvote(User $user, Ticket $ticket)
     {
+        if ( ! $user->hasVoted($ticket)) return false;
+
         $user->voted()->detach($ticket);
+        return true;
     }
 
 }

public/assets/js/app.js

@@ -0,0 +1,26 @@
+$(document).ready(function () {
+
+    $('.btn-vote').click(function (e) {
+        e.preventDefault();
+
+        var form = $('#form-vote');
+
+        var button = $(this);
+        var ticket = button.closest('.ticket');
+        var id = ticket.data('id');
+
+        var action = form.attr('action').replace(':id', id);
+
+        button.addClass('hidden');
+
+        $.post(action, form.serialize(), function (response) {
+            //alert
+            //update count votes
+            ticket.find('.btn-unvote').removeClass('hidden');
+        }).fail(function () {
+            //print error message
+            button.removeClass('hidden');
+        });
+    });
+
+});

resources/views/layout.blade.php

@@ -52,5 +52,6 @@
 <!-- Scripts -->
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
+<script src="{{ asset('assets/js/app.js') }}"></script>
 </body>
 </html>

resources/views/tickets/list.blade.php

@@ -29,4 +29,10 @@
     </div>
 </div>
 
+{!! Form::open(['id' => 'form-vote', 'route' => ['votes.submit', ':id'], 'method' => 'POST']) !!}
+{!! Form::close() !!}
+
+{!! Form::open(['id' => 'form-unvote', 'route' => ['votes.destroy', ':id'], 'method' => 'DELETE']) !!}
+{!! Form::close() !!}
+
 @endsection

resources/views/tickets/partials/item.blade.php

@@ -1,22 +1,26 @@
-<div data-id="25" class="well well-sm request">
+<div data-id="{{ $ticket->id }}" class="well well-sm ticket">
     <h4 class="list-title">
         {{ $ticket->title }}
         @include('tickets/partials/status', compact('ticket'))
     </h4>
+    @if (Auth::check())
     <p>
-        {{--
-        <a href="#" class="btn btn-primary btn-vote" title="Votar por este tutorial">
+        <a href="#"
+           {!! Html::classes(['btn btn-primary btn-vote', 'hidden' => currentUser()->hasVoted($ticket)]) !!}
+           title="Votar por este tutorial">
             <span class="glyphicon glyphicon-thumbs-up"></span> Votar
         </a>
-        <a href="#" class="btn btn-hight btn-unvote hide">
-            <span class="glyphicon glyphicon-thumbs-down"></span> No votar
+        <a href="#"
+           {!! Html::classes(['btn btn-hight btn-unvote', 'hidden' => !currentUser()->hasVoted($ticket)]) !!}
+           title="Quitar el voto a este tutorial">
+            <span class="glyphicon glyphicon-thumbs-down"></span> Quitar voto
         </a>
-        --}}
         <a href="{{ route('tickets.details', $ticket) }}">
             <span class="votes-count">{{ $ticket->num_votes }} votos</span>
             - <span class="comments-count">{{ $ticket->num_comments }} comentarios</span>.
         </a>
     </p>
+    @endif
     <p class="date-t">
         <span class="glyphicon glyphicon-time"></span> {{ $ticket->created_at->format('d/m/y h:ia') }}
         Por {{ $ticket->author->name }}