feat: date-fns

fix: opening hours not updating
feat: lazy-load opening hours module
feat: add e2e tests for opening hours
refactor: migrate opening hours to on-push change detection
feat: show exact minutes in opening hours starting one hour before next change

.changeset/chilly-goats-cough.md

@@ -0,0 +1,5 @@
+---
+'@openstapps/app': minor
+---
+
+Detail views now won't load data again if it is being navigated to from a list item

.changeset/cold-squids-remain.md

@@ -0,0 +1,11 @@
+---
+'@openstapps/app': patch
+---
+
+Refactored Opening Hours
+
+- Migrated Opening Hours to use OnPush change detection
+- Fixed a bug where opening hours would not update correctly
+- Lazy-load opening hours module to keep it out of the main bundle
+- Added e2e tests to verify functionality
+- Changed live update status to show exact minutes starting one hour before the next change

.changeset/fair-colts-explain.md

@@ -0,0 +1,5 @@
+---
+'@openstapps/app': patch
+---
+
+Use observable chains instead of change detection in the rating component

.changeset/fluffy-lamps-count.md

@@ -0,0 +1,5 @@
+---
+'@openstapps/app': minor
+---
+
+Added the ability to remove and add date series from their detail page

.changeset/forty-eagles-cough.md

@@ -0,0 +1,5 @@
+---
+'@openstapps/app': patch
+---
+
+Add a way to hide action chips on list items

.changeset/orange-knives-happen.md

@@ -0,0 +1,5 @@
+---
+'@openstapps/app': minor
+---
+
+Add directions to inPlace and place list items

.changeset/pink-sheep-relax.md

@@ -0,0 +1,9 @@
+---
+'@openstapps/app': minor
+---
+
+Improved calendar descriptions
+
+- The dashboard quick link now has a more intuitive icon
+- "Recurring" has been renamed to "Week Overview"
+- Long words in calendar tabs will now break instead of overflowing

.changeset/pretty-wombats-double.md

@@ -0,0 +1,13 @@
+---
+'@openstapps/app': minor
+---
+
+Revamp "My Courses" section on profile page
+
+The "My Courses" section on the profile page has been improved
+
+- It will now show the upcoming courses for the next five days
+- The section header is now consistent with the other sections
+- The section now uses standard list items instead of the custom solution
+
+Additionally, the profile page component has been cleaned up.

.changeset/proud-cameras-fail.md

@@ -0,0 +1,8 @@
+---
+'@openstapps/app': minor
+---
+
+Adjust map button and item behavior on different screen sizes
+
+- Small screens will show the item without margins below the map actions
+- Large screens will show the list item on the left side

.changeset/sour-carpets-flash.md

@@ -0,0 +1,5 @@
+---
+'@openstapps/app': patch
+---
+
+Fixed an issue that caused double and triple loading of data detail items through the route stack service

.changeset/thick-mails-peel.md

@@ -0,0 +1,5 @@
+---
+'@openstapps/app': minor
+---
+
+Map items are now native list items

.changeset/tricky-garlics-hope.md

@@ -0,0 +1,5 @@
+---
+'@openstapps/app': minor
+---
+
+Replaced simple links with list items in date-series detail

.changeset/wet-houses-provide.md

@@ -0,0 +1,5 @@
+---
+'@openstapps/app': minor
+---
+
+Use event title for date series instead of the generic date series title

.changeset/wicked-cheetahs-prove.md

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

.gitlab-ci.yml

@@ -32,7 +32,7 @@ variables:
 default:
   image: registry.gitlab.com/openstapps/openstapps/node-builder
   tags:
-    - performance
+    - saas-linux-xlarge-amd64
   interruptible: true
   before_script:
     - corepack enable
@@ -80,7 +80,7 @@ build:
   rules: &deploy-rules
     - if: $CI_PIPELINE_SOURCE == 'merge_request_event'
       variables:
-        DEPLOY_ID: $CI_MERGE_REQUEST_SOURCE_BRANCH_NAME
+        DEPLOY_ID: $CI_MERGE_REQUEST_IID
     - if: $CI_COMMIT_BRANCH == 'main'
       variables:
         DEPLOY_ID: production

.gitlab/publishing.gitlab-ci.yml

@@ -1,6 +1,6 @@
 .limit_publish_pipelines:
   rules:
-      - if: '($CI_COMMIT_BRANCH == "main" || $CI_COMMIT_BRANCH == "develop") && $CI_COMMIT_MESSAGE =~ /^ci: publish release/ && $CI_PIPELINE_SOURCE != "schedule"'
+      - if: '($CI_COMMIT_BRANCH == "main" || $CI_COMMIT_BRANCH == "develop") && $CI_COMMIT_MESSAGE =~ /ci: publish release/ && $CI_PIPELINE_SOURCE != "schedule"'
 
 deploy:
   stage: publish

.gitlab/schedules.gitlab-ci.yml

@@ -18,7 +18,7 @@ base image:
       docker build
       -t "${CI_REGISTRY_IMAGE}/${IMAGE_NAME}:$(grep -o '"version": "[^"]*' "${DEPLOY_DIR}/package.json" | cut -d'"' -f4)"
       -t "${CI_REGISTRY_IMAGE}/${IMAGE_NAME}:latest" "${CI_PROJECT_DIR}/${DEPLOY_DIR}" && 
-      docker push "${CI_REGISTRY_IMAGE}/${IMAGE_NAME}"
+      docker push "${CI_REGISTRY_IMAGE}/${IMAGE_NAME}" --all-tags
   cache: {} # disable irrelevant cache for this job
   before_script: [] # do not run irrelevant before script for this job
   parallel:
@@ -29,5 +29,7 @@ base image:
         DEPLOY_DIR: images/node-builder
       - IMAGE_NAME: app-builder
         DEPLOY_DIR: images/app-builder
+      - IMAGE_NAME: app-cypress
+        DEPLOY_DIR: images/app-cypress
   rules:
     - !reference [.limit_scheduled_pipelines, rules]

flake.nix

@@ -15,8 +15,12 @@
             buildToolsVersions = [ "${buildToolsVersion}" ];
             platformVersions = [ "32" ];
           };
-          cypress = prev.cypress.overrideAttrs(prev: {
-            version = "12.17.1";
+          cypress = prev.cypress.overrideAttrs(cyPrev: rec {
+            version = "13.2.0";
+            src = prev.fetchzip {
+              url = "https://cdn.cypress.io/desktop/${version}/linux-x64/cypress.zip";
+              hash = "sha256-9o0nprGcJhudS1LNm+T7Vf0Dwd1RBauYKI+w1FBQ3ZM=";
+            };
           });
         })
       ];

frontend/app/.eslintrc.json

@@ -8,7 +8,7 @@
       "parserOptions": {
         "ecmaVersion": 2020,
         "sourceType": "module",
-        "project": ["tsconfig.json", "tsconfig.spec.json", "e2e/tsconfig.e2e.json"],
+        "project": ["tsconfig.json", "tsconfig.spec.json", "cypress/tsconfig.json"],
         "createDefaultProgram": true
       },
       "extends": [

frontend/app/.gitlab-ci.yml

@@ -1,9 +1,12 @@
 e2e:
-  image: cypress/browsers:latest # https://hub.docker.com/r/cypress/browsers/tags/
+  image: registry.gitlab.com/openstapps/openstapps/app-cypress:node-18
   stage: test
   script:
     - pnpm --filter=@openstapps/app install
     - pnpm --filter=@openstapps/app exec cypress install
+    - cd node_modules/.pnpm/re2*/node_modules/re2
+    - npm run install
+    - cd $CI_PROJECT_DIR
     - pnpm test:integration:app
   artifacts:
     when: on_failure

frontend/app/PITFALLS.md

@@ -42,3 +42,23 @@ The command `ionic cordova run ios` runs into the error `/platforms/ios/build/em
 
 - Either use the command: `ionic cordova emulate ios -- --buildFlag="-UseModernBuildSystem=0"`
 - Or open the iOS project in Xcode and change build system in workspace settings to `Lagacy Build System`. Then the normal run command works also.
+
+## Cypress
+
+#### Problem
+
+The browser doesn't open or the tests don't connect to a browser
+
+#### Cause
+
+Cypress was installed to a read-only location, see
+[this issue](https://github.com/cypress-io/cypress/issues/18893).
+This can be the case if you use NixOS.
+
+#### Solution
+
+Make sure the cypress folder is writable before each launch
+
+```shell
+chmod -R +rw ~/.config/Cypress
+```

frontend/app/angular.json

@@ -182,6 +182,7 @@
           "builder": "@cypress/schematic:cypress",
           "options": {
             "devServerTarget": "app:serve",
+            "liveReload": false,
             "watch": true,
             "headless": false
           },

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

@@ -18,14 +18,18 @@
 
 describe('dashboard', async function () {
   describe('schedule section', function () {
-    it('should lead to the schedule', function () {
+    it('should lead to the week overview', function () {
       cy.visit('/overview');
-      cy.get('.schedule').contains('a', 'Stundenplan').click();
-      cy.url().should('include', '/schedule/recurring');
+      cy.get('.schedule')
+        .contains('a', /Wochen.*übersicht/)
+        .click();
+      cy.url().should('include', '/schedule/week-overview');
+    });
 
+    it('should lead to the calendar', function () {
       cy.visit('/overview');
       cy.get('.schedule').contains('a', 'Kein Eintrag gefunden').click();
-      cy.url().should('include', '/schedule/recurring');
+      cy.url().should('include', '/schedule/calendar');
     });
 
     // TODO: Reenable and stabilize tests

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/opening-hours.spec.ts

@@ -0,0 +1,141 @@
+describe('opening hours', () => {
+  beforeEach(function () {
+    cy.intercept('POST', 'https://mobile.server.uni-frankfurt.de/search', {
+      fixture: 'search/types/canteen/canteen-search-result.json',
+    }).as('search');
+  });
+
+  it('should specify relative closing time', () => {
+    cy.clock(new Date(2023, 9, 16, 15, 29), ['Date']);
+    cy.visit('/canteen');
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geöffnet')
+      .should('contain', 'Schließt heute um 22:00');
+  });
+
+  it('should specify relative opening time', () => {
+    cy.clock(new Date(2023, 9, 16, 6, 29), ['Date']);
+    cy.visit('/canteen');
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geschlossen')
+      .should('contain', 'Öffnet heute um 08:30');
+  });
+
+  it('should specify soon opening time', () => {
+    cy.clock(new Date(2023, 9, 16, 8, 0), ['Date']);
+    cy.visit('/canteen');
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geschlossen')
+      .should('contain', 'Öffnet in 30 Minuten');
+  });
+
+  it('should specify soon closing time', () => {
+    cy.clock(new Date(2023, 9, 16, 21, 30), ['Date']);
+    cy.visit('/canteen');
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geöffnet')
+      .should('contain', 'Schließt in 30 Minuten');
+  });
+
+  it('should update the soon closing time every minute', () => {
+    cy.clock(new Date(2023, 9, 16, 21, 30));
+    cy.visit('/canteen');
+    cy.tick(500);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geöffnet')
+      .should('contain', 'Schließt in 30 Minuten');
+
+    cy.tick(60_000);
+    cy.tick(50);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geöffnet')
+      .should('contain', 'Schließt in 29 Minuten');
+  });
+
+  it('should update the status when it changes', () => {
+    cy.clock(new Date(2023, 9, 16, 21, 59));
+    cy.visit('/canteen');
+    cy.tick(500);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geöffnet')
+      .should('contain', 'Schließt in 1 Minute');
+
+    cy.tick(60_000);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geschlossen')
+      .should('contain', 'Öffnet morgen um 08:30');
+  });
+
+  // This one takes long to execute!
+  it('should update as expected', () => {
+    cy.clock(new Date(2023, 9, 16, 20, 59));
+    cy.visit('/canteen');
+    cy.tick(500);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geöffnet')
+      .should('contain', 'Schließt heute um 22:00');
+
+    cy.tick(60_000);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geöffnet')
+      .should('contain', 'Schließt in 60 Minuten');
+
+    cy.tick(30 * 60_000);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geöffnet')
+      .should('contain', 'Schließt in 30 Minuten');
+
+    cy.tick(30 * 60_000);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geschlossen')
+      .should('contain', 'Öffnet morgen um 08:30');
+
+    cy.tick(9.5 * 60 * 60_000);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geschlossen')
+      .should('contain', 'Öffnet in 60 Minuten');
+
+    cy.tick(30 * 60_000);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geschlossen')
+      .should('contain', 'Öffnet in 30 Minuten');
+
+    cy.tick(30 * 60_000);
+
+    cy.get('stapps-opening-hours')
+      .first()
+      .should('contain', 'Geöffnet')
+      .should('contain', 'Schließt heute um 22:00');
+
+    // Long tick warps will cause network requests to time out
+    cy.get('@consoleError').invoke('resetHistory');
+  });
+});

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/cypress/support/index.ts

@@ -31,36 +31,24 @@
 // When a command from ./commands is ready to use, import with `import './commands'` syntax
 // import './commands';
 
-beforeEach(async function () {
-  let databases: string[];
-  if (window.indexedDB.databases) {
-    databases = (await window.indexedDB.databases()).map(it => it.name);
-    console.log('Trying to clear all databases');
-  } else {
-    console.log("Browser doesn't support database enumeration, deleting just ionic storage");
-    databases = ['_ionicstorage'];
-  }
-  for (const database of databases) {
-    if (database) {
-      console.log(`Deleting database ${database}`);
-      await new Promise(resolve => (window.indexedDB.deleteDatabase(database).onsuccess = resolve));
-      console.log(`Deleted database ${database}`);
-    }
-  }
+beforeEach(function () {
+  cy.wrap(
+    new Promise(resolve => {
+      window.indexedDB.deleteDatabase('_ionicstorage').onsuccess = resolve;
+    }),
+  );
 });
 
 Cypress.on('window:before:load', window => {
-  // Fake that user is using its browser in german language
+  // Fake that user is using its browser in German
   Object.defineProperty(window.navigator, 'language', {value: 'de-DE'});
   Object.defineProperty(window.navigator, 'languages', [{value: 'de-DE'}]);
 
-  // Fail tests on console error
-  cy.stub(window.console, 'error').callsFake(message => {
-    // log out to the terminal
-    cy.now('task', 'error', message);
-    // log to Command Log and fail the test
-    throw new Error(message);
-  });
+  cy.spy(window.console, 'error').as('consoleError');
+});
+
+afterEach(function () {
+  cy.get('@consoleError').should('not.have.been.called');
 });
 
 Cypress.on('uncaught:exception', error => {

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",
@@ -63,6 +63,7 @@
     "@awesome-cordova-plugins/core": "5.45.0",
     "@capacitor/app": "4.1.1",
     "@capacitor/browser": "4.1.0",
+    "@capacitor/clipboard": "4.1.0",
     "@capacitor/core": "4.6.1",
     "@capacitor/device": "4.1.0",
     "@capacitor/dialog": "4.1.0",
@@ -87,8 +88,11 @@
     "@openstapps/collection-utils": "workspace:*",
     "@openstapps/core": "workspace:*",
     "@transistorsoft/capacitor-background-fetch": "1.0.2",
+    "@types/dom-view-transitions": "1.0.1",
     "capacitor-secure-storage-plugin": "0.8.1",
     "cordova-plugin-calendar": "5.1.6",
+    "date-fns": "2.30.0",
+    "duration-fns": "3.0.2",
     "deepmerge": "4.3.1",
     "form-data": "4.0.0",
     "geojson": "0.5.0",
@@ -97,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",
@@ -146,7 +149,7 @@
     "@typescript-eslint/eslint-plugin": "5.60.1",
     "@typescript-eslint/parser": "5.60.1",
     "cordova-res": "0.15.4",
-    "cypress": "12.17.1",
+    "cypress": "13.2.0",
     "eslint": "8.43.0",
     "eslint-plugin-jsdoc": "46.4.2",
     "eslint-plugin-prettier": "4.2.1",

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/app.module.ts

@@ -21,11 +21,8 @@ import {RouteReuseStrategy} from '@angular/router';
 import {IonicModule, IonicRouteStrategy, Platform} from '@ionic/angular';
 import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core';
 import {TranslateHttpLoader} from '@ngx-translate/http-loader';
-import moment from 'moment';
-import 'moment/min/locales';
 import {LoggerModule, NGXLogger, NgxLoggerLevel} from 'ngx-logger';
 import SwiperCore, {FreeMode, Navigation} from 'swiper';
-
 import {environment} from '../environments/environment';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
@@ -58,12 +55,15 @@ 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 {SCSettingValue} from '@openstapps/core';
+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 {getDateFnsLocale} from './translation/dfns-locale';
+import {setDefaultOptions} from 'date-fns';
+import {DateFnsConfigurationService, DateFnsModule} from 'ngx-date-fns';
 
 registerLocaleData(localeDe);
 
@@ -71,12 +71,6 @@ SwiperCore.use([FreeMode, Navigation]);
 
 /**
  * Initializes data needed on startup
- * @param storageProvider provider of the saved data (using framework's storage)
- * @param logger TODO
- * @param settingsProvider provider of settings (e.g. language that has been set)
- * @param configProvider TODO
- * @param translateService TODO
- * @param _routingStackService Just for init and to track the stack from the get go
  */
 export function initializerFactory(
   storageProvider: StorageProvider,
@@ -87,6 +81,7 @@ export function initializerFactory(
   _routingStackService: RoutingStackService,
   defaultAuthService: DefaultAuthService,
   paiaAuthService: PAIAAuthService,
+  dateFnsConfigurationService: DateFnsConfigurationService,
 ) {
   return async () => {
     initLogger(logger);
@@ -106,7 +101,10 @@ export function initializerFactory(
       // this language will be used as a fallback when a translation isn't found in the current language
       translateService.setDefaultLang('en');
       translateService.use(languageCode);
-      moment.locale(languageCode);
+      const dateFnsLocale = await getDateFnsLocale(languageCode as SCLanguageCode, translateService);
+      setDefaultOptions({locale: dateFnsLocale});
+      dateFnsConfigurationService.setLocale(dateFnsLocale);
+
       await defaultAuthService.init();
       await paiaAuthService.init();
     } catch (error) {
@@ -142,6 +140,7 @@ export function createTranslateLoader(http: HttpClient) {
     ConfigModule,
     DashboardModule,
     DataModule,
+    DateFnsModule.forRoot(),
     HebisModule,
     IonicModule.forRoot(),
     IonIconModule,
@@ -198,6 +197,7 @@ export function createTranslateLoader(http: HttpClient) {
         RoutingStackService,
         DefaultAuthService,
         PAIAAuthService,
+        DateFnsConfigurationService,
       ],
       useFactory: initializerFactory,
     },

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

@@ -17,7 +17,7 @@ import {Component, DestroyRef, inject, Input, OnInit, ViewChild} from '@angular/
 import {ActivatedRoute} from '@angular/router';
 import {AssessmentsProvider} from '../assessments.provider';
 import {DataDetailComponent, ExternalDataLoadEvent} from '../../data/detail/data-detail.component';
-import {NavController, ViewWillEnter} from '@ionic/angular';
+import {NavController} from '@ionic/angular';
 import {DataRoutingService} from '../../data/data-routing.service';
 import {SCAssessment} from '@openstapps/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
@@ -27,7 +27,7 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
   templateUrl: 'assessments-detail.html',
   styleUrls: ['assessments-detail.scss'],
 })
-export class AssessmentsDetailComponent implements ViewWillEnter, OnInit {
+export class AssessmentsDetailComponent implements OnInit {
   destroy$ = inject(DestroyRef);
 
   constructor(
@@ -67,8 +67,4 @@ export class AssessmentsDetailComponent implements ViewWillEnter, OnInit {
         event.resolve(this.item);
       });
   }
-
-  async ionViewWillEnter() {
-    await this.detailComponent.ionViewWillEnter();
-  }
 }

frontend/app/src/app/modules/assessments/list/assessments-simple-data-list.component.ts

@@ -61,6 +61,7 @@ export class AssessmentsSimpleDataListComponent implements OnInit {
           queryParams: {
             token: this.activatedRoute.snapshot.queryParamMap.get('token'),
           },
+          state: {item: thing},
         });
       });
   }

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

@@ -71,6 +71,7 @@ export class AssessmentsPageComponent implements OnInit, AfterViewInit {
           queryParams: {
             token: this.activatedRoute.snapshot.queryParamMap.get('token'),
           },
+          state: {item: thing},
         });
       });
 

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

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

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

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

@@ -16,17 +16,18 @@
 import {Calendar} from '@awesome-cordova-plugins/calendar/ngx';
 import {Injectable} from '@angular/core';
 import {ICalEvent} from './ical/ical';
-import moment, {duration, Moment, unitOfTime} from 'moment';
 import {Dialog} from '@capacitor/dialog';
 import {CalendarInfo} from './calendar-info';
 import {Subject} from 'rxjs';
 import {ConfigProvider} from '../config/config.provider';
+import {add, differenceInDays, parseISO, startOfToday} from 'date-fns';
+import {parse as parseISODuration} from 'duration-fns';
 
-const RECURRENCE_PATTERNS: Partial<Record<unitOfTime.Diff, string | undefined>> = {
-  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()
@@ -85,7 +86,7 @@ export class CalendarService {
         iCalEvent.geo,
         iCalEvent.description,
         new Date(start),
-        moment(start).add(duration(iCalEvent.duration)).toDate(),
+        add(parseISO(start), parseISODuration(iCalEvent.duration!)),
         {
           id: `${iCalEvent.uuid}-${start}`,
           url: iCalEvent.url,
@@ -107,8 +108,8 @@ export class CalendarService {
    * Emit the calendar index corresponding to the input date.
    * @param date Moment - date the calendar should go to
    */
-  emitGoToDate(date: Moment) {
-    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({
@@ -65,7 +65,7 @@ export class CatalogComponent implements OnInit {
       .itemSelectListener()
       .pipe(takeUntilDestroyed())
       .subscribe(item => {
-        void this.router.navigate(['data-detail', item.uid]);
+        void this.router.navigate(['data-detail', item.uid], {state: {item}});
       });
   }
 
@@ -98,7 +98,7 @@ export class CatalogComponent implements OnInit {
   }
 
   async fetchSemesters(): Promise<void> {
-    const today = moment().startOf('day').toISOString();
+    const today = formatISO(startOfToday());
     const semesters = await this.catalogProvider.getRelevantSemesters();
     const currentSemester = semesters.find(
       semester => semester.startDate <= today && semester.endDate > today,

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

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

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

@@ -19,20 +19,21 @@
   </ion-toolbar>
 </ion-header>
 <div #schedule class="schedule">
-  <a [routerLink]="['/schedule/recurring']">
-    <ion-icon size="40" weight="300" name="grid_view"></ion-icon>
-    <ion-label>{{ 'schedule.recurring' | translate }}</ion-label>
+  <a [routerLink]="['/schedule/week-overview']">
+    <ion-icon size="36" weight="300" name="calendar_month"></ion-icon>
+    <ion-label [innerHTML]="'schedule.recurring' | translate"></ion-label>
   </a>
   <!-- Avoid structural directives here, they might interfere with the collapse animation -->
   <a
-    [routerLink]="nextEvent?.event ? ['/data-detail', nextEvent!.event.uid] : ['/schedule/recurring']"
+    [routerLink]="nextEvent ? ['/data-detail', nextEvent!.uid] : ['/schedule/calendar']"
+    [state]="{item: nextEvent}"
     class="schedule-item-button"
   >
     <ion-label>{{ 'dashboard.schedule.title' | translate }}</ion-label>
     <ion-label>
       {{
-        nextEvent?.event
-          ? (nextEvent!.dates | nextDateInList | amDateFormat : 'll, HH:mm')
+        nextEvent
+          ? (nextEvent!.dates.sort().at(-1) | dfnsParseIso | dfnsFormatRelativePure : (now | async))
           : ('dashboard.schedule.noEvent' | translate)
       }}
     </ion-label>

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

@@ -117,6 +117,7 @@ ion-content {
     ion-label {
       font-size: var(--font-size-xxs);
       font-weight: var(--font-weight-semi-bold);
+      word-break: break-word;
     }
 
     &:hover ::ng-deep stapps-icon {

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,
@@ -76,7 +82,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
       .itemSelectListener()
       .pipe(takeUntilDestroyed())
       .subscribe(item => {
-        void this.router.navigate(['data-detail', item.uid]);
+        void this.router.navigate(['data-detail', item.uid], {state: {item}});
       });
   }
 
@@ -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.html

@@ -18,7 +18,6 @@
     <stapps-data-list-item
       *ngFor="let dish of dishes"
       [hideThumbnail]="true"
-      [favoriteButton]="false"
       [item]="dish"
       appearance="square"
     ></stapps-data-list-item>

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/action-chip-list.component.ts

@@ -42,6 +42,7 @@ export class ActionChipListComponent {
       event:
         item.type === SCThingType.AcademicEvent ||
         (item.type === SCThingType.DateSeries && (item as SCDateSeries).dates.length > 0),
+      navigate: ('inPlace' in item && item.inPlace && 'geo' in item.inPlace) || 'geo' in item,
     };
   }
 

frontend/app/src/app/modules/data/chips/action-chip-list.html

@@ -14,5 +14,6 @@
   -->
 
 <stapps-locate-action-chip *ngIf="applicable.locate" [item]="item"></stapps-locate-action-chip>
+<stapps-navigate-action-chip *ngIf="applicable.navigate" [item]="$any(item)"></stapps-navigate-action-chip>
 <!-- Add Event Chip needs to load data and should be the last -->
 <stapps-add-event-action-chip *ngIf="applicable.event" [item]="item"></stapps-add-event-action-chip>

frontend/app/src/app/modules/data/chips/data/navigate-action-chip.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2021 StApps
+ * Copyright (C) 2023 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.
@@ -13,19 +13,23 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component, Input} from '@angular/core';
-import {SCPlace} from '@openstapps/core';
-import {ModalController} from '@ionic/angular';
+import {SCPlaceWithoutReferences, SCThings} from '@openstapps/core';
 
 @Component({
-  selector: 'app-map-single-modal',
-  templateUrl: './map-single.html',
-  styleUrls: ['./map-single.scss'],
+  selector: 'stapps-navigate-action-chip',
+  templateUrl: 'navigate-action-chip.html',
+  styleUrls: ['navigate-action-chip.scss'],
 })
-export class MapSingleModalComponent {
-  /**
-   * The item to be shown
-   */
-  @Input() item: SCPlace;
+export class NavigateActionChipComponent {
+  place: SCPlaceWithoutReferences;
 
-  constructor(readonly modalController: ModalController) {}
+  @Input({required: true}) set item(value: SCThings) {
+    if ('geo' in value) {
+      this.place = value;
+    } else if ('inPlace' in value && value.inPlace && 'geo' in value.inPlace) {
+      this.place = value.inPlace;
+    } else {
+      console.error('Invalid place', value);
+    }
+  }
 }

frontend/app/src/app/modules/data/chips/data/navigate-action-chip.html

@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2023 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,15 +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/>.
   -->
-
-<ion-header translucent>
-  <ion-toolbar color="primary" mode="ios">
-    <ion-title>{{ 'map.modals.single.TITLE' | translate }}</ion-title>
-    <ion-buttons slot="end">
-      <ion-button (click)="modalController.dismiss()">{{ 'app.ui.CLOSE' | translate }}</ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-<ion-content>
-  <stapps-data-detail-content [item]="$any(item)" [openAsModal]="true"></stapps-data-detail-content>
-</ion-content>
+<ion-chip [color]="'primary'" [outline]="true" [geoNavigation]="place">
+  <ion-icon name="directions"></ion-icon>
+  <ion-label>{{'map.directions.TITLE' | translate}}</ion-label>
+</ion-chip>

frontend/app/src/app/modules/data/chips/data/navigate-action-chip.scss

@@ -1,5 +1,5 @@
-/*
- * Copyright (C) 2021 StApps
+/*!
+ * Copyright (C) 2023 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,3 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
-import {Pipe, PipeTransform} from '@angular/core';
-import {Moment} from 'moment';
-
-@Pipe({
-  name: 'dateFromIndex',
-  pure: true,
-})
-export class DateFromIndexPipe implements PipeTransform {
-  transform(index: number, baseline: Moment): Moment {
-    return baseline.clone().add(index, 'days');
-  }
-}

frontend/app/src/app/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';
@@ -102,6 +101,17 @@ import {StappsRatingComponent} from './elements/rating.component';
 import {DishCharacteristicsComponent} from './types/dish/dish-characteristics.component';
 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
@@ -110,6 +120,7 @@ import {CertificationsInDetailComponent} from './elements/certifications-in-deta
   declarations: [
     ActionChipListComponent,
     AddEventActionChipComponent,
+    NavigateActionChipComponent,
     EditEventSelectionComponent,
     AddressDetailComponent,
     CatalogDetailContentComponent,
@@ -184,16 +195,19 @@ import {CertificationsInDetailComponent} from './elements/certifications-in-deta
     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();
   });
 
@@ -111,8 +111,8 @@ describe('DataDetailComponent', () => {
     expect(DataDetailComponent.prototype.getItem).toHaveBeenCalledWith(sampleThing.uid, false);
   });
 
-  it('should get a data item when the view is entered', () => {
-    comp.ionViewWillEnter();
+  it('should get a data item when initialized', () => {
+    comp.ngOnInit();
     expect(DataDetailComponent.prototype.getItem).toHaveBeenCalledWith(sampleThing.uid, false);
   });
 });

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

@@ -12,9 +12,9 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, ContentChild, EventEmitter, Input, Output, TemplateRef} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
-import {ModalController, ViewWillEnter} from '@ionic/angular';
+import {Component, ContentChild, EventEmitter, Input, OnInit, Output, TemplateRef} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {ModalController} from '@ionic/angular';
 import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
 import {SCLanguageCode, SCSaveableThing, SCThings, SCUuid} from '@openstapps/core';
 import {DataProvider, DataScope} from '../data.provider';
@@ -37,7 +37,7 @@ export interface ExternalDataLoadEvent {
   styleUrls: ['data-detail.scss'],
   templateUrl: 'data-detail.html',
 })
-export class DataDetailComponent implements ViewWillEnter {
+export class DataDetailComponent implements OnInit {
   /**
    * The associated item
    *
@@ -84,21 +84,15 @@ export class DataDetailComponent implements ViewWillEnter {
     return (thing as SCSaveableThing).data !== undefined;
   }
 
-  /**
-   *
-   * @param route the route the page was accessed from
-   * @param dataProvider the data provider
-   * @param favoritesService the favorites provider
-   * @param modalController the modal controller
-   * @param translateService he translate provider
-   */
   constructor(
     protected readonly route: ActivatedRoute,
+    router: Router,
     private readonly dataProvider: DataProvider,
     private readonly favoritesService: FavoritesService,
     readonly modalController: ModalController,
     translateService: TranslateService,
   ) {
+    this.inputItem = router.getCurrentNavigation()?.extras.state?.item;
     this.language = translateService.currentLang as SCLanguageCode;
     translateService.onLangChange.subscribe((event: LangChangeEvent) => {
       this.language = event.lang as SCLanguageCode;
@@ -138,10 +132,7 @@ export class DataDetailComponent implements ViewWillEnter {
     }
   }
 
-  /**
-   * Initialize
-   */
-  async ionViewWillEnter() {
+  async ngOnInit() {
     const uid = this.route.snapshot.paramMap.get('uid') || '';
     await this.getItem(uid ?? '', false);
     // fallback to the saved item (from favorites)

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

@@ -37,32 +37,22 @@ export class DataPathComponent implements OnInit {
   @Input() maxItems = 2;
 
   @Input() set item(item: SCThings) {
-    // eslint-disable-next-line unicorn/prefer-ternary
     if (item.type === SCThingType.Catalog && item.superCatalogs) {
-      this.path = new Promise(resolve =>
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        resolve([...item.superCatalogs!, item]),
-      );
+      this.path = Promise.resolve([...item.superCatalogs!, item]);
     } else if (item.type === SCThingType.Assessment && item.superAssessments) {
-      this.path = new Promise(resolve =>
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        resolve([...item.superAssessments!, item]),
-      );
+      this.path = Promise.resolve([...item.superAssessments!, item]);
     } else if (
       item.type === SCThingType.AcademicEvent &&
       item.catalogs &&
       (item.catalogs.length === 1 || this.routeStack.lastDataDetail)
     ) {
-      const catalogWithoutReferences = item.catalogs[0];
-      const catalogPromise = (
-        item.catalogs.length === 1
-          ? this.dataProvider.get(catalogWithoutReferences.uid, DataScope.Remote)
-          : this.routeStack.lastDataDetail
-      ) as Promise<SCCatalog>;
-
       this.path = new Promise(async resolve => {
-        const catalog = await catalogPromise;
-        const superCatalogs = catalog.superCatalogs;
+        const catalogWithoutReferences = item.catalogs![0];
+        const catalog =
+          item.catalogs!.length === 1
+            ? await this.dataProvider.get(catalogWithoutReferences.uid, DataScope.Remote)
+            : this.routeStack.lastDataDetail;
+        const superCatalogs = (catalog as SCCatalog).superCatalogs;
 
         resolve(
           superCatalogs

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

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

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

@@ -20,16 +20,16 @@
   >
   <ion-card-content>
     <p>
-      {{ 'data.types.origin.detail.CREATED' | translate | titlecase }}: {{ origin.created | amDateFormat :
-      '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/elements/rating.component.ts

@@ -1,3 +1,4 @@
+/* eslint-disable unicorn/no-useless-undefined */
 /*
  * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
@@ -12,60 +13,51 @@
  * 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, ElementRef, HostListener, Input} from '@angular/core';
-import {SCDish, SCRatingRequest, SCUuid} from '@openstapps/core';
+import {ChangeDetectionStrategy, Component, ElementRef, HostListener, Input} from '@angular/core';
+import {SCDish, SCRatingRequest} from '@openstapps/core';
 import {RatingProvider} from '../rating.provider';
 import {ratingAnimation} from './rating.animation';
+import {BehaviorSubject, filter, merge, mergeMap, of, ReplaySubject, withLatestFrom} from 'rxjs';
+import {catchError, map} from 'rxjs/operators';
 
 @Component({
   selector: 'stapps-rating',
   templateUrl: 'rating.html',
   styleUrls: ['rating.scss'],
   animations: [ratingAnimation],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StappsRatingComponent {
-  rate = false;
+  performRating = new BehaviorSubject(false);
 
-  rated = false;
+  userRating = new BehaviorSubject<number | undefined>(undefined);
 
-  canBeRated = false;
+  dish = new ReplaySubject<SCDish>(1);
 
-  uid: SCUuid;
+  wasAlreadyRated = merge(
+    this.dish.pipe(mergeMap(({uid}) => this.ratingProvider.hasRated(uid))),
+    this.userRating.pipe(
+      filter(it => it !== undefined),
+      withLatestFrom(this.dish),
+      mergeMap(([rating, {uid}]) => this.ratingProvider.rate(uid, rating as SCRatingRequest['rating'])),
+      map(() => true),
+      catchError(() => of(false)),
+    ),
+  );
 
-  rating?: number;
+  canBeRated = this.dish.pipe(mergeMap(dish => this.ratingProvider.canRate(dish)));
 
-  @Input() set item(value: SCDish) {
-    this.uid = value.uid;
-
-    Promise.all([this.ratingProvider.canRate(value), this.ratingProvider.hasRated(this.uid)] as const).then(
-      ([canRate, hasRated]) => {
-        this.canBeRated = canRate;
-        this.rated = hasRated;
-      },
-    );
+  @Input({required: true}) set item(value: SCDish) {
+    this.dish.next(value);
   }
 
   constructor(readonly elementRef: ElementRef, readonly ratingProvider: RatingProvider) {}
 
-  async submitRating(rating: number) {
-    this.rating = rating;
-    try {
-      await this.ratingProvider.rate(this.uid, rating as SCRatingRequest['rating']);
-      this.rated = true;
-    } catch {
-      this.rating = undefined;
-      // allow change detection to catch up first
-      setTimeout(() => {
-        this.rate = false;
-      });
-    }
-  }
-
   @HostListener('document:mousedown', ['$event'])
   clickOutside(event: MouseEvent) {
-    if (this.rating) return;
+    if (this.userRating.value) return;
     if (!this.elementRef.nativeElement.contains(event.target)) {
-      this.rate = false;
+      this.performRating.next(false);
     }
   }
 }

frontend/app/src/app/modules/data/elements/rating.html

@@ -14,19 +14,23 @@
   -->
 
 <ion-button
-  *ngIf="canBeRated"
+  *ngIf="canBeRated | async"
   fill="clear"
-  (click)="$event.stopPropagation(); rate = true"
-  [disabled]="rated"
+  (click)="$event.stopPropagation(); performRating.next(true)"
+  [disabled]="wasAlreadyRated | async"
 >
   <ion-icon slot="icon-only" color="medium" name="thumbs_up_down"></ion-icon>
 </ion-button>
 
-<div class="rating-stars" *ngIf="rate && !rated" [@rating]="rating ? 'rated' : 'abandoned'">
+<div
+  class="rating-stars"
+  *ngIf="(performRating | async) && (wasAlreadyRated | async) !== true"
+  [@rating]="(userRating | async) === undefined ? 'abandoned' : 'rated'"
+>
   <ion-icon
-    [class.rated-value]="rating === i"
+    [class.rated-value]="(userRating | async) === i"
     *ngFor="let i of [5, 4, 3, 2, 1]"
-    (click)="$event.stopPropagation(); submitRating(i)"
+    (click)="$event.stopPropagation(); userRating.next(i)"
     slot="icon-only"
     size="32"
     color="medium"

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

@@ -38,6 +38,8 @@ export class DataListItemComponent {
 
   @Input() listItemEndInteraction = true;
 
+  @Input() listItemChipInteraction = true;
+
   @Input() lines = 'inset';
 
   @Input() forceHeight = false;

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

@@ -43,7 +43,7 @@
     <div>
       <ng-template [dataListItemHost]="item"></ng-template>
       <stapps-action-chip-list
-        *ngIf="appearance !== 'square'"
+        *ngIf="listItemChipInteraction && appearance !== 'square'"
         slot="end"
         [item]="item"
       ></stapps-action-chip-list>

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

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

@@ -61,7 +61,7 @@ export class SimpleDataListComponent implements OnInit {
       .itemSelectListener()
       .pipe(takeUntilDestroyed(this.destroy$))
       .subscribe(item => {
-        void this.router.navigate(['/data-detail', item.uid]);
+        void this.router.navigate(['/data-detail', item.uid], {state: {item}});
       });
   }
 }

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

@@ -13,16 +13,16 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<ng-container *ngIf="items as items; else loading">
+<ng-container *ngIf="items | async as items; else loading">
   <ion-list>
     <ng-container *ngIf="!listHeader; else header"></ng-container>
-    <ng-container *ngFor="let item of items | async">
+    <ng-container *ngFor="let item of items">
       <ng-container
         *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: item}"
       ></ng-container>
     </ng-container>
   </ion-list>
-  <ion-label class="empty-list-message" *ngIf="emptyListMessage && (items | async)?.length === 0"
+  <ion-label class="empty-list-message" *ngIf="emptyListMessage && items.length === 0"
     >{{ emptyListMessage }}</ion-label
   >
 </ng-container>

frontend/app/src/app/modules/data/types/catalog/catalog-detail-content.component.ts

@@ -13,94 +13,93 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component, Input, OnInit} from '@angular/core';
-import {SCCatalog, SCSearchBooleanFilter, SCDucetSort} from '@openstapps/core';
-import {SearchPageComponent} from '../../list/search-page.component';
+import {SCCatalog, SCThings} from '@openstapps/core';
+import {DataProvider} from '../../data.provider';
 
 @Component({
   selector: 'stapps-catalog-detail-content',
   templateUrl: 'catalog-detail-content.html',
   styleUrls: ['catalog-detail-content.scss'],
 })
-export class CatalogDetailContentComponent extends SearchPageComponent implements OnInit {
+export class CatalogDetailContentComponent implements OnInit {
   /**
    * SCCatalog to display
    */
   @Input() item: SCCatalog;
 
-  ngOnInit() {
-    super.ngOnInit();
-  }
+  items: Promise<SCThings[]>;
 
-  initialize() {
-    this.showDefaultData = true;
-    this.pageSize = 100;
+  constructor(private dataProvider: DataProvider) {}
 
-    const nameSort: SCDucetSort = {
-      arguments: {field: 'name'},
-      order: 'asc',
-      type: 'ducet',
-    };
-
-    const typeSort: SCDucetSort = {
-      arguments: {field: 'type'},
-      order: 'desc',
-      type: 'ducet',
-    };
-
-    this.sortQuery = [typeSort, nameSort];
-
-    const subCatalogFilter: SCSearchBooleanFilter = {
-      arguments: {
-        operation: 'and',
-        filters: [
+  async ngOnInit() {
+    this.items = this.dataProvider
+      .search({
+        size: 100,
+        sort: [
           {
-            type: 'value',
-            arguments: {
-              field: 'type',
-              value: 'catalog',
-            },
+            arguments: {field: 'type'},
+            order: 'desc',
+            type: 'ducet',
           },
           {
-            type: 'value',
-            arguments: {
-              field: 'superCatalog.uid',
-              value: this.item.uid,
-            },
+            arguments: {field: 'name'},
+            order: 'asc',
+            type: 'ducet',
           },
         ],
-      },
-      type: 'boolean',
-    };
-
-    const subEventsFilter: SCSearchBooleanFilter = {
-      arguments: {
-        operation: 'and',
-        filters: [
-          {
-            type: 'value',
-            arguments: {
-              field: 'type',
-              value: 'academic event',
-            },
+        filter: {
+          arguments: {
+            filters: [
+              {
+                arguments: {
+                  operation: 'and',
+                  filters: [
+                    {
+                      type: 'value',
+                      arguments: {
+                        field: 'type',
+                        value: 'catalog',
+                      },
+                    },
+                    {
+                      type: 'value',
+                      arguments: {
+                        field: 'superCatalog.uid',
+                        value: this.item.uid,
+                      },
+                    },
+                  ],
+                },
+                type: 'boolean',
+              },
+              {
+                arguments: {
+                  operation: 'and',
+                  filters: [
+                    {
+                      type: 'value',
+                      arguments: {
+                        field: 'type',
+                        value: 'academic event',
+                      },
+                    },
+                    {
+                      type: 'value',
+                      arguments: {
+                        field: 'catalogs.uid',
+                        value: this.item.uid,
+                      },
+                    },
+                  ],
+                },
+                type: 'boolean',
+              },
+            ],
+            operation: 'or',
           },
-          {
-            type: 'value',
-            arguments: {
-              field: 'catalogs.uid',
-              value: this.item.uid,
-            },
-          },
-        ],
-      },
-      type: 'boolean',
-    };
-
-    this.forcedFilter = {
-      arguments: {
-        filters: [subCatalogFilter, subEventsFilter],
-        operation: 'or',
-      },
-      type: 'boolean',
-    };
+          type: 'boolean',
+        },
+      })
+      .then(({data}) => data);
   }
 }

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

@@ -12,19 +12,49 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {SCDateSeries} from '@openstapps/core';
+import {ScheduleProvider, toDateSeriesRelevantData} from '../../../calendar/schedule.provider';
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+import {DataRoutingService} from '../../data-routing.service';
+import {Router} from '@angular/router';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
-/**
- * TODO
- */
 @Component({
   selector: 'stapps-date-series-detail-content',
   templateUrl: 'date-series-detail-content.html',
+  styleUrls: ['date-series-detail-content.scss'],
 })
-export class DateSeriesDetailContentComponent {
-  /**
-   * TODO
-   */
+export class DateSeriesDetailContentComponent implements OnInit {
   @Input() item: SCDateSeries;
+
+  isInCalendar: Observable<boolean>;
+
+  constructor(
+    readonly scheduleProvider: ScheduleProvider,
+    dataRoutingService: DataRoutingService,
+    router: Router,
+  ) {
+    dataRoutingService
+      .itemSelectListener()
+      .pipe(takeUntilDestroyed())
+      .subscribe(item => {
+        void router.navigate(['/data-detail', item.uid], {state: {item}});
+      });
+  }
+
+  ngOnInit() {
+    this.isInCalendar = this.scheduleProvider.uuids$.pipe(map(it => it.includes(this.item.uid)));
+  }
+
+  addToCalendar() {
+    const current = this.scheduleProvider.partialEvents$.value;
+    this.scheduleProvider.partialEvents$.next([...current, toDateSeriesRelevantData(this.item)]);
+  }
+
+  removeFromCalendar() {
+    const filtered = this.scheduleProvider.partialEvents$.value.filter(it => it.uid !== this.item.uid);
+    this.scheduleProvider.partialEvents$.next(filtered);
+  }
 }

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

@@ -12,41 +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/>.
   -->
-<ion-card>
-  <ion-card-header> {{ 'event' | propertyNameTranslate : item | titlecase }} </ion-card-header>
-  <ion-card-content>
-    <a [routerLink]="['/data-detail', item.event.uid]">{{ 'name' | thingTranslate : item.event }}</a>
-  </ion-card-content>
-</ion-card>
-<ion-card *ngIf="item.inPlace">
-  <ion-card-header> {{ 'inPlace' | propertyNameTranslate : item | titlecase }} </ion-card-header>
-  <ion-card-content>
-    <ion-icon name="pin_drop"> </ion-icon>
-    <a [routerLink]="['/data-detail', item.inPlace.uid]">{{ 'name' | thingTranslate : item.inPlace }}</a>
-    <stapps-address-detail
-      *ngIf="item.inPlace.address"
-      [address]="item.inPlace.address"
-    ></stapps-address-detail>
-  </ion-card-content>
-</ion-card>
+<ng-container *ngIf="isInCalendar | async; else add">
+  <ion-chip outline="true" color="success" (click)="removeFromCalendar()">
+    <ion-icon name="event_available" fill="true"></ion-icon>
+    <ion-label>{{'chips.addEvent.addedToEvents' | translate}}</ion-label>
+  </ion-chip>
+</ng-container>
+<ng-template #add>
+  <ion-chip outline="true" color="primary" (click)="addToCalendar()">
+    <ion-icon name="calendar_today"></ion-icon>
+    <ion-label>{{'chips.addEvent.addEvent' | translate}}</ion-label>
+  </ion-chip>
+</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>
@@ -56,3 +51,16 @@
   [content]="item.performers"
 ></stapps-simple-card>
 <stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
+<ion-card>
+  <ion-card-header> {{ 'event' | propertyNameTranslate : item | titlecase }} </ion-card-header>
+  <ion-card-content>
+    <stapps-data-list-item [item]="$any(item.event)"></stapps-data-list-item>
+  </ion-card-content>
+</ion-card>
+<ion-card *ngIf="item.inPlace">
+  <ion-card-header> {{ 'inPlace' | propertyNameTranslate : item | titlecase }} </ion-card-header>
+  <ion-card-content>
+    <stapps-data-list-item [item]="$any(item.inPlace)"></stapps-data-list-item>
+  </ion-card-content>
+</ion-card>
+<stapps-map-widget *ngIf="item.inPlace?.geo" [place]="item.inPlace"></stapps-map-widget>

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

@@ -0,0 +1,6 @@
+ion-chip {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+}

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

@@ -17,16 +17,17 @@
   <ion-row>
     <ion-col>
       <div class="ion-text-wrap">
-        <ion-label class="title">{{ 'name' | thingTranslate : item }}</ion-label>
+        <ion-label class="title">{{ 'event.name' | thingTranslate : item }}</ion-label>
         <p>
           <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-detail-content.component.ts

@@ -59,7 +59,7 @@ export class PlaceDetailContentComponent implements OnInit {
       .itemSelectListener()
       .pipe(takeUntilDestroyed())
       .subscribe(item => {
-        void router.navigate(['/data-detail', item.uid]);
+        void router.navigate(['/data-detail', item.uid], {state: {item}});
       });
   }
 

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

@@ -38,9 +38,5 @@
   </ion-card>
 </ng-container>
 <ng-container *ngIf="hasValidLocation">
-  <stapps-map-widget
-    class="map-widget expand-when-space"
-    [place]="item"
-    expandable="true"
-  ></stapps-map-widget>
+  <stapps-map-widget [place]="item" expandable="true"></stapps-map-widget>
 </ng-container>

frontend/app/src/app/modules/data/types/place/place-detail-content.scss

@@ -12,10 +12,3 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
-.map-widget {
-  position: relative;
-  width: auto;
-  height: 300px;
-  min-height: 300px;
-}

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

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

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

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

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

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

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

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component, OnInit} from '@angular/core';
-import {AlertController, AnimationController} from '@ionic/angular';
+import {AlertController} from '@ionic/angular';
 import {ActivatedRoute, Router} from '@angular/router';
 import {NGXLogger} from 'ngx-logger';
 import {debounceTime, distinctUntilChanged, startWith, take} from 'rxjs/operators';
@@ -25,7 +25,6 @@ import {ContextMenuService} from '../menu/context/context-menu.service';
 import {SearchPageComponent} from '../data/list/search-page.component';
 import {DataProvider} from '../data/data.provider';
 import {SettingsProvider} from '../settings/settings.provider';
-import {PositionService} from '../map/position.service';
 import {ConfigProvider} from '../config/config.provider';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
@@ -51,10 +50,8 @@ export class FavoritesPageComponent extends SearchPageComponent implements OnIni
     dataRoutingService: DataRoutingService,
     router: Router,
     route: ActivatedRoute,
-    positionService: PositionService,
     private favoritesService: FavoritesService,
     configProvider: ConfigProvider,
-    animationController: AnimationController,
   ) {
     super(
       alertController,
@@ -65,9 +62,7 @@ export class FavoritesPageComponent extends SearchPageComponent implements OnIni
       dataRoutingService,
       router,
       route,
-      positionService,
       configProvider,
-      animationController,
     );
   }
 
@@ -112,12 +107,15 @@ export class FavoritesPageComponent extends SearchPageComponent implements OnIni
       .subscribe(item => {
         if (this.itemRouting) {
           if ([SCThingType.Book, SCThingType.Periodical, SCThingType.Article].includes(item.type)) {
-            void this.router.navigate([
-              'hebis-detail',
-              (item.origin && 'originalId' in item.origin && item.origin['originalId']) || '',
-            ]);
+            void this.router.navigate(
+              [
+                'hebis-detail',
+                (item.origin && 'originalId' in item.origin && item.origin['originalId']) || '',
+              ],
+              {state: {item}},
+            );
           } else {
-            void this.router.navigate(['data-detail', item.uid]);
+            void this.router.navigate(['data-detail', item.uid], {state: {item}});
           }
         }
       });

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-availability.component.ts

@@ -12,16 +12,11 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, OnInit} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
-import {TranslateService} from '@ngx-translate/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {SCUuid} from '@openstapps/core';
-import {FavoritesService} from '../../favorites/favorites.service';
-import {DataProvider} from '../../data/data.provider';
 import {DataDetailComponent} from '../../data/detail/data-detail.component';
 import {DaiaDataProvider} from '../daia-data.provider';
 import {DaiaHolding} from '../protocol/response';
-import {ModalController} from '@ionic/angular';
 import {groupByStable} from '@openstapps/collection-utils';
 
 /**
@@ -37,28 +32,10 @@ export class DaiaAvailabilityComponent extends DataDetailComponent implements On
 
   holdingsByDepartments?: Map<DaiaHolding['department']['id'], DaiaHolding[]>;
 
-  /**
-   *
-   * @param route the route the page was accessed from
-   * @param dataProvider the data provider
-   * @param favoritesService the favorites provider
-   * @param modalController the modal controller
-   * @param translateService he translate provider
-   * @param daiaDataProvider DaiaDataProvider
-   */
-  constructor(
-    route: ActivatedRoute,
-    dataProvider: DataProvider,
-    favoritesService: FavoritesService,
-    modalController: ModalController,
-    translateService: TranslateService,
-    private daiaDataProvider: DaiaDataProvider,
-  ) {
-    super(route, dataProvider, favoritesService, modalController, translateService);
-  }
+  private daiaDataProvider = inject(DaiaDataProvider);
 
   /**
-   * Initialize
+   * @override
    */
   async ngOnInit() {
     const uid = this.route.snapshot.paramMap.get('uid');

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

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

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

@@ -96,7 +96,7 @@ describe('HebisDetailComponent', () => {
     spyOn(HebisDetailComponent.prototype, 'getItem').and.callThrough();
     fixture = TestBed.createComponent(HebisDetailComponent);
     comp = fixture.componentInstance;
-    translateService.use('foo');
+    translateService.use('en');
     fixture.detectChanges();
   });
 
@@ -107,8 +107,8 @@ describe('HebisDetailComponent', () => {
     expect(HebisDetailComponent.prototype.getItem).toHaveBeenCalledWith(sampleThing.uid, false);
   });
 
-  it('should get a data item when the view is entered', () => {
-    comp.ionViewWillEnter();
+  it('should get a data item when initialized', () => {
+    comp.ngOnInit();
     expect(HebisDetailComponent.prototype.getItem).toHaveBeenCalledWith(sampleThing.uid, false);
   });
 });

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

@@ -12,16 +12,11 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
-import {TranslateService} from '@ngx-translate/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {SCUuid} from '@openstapps/core';
 import {HebisDataProvider} from '../hebis-data.provider';
-import {FavoritesService} from '../../favorites/favorites.service';
-import {DataProvider} from '../../data/data.provider';
 import {DataDetailComponent} from '../../data/detail/data-detail.component';
 import {DaiaHolding} from '../protocol/response';
-import {ModalController} from '@ionic/angular';
 
 /**
  * A Component to display an SCThing detailed
@@ -31,33 +26,15 @@ import {ModalController} from '@ionic/angular';
   styleUrls: ['hebis-detail.scss'],
   templateUrl: 'hebis-detail.html',
 })
-export class HebisDetailComponent extends DataDetailComponent {
+export class HebisDetailComponent extends DataDetailComponent implements OnInit {
   holdings: DaiaHolding[];
 
-  /**
-   *
-   * @param route the route the page was accessed from
-   * @param dataProvider the data provider
-   * @param favoritesService the favorites provider
-   * @param modalController the modal controller
-   * @param translateService he translate provider
-   * @param hebisDataProvider HebisDataProvider
-   */
-  constructor(
-    route: ActivatedRoute,
-    dataProvider: DataProvider,
-    favoritesService: FavoritesService,
-    modalController: ModalController,
-    translateService: TranslateService,
-    private hebisDataProvider: HebisDataProvider,
-  ) {
-    super(route, dataProvider, favoritesService, modalController, translateService);
-  }
+  private hebisDataProvider = inject(HebisDataProvider);
 
   /**
-   * Initialize
+   * @override
    */
-  async ionViewWillEnter() {
+  async ngOnInit() {
     const uid = this.route.snapshot.paramMap.get('uid') || '';
     await this.getItem(uid ?? '', false);
   }
@@ -68,9 +45,11 @@ export class HebisDetailComponent extends DataDetailComponent {
    * @param _forceReload Ignore any cached data
    */
   async getItem(uid: SCUuid, _forceReload: boolean) {
-    this.hebisDataProvider.hebisSearch({query: uid, page: 0}).then(result => {
-      // eslint-disable-next-line unicorn/no-null
-      this.item = (result.data && result.data[0]) || null;
-    });
+    this.item = await (this.inputItem ??
+      this.hebisDataProvider.hebisSearch({query: uid, page: 0}).then(
+        result =>
+          // eslint-disable-next-line unicorn/no-null
+          (result.data && result.data[0]) || null,
+      ));
   }
 }

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],
 })