allow users to undo a vote

1 files changed, 28 insertions, 10 deletions

diff --git a/templates/index.html b/templates/index.html
index 866b1d3..d04f471 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -20,13 +20,17 @@
                     <form action="/vote" method="post" class="voteform">
                         <input type="hidden" name="id" value="{{ joke.id }}">
                         <input type="hidden" name="redirpage" value="{{ currentpage }}">
-                        <button class="upvotebtn btn{% if joke.reports>0 %}-flat{% endif %}{% if joke.locked %} disabled{% endif %} col s12" type="submit" name="vote" value="upvote"><i class="material-icons">thumb_up</i> <span class="btnval">{{ joke.upvotes }}</span></button>
-                        <button class="downvotebtn btn{% if joke.reports>0 %}-flat{% endif %}{% if joke.locked %} disabled{% endif %} col s12" type="submit" name="vote" value="downvote"><i class="material-icons">thumb_down</i> <span class="btnval">{{ joke.downvotes }}</span></button>
+                        <button class="upvotebtn btn{% if joke.reports>0 %}-flat{% endif %}{% if joke.upvoted %} disabled{% endif %} col s12" type="submit" name="vote" value="upvote">
+                            <i class="material-icons">thumb_up</i> <span class="btnval" data-original="{% if joke.upvoted %}{{ joke.upvotes-1 }}{% else %}{{ joke.upvotes }}{% endif %}">{{ joke.upvotes }}</span>
+                        </button>
+                        <button class="downvotebtn btn{% if joke.reports>0 %}-flat{% endif %}{% if joke.downvoted %} disabled{% endif %} col s12" type="submit" name="vote" value="downvote">
+                            <i class="material-icons">thumb_down</i> <span class="btnval" data-original="{% if joke.downvoted %}{{ joke.downvotes-1 }}{% else %}{{ joke.downvotes }}{% endif %}">{{ joke.downvotes }}</span>
+                        </button>
                     </form>
                     <form action="/report" method="post">
                         <input type="hidden" name="id" value="{{ joke.id }}">
                         <input type="hidden" name="redirpage" value="{{ currentpage }}">
-                        <button class="btn-flat{% if joke.locked %} disabled{% endif %} col s12" type="submit">
+                        <button class="btn-flat col s12{% if joke.reported %} disabled{% endif %}" type="submit">
                             {% if joke.reports>0 %}
                             <div class="row">
                                 <i class="material-icons col s6">report_problem</i>
@@ -79,23 +83,37 @@
     </div>
     <script type="text/javascript">
         $(document).ready(function() {
-            $('.upvotebtn').click(function(e) { submitAjaxer.call(this, e, 'vote', 'upvote'); });
-            $('.downvotebtn').click(function(e) { submitAjaxer.call(this, e, 'vote', 'downvote'); });
+            $('.upvotebtn').click(function(e) { submitAjaxer.call(this, e, 'upvote'); });
+            $('.downvotebtn').click(function(e) { submitAjaxer.call(this, e, 'downvote'); });
 
-            function submitAjaxer(e, name, value) {
+            function submitAjaxer(e, type) {
                 e.preventDefault();
-                if ($(this).hasClass('disabled')) { return; }
                 var form = $(this).closest('form');
                 var joke = $(this).closest('.joke');
                 $.ajax({
                     url: form.attr('action'),
                     type: "POST",
-                    data: form.serialize() + '&' + name + '=' + value,
+                    data: form.serialize() + '&vote=' + type,
                     success: function(data) {
-                        $('button', joke).addClass('disabled');
+                        var upvotebtn = $('.upvotebtn .btnval', form).first();
+                        var downvotebtn = $('.downvotebtn .btnval', form).first();
+                        var upvotes = parseInt(upvotebtn.data('original'));
+                        var downvotes = parseInt(downvotebtn.data('original'));
+                        upvotebtn.text();
+                        downvotebtn.text(downvotebtn.data('original'));
+                        upvotebtn.parent().removeClass('disabled');
+                        downvotebtn.parent().removeClass('disabled');
+                        upvotebtn.text(upvotes);
+                        downvotebtn.text(downvotes);
+                        if (type == "upvote") {
+                            upvotebtn.text(upvotes+1);
+                            upvotebtn.parent().addClass('disabled');
+                        } else if (type == "downvote") {
+                            downvotebtn.text(downvotes+1);
+                            downvotebtn.parent().addClass('disabled');
+                        }
                     }
                 });
-                $('.btnval', $(this)).text(parseInt($('.btnval', $(this)).text())+1);
             }
         });
     </script>