Merge pull request #42 from codeplaysoftware/add-events-to-changed

Add Events to Changed Page

src/app/pages/calendar/shared/event-calendar/event-calendar.component.ts

@@ -321,6 +321,7 @@ export class EventCalendarComponent implements OnInit, OnDestroy {
   static createPaddingEvents(date: Date, numberToCreate: number): CalendarItemModel[] {
     const paddingEvents = [];
     const paddingEvent = new CalendarItemModel({
+      date: new Date(),
       ends: date,
       starts: date,
       attendees: [],

src/app/pages/changed/changed.component.html

@@ -62,6 +62,38 @@ <h2>We have had {{ updatedNews().length }} new additions since
   </section>
 }
 
+@if (eventLoadingState() != LoadingState.NOT_STARTED) {
+  <!-- Section: Events -->
+  <section id="events">
+    <div class="wrapper panel content">
+      @if (eventLoadingState() == LoadingState.LOAD_SUCCESS) {
+        <header>
+          <div>
+            <div>
+              <h1>Events</h1>
+              <h2>We have had {{ updatedEvents().length }} new additions since
+                {{ startDate() | date: 'mediumDate' }}</h2>
+            </div>
+          </div>
+          <div>
+            @if (updatedEvents().length > 0) {
+              <a class="button" routerLink="./calendar">
+                <span class="material-symbols-outlined">calendar</span>View All</a>
+            }
+          </div>
+        </header>
+        <div class="list">
+          @for (item of updatedEvents(); track item.url) {
+            <st-calendar-item-widget [event]="item" [layout]="CalendarWidgetLayout.WIDGET"></st-calendar-item-widget>
+          }
+        </div>
+      } @else if(newsLoadingState() == LoadingState.LOADING) {
+        <st-loading></st-loading>
+      }
+    </div>
+  </section>
+}
+
 @if (projectsLoadingState() != LoadingState.NOT_STARTED) {
   <!-- Section: Projects -->
   <section id="projects">

src/app/pages/changed/changed.component.scss

@@ -98,6 +98,19 @@ section#intro {
   }
 }
 
+/**
+ * Styling for the events update section.
+ */
+section#events {
+  .list {
+    grid-template-columns: 1fr;
+
+    @media screen and (min-width: 1100px) {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+}
+
 /**
  * Styling for the projects update section.
  */

src/app/pages/changed/changed.component.ts

@@ -27,14 +27,10 @@ import {
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Title } from '@angular/platform-browser';
-import { NewsService } from '../../shared/services/models/news.service';
 import { NewsModel } from '../../shared/models/news.model';
 import { NewsWidgetComponent, NewsWidgetLayout } from '../news/shared/news-widget/news-widget.component';
 import { RouterLink } from '@angular/router';
 import { ProjectModel } from '../../shared/models/project.model';
-import { ProjectService } from '../../shared/services/models/project.service';
-import { VideosService } from '../../shared/services/models/videos.service';
-import { ResearchService } from '../../shared/services/models/research.service';
 import { ResearchModel } from '../../shared/models/research.model';
 import { VideoModel } from '../../shared/models/video.model';
 import {
@@ -53,11 +49,16 @@ import {
 } from '../../shared/components/quick-links/quick-links.component';
 import { PopupService } from '../../shared/components/popup/popup.service';
 import { ChangeStartDateComponent } from './change-start-date-popup/change-start-date.component';
-import { catchError, firstValueFrom, of, tap } from 'rxjs';
+import { catchError, firstValueFrom, Observable, of, tap } from 'rxjs';
 import { LoadingState } from '../../shared/LoadingState';
 import { LoadingComponent } from '../../shared/components/loading/loading.component';
 import { PlatformService } from '../../shared/services/platform.service';
 import { ChangedService } from '../../shared/services/changed.service';
+import { EventModel } from '../../shared/models/event.model';
+import {
+  CalendarWidgetLayout,
+  CalenderWidgetComponent
+} from '../calendar/shared/calendar-item-widget/calender-widget.component';
 
 @Component({
   selector: 'st-changed',
@@ -70,7 +71,8 @@ import { ChangedService } from '../../shared/services/changed.service';
     VideoWidgetComponent,
     ResearchWidgetComponent,
     QuickLinksComponent,
-    LoadingComponent
+    LoadingComponent,
+    CalenderWidgetComponent
   ],
   templateUrl: './changed.component.html',
   styleUrl: './changed.component.scss',
@@ -85,37 +87,31 @@ export class ChangedComponent implements OnInit {
   protected readonly projectsLoadingState: WritableSignal<LoadingState> = signal(LoadingState.NOT_STARTED);
   protected readonly videoLoadingState: WritableSignal<LoadingState> = signal(LoadingState.NOT_STARTED);
   protected readonly researchLoadingState: WritableSignal<LoadingState> = signal(LoadingState.NOT_STARTED);
+  protected readonly eventLoadingState: WritableSignal<LoadingState> = signal(LoadingState.NOT_STARTED);
 
   protected readonly updatedNews: WritableSignal<NewsModel[]> = signal([]);
   protected readonly updatedProjects: WritableSignal<ProjectModel[]> = signal([]);
   protected readonly updatedVideos: WritableSignal<VideoModel[]> = signal([]);
   protected readonly updatedResearch: WritableSignal<ResearchModel[]> = signal([]);
+  protected readonly updatedEvents: WritableSignal<EventModel[]> = signal([]);
 
   protected readonly NewsWidgetLayout = NewsWidgetLayout;
   protected readonly ProjectWidgetLayout = ProjectWidgetLayout;
   protected readonly ResearchWidgetLayout = ResearchWidgetLayout;
   protected readonly LoadingState = LoadingState;
 
   /**
-   * Constructor.
+   * Constructor
    * @param title
    * @param changedService
    * @param platformService
    * @param popupService
-   * @param projectService
-   * @param newsService
-   * @param researchService
-   * @param videosService
    */
   constructor(
     protected title: Title,
     protected changedService: ChangedService,
     protected platformService: PlatformService,
-    protected popupService: PopupService,
-    protected projectService: ProjectService,
-    protected newsService: NewsService,
-    protected researchService : ResearchService,
-    protected videosService: VideosService,
+    protected popupService: PopupService
   ) {
     this.title.setTitle('Digest - SYCL.tech');
 
@@ -183,16 +179,19 @@ export class ChangedComponent implements OnInit {
     }
 
     ChangedComponent.populate(
-      this.projectService, this.projectsLoadingState, this.updatedProjects, startDate);
+      this.changedService.events(startDate), this.eventLoadingState, this.updatedEvents);
+
+    ChangedComponent.populate(
+      this.changedService.news(startDate), this.newsLoadingState, this.updatedNews);
 
     ChangedComponent.populate(
-      this.newsService, this.newsLoadingState, this.updatedNews, startDate);
+      this.changedService.projects(startDate), this.projectsLoadingState, this.updatedProjects);
 
     ChangedComponent.populate(
-      this.researchService, this.researchLoadingState, this.updatedResearch, startDate);
+      this.changedService.research(startDate), this.researchLoadingState, this.updatedResearch);
 
     ChangedComponent.populate(
-      this.videosService, this.videoLoadingState, this.updatedVideos, startDate);
+      this.changedService.videos(startDate), this.videoLoadingState, this.updatedVideos);
 
     // Update the last visit time
     this.changedService.saveLastVisitDate();
@@ -215,19 +214,17 @@ export class ChangedComponent implements OnInit {
 
   /**
    * Populate results from the provided services, updating loading states etc.
-   * @param service
+   * @param observable
    * @param loadingState
    * @param resultSignal
-   * @param startDate
    */
   static populate(
-    service: any,
+    observable: Observable<any>,
     loadingState: WritableSignal<LoadingState>,
-    resultSignal: WritableSignal<any>,
-    startDate: Date
+    resultSignal: WritableSignal<any>
   ) {
     firstValueFrom(
-      service.afterDate(startDate)
+      observable
         .pipe(
           tap(() => loadingState.set(LoadingState.LOAD_SUCCESS)),
           catchError((error) => {
@@ -237,4 +234,6 @@ export class ChangedComponent implements OnInit {
         )
     ).then((items) => resultSignal.set(items))
   }
+
+  protected readonly CalendarWidgetLayout = CalendarWidgetLayout;
 }

src/app/shared/models/event.model.ts

@@ -24,6 +24,7 @@ import { Observable } from 'rxjs';
  */
 export interface EventModel {
   title: string
+  date: Date
   starts: Date
   ends: Date
   url: string

src/app/shared/models/project.model.ts

@@ -24,6 +24,7 @@ import { Observable } from 'rxjs';
  */
 export interface ProjectModel {
   id: string
+  date: Date
   date_created: Date
   year: number
   url: string

src/app/shared/services/changed.service.ts

@@ -18,6 +18,14 @@
 
 import { Injectable } from '@angular/core';
 import { SafeStorageService } from './safe-storage.service';
+import { ProjectService } from './models/project.service';
+import { NewsService } from './models/news.service';
+import { ResearchService } from './models/research.service';
+import { VideosService } from './models/videos.service';
+import { EventService } from './models/event.service';
+import { map, Observable } from 'rxjs';
+import { JsonFeedService } from './json-feed.service';
+import { NewsModel } from '../models/news.model';
 
 @Injectable({
   providedIn: 'root'
@@ -30,11 +38,21 @@ export class ChangedService {
   protected static readonly STORAGE_LAST_VISIT = 'st-last-visit-date';
 
   /**
-   * Constructor.
+   * Constructor
    * @param safeStorageService
+   * @param eventService
+   * @param newsService
+   * @param projectService
+   * @param researchService
+   * @param videosService
    */
   constructor(
-    protected safeStorageService: SafeStorageService
+    protected safeStorageService: SafeStorageService,
+    protected eventService: EventService,
+    protected newsService: NewsService,
+    protected projectService: ProjectService,
+    protected researchService : ResearchService,
+    protected videosService: VideosService,
   ) { }
 
   /**
@@ -60,4 +78,68 @@ export class ChangedService {
       // Do nothing
     }
   }
+
+  /**
+   * Get changed events.
+   * @param startDate
+   * @param limit
+   */
+  events(startDate: Date, limit: number = 50): Observable<NewsModel[]> {
+    return ChangedService.filterByDate(this.eventService, startDate, limit);
+  }
+
+  /**
+   * Get changed news.
+   * @param startDate
+   * @param limit
+   */
+  news(startDate: Date, limit: number = 50): Observable<NewsModel[]> {
+    return ChangedService.filterByDate(this.newsService, startDate, limit);
+  }
+
+  /**
+   * Get changed projects.
+   * @param startDate
+   * @param limit
+   */
+  projects(startDate: Date, limit: number = 50): Observable<NewsModel[]> {
+    return ChangedService.filterByDate(this.projectService, startDate, limit);
+  }
+
+  /**
+   * Get changed research.
+   * @param startDate
+   * @param limit
+   */
+  research(startDate: Date, limit: number = 50): Observable<NewsModel[]> {
+    return ChangedService.filterByDate(this.researchService, startDate, limit);
+  }
+
+  /**
+   * Get changed videos.
+   * @param startDate
+   * @param limit
+   */
+  videos(startDate: Date, limit: number = 50): Observable<NewsModel[]> {
+    return ChangedService.filterByDate(this.videosService, startDate, limit);
+  }
+
+  /**
+   * Filter the service, return items after a specific date.
+   * @param service
+   * @param startDate
+   * @param limit
+   */
+  static filterByDate(
+    service: JsonFeedService,
+    startDate: Date,
+    limit: number
+  ) {
+    return service.all(limit, 0, [])
+      .pipe(
+        map((items) => {
+          return startDate ? items.filter((item) => (item.date >= startDate)) : items;
+        })
+      );
+  }
 }

src/app/shared/services/models/event.service.ts

@@ -23,7 +23,6 @@ import { ContributorService } from './contributor.service';
 import { JsonFeedService } from '../json-feed.service';
 import { FilterGroup } from '../../managers/ResultFilterManager';
 import { map, Observable, of } from 'rxjs';
-import { NewsModel } from '../../models/news.model';
 
 @Injectable({
   providedIn: 'root'
@@ -55,6 +54,7 @@ export class EventService extends JsonFeedService {
     return <EventModel> {
       title: feedItem['title'],
       content: feedItem['content_html'] ?? undefined,
+      date: new Date(feedItem['date_published']),
       starts: new Date(feedItem['_starts']),
       ends: new Date(feedItem['_ends']),
       url: feedItem['external_url'],
@@ -127,21 +127,4 @@ export class EventService extends JsonFeedService {
       })
     );
   }
-
-  /**
-   * Get all event items after a specific date.
-   * @param startDate
-   * @param limit
-   */
-  afterDate(
-    startDate: Date,
-    limit: number | null = null
-  ): Observable<EventModel[]> {
-    return this.all(limit)
-      .pipe(
-        map((items) => {
-          return startDate ? items.filter((item) => (item.starts >= startDate)) : items;
-        })
-      );
-  }
 }