Add ckeditor to post creation page

PlanktonDetector/Community/migrations/0004_alter_post_content.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.7 on 2024-01-06 23:25
+
+import ckeditor.fields
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("Community", "0003_comment_date_added"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="post",
+            name="content",
+            field=ckeditor.fields.RichTextField(blank=True, null=True),
+        ),
+    ]

PlanktonDetector/Community/migrations/0005_alter_comment_date_added_alter_post_date_pub.py

@@ -0,0 +1,22 @@
+# Generated by Django 4.2.7 on 2024-01-07 00:00
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("Community", "0004_alter_post_content"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="comment",
+            name="date_added",
+            field=models.DateTimeField(auto_now_add=True),
+        ),
+        migrations.AlterField(
+            model_name="post",
+            name="date_pub",
+            field=models.DateTimeField(auto_now_add=True),
+        ),
+    ]

PlanktonDetector/Community/models.py

@@ -1,14 +1,15 @@
 from django.db import models
 from django.contrib.auth.models import User
+from ckeditor.fields import RichTextField
 
 # Create your models here.
 
 
 class Post(models.Model):
     title = models.CharField(max_length=500)
-    content = models.TextField()
+    content = RichTextField(null=True, blank=True)
     author = models.ForeignKey(User, on_delete=models.CASCADE, null=False)
-    date_pub = models.DateField(auto_now_add=True)
+    date_pub = models.DateTimeField(auto_now_add=True)
 
     @property
     def sorted_comments(self):
@@ -19,4 +20,4 @@ class Comment(models.Model):
     author = models.ForeignKey(User, on_delete=models.CASCADE, null=False)
     content = models.TextField()
     post = models.ForeignKey(Post, on_delete=models.CASCADE)
-    date_added = models.DateField(auto_now_add=True)
+    date_added = models.DateTimeField(auto_now_add=True)

PlanktonDetector/Community/views.py

@@ -11,7 +11,7 @@ from .froms import PostForm, CommentForm
 class ListPosts(ListView):
     model = Post
     template_name = "list_posts.html"
-    paginate_by = 3
+    paginate_by = 4
 
     def get_queryset(self) -> QuerySet[Any]:
         queryset = Post.objects.all().order_by("-date_pub")

PlanktonDetector/static/Community/css/add_post.css

@@ -5,13 +5,15 @@
     align-items: center;
 }
 
-#add_post p{
+#add_post input{
-    display: flex;
+    margin-bottom: 10px;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
 }
 
+#add_post label{
+    margin-bottom: 10px;
+    font-size: 20px;
+    font-weight: bold;
+}
 
 #submit{
     background-color: chartreuse;
@@ -22,4 +24,5 @@
     color:black;
     font-family: Arial;
     text-align: center;
+    margin-top: 10px;
 }

PlanktonDetector/static/Community/css/list_posts.css

@@ -47,4 +47,5 @@ ul{
     box-shadow: 0 0 0 2px black;
     font-size: 20px;
     font-family: Arial;
+    margin-bottom:10px;
 }

PlanktonDetector/static/Community/css/post_details.css

@@ -12,7 +12,7 @@
     margin-top:10px;
     flex-direction: column;
     justify-content:center;
-    align-items: flex-start;
+    align-items: stretch;
     border: 3px solid lightgray;
     width: 80%;
     padding: 15px;
@@ -30,6 +30,7 @@
     font-size: 40px;
     color: black;
     font-weight: bold;
+    align-self: flex-start;
 }
 
 #content{

PlanktonDetector/templates/add_post.html

@@ -6,7 +6,8 @@
 {%block content%}
 <form method="POST" id="add_post">
     {% csrf_token %}
-    {{ form.as_p }}
+    {{form}}
+    {{form.media}}
     <input type="submit" value="Add post" id="submit">
 </form>
 {%endblock content%}

PlanktonDetector/templates/history.html

@@ -12,7 +12,7 @@
             <div class="history_details">
             <img src="{{detection.images.first.image.url}}" alt="upload_image" style="width:125px; height:125px;">
             <div class="date_author">
-            <p class="date">{{detection.date_predicted.date}}</p>
+            <p class="date">{{detection.date_predicted}}</p>
             <p class="author">{{detection.owner}}</p>
             <p class="num_images">Images uploaded: {{detection.images.all.count}}</p>
             </div>

PlanktonDetector/templates/post_details.html

@@ -8,13 +8,14 @@
     <div class="post">
     <div class="title-content">
         <p id="title">{{object.title}}</p>
-        <p id="content">{{object.content}}</p>
+        <p id="content">{{object.content|safe}}</p>
     </div>
     <div class="author">
         <p id="author">{{object.author}}</p>
     </div>
     </div>
     <p id="comment-label">Comments:</p>
+    {%if user.is_authenticated%}
     <div id="add_comment">
     <form method="POST" id="comment_form">
     {%csrf_token%}
@@ -22,6 +23,7 @@
     <input type="submit" id="submit" value="Add comment">
     </form>
     </div>
+    {%endif%}
     <div class="comments">
         {%for comment in object.sorted_comments%}
     <div class="single-comment">