Add paginator

This commit is contained in:
Andros Fenollosa 2021-03-12 21:16:23 +01:00
parent 901226c700
commit 039778e9a9
5 changed files with 49 additions and 35 deletions

View File

@ -31,7 +31,12 @@ class BlogConsumer(WebsocketConsumer):
# Database # Database
if template == "partials/blog/all_articles.html": 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": if template == "partials/blog/single.html":
data["post"] = Post.objects.get(data['id']) data["post"] = Post.objects.get(data['id'])

View File

@ -26,24 +26,7 @@
</ul> </ul>
</nav> </nav>
<main id="main"> <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> </main>
</div> </div>
<script> <script>
@ -60,17 +43,10 @@
// Recibir mensaje y dibujar // Recibir mensaje y dibujar
document.$CHAT_SOCKET.addEventListener('message', (event) => { 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); 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)
}); });

View File

@ -9,16 +9,18 @@
{% endfor %} {% endfor %}
</div> </div>
<ul class="pagination"> <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>
<li class="page-item"> <li class="page-item">
<a href="#">Next</a> <a id="pag-next" href="#">Next</a>
</li> </li>
</ul> </ul>
<script> <script>
const buttons = document.querySelectorAll('.btn');
// Open article
buttons = document.querySelectorAll('.btn');
buttons.forEach((button) => { buttons.forEach((button) => {
button.addEventListener('click', event => { button.addEventListener('click', event => {
@ -31,4 +33,34 @@
})) }))
}); });
}); });
// 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> </script>

View File

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

Binary file not shown.