kfj001/kmtnflower
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

additional files

Browse Source
This commit is contained in:
kfj001
2026-06-19 17:37:19 +00:00
parent 266c2451f1
commit 2d2b2d040b
25 changed files with 709 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/events/events.component.html
+28 -26
View File
@@ -10,35 +10,37 @@
</p>
</div>
@if (loading) {
<div class="schedule-loading">Loading events&hellip;</div>
} @else if (upcomingEvents.length === 0) {
<div class="schedule-empty">No upcoming events — check back later!</div>
} @else {
<div class="events-list">
<div class="event-card" *ngFor="let event of upcomingEvents">
<div class="event-date">
<span class="event-month">{{ event.date | date:'MMM' }}</span>
<span class="event-day">{{ event.date | date:'d' }}</span>
<span class="event-year">{{ event.date | date:'yyyy' }}</span>
</div>
<div class="event-content">
<h3>{{ event.title }}</h3>
<p>{{ event.description }}</p>
<div class="event-meta">
<span class="event-location">
<span aria-hidden="true">&#x1F4CD;</span> {{ event.location }}
</span>
@if (event.rsvp_url) {
<a [href]="event.rsvp_url" class="event-rsvp" target="_blank" rel="noopener">RSVP &rarr;</a>
} @else {
<a href="#" class="event-rsvp">Learn More &rarr;</a>
}
@if (events$ | async; as state) {
@if (state.loading) {
<div class="schedule-loading">Loading events&hellip;</div>
} @else if (state.upcomingEvents.length === 0) {
<div class="schedule-empty">No upcoming events — check back later!</div>
} @else {
<div class="events-list">
<div class="event-card" *ngFor="let event of state.upcomingEvents">
<div class="event-date">
<span class="event-month">{{ event.date | date:'MMM' }}</span>
<span class="event-day">{{ event.date | date:'d' }}</span>
<span class="event-year">{{ event.date | date:'yyyy' }}</span>
</div>
<div class="event-content">
<h3>{{ event.title }}</h3>
<p>{{ event.description }}</p>
<div class="event-meta">
<span class="event-location">
<span aria-hidden="true">&#x1F4CD;</span> {{ event.location }}
</span>
@if (event.rsvp_url) {
<a [href]="event.rsvp_url" class="event-rsvp" target="_blank" rel="noopener">RSVP &rarr;</a>
} @else {
<a href="#" class="event-rsvp">Learn More &rarr;</a>
}
</div>
</div>
<div class="event-icon" aria-hidden="true">{{ event.icon }}</div>
</div>
<div class="event-icon" aria-hidden="true">{{ event.icon }}</div>
</div>
</div>
}
}
</div>
</section>
src/app/events/events.component.ts
+16 -19
View File
@@ -1,32 +1,29 @@
import { Component, inject, OnInit } from '@angular/core';
import { DatePipe, NgFor } from '@angular/common';
import { Component, inject } from '@angular/core';
import { AsyncPipe, DatePipe, NgFor } from '@angular/common';
import { map, Observable, startWith } from 'rxjs';
import { EventService } from '../services/event.service';
import { Event } from '../interfaces/event';
interface EventsState {
loading: boolean;
upcomingEvents: Event[];
}
@Component({
selector: 'app-events',
standalone: true,
imports: [DatePipe, NgFor],
imports: [AsyncPipe, DatePipe, NgFor],
templateUrl: './events.component.html',
styleUrl: './events.component.scss',
})
export class EventsComponent implements OnInit {
export class EventsComponent {
private eventService = inject(EventService);
upcomingEvents: Event[] = [];
loading = true;
ngOnInit(): void {
this.eventService.getEvents(true).subscribe({
next: (data) => {
this.upcomingEvents = data;
this.loading = false;
},
error: () => {
this.loading = false;
this.upcomingEvents = [];
},
});
}
/** Async pipe drives the template — guarantees change detection on every emission. */
readonly events$: Observable<EventsState> =
this.eventService.getEvents(true).pipe(
map((upcomingEvents) => ({ loading: false, upcomingEvents })),
startWith({ loading: true, upcomingEvents: [] }),
);
}