Add form Comments

This commit is contained in:
Andros Fenollosa 2021-03-21 12:53:47 +01:00
parent 29c315501b
commit 3229d7f255
5 changed files with 75 additions and 7 deletions

View File

@ -27,8 +27,26 @@ class BlogConsumer(WebsocketConsumer):
data['pag'] = pag
if template == "partials/blog/single.html":
# Set data
data["post"] = Post.objects.get(pk=data['id'])
data["comments"] = Comment.objects.filter(post__id=data['id']).all()
data["comments"] = Comment.objects.filter(post__id=data['id']).order_by("-created_on").all()
# Add new comment
data["newName"] = data['newName'] if 'newName' in data else ''
data["newMessage"] = data['newMessage'] if 'newMessage' in data else ''
newComment = 'newComment' in data
# Validation
error = (len(data["newName"]) == 0 or len(data["newMessage"]) == 0) and newComment
data["error"] = error
if newComment and not error:
# Insert
Comment(
name=data["newName"],
body=data["newMessage"],
post=Post.objects.get(pk=data['id'])
).save()
# Clean form
data["newName"] = ''
data["newMessage"] = ''
# Send message to WebSocket
self.send(
@ -38,4 +56,4 @@ class BlogConsumer(WebsocketConsumer):
"html": render_to_string(template, data)
}
)
)
)

View File

@ -30,7 +30,7 @@
</main>
</div>
<script>
document.$CHAT_SOCKET = new WebSocket('ws://my-demo.localhost/ws/blog/{{ CHANNEL}}/');
document.$CHAT_SOCKET = new WebSocket('ws://{{ DOMAIN }}/ws/blog/{{ CHANNEL}}/');
document.$CHAT_SOCKET.addEventListener('open', () => {
console.log('Connect');

View File

@ -7,8 +7,29 @@
<section id="comments">
<hr>
<h3>Comments</h3>
{# Form add comment #}
<form>
<div class="form-group">
<label class="form-label" for="new-name">Name</label>
<input class="form-input" type="text" id="new-name" placeholder="Name" value="{{ newName }}">
</div>
<div class="form-group">
<label class="form-label" for="new-message">Message</label>
<textarea class="form-input" id="new-message" placeholder="New message" rows="3">{{ newMessage }}</textarea>
</div>
<button data-id="{{ post.id }}" id="publish" class="btn">Publish</button>
{% if error %}
<div class="toast toast-error">
Fill in all fields
</div>
{% endif %}
</form>
<hr>
{# End Form add comment #}
{# All comment #}
{% for comment in comments %}
<div class="tile">
<article class="tile">
<div class="tile-icon">
<i class="icon icon-file centered"></i>
</div>
@ -16,8 +37,33 @@
<p class="tile-title">{{ comment.name }}</p>
<p class="tile-subtitle">{{ comment.body }}</p>
</div>
</div>
</article>
<hr>
{% endfor %}
{# End All comment #}
</section>
</div>
</div>
<script>
// Open article
newName = document.querySelector('#new-name');
newMessage = document.querySelector('#new-message');
publish = document.querySelector('#publish');
publish.addEventListener('click', (event) => {
event.preventDefault();
document.$CHAT_SOCKET.send(JSON.stringify({
selector: "#main",
template: "partials/blog/single.html",
data: {
id: event.target.dataset.id,
newName: newName.value,
newMessage: newMessage.value,
newComment: true
}
}))
});
</script>

View File

@ -1,3 +1,4 @@
from django.conf import settings
from django.shortcuts import render
from apps.back.models import Post
import uuid
@ -6,5 +7,6 @@ def all_articles(request):
return render(request, 'layouts/main.html', {
"CHANNEL": uuid.uuid4().hex[:20].upper(),
"posts": Post.objects.all()[:3],
"pag": 1
"pag": 1,
"DOMAIN": settings.DOMAIN
})

View File

@ -15,6 +15,8 @@ from pathlib import Path
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
DOMAIN = os.environ.get("DOMAIN", "localhost")
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/