feat: date-fns

.changeset/loud-buttons-repeat.md

@@ -1,5 +0,0 @@
----
-'@openstapps/app': patch
----
-
-Fixed distance not updating in list items

.changeset/silver-bobcats-cry.md

@@ -1,5 +0,0 @@
----
-'@openstapps/app': minor
----
-
-Queue config update for next launch to not block app launches

.changeset/twelve-planes-knock.md

@@ -1,5 +0,0 @@
----
-'@openstapps/proxy': minor
----
-
-Send 426 to outdated clients instead of 404

.changeset/wicked-cheetahs-prove.md

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

backend/proxy/README.md

@@ -31,11 +31,10 @@ To Provide your own configuration file you can create a `default.json` file in t
 
 ## Status Codes
 
-- Successfull reponses come with a `HTTP 200`
-- No version header given returns a `HTTP 300`
+- OutdatedVersions return a `HTTP 404`
 - ActiveVersions return a `HTTP 503` if currently unavailable or the given code by running backend-node
-- OutdatedVersions return a `HTTP 426`
-- Unsupported versions (not configured as outdated or active) return a `HTTP 426`
+- Unsupported versions (not configured as outdated or active) return a `HTTP 404`
+- No version header given returns a `HTTP 300`
 
 **NOTE:** The default configuration expects the client to set a version header: `X-StApps-Version=<version of app>`
 

backend/proxy/config/default.cjs

@@ -14,8 +14,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+// ESM is not supported, and cts is not detected, so we use type-checked cjs instead.
 /** @type {import('../src/common').ConfigFile} */
-module.exports = {
+const configFile = {
   activeVersions: ['1\\.0\\.\\d+', '2\\.0\\.\\d+'],
   hiddenRoutes: ['/bulk'],
   logFormat: 'default',
@@ -30,3 +31,5 @@ module.exports = {
     dhparam: '/etc/nginx/certs/dhparam.pem',
   },
 };
+
+export default configFile;

backend/proxy/fixtures/visibleRoute.template

@@ -19,15 +19,14 @@ location  {{{ route }}} {
         return 300 'You have to supply a client/app version via the X-StApps-Version header!';
     }
 
-    # Version is unsupported by now or never existed (App/Client has to update)
+    # Version is unsupported or never existed
     if ($proxyurl = unsupported) {
         {{{ cors }}}
-        return 426;
+        return 404;
     }
-    # The version existed, but is outdated now (App/Client should update)
+    # The version existed, but is outdated now (App should update)
     if ($proxyurl = outdated) {
-        {{{ cors }}}
-        return 426;
+        return 404;
     }
     # The version is correct, but backend is not responding
     if ($proxyurl = unavailable) {

backend/proxy/package.json

@@ -34,12 +34,10 @@
     "build": "tsup-node --dts",
     "build:docker": "docker build -t openstapps:proxy ../../.deploy/proxy",
     "deploy": "pnpm --prod --filter=@openstapps/proxy deploy ../../.deploy/proxy",
-    "dev": "tsup --watch --onSuccess \"pnpm run start\"",
     "format": "prettier . -c --ignore-path ../../.gitignore",
     "format:fix": "prettier --write . --ignore-path ../../.gitignore",
     "lint": "eslint --ext .ts src/",
     "lint:fix": "eslint --fix --ext .ts src/",
-    "start": "node app.js",
     "test": "c8 mocha"
   },
   "dependencies": {

backend/proxy/src/app.ts

@@ -37,7 +37,7 @@ const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
  * Reads the container information from the docker socket and updates the nginx config if necessary
  */
 async function updateNginxConfig() {
-  const containers = await getContainers(process.env.DOCKER_SOCKET);
+  const containers = await getContainers();
 
   const containerHash = containers
     .map((container: ContainerInfo) => {
@@ -78,4 +78,4 @@ async function updateNginxConfig() {
 
 // start the process that checks the docker socket periodically
 // eslint-disable-next-line unicorn/prefer-top-level-await
-await updateNginxConfig();
+updateNginxConfig();

examples/minimal-deployment/docker-compose.yml

@@ -1,7 +1,7 @@
 version: '3.7'
 services:
   database:
-    image: registry.gitlab.com/openstapps/openstapps/database:3.0.0-next.4
+    image: registry.gitlab.com/openstapps/openstapps/database:2.0.0
     volumes:
       - ./database:/usr/share/elasticsearch/data
     expose:
@@ -9,7 +9,7 @@ services:
     restart: unless-stopped
 
   backend:
-    image: registry.gitlab.com/openstapps/openstapps/backend:3.0.0-next.4
+    image: registry.gitlab.com/openstapps/openstapps/backend:3.0.0-next.0
     environment:
       ES_ADDR: "http://database:9200"
       NODE_CONFIG_ENV: "elasticsearch"
@@ -27,17 +27,17 @@ services:
       - database
 
   api:
-    image: registry.gitlab.com/openstapps/openstapps/api:3.0.0-next.4
+    image: registry.gitlab.com/openstapps/openstapps/api:3.0.0-next.0
     links:
       - "backend"
 
   minimal-connector:
-    image: registry.gitlab.com/openstapps/openstapps/minimal-connector:3.0.0-next.4
+    image: registry.gitlab.com/openstapps/minimal-connector:core-0.23
     container_name: minimal-connector-0.23
     command: ["http://backend:3000", "minimal-connector", "f-u"]
 
   app:
-    image: registry.gitlab.com/openstapps/openstapps/app:3.0.0-next.4
+    image: registry.gitlab.com/openstapps/app/executable:core-0.23
     expose:
       - 8100
     ports:

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(),
-          availabilityEnds: moment().endOf('day').add(2, 'days').toISOString(),
+          availabilityStarts: formatISO(addDays(startOfToday(), 2)),
+          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(),
-          availabilityEnds: moment().endOf('day').add(2, 'days').toISOString(),
+          availabilityStarts: formatISO(startOfToday()),
+          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(),
-          availabilityEnds: moment().endOf('day').add(2, 'days').toISOString(),
+          availabilityStarts: formatISO(addDays(startOfToday(), 2)),
+          availabilityEnds: formatISO(addDays(endOfToday(), 2)),
           inPlace: {
             geo: {
               point: {
@@ -1046,8 +1046,8 @@ export const sampleResources = [
       ],
       offers: [
         {
-          availabilityEnds: moment().endOf('day').toISOString(),
-          availabilityStarts: moment().startOf('day').toISOString(),
+          availabilityEnds: formatISO(endOfToday()),
+          availabilityStarts: formatISO(startOfToday()),
           availability: 'in stock',
           inPlace: {
             type: 'room',

frontend/app/src/app/_helpers/ts-logger.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2021 StApps
+ * Copyright (C) 2020 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.
@@ -12,16 +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 {NGXLogger} from 'ngx-logger';
 
-import {Pipe, PipeTransform} from '@angular/core';
-import {Moment} from 'moment';
+export let logger: NGXLogger;
 
-@Pipe({
-  name: 'dateFromIndex',
-  pure: true,
-})
-export class DateFromIndexPipe implements PipeTransform {
-  transform(index: number, baseline: Moment): Moment {
-    return baseline.clone().add(index, 'days');
-  }
-}
+export const initLogger = (newLogger: NGXLogger) => (logger = newLogger);

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

@@ -21,13 +21,14 @@ 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/min/locales';
-import {LoggerModule, NgxLoggerLevel} from 'ngx-logger';
+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';
 import {CatalogModule} from './modules/catalog/catalog.module';
+import {ConfigModule} from './modules/config/config.module';
+import {ConfigProvider} from './modules/config/config.provider';
 import {DashboardModule} from './modules/dashboard/dashboard.module';
 import {DataModule} from './modules/data/data.module';
 import {HebisModule} from './modules/hebis/hebis.module';
@@ -36,9 +37,11 @@ import {MenuModule} from './modules/menu/menu.module';
 import {NewsModule} from './modules/news/news.module';
 import {ScheduleModule} from './modules/schedule/schedule.module';
 import {SettingsModule} from './modules/settings/settings.module';
+import {SettingsProvider} from './modules/settings/settings.provider';
 import {StorageModule} from './modules/storage/storage.module';
 import {ThingTranslateModule} from './translation/thing-translate.module';
 import {UtilModule} from './util/util.module';
+import {initLogger} from './_helpers/ts-logger';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {AboutModule} from './modules/about/about.module';
 import {FavoritesModule} from './modules/favorites/favorites.module';
@@ -48,22 +51,79 @@ import {DebugDataCollectorService} from './modules/data/debug-data-collector.ser
 import {AuthModule} from './modules/auth/auth.module';
 import {BackgroundModule} from './modules/background/background.module';
 import {LibraryModule} from './modules/library/library.module';
+import {StorageProvider} from './modules/storage/storage.provider';
 import {AssessmentsModule} from './modules/assessments/assessments.module';
 import {ServiceHandlerInterceptor} from './_helpers/service-handler.interceptor';
+import {RoutingStackService} from './util/routing-stack.service';
+import {SCLanguageCode, SCSettingValue} from '@openstapps/core';
+import {DefaultAuthService} from './modules/auth/default-auth.service';
+import {PAIAAuthService} from './modules/auth/paia/paia-auth.service';
 import {IonIconModule} from './util/ion-icon/ion-icon.module';
 import {NavigationModule} from './modules/menu/navigation/navigation.module';
 import {browserFactory, SimpleBrowser} from './util/browser.factory';
-import {ConfigProvider} from './modules/config/config.provider';
-import {SettingsProvider} from './modules/settings/settings.provider';
-import {TranslateServiceWrapper} from './translation/translate-service-wrapper';
-import {DefaultAuthService} from './modules/auth/default-auth.service';
-import {PAIAAuthService} from './modules/auth/paia/paia-auth.service';
-import {StorageProvider} from './modules/storage/storage.provider';
+import {getDateFnsLocale} from './translation/dfns-locale';
+import {setDefaultOptions} from 'date-fns';
+import {DateFnsConfigurationService, DateFnsModule} from 'ngx-date-fns';
 
 registerLocaleData(localeDe);
 
 SwiperCore.use([FreeMode, Navigation]);
 
+/**
+ * Initializes data needed on startup
+ */
+export function initializerFactory(
+  storageProvider: StorageProvider,
+  logger: NGXLogger,
+  settingsProvider: SettingsProvider,
+  configProvider: ConfigProvider,
+  translateService: TranslateService,
+  _routingStackService: RoutingStackService,
+  defaultAuthService: DefaultAuthService,
+  paiaAuthService: PAIAAuthService,
+  dateFnsConfigurationService: DateFnsConfigurationService,
+) {
+  return async () => {
+    initLogger(logger);
+    await storageProvider.init();
+    await configProvider.init();
+    await settingsProvider.init();
+    try {
+      if (configProvider.firstSession) {
+        // set language from browser
+        await settingsProvider.setSettingValue(
+          'profile',
+          'language',
+          translateService.getBrowserLang() as SCSettingValue,
+        );
+      }
+      const languageCode = (await settingsProvider.getValue('profile', 'language')) as string;
+      // this language will be used as a fallback when a translation isn't found in the current language
+      translateService.setDefaultLang('en');
+      translateService.use(languageCode);
+      const dateFnsLocale = await getDateFnsLocale(languageCode as SCLanguageCode, translateService);
+      setDefaultOptions({locale: dateFnsLocale});
+      dateFnsConfigurationService.setLocale(dateFnsLocale);
+
+      await defaultAuthService.init();
+      await paiaAuthService.init();
+    } catch (error) {
+      logger.warn(error);
+    }
+  };
+}
+
+/**
+ * TODO
+ * @param http TODO
+ */
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
+
+/**
+ * TODO
+ */
 @NgModule({
   bootstrap: [AppComponent],
   declarations: [AppComponent],
@@ -77,8 +137,10 @@ SwiperCore.use([FreeMode, Navigation]);
     BrowserAnimationsModule,
     CatalogModule,
     CommonModule,
+    ConfigModule,
     DashboardModule,
     DataModule,
+    DateFnsModule.forRoot(),
     HebisModule,
     IonicModule.forRoot(),
     IonIconModule,
@@ -100,9 +162,7 @@ SwiperCore.use([FreeMode, Navigation]);
       loader: {
         deps: [HttpClient],
         provide: TranslateLoader,
-        useFactory(http: HttpClient) {
-          return new TranslateHttpLoader(http, './assets/i18n/', '.json');
-        },
+        useFactory: createTranslateLoader,
       },
     }),
     UtilModule,
@@ -112,30 +172,6 @@ SwiperCore.use([FreeMode, Navigation]);
     }),
   ],
   providers: [
-    {
-      provide: APP_INITIALIZER,
-      useFactory:
-        (...providers: Array<{beforeAppInit(): Promise<void>}>) =>
-        async () => {
-          for (const provider of providers) {
-            await provider.beforeAppInit();
-          }
-        },
-      // Declare initialization (order matters)
-      deps: [
-        StorageProvider,
-        ConfigProvider,
-        SettingsProvider,
-        TranslateService,
-        DefaultAuthService,
-        PAIAAuthService,
-      ],
-      multi: true,
-    },
-    {
-      provide: TranslateService,
-      useClass: TranslateServiceWrapper,
-    },
     {
       provide: RouteReuseStrategy,
       useClass: IonicRouteStrategy,
@@ -149,6 +185,22 @@ SwiperCore.use([FreeMode, Navigation]);
       useFactory: browserFactory,
       deps: [Platform],
     },
+    {
+      provide: APP_INITIALIZER,
+      multi: true,
+      deps: [
+        StorageProvider,
+        NGXLogger,
+        SettingsProvider,
+        ConfigProvider,
+        TranslateService,
+        RoutingStackService,
+        DefaultAuthService,
+        PAIAAuthService,
+        DateFnsConfigurationService,
+      ],
+      useFactory: initializerFactory,
+    },
     {
       provide: HTTP_INTERCEPTORS,
       useClass: ServiceHandlerInterceptor,

frontend/app/src/app/before-app-init.ts

@@ -1,10 +0,0 @@
-/**
- * Services or providers implementing this interface
- * must be added to the `APP_INITIALIZER` deps
- */
-export interface BeforeAppInit {
-  /**
-   * Any logic that has to run before the app is initialized
-   */
-  beforeAppInit(): Promise<void>;
-}

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

@@ -14,9 +14,10 @@
  */
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
-import {SCAboutPage} from '@openstapps/core';
-import packageJson from '../../../../../package.json';
+import {SCAboutPage, SCAppConfiguration} from '@openstapps/core';
 import {ConfigProvider} from '../../config/config.provider';
+import packageJson from '../../../../../package.json';
+import config from 'capacitor.config';
 
 @Component({
   selector: 'about-page',
@@ -26,12 +27,15 @@ import {ConfigProvider} from '../../config/config.provider';
 export class AboutPageComponent implements OnInit {
   content: SCAboutPage;
 
+  appName = config.appName;
+
   version = packageJson.version;
 
-  constructor(readonly route: ActivatedRoute, readonly config: ConfigProvider) {}
+  constructor(private readonly route: ActivatedRoute, private readonly configProvider: ConfigProvider) {}
 
-  ngOnInit() {
+  async ngOnInit() {
     const route = this.route.snapshot.url.map(it => it.path).join('/');
-    this.content = this.config.app.aboutPages[route] ?? {};
+    this.content =
+      (this.configProvider.getValue('aboutPages') as SCAppConfiguration['aboutPages'])[route] ?? {};
   }
 }

frontend/app/src/app/modules/about/about-page/about-page.html

@@ -25,7 +25,7 @@
   </ion-toolbar>
 </ion-header>
 <ion-content parallax *ngIf="content">
-  <ion-text>{{ config.app.name }} v{{ version }}</ion-text>
+  <ion-text>{{ appName }} v{{ version }}</ion-text>
   <div class="page-content">
     <about-page-content *ngFor="let element of content.content" [content]="element"></about-page-content>
   </div>

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

@@ -19,6 +19,7 @@ import {FormsModule} from '@angular/forms';
 import {IonicModule} from '@ionic/angular';
 import {TranslateModule} from '@ngx-translate/core';
 import {ThingTranslateModule} from '../../translation/thing-translate.module';
+import {ConfigProvider} from '../config/config.provider';
 import {AboutPageComponent} from './about-page/about-page.component';
 import {MarkdownModule} from 'ngx-markdown';
 import {AboutPageContentComponent} from './about-page/about-page-content.component';
@@ -63,5 +64,6 @@ const settingsRoutes: Routes = [
     ScrollingModule,
     UtilModule,
   ],
+  providers: [ConfigProvider],
 })
 export class AboutModule {}

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/assessments.provider.ts

@@ -13,12 +13,11 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Injectable} from '@angular/core';
+import {ConfigProvider} from '../config/config.provider';
 import {SCAssessment, SCUuid} from '@openstapps/core';
 import {DefaultAuthService} from '../auth/default-auth.service';
 import {HttpClient} from '@angular/common/http';
 import {uniqBy, keyBy} from '@openstapps/collection-utils';
-import {firstValueFrom} from 'rxjs';
-import {ConfigProvider} from '../config/config.provider';
 
 /**
  *
@@ -66,7 +65,7 @@ export class AssessmentsProvider {
   cacheMaxAge = 15 * 60 * 1000;
 
   constructor(
-    readonly config: ConfigProvider,
+    readonly configProvider: ConfigProvider,
     readonly defaultAuth: DefaultAuthService,
     readonly http: HttpClient,
   ) {}
@@ -92,20 +91,21 @@ export class AssessmentsProvider {
       return this.cache;
     }
 
-    const url = this.config.app.features.extern?.hisometry.url;
+    const url = this.configProvider.config.app.features.extern?.hisometry.url;
     if (!url) throw new Error('Config lacks url for hisometry');
 
-    this.cache = firstValueFrom(
-      this.http.get<{data: SCAssessment[]}>(`${url}/${this.assessmentPath}`, {
+    this.cache = this.http
+      .get<{data: SCAssessment[]}>(`${url}/${this.assessmentPath}`, {
         headers: {
           Authorization: `Bearer ${accessToken ?? (await this.defaultAuth.getValidToken()).accessToken}`,
         },
-      }),
-    ).then(it => {
-      this.cacheTimestamp = Date.now();
+      })
+      .toPromise()
+      .then(it => {
+        this.cacheTimestamp = Date.now();
 
-      return it?.data ?? [];
-    });
+        return it?.data ?? [];
+      });
     this.assessments = this.cache.then(toAssessmentMap);
 
     return this.cache;

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/auth/auth-helper.service.ts

@@ -12,18 +12,24 @@
  * 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} from '@angular/core';
 import {IPAIAAuthAction} from './paia/paia-auth-action';
 import {AuthActions, IAuthAction} from 'ionic-appauth';
 import {TranslateService} from '@ngx-translate/core';
 import {JSONPath} from 'jsonpath-plus';
-import {SCAuthorizationProviderType, SCUserConfiguration, SCUserConfigurationMap} from '@openstapps/core';
+import {
+  SCAuthorizationProvider,
+  SCAuthorizationProviderType,
+  SCUserConfiguration,
+  SCUserConfigurationMap,
+} from '@openstapps/core';
+import {ConfigProvider} from '../config/config.provider';
 import {StorageProvider} from '../storage/storage.provider';
 import {DefaultAuthService} from './default-auth.service';
 import {PAIAAuthService} from './paia/paia-auth.service';
 import {SimpleBrowser} from '../../util/browser.factory';
 import {AlertController} from '@ionic/angular';
-import {ConfigProvider} from '../config/config.provider';
 
 const AUTH_ORIGIN_PATH = 'stapps.auth.origin_path';
 
@@ -31,19 +37,23 @@ const AUTH_ORIGIN_PATH = 'stapps.auth.origin_path';
   providedIn: 'root',
 })
 export class AuthHelperService {
-  get userConfigurationMap(): SCUserConfigurationMap {
-    return this.config.auth.default!.endpoints.mapping;
-  }
+  userConfigurationMap: SCUserConfigurationMap;
 
   constructor(
     private translateService: TranslateService,
+    private configProvider: ConfigProvider,
     private storageProvider: StorageProvider,
     private defaultAuth: DefaultAuthService,
     private paiaAuth: PAIAAuthService,
     private browser: SimpleBrowser,
     private alertController: AlertController,
-    private config: ConfigProvider,
-  ) {}
+  ) {
+    this.userConfigurationMap = (
+      this.configProvider.getAnyValue('auth') as {
+        default: SCAuthorizationProvider;
+      }
+    ).default.endpoints.mapping;
+  }
 
   public getAuthMessage(provider: SCAuthorizationProviderType, action: IAuthAction | IPAIAAuthAction) {
     let message: string | undefined;

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

@@ -175,7 +175,7 @@ export abstract class AuthService implements IAuthService {
 
   public async init() {
     this.setupAuthorizationNotifier();
-    await this.loadTokenFromStorage();
+    this.loadTokenFromStorage();
     this.addActionObserver(this._actionHistory);
     this.addActionObserver(this._session);
   }

frontend/app/src/app/modules/auth/default-auth.service.ts

@@ -12,26 +12,29 @@
  * 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 {
   AuthorizationRequestHandler,
   AuthorizationServiceConfiguration,
   JQueryRequestor,
   LocalStorageBackend,
+  Requestor,
+  StorageBackend,
   TokenRequestHandler,
 } from '@openid/appauth';
-import {AuthActionBuilder, DefaultBrowser, EndSessionHandler, UserInfoHandler} from 'ionic-appauth';
+import {AuthActionBuilder, Browser, DefaultBrowser, EndSessionHandler, UserInfoHandler} from 'ionic-appauth';
+import {ConfigProvider} from '../config/config.provider';
+import {SCAuthorizationProvider} from '@openstapps/core';
 import {getClientConfig, getEndpointsConfig} from './auth.provider.methods';
 import {Injectable} from '@angular/core';
 import {AuthService} from './auth.service';
-import {ConfigProvider} from '../config/config.provider';
-import {BeforeAppInit} from '../../before-app-init';
 
 const TOKEN_RESPONSE_KEY = 'token_response';
 
 @Injectable({
   providedIn: 'root',
 })
-export class DefaultAuthService extends AuthService implements BeforeAppInit {
+export class DefaultAuthService extends AuthService {
   public localConfiguration: AuthorizationServiceConfiguration;
 
   protected tokenHandler: TokenRequestHandler;
@@ -42,17 +45,13 @@ export class DefaultAuthService extends AuthService implements BeforeAppInit {
 
   protected endSessionHandler: EndSessionHandler;
 
-  constructor(private config: ConfigProvider) {
-    super(new DefaultBrowser(), new LocalStorageBackend(), new JQueryRequestor());
-  }
-
-  async beforeAppInit() {
-    this.authConfig = getClientConfig('default', this.config.auth);
-    this.localConfiguration = new AuthorizationServiceConfiguration(
-      getEndpointsConfig('default', this.config.auth),
-    );
-
-    await super.init();
+  constructor(
+    protected browser: Browser = new DefaultBrowser(),
+    protected storage: StorageBackend = new LocalStorageBackend(),
+    protected requestor: Requestor = new JQueryRequestor(),
+    private readonly configProvider: ConfigProvider,
+  ) {
+    super(browser, storage, requestor);
   }
 
   get configuration(): Promise<AuthorizationServiceConfiguration> {
@@ -61,6 +60,22 @@ export class DefaultAuthService extends AuthService implements BeforeAppInit {
     return Promise.resolve(this.localConfiguration);
   }
 
+  public async init() {
+    this.setupConfiguration();
+    this.setupAuthorizationNotifier();
+    await this.loadTokenFromStorage();
+  }
+
+  setupConfiguration() {
+    const authConfig = this.configProvider.getAnyValue('auth') as {
+      default: SCAuthorizationProvider;
+    };
+    this.authConfig = getClientConfig('default', authConfig);
+    this.localConfiguration = new AuthorizationServiceConfiguration(
+      getEndpointsConfig('default', authConfig),
+    );
+  }
+
   public async signOut() {
     await this.revokeTokens().catch(error => {
       this.notifyActionListers(AuthActionBuilder.SignOutFailed(error));

frontend/app/src/app/modules/auth/paia/paia-auth.service.ts

@@ -12,6 +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 {
   AuthorizationError,
   AuthorizationRequest,
@@ -46,10 +47,10 @@ import {PAIAAuthorizationResponse} from './paia-authorization-response';
 import {PAIAAuthorizationNotifier} from './paia-authorization-notifier';
 import {PAIATokenResponse} from './paia-token-response';
 import {IPAIAAuthAction, PAIAAuthActionBuilder} from './paia-auth-action';
+import {SCAuthorizationProvider} from '@openstapps/core';
+import {ConfigProvider} from '../../config/config.provider';
 import {getClientConfig, getEndpointsConfig} from '../auth.provider.methods';
 import {Injectable} from '@angular/core';
-import {ConfigProvider} from '../../config/config.provider';
-import {BeforeAppInit} from '../../../before-app-init';
 
 const TOKEN_RESPONSE_KEY = 'paia_token_response';
 const AUTH_EXPIRY_BUFFER = 10 * 60 * -1; // 10 minutes in seconds
@@ -63,8 +64,10 @@ export interface IAuthService {
   getValidToken(buffer?: number): Promise<PAIATokenResponse>;
 }
 
-@Injectable({providedIn: 'root'})
-export class PAIAAuthService implements BeforeAppInit {
+@Injectable({
+  providedIn: 'root',
+})
+export class PAIAAuthService {
   private _authConfig?: IAuthConfig;
 
   private _authSubject: AuthSubject = new AuthSubject();
@@ -94,7 +97,7 @@ export class PAIAAuthService implements BeforeAppInit {
     protected browser: Browser = new DefaultBrowser(),
     protected storage: StorageBackend = new LocalStorageBackend(),
     protected requestor: Requestor = new JQueryRequestor(),
-    private config: ConfigProvider,
+    private readonly configProvider: ConfigProvider,
   ) {
     this.tokenHandler = new PAIATokenRequestHandler(requestor);
     this.userInfoHandler = new IonicUserInfoHandler(requestor);
@@ -107,16 +110,6 @@ export class PAIAAuthService implements BeforeAppInit {
     this.endSessionHandler = new IonicEndSessionHandler(browser);
   }
 
-  async beforeAppInit() {
-    this.authConfig = getClientConfig('paia', this.config.auth);
-    this.localConfiguration = new AuthorizationServiceConfiguration(
-      getEndpointsConfig('paia', this.config.auth),
-    );
-
-    this.setupAuthorizationNotifier();
-    await this.loadTokenFromStorage();
-  }
-
   get token$(): Observable<PAIATokenResponse | undefined> {
     return this._tokenSubject.asObservable();
   }
@@ -154,6 +147,20 @@ export class PAIAAuthService implements BeforeAppInit {
     return Promise.resolve(this.localConfiguration);
   }
 
+  public async init() {
+    this.setupConfiguration();
+    this.setupAuthorizationNotifier();
+    await this.loadTokenFromStorage();
+  }
+
+  setupConfiguration() {
+    const authConfig = this.configProvider.getAnyValue('auth') as {
+      paia: SCAuthorizationProvider;
+    };
+    this.authConfig = getClientConfig('paia', authConfig);
+    this.localConfiguration = new AuthorizationServiceConfiguration(getEndpointsConfig('paia', authConfig));
+  }
+
   protected notifyActionListers(action: IPAIAAuthAction) {
     /* eslint-disable unicorn/no-useless-undefined */
     switch (action.action) {

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: [
-    DurationPipe,
-    DateFormatPipe,
-    ScheduleProvider,
-    StorageProvider,
-    CalendarService,
-    ScheduleSyncService,
-  ],
+  providers: [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](
-          changes.new[change] as never,
-          this.dateFormatPipe,
-          this.durationFormatPipe,
-        )}`,
+        }: ${formatRelevantKeys[change](changes.new[change] as never)}`,
     );
   }
 

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

@@ -12,34 +12,36 @@
  * 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 {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>> = {
-  year: 'yearly',
-  month: 'monthly',
-  week: 'weekly',
-  day: 'daily',
+const RECURRENCE_PATTERNS: Partial<Record<keyof Duration, string | undefined>> = {
+  years: 'yearly',
+  months: 'monthly',
+  weeks: 'weekly',
+  days: 'daily',
 };
 
-@Injectable({providedIn: 'root'})
+@Injectable()
 export class CalendarService {
   goToDate = new Subject<number>();
 
   goToDateClicked = this.goToDate.asObservable();
 
-  get calendarName(): string {
-    return this.config.app.name ?? 'StApps';
-  }
+  calendarName = 'StApps';
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  constructor(readonly calendar: Calendar, readonly config: ConfigProvider) {}
+  constructor(readonly calendar: Calendar, private readonly configProvider: ConfigProvider) {
+    this.calendarName = (this.configProvider.getValue('name') as string) ?? 'StApps';
+  }
 
   async createCalendar(): Promise<CalendarInfo | undefined> {
     await this.calendar.createCalendar({
@@ -84,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,
@@ -106,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) {
-    const index = date.diff(moment().startOf('day'), 'days');
+  emitGoToDate(date: Date) {
+    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(
-    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(),
-    ),
-  );
+  return shuffle(dates.map(date => formatISO(date)));
 }
 
 describe('iCal', () => {
-  it('should find simple recurrence patterns', () => {
-    for (const freq of ['day', 'week', 'month', 'year'] as unitOfTime.Diff[]) {
-      for (const interval of [1, 2, 3]) {
+  for (const freq of ['days', 'weeks', 'months', 'years'] as const) {
+    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(),
-          until: moment('2021-09-01T10:00')
-            .add(4 * interval, freq)
-            .toISOString(),
+          from: formatISO(parseISO('2021-09-01T10:00Z')),
+          until: formatISO(
+            add(parseISO('2021-09-01T10:00Z'), normalize({[freq]: 4 * interval}, '2021-09-01')),
+          ),
         };
 
+        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(),
-      until: moment('2021-09-03T10:00').add(4, 'weeks').toISOString(),
+      from: formatISO(parseISO('2021-09-03T10:00')),
+      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>> = {
-  day: 'DAILY',
-  week: 'WEEKLY',
-  month: 'MONTHLY',
-  year: 'YEARLY',
+const REPEAT_FREQUENCIES: Partial<Record<keyof Duration, string>> = {
+  days: 'DAILY',
+  weeks: 'WEEKLY',
+  months: 'MONTHLY',
+  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]: (
-    value: SCDateSeries[key],
-    dateFormatter: DateFormatPipe,
-    durationFormatter: DurationPipe,
-  ) => string;
+  [key in DateSeriesRelevantKeys]: (value: SCDateSeries[key]) => string;
 } = {
   uid: value => value,
-  dates: (value, dateFormatter) => `[${value.map(it => dateFormatter.transform(it)).join(', ')}]`,
-  exceptions: (value, dateFormatter) => `[${value?.map(it => dateFormatter.transform(it)).join(', ') ?? ''}]`,
-  repeatFrequency: (value, _, durationFormatter) => durationFormatter.transform(value),
-  duration: (value, _, durationFormatter) => durationFormatter.transform(value),
+  dates: value => `[${value.map(it => format(parseISO(it), 'PPp')).join(', ')}]`,
+  exceptions: value => `[${value?.map(it => format(parseISO(it), 'PPp')).join(', ') ?? ''}]`,
+  repeatFrequency: value => (value ? formatDuration(parseISODuration(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/config/config.module.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2021 StApps
+ * Copyright (C) 2019 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.
@@ -12,23 +12,16 @@
  * 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 {NgModule} from '@angular/core';
+import {DataModule} from '../data/data.module';
+import {StorageModule} from '../storage/storage.module';
+import {ConfigProvider} from './config.provider';
 
 /**
- * Get the last value of an array
+ * TODO
  */
-@Injectable()
-@Pipe({
-  name: 'nullishCoalesce',
-  pure: true,
+@NgModule({
+  imports: [StorageModule, DataModule],
+  providers: [ConfigProvider],
 })
-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;
-  }
-}
+export class ConfigModule {}

frontend/app/src/app/modules/config/config.provider.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-types */
 /*
  * Copyright (C) 2022 StApps
  * This program is free software: you can redistribute it and/or modify it
@@ -15,17 +14,19 @@
  */
 import {Injectable} from '@angular/core';
 import {Client} from '@openstapps/api';
-import {
-  SCAppConfiguration,
-  SCAuthorizationProvider,
-  SCBackendConfiguration,
-  SCIndexResponse,
-} from '@openstapps/core';
-import coreInfo from '@openstapps/core/package.json';
+import {SCAppConfiguration, SCIndexResponse} from '@openstapps/core';
+import packageInfo from '@openstapps/core/package.json';
+import {NGXLogger} from 'ngx-logger';
 import {environment} from '../../../environments/environment';
-import {StorageProvider} from '../storage/storage.provider';
-import {BeforeAppInit} from '../../before-app-init';
 import {StAppsWebHttpClient} from '../data/stapps-web-http-client.provider';
+import {StorageProvider} from '../storage/storage.provider';
+import {
+  ConfigFetchError,
+  ConfigInitError,
+  ConfigValueNotAvailable,
+  SavedConfigNotAvailable,
+  WrongConfigVersionInStorage,
+} from './errors';
 
 /**
  * Key to store config in storage module
@@ -34,55 +35,145 @@ import {StAppsWebHttpClient} from '../data/stapps-web-http-client.provider';
  */
 export const STORAGE_KEY_CONFIG = 'stapps.config';
 
+/**
+ * Provides configuration
+ */
 @Injectable({
   providedIn: 'root',
 })
-export class ConfigProvider implements SCIndexResponse, BeforeAppInit {
-  private client: Client;
+export class ConfigProvider {
+  /**
+   * Api client
+   */
+  client: Client;
 
-  constructor(private storageProvider: StorageProvider, httpClient: StAppsWebHttpClient) {
-    this.client = new Client(httpClient, environment.backend_url, environment.backend_version);
-  }
+  /**
+   * App configuration as IndexResponse
+   */
+  config: SCIndexResponse;
 
-  async beforeAppInit() {
-    this.isFirstSession = !(await this.storageProvider.has(STORAGE_KEY_CONFIG));
-    // Queue config update for next launch; don't block current launch
-    const configUpdate = this.updateConfig();
-    console.log('Config update queued');
+  /**
+   * Version of the @openstapps/core package that app is using
+   */
+  scVersion = packageInfo.version;
 
-    const config = await this.storageProvider
-      .get<SCIndexResponse>(STORAGE_KEY_CONFIG)
-      .then(it => it ?? configUpdate);
+  /**
+   * First session indicator (config not found in storage)
+   */
+  firstSession = true;
 
-    Object.assign(this, config);
-
-    console.assert(
-      this.backend.SCVersion === coreInfo.version,
-      'Wrong config version in storage.',
-      'Expected:',
-      coreInfo.version,
-      'Actual:',
-      this.backend.SCVersion,
-    );
+  /**
+   * Constructor, initialise api client
+   * @param storageProvider StorageProvider to load persistent configuration
+   * @param swHttpClient Api client
+   * @param logger An angular logger
+   */
+  constructor(
+    private readonly storageProvider: StorageProvider,
+    swHttpClient: StAppsWebHttpClient,
+    private readonly logger: NGXLogger,
+  ) {
+    this.client = new Client(swHttpClient, environment.backend_url, environment.backend_version);
   }
 
   /**
-   * Updates the config from remote
+   * Fetches configuration from backend
    */
-  async updateConfig(): Promise<SCIndexResponse> {
-    const config = await this.client.handshake(coreInfo.version);
-    await this.storageProvider.put(STORAGE_KEY_CONFIG, config);
-
-    console.log(`Config updated`);
-
-    return config;
+  async fetch(): Promise<SCIndexResponse> {
+    try {
+      return await this.client.handshake(this.scVersion);
+    } catch {
+      throw new ConfigFetchError();
+    }
   }
 
-  app: SCAppConfiguration;
+  /**
+   * Returns the value of an app configuration
+   * @param attribute requested attribute from app configuration
+   */
+  public getValue(attribute: keyof SCAppConfiguration) {
+    if (this.config.app[attribute] !== undefined) {
+      return this.config.app[attribute];
+    }
+    throw new ConfigValueNotAvailable(attribute);
+  }
 
-  auth: {default?: SCAuthorizationProvider | undefined; paia?: SCAuthorizationProvider | undefined};
+  /**
+   * Returns a value of the configuration (not only app configuration)
+   * @param attribute requested attribute from the configuration
+   */
+  public getAnyValue(attribute: keyof SCIndexResponse) {
+    if (this.config[attribute] !== undefined) {
+      return this.config[attribute];
+    }
+    throw new ConfigValueNotAvailable(attribute);
+  }
 
-  backend: SCBackendConfiguration;
+  /**
+   * Initialises the ConfigProvider
+   * @throws ConfigInitError if no configuration could be loaded.
+   * @throws WrongConfigVersionInStorage if fetch failed and saved config has wrong SCVersion
+   */
+  async init(): Promise<void> {
+    let loadError;
+    let fetchError;
+    // load saved configuration
+    try {
+      this.config = await this.loadLocal();
+      this.firstSession = false;
+      this.logger.log(`initialised configuration from storage`);
+      if (this.config.backend.SCVersion !== this.scVersion) {
+        loadError = new WrongConfigVersionInStorage(this.scVersion, this.config.backend.SCVersion);
+      }
+    } catch (error) {
+      loadError = error;
+    }
+    // fetch remote configuration from backend
+    try {
+      const fetchedConfig: SCIndexResponse = await this.fetch();
+      await this.set(fetchedConfig);
+      this.logger.log(`initialised configuration from remote`);
+    } catch (error) {
+      fetchError = error;
+    }
+    // check for occurred errors and throw them
+    if (loadError !== undefined && fetchError !== undefined) {
+      throw new ConfigInitError();
+    }
+    if (loadError !== undefined) {
+      this.logger.warn(loadError);
+    }
+    if (fetchError !== undefined) {
+      this.logger.warn(fetchError);
+    }
+  }
 
-  isFirstSession: boolean;
+  /**
+   * Returns saved configuration from StorageModule
+   * @throws SavedConfigNotAvailable if no configuration could be loaded
+   */
+  async loadLocal(): Promise<SCIndexResponse> {
+    // get local configuration
+    if (await this.storageProvider.has(STORAGE_KEY_CONFIG)) {
+      return this.storageProvider.get<SCIndexResponse>(STORAGE_KEY_CONFIG);
+    }
+    throw new SavedConfigNotAvailable();
+  }
+
+  /**
+   * Saves the configuration from the provider
+   * @param config configuration to save
+   */
+  async save(config: SCIndexResponse): Promise<void> {
+    await this.storageProvider.put(STORAGE_KEY_CONFIG, config);
+  }
+
+  /**
+   * Sets the configuration in the module and writes it into app storage
+   * @param config SCIndexResponse to set
+   */
+  async set(config: SCIndexResponse): Promise<void> {
+    this.config = config;
+    await this.save(this.config);
+  }
 }

frontend/app/src/app/modules/config/errors.ts

@@ -0,0 +1,65 @@
+/*
+ * 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 {AppError} from '../../_helpers/errors';
+
+/**
+ * Error that is thrown when fetching from backend fails
+ */
+export class ConfigFetchError extends AppError {
+  constructor() {
+    super('ConfigFetchError', 'App configuration could not be fetched!');
+  }
+}
+
+/**
+ * Error that is thrown when the ConfigProvider could be initialised
+ */
+export class ConfigInitError extends AppError {
+  constructor() {
+    super('ConfigInitError', 'App configuration could not be initialised!');
+  }
+}
+
+/**
+ * Error that is thrown when the requested config value is not available
+ */
+export class ConfigValueNotAvailable extends AppError {
+  constructor(valueKey: string) {
+    super('ConfigValueNotAvailable', `No attribute "${valueKey}" in config available!`);
+  }
+}
+
+/**
+ * Error that is thrown when no saved config is available
+ */
+export class SavedConfigNotAvailable extends AppError {
+  constructor() {
+    super('SavedConfigNotAvailable', 'No saved app configuration available.');
+  }
+}
+
+/**
+ * Error that is thrown when the SCVersion of the saved config is not compatible with the app
+ */
+export class WrongConfigVersionInStorage extends AppError {
+  constructor(correctVersion: string, savedVersion: string) {
+    super(
+      'WrongConfigVersionInStorage',
+      `The saved configs backend version ${savedVersion} ` +
+        `does not equal the configured backend version ${correctVersion} of the app.`,
+    );
+  }
+}

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)
-        .filter(key => it[key].length > 0)
-        .find(key => moment(key).isSame(moment(), 'day'));
-      return closestDayWithDishes ? it[closestDayWithDishes] : [];
+      const days = Object.entries(it);
+      console.assert(days.length <= 1);
+      console.assert(!days[0] || isToday(parseISO(days[0][0])));
+      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 |
-          titlecase) }}
+          dfnsParseDuration | dfnsFormatFrequencyPure | sentencecase) :
+          ('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:
-            date.item.duration | amDateFormat: 'LT' }}
+            <b>{{ date.item.duration | dfnsParseDuration | dfnsFormatDurationPure }}</b>
+            {{ 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] |
-            amDateFormat: 'LL' }}
+            {{ date.item.dates[0] | dfnsParseIso | dfnsFormatPure: 'PPP' }} - {{
+            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/offers-in-list.component.ts

@@ -30,8 +30,9 @@ export class OffersInListComponent {
   @Input() set offers(it: Array<SCThingThatCanBeOfferedOffer<SCAcademicPriceGroup>>) {
     this._offers = it;
     this.price = it[0].prices?.default;
-    const group = this.settingsProvider.getSetting('profile', 'group');
-    this.price = it[0].prices?.[(group.value as string).replace(/s$/, '') as never];
+    this.settingsProvider.getSetting('profile', 'group').then(group => {
+      this.price = it[0].prices?.[(group.value as string).replace(/s$/, '') as never];
+    });
 
     const availabilities = new Set(it.map(offer => offer.availability));
     this.soldOut = availabilities.has('out of stock') && availabilities.size === 1;

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 :
-      'll' }}
+      {{ 'data.types.origin.detail.CREATED' | translate | titlecase }}: {{ origin.created | dfnsParseIso |
+      dfnsFormatPure : 'PPP' }}
     </p>
     <p *ngIf="origin.updated">
-      {{ 'data.types.origin.detail.UPDATED' | translate | titlecase }}: {{ origin.updated | amDateFormat :
-      'll' }}
+      {{ 'data.types.origin.detail.UPDATED' | translate | titlecase }}: {{ origin.updated | dfnsParseIso |
+      dfnsFormatPure : 'PPP' }}
     </p>
     <p *ngIf="origin.modified">
-      {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}: {{ origin.modified | amDateFormat :
-      'll' }}
+      {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}: {{ origin.modified | dfnsParseIso |
+      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 :
-      'll' }}
+      {{ 'data.types.origin.detail.INDEXED' | translate | titlecase }}: {{ origin.indexed | dfnsParseIso |
+      dfnsFormatPure : 'PPP'}}
     </p>
     <p *ngIf="origin.modified">
-      {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}: {{ origin.modified | amDateFormat :
-      'll' }}
+      {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}: {{ origin.modified | dfnsParseIso |
+      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 {MapPosition} from '../../map/position.service';
-import {SearchPageComponent} from './search-page.component';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {MapPosition, PositionService} from '../../map/position.service';
 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',
-  styleUrls: ['../../data/list/search-page.scss'],
+  selector: 'stapps-food-data-list',
+  templateUrl: 'food-data-list.html',
+  styleUrls: ['food-data-list.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FoodDataListComponent extends SearchPageComponent implements OnInit {
-  title = 'canteens.title';
-
-  showNavigation = false;
-
+export class FoodDataListComponent {
   isNotInView$ = new BehaviorSubject(true);
 
-  /**
-   * Sets the forced filter to present only places for eating/drinking
-   */
-  ngOnInit() {
-    this.positionService
-      .watchCurrentLocation({enableHighAccuracy: false, maximumAge: 1000})
-      .pipe(pauseWhen(this.isNotInView$), takeUntilDestroyed(this.destroy$))
-      .subscribe({
-        next: (position: MapPosition) => {
-          this.positionService.position = position;
+  forcedFilter: SCSearchFilter = {
+    arguments: {
+      filters: [
+        {
+          arguments: {
+            field: 'categories',
+            value: 'canteen',
+          },
+          type: 'value',
         },
-        error: async _error => {
-          this.positionService.position = undefined;
-          await Geolocation.checkPermissions();
+        {
+          arguments: {
+            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 = [
-      {
-        arguments: {field: 'name'},
-        order: 'asc',
-        type: 'ducet',
-      },
-    ];
-
-    this.forcedFilter = {
-      arguments: {
-        filters: [
-          {
-            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 = [
+  sortQuery = this.positionService
+    .watchCurrentLocation({
+      enableHighAccuracy: false,
+      maximumAge: 1000,
+    })
+    .pipe(
+      pauseWhen(this.isNotInView$),
+      retry({
+        delay: () => from(Geolocation.checkPermissions()),
+      }),
+      map<MapPosition, SCSearchSort[]>(({longitude, latitude}) => [
         {
           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,12 +12,19 @@
  * 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, AnimationController} from '@ionic/angular';
+import {AlertController} from '@ionic/angular';
 import {Capacitor} from '@capacitor/core';
-import {SCFacet, SCSearchFilter, SCSearchQuery, SCSearchSort, SCThings} from '@openstapps/core';
+import {
+  SCFacet,
+  SCFeatureConfiguration,
+  SCSearchFilter,
+  SCSearchQuery,
+  SCSearchSort,
+  SCThings,
+} from '@openstapps/core';
 import {NGXLogger} from 'ngx-logger';
 import {combineLatest, Subject} from 'rxjs';
 import {debounceTime, distinctUntilChanged, startWith} from 'rxjs/operators';
@@ -25,10 +32,9 @@ 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';
-import {ConfigProvider} from '../../config/config.provider';
 
 /**
  * SearchPageComponent queries things and shows list of things as search results and filter as context menu
@@ -39,7 +45,7 @@ import {ConfigProvider} from '../../config/config.provider';
   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';
@@ -133,11 +139,11 @@ export class SearchPageComponent implements OnInit {
   /**
    * Api query sorting
    */
-  sortQuery: SCSearchSort[] | undefined;
+  @Input() sortQuery: SCSearchSort[] | undefined;
 
   destroy$ = inject(DestroyRef);
 
-  routeAnimation = searchPageSwitchAnimation(inject(AnimationController));
+  routeAnimation = searchPageSwitchAnimation();
 
   constructor(
     protected readonly alertController: AlertController,
@@ -148,15 +154,20 @@ export class SearchPageComponent implements OnInit {
     protected dataRoutingService: DataRoutingService,
     protected router: Router,
     private readonly route: ActivatedRoute,
-    protected positionService: PositionService,
-    private readonly config: ConfigProvider,
+    private readonly configProvider: ConfigProvider,
   ) {}
 
+  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,
@@ -324,7 +335,8 @@ export class SearchPageComponent implements OnInit {
         });
     }
     try {
-      this.isHebisAvailable = !!this.config.app.features.plugins?.['hebis-plugin']?.urlPath;
+      const features = this.configProvider.getValue('features') as SCFeatureConfiguration;
+      this.isHebisAvailable = !!features.plugins?.['hebis-plugin']?.urlPath;
     } catch (error) {
       this.logger.error(error);
     }

frontend/app/src/app/modules/data/rating.provider.ts

@@ -62,8 +62,10 @@ export class RatingProvider {
     return new Date(today.getFullYear(), today.getMonth(), today.getDate()).toISOString();
   }
 
-  private get userGroup(): SCUserGroup {
-    return (this.settingsProvider.getSetting('profile', 'group') as SCUserGroupSetting).value as SCUserGroup;
+  private get userGroup(): Promise<SCUserGroup> {
+    return this.settingsProvider
+      .getSetting('profile', 'group')
+      .then(it => (it as SCUserGroupSetting).value as SCUserGroup);
   }
 
   private async getStoredRatings(): Promise<RatingStorage> {

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] |
-              dateFormat : 'weekday:long' }}
+              {{ item.repeatFrequency | dfnsParseDuration | dfnsFormatDurationPure | sentencecase }}, {{
+              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,11 +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 {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, DestroyRef, inject, Input} from '@angular/core';
 import {PositionService} from '../../../map/position.service';
-import {Observable, timer} from 'rxjs';
+import {BehaviorSubject, interval} from 'rxjs';
 import {hasValidLocation, isSCFloor, PlaceTypes, PlaceTypesWithDistance} from './place-types';
-import {map} from 'rxjs/operators';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 /**
  * Shows a place as a list item
@@ -28,7 +28,12 @@ import {map} from 'rxjs/operators';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PlaceListItemComponent {
-  _item: PlaceTypesWithDistance;
+  /**
+   * Item getter
+   */
+  get item(): PlaceTypesWithDistance {
+    return this._item;
+  }
 
   /**
    * An item to show (setter is used as there were issues assigning the distance to the right place in a list)
@@ -36,14 +41,26 @@ export class PlaceListItemComponent {
   @Input() set item(item: PlaceTypes) {
     this._item = item;
     if (!isSCFloor(item) && hasValidLocation(item)) {
-      this.distance = timer(0, 10_000).pipe(map(() => this.positionService.getDistance(item.geo.point)));
+      this.distance.next(this.positionService.getDistance(item.geo.point));
+      interval(10_000)
+        .pipe(takeUntilDestroyed(this.destroy$))
+        .subscribe(_ => {
+          this.distance.next(this.positionService.getDistance(item.geo.point));
+        });
     }
   }
 
+  /**
+   * An item to show
+   */
+  private _item: PlaceTypesWithDistance;
+
   /**
    * Distance in meters
    */
-  distance?: Observable<number | undefined>;
+  distance = new BehaviorSubject<number | undefined>(undefined);
+
+  private destroy$ = inject(DestroyRef);
 
   constructor(private positionService: PositionService) {}
 }

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

@@ -17,16 +17,16 @@
   <ion-row>
     <ion-col>
       <div class="ion-text-wrap">
-        <ion-label class="title">{{ 'name' | thingTranslate: _item }}</ion-label>
-        <ng-container *ngIf="_item.type !== 'floor'">
-          <p class="title-sub" *ngIf="_item.openingHours">
+        <ion-label class="title">{{ 'name' | thingTranslate: item }}</ion-label>
+        <ng-container *ngIf="item.type !== 'floor'">
+          <p class="title-sub" *ngIf="item.openingHours">
             <span>
-              <stapps-opening-hours [openingHours]="_item.openingHours"></stapps-opening-hours>
+              <stapps-opening-hours [openingHours]="item.openingHours"></stapps-opening-hours>
             </span>
           </p>
           <p>
-            <ion-note *ngIf="_item.categories && _item.type !== 'building'; else onlyType">
-              <ion-label> {{ 'categories' | thingTranslate: _item | join: ', ' | titlecase }} </ion-label>
+            <ion-note *ngIf="item.categories && item.type !== 'building'; else onlyType">
+              <ion-label> {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }} </ion-label>
               <ion-label *ngIf="distance | async as distance" class="distance">
                 <ion-icon name="directions_walk"></ion-icon>
                 {{ distance | metersLocalized }}
@@ -35,7 +35,7 @@
           </p>
           <ng-template #onlyType>
             <ion-note>
-              <ion-label> {{ 'type' | thingTranslate: _item | titlecase }} </ion-label>
+              <ion-label> {{ 'type' | thingTranslate: item | titlecase }} </ion-label>
               <ion-label *ngIf="distance | async as distance" class="distance">
                 <ion-icon name="directions_walk"></ion-icon>
                 {{ distance | metersLocalized }}
@@ -43,13 +43,13 @@
             </ion-note>
           </ng-template>
         </ng-container>
-        <p *ngIf="_item.description">{{ 'description' | thingTranslate: _item }}</p>
+        <p *ngIf="item.description">{{ 'description' | thingTranslate: item }}</p>
       </div>
     </ion-col>
-    <ng-container *ngIf="_item.type !== 'building'">
-      <ion-col size="auto" class="in-place" *ngIf="_item.inPlace">
+    <ng-container *ngIf="item.type !== 'building'">
+      <ion-col size="auto" class="in-place" *ngIf="item.inPlace">
         <ion-icon name="pin_drop"></ion-icon
-        ><ion-label>{{ 'name' | thingTranslate: _item.inPlace }}</ion-label>
+        ><ion-label>{{ 'name' | thingTranslate: item.inPlace }}</ion-label>
       </ion-col>
     </ng-container>
   </ion-row>

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 :
-          'seconds' }}
+          {{ 'duration' | propertyNameTranslate : item | titlecase }}: {{ item.duration | dfnsParseDuration |
+          dfnsFormatDurationPure : {format: ['seconds']} }}
         </p>
         <ion-note>{{ 'type' | thingTranslate : item }}</ion-note>
       </div>

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

@@ -12,13 +12,20 @@
  * 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, inject, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {AlertController} from '@ionic/angular';
+import {ActivatedRoute, Router} from '@angular/router';
+import {NGXLogger} from 'ngx-logger';
 import {debounceTime, distinctUntilChanged, startWith, take} from 'rxjs/operators';
 import {combineLatest} from 'rxjs';
 import {SCThingType} from '@openstapps/core';
 import {FavoritesService} from './favorites.service';
+import {DataRoutingService} from '../data/data-routing.service';
 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 {ConfigProvider} from '../config/config.provider';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 /**
@@ -34,7 +41,30 @@ export class FavoritesPageComponent extends SearchPageComponent implements OnIni
 
   showNavigation = false;
 
-  favoritesService = inject(FavoritesService);
+  constructor(
+    alertController: AlertController,
+    dataProvider: DataProvider,
+    contextMenuService: ContextMenuService,
+    settingsProvider: SettingsProvider,
+    logger: NGXLogger,
+    dataRoutingService: DataRoutingService,
+    router: Router,
+    route: ActivatedRoute,
+    private favoritesService: FavoritesService,
+    configProvider: ConfigProvider,
+  ) {
+    super(
+      alertController,
+      dataProvider,
+      contextMenuService,
+      settingsProvider,
+      logger,
+      dataRoutingService,
+      router,
+      route,
+      configProvider,
+    );
+  }
 
   ngOnInit() {
     super.ngOnInit(false);

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/daia-data.provider.ts

@@ -16,9 +16,10 @@ import {Injectable} from '@angular/core';
 import {DaiaAvailabilityResponse, DaiaHolding, DaiaService} from './protocol/response';
 import {StorageProvider} from '../storage/storage.provider';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {ConfigProvider} from '../config/config.provider';
+import {SCFeatureConfiguration} from '@openstapps/core';
 import {NGXLogger} from 'ngx-logger';
 import {TranslateService} from '@ngx-translate/core';
-import {ConfigProvider} from '../config/config.provider';
 
 /**
  *  Generated class for the DataProvider provider.
@@ -43,10 +44,18 @@ export class DaiaDataProvider {
 
   clientHeaders = new HttpHeaders();
 
+  /**
+   * TODO
+   * @param storageProvider TODO
+   * @param httpClient TODO
+   * @param configProvider TODO
+   * @param logger TODO
+   * @param translateService TODO
+   */
   constructor(
     storageProvider: StorageProvider,
     httpClient: HttpClient,
-    private config: ConfigProvider,
+    private configProvider: ConfigProvider,
     private readonly logger: NGXLogger,
     private translateService: TranslateService,
   ) {
@@ -58,14 +67,15 @@ export class DaiaDataProvider {
   async getAvailability(id: string): Promise<DaiaHolding[] | undefined> {
     if (this.daiaServiceUrl === undefined) {
       try {
-        if (this.config.app.features.extern?.daia?.url) {
-          this.daiaServiceUrl = this.config.app.features.extern?.daia?.url;
+        const features = this.configProvider.getValue('features') as SCFeatureConfiguration;
+        if (features.extern?.daia?.url) {
+          this.daiaServiceUrl = features.extern?.daia?.url;
         } else {
           this.logger.error('Daia service url undefined');
           return undefined;
         }
-        if (this.config.app.features.extern?.hebisProxy?.url) {
-          this.hebisProxyUrl = this.config.app.features.extern?.hebisProxy?.url;
+        if (features.extern?.hebisProxy?.url) {
+          this.hebisProxyUrl = features.extern?.hebisProxy?.url;
         } else {
           this.logger.error('HeBIS proxy url undefined');
           return undefined;

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/library-account.service.ts

@@ -12,17 +12,22 @@
  * 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} from '@angular/core';
 import {JQueryRequestor, Requestor} from '@openid/appauth';
-import {SCAuthorizationProviderType} from '@openstapps/core';
+import {
+  SCAuthorizationProviderType,
+  SCFeatureConfiguration,
+  SCFeatureConfigurationExtern,
+} from '@openstapps/core';
 import {DocumentAction, PAIADocument, PAIADocumentStatus, PAIAFees, PAIAItems, PAIAPatron} from '../types';
 import {HebisDataProvider} from '../../hebis/hebis-data.provider';
 import {PAIATokenResponse} from '../../auth/paia/paia-token-response';
 import {AuthHelperService} from '../../auth/auth-helper.service';
+import {ConfigProvider} from '../../config/config.provider';
 import {TranslateService} from '@ngx-translate/core';
 import {AlertController, ToastController} from '@ionic/angular';
 import {HebisSearchResponse} from '../../hebis/protocol/response';
-import {ConfigProvider} from '../../config/config.provider';
 
 @Injectable({
   providedIn: 'root',
@@ -31,26 +36,29 @@ export class LibraryAccountService {
   /**
    * Base url of the external service
    */
-  get baseUrl(): string {
-    return this.config.app.features.extern!['paia'].url;
-  }
+  baseUrl: string;
 
   /**
    * Authorization provider type
    */
-  get authType(): SCAuthorizationProviderType {
-    return this.config.app.features.extern!['paia'].authProvider!;
-  }
+  authType: SCAuthorizationProviderType;
 
   constructor(
     protected requestor: Requestor = new JQueryRequestor(),
     private readonly hebisDataProvider: HebisDataProvider,
     private readonly authHelper: AuthHelperService,
+    readonly configProvider: ConfigProvider,
     private readonly translateService: TranslateService,
     private readonly alertController: AlertController,
     private readonly toastController: ToastController,
-    private readonly config: ConfigProvider,
-  ) {}
+  ) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const config: SCFeatureConfigurationExtern = (
+      configProvider.getValue('features') as SCFeatureConfiguration
+    ).extern!.paia;
+    this.baseUrl = config.url;
+    this.authType = config.authProvider as SCAuthorizationProviderType;
+  }
 
   async getProfile() {
     const patron = ((await this.getValidToken()) as PAIATokenResponse).patron;

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] |
-                  amDateFormat : 'll' }}
+                  {{ 'library.account.pages.profile.values.expires' | translate }}:&nbsp;{{
+                  $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/map.module.ts

@@ -19,7 +19,9 @@ import {LeafletModule} from '@asymmetrik/ngx-leaflet';
 import {LeafletMarkerClusterModule} from '@asymmetrik/ngx-leaflet-markercluster';
 import {IonicModule} from '@ionic/angular';
 import {TranslateModule} from '@ngx-translate/core';
+import {Polygon} from 'geojson';
 import {ThingTranslateModule} from '../../translation/thing-translate.module';
+import {ConfigProvider} from '../config/config.provider';
 import {DataFacetsProvider} from '../data/data-facets.provider';
 import {DataModule} from '../data/data.module';
 import {DataProvider} from '../data/data.provider';
@@ -33,6 +35,17 @@ import {UtilModule} from '../../util/util.module';
 import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 import {GeoNavigationDirective} from './geo-navigation.directive';
 
+/**
+ * Initializes the default area to show in advance (before components are initialized)
+ * @param configProvider An instance of the ConfigProvider to read the campus polygon from
+ * @param mapProvider An instance of the MapProvider to set the default polygon (area to show on the map)
+ */
+export function initMapConfigFactory(configProvider: ConfigProvider, mapProvider: MapProvider) {
+  return async () => {
+    mapProvider.defaultPolygon = (await configProvider.getValue('campusPolygon')) as Polygon;
+  };
+}
+
 const mapRoutes: Routes = [
   {path: 'map', component: MapPageComponent},
   {path: 'map/:uid', component: MapPageComponent},

frontend/app/src/app/modules/map/map.provider.ts

@@ -21,11 +21,12 @@ import {
   SCThingType,
   SCUuid,
 } from '@openstapps/core';
-import {Point} from 'geojson';
+import {Point, Polygon} from 'geojson';
 import {divIcon, geoJSON, LatLng, Map, marker, Marker} from 'leaflet';
 import {DataProvider} from '../data/data.provider';
 import {MapPosition, PositionService} from './position.service';
 import {hasValidLocation} from '../data/types/place/place-types';
+import {ConfigProvider} from '../config/config.provider';
 import {SCIcon} from '../../util/ion-icon/icon';
 
 /**
@@ -35,6 +36,11 @@ import {SCIcon} from '../../util/ion-icon/icon';
   providedIn: 'root',
 })
 export class MapProvider {
+  /**
+   * Area to show when the map is initialized (shown for the first time)
+   */
+  defaultPolygon: Polygon;
+
   /**
    * Provide a point marker for a leaflet map
    * @param point Point to get marker for
@@ -105,7 +111,13 @@ export class MapProvider {
     clearInterval(interval);
   };
 
-  constructor(private dataProvider: DataProvider, private positionService: PositionService) {}
+  constructor(
+    private dataProvider: DataProvider,
+    private positionService: PositionService,
+    private configProvider: ConfigProvider,
+  ) {
+    this.defaultPolygon = this.configProvider.getValue('campusPolygon') as Polygon;
+  }
 
   /**
    * Provide the specific place by its UID

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

@@ -30,7 +30,6 @@ import {Capacitor} from '@capacitor/core';
 import {pauseWhen} from '../../../util/rxjs/pause-when';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {startViewTransition} from '../../../util/view-transition';
-import {ConfigProvider} from '../../config/config.provider';
 
 /**
  * The main page of the map
@@ -103,7 +102,7 @@ export class MapPageComponent implements OnInit {
    * Options of the leaflet map
    */
   options: MapOptions = {
-    center: geoJSON(inject(ConfigProvider).app.campusPolygon).getBounds().getCenter(),
+    center: geoJSON(this.mapProvider.defaultPolygon).getBounds().getCenter(),
     layers: [
       tileLayer('https://osm.server.uni-frankfurt.de/tiles/roads/x={x}&y={y}&z={z}', {
         attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',

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/menu/navigation/navigation.component.ts

@@ -12,23 +12,75 @@
  * 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, inject} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
+import {
+  SCAppConfigurationMenuCategory,
+  SCLanguage,
+  SCThingTranslator,
+  SCTranslations,
+} from '@openstapps/core';
+import {NavigationService} from './navigation.service';
+import config from 'capacitor.config';
+import {SettingsProvider} from '../../settings/settings.provider';
 import {BreakpointObserver} from '@angular/cdk/layout';
-import {map} from 'rxjs/operators';
-import {ConfigProvider} from '../../config/config.provider';
 
+/**
+ * Generated class for the MenuPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
 @Component({
   selector: 'stapps-navigation',
   styleUrls: ['navigation.scss'],
   templateUrl: 'navigation.html',
 })
-export class NavigationComponent {
-  /**
-   * TODO: What was this for???
-   */
-  showTabBar$ = inject(BreakpointObserver)
-    .observe(['(min-width: 768px)'])
-    .pipe(map(({matches}) => !matches));
+export class NavigationComponent implements OnInit {
+  showTabbar = true;
 
-  constructor(readonly config: ConfigProvider) {}
+  /**
+   * Name of the app
+   */
+  appName = config.appName;
+
+  /**
+   * Possible languages to be used for translation
+   */
+  language: keyof SCTranslations<SCLanguage>;
+
+  /**
+   * Menu entries from config module
+   */
+  menu: SCAppConfigurationMenuCategory[];
+
+  /**
+   * Core translator
+   */
+  translator: SCThingTranslator;
+
+  constructor(
+    public translateService: TranslateService,
+    private navigationService: NavigationService,
+    private settingsProvider: SettingsProvider,
+    private responsive: BreakpointObserver,
+  ) {
+    translateService.onLangChange.subscribe((event: LangChangeEvent) => {
+      this.language = event.lang as keyof SCTranslations<SCLanguage>;
+      this.translator = new SCThingTranslator(this.language);
+    });
+
+    this.responsive.observe(['(min-width: 768px)']).subscribe(result => {
+      this.showTabbar = !result.matches;
+    });
+  }
+
+  async ngOnInit() {
+    this.language = (await this.settingsProvider.getValue(
+      'profile',
+      'language',
+    )) as keyof SCTranslations<SCLanguage>;
+    this.translator = new SCThingTranslator(this.language);
+    this.menu = await this.navigationService.getMenu();
+  }
 }

frontend/app/src/app/modules/menu/navigation/navigation.html

@@ -24,8 +24,8 @@
         </ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content *ngIf="config.app.menus">
-      <ion-list *ngFor="let category of config.app.menus; first as isFirst">
+    <ion-content *ngIf="menu">
+      <ion-list *ngFor="let category of menu; first as isFirst">
         <ion-item
           *ngIf="category.title !== ''"
           [rootLink]="category.route"
@@ -34,11 +34,11 @@
           class="menu-category"
         >
           <ion-icon slot="end" [name]="category.icon"></ion-icon>
-          <ion-label> {{ 'title' | translateSimple: category | titlecase }} </ion-label>
+          <ion-label> {{ category.translations[language].title | titlecase }} </ion-label>
         </ion-item>
         <ion-item *ngFor="let item of category.items" [rootLink]="item.route" [redirectedFrom]="item.route">
           <ion-icon slot="end" [name]="item.icon"></ion-icon>
-          <ion-label> {{ 'title' | translateSimple: item | titlecase }} </ion-label>
+          <ion-label> {{ item.translations[language].title | titlecase }} </ion-label>
         </ion-item>
       </ion-list>
     </ion-content>

frontend/app/src/app/modules/menu/navigation/navigation.module.ts

@@ -22,11 +22,10 @@ import {IonIconModule} from '../../../util/ion-icon/ion-icon.module';
 import {TranslateModule} from '@ngx-translate/core';
 import {RouterModule} from '@angular/router';
 import {OfflineNoticeComponent} from './offline-notice.component';
-import {ThingTranslateModule} from '../../../translation/thing-translate.module';
 
 @NgModule({
   declarations: [RootLinkDirective, NavigationComponent, TabsComponent, OfflineNoticeComponent],
-  imports: [CommonModule, IonicModule, IonIconModule, TranslateModule, RouterModule, ThingTranslateModule],
+  imports: [CommonModule, IonicModule, IonIconModule, TranslateModule, RouterModule],
   exports: [TabsComponent, RootLinkDirective, NavigationComponent],
 })
 export class NavigationModule {}

frontend/app/src/app/modules/menu/navigation/navigation.service.ts

@@ -0,0 +1,37 @@
+/*
+ * 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} from '@angular/core';
+import {SCAppConfigurationMenuCategory} from '@openstapps/core';
+import {ConfigProvider} from '../../config/config.provider';
+import {NGXLogger} from 'ngx-logger';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class NavigationService {
+  constructor(private configProvider: ConfigProvider, private logger: NGXLogger) {}
+
+  async getMenu() {
+    let menu: SCAppConfigurationMenuCategory[] = [];
+    try {
+      menu = this.configProvider.getValue('menus') as SCAppConfigurationMenuCategory[];
+    } catch (error) {
+      this.logger.error(`error from loading menu entries: ${error}`);
+    }
+
+    return menu;
+  }
+}

frontend/app/src/app/modules/menu/navigation/tabs.component.ts

@@ -12,44 +12,93 @@
  * 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 {ChangeDetectionStrategy, Component, inject} from '@angular/core';
-import {Event, NavigationEnd, Router} from '@angular/router';
-import {SCAppConfigurationMenuCategory} from '@openstapps/core';
+
+import {Component} from '@angular/core';
+import {NavigationEnd, Router} from '@angular/router';
+import {
+  SCAppConfigurationMenuCategory,
+  SCLanguage,
+  SCThingTranslator,
+  SCTranslations,
+} from '@openstapps/core';
 import {ConfigProvider} from '../../config/config.provider';
-import {filter} from 'rxjs';
-import {map, startWith} from 'rxjs/operators';
-
-/**
- * Finds a tab name based on urls
- */
-function findTabFromUrl(url: string, menus: SCAppConfigurationMenuCategory[]): string {
-  if (url === '/') {
-    return menus[0]?.title ?? '';
-  }
-  return menus.find(category => url.includes(category.route))?.title ?? '';
-}
-
-/**
- * Type guard for event
- */
-function isNavigationEnd(event: Event): event is NavigationEnd {
-  return event instanceof NavigationEnd;
-}
+import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
+import {NGXLogger} from 'ngx-logger';
 
 @Component({
   selector: 'stapps-navigation-tabs',
-  templateUrl: 'tabs.html',
-  styleUrls: ['./tabs.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'tabs.template.html',
+  styleUrls: ['./tabs.component.scss'],
 })
 export class TabsComponent {
-  menus = inject(ConfigProvider).app.menus.slice(0, 5);
+  /**
+   * Possible languages to be used for translation
+   */
+  language: keyof SCTranslations<SCLanguage>;
 
-  selectedTab$ = this.router.events.pipe(
-    filter(isNavigationEnd),
-    map(event => findTabFromUrl(event.url, this.menus)),
-    startWith(findTabFromUrl(this.router.url, this.menus)),
-  );
+  /**
+   * Menu entries from config module
+   */
+  menu: SCAppConfigurationMenuCategory[];
 
-  constructor(private readonly router: Router) {}
+  /**
+   * Core translator
+   */
+  translator: SCThingTranslator;
+
+  /**
+   * Name of selected tab
+   */
+  selectedTab: string;
+
+  constructor(
+    private readonly configProvider: ConfigProvider,
+    public translateService: TranslateService,
+    private readonly logger: NGXLogger,
+    private readonly router: Router,
+  ) {
+    this.language = this.translateService.currentLang as keyof SCTranslations<SCLanguage>;
+    this.translator = new SCThingTranslator(this.language);
+    void this.loadMenuEntries();
+    this.router.events.subscribe((event: unknown) => {
+      if (event instanceof NavigationEnd) {
+        this.selectTab(event.url);
+      }
+    });
+    this.selectTab(router.url);
+
+    translateService.onLangChange?.subscribe((event: LangChangeEvent) => {
+      this.language = event.lang as keyof SCTranslations<SCLanguage>;
+      this.translator = new SCThingTranslator(this.language);
+    });
+  }
+
+  /**
+   * Loads menu entries from configProvider
+   */
+  async loadMenuEntries() {
+    try {
+      const menus = (await this.configProvider.getValue('menus')) as SCAppConfigurationMenuCategory[];
+
+      const menu = menus.slice(0, 5);
+      if (menu) {
+        this.menu = menu;
+      }
+    } catch (error) {
+      this.logger.error(`error from loading menu entries: ${error}`);
+    }
+  }
+
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  selectTab(url: string) {
+    if (!this.menu) {
+      return;
+    }
+    if (url === '/') {
+      this.selectedTab = (this.menu[0] as any)?.title ?? '';
+      return;
+    }
+    const candidate = this.menu.slice(0, 5).find(category => url.includes(category.route));
+    this.selectedTab = candidate?.title ?? '';
+  }
 }

frontend/app/src/app/modules/menu/navigation/tabs.template.html

@@ -33,19 +33,19 @@
 </ion-tab-bar>
 -->
 
-<ion-tab-bar slot="bottom" [selectedTab]="selectedTab$ | async">
+<ion-tab-bar slot="bottom" [selectedTab]="selectedTab">
   <ion-menu-toggle>
     <ion-tab-button class="menu-button">
       <ion-icon name="menu"></ion-icon>
     </ion-tab-button>
   </ion-menu-toggle>
   <ion-tab-button
-    *ngFor="let category of menus; first as isFirst"
+    *ngFor="let category of menu; first as isFirst"
     [rootLink]="category.route"
     [redirectedFrom]="category.route"
     [tab]="category.title"
   >
     <ion-icon [name]="category.icon"></ion-icon>
-    <ion-label>{{ 'title' | translateSimple: category | titlecase }}</ion-label>
+    <ion-label>{{ category.translations[language].title | titlecase }}</ion-label>
   </ion-tab-button>
 </ion-tab-bar>

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(),
-            endTime: moment(date).add(course.duration).toISOString(),
+            startTime: formatISO(new Date(date)),
+            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
-        === 0 ? 'NO' : myCoursesDay[1].length === 1 ? 'ONE' : 'MANY' ) + '_EVENT') | translate: {count:
-        myCoursesDay[1].length} }}</ion-label
+        >{{ myCoursesDay[0] | dfnsParseIso | dfnsFormatRelativeDatePure | titlecase }} - {{
+        ('profile.courses.' + (myCoursesDay[1].length === 0 ? 'NO' : myCoursesDay[1].length === 1 ? 'ONE' :
+        '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:
-            'LT'}}</ion-item-divider
+            >{{myCourse.startTime | dfnsParseIso | dfnsFormatPure: 'p'}} - {{myCourse.endTime | dfnsParseIso |
+            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
-    class="header-swiper"
-    #headerSwiper
-    [slidesPerView]="1"
-    (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>
+  <div class="day-labels">
+    <ion-button expand="block" fill="clear" (click)="popover.present($event)">
+      {{ dateRange.startDate | dfnsFormatPure : 'P' }} - {{ dateRange.endDate | dfnsFormatPure : 'P' }}
+    </ion-button>
 
-        <ion-popover [trigger]="'date-select-button' + index">
-          <ng-template>
-            <ion-datetime
-              #popoverDateTime
-              presentation="date"
-              [value]="date | amDateFormat : 'YYYY-MM-DD'"
-              (ionChange)="presentDatePopover(mainSwiper, headerSwiper, index, popoverDateTime)"
-            >
-            </ion-datetime>
-          </ng-template>
-        </ion-popover>
-      </div>
-    </ng-template>
-  </infinite-swiper>
+    <ion-popover #popover>
+      <ng-template>
+        <ion-datetime
+          #popoverDateTime
+          presentation="date"
+          [value]="dateRange.startDate.toISOString()"
+          (ionChange)="presentDatePopover(mainSwiper, popoverDateTime)"
+        >
+        </ion-datetime>
+      </ng-template>
+    </ion-popover>
+  </div>
 </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: {
-    startDate: string;
-    endDate: string;
-  } = {
-    startDate: '',
-    endDate: '',
+  dateRange = {
+    startDate: new Date(),
+    endDate: new Date(),
   };
 
   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');
-    if (dayString == undefined || dayString === 'now') {
-      const fragments = window.location.href.split('/');
-      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.baselineDate = parseISO(this.activatedRoute.snapshot.paramMap.get('date') ?? '');
+    if (!isValid(this.baselineDate)) this.baselineDate = new Date();
+    this.baselineDate = startOfDay(this.baselineDate);
 
     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.endDate = this.calculateDateFromIndex(0, this.layout.days - 1, 'DD.MM.YY');
+    this.dateRange.startDate = addDays(this.baselineDate, 0);
+    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.endDate = this.calculateDateFromIndex(index, this.layout.days - 1, 'DD.MM.YY');
+    this.dateRange.startDate = addDays(this.baselineDate, index);
+    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) {
-    other.swiperRef.slideTo(self.swiperRef.activeIndex);
-  }
-
-  presentDatePopover(
-    mainSwiper: InfiniteSwiperComponent,
-    headerSwiper: InfiniteSwiperComponent,
-    index: number,
-    popoverDateTime: IonDatetime,
-  ) {
-    const nextIndex =
-      moment(popoverDateTime.value).diff(this.baselineDate, 'days') - headerSwiper.virtualIndex - index;
+  presentDatePopover(mainSwiper: InfiniteSwiperComponent, popoverDateTime: IonDatetime) {
+    const nextIndex = differenceInDays(parseISO(popoverDateTime.value as string), this.baselineDate);
 
     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,
           },
         };