Add form Comments

apps/back/consumers.py

@@ -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)
                 }
             )
-        )
+        )

apps/front/templates/layouts/main.html

@@ -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');

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

@@ -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>

apps/front/views.py

@@ -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
         })

my_demo/settings.py

@@ -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/