various fixes in the JavaScript functions to mark an article as read/unread and faved/unfaved.

4 files changed, 96 insertions, 16 deletions

diff --git a/newspipe/static/js/articles.js b/newspipe/static/js/articles.js
index 1075a7ef..103074f4 100644
--- a/newspipe/static/js/articles.js
+++ b/newspipe/static/js/articles.js
@@ -22,8 +22,6 @@ API_ROOT = '/api/v2.0/'
 
 
 function change_unread_counter(feed_id, increment) {
-   console.log(document.getElementById("unread-"+feed_id));
-   
     el = document.getElementById("unread-"+feed_id)
     if (el != null) {
       var new_value = parseInt(el.textContent) + increment;
@@ -49,7 +47,7 @@ document.getElementsByClassName('open-article').onclick = function fun() {
 };
 
 
-// Mark an article as read or unread.
+// Mark an article as read or unread from the home page
 var nodes = document.getElementsByClassName('readed');
 Array.prototype.map.call(nodes, function(node) {
     node.onclick = function() {
@@ -103,6 +101,40 @@ Array.prototype.map.call(nodes, function(node) {
 });
 
 
+// Mark an article as read or unread from the article page
+var nodes = document.getElementsByClassName('readed-article-page');
+Array.prototype.map.call(nodes, function(node) {
+    node.onclick = function() {
+      var article_id = node.parentNode.parentNode.parentNode.getAttribute("data-article");
+
+      var data;
+      if (node.classList.contains('fa-square-o')) {
+        data = JSON.stringify({readed: false})
+        node.classList.remove('fa-square-o');
+        node.classList.add('fa-check-square-o');
+      }
+      else {
+        data = JSON.stringify({readed: true})
+        node.classList.remove('fa-check-square-o');
+        node.classList.add('fa-square-o');
+      }
+
+      // sends the updates to the server
+      fetch(API_ROOT + "article/" + article_id, {
+        method: "PUT", 
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: data
+      }).then(res => {
+        console.log("Request complete! response:", res);
+      }).catch((error) => {
+        console.error('Error:', error);
+      });;
+    }
+});
+
+
 
 // Like or unlike an article
 var nodes = document.getElementsByClassName('like');
@@ -110,18 +142,18 @@ Array.prototype.map.call(nodes, function(node) {
     node.onclick = function() {
       var article_id = node.parentNode.parentNode.parentNode.getAttribute('data-article');
       var data;
-      if (node.classList.contains("fa-heart")) {
+      if (node.classList.contains("fa-star")) {
           data = JSON.stringify({like: false});
-          node.classList.remove('fa-heart');
-          node.classList.add('fa-heart-o');
+          node.classList.remove('fa-star');
+          node.classList.add('fa-star-o');
           if(window.location.pathname.indexOf('/favorites') != -1) {
               node.parentNode.parentNode.parentNode.remove();
           }
       }
       else {
           data = JSON.stringify({like: true})
-          node.classList.remove('fa-heart-o');
-          node.classList.add('fa-heart');
+          node.classList.remove('fa-star-o');
+          node.classList.add('fa-star');
       }
 
       // sends the updates to the server
diff --git a/newspipe/templates/article.html b/newspipe/templates/article.html
index 00ec3bde..5eff64e7 100644
--- a/newspipe/templates/article.html
+++ b/newspipe/templates/article.html
@@ -1,7 +1,7 @@
 {% extends "layout.html" %}
 {% block content %}
-<div class="container" data-article="{{ article.id }}">
-    <div class="row">
+<div class="container">
+    <div class="row" data-article="{{ article.id }}" id="filters" data-filter="{{ filter_ }}">
         <div class="col">
             <h2><a href="{{ article.link  }}" target="_blank">{{ article.title|safe }}</a></h2>
             <h3>{{ _('from') }} <a href="/feed/{{ article.source.id }}">{{ article.source.title }}</a></h3>
@@ -12,9 +12,9 @@
                 <a href="#"><i class="fa fa-star-o like" aria-hidden="true" title="{{ _('Click if you like this article') }}"></i></a>
             {% endif %}
             {% if article.readed %}
-                <a href="#"><i class="fa fa-square-o readed" title="{{ _('Mark this article as unread') }}"></i></a>
+                <a href="#"><i class="fa fa-square-o readed-article-page" title="{{ _('Mark this article as unread') }}"></i></a>
             {% else %}
-                <a href="#"><i class="fa fa-check-square-o readed" aria-hidden="true" aria-hidden="true" title="{{ _('Mark this article as read') }}"></i></a>
+                <a href="#"><i class="fa fa-check-square-o readed-article-page" aria-hidden="true" aria-hidden="true" title="{{ _('Mark this article as read') }}"></i></a>
             {% endif %}
             <h6>{{ article.date | datetime }}</h6>
         </div>
diff --git a/newspipe/templates/home.html b/newspipe/templates/home.html
index ce9e39e8..46d96d0f 100644
--- a/newspipe/templates/home.html
+++ b/newspipe/templates/home.html
@@ -125,7 +125,7 @@
                     <a class="nav-link {% if filter_ == 'unread' %}active{% endif %}" href="{{ gen_url(filter_='unread') }}">{{ _('Unread') }}</a>
                 </li>
                 <li id="tab-unread" class="px-5 nav-item">
-                    <a class="nav-link {% if liked %}active{% endif %}" href="{{ gen_url(liked=not liked) }}"><i class="fa fa-heart" aria-hidden="true"></i>&nbsp;{{ _('Liked') }}</a>
+                    <a class="nav-link {% if liked %}active{% endif %}" href="{{ gen_url(liked=not liked) }}"><i class="fa fa-star" aria-hidden="true"></i>&nbsp;{{ _('Liked') }}</a>
                 </li>
                 <li id="tab-nbdisplay" class="px-5 nav-item d-none d-lg-block">
                     <div id="nbdisplay">
@@ -166,9 +166,9 @@
                                     <a href="#"><i class="fa fa-check-square-o readed" aria-hidden="true" title="{{ _('Mark this article as read') }}"></i></a>
                                 {% endif %}
                                 {% if article.like %}
-                                    <a href="#"><i class="fa fa-heart like" aria-hidden="true" title="{{ _('One of your favorites') }}"></i></a>
+                                    <a href="#"><i class="fa fa-star like" aria-hidden="true" title="{{ _('One of your favorites') }}"></i></a>
                                 {% else %}
-                                    <a href="#"><i class="fa fa-heart-o like" aria-hidden="true" title="{{ _('Click if you like this article') }}"></i></a>
+                                    <a href="#"><i class="fa fa-star-o like" aria-hidden="true" title="{{ _('Click if you like this article') }}"></i></a>
                                 {% endif %}
                             </th>
                             {% if not feed_id %}
diff --git a/package-lock.json b/package-lock.json
index 6794a810..9d5ea6db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,8 +1,56 @@
 {
   "name": "newspipe",
   "version": "9.1.0",
-  "lockfileVersion": 1,
+  "lockfileVersion": 2,
   "requires": true,
+  "packages": {
+    "": {
+      "version": "9.1.0",
+      "hasInstallScript": true,
+      "license": "AGPL-3.0",
+      "dependencies": {
+        "@popperjs/core": "^2.9.1",
+        "bootstrap": "^5.0.0-beta3",
+        "bootstrap-select": "^1.14.0-beta2",
+        "fork-awesome": "^1.1.7",
+        "moment": "^2.29.1"
+      },
+      "engines": {
+        "yarn": ">= 1.0.0"
+      }
+    },
+    "node_modules/@popperjs/core": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.1.tgz",
+      "integrity": "sha512-DvJbbn3dUgMxDnJLH+RZQPnXak1h4ZVYQ7CWiFWjQwBFkVajT4rfw2PdpHLTSTwxrYfnoEXkuBiwkDm6tPMQeA=="
+    },
+    "node_modules/bootstrap": {
+      "version": "5.0.0-beta3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0-beta3.tgz",
+      "integrity": "sha512-0urccjfIOzhrb9qJysN8XW/DRw6rg3zH7qLeKIp4Zyl8+Ens4JWB0NC0cB5AhnSFPd2tftRggjwCMxablo6Tpg=="
+    },
+    "node_modules/bootstrap-select": {
+      "version": "1.14.0-beta2",
+      "resolved": "https://registry.npmjs.org/bootstrap-select/-/bootstrap-select-1.14.0-beta2.tgz",
+      "integrity": "sha512-Q63QUbConUwA+/Te7tCJcv0nE3SI/J+rNI5A1mdX1KxP6lW0pFQy+4KVP6VwgZEcwkoPfrwjvAo6WT7fdl+Sdg=="
+    },
+    "node_modules/fork-awesome": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/fork-awesome/-/fork-awesome-1.1.7.tgz",
+      "integrity": "sha512-IHI7XCSXrKfUIWslse8c/PaaVDT1oBaYge+ju40ihL2ooiQeBpTr4wvIXhgTd2NuhntlvX+M5jYHAPTzNlmv0g==",
+      "engines": {
+        "node": ">=0.10.3"
+      }
+    },
+    "node_modules/moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
+      "engines": {
+        "node": "*"
+      }
+    }
+  },
   "dependencies": {
     "@popperjs/core": {
       "version": "2.9.1",