Improve event lists

3 files changed, 43 insertions, 61 deletions

diff --git a/views/eventgroup.handlebars b/views/eventgroup.handlebars
index 9658b60..3151aea 100755
--- a/views/eventgroup.handlebars
+++ b/views/eventgroup.handlebars
@@ -109,31 +109,22 @@
   </div>
 {{/if}}
 
-<div class="card mb-4" id="eventDescription">
-    <h5 class="card-header">About</h5>
-  <div class="card-body">
-    {{{parsedDescription}}}
-  </div>
-</div>
-<div class="card mt-4 mb-4" id="upcomingEvents">
-  <h5 class="card-header">Upcoming events</h5>
-  <div class="list-group list-group-flush">
-  {{#if upcomingEventsExist}}
-    {{#each events}}
-      {{#unless this.eventHasConcluded}}
-        <a href="/{{this.id}}" class="list-group-item list-group-item-action">
-          <i class="fas fa-fw fa-calendar-day"></i>
-          <strong>{{this.name}}</strong>
-          {{#if this.location}}<span class="ml-2 text-muted"><i class="fas fa-map-marker-alt"></i> {{this.location}}</span>{{/if}}
-          <span class="ml-2 text-muted">{{this.displayDate}}</span>
-        </a>
-      {{/unless}}
-    {{/each}}
-  {{else}}
-      <div class="list-group-item">No events!</div>
-  {{/if}}
-  </div>
-</div>
+    <div class="card mb-4" id="eventDescription">
+        <h5 class="card-header">About</h5>
+        <div class="card-body">
+            {{{parsedDescription}}}
+        </div>
+    </div>
+
+    <div class="card mt-4 mb-4" id="upcomingEvents">
+        <h5 class="card-header">Upcoming events</h5>
+        {{> eventList upcomingEvents}}
+    </div>
+
+    <div class="card mt-4 mb-4" id="pastEvents">
+        <h5 class="card-header">Past events</h5>
+        {{> eventList pastEvents}}
+    </div>
 </div>
 
 {{#if editingEnabled}}
diff --git a/views/partials/eventList.handlebars b/views/partials/eventList.handlebars
new file mode 100644
index 0000000..6c8e7a4
--- /dev/null
+++ b/views/partials/eventList.handlebars
@@ -0,0 +1,22 @@
+<div class="list-group list-group-flush">
+{{#if this}}
+    {{#each this}}
+        <div class="list-group-item bg-light">
+            <h5 class="mb-0">{{this.title}}</h5>
+        </div>
+        {{#each this.events}}
+            <a href="/{{this.id}}" class="list-group-item list-group-item-action">
+                <i class="fas fa-fw fa-calendar-day"></i>
+                <strong>{{this.name}}</strong>
+                {{#if this.location}}<span class="ml-2 text-muted"><i class="fas fa-map-marker-alt"></i> {{this.location}}</span>{{/if}}
+                <span class="ml-2 text-muted">{{this.displayDate}}</span>
+                {{#if this.eventGroup}}
+                <span class="badge badge-secondary ml-2">{{this.eventGroup.name}}</span>
+                {{/if}}
+            </a>
+        {{/each}}
+    {{/each}}
+{{else}}
+    <div class="list-group-item">No events!</div>
+{{/if}}
+</div>
diff --git a/views/publicEventList.handlebars b/views/publicEventList.handlebars
index 8dccaaa..b8cacd0 100644
--- a/views/publicEventList.handlebars
+++ b/views/publicEventList.handlebars
@@ -21,44 +21,13 @@
 
 <div x-show="currentTab === 'events'">
     <div class="card mt-4 mb-4" id="upcomingEvents">
-    <h5 class="card-header">Upcoming events</h5>
-    <div class="list-group list-group-flush">
-    {{#if upcomingEvents}}
-        {{#each upcomingEvents}}
-        <a href="/{{this.id}}" class="list-group-item list-group-item-action">
-            <i class="fas fa-fw fa-calendar-day"></i>
-            <strong>{{this.name}}</strong>
-            {{#if this.location}}<span class="ml-2 text-muted"><i class="fas fa-map-marker-alt"></i> {{this.location}}</span>{{/if}}
-            <span class="ml-2 text-muted">{{this.displayDate}}</span>
-            {{#if this.eventGroup}}
-            <span class="badge badge-secondary ml-2">{{this.eventGroup.name}}</span>
-            {{/if}}
-        </a>
-        {{/each}}
-    {{else}}
-        <div class="list-group-item">No events!</div>
-    {{/if}}
-    </div>
+        <h5 class="card-header">Upcoming events</h5>
+        {{> eventList upcomingEvents }}
     </div>
 
     <div class="card mt-4 mb-4" id="pastEvents">
-    <h5 class="card-header">Past events</h5>
-    <div class="list-group list-group-flush">
-    {{#if pastEvents}}
-        {{#each pastEvents}}
-        <a href="/{{this.id}}" class="list-group-item list-group-item-action">
-            <i class="fas fa-fw fa-calendar-day"></i>
-            <strong>{{this.name}}</strong>
-            <span class="ml-2 text-muted">{{this.displayDate}}</span>
-            {{#if this.eventGroup}}
-            <span class="badge badge-secondary ml-2">{{this.eventGroup.name}}</span>
-            {{/if}}
-        </a>
-        {{/each}}
-    {{else}}
-        <div class="list-group-item">No events!</div>
-    {{/if}}
-    </div>
+        <h5 class="card-header">Past events</h5>
+        {{> eventList pastEvents }}
     </div>
 </div>
 
@@ -79,4 +48,4 @@
     {{/if}}
 </div>
 
-</main>
\ No newline at end of file
+</main>