andros/html-over-websockets-with-django-and-htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add single page

Browse Source
This commit is contained in:
Andros Fenollosa 2021-11-13 09:07:55 +01:00
parent b8b101b466
commit 209adf66f7
6 changed files with 98 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
TODO
View File

@ -1,3 +1,4 @@
- Single talk.
- Component link with scroll up
- Search
- List profiles
- Chat

37
app/website/consumers.py
View File

@ -1,12 +1,12 @@
import json
from channels.generic.websocket import AsyncWebsocketConsumer
from asgiref.sync import sync_to_async
from .views import page_talks, page_about
from .views import page_talks, page_about, page_single_talk
class WebsiteConsumer(AsyncWebsocketConsumer):
async def connect(self):
'''Connect user'''
"""Connect user"""
self.room_name = self.scope["url_route"]["kwargs"]["room_id"]
self.room_group_name = "root_%s" % self.room_name
@ -22,11 +22,11 @@ class WebsiteConsumer(AsyncWebsocketConsumer):
{
"type": "send_page_talks",
"page": 1,
}
},
)
async def disconnect(self, close_code):
''' Cliente se desconecta '''
"""Cliente se desconecta"""
# Leave room group
await self.channel_layer.group_discard(self.room_group_name, self.channel_name)
@ -45,15 +45,20 @@ class WebsiteConsumer(AsyncWebsocketConsumer):
{
"type": "send_page_talks",
"page": page,
},
)
# Single talk
if data["value"] == "single-talk":
await self.channel_layer.group_send(
self.room_group_name, {
"type": "send_page_single_talk",
"id": data["id"],
}
)
# About
if data["value"] == "about":
await self.channel_layer.group_send(
self.room_group_name,
{
"type": "send_page_about"
}
self.room_group_name, {"type": "send_page_about"}
)
# Pages
@ -62,14 +67,22 @@ class WebsiteConsumer(AsyncWebsocketConsumer):
return page_talks(page=page)
async def send_page_talks(self, event):
''' Send Home page '''
"""Send Home page"""
html = await sync_to_async(self._get_talks)(event["page"])
await self.send(text_data=html)
def _get_single_talk(self, id):
return page_single_talk(id)
async def send_page_single_talk(self, event):
"""Send Single talk page"""
html = await sync_to_async(self._get_single_talk)(event["id"])
await self.send(text_data=html)
def _get_about(self):
return page_about()
async def send_page_about(self, event):
''' Send About page '''
"""Send About page"""
html = await sync_to_async(self._get_about)()
await self.send(text_data=html)
await self.send(text_data=html)

4
app/website/routing.py
View File

@ -3,5 +3,5 @@ from django.urls import re_path
from . import consumers
websocket_urlpatterns = [
re_path(r'ws/pages/(?P<room_id>\w+)/$', consumers.WebsiteConsumer),
]
re_path(r"ws/pages/(?P<room_id>\w+)/$", consumers.WebsiteConsumer),
]

22
app/website/templates/pages/talk-single.html Normal file
View File

@ -0,0 +1,22 @@
<main id="main">
<article>
<header>
<p>
<img width="200" src="{{ talk.image.url }}">
</p>
<h2>{{ talk.title }}</h2>
</header>
<p>
{{ talk.content }}
</p>
<footer>Author {{ talk.author.full_name }} - {{ talk.category.name }}</footer>
</article>
<p>
<form>
<input type="hidden" name="action" value="page">
<input type="hidden" name="value" value="talks">
<input type="hidden" name="page" value="1">
<a href="#" hx-ws="send" hx-trigger="click">Back</a>
</form>
</p>
</main>

37
app/website/templates/pages/talks.html
View File

@ -1,21 +1,26 @@
<main id="main">
{% for talk in talks %}
<a href="#">
<article>
<header>
<div class="grid">
<p>
<img width="200" src="{{ talk.image.url }}">
</p>
<h2>{{ talk.title }}</h2>
</div>
</header>
<p>
{{ talk.content|truncatechars:150 }}
</p>
<footer>Author {{ talk.author.full_name }} - {{ talk.category.name }}</footer>
</article>
</a>
<form>
<input type="hidden" name="action" value="page">
<input type="hidden" name="value" value="single-talk">
<input type="hidden" name="id" value="{{ talk.id }}">
<a href="#" hx-ws="send" hx-trigger="click">
<article>
<header>
<div class="grid">
<p>
<img width="200" src="{{ talk.image.url }}">
</p>
<h2>{{ talk.title }}</h2>
</div>
</header>
<p>
{{ talk.content|truncatechars:150 }}
</p>
<footer>Author {{ talk.author.full_name }} - {{ talk.category.name }}</footer>
</article>
</a>
</form>
{% endfor %}
{# Pagination #}
<div class="loading" >

37
app/website/views.py
View File

@ -8,21 +8,36 @@ from asgiref.sync import sync_to_async
def index(request):
"""Render layout page"""
return render(request, "layouts/base.html", {
"room_random": randint(1000000, 9999999),
"DOMAIN": settings.DOMAIN,
})
return render(
request,
"layouts/base.html",
{
"room_random": randint(1000000, 9999999),
"DOMAIN": settings.DOMAIN,
},
)
def page_talks(page=1):
TALK_PER_PAGE = 5
return render_to_string("pages/talks.html",
{
"talks": Talk.objects.order_by("title")[:TALK_PER_PAGE * page],
"page": page,
"next_page": page + 1,
})
return render_to_string(
"pages/talks.html",
{
"talks": Talk.objects.order_by("title")[: TALK_PER_PAGE * page],
"page": page,
"next_page": page + 1,
},
)
def page_single_talk(id):
return render_to_string(
"pages/talk-single.html",
{
"talk": Talk.objects.get(id=id),
},
)
def page_about():
return render_to_string("pages/about.html", {})
return render_to_string("pages/about.html", {})