Create page to add a new announcement

WidgetFEKK/Announcements/forms.py

+from django import forms
+from django.forms import Textarea
+from .models import Announcement
+
+class AnnouncementForm(forms.ModelForm):
+    class Meta:
+        model = Announcement
+        fields = ['announcement_title', 'author', 'announcement_body', 'announcement_image']
+        widgets={
+            'announcement_body': Textarea(attrs={'cols':50, 'rows': 10}),
+        }
\ No newline at end of file

WidgetFEKK/Announcements/migrations/0003_announcement_announcement_image.py

+# Generated by Django 4.0.3 on 2022-05-22 06:03
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Announcements', '0002_announcement_author_reaction'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='announcement',
+            name='announcement_image',
+            field=models.ImageField(blank=True, null=True, upload_to='announcements/images/pub_date'),
+        ),
+    ]

WidgetFEKK/Announcements/models.py

+import os
 from django.db import models
 from Homepage.models import WidgetUser
 
+def image(request, filename):
+    return os.path.join("uploads/", filename)
+
 class Announcement(models.Model):
     announcement_title = models.CharField(max_length=100)
     announcement_body = models.CharField(max_length=500)
     pub_date = models.DateTimeField("Date published", auto_now_add=True)
     author = models.ForeignKey(WidgetUser, on_delete=models.CASCADE, default=1)
+    
+    announcement_image = models.ImageField(upload_to=image, null=True, blank=True)
 
     def __str__(self):
         return self.announcement_title

WidgetFEKK/Announcements/static/Announcements/styles.css

@@ -30,6 +30,56 @@ h1{
     border-radius: 5px;
 }
 
+.form{
+    display: grid;
+    grid-template-columns: 150px auto 150px;
+    column-gap: 0.5rem;
+    row-gap: 0.5rem;
+}
+
+.form-items{
+    display: grid;
+    align-items: end;
+    justify-content:space-evenly;
+}
+
+.form-items p{
+    font-weight:bold;
+}
+
+.form-items > p:first-of-type{
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.form-items > p:nth-of-type(2){
+    grid-column: 2;
+    grid-row: 1;
+}
+
+.form-items > p:nth-of-type(3){
+    grid-column: 1;
+    grid-row: 2/3;
+}
+
+.form-items > p:nth-of-type(4){
+    grid-column: 2;
+    grid-row: 2;
+}
+
+.submit-button{
+    background-color:gainsboro;
+    padding: 5px;
+    width: fit-content;
+    border-radius: 5px;
+    border-color:darkgray;
+    text-align: center;
+}
+
+.submit-button:hover{
+    color:red;
+}
+
 li{
     color: black;
 }

WidgetFEKK/Announcements/templates/announcements/add.html

+{% extends "base.html" %}
+{% load static %}
+
+{% block styles %}
+<link rel="stylesheet" type="text/css" href="{% static 'Announcements/styles.css' %}">
+{% endblock %}
+
+{% block title %}Widget's Announcement Board{% endblock %}
+
+{% block content %}
+<main>
+    <div id="back"><a href="/announcements">Back to all announcements</a></div>
+    <h1>New Announcement</h1>
+
+    <form method="post" enctype="multipart/form-data">
+        <div class="form-items">
+            {% csrf_token %}
+            {{ form.as_p }}
+            <input class="submit-button" type="submit" value="Save Announcement">
+        </div>
+        
+    </form>
+    </div>
+</main>
+{% endblock %}
\ No newline at end of file

WidgetFEKK/Announcements/templates/announcements/details.html

@@ -13,7 +13,11 @@
 <article>
     <div id="back"><a href="/announcements">Back to all announcements</a></div>
     <div align="center"><img id="header" src="{% static 'Announcements/header.png' %}" alt="a header"></div>
-    <h1 id="title">{{ announcement.announcement_title}}</h1>
+    
+    {% if announcement.announcement_image %}
+        <div align="center"><img id="announcement-image" src="{{ MEDIA_DIR }}/uploads/{{ announcement.announcement_image }}"></div>
+    {% endif %}
+        <h1 id="title">{{ announcement.announcement_title}}</h1>
     <h4 id="subtitle">by {{ announcement.author.first_name}} {{ announcement.author.last_name }}, {{ announcement.pub_date|date:"d/m/Y" }}</h4>
 
     <p class="body">{{ announcement.announcement_body }}</p>

WidgetFEKK/Announcements/templates/announcements/index.html

@@ -9,13 +9,14 @@
 
 {% block content %}
 <main>
-    <h1>Announcement Board</h1>
-    <h3>Important Announcements:</h3>
+    <h1 id="title">Announcement Board</h1>
+    <h3 id="subtitle">Important Announcements:</h3>
         <ul class="announcements"></ul>
         {% for announcement in announcement_sorted %}
         <li> <a href="/announcements/{{ announcement.pk }}/details"><strong>{{ announcement.announcement_title }}</strong> by <strong>{{ announcement.author.first_name }} {{ announcement.author.last_name }}</strong> dated <strong>{{ announcement.pub_date|date:"d/m/Y" }}</strong></a>
         </li>
         {% endfor %}
     </ul>
+    <p><a href="/announcements/add"><strong>+ New Announcement</strong></a></p>
 </main>
 {% endblock %}
\ No newline at end of file

WidgetFEKK/Announcements/urls.py

@@ -5,4 +5,4 @@ urlpatterns = [
     path('', views.index, name='index')
 ]
 
-app_name='Announcements'
+app_name = 'Announcements'
\ No newline at end of file

WidgetFEKK/Announcements/views.py

-from django.shortcuts import render
+from django.shortcuts import render, redirect
 from django.http import Http404, HttpResponse
+from django.views import View
+from .forms import AnnouncementForm
 from .models import Announcement, Reaction
 
 def date_month_year(timestamp):
@@ -13,4 +15,15 @@ def details(request, announcement_id):
         announcement = Announcement.objects.get(pk=announcement_id)
     except Announcement.DoesNotExist:
         raise Http404('Announcement does not exist')
-    return render (request, 'announcements/details.html', {'announcement': announcement, 'reaction_sorted': announcement.reaction_set.order_by('tally')})
+    return render (request, 'announcements/details.html', {'announcement': announcement, 'reaction_sorted': announcement.reaction_set.order_by('tally')})
\ No newline at end of file
+
+class AddAnnouncementView(View):
+    def get(self, request):
+        return render(request, 'announcements/add.html', {'form': AnnouncementForm()})
+    
+    def post(self, request):
+        form = AnnouncementForm(request.POST, request.FILES)
+
+        if form.is_valid():
+            new_announcement = form.save()
+            return redirect('/announcements')
\ No newline at end of file

WidgetFEKK/WidgetFEKK/urls.py

@@ -31,6 +31,7 @@ urlpatterns = [
     path('users/<int:user_id>/details', UserPageView.as_view(), name='user-details'),
     path('announcements/', include('Announcements.urls', namespace="Announcements")),
     path('announcements/<int:announcement_id>/details', Announcements_views.details, name='announcement_details'),
+    path('announcements/add', Announcements_views.AddAnnouncementView.as_view(), name='add_announcement'),
     path('assignments/', include('Assignments.urls', namespace="Assignments")),
     path('assignment/<int:pk>/details', AssignmentDetailView.as_view(), name ='assignment-detail'),