feat: date-fns

.changeset/wicked-cheetahs-prove.md

@@ -0,0 +1,5 @@
+---
+'@openstapps/app': minor
+---
+
+Replace moment.js with date-fns

frontend/app/cypress/integration/ical.spec.ts

@@ -30,14 +30,14 @@ describe('ical', function () {
 
     cy.get('ion-app > ion-modal').within(() => {
       cy.get('ion-footer > ion-toolbar > ion-button').should('have.attr', 'disabled');
-      cy.contains('ion-item', /19\.\s+Januar\s+2059,\s+\d{2}:00\s+-\s+\d{2}:00/).click();
+      cy.contains('ion-item', /1\s+Stunde\s+Sonntag,\s+19\.\s+Januar\s+2059\s+um\s+\d{2}:00/).click();
       cy.get('ion-footer > ion-toolbar > ion-button').should('not.have.attr', 'disabled');
       cy.get('ion-footer > ion-toolbar > ion-button').click();
     });
 
     cy.get('add-event-review-modal').within(() => {
       cy.get('ion-item-group').should('contain', 'UNIcert (Test)');
-      cy.contains('ion-item-group', /19\.\s+Jan\.\s+2059,\s+\d{2}:00/);
+      cy.contains('ion-item-group', /19\.\s+Januar\s+2059\s+um\s+\d{2}:00/);
     });
   });
 });

frontend/app/cypress/integration/schedule.spec.ts

@@ -25,7 +25,7 @@ describe('schedule', function () {
 
   it('should respect the url', function () {
     cy.visit('/schedule/calendar/2022-01-19');
-    cy.get('#date-select-button0').should('contain', '19.01.22');
+    cy.get('#date-select-button0').should('contain', '19.01.2022');
   });
 
   it('should navigate a full page', function () {
@@ -66,13 +66,13 @@ describe('schedule', function () {
 
   it('should navigate to a specific date', function () {
     cy.visit('/schedule/calendar/2059-01-19');
-    cy.contains('#date-select-button0', '19.01.59').click();
+    cy.contains('#date-select-button0', '19.01.2059').click();
     cy.wait(2000);
     cy.get('button[data-day=1][data-month=1][data-year=2059]', {
       includeShadowDom: true,
     }).click();
     cy.wait(2000);
-    cy.contains('#date-select-button0', '01.01.59').click();
+    cy.contains('#date-select-button0', '01.01.2059').click();
   });
 
   // TODO: Reenable and stabilize tests

frontend/app/package.json

@@ -15,7 +15,7 @@
   ],
   "scripts": {
     "analyze": "webpack-bundle-analyzer www/stats.json",
-    "build": "pnpm check-icons && ng build --configuration=production --stats-json && webpack-bundle-analyzer www/stats.json --mode static --report www/bundle-info.html",
+    "build": "pnpm check-icons && ng build --configuration=production --stats-json && webpack-bundle-analyzer --no-open www/stats.json --mode static --report www/bundle-info.html",
     "build:analyze": "npm run build:stats && npm run analyze",
     "build:android": "ionic capacitor build android --no-open && cd android && ./gradlew clean assembleDebug && cd ..",
     "build:prod": "ng build --configuration=production",
@@ -92,7 +92,7 @@
     "capacitor-secure-storage-plugin": "0.8.1",
     "cordova-plugin-calendar": "5.1.6",
     "date-fns": "2.30.0",
-    "ngx-date-fns": "10.0.1",
+    "duration-fns": "3.0.2",
     "deepmerge": "4.3.1",
     "form-data": "4.0.0",
     "geojson": "0.5.0",
@@ -101,10 +101,9 @@
     "leaflet": "1.9.3",
     "leaflet.markercluster": "1.5.3",
     "material-symbols": "0.10.0",
-    "moment": "2.29.4",
+    "ngx-date-fns": "10.0.1",
     "ngx-logger": "5.0.12",
     "ngx-markdown": "16.0.0",
-    "ngx-moment": "6.0.2",
     "opening_hours": "3.8.0",
     "rxjs": "7.8.1",
     "swiper": "8.4.5",

frontend/app/src/app/_helpers/data/resources/test-resources.ts

@@ -14,7 +14,7 @@
  */
 /* eslint-disable */
 
-import moment from 'moment';
+import {addDays, endOfToday, formatISO, startOfToday} from 'date-fns';
 
 export const sampleResources = [
   {
@@ -793,8 +793,8 @@ export const sampleResources = [
       offers: [
         {
           availability: 'in stock',
-          availabilityStarts: moment().startOf('day').add(2, 'days').toISOString(),
+          availabilityStarts: formatISO(addDays(startOfToday(), 2)),
-          availabilityEnds: moment().endOf('day').add(2, 'days').toISOString(),
+          availabilityEnds: formatISO(addDays(endOfToday(), 2)),
           prices: {
             default: 6.5,
             student: 5,
@@ -904,8 +904,8 @@ export const sampleResources = [
       offers: [
         {
           availability: 'in stock',
-          availabilityStarts: moment().startOf('day').toISOString(),
+          availabilityStarts: formatISO(startOfToday()),
-          availabilityEnds: moment().endOf('day').add(2, 'days').toISOString(),
+          availabilityEnds: formatISO(addDays(endOfToday(), 2)),
           prices: {
             default: 4.85,
             student: 2.85,
@@ -984,8 +984,8 @@ export const sampleResources = [
             uid: '3b9b3df6-3a7a-58cc-922f-c7335c002634',
           },
           availability: 'in stock',
-          availabilityStarts: moment().startOf('day').add(2, 'days').toISOString(),
+          availabilityStarts: formatISO(addDays(startOfToday(), 2)),
-          availabilityEnds: moment().endOf('day').add(2, 'days').toISOString(),
+          availabilityEnds: formatISO(addDays(endOfToday(), 2)),
           inPlace: {
             geo: {
               point: {
@@ -1046,8 +1046,8 @@ export const sampleResources = [
       ],
       offers: [
         {
-          availabilityEnds: moment().endOf('day').toISOString(),
+          availabilityEnds: formatISO(endOfToday()),
-          availabilityStarts: moment().startOf('day').toISOString(),
+          availabilityStarts: formatISO(startOfToday()),
           availability: 'in stock',
           inPlace: {
             type: 'room',

frontend/app/src/app/app.module.ts

@@ -21,11 +21,8 @@ import {RouteReuseStrategy} from '@angular/router';
 import {IonicModule, IonicRouteStrategy, Platform} from '@ionic/angular';
 import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core';
 import {TranslateHttpLoader} from '@ngx-translate/http-loader';
-import moment from 'moment';
-import 'moment/min/locales';
 import {LoggerModule, NGXLogger, NgxLoggerLevel} from 'ngx-logger';
 import SwiperCore, {FreeMode, Navigation} from 'swiper';
-
 import {environment} from '../environments/environment';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
@@ -66,7 +63,7 @@ import {NavigationModule} from './modules/menu/navigation/navigation.module';
 import {browserFactory, SimpleBrowser} from './util/browser.factory';
 import {getDateFnsLocale} from './translation/dfns-locale';
 import {setDefaultOptions} from 'date-fns';
-import {DateFnsConfigurationService} from 'ngx-date-fns';
+import {DateFnsConfigurationService, DateFnsModule} from 'ngx-date-fns';
 
 registerLocaleData(localeDe);
 
@@ -104,8 +101,7 @@ export function initializerFactory(
       // this language will be used as a fallback when a translation isn't found in the current language
       translateService.setDefaultLang('en');
       translateService.use(languageCode);
-      moment.locale(languageCode);
+      const dateFnsLocale = await getDateFnsLocale(languageCode as SCLanguageCode, translateService);
-      const dateFnsLocale = await getDateFnsLocale(languageCode as SCLanguageCode);
       setDefaultOptions({locale: dateFnsLocale});
       dateFnsConfigurationService.setLocale(dateFnsLocale);
 
@@ -144,6 +140,7 @@ export function createTranslateLoader(http: HttpClient) {
     ConfigModule,
     DashboardModule,
     DataModule,
+    DateFnsModule.forRoot(),
     HebisModule,
     IonicModule.forRoot(),
     IonIconModule,

frontend/app/src/app/modules/assessments/assessments.module.ts

@@ -12,7 +12,6 @@
  *  You should have received a copy of the GNU General Public License along with
  *  this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
 import {NgModule} from '@angular/core';
 import {AssessmentListItemComponent} from './types/assessment/assessment-list-item.component';
 import {AssessmentBaseInfoComponent} from './types/assessment/assessment-base-info.component';
@@ -27,7 +26,6 @@ import {CourseOfStudyAssessmentComponent} from './types/course-of-study/course-o
 import {AssessmentsPageComponent} from './page/assessments-page.component';
 import {RouterModule} from '@angular/router';
 import {AuthGuardService} from '../auth/auth-guard.service';
-import {MomentModule} from 'ngx-moment';
 import {AssessmentsListItemComponent} from './list/assessments-list-item.component';
 import {AssessmentsDataListComponent} from './list/assessments-data-list.component';
 import {AssessmentsDetailComponent} from './detail/assessments-detail.component';
@@ -37,6 +35,7 @@ import {ProtectedRoutes} from '../auth/protected.routes';
 import {AssessmentsTreeListComponent} from './list/assessments-tree-list.component';
 import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 import {UtilModule} from '../../util/util.module';
+import {FormatPurePipeModule, ParseIsoPipeModule} from 'ngx-date-fns';
 
 const routes: ProtectedRoutes = [
   {
@@ -75,8 +74,9 @@ const routes: ProtectedRoutes = [
     TranslateModule,
     DataModule,
     ThingTranslateModule,
-    MomentModule,
     UtilModule,
+    ParseIsoPipeModule,
+    FormatPurePipeModule,
   ],
   providers: [AssessmentsProvider],
   exports: [],

frontend/app/src/app/modules/assessments/types/assessment/assessment-list-item.html

@@ -14,6 +14,9 @@
   -->
 
 <div class="container">
-  <h2 class="name">{{ 'name' | thingTranslate : item }} {{ item.date ? (item.date | amDateFormat) : '' }}</h2>
+  <h2 class="name">
+    {{ 'name' | thingTranslate : item }} {{ item.date ? (item.date | dfnsParseIso | dfnsFormatPure : 'Pp') :
+    '' }}
+  </h2>
   <assessment-base-info [item]="item"></assessment-base-info>
 </div>

frontend/app/src/app/modules/background/background.module.ts

@@ -12,10 +12,8 @@
  *  You should have received a copy of the GNU General Public License along with
  *  this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
 import {NgModule} from '@angular/core';
 import {ScheduleSyncService} from './schedule/schedule-sync.service';
-import {DateFormatPipe, DurationPipe} from 'ngx-moment';
 import {CalendarModule} from '../calendar/calendar.module';
 import {ScheduleProvider} from '../calendar/schedule.provider';
 import {StorageProvider} from '../storage/storage.provider';
@@ -27,13 +25,6 @@ import {CalendarService} from '../calendar/calendar.service';
 @NgModule({
   declarations: [],
   imports: [CalendarModule],
-  providers: [
+  providers: [ScheduleProvider, StorageProvider, CalendarService, ScheduleSyncService],
-    DurationPipe,
-    DateFormatPipe,
-    ScheduleProvider,
-    StorageProvider,
-    CalendarService,
-    ScheduleSyncService,
-  ],
 })
 export class BackgroundModule {}

frontend/app/src/app/modules/background/schedule/schedule-sync.service.ts

@@ -22,7 +22,6 @@ import {
 import {SCDateSeries, SCThingType, SCUuid} from '@openstapps/core';
 import {LocalNotifications} from '@capacitor/local-notifications';
 import {ThingTranslateService} from '../../../translation/thing-translate.service';
-import {DateFormatPipe, DurationPipe} from 'ngx-moment';
 import {BackgroundFetch} from '@transistorsoft/capacitor-background-fetch';
 import {StorageProvider} from '../../storage/storage.provider';
 import {CalendarService} from '../../calendar/calendar.service';
@@ -46,8 +45,6 @@ export class ScheduleSyncService {
     private scheduleProvider: ScheduleProvider,
     private storageProvider: StorageProvider,
     private translator: ThingTranslateService,
-    private dateFormatPipe: DateFormatPipe,
-    private durationFormatPipe: DurationPipe,
     private calendar: CalendarService,
   ) {}
 
@@ -136,11 +133,7 @@ export class ScheduleSyncService {
       change =>
         `${
           this.translator.translator.translatedPropertyNames<SCDateSeries>(SCThingType.DateSeries)?.[change]
-        }: ${formatRelevantKeys[change](
+        }: ${formatRelevantKeys[change](changes.new[change] as never)}`,
-          changes.new[change] as never,
-          this.dateFormatPipe,
-          this.durationFormatPipe,
-        )}`,
     );
   }
 

frontend/app/src/app/modules/calendar/add-event-review-modal.component.ts

@@ -21,7 +21,6 @@ import {
   toICal,
   toICalUpdates,
 } from './ical/ical';
-import moment from 'moment';
 import {Share} from '@capacitor/share';
 import {Directory, Encoding, Filesystem} from '@capacitor/filesystem';
 import {Device} from '@capacitor/device';
@@ -44,8 +43,6 @@ interface ICalInfo {
   styleUrls: ['add-event-review-modal.scss'],
 })
 export class AddEventReviewModalComponent implements OnInit {
-  moment = moment;
-
   @Input() dismissAction: () => void;
 
   @Input() dateSeries: SCDateSeries[];

frontend/app/src/app/modules/calendar/add-event-review-modal.html

@@ -34,7 +34,7 @@
             <s *ngIf="iCalEvent.cancelled; else date"
               ><ng-container [ngTemplateOutlet]="date"></ng-container>
             </s>
-            <ng-template #date> {{ moment(iCalEvent.start) | amDateFormat : 'll, HH:mm' }} </ng-template>
+            <ng-template #date> {{ iCalEvent.start | dfnsParseIso | dfnsFormatPure : 'PPPp' }} </ng-template>
           </ion-label>
           <ion-note *ngIf="iCalEvent.rrule">
             {{ iCalEvent.rrule.interval }} {{ iCalEvent.rrule.freq | sentencecase }}

frontend/app/src/app/modules/calendar/calendar.module.ts

@@ -12,7 +12,6 @@
  *  You should have received a copy of the GNU General Public License along with
  *  this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
 import {NgModule} from '@angular/core';
 import {AddEventReviewModalComponent} from './add-event-review-modal.component';
 import {Calendar} from '@awesome-cordova-plugins/calendar/ngx';
@@ -23,9 +22,9 @@ import {TranslateModule} from '@ngx-translate/core';
 import {ThingTranslateModule} from '../../translation/thing-translate.module';
 import {FormsModule} from '@angular/forms';
 import {CommonModule} from '@angular/common';
-import {MomentModule} from 'ngx-moment';
 import {UtilModule} from '../../util/util.module';
 import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
+import {FormatPurePipeModule, ParseIsoPipeModule} from 'ngx-date-fns';
 
 @NgModule({
   declarations: [AddEventReviewModalComponent],
@@ -36,8 +35,9 @@ import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
     IonIconModule,
     FormsModule,
     CommonModule,
-    MomentModule,
     UtilModule,
+    ParseIsoPipeModule,
+    FormatPurePipeModule,
   ],
   exports: [],
   providers: [Calendar, CalendarService, ScheduleProvider],

frontend/app/src/app/modules/calendar/calendar.service.ts

@@ -16,17 +16,18 @@
 import {Calendar} from '@awesome-cordova-plugins/calendar/ngx';
 import {Injectable} from '@angular/core';
 import {ICalEvent} from './ical/ical';
-import moment, {duration, Moment, unitOfTime} from 'moment';
 import {Dialog} from '@capacitor/dialog';
 import {CalendarInfo} from './calendar-info';
 import {Subject} from 'rxjs';
 import {ConfigProvider} from '../config/config.provider';
+import {add, differenceInDays, parseISO, startOfToday} from 'date-fns';
+import {parse as parseISODuration} from 'duration-fns';
 
-const RECURRENCE_PATTERNS: Partial<Record<unitOfTime.Diff, string | undefined>> = {
+const RECURRENCE_PATTERNS: Partial<Record<keyof Duration, string | undefined>> = {
-  year: 'yearly',
+  years: 'yearly',
-  month: 'monthly',
+  months: 'monthly',
-  week: 'weekly',
+  weeks: 'weekly',
-  day: 'daily',
+  days: 'daily',
 };
 
 @Injectable()
@@ -85,7 +86,7 @@ export class CalendarService {
         iCalEvent.geo,
         iCalEvent.description,
         new Date(start),
-        moment(start).add(duration(iCalEvent.duration)).toDate(),
+        add(parseISO(start), parseISODuration(iCalEvent.duration!)),
         {
           id: `${iCalEvent.uuid}-${start}`,
           url: iCalEvent.url,
@@ -107,8 +108,8 @@ export class CalendarService {
    * Emit the calendar index corresponding to the input date.
    * @param date Moment - date the calendar should go to
    */
-  emitGoToDate(date: Moment) {
+  emitGoToDate(date: Date) {
-    const index = date.diff(moment().startOf('day'), 'days');
+    const index = differenceInDays(date, startOfToday());
     this.goToDate.next(index);
   }
 }

frontend/app/src/app/modules/calendar/ical/ical.spec.ts

@@ -13,61 +13,59 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {findRRules, RRule} from './ical';
-import moment, {unitOfTime} from 'moment';
 import {SCISO8601Date} from '@openstapps/core';
 import {shuffle} from '@openstapps/collection-utils';
+import {add, addWeeks, formatISO, isEqual, parseISO} from 'date-fns';
+import {normalize} from 'duration-fns';
 
 /**
  *
  */
 function expandRRule(rule: RRule): SCISO8601Date[] {
-  const initial = moment(rule.from);
+  const initial = parseISO(rule.from);
   const interval = rule.interval ?? 1;
+  const dates = [initial];
+  while (!isEqual(dates.at(-1)!, parseISO(rule.until))) {
+    dates.push(add(dates.at(-1)!, normalize({[rule.freq ?? 'days']: interval}, dates.at(-1))));
+  }
 
-  return shuffle(
+  return shuffle(dates.map(date => formatISO(date)));
-    Array.from({
-      length: Math.floor(moment(rule.until).diff(initial, rule.freq, true) / interval) + 1,
-    }).map((_, i) =>
-      initial
-        .clone()
-        .add(interval * i, rule.freq ?? 'day')
-        .toISOString(),
-    ),
-  );
 }
 
 describe('iCal', () => {
-  it('should find simple recurrence patterns', () => {
+  for (const freq of ['days', 'weeks', 'months', 'years'] as const) {
-    for (const freq of ['day', 'week', 'month', 'year'] as unitOfTime.Diff[]) {
+    for (const interval of [1, 2, 3]) {
-      for (const interval of [1, 2, 3]) {
+      it(`should find ${interval} ${freq} recurrence patterns`, () => {
         const pattern: RRule = {
           freq: freq,
           interval: interval,
-          from: moment('2021-09-01T10:00').toISOString(),
+          from: formatISO(parseISO('2021-09-01T10:00Z')),
-          until: moment('2021-09-01T10:00')
+          until: formatISO(
-            .add(4 * interval, freq)
+            add(parseISO('2021-09-01T10:00Z'), normalize({[freq]: 4 * interval}, '2021-09-01')),
-            .toISOString(),
+          ),
         };
 
+        console.log(expandRRule(pattern));
+
         expect(findRRules(expandRRule(pattern))).toEqual([pattern]);
-      }
+      });
     }
-  });
+  }
 
   it('should find missing recurrence patterns', () => {
-    const pattern: SCISO8601Date = moment('2021-09-01T10:00').toISOString();
+    const pattern: SCISO8601Date = formatISO(parseISO('2021-09-01T10:00'));
 
     expect(findRRules([pattern])).toEqual([pattern]);
   });
 
   it('should find mixed recurrence patterns', () => {
-    const singlePattern: SCISO8601Date = moment('2021-09-01T09:00').toISOString();
+    const singlePattern: SCISO8601Date = formatISO(parseISO('2021-09-01T09:00'));
 
     const weeklyPattern: RRule = {
-      freq: 'week',
+      freq: 'weeks',
       interval: 1,
-      from: moment('2021-09-03T10:00').toISOString(),
+      from: formatISO(parseISO('2021-09-03T10:00')),
-      until: moment('2021-09-03T10:00').add(4, 'weeks').toISOString(),
+      until: formatISO(addWeeks(parseISO('2021-09-03T10:00'), 4)),
     };
 
     expect(findRRules(shuffle([singlePattern, ...expandRRule(weeklyPattern)]))).toEqual([

frontend/app/src/app/modules/calendar/ical/ical.ts

@@ -20,8 +20,10 @@ import {
   SCThingWithCategories,
   SCUuid,
 } from '@openstapps/core';
-import moment, {unitOfTime} from 'moment';
 import {minBy, mapValues} from '@openstapps/collection-utils';
+import type {Duration} from 'date-fns';
+import {formatISO, intervalToDuration, parseISO} from 'date-fns';
+import {toUnit} from 'duration-fns';
 
 export interface ICalEvent {
   name?: string;
@@ -55,19 +57,25 @@ export type ICalLike = ICalKeyValuePair[];
 function timeDistance(
   current: SCISO8601Date,
   next: SCISO8601Date | undefined,
-  recurrence: unitOfTime.Diff,
+  recurrence: keyof Duration,
 ): number | undefined {
   if (!next) {
     return undefined;
   }
 
-  const diff = moment(next).diff(moment(current), recurrence, true);
+  const diff = toUnit(
+    intervalToDuration({
+      start: parseISO(next),
+      end: parseISO(current),
+    }),
+    recurrence,
+  );
 
   return Math.floor(diff) === diff ? diff : undefined;
 }
 
 export interface RRule {
-  freq: unitOfTime.Diff; // 'SECONDLY' | 'HOURLY' | 'DAILY' | 'WEEKLY' | 'MONTHLY' | 'YEARLY';
+  freq: keyof Duration;
   interval: number;
   from: SCISO8601Date;
   until: SCISO8601Date;
@@ -97,7 +105,7 @@ export function mergeRRules(rules: Array<RRule | SCISO8601Date>, allowExceptions
  * Find RRules in a list of dates
  */
 export function findRRules(dates: SCISO8601Date[]): Array<RRule | SCISO8601Date> {
-  const sorted = dates.sort((a, b) => moment(a).unix() - moment(b).unix());
+  const sorted = dates.sort();
 
   const output: Optional<RRule, 'freq'>[] = [
     {
@@ -112,7 +120,9 @@ export function findRRules(dates: SCISO8601Date[]): Array<RRule | SCISO8601Date>
     const next = sorted[i + 1] as SCISO8601Date | undefined;
     const element = output.at(-1);
 
-    const units: unitOfTime.Diff[] = element?.freq ? [element.freq] : ['day', 'week', 'month', 'year'];
+    const units: Array<keyof Duration> = element?.freq
+      ? [element.freq]
+      : ['days', 'weeks', 'months', 'years'];
     const freq = minBy(
       units.map(recurrence => ({
         recurrence: recurrence,
@@ -226,14 +236,14 @@ export function toICalUpdates(dateSeries: SCDateSeries, translator: SCThingTrans
 export function iso8601ToICalDateTime<T extends SCISO8601Date | undefined>(
   date: T,
 ): T extends SCISO8601Date ? string : undefined {
-  return (date ? `${moment(date).utc().format('YYYYMMDDTHHmmss')}Z` : undefined) as never;
+  return (date ? formatISO(parseISO(date), {format: 'basic'}) : undefined) as never;
 }
 
 /**
  * Convert an ISO8601 date to a string in the format YYYYMMDD
  */
 export function iso8601ToICalDate(date: SCISO8601Date): string {
-  return `${moment(date).utc().format('YYYYMMDD')}`;
+  return formatISO(parseISO(date), {format: 'basic', representation: 'date'});
 }
 
 /**
@@ -266,11 +276,11 @@ export function normalizeICalDates(iCal: ICalEvent): ICalEvent {
   };
 }
 
-const REPEAT_FREQUENCIES: Partial<Record<unitOfTime.Diff, string>> = {
+const REPEAT_FREQUENCIES: Partial<Record<keyof Duration, string>> = {
-  day: 'DAILY',
+  days: 'DAILY',
-  week: 'WEEKLY',
+  weeks: 'WEEKLY',
-  month: 'MONTHLY',
+  months: 'MONTHLY',
-  year: 'YEARLY',
+  years: 'YEARLY',
 };
 
 /**
@@ -308,7 +318,7 @@ export function serializeICalEvent(iCal: ICalEvent): ICalLike {
     'BEGIN:VEVENT',
     `DTSTART:${normalized.start}`,
     `DURATION:${normalized.duration}`,
-    `DTSTAMP:${moment().utc().format('YYYYMMDDTHHmmss')}Z`,
+    `DTSTAMP:${formatISO(Date.now(), {format: 'basic'})}`,
     `UID:${normalized.uuid}`,
     `RECURRENCE-ID:${normalized.recurrenceId}`,
     `CATEGORIES:${normalized.categories?.join(',')}`,

frontend/app/src/app/modules/calendar/schedule.provider.ts

@@ -26,9 +26,10 @@ import {
 import {BehaviorSubject, Observable} from 'rxjs';
 import {DataProvider} from '../data/data.provider';
 import {map} from 'rxjs/operators';
-import {DateFormatPipe, DurationPipe} from 'ngx-moment';
 import {pick} from '@openstapps/collection-utils';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {format, formatDuration, parseISO} from 'date-fns';
+import {parse as parseISODuration} from 'duration-fns';
 
 /**
  *
@@ -48,17 +49,13 @@ export const dateSeriesRelevantKeys: Array<DateSeriesRelevantKeys> = [
 ];
 
 export const formatRelevantKeys: {
-  [key in DateSeriesRelevantKeys]: (
+  [key in DateSeriesRelevantKeys]: (value: SCDateSeries[key]) => string;
-    value: SCDateSeries[key],
-    dateFormatter: DateFormatPipe,
-    durationFormatter: DurationPipe,
-  ) => string;
 } = {
   uid: value => value,
-  dates: (value, dateFormatter) => `[${value.map(it => dateFormatter.transform(it)).join(', ')}]`,
+  dates: value => `[${value.map(it => format(parseISO(it), 'PPp')).join(', ')}]`,
-  exceptions: (value, dateFormatter) => `[${value?.map(it => dateFormatter.transform(it)).join(', ') ?? ''}]`,
+  exceptions: value => `[${value?.map(it => format(parseISO(it), 'PPp')).join(', ') ?? ''}]`,
-  repeatFrequency: (value, _, durationFormatter) => durationFormatter.transform(value),
+  repeatFrequency: value => (value ? formatDuration(parseISODuration(value)) : ''),
-  duration: (value, _, durationFormatter) => durationFormatter.transform(value),
+  duration: value => formatDuration(parseISODuration(value)),
 };
 
 export type DateSeriesRelevantData = Pick<SCDateSeries, DateSeriesRelevantKeys>;

frontend/app/src/app/modules/catalog/catalog.component.ts

@@ -15,11 +15,11 @@
 import {Component, OnInit} from '@angular/core';
 import {Router, ActivatedRoute} from '@angular/router';
 import {SCCatalog, SCSemester} from '@openstapps/core';
-import moment from 'moment';
 import {CatalogProvider} from './catalog.provider';
 import {NGXLogger} from 'ngx-logger';
 import {Location} from '@angular/common';
 import {DataRoutingService} from '../data/data-routing.service';
+import {formatISO, startOfToday} from 'date-fns';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 @Component({
@@ -98,7 +98,7 @@ export class CatalogComponent implements OnInit {
   }
 
   async fetchSemesters(): Promise<void> {
-    const today = moment().startOf('day').toISOString();
+    const today = formatISO(startOfToday());
     const semesters = await this.catalogProvider.getRelevantSemesters();
     const currentSemester = semesters.find(
       semester => semester.startDate <= today && semester.endDate > today,

frontend/app/src/app/modules/catalog/catalog.module.ts

@@ -18,7 +18,6 @@ import {FormsModule} from '@angular/forms';
 import {RouterModule, Routes} from '@angular/router';
 import {IonicModule} from '@ionic/angular';
 import {TranslateModule} from '@ngx-translate/core';
-import {MomentModule} from 'ngx-moment';
 import {DataModule} from '../data/data.module';
 import {SettingsProvider} from '../settings/settings.provider';
 import {CatalogComponent} from './catalog.component';
@@ -42,7 +41,6 @@ const catalogRoutes: Routes = [
     RouterModule.forChild(catalogRoutes),
     IonIconModule,
     CommonModule,
-    MomentModule,
     DataModule,
     UtilModule,
   ],

frontend/app/src/app/modules/dashboard/dashboard.component.html

@@ -33,7 +33,7 @@
     <ion-label>
       {{
         nextEvent
-          ? (nextEvent!.dates | nextDateInList | amDateFormat : 'll, HH:mm')
+          ? (nextEvent!.dates.sort().at(-1) | dfnsParseIso | dfnsFormatRelativePure : (now | async))
           : ('dashboard.schedule.noEvent' | translate)
       }}
     </ion-label>

frontend/app/src/app/modules/dashboard/dashboard.component.ts

@@ -15,7 +15,7 @@
 import {Component, DestroyRef, ElementRef, inject, NgZone, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {Router} from '@angular/router';
 import {Location} from '@angular/common';
-import moment from 'moment';
+import {timer} from 'rxjs';
 import {SCDateSeries, SCUuid} from '@openstapps/core';
 import {SplashScreen} from '@capacitor/splash-screen';
 import {DataRoutingService} from '../data/data-routing.service';
@@ -24,6 +24,10 @@ import {AnimationController, IonContent} from '@ionic/angular';
 import {DashboardCollapse} from './dashboard-collapse';
 import {BreakpointObserver} from '@angular/cdk/layout';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {formatISO, minutesToMilliseconds, startOfWeek} from 'date-fns';
+import {map} from 'rxjs/operators';
+
+// const scrollTimeline = new ScrollTimeline();
 
 @Component({
   selector: 'app-dashboard',
@@ -63,6 +67,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
 
   destroy$ = inject(DestroyRef);
 
+  now = timer(0, minutesToMilliseconds(1)).pipe(map(() => Date.now()));
+
   constructor(
     private readonly dataRoutingService: DataRoutingService,
     private scheduleProvider: ScheduleProvider,
@@ -108,7 +114,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
     const dataSeries = await this.scheduleProvider.getDateSeries(
       this.eventUuids,
       undefined,
-      moment(moment.now()).startOf('week').toISOString(),
+      formatISO(startOfWeek(Date.now())),
     );
 
     this.nextEvent = dataSeries.dates

frontend/app/src/app/modules/dashboard/dashboard.module.ts

@@ -19,7 +19,6 @@ import {RouterModule, Routes} from '@angular/router';
 import {IonicModule} from '@ionic/angular';
 import {SwiperModule} from 'swiper/angular';
 import {TranslateModule, TranslatePipe} from '@ngx-translate/core';
-import {MomentModule} from 'ngx-moment';
 import {DataModule} from '../data/data.module';
 import {SettingsProvider} from '../settings/settings.provider';
 import {DashboardComponent} from './dashboard.component';
@@ -32,6 +31,7 @@ import {ThingTranslateModule} from '../../translation/thing-translate.module';
 import {UtilModule} from '../../util/util.module';
 import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 import {NewsModule} from '../news/news.module';
+import {FormatRelativePurePipeModule, ParseIsoPipeModule} from 'ngx-date-fns';
 
 const catalogRoutes: Routes = [
   {
@@ -59,12 +59,13 @@ const catalogRoutes: Routes = [
     TranslateModule.forChild(),
     RouterModule.forChild(catalogRoutes),
     CommonModule,
-    MomentModule,
     DataModule,
     SwiperModule,
     ThingTranslateModule.forChild(),
     UtilModule,
     NewsModule,
+    ParseIsoPipeModule,
+    FormatRelativePurePipeModule,
   ],
   providers: [SettingsProvider, TranslatePipe],
 })

frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section-content.component.ts

@@ -15,8 +15,8 @@
 import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {SCDish, SCPlace, SCThings} from '@openstapps/core';
 import {PlaceMensaService} from '../../../data/types/place/special/mensa/place-mensa-service';
-import moment from 'moment';
 import {fadeAnimation} from '../../fade.animation';
+import {isToday, parseISO} from 'date-fns';
 
 /**
  * Shows a section with meals of the chosen mensa
@@ -38,10 +38,10 @@ export class MensaSectionContentComponent {
   @Input() set item(value: SCThings) {
     if (!value) return;
     this.dishes = this.mensaService.getAllDishes(value as SCPlace, 1).then(it => {
-      const closestDayWithDishes = Object.keys(it)
+      const days = Object.entries(it);
-        .filter(key => it[key].length > 0)
+      console.assert(days.length <= 1);
-        .find(key => moment(key).isSame(moment(), 'day'));
+      console.assert(!days[0] || isToday(parseISO(days[0][0])));
-      return closestDayWithDishes ? it[closestDayWithDishes] : [];
+      return days[0]?.[1] ?? [];
     });
   }
 

frontend/app/src/app/modules/data/chips/edit-event-selection.html

@@ -32,8 +32,8 @@
       >
         <ion-list-header>
           {{ frequency.children[0].item.repeatFrequency ? (frequency.children[0].item.repeatFrequency |
-          durationLocalized: true | sentencecase) : ('data.chips.add_events.popover.SINGLE' | translate |
+          dfnsParseDuration | dfnsFormatFrequencyPure | sentencecase) :
-          titlecase) }}
+          ('data.chips.add_events.popover.SINGLE' | translate | titlecase) }}
         </ion-list-header>
       </ion-checkbox>
     </ion-item>
@@ -44,18 +44,19 @@
       >
         <ng-container *ngIf="date.item.dates.length > 1; else single_event">
           <ion-text>
-            {{ date.item.dates[0] | amDateFormat: 'dddd, LT' }} - {{ date.item.dates[0] | amAdd:
+            <b>{{ date.item.duration | dfnsParseDuration | dfnsFormatDurationPure }}</b>
-            date.item.duration | amDateFormat: 'LT' }}
+            {{ date.item.dates[0] | dfnsParseIso | dfnsFormatPure: 'EEEE, p' }}
           </ion-text>
           <br />
           <ion-text>
-            {{ date.item.dates[0] | amDateFormat: 'LL' }} - {{ date.item.dates[date.item.dates.length - 1] |
+            {{ date.item.dates[0] | dfnsParseIso | dfnsFormatPure: 'PPP' }} - {{
-            amDateFormat: 'LL' }}
+            date.item.dates[date.item.dates.length - 1] | dfnsParseIso | dfnsFormatPure: 'PPP' }}
           </ion-text>
         </ng-container>
         <ng-template #single_event>
           <ion-text *ngIf="date.item.dates[0] as time; else noDates">
-            {{ time | amDateFormat: 'LL, LT' }} - {{ time | amAdd: date.item.duration | amDateFormat: 'LT' }}
+            <b>{{ date.item.duration |dfnsParseDuration | dfnsFormatDurationPure}}</b>
+            {{ time | dfnsParseIso | dfnsFormatPure: 'PPPPp' }}
           </ion-text>
           <ng-template #noDates>
             <ion-text color="danger">{{ 'data.chips.add_events.popover.DATA_ERROR' | translate }}</ion-text>

frontend/app/src/app/modules/data/data.module.ts

@@ -20,7 +20,6 @@ import {FormsModule} from '@angular/forms';
 import {IonicModule, Platform} from '@ionic/angular';
 import {TranslateModule} from '@ngx-translate/core';
 import {MarkdownModule} from 'ngx-markdown';
-import {MomentModule} from 'ngx-moment';
 import {ThingTranslateModule} from '../../translation/thing-translate.module';
 import {MenuModule} from '../menu/menu.module';
 import {ScheduleProvider} from '../calendar/schedule.provider';
@@ -104,6 +103,15 @@ import {SkeletonListComponent} from './list/skeleton-list.component';
 import {CertificationsInDetailComponent} from './elements/certifications-in-detail.component';
 import {GeoNavigationDirective} from '../map/geo-navigation.directive';
 import {NavigateActionChipComponent} from './chips/data/navigate-action-chip.component';
+import {
+  FormatDurationPurePipeModule,
+  FormatPurePipeModule,
+  FormatRelativeToNowPurePipeModule,
+  ParseIsoPipeModule,
+} from 'ngx-date-fns';
+import {ParseDurationPipe} from '../../translation/date-time/parse-duration.pipe';
+import {DfnsFormatFrequencyPurePipe} from '../../translation/date-time/format-frequency.pipe';
+import {DfnsFormatRelativeDatePurePipe} from '../../translation/date-time/format-relative-date.pipe';
 
 /**
  * Module for handling data
@@ -187,17 +195,19 @@ import {NavigateActionChipComponent} from './chips/data/navigate-action-chip.com
     MarkdownModule.forRoot(),
     MenuModule,
     IonIconModule,
-    MomentModule.forRoot({
-      relativeTimeThresholdOptions: {
-        m: 59,
-      },
-    }),
     ScrollingModule,
     StorageModule,
     TranslateModule.forChild(),
     ThingTranslateModule.forChild(),
     UtilModule,
     GeoNavigationDirective,
+    ParseIsoPipeModule,
+    ParseDurationPipe,
+    DfnsFormatFrequencyPurePipe,
+    DfnsFormatRelativeDatePurePipe,
+    FormatPurePipeModule,
+    FormatDurationPurePipeModule,
+    FormatRelativeToNowPurePipeModule,
   ],
   providers: [
     CoordinatedSearchProvider,

frontend/app/src/app/modules/data/detail/data-detail.component.spec.ts

@@ -95,7 +95,7 @@ describe('DataDetailComponent', () => {
     fixture = TestBed.createComponent(DataDetailComponent);
     comp = fixture.componentInstance;
     detailPage = fixture.debugElement;
-    translateService.use('foo');
+    translateService.use('en');
     fixture.detectChanges();
   });
 

frontend/app/src/app/modules/data/elements/offers-detail.html

@@ -30,7 +30,7 @@
               *ngIf="offer.availabilityRange.gt ? offer.availabilityRange.gt : offer.availabilityRange.gte"
             >
               {{ (offer.availabilityRange.gt ? offer.availabilityRange.gt : offer.availabilityRange.gte) |
-              amDateFormat : 'll' }}
+              dfnsParseIso | dfnsFormatPure : 'PPP' }}
             </span>
           </ion-col>
         </ion-row>

frontend/app/src/app/modules/data/elements/origin-detail.html

@@ -20,16 +20,16 @@
   >
   <ion-card-content>
     <p>
-      {{ 'data.types.origin.detail.CREATED' | translate | titlecase }}: {{ origin.created | amDateFormat :
+      {{ 'data.types.origin.detail.CREATED' | translate | titlecase }}: {{ origin.created | dfnsParseIso |
-      'll' }}
+      dfnsFormatPure : 'PPP' }}
     </p>
     <p *ngIf="origin.updated">
-      {{ 'data.types.origin.detail.UPDATED' | translate | titlecase }}: {{ origin.updated | amDateFormat :
+      {{ 'data.types.origin.detail.UPDATED' | translate | titlecase }}: {{ origin.updated | dfnsParseIso |
-      'll' }}
+      dfnsFormatPure : 'PPP' }}
     </p>
     <p *ngIf="origin.modified">
-      {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}: {{ origin.modified | amDateFormat :
+      {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}: {{ origin.modified | dfnsParseIso |
-      'll' }}
+      dfnsFormatPure : 'PPP' }}
     </p>
     <p *ngIf="origin.name">{{ 'data.types.origin.detail.MAINTAINER' | translate }}: {{ origin.name }}</p>
     <p *ngIf="origin.maintainer">
@@ -46,12 +46,12 @@
   >
   <ion-card-content>
     <p>
-      {{ 'data.types.origin.detail.INDEXED' | translate | titlecase }}: {{ origin.indexed | amDateFormat :
+      {{ 'data.types.origin.detail.INDEXED' | translate | titlecase }}: {{ origin.indexed | dfnsParseIso |
-      'll' }}
+      dfnsFormatPure : 'PPP'}}
     </p>
     <p *ngIf="origin.modified">
-      {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}: {{ origin.modified | amDateFormat :
+      {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}: {{ origin.modified | dfnsParseIso |
-      'll' }}
+      dfnsFormatPure : 'PPP' }}
     </p>
     <p *ngIf="origin.name">{{ 'data.types.origin.detail.MAINTAINER' | translate }}: {{ origin.name }}</p>
     <p *ngIf="origin.maintainer">

frontend/app/src/app/modules/data/list/food-data-list.component.ts

@@ -12,109 +12,96 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {MapPosition} from '../../map/position.service';
+import {MapPosition, PositionService} from '../../map/position.service';
-import {SearchPageComponent} from './search-page.component';
 import {Geolocation} from '@capacitor/geolocation';
-import {BehaviorSubject} from 'rxjs';
+import {BehaviorSubject, from} from 'rxjs';
 import {pauseWhen} from '../../../util/rxjs/pause-when';
-import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {map, retry, startWith, take} from 'rxjs/operators';
+import {SCSearchFilter, SCSearchSort} from '@openstapps/core';
 
 /**
  * Presents a list of places for eating/drinking
  */
 @Component({
-  templateUrl: 'search-page.html',
+  selector: 'stapps-food-data-list',
-  styleUrls: ['../../data/list/search-page.scss'],
+  templateUrl: 'food-data-list.html',
+  styleUrls: ['food-data-list.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FoodDataListComponent extends SearchPageComponent implements OnInit {
+export class FoodDataListComponent {
-  title = 'canteens.title';
-
-  showNavigation = false;
-
   isNotInView$ = new BehaviorSubject(true);
 
-  /**
+  forcedFilter: SCSearchFilter = {
-   * Sets the forced filter to present only places for eating/drinking
+    arguments: {
-   */
+      filters: [
-  ngOnInit() {
+        {
-    this.positionService
+          arguments: {
-      .watchCurrentLocation({enableHighAccuracy: false, maximumAge: 1000})
+            field: 'categories',
-      .pipe(pauseWhen(this.isNotInView$), takeUntilDestroyed(this.destroy$))
+            value: 'canteen',
-      .subscribe({
+          },
-        next: (position: MapPosition) => {
+          type: 'value',
-          this.positionService.position = position;
         },
-        error: async _error => {
+        {
-          this.positionService.position = undefined;
+          arguments: {
-          await Geolocation.checkPermissions();
+            field: 'categories',
+            value: 'student canteen',
+          },
+          type: 'value',
         },
-      });
+        {
-    this.showDefaultData = true;
+          arguments: {
+            field: 'categories',
+            value: 'cafe',
+          },
+          type: 'value',
+        },
+        {
+          arguments: {
+            field: 'categories',
+            value: 'restaurant',
+          },
+          type: 'value',
+        },
+      ],
+      operation: 'or',
+    },
+    type: 'boolean',
+  };
 
-    this.sortQuery = [
+  sortQuery = this.positionService
-      {
+    .watchCurrentLocation({
-        arguments: {field: 'name'},
+      enableHighAccuracy: false,
-        order: 'asc',
+      maximumAge: 1000,
-        type: 'ducet',
+    })
-      },
+    .pipe(
-    ];
+      pauseWhen(this.isNotInView$),
-
+      retry({
-    this.forcedFilter = {
+        delay: () => from(Geolocation.checkPermissions()),
-      arguments: {
+      }),
-        filters: [
+      map<MapPosition, SCSearchSort[]>(({longitude, latitude}) => [
-          {
-            arguments: {
-              field: 'categories',
-              value: 'canteen',
-            },
-            type: 'value',
-          },
-          {
-            arguments: {
-              field: 'categories',
-              value: 'student canteen',
-            },
-            type: 'value',
-          },
-          {
-            arguments: {
-              field: 'categories',
-              value: 'cafe',
-            },
-            type: 'value',
-          },
-          {
-            arguments: {
-              field: 'categories',
-              value: 'restaurant',
-            },
-            type: 'value',
-          },
-        ],
-        operation: 'or',
-      },
-      type: 'boolean',
-    };
-
-    if (this.positionService.position) {
-      this.sortQuery = [
         {
           type: 'distance',
           order: 'asc',
           arguments: {
             field: 'geo',
-            position: [this.positionService.position.longitude, this.positionService.position.latitude],
+            position: [longitude, latitude],
           },
         },
-      ];
+      ]),
-    }
+      take(1),
+      startWith<SCSearchSort[]>([
+        {
+          arguments: {field: 'name'},
+          order: 'asc',
+          type: 'ducet',
+        },
+      ]),
+    );
 
-    super.ngOnInit();
+  constructor(private readonly positionService: PositionService) {}
-  }
 
   async ionViewWillEnter() {
-    await super.ionViewWillEnter();
     this.isNotInView$.next(false);
   }
 

frontend/app/src/app/modules/data/list/food-data-list.html

@@ -0,0 +1,8 @@
+<stapps-search-page
+  [forcedFilter]="forcedFilter"
+  [sortQuery]="sortQuery | async"
+  [title]="'canteens.title'"
+  [showNavigation]="false"
+  [showDefaultData]="true"
+>
+</stapps-search-page>

frontend/app/src/app/modules/data/list/food-data-list.scss

@@ -0,0 +1,3 @@
+:host {
+  display: contents;
+}

frontend/app/src/app/modules/data/list/search-page-switch-animation.ts

@@ -16,11 +16,13 @@
 import type {AnimationBuilder} from '@ionic/angular';
 import {AnimationController} from '@ionic/angular';
 import type {AnimationOptions} from '@ionic/angular/providers/nav-controller';
+import {inject} from '@angular/core';
 
 /**
  *
  */
-export function searchPageSwitchAnimation(animationController: AnimationController): AnimationBuilder {
+export function searchPageSwitchAnimation(): AnimationBuilder {
+  const animationController = inject(AnimationController);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return (_baseElement: HTMLElement, options: AnimationOptions | any) => {
     const rootTransition = animationController

frontend/app/src/app/modules/data/list/search-page.component.ts

@@ -12,10 +12,10 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, DestroyRef, inject, Input, OnInit} from '@angular/core';
+import {Component, DestroyRef, inject, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Keyboard} from '@capacitor/keyboard';
-import {AlertController, AnimationBuilder, AnimationController} from '@ionic/angular';
+import {AlertController} from '@ionic/angular';
 import {Capacitor} from '@capacitor/core';
 import {
   SCFacet,
@@ -32,7 +32,6 @@ import {ContextMenuService} from '../../menu/context/context-menu.service';
 import {SettingsProvider} from '../../settings/settings.provider';
 import {DataRoutingService} from '../data-routing.service';
 import {DataProvider} from '../data.provider';
-import {PositionService} from '../../map/position.service';
 import {ConfigProvider} from '../../config/config.provider';
 import {searchPageSwitchAnimation} from './search-page-switch-animation';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
@@ -46,7 +45,7 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
   styleUrls: ['search-page.scss'],
   providers: [ContextMenuService],
 })
-export class SearchPageComponent implements OnInit {
+export class SearchPageComponent implements OnInit, OnChanges {
   @Input() title = 'search.title';
 
   @Input() placeholder = 'search.search_bar.placeholder';
@@ -140,25 +139,12 @@ export class SearchPageComponent implements OnInit {
   /**
    * Api query sorting
    */
-  sortQuery: SCSearchSort[] | undefined;
+  @Input() sortQuery: SCSearchSort[] | undefined;
 
   destroy$ = inject(DestroyRef);
 
-  routeAnimation: AnimationBuilder;
+  routeAnimation = searchPageSwitchAnimation();
 
-  /**
-   * Injects the providers and creates subscriptions
-   * @param alertController AlertController
-   * @param dataProvider DataProvider
-   * @param contextMenuService ContextMenuService
-   * @param settingsProvider SettingsProvider
-   * @param logger An angular logger
-   * @param dataRoutingService DataRoutingService
-   * @param router Router
-   * @param route ActivatedRoute
-   * @param positionService PositionService
-   * @param configProvider ConfigProvider
-   */
   constructor(
     protected readonly alertController: AlertController,
     protected dataProvider: DataProvider,
@@ -168,18 +154,20 @@ export class SearchPageComponent implements OnInit {
     protected dataRoutingService: DataRoutingService,
     protected router: Router,
     private readonly route: ActivatedRoute,
-    protected positionService: PositionService,
     private readonly configProvider: ConfigProvider,
-    animationController: AnimationController,
+  ) {}
-  ) {
+
-    this.routeAnimation = searchPageSwitchAnimation(animationController);
+  async ngOnChanges(changes: SimpleChanges) {
+    if ('sortQuery' in changes) {
+      await this.fetchAndUpdateItems();
+    }
   }
 
   /**
    * Fetches items with set query configuration
    * @param append If true fetched data gets appended to existing, override otherwise (default false)
    */
-  protected async fetchAndUpdateItems(append = false): Promise<void> {
+  async fetchAndUpdateItems(append = false): Promise<void> {
     // build query search options
     const searchOptions: SCSearchQuery = {
       from: this.from,

frontend/app/src/app/modules/data/types/date-series/date-series-detail-content.html

@@ -26,22 +26,22 @@
 </ng-template>
 <stapps-simple-card
   title="{{ 'duration' | propertyNameTranslate : item | titlecase }}"
-  [content]="[item.duration | amDuration : 'minutes']"
+  [content]="[item.duration | dfnsParseDuration | dfnsFormatDurationPure: {format: ['minutes']}]"
 ></stapps-simple-card>
 <stapps-simple-card
   *ngIf="item.dates.length > 1; else single_event"
   title="{{ 'dates' | propertyNameTranslate : item | titlecase }}"
   content="{{ 'data.chips.add_events.popover.AT' | translate | titlecase }} {{
-    item.dates[0] | amDateFormat : 'HH:mm ddd'
+    item.dates[0] | dfnsParseIso | dfnsFormatPure: 'pp, eee'
   }} {{ 'data.chips.add_events.popover.UNTIL' | translate }} {{
-    item.dates[item.dates.length - 1] | amDateFormat : 'll'
+    item.dates[item.dates.length - 1] | dfnsParseIso | dfnsFormatPure : 'PP'
   }}"
 ></stapps-simple-card>
 <ng-template #single_event>
   <stapps-simple-card
     title="{{ 'dates' | propertyNameTranslate : item | titlecase }}"
     content="{{ 'data.chips.add_events.popover.AT' | translate | titlecase }} {{
-      item.dates[item.dates.length - 1] | amDateFormat : 'll, HH:mm'
+      item.dates[item.dates.length - 1] | dfnsParseIso | dfnsFormatPure : 'PPpp'
     }}"
   ></stapps-simple-card>
 </ng-template>

frontend/app/src/app/modules/data/types/date-series/date-series-list-item.html

@@ -22,11 +22,12 @@
           <ion-icon name="calendar_today"></ion-icon>
           <span *ngIf="item.dates[0] && item.dates[item.dates.length - 1]">
             <span *ngIf="item.repeatFrequency">
-              {{ item.repeatFrequency | durationLocalized : true | sentencecase }}, {{ item.dates[0] |
+              {{ item.repeatFrequency | dfnsParseDuration | dfnsFormatDurationPure | sentencecase }}, {{
-              dateFormat : 'weekday:long' }}
+              item.dates[0] | dfnsParseIso | dfnsFormatPure : 'PPPP' }}
             </span>
             <span>
-              ({{ item.dates[0] | dateFormat }} - {{ item.dates[item.dates.length - 1] | dateFormat }})
+              ({{ item.dates[0] | dfnsParseIso | dfnsFormatPure: 'PPP' }} - {{ item.dates[item.dates.length -
+              1] | dfnsParseIso | dfnsFormatPure: 'PPP' }})
             </span>
           </span>
         </p>

frontend/app/src/app/modules/data/types/message/message-detail-content.html

@@ -25,7 +25,7 @@
   <stapps-simple-card
     *ngIf="item.datePublished"
     [title]="'datePublished' | propertyNameTranslate : item | titlecase"
-    [content]="item.datePublished | amDateFormat : 'll'"
+    [content]="item.datePublished | dfnsParseIso | dfnsFormatPure : 'PPP'"
   ></stapps-simple-card>
   <stapps-simple-card
     *ngIf="item.authors"
@@ -50,7 +50,7 @@
   <stapps-simple-card
     *ngIf="item.datePublished"
     class="date-published"
-    content="{{ item.datePublished | amCalendar | sentencecase }}"
+    content="{{ item.datePublished | dfnsParseIso | dfnsFormatRelativeToNowPure | sentencecase }}"
   ></stapps-simple-card>
   <stapps-simple-card content="{{ item.messageBody }}"></stapps-simple-card>
   <ion-card *ngIf="item.sameAs">

frontend/app/src/app/modules/data/types/place/place-list-item.component.ts

@@ -12,10 +12,11 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, DestroyRef, inject, Input} from '@angular/core';
 import {PositionService} from '../../../map/position.service';
-import {interval, Subscription} from 'rxjs';
+import {BehaviorSubject, interval} from 'rxjs';
 import {hasValidLocation, isSCFloor, PlaceTypes, PlaceTypesWithDistance} from './place-types';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 /**
  * Shows a place as a list item
@@ -24,6 +25,7 @@ import {hasValidLocation, isSCFloor, PlaceTypes, PlaceTypesWithDistance} from '.
   selector: 'stapps-place-list-item',
   templateUrl: 'place-list-item.html',
   styleUrls: ['place-list-item.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PlaceListItemComponent {
   /**
@@ -39,10 +41,12 @@ export class PlaceListItemComponent {
   @Input() set item(item: PlaceTypes) {
     this._item = item;
     if (!isSCFloor(item) && hasValidLocation(item)) {
-      this.distance = this.positionService.getDistance(item.geo.point);
+      this.distance.next(this.positionService.getDistance(item.geo.point));
-      this.distanceSubscription = interval(10_000).subscribe(_ => {
+      interval(10_000)
-        this.distance = this.positionService.getDistance(item.geo.point);
+        .pipe(takeUntilDestroyed(this.destroy$))
-      });
+        .subscribe(_ => {
+          this.distance.next(this.positionService.getDistance(item.geo.point));
+        });
     }
   }
 
@@ -54,9 +58,9 @@ export class PlaceListItemComponent {
   /**
    * Distance in meters
    */
-  distance?: number;
+  distance = new BehaviorSubject<number | undefined>(undefined);
 
-  distanceSubscription?: Subscription;
+  private destroy$ = inject(DestroyRef);
 
   constructor(private positionService: PositionService) {}
 }

frontend/app/src/app/modules/data/types/place/place-list-item.html

@@ -27,7 +27,7 @@
           <p>
             <ion-note *ngIf="item.categories && item.type !== 'building'; else onlyType">
               <ion-label> {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }} </ion-label>
-              <ion-label *ngIf="distance" class="distance">
+              <ion-label *ngIf="distance | async as distance" class="distance">
                 <ion-icon name="directions_walk"></ion-icon>
                 {{ distance | metersLocalized }}
               </ion-label>
@@ -36,7 +36,7 @@
           <ng-template #onlyType>
             <ion-note>
               <ion-label> {{ 'type' | thingTranslate: item | titlecase }} </ion-label>
-              <ion-label *ngIf="distance" class="distance">
+              <ion-label *ngIf="distance | async as distance" class="distance">
                 <ion-icon name="directions_walk"></ion-icon>
                 {{ distance | metersLocalized }}
               </ion-label>

frontend/app/src/app/modules/data/types/place/special/mensa/place-mensa-detail.component.ts

@@ -12,7 +12,6 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import moment, {Moment} from 'moment';
 import {AfterViewInit, Component, DestroyRef, inject, Input} from '@angular/core';
 import {SCDish, SCISO8601Date, SCPlace} from '@openstapps/core';
 import {PlaceMensaService} from './place-mensa-service';
@@ -53,11 +52,6 @@ export class PlaceMensaDetailComponent implements AfterViewInit {
    */
   selectedDay: string;
 
-  /**
-   * First day to display menu items for
-   */
-  startingDay: Moment;
-
   destroy$ = inject(DestroyRef);
 
   constructor(
@@ -65,9 +59,7 @@ export class PlaceMensaDetailComponent implements AfterViewInit {
     protected router: Router,
     readonly routerOutlet: IonRouterOutlet,
     private readonly dataRoutingService: DataRoutingService,
-  ) {
+  ) {}
-    this.startingDay = moment().startOf('day');
-  }
 
   ngAfterViewInit() {
     if (!this.openAsModal) {

frontend/app/src/app/modules/data/types/place/special/mensa/place-mensa-service.ts

@@ -14,10 +14,10 @@
  */
 import {Injectable} from '@angular/core';
 import {SCDish, SCISO8601Date, SCPlace, SCSearchQuery, SCThingType} from '@openstapps/core';
-import moment from 'moment';
 import {DataProvider} from '../../../../data.provider';
 import {mapValues} from '@openstapps/collection-utils';
 import {SettingsProvider} from '../../../../../settings/settings.provider';
+import {addDays, formatISO} from 'date-fns';
 
 /**
  * TODO
@@ -38,7 +38,7 @@ export class PlaceMensaService {
     const request = mapValues<Record<SCISO8601Date, SCISO8601Date>, SCSearchQuery>(
       Array.from({length: days})
         .map((_, i) => i)
-        .map(i => moment().add(i, 'days').toISOString())
+        .map(i => formatISO(addDays(Date.now(), i)))
         .reduce((accumulator, item) => {
           accumulator[item] = item;
           return accumulator;

frontend/app/src/app/modules/data/types/place/special/mensa/place-mensa.html

@@ -19,10 +19,10 @@
       <ion-segment [(ngModel)]="selectedDay" mode="md">
         <ion-segment-button *ngFor="let day of dishes | keyvalue" [value]="day.key">
           <ion-label class="ion-hide-sm-down"
-            >{{ day.key | dateFormat : 'weekday:long,month:numeric,day:numeric' }}</ion-label
+            >{{ day.key | dfnsParseIso | dfnsFormatRelativeDatePure | sentencecase }}</ion-label
           >
           <ion-label class="ion-hide-sm-up"
-            >{{ day.key | dateFormat : 'weekday:short,month:numeric,day:numeric' }}</ion-label
+            >{{ day.key | dfnsParseIso | dfnsFormatRelativeDatePure | sentencecase }}</ion-label
           >
         </ion-segment-button>
       </ion-segment>

frontend/app/src/app/modules/data/types/semester/semester-detail-content.html

@@ -21,6 +21,6 @@
     ('eventsEndDate' | propertyNameTranslate : item | titlecase)
   "
   [content]="
-    (item.eventsStartDate | amDateFormat : 'll') + ' - ' + (item.eventsEndDate | amDateFormat : 'll')
+    (item.eventsStartDate | dfnsParseIso | dfnsFormatPure : 'PPP') + ' - ' + (item.eventsEndDate | dfnsParseIso | dfnsFormat : 'PPP')
   "
 ></stapps-simple-card>

frontend/app/src/app/modules/data/types/semester/semester-list-item.html

@@ -20,7 +20,10 @@
         <ion-label class="title">{{ 'name' | thingTranslate : item }}</ion-label>
         <p class="title-sub">
           <ion-icon name="calendar_today"></ion-icon>
-          <span>{{ item.startDate | dateFormat }} - {{ item.endDate | dateFormat }}</span>
+          <span
+            >{{ item.startDate | dfnsParseIso | dfnsFormatPure: 'PPP' }} - {{ item.endDate | dfnsParseIso |
+            dfnsFormatPure: 'PPP' }}</span
+          >
         </p>
         <ion-note>{{ 'type' | thingTranslate : item }}</ion-note>
       </div>

frontend/app/src/app/modules/data/types/video/video-detail-content.html

@@ -26,7 +26,7 @@
 <stapps-simple-card
   *ngIf="item.datePublished"
   [title]="'datePublished' | propertyNameTranslate : item | titlecase"
-  [content]="item.datePublished | amDateFormat : 'll'"
+  [content]="item.datePublished | dfnsParseIso | dfnsFormatPure : 'PPP'"
 >
 </stapps-simple-card>
 <stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>

frontend/app/src/app/modules/data/types/video/video-list-item.html

@@ -10,8 +10,8 @@
           ></stapps-long-inline-text>
         </p>
         <p *ngIf="item.duration">
-          {{ 'duration' | propertyNameTranslate : item | titlecase }}: {{ item.duration | amDuration :
+          {{ 'duration' | propertyNameTranslate : item | titlecase }}: {{ item.duration | dfnsParseDuration |
-          'seconds' }}
+          dfnsFormatDurationPure : {format: ['seconds']} }}
         </p>
         <ion-note>{{ 'type' | thingTranslate : item }}</ion-note>
       </div>

frontend/app/src/app/modules/favorites/favorites-page.component.ts

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component, OnInit} from '@angular/core';
-import {AlertController, AnimationController} from '@ionic/angular';
+import {AlertController} from '@ionic/angular';
 import {ActivatedRoute, Router} from '@angular/router';
 import {NGXLogger} from 'ngx-logger';
 import {debounceTime, distinctUntilChanged, startWith, take} from 'rxjs/operators';
@@ -25,7 +25,6 @@ import {ContextMenuService} from '../menu/context/context-menu.service';
 import {SearchPageComponent} from '../data/list/search-page.component';
 import {DataProvider} from '../data/data.provider';
 import {SettingsProvider} from '../settings/settings.provider';
-import {PositionService} from '../map/position.service';
 import {ConfigProvider} from '../config/config.provider';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
@@ -51,10 +50,8 @@ export class FavoritesPageComponent extends SearchPageComponent implements OnIni
     dataRoutingService: DataRoutingService,
     router: Router,
     route: ActivatedRoute,
-    positionService: PositionService,
     private favoritesService: FavoritesService,
     configProvider: ConfigProvider,
-    animationController: AnimationController,
   ) {
     super(
       alertController,
@@ -65,9 +62,7 @@ export class FavoritesPageComponent extends SearchPageComponent implements OnIni
       dataRoutingService,
       router,
       route,
-      positionService,
       configProvider,
-      animationController,
     );
   }
 

frontend/app/src/app/modules/hebis/daia-availability/daia-availability.component.spec.ts

@@ -100,7 +100,7 @@ describe('DaiaAvailabilityComponent', () => {
     spyOn(DaiaAvailabilityComponent.prototype, 'getAvailability').and.callThrough();
     fixture = await TestBed.createComponent(DaiaAvailabilityComponent);
     comp = fixture.componentInstance;
-    translateService.use('foo');
+    translateService.use('en');
     fixture.detectChanges();
   });
 

frontend/app/src/app/modules/hebis/daia-availability/daia-holding.html

@@ -67,6 +67,6 @@
   </ion-row>
   <ion-row *ngIf="holding.dueDate">
     <ion-col size="3">{{ 'hebisSearch.daia.dueDate' | translate }}</ion-col>
-    <ion-col size="9">{{ holding.dueDate | amDateFormat : 'll' }}</ion-col>
+    <ion-col size="9">{{ holding.dueDate | dfnsParseIso | dfnsFormatPure : 'PPP' }}</ion-col>
   </ion-row>
 </ion-grid>

frontend/app/src/app/modules/hebis/hebis-detail/hebis-detail.component.spec.ts

@@ -96,7 +96,7 @@ describe('HebisDetailComponent', () => {
     spyOn(HebisDetailComponent.prototype, 'getItem').and.callThrough();
     fixture = TestBed.createComponent(HebisDetailComponent);
     comp = fixture.componentInstance;
-    translateService.use('foo');
+    translateService.use('en');
     fixture.detectChanges();
   });
 

frontend/app/src/app/modules/hebis/hebis.module.ts

@@ -20,7 +20,6 @@ import {FormsModule} from '@angular/forms';
 import {IonicModule} from '@ionic/angular';
 import {TranslateModule} from '@ngx-translate/core';
 import {MarkdownModule} from 'ngx-markdown';
-import {MomentModule} from 'ngx-moment';
 import {ThingTranslateModule} from '../../translation/thing-translate.module';
 import {MenuModule} from '../menu/menu.module';
 import {StorageModule} from '../storage/storage.module';
@@ -36,6 +35,7 @@ import {DaiaAvailabilityComponent} from './daia-availability/daia-availability.c
 import {UtilModule} from '../../util/util.module';
 import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 import {DaiaHoldingComponent} from './daia-availability/daia-holding.component';
+import {FormatPurePipeModule, ParseIsoPipeModule} from 'ngx-date-fns';
 
 /**
  * Module for handling data
@@ -58,16 +58,13 @@ import {DaiaHoldingComponent} from './daia-availability/daia-holding.component';
     IonicModule.forRoot(),
     MarkdownModule.forRoot(),
     MenuModule,
-    MomentModule.forRoot({
-      relativeTimeThresholdOptions: {
-        m: 59,
-      },
-    }),
     ScrollingModule,
     StorageModule,
     TranslateModule.forChild(),
     ThingTranslateModule.forChild(),
     UtilModule,
+    ParseIsoPipeModule,
+    FormatPurePipeModule,
   ],
   providers: [HebisDataProvider, DaiaDataProvider, StAppsWebHttpClient],
 })

frontend/app/src/app/modules/hebis/list/hebis-search-page.component.ts

@@ -44,7 +44,7 @@ export class HebisSearchPageComponent extends SearchPageComponent implements OnI
    * Fetches items with set query configuration
    * @param append If true fetched data gets appended to existing, override otherwise (default false)
    */
-  protected async fetchAndUpdateItems(append = false): Promise<void> {
+  async fetchAndUpdateItems(append = false): Promise<void> {
     // build query search options
     const searchOptions: {page: number; query: string} = {
       page: this.page,

frontend/app/src/app/modules/library/account/elements/fee-item/fee-item.html

@@ -28,7 +28,7 @@
       <p *ngIf="fee[property]">
         {{ 'library.account.pages.fines.labels' + '.' + property | translate }}:
         <ng-container *ngIf="!['date'].includes(property); else date"> {{ fee[property] }} </ng-container>
-        <ng-template #date> {{ fee[property] | amDateFormat : 'll' }} </ng-template>
+        <ng-template #date> {{ $any(fee[property]) | dfnsParseIso | dfnsFormatPure : 'PPP' }} </ng-template>
       </p></ng-container
     >
   </ion-label>

frontend/app/src/app/modules/library/account/elements/paia-item/paiaitem.html

@@ -23,7 +23,7 @@
         <ng-container *ngIf="!['endtime', 'duedate'].includes(property); else date">
           {{ item[property] }}
         </ng-container>
-        <ng-template #date> {{ item[property] | amDateFormat : 'll' }} </ng-template>
+        <ng-template #date> {{ $any(item[property]) | dfnsParseIso | dfnsFormatPure : 'PPP' }} </ng-template>
       </p>
     </ng-container>
     <span class="ion-float-right">

frontend/app/src/app/modules/library/account/profile/profile-page.html

@@ -37,8 +37,8 @@
                   {{ 'library.account.pages.profile.values.unlimited' | translate }}
                 </ng-container>
                 <ng-template #exactDate>
-                  {{ 'library.account.pages.profile.values.expires' | translate }}:&nbsp;{{ patron[property] |
+                  {{ 'library.account.pages.profile.values.expires' | translate }}:&nbsp;{{
-                  amDateFormat : 'll' }}
+                  $any(patron[property]) | dfnsParseIso | dfnsFormatPure : 'PPP' }}
                 </ng-template>
               </ng-template>
             </ion-col>

frontend/app/src/app/modules/library/library.module.ts

@@ -12,7 +12,6 @@
  *  You should have received a copy of the GNU General Public License along with
  *  this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
@@ -28,11 +27,11 @@ import {PAIAItemComponent} from './account/elements/paia-item/paiaitem.component
 import {FirstLastNamePipe} from './account/first-last-name.pipe';
 import {AuthGuardService} from '../auth/auth-guard.service';
 import {ProtectedRoutes} from '../auth/protected.routes';
-import {MomentModule} from 'ngx-moment';
 import {FeeItemComponent} from './account/elements/fee-item/fee-item.component';
 import {DataModule} from '../data/data.module';
 import {UtilModule} from '../../util/util.module';
 import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
+import {FormatPurePipeModule, ParseIsoPipeModule} from 'ngx-date-fns';
 
 const routes: ProtectedRoutes | Routes = [
   {
@@ -75,9 +74,10 @@ const routes: ProtectedRoutes | Routes = [
     IonIconModule,
     RouterModule.forChild(routes),
     TranslateModule,
-    MomentModule,
     DataModule,
     UtilModule,
+    ParseIsoPipeModule,
+    FormatPurePipeModule,
   ],
   declarations: [
     LibraryAccountPageComponent,

frontend/app/src/app/modules/map/position.service.ts

@@ -105,11 +105,9 @@ export class PositionService {
           subscriber.next(this.position);
         }
       });
-      watcherID.then(console.log);
       return {
         unsubscribe() {
           watcherID.then(id => {
-            console.log(id);
             void Geolocation.clearWatch({id});
           });
         },

frontend/app/src/app/modules/news/item/news-item.html

@@ -21,7 +21,7 @@
 >
   <ion-card-header>
     <ion-card-subtitle *ngIf="item.datePublished"
-      >{{ item.datePublished | amCalendar | sentencecase }}</ion-card-subtitle
+      >{{ item.datePublished | dfnsParseIso | dfnsFormatRelativeToNowPure | sentencecase }}</ion-card-subtitle
     >
     <ion-card-title> {{ item.name }} </ion-card-title>
   </ion-card-header>

frontend/app/src/app/modules/news/news.module.ts

@@ -17,7 +17,6 @@ import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {IonicModule} from '@ionic/angular';
 import {TranslateModule} from '@ngx-translate/core';
-import {MomentModule} from 'ngx-moment';
 import {ThingTranslateModule} from '../../translation/thing-translate.module';
 import {DataModule} from '../data/data.module';
 import {SettingsProvider} from '../settings/settings.provider';
@@ -29,6 +28,7 @@ import {SettingsModule} from '../settings/settings.module';
 import {NewsSettingsFilterComponent} from './elements/news-filter-settings/news-settings-filter.component';
 import {UtilModule} from '../../util/util.module';
 import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
+import {FormatRelativeToNowPurePipeModule, ParseIsoPipeModule} from 'ngx-date-fns';
 
 const newsRoutes: Routes = [{path: 'news', component: NewsPageComponent}];
 
@@ -50,11 +50,12 @@ const newsRoutes: Routes = [{path: 'news', component: NewsPageComponent}];
     RouterModule.forChild(newsRoutes),
     IonIconModule,
     CommonModule,
-    MomentModule,
     DataModule,
     ThingTranslateModule,
     SettingsModule,
     UtilModule,
+    ParseIsoPipeModule,
+    FormatRelativeToNowPurePipeModule,
   ],
   providers: [SettingsProvider],
   exports: [NewsItemComponent],

frontend/app/src/app/modules/profile/page/my-courses.component.ts

@@ -2,8 +2,9 @@ import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {mergeMap, ReplaySubject} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {SCDateSeries, SCISO8601Date} from '@openstapps/core';
-import moment from 'moment/moment';
 import {ScheduleProvider} from '../../calendar/schedule.provider';
+import {add, addDays, formatISO, isSameDay, startOfToday} from 'date-fns';
+import {parseISODuration} from 'duration-fns/dist/lib/parseISODuration';
 
 interface MyCoursesTodayInterface {
   startTime: string;
@@ -20,16 +21,16 @@ type MyCoursesGroup = [SCISO8601Date, MyCoursesTodayInterface[]][];
  */
 function groupDays(dateSeries: SCDateSeries[], visibleDays: number): MyCoursesGroup {
   const courses: [SCISO8601Date, MyCoursesTodayInterface[]][] = [];
-  const dates = Array.from({length: visibleDays}, (_, i) => moment().startOf('day').add(i, 'days'));
+  const dates = Array.from({length: visibleDays}, (_, i) => addDays(startOfToday(), i));
 
   for (const day of dates) {
     const dayCourses: MyCoursesTodayInterface[] = [];
     for (const course of dateSeries) {
       for (const date of course.dates) {
-        if (moment(date).isSame(day, 'day')) {
+        if (isSameDay(new Date(date), day)) {
           dayCourses.push({
-            startTime: moment(date).toISOString(),
+            startTime: formatISO(new Date(date)),
-            endTime: moment(date).add(course.duration).toISOString(),
+            endTime: formatISO(add(new Date(date), parseISODuration(course.duration))),
             course,
           });
         }

frontend/app/src/app/modules/profile/page/my-courses.html

@@ -7,9 +7,9 @@
     <ion-item slot="header">
       <!-- TODO: when using date-fns, use https://date-fns.org/v2.30.0/docs/formatRelative -->
       <ion-label
-        >{{ myCoursesDay[0] | amDateFormat: 'dddd, ll' }} - {{ ('profile.courses.' + (myCoursesDay[1].length
+        >{{ myCoursesDay[0] | dfnsParseIso | dfnsFormatRelativeDatePure | titlecase }} - {{
-        === 0 ? 'NO' : myCoursesDay[1].length === 1 ? 'ONE' : 'MANY' ) + '_EVENT') | translate: {count:
+        ('profile.courses.' + (myCoursesDay[1].length === 0 ? 'NO' : myCoursesDay[1].length === 1 ? 'ONE' :
-        myCoursesDay[1].length} }}</ion-label
+        'MANY' ) + '_EVENT') | translate: {count: myCoursesDay[1].length} }}</ion-label
       >
       <ion-icon class="ion-accordion-toggle-icon" name="expand_more"></ion-icon>
     </ion-item>
@@ -20,8 +20,8 @@
       <ng-container *ngFor="let myCourse of myCoursesDay[1]">
         <ion-item-group>
           <ion-item-divider
-            >{{myCourse.startTime | amDateFormat: 'LT'}} - {{myCourse.endTime | amDateFormat:
+            >{{myCourse.startTime | dfnsParseIso | dfnsFormatPure: 'p'}} - {{myCourse.endTime | dfnsParseIso |
-            'LT'}}</ion-item-divider
+            dfnsFormatPure: 'p'}}</ion-item-divider
           >
           <stapps-data-list-item
             [listItemChipInteraction]="false"

frontend/app/src/app/modules/profile/profile.module.ts

@@ -26,7 +26,8 @@ import {ProfilePageSectionComponent} from './page/profile-page-section.component
 import {ThingTranslateModule} from '../../translation/thing-translate.module';
 import {DataModule} from '../data/data.module';
 import {MyCoursesComponent} from './page/my-courses.component';
-import {MomentModule} from 'ngx-moment';
+import {ParseIsoPipeModule} from 'ngx-date-fns';
+import {DfnsFormatRelativeDatePurePipe} from '../../translation/date-time/format-relative-date.pipe';
 
 const routes: Routes = [
   {
@@ -48,7 +49,8 @@ const routes: Routes = [
     UtilModule,
     ThingTranslateModule,
     DataModule,
-    MomentModule,
+    DfnsFormatRelativeDatePurePipe,
+    ParseIsoPipeModule,
   ],
 })
 export class ProfilePageModule {}

frontend/app/src/app/modules/schedule/page/calendar-view.component.ts

@@ -14,7 +14,6 @@
  */
 import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
-import moment from 'moment';
 import {materialFade, materialManualFade, materialSharedAxisX} from '../../../animation/material-motion';
 import {ScheduleResponsiveBreakpoint} from './schema/schema';
 import {ScheduleProvider} from '../../calendar/schedule.provider';
@@ -36,8 +35,6 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 export class CalendarViewComponent extends CalendarComponent implements OnInit, AfterViewInit {
   @ViewChild('mainSwiper') mainSwiper: InfiniteSwiperComponent;
 
-  @ViewChild('headerSwiper') headerSwiper: InfiniteSwiperComponent;
-
   @ViewChild('content') content: IonContent;
 
   /**
@@ -50,11 +47,6 @@ export class CalendarViewComponent extends CalendarComponent implements OnInit,
    */
   scale = 70;
 
-  /**
-   * For use in templates
-   */
-  moment = moment;
-
   constructor(
     activatedRoute: ActivatedRoute,
     calendarService: CalendarService,
@@ -67,7 +59,7 @@ export class CalendarViewComponent extends CalendarComponent implements OnInit,
     // member ordering, auto-fixing the file can still cause reordering
     // of properties.
     const hoursAmount = this.hoursRange.to - this.hoursRange.from + 1;
-    this.hours = [...Array.from({length: hoursAmount}).keys()];
+    this.hours = Array.from({length: hoursAmount}).map((_, i) => i);
   }
 
   /**

frontend/app/src/app/modules/schedule/page/calendar-view.html

@@ -19,32 +19,23 @@
   <ion-button fill="clear" class="right-button" (click)="mainSwiper.pageForward()">
     <ion-icon slot="icon-only" name="navigate_next"></ion-icon>
   </ion-button>
-  <infinite-swiper
+  <div class="day-labels">
-    class="header-swiper"
+    <ion-button expand="block" fill="clear" (click)="popover.present($event)">
-    #headerSwiper
+      {{ dateRange.startDate | dfnsFormatPure : 'P' }} - {{ dateRange.endDate | dfnsFormatPure : 'P' }}
-    [slidesPerView]="1"
+    </ion-button>
-    (indexChange)="onHeaderSwipe($event, mainSwiper)"
-  >
-    <ng-template let-index>
-      <div *ngIf="index | dateFromIndex : baselineDate as date" class="day-labels">
-        <ion-button expand="block" fill="clear" [id]="'date-select-button' + index">
-          {{ dateRange.startDate }} - {{ dateRange.endDate }}
-        </ion-button>
 
-        <ion-popover [trigger]="'date-select-button' + index">
+    <ion-popover #popover>
-          <ng-template>
+      <ng-template>
-            <ion-datetime
+        <ion-datetime
-              #popoverDateTime
+          #popoverDateTime
-              presentation="date"
+          presentation="date"
-              [value]="date | amDateFormat : 'YYYY-MM-DD'"
+          [value]="dateRange.startDate.toISOString()"
-              (ionChange)="presentDatePopover(mainSwiper, headerSwiper, index, popoverDateTime)"
+          (ionChange)="presentDatePopover(mainSwiper, popoverDateTime)"
-            >
+        >
-            </ion-datetime>
+        </ion-datetime>
-          </ng-template>
+      </ng-template>
-        </ion-popover>
+    </ion-popover>
-      </div>
+  </div>
-    </ng-template>
-  </infinite-swiper>
 </div>
 
 <ion-content #content>
@@ -64,13 +55,13 @@
       >
         <ng-template let-index>
           <schedule-day
-            [day]="index | dateFromIndex : baselineDate"
+            [day]="baselineDate | dfnsAddDays: index"
             [hoursRange]="hoursRange"
             [scale]="scale"
             [uuids]="uuids"
             [dateSeries]="testSchedule[index]"
             [layout]="layout"
-            [isLeftmost]="dateRange.startDate === (index | dateFromIndex : baselineDate).format('DD.MM.YY')"
+            [isLeftmost]="dateRange.startDate | dfnsIsSameDay : (baselineDate | dfnsAddDays: index)"
           >
           </schedule-day>
         </ng-template>

frontend/app/src/app/modules/schedule/page/components/calendar.component.ts

@@ -15,16 +15,15 @@
 import {Component, DestroyRef, inject, Input, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {SCISO8601Date, SCUuid} from '@openstapps/core';
-import moment, {Moment} from 'moment';
 import {materialFade, materialManualFade, materialSharedAxisX} from '../../../../animation/material-motion';
 import {ScheduleProvider} from '../../../calendar/schedule.provider';
 import {ScheduleEvent, ScheduleResponsiveBreakpoint} from '../schema/schema';
-import {SwiperComponent} from 'swiper/angular';
 import {InfiniteSwiperComponent} from '../grid/infinite-swiper.component';
 import {IonContent, IonDatetime} from '@ionic/angular';
 import {CalendarService} from '../../../calendar/calendar.service';
 import {getScheduleCursorOffset} from '../grid/schedule-cursor-offset';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {addDays, differenceInDays, formatISO, getHours, isValid, parseISO, startOfDay} from 'date-fns';
 
 /**
  * Component that displays the schedule
@@ -39,17 +38,14 @@ export class CalendarComponent implements OnInit {
   /**
    * The day that the schedule started out on
    */
-  @Input() baselineDate: Moment;
+  @Input() baselineDate: Date;
 
   /**
    * Range of date of the slides shown on screen.
    */
-  dateRange: {
+  dateRange = {
-    startDate: string;
+    startDate: new Date(),
-    endDate: string;
+    endDate: new Date(),
-  } = {
-    startDate: '',
-    endDate: '',
   };
 
   prevHeaderIndex = 0;
@@ -98,7 +94,7 @@ export class CalendarComponent implements OnInit {
 
   @Input() useInfiniteSwiper = true;
 
-  @Input() weekDates: Array<Moment>;
+  @Input() weekDates: Array<Date>;
 
   destroy$ = inject(DestroyRef);
 
@@ -109,15 +105,9 @@ export class CalendarComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    let dayString: string | number | null = this.activatedRoute.snapshot.paramMap.get('date');
+    this.baselineDate = parseISO(this.activatedRoute.snapshot.paramMap.get('date') ?? '');
-    if (dayString == undefined || dayString === 'now') {
+    if (!isValid(this.baselineDate)) this.baselineDate = new Date();
-      const fragments = window.location.href.split('/');
+    this.baselineDate = startOfDay(this.baselineDate);
-      const urlFragment: string = fragments.at(-1) ?? '';
-
-      dayString = /^\d{4}-\d{2}-\d{2}$/.test(urlFragment) ? urlFragment : moment.now();
-    }
-
-    this.baselineDate = moment(dayString).startOf('day');
 
     this.initialSlideIndex = new Promise(resolve => {
       this.scheduleProvider.uuids$.pipe(takeUntilDestroyed(this.destroy$)).subscribe(async result => {
@@ -126,8 +116,8 @@ export class CalendarComponent implements OnInit {
       });
     });
 
-    this.dateRange.startDate = this.calculateDateFromIndex(0, 0, 'DD.MM.YY');
+    this.dateRange.startDate = addDays(this.baselineDate, 0);
-    this.dateRange.endDate = this.calculateDateFromIndex(0, this.layout.days - 1, 'DD.MM.YY');
+    this.dateRange.endDate = addDays(this.baselineDate, this.layout.days - 1);
   }
 
   async scrollCursorIntoView(content: IonContent) {
@@ -137,30 +127,22 @@ export class CalendarComponent implements OnInit {
     });
   }
 
-  /**
-   * Get date from baseline date and index of current slide.
-   * @param index number
-   * @param delta number - is added to index
-   * @param dateFormat string
-   */
-  calculateDateFromIndex(index: number, delta = 0, dateFormat = 'YYYY-MM-DD') {
-    return moment(this.baselineDate)
-      .add(index + delta, 'days')
-      .format(dateFormat);
-  }
-
   /**
    * Change page
    */
   onPageChange(index: number) {
     this.setDateRange(index);
 
-    window.history.replaceState({}, '', `${this.routeFragment}/${this.calculateDateFromIndex(index)}`);
+    window.history.replaceState(
+      {},
+      '',
+      `${this.routeFragment}/${formatISO(addDays(this.baselineDate, index), {representation: 'date'})}`,
+    );
   }
 
   setDateRange(index: number) {
-    this.dateRange.startDate = this.calculateDateFromIndex(index, 0, 'DD.MM.YY');
+    this.dateRange.startDate = addDays(this.baselineDate, index);
-    this.dateRange.endDate = this.calculateDateFromIndex(index, this.layout.days - 1, 'DD.MM.YY');
+    this.dateRange.endDate = addDays(this.baselineDate, index + (this.layout.days - 1));
   }
 
   onHeaderSwipe(index: number, infiniteController: InfiniteSwiperComponent) {
@@ -173,18 +155,8 @@ export class CalendarComponent implements OnInit {
     this.prevHeaderIndex = index;
   }
 
-  syncSwiper(self: SwiperComponent, other: SwiperComponent) {
+  presentDatePopover(mainSwiper: InfiniteSwiperComponent, popoverDateTime: IonDatetime) {
-    other.swiperRef.slideTo(self.swiperRef.activeIndex);
+    const nextIndex = differenceInDays(parseISO(popoverDateTime.value as string), this.baselineDate);
-  }
-
-  presentDatePopover(
-    mainSwiper: InfiniteSwiperComponent,
-    headerSwiper: InfiniteSwiperComponent,
-    index: number,
-    popoverDateTime: IonDatetime,
-  ) {
-    const nextIndex =
-      moment(popoverDateTime.value).diff(this.baselineDate, 'days') - headerSwiper.virtualIndex - index;
 
     mainSwiper.goToIndex(nextIndex).then(() => {
       this.setDateRange(nextIndex);
@@ -203,13 +175,13 @@ export class CalendarComponent implements OnInit {
 
     for (const series of dateSeries.dates) {
       for (const date of series.dates) {
-        const index = moment(date).startOf('day').diff(this.baselineDate, 'days');
+        const index = differenceInDays(startOfDay(parseISO(date)), this.baselineDate);
 
         // fall back to default
         (this.testSchedule[index] ?? (this.testSchedule[index] = {}))[series.uid] = {
           dateSeries: series,
           time: {
-            start: moment(date).hours(),
+            start: getHours(parseISO(date)),
             duration: series.duration,
           },
         };

frontend/app/src/app/modules/schedule/page/grid/infinite-swiper.component.ts

@@ -22,7 +22,6 @@ import {
   Input,
   OnChanges,
   OnDestroy,
-  OnInit,
   Output,
   QueryList,
   SimpleChanges,
@@ -59,7 +58,7 @@ async function wait(ms?: number) {
   styleUrls: ['infinite-swiper.scss'],
   animations: [materialManualFade],
 })
-export class InfiniteSwiperComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
+export class InfiniteSwiperComponent implements AfterViewInit, OnDestroy, OnChanges {
   @Input() controller?: InfiniteSwiperComponent;
 
   @Input() slidesPerView = 5;
@@ -86,11 +85,10 @@ export class InfiniteSwiperComponent implements OnInit, AfterViewInit, OnDestroy
 
   private preventControllerCallback = false;
 
-  ngOnInit() {
+  async ngAfterViewInit() {
-    this.createSwiper();
+    const swiper = this.createSwiper();
-  }
+    await wait();
-
+    this.swiper = swiper;
-  ngAfterViewInit() {
     this.initSwiper();
   }
 
@@ -102,7 +100,7 @@ export class InfiniteSwiperComponent implements OnInit, AfterViewInit, OnDestroy
   async ngOnChanges(changes: SimpleChanges) {
     if ('slidesPerView' in changes) {
       const change = changes.slidesPerView;
-      if (change.isFirstChange()) return;
+      if (change.isFirstChange() || !this.swiper) return;
 
       // little bit of a cheesy trick just to reinitialize
       // everything... But you know, it works just fine.
@@ -120,30 +118,18 @@ export class InfiniteSwiperComponent implements OnInit, AfterViewInit, OnDestroy
     }
   }
 
-  createSwiper() {
+  createSwiper(): Swiper {
     this.resetSlides();
 
-    // I have absolutely no clue why two results are returned here.
+    return new Swiper(this.swiperElement.nativeElement, {
-    // Probably a bug, so be on the lookout if you get odd errors
-    const [swiper] = new Swiper('.swiper', {
-      // TODO: evaluate if the controller has decent performance, some time in the future
-      // modules: [Controller],
       slidesPerView: this.slidesPerView,
       initialSlide: this.slidesPerView,
       init: false,
-    }) as unknown as [Swiper, Swiper];
+    });
-    this.swiper = swiper;
   }
 
   initSwiper() {
     this.swiper.init(this.swiperElement.nativeElement);
-    // SwiperJS controller still has some performance issues unfortunately...
-    // So unfortunately we are kind of forced to use a workaround :/
-    // TODO: evaluate if the controller has decent performance, some time in the future
-    /*setTimeout(() => {
-      this.swiper.controller.control = this.controller?.swiper;
-    });*/
-
     this.shiftSlides();
 
     this.swiper.on('activeIndexChange', () => {

frontend/app/src/app/modules/schedule/page/grid/schedule-card.component.ts

@@ -13,9 +13,9 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component, Input, OnInit} from '@angular/core';
-import moment from 'moment';
 import {ScheduleProvider} from '../../../calendar/schedule.provider';
 import {ScheduleEvent} from '../schema/schema';
+import {parse as parseISODuration, toHours} from 'duration-fns';
 
 /**
  * Component that can display a schedule event
@@ -86,7 +86,7 @@ export class ScheduleCardComponent implements OnInit {
    */
   ngOnInit() {
     this.fromY = this.noOffset ? 0 : this.scheduleEvent.time.start;
-    this.height = moment.duration(this.scheduleEvent.time.duration).asHours();
+    this.height = toHours(parseISODuration(this.scheduleEvent.time.duration));
 
     this.title = this.scheduleEvent.dateSeries.event.name;
 

frontend/app/src/app/modules/schedule/page/grid/schedule-card.html

@@ -25,8 +25,7 @@
 >
   <ion-card-header mode="md">
     <ion-card-title>
-      {{ this.scheduleEvent?.dateSeries?.event?.name | nullishCoalesce : this.scheduleEvent?.dateSeries?.name
+      {{ this.scheduleEvent?.dateSeries?.event?.name ?? this.scheduleEvent?.dateSeries?.name }}
-      }}
     </ion-card-title>
   </ion-card-header>
   <ion-card-content>

frontend/app/src/app/modules/schedule/page/grid/schedule-cursor.component.ts

@@ -14,8 +14,8 @@
  */
 import {Component, Input, OnInit} from '@angular/core';
 import {HoursRange} from '../schema/schema';
-import moment from 'moment';
 import {getScheduleCursorOffset} from './schedule-cursor-offset';
+import {getHours, getMinutes} from 'date-fns';
 
 /**
  * Component that displays the schedule
@@ -54,13 +54,8 @@ export class ScheduleCursorComponent implements OnInit {
    * Get a floating point time 0..24
    */
   static getCursorTime(): number {
-    const mnt = moment(moment.now());
+    const now = new Date();
-
+    return getHours(now) + getMinutes(now) / 60;
-    const hh = mnt.hours();
-    const mm = mnt.minutes();
-
-    // tslint:disable-next-line:no-magic-numbers
-    return hh + mm / 60;
   }
 
   /**

frontend/app/src/app/modules/schedule/page/grid/schedule-day.component.ts

@@ -13,12 +13,12 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component, HostListener, Input, OnInit} from '@angular/core';
-import moment from 'moment';
 import {Range, ScheduleEvent, ScheduleResponsiveBreakpoint} from '../schema/schema';
 import {ScheduleProvider} from '../../../calendar/schedule.provider';
 import {SCISO8601Duration, SCUuid} from '@openstapps/core';
 import {materialFade} from '../../../../animation/material-motion';
 import {groupRangeOverlaps} from './range-overlap';
+import {parse as parseISODuration, toHours} from 'duration-fns';
 
 @Component({
   selector: 'schedule-day',
@@ -27,7 +27,7 @@ import {groupRangeOverlaps} from './range-overlap';
   animations: [materialFade],
 })
 export class ScheduleDayComponent implements OnInit {
-  @Input() day: moment.Moment;
+  @Input() day: Date;
 
   @Input() hoursRange: Range<number>;
 
@@ -52,7 +52,7 @@ export class ScheduleDayComponent implements OnInit {
     this.dateSeriesGroups = groupRangeOverlaps(
       Object.values(value),
       it => it.time.start,
-      it => it.time.start + moment.duration(it.time.duration).asHours(),
+      it => it.time.start + toHours(parseISODuration(it.time.duration)),
     ).map(it => it.elements);
   }
 
@@ -71,7 +71,7 @@ export class ScheduleDayComponent implements OnInit {
 
   private determineDateFormat() {
     this.dateFormat =
-      this.layout && window.innerWidth > 1024 && window.innerWidth <= this.layout?.until ? 'dddd' : 'dd';
+      this.layout && window.innerWidth > 1024 && window.innerWidth <= this.layout?.until ? 'EEEE' : 'EE';
   }
 
   // TODO: backend bug results in the wrong date series being returned

frontend/app/src/app/modules/schedule/page/grid/schedule-day.html

@@ -13,7 +13,7 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 <div class="day-wrapper" [class.leftmost]="isLeftmost">
-  <div class="day-header" [class.leftmost]="isLeftmost">{{ day | amDateFormat : dateFormat }}</div>
+  <div class="day-header" [class.leftmost]="isLeftmost">{{ day | dfnsFormatPure : dateFormat }}</div>
   <div *ngIf="dateSeriesGroups as groups">
     <div *ngFor="let group of groups" class="horizontal-group">
       <stapps-schedule-card
@@ -26,6 +26,6 @@
       </stapps-schedule-card>
     </div>
   </div>
-  <stapps-schedule-cursor *ngIf="day | dateIsThis : 'date'" [hoursRange]="hoursRange" [scale]="scale">
+  <stapps-schedule-cursor *ngIf="day | dfnsIsToday" [hoursRange]="hoursRange" [scale]="scale">
   </stapps-schedule-cursor>
 </div>

frontend/app/src/app/modules/schedule/page/schedule-page.component.ts

@@ -20,8 +20,8 @@ import {SharedAxisChoreographer} from '../../../animation/animation-choreographe
 import {materialSharedAxisX} from '../../../animation/material-motion';
 import {ScheduleResponsiveBreakpoint} from './schema/schema';
 import {CalendarService} from '../../calendar/calendar.service';
-import moment from 'moment';
 import {fabExpand} from '../../../animation/fab-expand';
+import {startOfToday} from 'date-fns';
 
 /**
  * This needs to be sorted by break point low -> high
@@ -168,6 +168,6 @@ export class SchedulePageComponent implements OnInit, AfterViewInit {
   }
 
   onTodayClick() {
-    this.calendarService.emitGoToDate(moment().startOf('day'));
+    this.calendarService.emitGoToDate(startOfToday());
   }
 }

frontend/app/src/app/modules/schedule/page/schedule-single-events.component.ts

@@ -14,12 +14,12 @@
  */
 import {Component, DestroyRef, inject, Input, OnInit} from '@angular/core';
 import {SCDateSeries, SCUuid} from '@openstapps/core';
-import moment from 'moment';
 import {materialFade} from '../../../animation/material-motion';
 import {ScheduleProvider} from '../../calendar/schedule.provider';
 import {ScheduleEvent} from './schema/schema';
-import {groupBy, omit, stringSortBy} from '@openstapps/collection-utils';
+import {groupBy, stringSortBy} from '@openstapps/collection-utils';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {compareAsc, formatISO, getHours, getMinutes, parseISO, startOfDay, startOfWeek} from 'date-fns';
 
 /**
  * A single event
@@ -28,7 +28,12 @@ export interface ScheduleSingleEvent {
   /**
    * Day the event is on
    */
-  day: string;
+  day: Date;
+
+  /**
+   * The full date the event is on, including time
+   */
+  date: Date;
 
   /**
    * The event the date is referring to
@@ -72,27 +77,19 @@ export class ScheduleSingleEventsComponent implements OnInit {
         dateSeries
           .flatMap(event =>
             event.dates.map(date => ({
-              dateUnix: moment(date).unix(),
+              day: startOfDay(parseISO(date)),
-              day: moment(date).startOf('day').toISOString(),
+              date: parseISO(date),
               event: {
                 dateSeries: event,
                 time: {
-                  start:
+                  start: getHours(parseISO(date)) + getMinutes(parseISO(date)) / 60,
-                    moment(date).hour() +
-                    moment(date)
-                      // tslint:disable-next-line:no-magic-numbers
-                      .minute() /
-                      60,
-                  startAsString: moment(date).format('LT'),
                   duration: event.duration,
-                  endAsString: moment(date).add(event.duration).format('LT'),
                 },
               },
             })),
           )
-          .sort((a, b) => a.dateUnix - b.dateUnix)
+          .sort((a, b) => compareAsc(a.date, b.date)),
-          .map(event => omit(event, 'dateUnix')),
+        it => formatISO(it.day),
-        it => it.day,
       ),
     )
       .sort(stringSortBy(([key]) => key))
@@ -109,7 +106,7 @@ export class ScheduleSingleEventsComponent implements OnInit {
     const dateSeries = await this.scheduleProvider.getDateSeries(
       this.uuids,
       undefined /*TODO*/,
-      moment(moment.now()).startOf('week').toISOString(),
+      formatISO(startOfWeek(Date.now())),
     );
 
     // TODO: replace with filter

frontend/app/src/app/modules/schedule/page/schedule-single-events.html

@@ -16,7 +16,7 @@
 <ion-content @materialFade>
   <ion-list lines="none">
     <ion-item-group *ngFor="let day of events | async" @materialFade>
-      <ion-label class="day-label" color="medium"> {{ day[0].day | amDateFormat : 'LL' }} </ion-label>
+      <ion-label class="day-label" color="medium"> {{ day[0].day | dfnsFormatPure : 'PPP' }} </ion-label>
       <ion-item *ngFor="let event of day" lines="none">
         <div class="hour-wrapper">
           <ion-text class="hour-label"> {{ event.event.time.startAsString }} </ion-text>

frontend/app/src/app/modules/schedule/page/schedule-single-events.spec.ts

@@ -12,10 +12,9 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
 import {SCDateSeries} from '@openstapps/core';
 import {ScheduleSingleEventsComponent} from './schedule-single-events.component';
-import moment from 'moment';
+import {getHours, getMinutes, parseISO, startOfDay} from 'date-fns';
 
 describe('ScheduleSingleEvents', () => {
   it('should group date series to days', () => {
@@ -36,17 +35,16 @@ describe('ScheduleSingleEvents', () => {
 
     const grouped = ScheduleSingleEventsComponent.groupDateSeriesToDays(events as SCDateSeries[]);
     const seriesToDate = (series: Partial<SCDateSeries>, index: number) => {
-      const time = moment(series.dates?.[index]);
+      const time = parseISO(series.dates![index]);
 
       return {
-        day: time.clone().startOf('day').toISOString(),
+        day: startOfDay(time),
+        date: time,
         event: {
           dateSeries: series as SCDateSeries,
           time: {
-            start: time.hour() + time.minute() / 60,
+            start: getHours(time) + getMinutes(time) / 60,
-            startAsString: moment(time).format('LT'),
             duration: series.duration as string,
-            endAsString: moment(time).add(series.duration?.[index]).format('LT'),
           },
         },
       };

frontend/app/src/app/modules/schedule/page/schedule-view.component.ts

@@ -14,15 +14,15 @@
  */
 import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
-import moment, {Moment} from 'moment';
 import {materialFade, materialManualFade, materialSharedAxisX} from '../../../animation/material-motion';
 import {ScheduleProvider} from '../../calendar/schedule.provider';
 import {SCISO8601Date, SCUuid} from '@openstapps/core';
 import {ScheduleEvent, ScheduleResponsiveBreakpoint} from './schema/schema';
 import {CalendarService} from '../../calendar/calendar.service';
 import {CalendarComponent} from './components/calendar.component';
-import {IonContent, IonDatetime} from '@ionic/angular';
+import {IonContent} from '@ionic/angular';
 import {SwiperComponent} from 'swiper/angular';
+import {addDays, differenceInDays, formatISO, getDay, getHours, parseISO, startOfWeek} from 'date-fns';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 /**
@@ -37,14 +37,12 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 export class ScheduleViewComponent extends CalendarComponent implements OnInit, AfterViewInit {
   @ViewChild('mainSwiper') mainSwiper: SwiperComponent;
 
-  @ViewChild('headerSwiper') headerSwiper: SwiperComponent;
-
   @ViewChild('content') content: IonContent;
 
   /**
    * The day that the schedule started out on
    */
-  baselineDate: Moment;
+  baselineDate = new Date();
 
   /**
    * Hours for grid
@@ -80,7 +78,7 @@ export class ScheduleViewComponent extends CalendarComponent implements OnInit,
   // start at fist weekday depending on locale
   weekDates = Array.from({length: 7}).map(
     // eslint-disable-next-line unicorn/consistent-function-scoping
-    (_, i) => moment().startOf('week').add(i, 'days'),
+    (_, i) => addDays(startOfWeek(Date.now()), i),
   );
 
   constructor(
@@ -90,7 +88,7 @@ export class ScheduleViewComponent extends CalendarComponent implements OnInit,
   ) {
     super(activatedRoute, calendarService, scheduleProvider);
     const hoursAmount = this.hoursRange.to - this.hoursRange.from + 1;
-    this.hours = [...Array.from({length: hoursAmount}).keys()];
+    this.hours = Array.from({length: hoursAmount}).map((_, i) => i);
   }
 
   /**
@@ -111,7 +109,7 @@ export class ScheduleViewComponent extends CalendarComponent implements OnInit,
    * Slide today into view.
    */
   slideToToday() {
-    const todayIndex = Number(moment().startOf('week').format('d')) + 1;
+    const todayIndex = differenceInDays(startOfWeek(Date.now()), this.baselineDate);
     this.mainSwiper?.swiperRef.slideTo(todayIndex);
     this.setDateRange(todayIndex);
 
@@ -126,7 +124,7 @@ export class ScheduleViewComponent extends CalendarComponent implements OnInit,
     const dateSeries = await this.scheduleProvider.getDateSeries(
       this.uuids,
       ['P1W', 'P2W', 'P3W', 'P4W'],
-      moment(moment.now()).startOf('week').toISOString(),
+      formatISO(startOfWeek(Date.now())),
     );
 
     this.testSchedule = {};
@@ -134,7 +132,7 @@ export class ScheduleViewComponent extends CalendarComponent implements OnInit,
     for (const series of dateSeries.dates) {
       const weekDays = Object.keys(
         series.dates.reduce((accumulator, date) => {
-          accumulator[moment(date).weekday()] = true;
+          accumulator[getDay(parseISO(date))] = true;
           return accumulator;
         }, {} as Record<number, true>),
       );
@@ -144,7 +142,7 @@ export class ScheduleViewComponent extends CalendarComponent implements OnInit,
         (this.testSchedule[day] ?? (this.testSchedule[day] = {}))[series.uid] = {
           dateSeries: series,
           time: {
-            start: moment(series.dates[0]).hours(),
+            start: getHours(parseISO(series.dates[0])),
             duration: series.duration,
           },
         };
@@ -153,15 +151,4 @@ export class ScheduleViewComponent extends CalendarComponent implements OnInit,
 
     return this.todaySlideIndex;
   }
-
-  presentScheduleDatePopover(index: number, popoverDateTime: IonDatetime) {
-    const nextIndex =
-      moment(popoverDateTime.value).diff(this.baselineDate, 'days') -
-      this.headerSwiper.swiperRef.realIndex -
-      index;
-
-    this.mainSwiper.swiperRef.slideTo(nextIndex);
-    this.setDateRange(nextIndex);
-    popoverDateTime.confirm(true);
-  }
 }

frontend/app/src/app/modules/schedule/page/schedule-view.html

@@ -19,39 +19,13 @@
   <ion-button fill="clear" class="right-button" (click)="mainSwiper.swiperRef.slideNext()">
     <ion-icon slot="icon-only" name="navigate_next"></ion-icon>
   </ion-button>
-  <swiper
-    class="header-swiper"
-    #headerSwiper
-    [slidesPerView]="1"
-    (activeIndexChange)="syncSwiper(headerSwiper, mainSwiper)"
-  >
-    <ng-template let-index>
-      <div *ngIf="index | dateFromIndex : baselineDate as date" class="day-labels">
-        <ion-button expand="block" fill="clear" [id]="'date-select-button' + index">
-          {{ dateRange.startDate }} - {{ dateRange.endDate }}
-        </ion-button>
-
-        <ion-popover [trigger]="'date-select-button' + index">
-          <ng-template>
-            <ion-datetime
-              #popoverDateTime
-              presentation="date"
-              [value]="date | amDateFormat : 'YYYY-MM-DD'"
-              (ionChange)="presentScheduleDatePopover(index, popoverDateTime)"
-            >
-            </ion-datetime>
-          </ng-template>
-        </ion-popover>
-      </div>
-    </ng-template>
-  </swiper>
 </div>
 
 <ion-content #content>
   <div class="schedule-wrapper" [style.height.px]="scale * (hoursRange.to - hoursRange.from + 1) + scale">
     <div class="hours-wrapper">
       <!-- add margin top +45 to start below the date header -->
-      <div class="hour-lines" *ngFor="let i of hours" [style.marginTop.px]="i * scale + 45">
+      <div class="hour-lines" *ngFor="let i of hours" [style.margin-top.px]="i * scale + 45">
         {{ i + hoursRange.from }}
       </div>
     </div>
@@ -60,7 +34,6 @@
         #mainSwiper
         [slidesPerView]="layout.days"
         (indexChange)="onPageChange($event)"
-        (activeIndexChange)="syncSwiper(mainSwiper, headerSwiper)"
         class="full-height"
       >
         <ng-template swiperSlide *ngFor="let day of weekDates; index as i">
@@ -71,7 +44,7 @@
             [uuids]="uuids"
             [dateSeries]="testSchedule[i]"
             [layout]="layout"
-            [isLeftmost]="dateRange.startDate === (i | dateFromIndex : baselineDate).format('DD.MM.YY')"
+            [isLeftmost]="dateRange.startDate | dfnsIsSameDay : (baselineDate | dfnsAddDays : i)"
           >
           </schedule-day>
         </ng-template>

frontend/app/src/app/modules/schedule/page/schema/schema.ts

@@ -12,9 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
 import {SCDateSeries, SCISO8601Duration} from '@openstapps/core';
-import {unitOfTime} from 'moment';
 
 interface DateRange {
   duration: SCISO8601Duration;
@@ -67,7 +65,7 @@ export interface ScheduleResponsiveBreakpoint {
   /**
    * When the first day should start
    */
-  startOf: unitOfTime.StartOf;
+  startOf: 'day' | 'week';
 
   /**
    * Width until next breakpoint is hit

frontend/app/src/app/modules/schedule/schedule.module.ts

@@ -19,8 +19,6 @@ import {RouterModule, Routes} from '@angular/router';
 import {IonicModule} from '@ionic/angular';
 import {TranslateModule} from '@ngx-translate/core';
 import {ScheduleCardComponent} from './page/grid/schedule-card.component';
-
-import {DateFormatPipe, MomentModule} from 'ngx-moment';
 import {UtilModule} from '../../util/util.module';
 import {DataModule} from '../data/data.module';
 import {DataProvider} from '../data/data.provider';
@@ -37,6 +35,7 @@ import {InfiniteSwiperComponent} from './page/grid/infinite-swiper.component';
 import {CalendarComponent} from './page/components/calendar.component';
 import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 import {ChooseEventsPageComponent} from './page/choose-events-page.component';
+import {AddDaysPipeModule, FormatPurePipeModule, IsSameDayPipeModule, IsTodayPipeModule} from 'ngx-date-fns';
 
 const settingsRoutes: Routes = [
   {path: 'schedule', redirectTo: 'schedule/calendar/now'},
@@ -71,13 +70,16 @@ const settingsRoutes: Routes = [
     FormsModule,
     IonicModule.forRoot(),
     IonIconModule,
-    MomentModule,
     RouterModule.forChild(settingsRoutes),
     SwiperModule,
     TranslateModule.forChild(),
     UtilModule,
     ThingTranslateModule,
+    AddDaysPipeModule,
+    IsSameDayPipeModule,
+    FormatPurePipeModule,
+    IsTodayPipeModule,
   ],
-  providers: [ScheduleProvider, DataProvider, DateFormatPipe],
+  providers: [ScheduleProvider, DataProvider],
 })
 export class ScheduleModule {}

frontend/app/src/app/translation/common-string-pipes.ts

@@ -14,7 +14,6 @@
  */
 import {Injectable, OnDestroy, Pipe, PipeTransform} from '@angular/core';
 import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
-import moment from 'moment';
 import {Subscription} from 'rxjs';
 import {logger} from '../_helpers/ts-logger';
 
@@ -52,17 +51,6 @@ export class EntriesPipe implements PipeTransform {
   }
 }
 
-@Injectable()
-@Pipe({
-  name: 'toUnix',
-  pure: true,
-})
-export class ToUnixPipe implements PipeTransform {
-  transform(value: string | number | Date | null | undefined): number {
-    return (value instanceof Date ? value : new Date(value ?? 0)).valueOf();
-  }
-}
-
 @Injectable()
 @Pipe({
   name: 'sentencecase',
@@ -108,79 +96,6 @@ export class StringSplitPipe implements PipeTransform {
     return this.value as never;
   }
 }
-@Injectable()
-@Pipe({
-  name: 'durationLocalized',
-  pure: true,
-})
-export class DurationLocalizedPipe implements PipeTransform, OnDestroy {
-  locale: string;
-
-  onLangChange?: Subscription;
-
-  value: string;
-
-  frequencyPrefixes: {[iso6391Code: string]: string} = {
-    de: 'alle',
-    en: 'every',
-    es: 'cada',
-    pt: 'a cada',
-    fr: 'tous les',
-    cn: '每',
-    ru: 'kаждые',
-  };
-
-  constructor(private readonly translate: TranslateService) {
-    this.locale = translate.currentLang;
-  }
-
-  private _dispose(): void {
-    if (this.onLangChange?.closed === false) {
-      this.onLangChange?.unsubscribe();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this._dispose();
-  }
-
-  /**
-   * @param value An ISO 8601 duration string
-   * @param isFrequency Boolean indicating if this duration is to be interpreted as repeat frequency
-   */
-  transform(value: string | unknown, isFrequency = false): string {
-    this.updateValue(value, isFrequency);
-    this._dispose();
-    if (this.onLangChange?.closed === true) {
-      this.onLangChange = this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
-        this.locale = event.lang;
-        this.updateValue(value, isFrequency);
-      });
-    }
-
-    return this.value;
-  }
-
-  updateValue(value: string | unknown, isFrequency = false): void {
-    if (typeof value !== 'string') {
-      logger.warn(`durationLocalized pipe unable to parse input: ${value}`);
-
-      return;
-    }
-
-    if (isFrequency) {
-      const fequencyPrefix = Object.keys(this.frequencyPrefixes).filter(element =>
-        this.locale.includes(element),
-      );
-      this.value = [
-        fequencyPrefix.length > 0 ? this.frequencyPrefixes[fequencyPrefix[0]] : this.frequencyPrefixes.en,
-        moment.duration(value).humanize(),
-      ].join(' ');
-    } else {
-      this.value = moment.duration(value).humanize();
-    }
-  }
-}
 
 @Injectable()
 @Pipe({
@@ -339,78 +254,3 @@ export class NumberLocalizedPipe implements PipeTransform, OnDestroy {
     this.value = new Intl.NumberFormat(this.locale, options).format(float);
   }
 }
-
-@Injectable()
-@Pipe({
-  name: 'dateFormat',
-  pure: true,
-})
-export class DateLocalizedFormatPipe implements PipeTransform, OnDestroy {
-  locale: string;
-
-  onLangChange?: Subscription;
-
-  value: string;
-
-  constructor(private readonly translate: TranslateService) {
-    this.locale = translate.currentLang;
-  }
-
-  private _dispose(): void {
-    if (this.onLangChange?.closed === false) {
-      this.onLangChange?.unsubscribe();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this._dispose();
-  }
-
-  /**
-   * @param value The date to be formatted
-   * @param formatOptions Dateformat options to include.
-   * As specified by Intl.DateTimeFormatOptions as comma seperated key:value pairs
-   * Default is year,month,day,hour and minute in numeric representation e.g. (en-US) "8/6/2021, 10:35"
-   */
-  transform(value: string | unknown, formatOptions?: string): string {
-    this.updateValue(value, formatOptions);
-    this._dispose();
-    if (this.onLangChange?.closed === true) {
-      this.onLangChange = this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
-        this.locale = event.lang;
-        this.updateValue(value, formatOptions);
-      });
-    }
-
-    return this.value;
-  }
-
-  updateValue(value: string | Date | unknown, formatOptions?: string): void {
-    if (typeof value !== 'string' && Object.prototype.toString.call(value) !== '[object Date]') {
-      logger.warn(`dateFormat pipe unable to parse input: ${value}`);
-
-      return;
-    }
-    const options = formatOptions
-      ?.split(',')
-      .map(element => element.split(':'))
-      .reduce(
-        (accumulator, [key, value_]) => ({
-          ...accumulator,
-          [key.trim()]: value_.trim(),
-        }),
-        {},
-      ) as Intl.DateTimeFormatOptions;
-    const date = typeof value === 'string' ? Date.parse(value) : (value as Date);
-    this.value = new Intl.DateTimeFormat(
-      this.locale,
-      options ?? {
-        day: 'numeric',
-        month: 'numeric',
-        year: 'numeric',
-        hour: 'numeric',
-        minute: 'numeric',
-      },
-    ).format(date);
-  }
-}

frontend/app/src/app/translation/date-time/format-frequency.pipe.ts

@@ -0,0 +1,14 @@
+import {Injectable, Pipe, PipeTransform} from '@angular/core';
+import {formatFrequency} from './format-frequency';
+
+@Injectable()
+@Pipe({
+  name: 'dfnsFormatFrequencyPure',
+  standalone: true,
+  pure: true,
+})
+export class DfnsFormatFrequencyPurePipe implements PipeTransform {
+  transform(duration: Duration): string {
+    return formatFrequency(duration);
+  }
+}

frontend/app/src/app/translation/date-time/format-frequency.ts

@@ -0,0 +1,22 @@
+import {Duration, formatDuration, getDefaultOptions} from 'date-fns';
+import {LocaleExtension} from '../dfns-locale';
+
+/**
+ * Formats a duration to a frequency
+ * @param duration the duration to format as a frequency
+ * @example "alle 3 Tage"
+ */
+export function formatFrequency(duration: Duration): string {
+  const {locale} = getDefaultOptions() as {locale: LocaleExtension};
+  locale.formatFrequencyOptions;
+
+  // This will break...
+  const formatted = formatDuration(duration);
+  const plural = new Intl.PluralRules(locale.code).select(Number(/\d+/.exec(formatted)?.[0]));
+  const formatString = locale.formatFrequencyOptions[plural] ?? locale.formatFrequencyOptions['many']!;
+
+  return formatString
+    .replaceAll(/(['"](?=\w))|((?<=\w)['"])/g, '')
+    .replaceAll(/{{\s*duration\s*}}/g, formatted)
+    .replaceAll(/{{\s*suffix\s*}}/g, formatted.replace(/^\d+\s*/, ''));
+}

frontend/app/src/app/translation/date-time/format-relative-date.pipe.ts

@@ -0,0 +1,13 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {formatRelativeDate} from './format-relative-date';
+
+@Pipe({
+  name: 'dfnsFormatRelativeDatePure',
+  pure: true,
+  standalone: true,
+})
+export class DfnsFormatRelativeDatePurePipe implements PipeTransform {
+  transform(date: Date | number, baseDate: Date | number = Date.now()): string {
+    return formatRelativeDate(date, baseDate);
+  }
+}

frontend/app/src/app/translation/date-time/format-relative-date.ts

@@ -0,0 +1,23 @@
+import {formatRelative, getDefaultOptions} from 'date-fns';
+import {LocaleExtension} from '../dfns-locale';
+
+/**
+ * @see {formatRelative}
+ */
+export function formatRelativeDate(
+  date: Date | number,
+  baseDate: Date | number,
+  options?: {
+    locale?: LocaleExtension;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  },
+): string {
+  const locale = options?.locale ?? (getDefaultOptions() as {locale: LocaleExtension}).locale;
+  const customLocale: LocaleExtension = {
+    ...locale,
+    formatRelative(token: keyof LocaleExtension['formatRelativeDateOptions']) {
+      return locale.formatRelativeDateOptions![token];
+    },
+  };
+  return formatRelative(date, baseDate, {locale: customLocale, weekStartsOn: options?.weekStartsOn});
+}

frontend/app/src/app/translation/date-time/parse-duration.pipe.ts

@@ -0,0 +1,14 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import type {Duration} from 'date-fns';
+import {DurationInput, parse as parseISODuration} from 'duration-fns';
+
+@Pipe({
+  name: 'dfnsParseDuration',
+  standalone: true,
+  pure: true,
+})
+export class ParseDurationPipe implements PipeTransform {
+  transform(duration: DurationInput): Duration {
+    return parseISODuration(duration);
+  }
+}

frontend/app/src/app/translation/dfns-locale.ts

@@ -14,6 +14,20 @@
  */
 import {SCLanguageCode} from '@openstapps/core';
 import type {Locale} from 'date-fns';
+import {TranslateService} from '@ngx-translate/core';
+import {firstValueFrom} from 'rxjs';
+
+export interface LocaleExtension extends Locale {
+  formatFrequencyOptions: Partial<Record<Intl.LDMLPluralRule, string>>;
+  formatRelativeDateOptions: {
+    lastWeek: string;
+    yesterday: string;
+    today: string;
+    tomorrow: string;
+    nextWeek: string;
+    other: string;
+  };
+}
 
 type LocalesMap = Record<SCLanguageCode, () => Promise<{default: Locale}>>;
 
@@ -25,11 +39,22 @@ const LOCALES = {
 /**
  * Get a Date Fns Locale
  */
-export async function getDateFnsLocale(code: SCLanguageCode): Promise<Locale> {
+export async function getDateFnsLocale(
-  if (code in LOCALES) {
+  code: SCLanguageCode,
-    return LOCALES[code as keyof typeof LOCALES]().then(it => it.default);
+  translator: TranslateService,
-  } else {
+): Promise<LocaleExtension> {
+  if (!(code in LOCALES)) {
     console.warn(`Unknown Locale "${code}" for Date Fns. Falling back to English.`);
-    return LOCALES.en().then(it => it.default);
   }
+  const key = code in LOCALES ? (code as keyof typeof LOCALES) : 'en';
+  const frequencyExtension = await firstValueFrom(translator.get('dateFns.FORMAT_FREQUENCY'));
+  const relativeDateExtension = await firstValueFrom(translator.get('dateFns.FORMAT_RELATIVE_DATE'));
+
+  return LOCALES[key]().then(it => {
+    const locale = it.default as LocaleExtension;
+    locale.formatFrequencyOptions = {...frequencyExtension};
+    locale.formatRelativeDateOptions = {...relativeDateExtension};
+
+    return locale;
+  });
 }

frontend/app/src/app/translation/property-name-translate.pipe.ts

@@ -41,9 +41,9 @@ export class PropertyNameTranslatePipe implements PipeTransform, OnDestroy {
     this.value = this.thingTranslate.getPropertyName(type as SCThingType, key);
   }
 
-  transform(query: unknown, thingOrType: SCThings | string | unknown): unknown {
+  transform(query: unknown, thingOrType: SCThings | string | unknown): string {
     if (typeof query !== 'string' || query.length <= 0) {
-      return query;
+      return query as string;
     }
 
     if (!isThing(thingOrType) && typeof thingOrType !== 'string') {
@@ -70,7 +70,7 @@ export class PropertyNameTranslatePipe implements PipeTransform, OnDestroy {
       });
     }
 
-    return this.value;
+    return this.value as string;
   }
 
   /**

frontend/app/src/app/translation/thing-translate.module.ts

@@ -15,8 +15,6 @@
 import {ModuleWithProviders, NgModule, Provider} from '@angular/core';
 import {
   ArrayJoinPipe,
-  DateLocalizedFormatPipe,
-  DurationLocalizedPipe,
   EntriesPipe,
   IsNaNPipe,
   IsNumericPipe,
@@ -24,7 +22,6 @@ import {
   NumberLocalizedPipe,
   SentenceCasePipe,
   StringSplitPipe,
-  ToUnixPipe,
 } from './common-string-pipes';
 import {ThingTranslateDefaultParser, ThingTranslateParser} from './thing-translate.parser';
 import {ThingTranslatePipe} from './thing-translate.pipe';
@@ -41,16 +38,13 @@ export interface ThingTranslateModuleConfig {
   imports: [IonIconModule],
   declarations: [
     ArrayJoinPipe,
-    DurationLocalizedPipe,
     NumberLocalizedPipe,
     MetersLocalizedPipe,
     StringSplitPipe,
     PropertyNameTranslatePipe,
     ThingTranslatePipe,
     TranslateSimplePipe,
-    DateLocalizedFormatPipe,
     SentenceCasePipe,
-    ToUnixPipe,
     EntriesPipe,
     IsNaNPipe,
     IsNumericPipe,
@@ -58,16 +52,13 @@ export interface ThingTranslateModuleConfig {
   exports: [
     IonIconModule,
     ArrayJoinPipe,
-    DurationLocalizedPipe,
     NumberLocalizedPipe,
     MetersLocalizedPipe,
     StringSplitPipe,
     PropertyNameTranslatePipe,
     ThingTranslatePipe,
     TranslateSimplePipe,
-    DateLocalizedFormatPipe,
     SentenceCasePipe,
-    ToUnixPipe,
     EntriesPipe,
     IsNaNPipe,
     IsNumericPipe,

frontend/app/src/app/translation/thing-translate.service.ts

@@ -22,7 +22,6 @@ import {
   SCThingType,
   SCTranslations,
 } from '@openstapps/core';
-import moment from 'moment';
 import {isDefined, ThingTranslateParser} from './thing-translate.parser';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {setDefaultOptions} from 'date-fns';
@@ -40,7 +39,6 @@ export class ThingTranslateService {
   translator: SCThingTranslator;
 
   /**
-   *
    * @param translateService Instance of Angular TranslateService
    * @param parser An instance of the parser currently used
    * @param dfnsConfiguration the date fns configuration
@@ -56,8 +54,7 @@ export class ThingTranslateService {
     /** set the default language from configuration */
     this.translateService.onLangChange.pipe(takeUntilDestroyed()).subscribe((event: LangChangeEvent) => {
       this.translator.language = event.lang as keyof SCTranslations<SCLanguage>;
-      moment.locale(event.lang);
+      getDateFnsLocale(event.lang as SCLanguageCode, translateService).then(locale => {
-      getDateFnsLocale(event.lang as SCLanguageCode).then(locale => {
         setDefaultOptions({locale});
         this.dfnsConfiguration.setLocale(locale);
       });

frontend/app/src/app/util/array-last.pipe.ts

@@ -1,34 +0,0 @@
-/*
- * Copyright (C) 2022 StApps
- *  This program is free software: you can redistribute it and/or modify it
- *  under the terms of the GNU General Public License as published by the Free
- *  Software Foundation, version 3.
- *
- *  This program is distributed in the hope that it will be useful, but WITHOUT
- *  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- *  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- *  more details.
- *
- *  You should have received a copy of the GNU General Public License along with
- *  this program. If not, see <https://www.gnu.org/licenses/>.
- */
-
-import {Injectable, Pipe, PipeTransform} from '@angular/core';
-
-/**
- * Get the last value of an array
- */
-@Injectable()
-@Pipe({
-  name: 'last',
-  pure: true,
-})
-export class ArrayLastPipe implements PipeTransform {
-  /**
-   * Transform
-   */
-  // tslint:disable-next-line:prefer-function-over-method
-  transform<T>(value: T[]): T | undefined {
-    return value.at(-1);
-  }
-}

frontend/app/src/app/util/date-from-index.pipe.ts

@@ -1,27 +0,0 @@
-/*
- * Copyright (C) 2021 StApps
- * This program is free software: you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along with
- * this program. If not, see <https://www.gnu.org/licenses/>.
- */
-
-import {Pipe, PipeTransform} from '@angular/core';
-import {Moment} from 'moment';
-
-@Pipe({
-  name: 'dateFromIndex',
-  pure: true,
-})
-export class DateFromIndexPipe implements PipeTransform {
-  transform(index: number, baseline: Moment): Moment {
-    return baseline.clone().add(index, 'days');
-  }
-}

frontend/app/src/app/util/date-is-today.pipe.ts

@@ -1,38 +0,0 @@
-/*
- * Copyright (C) 2022 StApps
- * This program is free software: you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along with
- * this program. If not, see <https://www.gnu.org/licenses/>.
- */
-
-import {Injectable, Pipe, PipeTransform} from '@angular/core';
-import moment, {Moment, unitOfTime} from 'moment';
-
-/**
- * Get the last value of an array
- */
-@Injectable()
-@Pipe({
-  name: 'dateIsThis',
-  pure: false, // pure pipe can break in some change detection scenarios,
-  // specifically, on the calendar view it causes it to stay true even when you navigate
-})
-export class DateIsThisPipe implements PipeTransform {
-  /**
-   * Transform
-   */
-  // tslint:disable-next-line:prefer-function-over-method
-  transform(value: Moment | string | number, granularity: unitOfTime.StartOf): boolean {
-    return (
-      typeof value === 'string' ? moment(value) : typeof value === 'number' ? moment.unix(value) : value
-    ).isSame(moment(moment.now()), granularity);
-  }
-}

frontend/app/src/app/util/daytime-key.pipe.ts

@@ -12,9 +12,8 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
 import {Injectable, Pipe, PipeTransform} from '@angular/core';
-import moment from 'moment';
+import {getHours} from 'date-fns';
 
 /**
  * Return the extended translation key by the current daytime key
@@ -28,7 +27,7 @@ export class DaytimeKeyPipe implements PipeTransform {
    * Transform
    */
   transform(translationKey: string): string {
-    const hour = Number.parseInt(moment().format('HH'), 10);
+    const hour = getHours(Date.now());
     let key = '';
     if (hour >= 5 && hour <= 10) {
       key = 'morning';

frontend/app/src/app/util/next-date-in-list.pipe.ts

@@ -1,41 +0,0 @@
-/*
- * Copyright (C) 2021 StApps
- * This program is free software: you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along with
- * this program. If not, see <https://www.gnu.org/licenses/>.
- */
-
-import {Injectable, Pipe, PipeTransform} from '@angular/core';
-import moment from 'moment';
-
-/**
- * Get the last value of an array
- */
-@Injectable()
-@Pipe({
-  name: 'nextDateInList',
-  pure: false, // pure pipe can break in some change detection scenarios,
-  // specifically, on the calendar view it causes it to stay true even when you navigate
-})
-export class NextDateInListPipe implements PipeTransform {
-  /**
-   * Transform
-   */
-  // tslint:disable-next-line:prefer-function-over-method
-  transform(dates: string[]): string {
-    const nextDate = dates
-      .sort((a, b) => moment(a).unix() - moment(b).unix())
-      .find(date => {
-        return moment(date).unix() > moment().unix();
-      });
-    return nextDate || '';
-  }
-}

frontend/app/src/app/util/nullish-coalecing.pipe.ts

@@ -1,34 +0,0 @@
-/*
- * Copyright (C) 2021 StApps
- * This program is free software: you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along with
- * this program. If not, see <https://www.gnu.org/licenses/>.
- */
-
-import {Injectable, Pipe, PipeTransform} from '@angular/core';
-
-/**
- * Get the last value of an array
- */
-@Injectable()
-@Pipe({
-  name: 'nullishCoalesce',
-  pure: true,
-})
-export class NullishCoalescingPipe implements PipeTransform {
-  /**
-   * Transform
-   */
-  // tslint:disable-next-line:prefer-function-over-method
-  transform<T, G>(value: T, fallback: G): T | G {
-    return value ?? fallback;
-  }
-}

frontend/app/src/app/util/opening-hours.html

@@ -22,11 +22,11 @@
   <ng-template #nextChange>
     <ng-container *ngIf="showNextChange && openingHours.nextChangeSoon">
       {{ ('common.openingHours.' + openingHours.nextChangeAction + '_soon') | translate: {duration:
-      (openingHours.nextChangeSoon | async | dfnsFormatDistanceToNowStrict: {unit: 'minute'})} }}
+      (openingHours.nextChangeSoon | async | dfnsFormatDistanceToNowStrictPure: {unit: 'minute'})} }}
     </ng-container>
     <ng-container *ngIf="showNextChange && !openingHours.nextChangeSoon">
       {{ ('common.openingHours.' + openingHours.nextChangeAction) | translate: {date: openingHours.nextChange
-      | dfnsFormatRelativeToNow} }}
+      | dfnsFormatRelativeToNowPure} }}
     </ng-container>
   </ng-template>
 </div>

frontend/app/src/app/util/util.module.ts

@@ -13,13 +13,8 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {NgModule} from '@angular/core';
-import {ArrayLastPipe} from './array-last.pipe';
-import {DateIsThisPipe} from './date-is-today.pipe';
-import {NullishCoalescingPipe} from './nullish-coalecing.pipe';
-import {DateFromIndexPipe} from './date-from-index.pipe';
 import {DaytimeKeyPipe} from './daytime-key.pipe';
 import {LazyPipe} from './lazy.pipe';
-import {NextDateInListPipe} from './next-date-in-list.pipe';
 import {EditModalComponent} from './edit-modal.component';
 import {BrowserModule} from '@angular/platform-browser';
 import {IonicModule} from '@ionic/angular';
@@ -32,7 +27,7 @@ import {SearchbarAutofocusDirective} from './searchbar-autofocus.directive';
 import {SectionComponent} from './section.component';
 import {RouterModule} from '@angular/router';
 import {IonContentParallaxDirective} from './ion-content-parallax.directive';
-import {FormatDistanceToNowStrictPipeModule, FormatRelativeToNowPipeModule} from 'ngx-date-fns';
+import {FormatDistanceToNowStrictPurePipeModule, FormatRelativeToNowPurePipeModule} from 'ngx-date-fns';
 
 @NgModule({
   imports: [
@@ -41,20 +36,15 @@ import {FormatDistanceToNowStrictPipeModule, FormatRelativeToNowPipeModule} from
     TranslateModule,
     ThingTranslateModule.forChild(),
     RouterModule,
-    FormatRelativeToNowPipeModule,
+    FormatRelativeToNowPurePipeModule,
-    FormatDistanceToNowStrictPipeModule,
+    FormatDistanceToNowStrictPurePipeModule,
   ],
   declarations: [
     IonContentParallaxDirective,
     ElementSizeChangeDirective,
-    ArrayLastPipe,
-    DateIsThisPipe,
-    NullishCoalescingPipe,
     LazyPipe,
     SectionComponent,
-    DateFromIndexPipe,
     DaytimeKeyPipe,
-    NextDateInListPipe,
     EditModalComponent,
     OpeningHoursComponent,
     SimpleSwiperComponent,
@@ -63,14 +53,9 @@ import {FormatDistanceToNowStrictPipeModule, FormatRelativeToNowPipeModule} from
   exports: [
     IonContentParallaxDirective,
     ElementSizeChangeDirective,
-    ArrayLastPipe,
-    DateIsThisPipe,
-    NullishCoalescingPipe,
     LazyPipe,
-    DateFromIndexPipe,
     DaytimeKeyPipe,
     SectionComponent,
-    NextDateInListPipe,
     EditModalComponent,
     OpeningHoursComponent,
     SimpleSwiperComponent,

frontend/app/src/assets/i18n/de.json

@@ -8,6 +8,20 @@
   "export": "Exportieren",
   "share": "Teilen",
   "timeSuffix": "Uhr",
+  "dateFns": {
+    "FORMAT_FREQUENCY": {
+      "one": "'jede' {{suffix}}",
+      "many": "'alle' {{duration}}"
+    },
+    "FORMAT_RELATIVE_DATE": {
+      "lastWeek": "'letzten' eeee",
+      "yesterday": "'gestern'",
+      "today": "'heute'",
+      "tomorrow": "'morgen'",
+      "nextWeek": "eeee",
+      "other": "pp"
+    }
+  },
   "ratings": {
     "thank_you": "Vielen Dank für die Bewertung!"
   },

frontend/app/src/assets/i18n/en.json

@@ -8,6 +8,20 @@
   "export": "Export",
   "share": "Share",
   "timeSuffix": "",
+  "dateFns": {
+    "FORMAT_FREQUENCY": {
+      "one": "'every' {{suffix}}",
+      "many": "'every' {{duration}}"
+    },
+    "FORMAT_RELATIVE_DATE": {
+      "lastWeek": "'last' eeee",
+      "yesterday": "'yesterday'",
+      "today": "'today'",
+      "tomorrow": "'tomorrow'",
+      "nextWeek": "eeee",
+      "other": "pp"
+    }
+  },
   "ratings": {
     "thank_you": "Thank you for your feedback!"
   },

pnpm-lock.yaml

@@ -842,6 +842,9 @@ importers:
       deepmerge:
         specifier: 4.3.1
         version: 4.3.1
+      duration-fns:
+        specifier: 3.0.2
+        version: 3.0.2
       form-data:
         specifier: 4.0.0
         version: 4.0.0
@@ -863,9 +866,6 @@ importers:
       material-symbols:
         specifier: 0.10.0
         version: 0.10.0
-      moment:
-        specifier: 2.29.4
-        version: 2.29.4
       ngx-date-fns:
         specifier: 10.0.1
         version: 10.0.1(@angular/common@16.1.4)(@angular/core@16.1.4)(date-fns@2.30.0)
@@ -875,9 +875,6 @@ importers:
       ngx-markdown:
         specifier: 16.0.0
         version: 16.0.0(@angular/common@16.1.4)(@angular/core@16.1.4)(@angular/platform-browser@16.1.4)(@types/marked@4.3.1)(marked@4.3.0)(rxjs@7.8.1)(zone.js@0.13.1)
-      ngx-moment:
-        specifier: 6.0.2
-        version: 6.0.2(moment@2.29.4)
       opening_hours:
         specifier: 3.8.0
         version: 3.8.0
@@ -10328,6 +10325,10 @@ packages:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
     dev: true
 
+  /duration-fns@3.0.2:
+    resolution: {integrity: sha512-w82IXh/6aWNHFA0qlQazJYJrZTWieTItuuGTE7YX4cxPaZTWhmVImbsBBiMK1/OhGDgiinuCpJoSFILYLDSKDg==}
+    dev: false
+
   /eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
@@ -14333,15 +14334,6 @@ packages:
       prismjs: 1.29.0
     dev: false
 
-  /ngx-moment@6.0.2(moment@2.29.4):
-    resolution: {integrity: sha512-HUvDyoJPZKLA3tc+GMQqDpVyCVT2SPfEiV7/CGj2Dwwsn//JhhQ8eTr+RzKqBzLysrXkCwlzulVVJaJ5A0FJEA==}
-    peerDependencies:
-      moment: ^2.19.3
-    dependencies:
-      moment: 2.29.4
-      tslib: 2.4.1
-    dev: false
-
   /nice-napi@1.0.2:
     resolution: {integrity: sha512-px/KnJAJZf5RuBGcfD+Sp2pAKq0ytz8j+1NehvgIGFkvtvFrDM3T8E4x/JJODXK9WZow8RRGrbA9QQ3hs+pDhA==}
     os: ['!win32']