enchancement: Added archival meetings display

core/templates/core/index.html

@@ -42,5 +42,4 @@ <h1 class="text-4xl text-white font-bold my-5">Gwardia Hub</h1>
             </div>
         </div>
     </div>
-
 {% endblock %}

gwardia/migrations/0003_rename_nextmeeting_meeting.py

@@ -4,7 +4,6 @@
 
 
 class Migration(migrations.Migration):
-
     dependencies = [
         ('gwardia', '0002_alter_nextmeeting_date_of_meeting'),
     ]

gwardia/migrations/0004_rename_date_of_meeting_nextmeeting_date.py

@@ -0,0 +1,17 @@
+# Generated by Django 5.0.4 on 2024-04-19 12:33
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("gwardia", "0003_rename_nextmeeting_meeting"),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name="meeting",
+            old_name="date_of_meeting",
+            new_name="date",
+        ),
+    ]

gwardia/models.py

@@ -1,10 +1,14 @@
 from django.db import models
+from django.utils import timezone
 
 
 class Meeting(models.Model):
     title = models.CharField(max_length=150)
     description = models.TextField()
-    date_of_meeting = models.DateTimeField("Date of meeting")
+    date = models.DateTimeField("Date of meeting")
+
+    def is_archival(self):
+        return self.date < timezone.now()
 
     def __str__(self):
         return f"{self.title} - {self.description:<50}"

gwardia/templates/gwardia/index.html

@@ -2,27 +2,30 @@
 
 {% block title %}Panel Gwardii{% endblock %}
 
+{% load list_events %}
+
 {% block content %}
     <div class="flex flex-col items-center">
         <h1 class="text-4xl text-white font-bold mt-16 mb-8">Panel Gwardii! WIP!</h1>
         <p class="italic text-xs text-gray-500 mb-2">Kliknij w dane spotkanie, by wyświetlić jego opis</p>
-        <ul class="w-1/2" id="js-next-meetings-container">
-            {% for meeting in upcoming_five_meetings %}
-                <li class="js-meeting-container flex flex-col items-center border-solid border-gray-500 border-2 p-5 w-full mb-1 rounded-2xl cursor-pointer">
-                    <p class="w-full">
-                        <span class="break-all">{{ meeting.title }}</span>
-                        <span class="float-right">{{ meeting.date_of_meeting }}</span>
-                    </p>
-                    <p class="js-meeting-description border-gray-500 p-5 w-full break-all border-t-2 hidden">
-                        {{ meeting.description|linebreaksbr }}
-                    </p>
-                </li>
-            {% endfor %}
-        </ul>
+        <div  class="w-3/4" id="js-next-meetings-container">
+            {% list_events upcoming_meetings "Nadchodzące" %}
+        </div>
+        <div class="w-3/4 hidden" id="js-archival-meetings-container">
+            {% list_events archival_meetings "Archiwalne" %}
+        </div>
+        <button class="text-bold border-2 border-solid p-2 rounded-lg mt-8 border-gray-500" id="js-archival-meetings-toggle-button">
+            Pokaż spotkania archiwalne
+        </button>
     </div>
     <script>
-        nextMeetingsContainer = document.getElementById('js-next-meetings-container');
+        const nextMeetingsContainer = document.getElementById('js-next-meetings-container').lastElementChild;
         nextMeetingsContainer.addEventListener('click', (event) => displayDescription(event.target));
+        const archivalMeetingsContainer = document.getElementById('js-archival-meetings-container');
+        archivalMeetingsContainer.addEventListener('click', (event) => displayDescription(event.target));
+        const archivalMeetingsToggleButton = document.getElementById('js-archival-meetings-toggle-button');
+        archivalMeetingsToggleButton.addEventListener('click', displayArchivalMeetings);
+
         function displayDescription(clickedElement) {
             clickedElement = clickedElement.closest('.js-meeting-container')
             const meetingDescription = clickedElement.lastElementChild;
@@ -36,5 +39,13 @@ <h1 class="text-4xl text-white font-bold mt-16 mb-8">Panel Gwardii! WIP!</h1>
             })
             meetingDescription.classList.toggle('hidden');
         }
+        function displayArchivalMeetings() {
+            archivalMeetingsContainer.classList.toggle('hidden');
+            if (archivalMeetingsContainer.classList.contains('hidden')) {
+                archivalMeetingsToggleButton.innerText = 'Pokaż spotkania archiwalne';
+            } else {
+                archivalMeetingsToggleButton.innerText = 'Ukryj spotkania archiwalne';
+            }
+        }
     </script>
 {% endblock %}

gwardia/templates/gwardia/list_events.html

@@ -0,0 +1,23 @@
+<h2 class="text-2xl text-white text-center font-bold mt-8 mb-4">{{ title }} spotkania</h2>
+<ul>
+    {% if events %}
+        {% for event in events %}
+            <li class="js-meeting-container flex flex-col items-center border-solid border-gray-500 border-2 p-5 w-full mb-1 rounded-2xl cursor-pointer {% if event.is_archival %}bg-orange-500 bg-opacity-25{% endif %}">
+                {% if event.is_archival %}
+                    <p class="text-orange-300 text-right w-full ">Archiwalne</p>
+                {% endif %}
+                <p class="w-full">
+                    <span class="break-words font-bold">{{ event.title }}</span>
+                    <span class="float-right">{{ event.date }}</span>
+                </p>
+                <p class="js-meeting-description border-gray-500 pt-5 w-full break-words border-t-2 hidden">
+                    {{ event.description|linebreaksbr }}
+                </p>
+            </li>
+        {% endfor %}
+    {% else %}
+        <li class="flex flex-col items-center border-solid border-gray-500 border-2 w-full mb-1 rounded-2xl text-center">
+            Brak spotkań!
+        </li>
+    {% endif %}
+</ul>

gwardia/templatetags/list_events.py

@@ -0,0 +1,8 @@
+from django import template
+
+register = template.Library()
+
+
+@register.inclusion_tag("gwardia/list_events.html")
+def list_events(events, title):
+    return {"events": events, "title": title}

gwardia/views.py

@@ -5,6 +5,14 @@
 
 
 def index(request):
-    upcoming_meetings = Meeting.objects.filter(date_of_meeting__gte=timezone.now()).order_by("date_of_meeting")
-    context = {"upcoming_five_meetings": upcoming_meetings[:5]}
+    upcoming_meetings = Meeting.objects.filter(date__gte=timezone.now()).order_by(
+        "-date"
+    )
+    archival_meetings = Meeting.objects.filter(date__lt=timezone.now()).order_by(
+        "-date"
+    )
+    context = {
+        "upcoming_meetings": upcoming_meetings,
+        "archival_meetings": archival_meetings,
+    }
     return render(request, "gwardia/index.html", context)

static/GwardiaHub/tailwind_custom_styles.js

@@ -0,0 +1,11 @@
+// Used for custom styles in templates
+
+tailwind.config = {
+      theme: {
+        extend: {
+          borderWidth: {
+            '12': '12px',
+          },
+        },
+      },
+}