Add paginator

apps/back/consumers.py

@@ -31,7 +31,12 @@ class BlogConsumer(WebsocketConsumer):
 
         # Database
         if template == "partials/blog/all_articles.html":
-            data["posts"] = Post.objects.all()[:5]
+            pag = data['pag'] if 'pag' in data else 1
+            amount = 3
+            start = pag - 1
+            end = start + amount
+            data["posts"] = Post.objects.all()[start:end]
+            data['pag'] = pag
 
         if template == "partials/blog/single.html":
             data["post"] = Post.objects.get(data['id'])

apps/front/templates/layouts/main.html

@@ -26,24 +26,7 @@
                 </ul>
             </nav>
             <main id="main">
-                <div id="articles">
+                {% include 'partials/blog/all_articles.html' %}
-                    {% for post in posts %}
-                    <article>
-                        <h2>{{ post.title }}</h2>
-                        <p>Author: {{ post.author }}</p>
-                        <p><button class="btn">More</button></p>
-                        <hr>
-                    </article>
-                    {% endfor %}
-                </div>
-                <ul class="pagination">
-                      <li class="page-item disabled">
-                            <a href="#" tabindex="-1">Previous</a>
-                      </li>
-                      <li class="page-item">
-                            <a href="#">Next</a>
-                      </li>
-                </ul>
             </main>
         </div>
         <script>
@@ -60,17 +43,10 @@
 
              // Recibir mensaje y dibujar
              document.$CHAT_SOCKET.addEventListener('message', (event) => {
-                 console.log('New HTML');
+                const NEW_DATA = JSON.parse(event.data);
-                 const NEW_DATA = JSON.parse(event.data);
-                 //document.querySelector(NEW_DATA.selector).innerHTML = NEW_DATA.html;
-
-
                 const rangeHTML = document.createRange().createContextualFragment(NEW_DATA.html);
-                 document.querySelector(NEW_DATA.selector).innerHTML = '';
+                document.querySelector(NEW_DATA.selector).innerHTML = '';
-                 document.querySelector(NEW_DATA.selector).appendChild(rangeHTML);
+                document.querySelector(NEW_DATA.selector).appendChild(rangeHTML);
-
-
-                 console.log(rangeHTML)
             });
 
 

apps/front/templates/partials/blog/all_articles.html

@@ -9,16 +9,18 @@
     {% endfor %}
 </div>
 <ul class="pagination">
-      <li class="page-item disabled">
+      <li class="page-item{% if pag == 1 %} disabled{% endif %}">
-            <a href="#" tabindex="-1">Previous</a>
+            <a id="pag-previous" href="#">Previous</a>
       </li>
       <li class="page-item">
-            <a href="#">Next</a>
+            <a id="pag-next" href="#">Next</a>
       </li>
 </ul>
 
 <script>
-    const buttons = document.querySelectorAll('.btn');
+
+    // Open article
+    buttons = document.querySelectorAll('.btn');
 
     buttons.forEach((button) => {
         button.addEventListener('click', event => {
@@ -31,4 +33,34 @@
             }))
         });
     });
-</script>
+
+    // Paginator
+    pagPrevious = document.querySelector('#pag-previous');
+    pagNext = document.querySelector('#pag-next');
+
+    pagPrevious.addEventListener('click', (event) => {
+        event.preventDefault();
+        document.$CHAT_SOCKET.send(JSON.stringify({
+            selector: "#main",
+            template: "partials/blog/all_articles.html",
+            data: {
+                pag: {% if pag > 1 %}{{ pag }} - 1{% else %}1{% endif %}
+            }
+        }))
+    });
+
+
+    pagNext.addEventListener('click', (event) => {
+        event.preventDefault();
+        document.$CHAT_SOCKET.send(JSON.stringify({
+            selector: "#main",
+            template: "partials/blog/all_articles.html",
+            data: {
+                pag: {{ pag }} + 1
+            }
+        }))
+    });
+
+
+
+</script>

apps/front/views.py

@@ -5,5 +5,6 @@ import uuid
 def all_articles(request):
     return render(request, 'layouts/main.html', {
         "CHANNEL": uuid.uuid4().hex[:20].upper(),
-        "posts": Post.objects.all()[:5]
+        "posts": Post.objects.all()[:3],
+        "pag": 1
         })