add blog vote

templates/blog/blog.html

@@ -2,10 +2,12 @@
 
 {% block js_media %}
     {% include "comments/media-js.html" %}
+    {% include "blog/media-js.html" %}
 {% endblock %}
 
 {% block media %}
     {% include "comments/media-css.html" %}
+    {% include "blog/media-css.html" %}
 {% endblock %}
 
 {% block title_row %}
@@ -15,8 +17,30 @@
 {% endblock %}
 
 {% block body %}
-    <div class="post-full">
-        <div class="post-title">{{ title }}</div>
+    {% set logged_in = request.user.is_authenticated %}
+    {% set profile = request.profile if logged_in else None %}
+    <div class="post-full"> 
+        <div style="display: flex;">
+            <div class="blog-vote" style="margin-right: 5px;">
+                {% if logged_in %}
+                    <a href="javascript:blog_upvote({{ post.id }})"
+                    class="upvote-link fa fa-chevron-up fa-fw{% if post.vote_score(request.profile) == 1 %} voted{% endif %}"></a>
+                {% else %}
+                    <a href="javascript:alert('{{ _('Please log in to vote')|escapejs }}')" title="{{ _('Please log in to vote') }}"
+                    class="upvote-link fa fa-chevron-up fa-fw"></a>
+                {% endif %}
+                <br>
+                <div class="post-score"> {{ post.score }} </div>
+                {% if logged_in %}
+                    <a href="javascript:blog_downvote({{ post.id }})"
+                    class="downvote-link fa fa-chevron-down fa-fw{% if post.vote_score(request.profile) == -1 %} voted{% endif %}"></a>
+                {% else %}
+                    <a href="javascript:alert('{{ _('Please log in to vote')|escapejs }}')" title="{{ _('Please log in to vote') }}"
+                    class="downvote-link fa fa-chevron-down fa-fw"></a>
+                {% endif %}
+            </div>  
+            <div class="post-title">{{ title }}</div>
+        </div>
         <div class="time">
             {% with authors=post.authors.all() %}
                 {% if authors %}

templates/blog/media-css.html

@@ -27,4 +27,18 @@
     .recently-attempted h4, .recommended-problems h4 {
         font-weight: 500;
     }
+
+    .post-score {
+        text-align: center;
+        font-weight: bold;
+    }
+
+    .upvote-link, .downvote-link {
+        color: black;
+    }
+
+    .voted {
+        text-shadow: 0 0 4px black, 0 0 9px blue;
+    }
+
 </style>

templates/blog/media-js.html

@@ -0,0 +1,54 @@
+<script src="{{ static('libs/featherlight/featherlight.min.js') }}" type="text/javascript"></script>
+{% compress js %}
+    <script type="text/javascript">
+        $(document).ready(function () {
+            function ajax_vote(url, id, delta, on_success) {
+                return $.ajax({
+                    url: url,
+                    type: 'POST',
+                    data: {
+                        id: id
+                    },
+                    success: function (data, textStatus, jqXHR) {
+                        var score = $('.post-full' + ' .post-score').first();
+                        score.text(parseInt(score.text()) + delta);
+                        if (typeof on_success !== 'undefined')
+                            on_success();
+                    },
+                    error: function (data, textStatus, jqXHR) {
+                        alert('Could not vote: ' + data.responseText);
+                    }
+                });
+            }
+
+            var get_$votes = function () {
+                var $post = $('.post-full');
+                return {
+                    upvote: $post.find('.upvote-link').first(),
+                    downvote: $post.find('.downvote-link').first()
+                };
+            };
+
+            window.blog_upvote = function (id) {
+                ajax_vote('{{ url('blog_upvote') }}', id, 1, function () {
+                    var $votes = get_$votes();
+                    if ($votes.downvote.hasClass('voted'))
+                        $votes.downvote.removeClass('voted');
+                    else
+                        $votes.upvote.addClass('voted');
+                });
+            };
+
+            window.blog_downvote = function (id) {
+                ajax_vote('{{ url('blog_downvote') }}', id, -1, function () {
+                    var $votes = get_$votes();
+                    if ($votes.upvote.hasClass('voted'))
+                        $votes.upvote.removeClass('voted');
+                    else
+                        $votes.downvote.addClass('voted');
+                });
+            };
+
+        });
+    </script>
+{% endcompress %}