Mark an article as read or unread via the REST API.

2 files changed, 41 insertions, 3 deletions

diff --git a/pyaggr3g470r/static/js/articles.js b/pyaggr3g470r/static/js/articles.js
index a4d68419..e62ca360 100644
--- a/pyaggr3g470r/static/js/articles.js
+++ b/pyaggr3g470r/static/js/articles.js
@@ -22,6 +22,42 @@ if (typeof jQuery === 'undefined') { throw new Error('Requires jQuery') }
 
 +function ($) {
 
+    // Mark an article as read or unread.
+    $('.readed').on('click', function() {
+        var article_id = $(this).parent().parent().parent().attr("data-article");
+
+        var data;
+        if ($(this).hasClass("glyphicon-unchecked")) {
+            data = JSON.stringify({
+                readed: false
+                })
+                $(this).removeClass('glyphicon-unchecked').addClass('glyphicon-check');
+        }
+        else {
+            data = JSON.stringify({
+                readed: true
+                })
+            $(this).removeClass('glyphicon-check').addClass('glyphicon-unchecked');
+        }
+
+        // sends the updates to the server
+        $.ajax({
+            type: 'PUT',
+            // Provide correct Content-Type, so that Flask will know how to process it.
+            contentType: 'application/json',
+            // Encode your data as JSON.
+            data: data,
+            // This is the type of data you're expecting back from the server.
+            url: "/api/v1.0/articles/"+article_id,
+            success: function (result) {
+                //console.log(result);
+            },
+            error: function(XMLHttpRequest, textStatus, errorThrown){
+                console.log(XMLHttpRequest.responseText);
+            }
+        });
+    });
+    
     // Like or unlike an article
     $('.like').on('click', function() {
         var article_id = $(this).parent().parent().parent().attr("data-article");
diff --git a/pyaggr3g470r/templates/home.html b/pyaggr3g470r/templates/home.html
index 95fa3b44..4f691a50 100644
--- a/pyaggr3g470r/templates/home.html
+++ b/pyaggr3g470r/templates/home.html
@@ -106,11 +106,13 @@
                                     <i class="glyphicon glyphicon-star-empty like" title="{{ _('Click if you like this article') }}"></i>
                                 {% endif %}
                                 </a>
+                                <a href="#">
                                 {% if article.readed %}
-                                    <a href="/mark_as/unread/article/{{ article.id }}"><i class="glyphicon glyphicon-unchecked" title="{{ _('Mark this article as unread') }}"></i></a>
-                                {% else %}
-                                    <a href="/mark_as/read/article/{{ article.id }}"><i class="glyphicon glyphicon-check" title="{{ _('Mark this article as read') }}"></i></a>
+                                    <i class="glyphicon glyphicon-unchecked readed" title="{{ _('Mark this article as unread') }}"></i>
+                                {% else %}
+                                    <i class="glyphicon glyphicon-check readed" title="{{ _('Mark this article as read') }}"></i>
                                 {% endif %}
+                                </a>
                             </td>
                         </tr>
                     {% endfor %}