From 039778e9a90b234ecb0c98dc06b77ebee17d92e2 Mon Sep 17 00:00:00 2001
From: Andros Fenollosa <andros@fenollosa.email>
Date: Fri, 12 Mar 2021 21:16:23 +0100
Subject: [PATCH] Add paginator

---
 apps/back/consumers.py                        |   7 ++-
 apps/front/templates/layouts/main.html        |  32 ++-----------
 .../templates/partials/blog/all_articles.html |  42 +++++++++++++++---
 apps/front/views.py                           |   3 +-
 db.sqlite3                                    | Bin 757760 -> 757760 bytes
 5 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/apps/back/consumers.py b/apps/back/consumers.py
index b51afdd..7e5366b 100644
--- a/apps/back/consumers.py
+++ b/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'])
diff --git a/apps/front/templates/layouts/main.html b/apps/front/templates/layouts/main.html
index edfd0f6..7490272 100644
--- a/apps/front/templates/layouts/main.html
+++ b/apps/front/templates/layouts/main.html
@@ -26,24 +26,7 @@
                 </ul>
             </nav>
             <main id="main">
-                <div id="articles">
-                    {% 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>
+                {% include 'partials/blog/all_articles.html' %}
             </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);
-                 //document.querySelector(NEW_DATA.selector).innerHTML = NEW_DATA.html;
-
-
+                const NEW_DATA = JSON.parse(event.data);
                 const rangeHTML = document.createRange().createContextualFragment(NEW_DATA.html);
-                 document.querySelector(NEW_DATA.selector).innerHTML = '';
-                 document.querySelector(NEW_DATA.selector).appendChild(rangeHTML);
-
-
-                 console.log(rangeHTML)
+                document.querySelector(NEW_DATA.selector).innerHTML = '';
+                document.querySelector(NEW_DATA.selector).appendChild(rangeHTML);
             });
 
 
diff --git a/apps/front/templates/partials/blog/all_articles.html b/apps/front/templates/partials/blog/all_articles.html
index e58df16..c256e36 100644
--- a/apps/front/templates/partials/blog/all_articles.html
+++ b/apps/front/templates/partials/blog/all_articles.html
@@ -9,16 +9,18 @@
     {% endfor %}
 </div>
 <ul class="pagination">
-      <li class="page-item disabled">
-            <a href="#" tabindex="-1">Previous</a>
+      <li class="page-item{% if pag == 1 %} disabled{% endif %}">
+            <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>
\ No newline at end of file
+
+    // 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>
diff --git a/apps/front/views.py b/apps/front/views.py
index d002238..c19583a 100644
--- a/apps/front/views.py
+++ b/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
         })
diff --git a/db.sqlite3 b/db.sqlite3
index cf30280057d526a6030b029e188f2791252e8553..ca8d398c397d5c51055e47dc5c3ca277d572c2d4 100644
GIT binary patch
delta 139
zcmZozpx3ZKZ-O+V&O{k!MxBibOZb_^xUwg+3urTOWp7qgFz2$d5@Tf$wRTKOOwKki
zFffTvEG@~8H!?6XG%z+aiZ`@0wgho>4UBaSjT8(mt&A<L3@!CcO^wV9%r-BViV$TK
pYcgmvU~DsBYBOMNGhk^mU~MyCYcpVPGvH`5;A}JCT4unV005%4B5(iz

delta 75
zcmZozpx3ZKZ-O+V_Cy(HM(vFWOZb^Zxt3367tr3Us8GtadAU@CD5GeTL7M?%n*mds
f0dt!HOPc{}n*m#!0ehPPN1Fj>n*rA{1MUO>KfDy8