Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve event lists #154

Merged
merged 2 commits into from
May 27, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .github/workflows/ci.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ jobs:
- name: Install pnpm
uses: pnpm/action-setup@v2
with:
version: 8
version: 9

- name: Set up config files
run: cp config/config.example.toml config/config.toml
Expand Down Expand Up @@ -46,7 +46,7 @@ jobs:
- name: Install pnpm
uses: pnpm/action-setup@v2
with:
version: 8
version: 9

- name: Set up config files
run: cp config/config.example.toml config/config.toml
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/deploy.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ jobs:
- name: Install pnpm
uses: pnpm/action-setup@v2
with:
version: 8
version: 9

- name: Set up known_hosts file
run: |
Expand Down
29 changes: 29 additions & 0 deletions src/lib/event.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { IEventGroup } from "../models/EventGroup.js";

export interface EventListEvent {
id: string;
name: string;
location: string;
displayDate: string;
eventHasConcluded: boolean;
startMoment: moment.Moment;
endMoment: moment.Moment;
eventGroup?: IEventGroup;
}

export const bucketEventsByMonth = (
acc: Record<string, any>[],
event: EventListEvent,
) => {
const month = event.startMoment.format("MMMM YYYY");
const matchingBucket = acc.find((bucket) => bucket.title === month);
if (!matchingBucket) {
acc.push({
title: month,
events: [event],
});
} else {
matchingBucket.events.push(event);
}
return acc;
};
39 changes: 24 additions & 15 deletions src/routes/frontend.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
import MagicLink from "../models/MagicLink.js";
import { getConfigMiddleware } from "../lib/middleware.js";
import { getMessage } from "../util/messages.js";
import { EventListEvent, bucketEventsByMonth } from "../lib/event.js";

const router = Router();

Expand Down Expand Up @@ -89,7 +90,7 @@ router.get("/events", async (_: Request, res: Response) => {
.populate("eventGroup")
.lean()
.sort("start");
const updatedEvents = events.map((event) => {
const updatedEvents: EventListEvent[] = events.map((event) => {
const startMoment = moment.tz(event.start, event.timezone);
const endMoment = moment.tz(event.end, event.timezone);
const isSameDay = startMoment.isSame(endMoment, "day");
Expand All @@ -105,14 +106,16 @@ router.get("/events", async (_: Request, res: Response) => {
)}`,
eventHasConcluded: endMoment.isBefore(moment.tz(event.timezone)),
eventGroup: event.eventGroup as any as IEventGroup,
startMoment,
endMoment,
};
});
const upcomingEvents = updatedEvents.filter(
(event) => event.eventHasConcluded === false,
);
const pastEvents = updatedEvents.filter(
(event) => event.eventHasConcluded === true,
);
const upcomingEventsInMonthBuckets = updatedEvents
.filter((event) => event.eventHasConcluded === false)
.reduce(bucketEventsByMonth, []);
const pastEventsInMonthBuckets = updatedEvents
.filter((event) => event.eventHasConcluded === true)
.reduce(bucketEventsByMonth, []);
const eventGroups = await EventGroup.find({
showOnPublicList: true,
}).lean();
Expand All @@ -130,8 +133,8 @@ router.get("/events", async (_: Request, res: Response) => {

res.render("publicEventList", {
title: "Public events",
upcomingEvents: upcomingEvents,
pastEvents: pastEvents,
upcomingEvents: upcomingEventsInMonthBuckets,
pastEvents: pastEventsInMonthBuckets,
eventGroups: updatedEventGroups,
instanceDescription: instanceDescription(),
instanceRules: instanceRules(),
Expand Down Expand Up @@ -425,7 +428,7 @@ router.get("/group/:eventGroupID", async (req: Request, res: Response) => {
.lean()
.sort("start");

const updatedEvents = events.map((event) => {
const updatedEvents: EventListEvent[] = events.map((event) => {
const startMoment = moment.tz(event.start, event.timezone);
const endMoment = moment.tz(event.end, event.timezone);
const isSameDay = startMoment.isSame(endMoment, "day");
Expand All @@ -442,12 +445,18 @@ router.get("/group/:eventGroupID", async (req: Request, res: Response) => {
eventHasConcluded: endMoment.isBefore(
moment.tz(event.timezone),
),
startMoment,
endMoment,
};
});

const upcomingEventsExist = updatedEvents.some(
(e) => !e.eventHasConcluded,
);
const upcomingEventsInMonthBuckets = updatedEvents
.filter((event) => !event.eventHasConcluded)
.reduce(bucketEventsByMonth, []);

const pastEventsInMonthBuckets = updatedEvents
.filter((event) => event.eventHasConcluded)
.reduce(bucketEventsByMonth, []);

let firstLoad = false;
if (eventGroup.firstLoad === true) {
Expand Down Expand Up @@ -494,8 +503,8 @@ router.get("/group/:eventGroupID", async (req: Request, res: Response) => {
title: eventGroup.name,
eventGroupData: eventGroup,
escapedName: escapedName,
events: updatedEvents,
upcomingEventsExist: upcomingEventsExist,
upcomingEvents: upcomingEventsInMonthBuckets,
pastEvents: pastEventsInMonthBuckets,
parsedDescription: parsedDescription,
editingEnabled: editingEnabled,
eventGroupHasCoverImage: eventGroupHasCoverImage,
Expand Down
41 changes: 16 additions & 25 deletions views/eventgroup.handlebars
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
22 changes: 22 additions & 0 deletions views/partials/eventList.handlebars
Original file line number Diff line number Diff line change
@@ -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>
41 changes: 5 additions & 36 deletions views/publicEventList.handlebars
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -79,4 +48,4 @@
{{/if}}
</div>

</main>
</main>
Loading