feat: webkit in cypress pipelines

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/orange-knives-happen.md

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

.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

.gitlab-ci.yml

@@ -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

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

@@ -4,6 +4,8 @@ e2e:
   script:
     - pnpm --filter=@openstapps/app install
     - pnpm --filter=@openstapps/app exec cypress install
+    - npx playwright install-deps webkit
+    - npx playwright install
     - cd node_modules/.pnpm/re2*/node_modules/re2
     - npm run install
     - cd $CI_PROJECT_DIR
@@ -21,5 +23,6 @@ e2e:
     matrix:
       - BROWSER: chrome
       - BROWSER: firefox
+      - BROWSER: webkit
   rules:
     - !reference [.limit_pipelines, rules]

frontend/app/PITFALLS.md

@@ -49,10 +49,16 @@ The command `ionic cordova run ios` runs into the error `/platforms/ios/build/em
 
 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
 
-Delete the Cypress config file
+Make sure the cypress folder is writable before each launch
 
 ```shell
-rm -rf ~/.config/Cypress
+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.config.ts

@@ -28,6 +28,7 @@ export default defineConfig({
     fixturesFolder: 'cypress/fixtures',
     defaultCommandTimeout: 20_000,
     specPattern: 'cypress/integration/**/*.spec.ts',
+    experimentalWebKitSupport: true,
     /*setupNodeEvents(on, config) {
       on('task', {
         log(message) {

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

@@ -176,7 +176,7 @@ describe('dashboard', async function () {
       cy.visit('/overview');
 
       cy.get('ion-searchbar').click({scrollBehavior: 'center'});
-      cy.url().should('eq', Cypress.config().baseUrl + '/search');
+      cy.url().should('eq', `${Cypress.config().baseUrl?.replace(/\/$/, '')}/search`);
       cy.get('ion-searchbar').should('not.have.value');
       cy.get('ion-searchbar input.searchbar-input').should('have.focus');
 

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/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

@@ -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",
+    "ngx-date-fns": "10.0.1",
     "deepmerge": "4.3.1",
     "form-data": "4.0.0",
     "geojson": "0.5.0",
@@ -126,7 +130,7 @@
     "@capacitor/cli": "4.6.1",
     "@capacitor/ios": "4.6.1",
     "@compodoc/compodoc": "1.1.19",
-    "@cypress/schematic": "1.7.0",
+    "@cypress/schematic": "2.5.1",
     "@ionic/angular-toolkit": "10.0.0",
     "@ionic/cli": "7.1.1",
     "@openstapps/prettier-config": "workspace:*",
@@ -146,7 +150,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",
@@ -166,6 +170,7 @@
     "karma-junit-reporter": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
     "license-checker": "25.0.1",
+    "playwright-webkit": "1.38.0",
     "stylelint": "15.10.1",
     "stylelint-config-clean-order": "5.0.1",
     "stylelint-config-prettier-scss": "1.0.0",

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

@@ -58,12 +58,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} from 'ngx-date-fns';
 
 registerLocaleData(localeDe);
 
@@ -71,12 +74,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 +84,7 @@ export function initializerFactory(
   _routingStackService: RoutingStackService,
   defaultAuthService: DefaultAuthService,
   paiaAuthService: PAIAAuthService,
+  dateFnsConfigurationService: DateFnsConfigurationService,
 ) {
   return async () => {
     initLogger(logger);
@@ -107,6 +105,10 @@ export function initializerFactory(
       translateService.setDefaultLang('en');
       translateService.use(languageCode);
       moment.locale(languageCode);
+      const dateFnsLocale = await getDateFnsLocale(languageCode as SCLanguageCode);
+      setDefaultOptions({locale: dateFnsLocale});
+      dateFnsConfigurationService.setLocale(dateFnsLocale);
+
       await defaultAuthService.init();
       await paiaAuthService.init();
     } catch (error) {
@@ -198,6 +200,7 @@ export function createTranslateLoader(http: HttpClient) {
         RoutingStackService,
         DefaultAuthService,
         PAIAAuthService,
+        DateFnsConfigurationService,
       ],
       useFactory: initializerFactory,
     },

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

@@ -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}});
       });
   }
 

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

@@ -26,6 +26,7 @@
   <!-- Avoid structural directives here, they might interfere with the collapse animation -->
   <a
     [routerLink]="nextEvent ? ['/data-detail', nextEvent!.uid] : ['/schedule/calendar']"
+    [state]="{item: nextEvent}"
     class="schedule-item-button"
   >
     <ion-label>{{ 'dashboard.schedule.title' | translate }}</ion-label>

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

@@ -76,7 +76,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}});
       });
   }
 

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/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

@@ -0,0 +1,35 @@
+/*
+ * 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.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import {Component, Input} from '@angular/core';
+import {SCPlaceWithoutReferences, SCThings} from '@openstapps/core';
+
+@Component({
+  selector: 'stapps-navigate-action-chip',
+  templateUrl: 'navigate-action-chip.html',
+  styleUrls: ['navigate-action-chip.scss'],
+})
+export class NavigateActionChipComponent {
+  place: SCPlaceWithoutReferences;
+
+  @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,20 +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 {Component, Input} from '@angular/core';
-import {SCPlace} from '@openstapps/core';
-import {ModalController} from '@ionic/angular';
-
-@Component({
-  selector: 'app-map-single-modal',
-  templateUrl: './map-single.html',
-  styleUrls: ['./map-single.scss'],
-})
-export class MapSingleModalComponent {
-  /**
-   * The item to be shown
-   */
-  @Input() item: SCPlace;
-
-  constructor(readonly modalController: ModalController) {}
-}

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

@@ -102,6 +102,8 @@ 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';
 
 /**
  * Module for handling data
@@ -110,6 +112,7 @@ import {CertificationsInDetailComponent} from './elements/certifications-in-deta
   declarations: [
     ActionChipListComponent,
     AddEventActionChipComponent,
+    NavigateActionChipComponent,
     EditEventSelectionComponent,
     AddressDetailComponent,
     CatalogDetailContentComponent,
@@ -194,6 +197,7 @@ import {CertificationsInDetailComponent} from './elements/certifications-in-deta
     TranslateModule.forChild(),
     ThingTranslateModule.forChild(),
     UtilModule,
+    GeoNavigationDirective,
   ],
   providers: [
     CoordinatedSearchProvider,

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

@@ -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/list/food-data-list.component.ts

@@ -17,7 +17,7 @@ import {MapPosition} from '../../map/position.service';
 import {SearchPageComponent} from './search-page.component';
 import {Geolocation} from '@capacitor/geolocation';
 import {BehaviorSubject} from 'rxjs';
-import {pauseWhen} from '../../../util/pause-when';
+import {pauseWhen} from '../../../util/rxjs/pause-when';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 /**

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

@@ -342,7 +342,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

@@ -40,7 +40,7 @@ export class DateSeriesDetailContentComponent 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/date-series/date-series-detail-content.html

@@ -63,3 +63,4 @@
     <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/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/special/mensa/place-mensa-detail.component.ts

@@ -75,7 +75,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/favorites/favorites-page.component.ts

@@ -112,12 +112,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.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/hebis-detail/hebis-detail.component.spec.ts

@@ -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/list/hebis-search-page.component.ts

@@ -13,19 +13,12 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component, Input, OnInit} from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
-import {AlertController, AnimationController} from '@ionic/angular';
-import {NGXLogger} from 'ngx-logger';
 import {combineLatest} from 'rxjs';
 import {debounceTime, distinctUntilChanged, startWith} from 'rxjs/operators';
-import {ContextMenuService} from '../../menu/context/context-menu.service';
-import {SettingsProvider} from '../../settings/settings.provider';
-import {DataRoutingService} from '../../data/data-routing.service';
 import {SearchPageComponent} from '../../data/list/search-page.component';
 import {HebisDataProvider} from '../hebis-data.provider';
-import {PositionService} from '../../map/position.service';
-import {ConfigProvider} from '../../config/config.provider';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {DataProvider} from '../../data/data.provider';
 
 /**
  * HebisSearchPageComponent queries things and shows list of things as search results and filter as context menu
@@ -34,6 +27,7 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
   selector: 'stapps-hebissearch-page',
   templateUrl: 'hebis-search-page.html',
   styleUrls: ['../../data/list/search-page.scss'],
+  providers: [{provide: DataProvider, useClass: HebisDataProvider}],
 })
 export class HebisSearchPageComponent extends SearchPageComponent implements OnInit {
   /**
@@ -46,47 +40,6 @@ export class HebisSearchPageComponent extends SearchPageComponent implements OnI
    */
   page = 0;
 
-  /**
-   * Injects the providers and creates subscriptions
-   * @param alertController AlertController
-   * @param dataProvider HebisProvider
-   * @param contextMenuService ContextMenuService
-   * @param settingsProvider SettingsProvider
-   * @param logger An angular logger
-   * @param dataRoutingService DataRoutingService
-   * @param router Router
-   * @param route Active Route
-   * @param positionService PositionService
-   * @param configProvider ConfigProvider
-   */
-  constructor(
-    protected readonly alertController: AlertController,
-    protected dataProvider: HebisDataProvider,
-    protected readonly contextMenuService: ContextMenuService,
-    protected readonly settingsProvider: SettingsProvider,
-    protected readonly logger: NGXLogger,
-    protected dataRoutingService: DataRoutingService,
-    protected router: Router,
-    route: ActivatedRoute,
-    protected positionService: PositionService,
-    configProvider: ConfigProvider,
-    animationController: AnimationController,
-  ) {
-    super(
-      alertController,
-      dataProvider,
-      contextMenuService,
-      settingsProvider,
-      logger,
-      dataRoutingService,
-      router,
-      route,
-      positionService,
-      configProvider,
-      animationController,
-    );
-  }
-
   /**
    * Fetches items with set query configuration
    * @param append If true fetched data gets appended to existing, override otherwise (default false)
@@ -103,7 +56,7 @@ export class HebisSearchPageComponent extends SearchPageComponent implements OnI
       searchOptions.query = this.queryText;
     }
 
-    return this.dataProvider.hebisSearch(searchOptions).then(
+    return (this.dataProvider as HebisDataProvider).hebisSearch(searchOptions).then(
       async result => {
         /*this.singleTypeResponse =
           result.facets.find(facet => facet.field === 'type')?.buckets
@@ -176,10 +129,10 @@ export class HebisSearchPageComponent extends SearchPageComponent implements OnI
       .pipe(takeUntilDestroyed(this.destroy$))
       .subscribe(async item => {
         if (this.itemRouting) {
-          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}},
+          );
         }
       });
   }

frontend/app/src/app/modules/map/geo-navigation.directive.ts

@@ -0,0 +1,92 @@
+import {Directive, HostListener, Input} from '@angular/core';
+import {SCPlaceWithoutReferences, SCThings, SCThingWithoutReferences} from '@openstapps/core';
+import {Device} from '@capacitor/device';
+import {ActionSheetController, ActionSheetOptions, ToastController} from '@ionic/angular';
+import {TranslateService} from '@ngx-translate/core';
+import {ThingTranslateService} from '../../translation/thing-translate.service';
+import {Clipboard} from '@capacitor/clipboard';
+import {PositionService} from './position.service';
+
+/**
+ * A button that provides navigation options to the user via an action sheet
+ * @example
+ * <ion-button shape="round" [geoNavigation]="place">
+ *  <ion-icon name="directions" slot="start"></ion-icon>
+ *  <ion-label>{{'map.directions.TITLE' | translate}}</ion-label>
+ * </ion-button>
+ */
+@Directive({
+  selector: '[geoNavigation]',
+  standalone: true,
+})
+export class GeoNavigationDirective {
+  @Input({required: true}) geoNavigation: SCThingWithoutReferences &
+    Pick<SCPlaceWithoutReferences, 'geo' | 'address'>;
+
+  constructor(
+    private actionSheetController: ActionSheetController,
+    private translateService: TranslateService,
+    private thingTranslate: ThingTranslateService,
+    private toastController: ToastController,
+    private positionService: PositionService,
+  ) {}
+
+  @HostListener('click', ['$event'])
+  async presentActionSheet(event: Event) {
+    event.stopPropagation();
+    const {operatingSystem} = await Device.getInfo();
+    const [lon, lat] = this.geoNavigation.geo.point.coordinates;
+
+    const supportedMapProviders =
+      operatingSystem === 'mac' || operatingSystem === 'ios'
+        ? ['OSM_ROUTING', 'APPLE_MAPS', 'GOOGLE_MAPS']
+        : ['OSM_ROUTING', 'GOOGLE_MAPS'];
+    const address = this.geoNavigation.address
+      ? this.translateService.instant(
+          'map.directions.ADDRESS',
+          this.thingTranslate.get(this.geoNavigation as SCThings, 'address'),
+        )
+      : `${lat}, ${lon}`;
+
+    const options: ActionSheetOptions = {
+      header: this.translateService.instant('map.directions.TITLE_LONG', {
+        name: this.thingTranslate.get(this.geoNavigation as SCThings, 'name'),
+      }),
+      subHeader: address,
+      buttons: [
+        {
+          text: this.translateService.instant('map.directions.COPY_ADDRESS'),
+          role: 'selected',
+          handler: async () => {
+            await Clipboard.write({string: address});
+            this.toastController
+              .create({
+                message: this.translateService.instant('map.directions.ADDRESS_COPIED'),
+                duration: 500,
+              })
+              .then(toast => toast.present());
+          },
+        },
+        ...supportedMapProviders.map(provider => ({
+          text: this.translateService.instant(`map.directions.${provider}.TITLE`),
+          handler: () => {
+            const url: string = this.translateService.instant(`map.directions.${provider}.URL`, {
+              lat,
+              lon,
+              posLat: this.positionService.position?.latitude ?? 0,
+              posLon: this.positionService.position?.longitude ?? 0,
+            });
+            window.open(url.replace(/&?\w+=0,0/, ''), '_blank', 'noreferrer');
+          },
+        })),
+        {
+          text: this.translateService.instant('abort'),
+          role: 'cancel',
+        },
+      ],
+    };
+
+    const actionSheet = await this.actionSheetController.create(options);
+    await actionSheet.present();
+  }
+}

frontend/app/src/app/modules/map/item/map-item.component.html

@@ -1,36 +0,0 @@
-<!--
-  ~ Copyright (C) 2022 StApps
-  ~ This program is free software: you can redistribute it and/or modify it
-  ~ under the terms of the GNU General Public License as published by the Free
-  ~ Software Foundation, version 3.
-  ~
-  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-  ~ more details.
-  ~
-  ~ You should have received a copy of the GNU General Public License along with
-  ~ this program. If not, see <https://www.gnu.org/licenses/>.
-  -->
-
-<ion-card class="compact">
-  <ion-card-header>
-    <stapps-data-list-item [item]="$any(item)" id="show-more"></stapps-data-list-item>
-    <stapps-skeleton-list-item *ngIf="!item"></stapps-skeleton-list-item>
-  </ion-card-header>
-  <ion-card-content>
-    <ion-note>
-      <span *ngIf="item.address as address">
-        <span *ngIf="$any(item).inPlace">{{ $any(item).inPlace.name }},</span>
-        {{ address.streetAddress }}, {{ address.addressLocality }}
-      </span>
-    </ion-note>
-    <ion-button
-      size="small"
-      class="show-more-button"
-      fill="clear"
-      [routerLink]="['/data-detail', item.uid]"
-      >{{ 'map.page.buttons.MORE' | translate }}</ion-button
-    >
-  </ion-card-content>
-</ion-card>

frontend/app/src/app/modules/map/item/map-item.component.scss

@@ -1,72 +0,0 @@
-/*!
- * Copyright (C) 2022 StApps
- * This program is free software: you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along with
- * this program. If not, see <https://www.gnu.org/licenses/>.
- */
-
-@import '../../../../theme/util/mixins';
-
-:host {
-  display: block;
-  max-width: 100%;
-
-  ion-card {
-    overflow: visible;
-    padding: 0;
-
-    ion-card-header {
-      padding: 0;
-      border-bottom: var(--border-width-default) solid var(--border-color-default);
-
-      stapps-data-list-item {
-        --ion-margin: 0;
-
-        &::ng-deep ion-item {
-          --padding-start: 0;
-          --padding-end: 0;
-
-          ion-label {
-            white-space: break-spaces;
-          }
-        }
-      }
-
-      .close {
-        --padding-top: 0;
-        --padding-bottom: 0;
-        --padding-start: 0;
-        --padding-end: 0;
-
-        position: absolute;
-        z-index: 1;
-        top: -15px;
-        right: -15px;
-
-        ion-icon {
-          width: 30px;
-          height: 30px;
-        }
-      }
-    }
-
-    ion-card-content {
-      display: flex;
-      flex-direction: row;
-      padding: var(--spacing-md);
-
-      .show-more-button {
-        margin-left: auto;
-        text-transform: uppercase;
-      }
-    }
-  }
-}

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

@@ -1,41 +0,0 @@
-/*
- * Copyright (C) 2021 StApps
- * This program is free software: you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along with
- * this program. If not, see <https://www.gnu.org/licenses/>.
- */
-import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {SCPlace} from '@openstapps/core';
-import {IonRouterOutlet} from '@ionic/angular';
-
-@Component({
-  selector: 'stapps-map-item',
-  templateUrl: './map-item.component.html',
-  styleUrls: ['./map-item.component.scss'],
-})
-export class MapItemComponent {
-  /**
-   * An item to show
-   */
-  @Input() item: SCPlace;
-
-  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-  @Output() onClose = new EventEmitter<void>();
-
-  constructor(readonly routerOutlet: IonRouterOutlet) {}
-
-  /**
-   * Action when edit is clicked
-   */
-  onCloseClick() {
-    this.onClose.emit();
-  }
-}

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

@@ -29,12 +29,11 @@ import {StAppsWebHttpClient} from '../data/stapps-web-http-client.provider';
 import {MenuModule} from '../menu/menu.module';
 import {MapProvider} from './map.provider';
 import {MapPageComponent} from './page/map-page.component';
-import {MapListModalComponent} from './page/modals/map-list-modal.component';
-import {MapSingleModalComponent} from './page/modals/map-single-modal.component';
-import {MapItemComponent} from './item/map-item.component';
+import {MapListModalComponent} from './page/map-list-modal.component';
 import {NgModule} from '@angular/core';
 import {UtilModule} from '../../util/util.module';
 import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
+import {GeoNavigationDirective} from './geo-navigation.directive';
 
 /**
  * Initializes the default area to show in advance (before components are initialized)
@@ -56,7 +55,7 @@ const mapRoutes: Routes = [
  * Module containing map related stuff
  */
 @NgModule({
-  declarations: [MapPageComponent, MapListModalComponent, MapSingleModalComponent, MapItemComponent],
+  declarations: [MapPageComponent, MapListModalComponent],
   exports: [],
   imports: [
     CommonModule,
@@ -71,6 +70,8 @@ const mapRoutes: Routes = [
     FormsModule,
     ThingTranslateModule,
     UtilModule,
+    GeoNavigationDirective,
+    GeoNavigationDirective,
   ],
   providers: [Geolocation, MapProvider, DataProvider, DataFacetsProvider, StAppsWebHttpClient],
 })

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

@@ -14,7 +14,7 @@
  */
 import {Component, Input, OnInit} from '@angular/core';
 import {SCSearchBooleanFilter, SCPlace, SCSearchFilter} from '@openstapps/core';
-import {MapProvider} from '../../map.provider';
+import {MapProvider} from '../map.provider';
 import {ModalController} from '@ionic/angular';
 import {LatLngBounds} from 'leaflet';
 
@@ -23,8 +23,8 @@ import {LatLngBounds} from 'leaflet';
  */
 @Component({
   selector: 'map-list-modal',
-  templateUrl: 'map-list.html',
-  styleUrls: ['map-list.scss'],
+  templateUrl: 'map-list-modal.html',
+  styleUrls: ['map-list-modal.scss'],
 })
 export class MapListModalComponent implements OnInit {
   /**

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

@@ -27,8 +27,9 @@ import {MapProvider} from '../map.provider';
 import {MapPosition, PositionService} from '../position.service';
 import {Geolocation, PermissionStatus} from '@capacitor/geolocation';
 import {Capacitor} from '@capacitor/core';
-import {pauseWhen} from '../../../util/pause-when';
+import {pauseWhen} from '../../../util/rxjs/pause-when';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {startViewTransition} from '../../../util/view-transition';
 
 /**
  * The main page of the map
@@ -100,7 +101,17 @@ export class MapPageComponent implements OnInit {
   /**
    * Options of the leaflet map
    */
-  options: MapOptions;
+  options: MapOptions = {
+    center: geoJSON(this.mapProvider.defaultPolygon).getBounds().getCenter(),
+    layers: [
+      tileLayer('https://osm.server.uni-frankfurt.de/tiles/roads/x={x}&y={y}&z={z}', {
+        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+        maxZoom: this.MAX_ZOOM,
+      }),
+    ],
+    zoom: this.DEFAULT_ZOOM,
+    zoomControl: false,
+  };
 
   /**
    * Position of the user on the map
@@ -134,20 +145,7 @@ export class MapPageComponent implements OnInit {
     private dataRoutingService: DataRoutingService,
     private positionService: PositionService,
     readonly routerOutlet: IonRouterOutlet,
-  ) {
-    // initialize the options
-    this.options = {
-      center: geoJSON(this.mapProvider.defaultPolygon).getBounds().getCenter(),
-      layers: [
-        tileLayer('https://osm.server.uni-frankfurt.de/tiles/roads/x={x}&y={y}&z={z}', {
-          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
-          maxZoom: this.MAX_ZOOM,
-        }),
-      ],
-      zoom: this.DEFAULT_ZOOM,
-      zoomControl: false,
-    };
-  }
+  ) {}
 
   ngOnInit() {
     this.dataRoutingService
@@ -158,7 +156,7 @@ export class MapPageComponent implements OnInit {
         if (this.items.length > 1) {
           await Promise.all([this.modalController.dismiss(), this.showItem(item.uid)]);
         } else {
-          void this.router.navigate(['/data-detail', item.uid]);
+          void this.router.navigate(['/data-detail', item.uid], {state: {item}});
         }
       });
     this.positionService
@@ -305,6 +303,7 @@ export class MapPageComponent implements OnInit {
    */
   async onMapReady(map: Map) {
     this.map = map;
+    this.map.attributionControl.setPosition('topright');
     const interval = window.setInterval(() =>
       MapProvider.invalidateWhenRendered(map, this.mapContainer, interval),
     );
@@ -384,10 +383,12 @@ export class MapPageComponent implements OnInit {
    * Resets the map = fetch all the items based on the filters (and go to component's base location)
    */
   async resetView() {
-    this.location.go('/map');
-    await this.fetchAndUpdateItems(this.items.length > 0);
+    startViewTransition(async () => {
+      this.location.go('/map');
+      await this.fetchAndUpdateItems(this.items.length > 0);
 
-    this.ref.detectChanges();
+      this.ref.detectChanges();
+    });
   }
 
   /**
@@ -414,14 +415,16 @@ export class MapPageComponent implements OnInit {
    * @param uid Uuid of the place
    */
   async showItem(uid: SCUuid) {
-    const response = await this.mapProvider.searchPlace(uid);
-    this.items = response.data as SCPlace[];
-    this.distance = this.positionService.getDistance(this.items[0].geo.point);
-    this.addToMap(this.items, true);
-    this.ref.detectChanges();
-    const url = this.router.createUrlTree(['/map', uid]).toString();
-    this.location.go(url);
-    // center the selected place
-    this.focus(geoJSON(this.items[0].geo.point).getBounds().getCenter());
+    startViewTransition(async () => {
+      const response = await this.mapProvider.searchPlace(uid);
+      this.items = response.data as SCPlace[];
+      this.distance = this.positionService.getDistance(this.items[0].geo.point);
+      this.addToMap(this.items, true);
+      this.ref.detectChanges();
+      const url = this.router.createUrlTree(['/map', uid]).toString();
+      this.location.go(url);
+      // center the selected place
+      this.focus(geoJSON(this.items[0].geo.point).getBounds().getCenter());
+    });
   }
 }

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

@@ -43,7 +43,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content fullscreen id="map">
+<ion-content id="map">
   <div
     class="map-container"
     #mapContainer
@@ -57,7 +57,7 @@
     <div *ngIf="position" [leafletLayer]="positionMarker"></div>
   </div>
   <div class="floating-content">
-    <div class="map-buttons above">
+    <div class="map-buttons">
       <ion-button
         *ngIf="items.length > 1"
         color="light"
@@ -67,7 +67,13 @@
       >
         <ion-icon name="list"></ion-icon>&nbsp;&nbsp;{{ 'map.page.buttons.SHOW_LIST' | translate }}
       </ion-button>
-      <ion-button color="light" shape="round" size="small" (click)="onPositionClick()">
+      <ion-button
+        color="light"
+        shape="round"
+        size="small"
+        (click)="onPositionClick()"
+        class="location-button"
+      >
         <ion-icon *ngIf="position !== null; else noLocationIcon" name="my_location"></ion-icon>
         <ng-template #noLocationIcon>
           <ion-icon
@@ -80,30 +86,12 @@
         </ng-template>
       </ion-button>
     </div>
-    <stapps-map-item *ngIf="items.length === 1" [item]="items[0]" (onClose)="resetView()"></stapps-map-item>
-  </div>
-  <div class="map-buttons floating-buttons">
-    <ion-button
-      *ngIf="items.length > 1"
-      color="light"
-      shape="round"
-      size="small"
-      (click)="mapListModal.present()"
-    >
-      <ion-icon name="list"></ion-icon>&nbsp;&nbsp;{{ 'map.page.buttons.SHOW_LIST' | translate }}
-    </ion-button>
-    <ion-button color="light" shape="round" size="small" (click)="onPositionClick()">
-      <ion-icon *ngIf="position !== null; else noLocationIcon" name="my_location"></ion-icon>
-      <ng-template #noLocationIcon>
-        <ion-icon
-          *ngIf="locationStatus && locationStatus.location === 'denied'; else pendingLocationIcon"
-          name="location_disabled"
-        ></ion-icon>
-      </ng-template>
-      <ng-template #pendingLocationIcon>
-        <ion-icon name="location_searching"></ion-icon>
-      </ng-template>
-    </ion-button>
+    <ion-card class="map-item">
+      <stapps-data-list-item *ngIf="items.length === 1" [item]="$any(items[0])"></stapps-data-list-item>
+      <ion-button fill="clear" class="close" (click)="resetView()">
+        <ion-icon size="22" name="close" slot="icon-only"></ion-icon>
+      </ion-button>
+    </ion-card>
   </div>
 
   <ion-modal [canDismiss]="true" #mapListModal>

frontend/app/src/app/modules/map/page/map-page.scss

@@ -12,113 +12,87 @@
  * 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 '../../../../theme/util/mixins';
 
-ion-content {
-  // fixes the unexpected issue that the content is not fullscreen (behind the header)
-  position: absolute;
+$bottom-offset: 7px; // no idea what happened here
 
-  div.map-container {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-  }
-
-  & > div {
-    overflow: hidden;
-  }
+.map-container {
+  width: 100%;
+  height: 100%;
 }
 
 ion-toolbar:first-of-type {
   padding: 0 var(--spacing-md) var(--spacing-xs);
 }
 
-div.map-buttons {
+.floating-content {
+  position: fixed;
+  z-index: 1000;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  display: flex;
+  flex-flow: row-reverse wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.map-buttons {
+  display: flex;
+  justify-content: flex-end;
+
   ion-button {
     // important for iOS
     // TODO: find an option that is better suited for the iOS theme
     --box-shadow: var(--map-box-shadow);
 
     align-self: flex-end;
-    margin: 4px;
+    margin: var(--spacing-md);
+
+    &.location-button {
+      view-transition-name: location-button;
+    }
   }
 }
 
-::ng-deep {
-  .stapps-location {
-    ion-icon {
-      width: 100%;
-      height: 100%;
-      color: #fd435c;
-    }
-  }
+.map-item {
+  position: relative;
+  max-width: 550px;
+  margin: var(--spacing-md);
 
-  .stapps-device-location {
-    ion-icon {
-      width: 100%;
-      height: 100%;
-      color: #4387fd;
-    }
-  }
-
-  div.floating-content {
-    position: fixed;
-    z-index: 1000;
+  .close {
+    position: absolute;
+    top: 0;
     right: 0;
-    bottom: 0;
-    left: 0;
+  }
 
-    display: block;
-    justify-content: center;
+  ::ng-deep ion-item {
+    margin: 0;
+  }
+}
 
+@include ion-md-down {
+  .md {
+    ion-content {
+      --padding-bottom: $bottom-offset;
+    }
+
+    .floating-content {
+      bottom: $bottom-offset;
+    }
+  }
+
+  .map-buttons ion-button {
+    margin: var(--spacing-sm);
+  }
+
+  .map-item {
     width: 100%;
-    padding: 0 var(--spacing-md) 8vh;
+    max-width: unset;
+    margin: 0;
 
-    ion-card {
-      margin: 0;
-    }
-
-    div.map-buttons {
-      display: flex;
-      justify-content: flex-end;
-    }
-
-    stapps-map-item {
-      position: center;
-      justify-self: center;
-      width: 550px;
-      margin: var(--spacing-sm) auto;
-    }
-  }
-}
-
-div.floating-buttons {
-  position: absolute;
-  z-index: 1000;
-  right: 10px;
-  bottom: 15px;
-}
-
-div.map-buttons.above {
-  display: none;
-  min-width: 70%;
-}
-
-@media (width <= 667px) {
-  div.map-buttons.above {
-    display: flex;
-  }
-
-  div.floating-content {
-    justify-content: normal;
-    padding: 0 var(--spacing-md) var(--spacing-lg);
-
-    stapps-map-item {
-      display: grid;
-      width: 100%;
-    }
-  }
-
-  div.map-buttons.floating-buttons {
-    display: none;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
   }
 }

frontend/app/src/app/modules/map/page/modals/map-single.scss

@@ -1,4 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-}

frontend/app/src/app/modules/map/widget/map-widget.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, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
+import {Component, ElementRef, HostBinding, Input, OnInit, ViewChild} from '@angular/core';
 import {Router} from '@angular/router';
-import {SCPlace} from '@openstapps/core';
+import {SCPlaceWithoutReferences, SCThingWithoutReferences} from '@openstapps/core';
 import {geoJSON, Map, MapOptions, tileLayer} from 'leaflet';
 import {MapProvider} from '../map.provider';
 
@@ -27,6 +27,8 @@ import {MapProvider} from '../map.provider';
   templateUrl: './map-widget.html',
 })
 export class MapWidgetComponent implements OnInit {
+  @HostBinding('class.expand-when-space') expandWhenSpace = true;
+
   /**
    * A leaflet map showed
    */
@@ -45,7 +47,7 @@ export class MapWidgetComponent implements OnInit {
   /**
    * A place to show on the map
    */
-  @Input() place: SCPlace;
+  @Input() place: SCThingWithoutReferences & Pick<SCPlaceWithoutReferences, 'geo' | 'address'>;
 
   /**
    * Indicates if the expand button should be visible

frontend/app/src/app/modules/map/widget/map-widget.html

@@ -21,6 +21,10 @@
   [leafletOptions]="options"
 ></div>
 <div class="map-buttons" *ngIf="showExpandButton">
+  <ion-button color="primary" shape="round" size="small" [geoNavigation]="place">
+    <ion-icon name="directions" slot="start"></ion-icon>
+    {{'map.directions.TITLE' | translate}}
+  </ion-button>
   <ion-button color="primary" shape="round" size="small" [routerLink]="['/map', place.uid]">
     <ion-icon name="zoom_out_map"></ion-icon>
   </ion-button>

frontend/app/src/app/modules/map/widget/map-widget.scss

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

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

@@ -15,6 +15,7 @@
 
 <ion-card
   [routerLink]="['/data-detail', item.uid]"
+  [state]="{item}"
   class="card"
   [style.--background]="item.image ? 'url(' + item.image + ')' : undefined"
 >

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

@@ -12,13 +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 {Injectable, OnDestroy, Pipe, PipeTransform} from '@angular/core';
 import {LangChangeEvent, TranslateService} from '@ngx-translate/core';
 import moment from 'moment';
 import {Subscription} from 'rxjs';
 import {logger} from '../_helpers/ts-logger';
-import opening_hours from 'opening_hours';
 
 @Injectable()
 @Pipe({
@@ -110,141 +108,6 @@ export class StringSplitPipe implements PipeTransform {
     return this.value as never;
   }
 }
-
-@Injectable()
-@Pipe({
-  name: 'openingHours',
-  pure: true,
-})
-export class OpeningHoursPipe implements PipeTransform, OnDestroy {
-  locale: string;
-
-  onLangChange?: Subscription;
-
-  value: string[] = [];
-
-  constructor(private readonly translate: TranslateService) {
-    this.locale = translate.currentLang;
-  }
-
-  private _dispose(): void {
-    if (this.onLangChange?.closed === false) {
-      this.onLangChange?.unsubscribe();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this._dispose();
-  }
-
-  transform(aString: string | unknown): string[] {
-    this.updateValue(aString);
-    this._dispose();
-    if (this.onLangChange?.closed === true) {
-      this.onLangChange = this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
-        this.locale = event.lang;
-        this.updateValue(aString);
-      });
-    }
-
-    return this.value;
-  }
-
-  updateValue(aString: string | unknown) {
-    if (typeof aString !== 'string') {
-      logger.warn(`openingHours pipe unable to parse input: ${aString}`);
-
-      return;
-    }
-    let openingHours;
-
-    try {
-      openingHours = new opening_hours(aString, {
-        address: {
-          country_code: 'de',
-          state: 'Hessen',
-        },
-        lon: 8.667_97,
-        lat: 50.129_16,
-      });
-    } catch (error) {
-      logger.warn(error);
-      this.value = [];
-
-      return;
-    }
-
-    const isOpen: boolean = openingHours.getState();
-    const isUnknown: boolean = openingHours.getUnknown();
-
-    const nextChange = openingHours.getNextChange();
-    const nextChangeIsOpen: boolean = openingHours.getState(nextChange);
-    const nextChangeUnknown: boolean = openingHours.getUnknown(nextChange);
-    const nextChangeIsToday: boolean = moment().isSame(nextChange, 'day');
-
-    let stateKey = isOpen ? 'common.openingHours.state_open' : 'common.openingHours.state_closed';
-
-    stateKey = isUnknown ? 'common.openingHours.state_maybe' : stateKey;
-
-    this.value = [isOpen ? 'success' : 'danger', `${this.translate.instant(stateKey)}`];
-
-    if (isUnknown) {
-      const comment = openingHours.getComment();
-      this.value = ['light', `${this.translate.instant(stateKey)}`];
-      if (typeof comment === 'string') {
-        this.value.push(comment);
-      }
-      return;
-    }
-
-    if (nextChangeUnknown) {
-      return;
-    }
-
-    let nextChangeKey: string | undefined;
-
-    let formattedCalender = moment(nextChange).calendar();
-
-    if (moment(nextChange).isBefore(moment().add(1, 'hours'))) {
-      this.value[0] = 'warning';
-      nextChangeKey = nextChangeIsOpen
-        ? 'common.openingHours.opening_soon_warning'
-        : 'common.openingHours.closing_soon_warning';
-      this.value.push(
-        `${this.translate.instant(nextChangeKey, {
-          time: new Intl.DateTimeFormat(this.locale, {
-            timeStyle: 'short',
-          }).format(nextChange),
-        })}`,
-      );
-      return;
-    }
-
-    if (nextChangeIsToday) {
-      nextChangeKey = nextChangeIsOpen
-        ? 'common.openingHours.opening_today'
-        : 'common.openingHours.closing_today';
-      this.value.push(
-        `${this.translate.instant(nextChangeKey, {
-          time: new Intl.DateTimeFormat(this.locale, {
-            timeStyle: 'short',
-          }).format(nextChange),
-        })}`,
-      );
-      return;
-    }
-
-    nextChangeKey = nextChangeIsOpen ? 'common.openingHours.opening' : 'common.openingHours.closing';
-    formattedCalender = formattedCalender.slice(0, 1).toUpperCase() + formattedCalender.slice(1);
-    this.value.push(
-      `${this.translate.instant(nextChangeKey, {
-        relativeDateTime: formattedCalender,
-      })}`,
-    );
-    return;
-  }
-}
-
 @Injectable()
 @Pipe({
   name: 'durationLocalized',

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

@@ -0,0 +1,35 @@
+/*
+ * 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.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import {SCLanguageCode} from '@openstapps/core';
+import type {Locale} from 'date-fns';
+
+type LocalesMap = Record<SCLanguageCode, () => Promise<{default: Locale}>>;
+
+const LOCALES = {
+  en: () => import('date-fns/locale/en-GB'),
+  de: () => import('date-fns/locale/de'),
+} satisfies Partial<LocalesMap>;
+
+/**
+ * Get a Date Fns Locale
+ */
+export async function getDateFnsLocale(code: SCLanguageCode): Promise<Locale> {
+  if (code in LOCALES) {
+    return LOCALES[code as keyof typeof LOCALES]().then(it => it.default);
+  } else {
+    console.warn(`Unknown Locale "${code}" for Date Fns. Falling back to English.`);
+    return LOCALES.en().then(it => it.default);
+  }
+}

frontend/app/src/app/translation/i18n.spec.ts

@@ -17,23 +17,31 @@
 import english from '../../assets/i18n/en.json';
 import german from '../../assets/i18n/de.json';
 
-const exceptions = new Set([
-  'login',
-  'ok',
-  'protein',
-  'feedback',
-  'name',
-  'status',
-  'issn',
-  'ejournal',
-  'backup',
-  'export',
-  'dashboard',
-  'home',
-  'email',
-  'logins',
-  'https://www.swffm.de/essen-trinken/uebersicht/umweltscore',
-]);
+const exceptions = new Set(
+  [
+    'login',
+    'ok',
+    'protein',
+    'feedback',
+    'name',
+    'status',
+    'issn',
+    'ejournal',
+    'backup',
+    'export',
+    'dashboard',
+    'home',
+    'email',
+    'logins',
+    'google maps',
+    'apple maps',
+    'openstreetmaps routing',
+    'https://www.swffm.de/essen-trinken/uebersicht/umweltscore',
+    'https://www.google.com/maps/dir/?api=1&destination={{lat}},{{lon}}&origin={{posLat}},{{posLon}}',
+    'https://maps.apple.com/?daddr={{lat}},{{lon}}&saddr={{posLat}},{{posLon}}',
+    'https://www.openstreetmap.org/directions?from={{posLat}},{{posLon}}&to={{lat}},{{lon}}#map=15/{{lat}}/{{lon}}',
+  ].map(it => it.toLowerCase()),
+);
 
 const languages = [
   ['english', english],

frontend/app/src/app/translation/thing-translate.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 {ModuleWithProviders, NgModule, Provider} from '@angular/core';
 import {
   ArrayJoinPipe,
@@ -23,7 +22,6 @@ import {
   IsNumericPipe,
   MetersLocalizedPipe,
   NumberLocalizedPipe,
-  OpeningHoursPipe,
   SentenceCasePipe,
   StringSplitPipe,
   ToUnixPipe,
@@ -51,7 +49,6 @@ export interface ThingTranslateModuleConfig {
     ThingTranslatePipe,
     TranslateSimplePipe,
     DateLocalizedFormatPipe,
-    OpeningHoursPipe,
     SentenceCasePipe,
     ToUnixPipe,
     EntriesPipe,
@@ -69,7 +66,6 @@ export interface ThingTranslateModuleConfig {
     ThingTranslatePipe,
     TranslateSimplePipe,
     DateLocalizedFormatPipe,
-    OpeningHoursPipe,
     SentenceCasePipe,
     ToUnixPipe,
     EntriesPipe,

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

@@ -25,6 +25,9 @@ import {
 import moment from 'moment';
 import {isDefined, ThingTranslateParser} from './thing-translate.parser';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {setDefaultOptions} from 'date-fns';
+import {DateFnsConfigurationService} from 'ngx-date-fns';
+import {getDateFnsLocale} from './dfns-locale';
 
 // export const DEFAULT_LANGUAGE = new InjectionToken<string>('DEFAULT_LANGUAGE');
 
@@ -40,8 +43,13 @@ export class ThingTranslateService {
    *
    * @param translateService Instance of Angular TranslateService
    * @param parser An instance of the parser currently used
+   * @param dfnsConfiguration the date fns configuration
    */
-  constructor(private readonly translateService: TranslateService, public parser: ThingTranslateParser) {
+  constructor(
+    private readonly translateService: TranslateService,
+    public parser: ThingTranslateParser,
+    private dfnsConfiguration: DateFnsConfigurationService,
+  ) {
     this.translator = new SCThingTranslator(
       (translateService.currentLang ?? translateService.defaultLang) as SCLanguageCode,
     );
@@ -49,6 +57,10 @@ export class ThingTranslateService {
     this.translateService.onLangChange.pipe(takeUntilDestroyed()).subscribe((event: LangChangeEvent) => {
       this.translator.language = event.lang as keyof SCTranslations<SCLanguage>;
       moment.locale(event.lang);
+      getDateFnsLocale(event.lang as SCLanguageCode).then(locale => {
+        setDefaultOptions({locale});
+        this.dfnsConfiguration.setLocale(locale);
+      });
     });
   }
 

frontend/app/src/app/util/opening-hours.component.ts

@@ -12,64 +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, ContentChild, Input, OnDestroy, OnInit, TemplateRef} from '@angular/core';
-import opening_hours from 'opening_hours';
+import {ChangeDetectionStrategy, Component, ContentChild, Input, TemplateRef} from '@angular/core';
+import {interval, Observable} from 'rxjs';
+import {fromOpeningHours} from './opening-hours';
+import {map, startWith} from 'rxjs/operators';
 
 @Component({
   selector: 'stapps-opening-hours',
   templateUrl: 'opening-hours.html',
+  styleUrls: ['opening-hours.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class OpeningHoursComponent implements OnDestroy, OnInit {
+export class OpeningHoursComponent {
   @ContentChild(TemplateRef) content: TemplateRef<unknown>;
 
-  @Input() openingHours?: string;
-
   @Input() colorize = true;
 
   @Input() showNextChange = true;
 
-  timer: NodeJS.Timeout;
+  openingHours$?: Observable<{
+    color: 'light' | 'warning' | 'success' | 'danger';
+    statusName: string;
+    statusText?: string;
+    nextChangeAction: 'closing' | 'opening';
+    nextChangeSoon?: Observable<Date | undefined>;
+    nextChange?: Date;
+  }>;
 
-  updateTimer() {
-    if (typeof this.openingHours !== 'string') {
-      return;
-    }
-    clearTimeout(this.timer);
-
-    const ohObject = new opening_hours(this.openingHours, {
-      address: {
-        country_code: 'de',
-        state: 'Hessen',
-      },
-      lon: 8.667_97,
-      lat: 50.129_16,
-    });
-
-    const millisecondsRemaining =
-      // eslint-disable-next-line unicorn/prefer-date-now
-      (ohObject.getNextChange()?.getTime() ?? 0) - new Date().getTime() + 1000;
-
-    if (millisecondsRemaining > 1_209_600_000) {
-      // setTimeout has upper bound of 0x7FFFFFFF
-      // ignore everything over a week
-      return;
-    }
-
-    if (millisecondsRemaining > 0) {
-      this.timer = setTimeout(() => {
-        // pseudo update value to tigger openingHours pipe
-        this.openingHours = `${this.openingHours}`;
-        this.updateTimer();
-      }, millisecondsRemaining);
-    }
-  }
-
-  ngOnInit() {
-    this.updateTimer();
-  }
-
-  ngOnDestroy() {
-    clearTimeout(this.timer);
+  @Input() set openingHours(value: string | undefined) {
+    if (!value) return;
+    this.openingHours$ = fromOpeningHours(value).pipe(
+      map(({isUnknown, isOpen, changesSoon, nextChange, comment}) => ({
+        color: isUnknown ? 'light' : changesSoon ? 'warning' : isOpen ? 'success' : 'danger',
+        statusName: `common.openingHours.state_${isUnknown ? 'maybe' : isOpen ? 'open' : 'closed'}`,
+        statusText: comment,
+        nextChangeAction: isOpen ? 'closing' : 'opening',
+        nextChangeSoon: changesSoon
+          ? interval(60_000).pipe(
+              startWith(nextChange),
+              map(() => nextChange),
+            )
+          : undefined,
+        nextChange,
+      })),
+    );
   }
 }

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

@@ -13,18 +13,20 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<ng-container *ngIf="openingHours">
-  <div>
-    <ng-template [ngIf]="colorize" [ngIfElse]="blank">
-      <ion-badge
-        [color]="openingHours | openingHours | slice : 0 : 1 | join : ' '"
-        slot="start"
-        style="vertical-align: bottom"
-      >
-        {{ openingHours | openingHours | slice : 1 : 2 }}
-      </ion-badge>
-    </ng-template>
-    <ng-template #blank> {{ openingHours | openingHours | slice : 1 : 2 }} </ng-template>
-    <ng-container *ngIf="showNextChange"> {{ openingHours | openingHours | slice : 2 : 3 }} </ng-container>
-  </div>
-</ng-container>
+<div *ngIf="openingHours$ | async as openingHours">
+  <ion-badge *ngIf="colorize; else blank" [color]="openingHours.color" slot="start">
+    {{ openingHours.statusName | translate }}
+  </ion-badge>
+  <ng-template #blank>{{ openingHours.statusName | translate }}</ng-template>
+  <ng-container *ngIf="openingHours.statusText; else nextChange"> {{openingHours.statusText}} </ng-container>
+  <ng-template #nextChange>
+    <ng-container *ngIf="showNextChange && openingHours.nextChangeSoon">
+      {{ ('common.openingHours.' + openingHours.nextChangeAction + '_soon') | translate: {duration:
+      (openingHours.nextChangeSoon | async | dfnsFormatDistanceToNowStrict: {unit: 'minute'})} }}
+    </ng-container>
+    <ng-container *ngIf="showNextChange && !openingHours.nextChangeSoon">
+      {{ ('common.openingHours.' + openingHours.nextChangeAction) | translate: {date: openingHours.nextChange
+      | dfnsFormatRelativeToNow} }}
+    </ng-container>
+  </ng-template>
+</div>

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

@@ -0,0 +1,3 @@
+ion-badge {
+  vertical-align: bottom;
+}

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

@@ -0,0 +1,72 @@
+/*
+ * 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.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import type {nominatim_object} from 'opening_hours';
+import {from, Observable, map, expand, of, delay} from 'rxjs';
+import {lazy} from './rxjs/lazy';
+import {isAfter, subHours} from 'date-fns';
+
+export const OPENING_HOURS_REFERENCE = {
+  address: {
+    country_code: 'de',
+    state: 'Hessen',
+  },
+  lon: 8.667_97,
+  lat: 50.129_16,
+} satisfies nominatim_object;
+
+export interface OpeningHoursInfo {
+  isOpen: boolean;
+  changesSoon: boolean;
+  isUnknown: boolean;
+  nextChange?: Date;
+  comment?: string;
+}
+
+/**
+ * Opening Hours is a pretty huge CommonJS module,
+ * so we lazy-load it
+ */
+const OpeningHours = lazy(() => import('opening_hours').then(it => it.default));
+
+/**
+ * Create an observable from opening hours
+ * @param openingHours The opening hours string
+ * @param soonThresholdHours The number of hours before which a change is marked as "soon"
+ */
+export function fromOpeningHours(openingHours: string, soonThresholdHours = 1): Observable<OpeningHoursInfo> {
+  return from(OpeningHours).pipe(
+    map(OpeningHours => new OpeningHours(openingHours, OPENING_HOURS_REFERENCE)),
+    expand(it => {
+      const now = new Date();
+      const nextChange = it.getNextChange(now);
+      const changesSoon = nextChange ? isAfter(now, subHours(nextChange, soonThresholdHours)) : false;
+
+      const changeTime = nextChange && !changesSoon ? subHours(nextChange, soonThresholdHours) : nextChange;
+      return changeTime ? of(it).pipe(delay(changeTime)) : of();
+    }),
+    map(it => {
+      const now = new Date();
+      const nextChange = it.getNextChange(now);
+
+      return {
+        isOpen: it.getState(now),
+        isUnknown: it.getUnknown(now),
+        changesSoon: nextChange ? isAfter(now, subHours(nextChange, soonThresholdHours)) : false,
+        comment: it.getComment(now),
+        nextChange,
+      };
+    }),
+  );
+}

frontend/app/src/app/util/routing-stack.service.ts

@@ -12,11 +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 {Injectable} from '@angular/core';
 import {NavigationEnd, Router} from '@angular/router';
 import {SCSaveableThing, SCThings} from '@openstapps/core';
-import {DataProvider, DataScope} from '../modules/data/data.provider';
 
 @Injectable({
   providedIn: 'root',
@@ -30,15 +28,14 @@ export class RoutingStackService {
 
   lastDataDetail?: Promise<SCSaveableThing | SCThings>;
 
-  constructor(private router: Router, private dataProvider: DataProvider) {
+  constructor(private router: Router) {
     this.router.events.subscribe(event => {
       if (event instanceof NavigationEnd) {
         this.lastRoute = this.currentRoute;
         this.currentRoute = event.urlAfterRedirects;
 
-        const uid = this.currentRoute.match(/^\/data-detail\/([\w-]+)$/)?.[1];
         this.lastDataDetail = this.currentDataDetail;
-        this.currentDataDetail = uid ? this.dataProvider.get(uid, DataScope.Remote) : undefined;
+        this.currentDataDetail = this.router.getCurrentNavigation()!.extras.state?.item;
       }
     });
   }

frontend/app/src/app/util/rxjs/lazy.ts

@@ -0,0 +1,17 @@
+import {Observable} from 'rxjs';
+
+/**
+ * Lazy-load something
+ * @param construct the constructing function
+ * @example lazy(() => import('module').then(it => it.default))
+ */
+export function lazy<T>(construct: () => Promise<T>): Observable<T> {
+  let value: Promise<T>;
+  return new Observable<T>(subscriber => {
+    value ??= construct();
+    value.then(it => {
+      subscriber.next(it);
+      subscriber.complete();
+    });
+  });
+}

frontend/app/src/app/util/section.component.html

@@ -15,7 +15,7 @@
 <ion-grid>
   <ion-row>
     <ion-col>
-      <a *ngIf="item; else titleTemplate" [routerLink]="['/data-detail', item.uid]">
+      <a *ngIf="item; else titleTemplate" [routerLink]="['/data-detail', item.uid]" [state]="{item}">
         <ng-container *ngTemplateOutlet="titleTemplate"></ng-container>
       </a>
 

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

@@ -32,9 +32,18 @@ import {SearchbarAutofocusDirective} from './searchbar-autofocus.directive';
 import {SectionComponent} from './section.component';
 import {RouterModule} from '@angular/router';
 import {IonContentParallaxDirective} from './ion-content-parallax.directive';
+import {FormatDistanceToNowStrictPipeModule, FormatRelativeToNowPipeModule} from 'ngx-date-fns';
 
 @NgModule({
-  imports: [BrowserModule, IonicModule, TranslateModule, ThingTranslateModule.forChild(), RouterModule],
+  imports: [
+    BrowserModule,
+    IonicModule,
+    TranslateModule,
+    ThingTranslateModule.forChild(),
+    RouterModule,
+    FormatRelativeToNowPipeModule,
+    FormatDistanceToNowStrictPipeModule,
+  ],
   declarations: [
     IonContentParallaxDirective,
     ElementSizeChangeDirective,

frontend/app/src/app/util/view-transition.ts

@@ -0,0 +1,14 @@
+/**
+ * Performs a view transition
+ *
+ * This is a progressive enhancement for (as of right now) Chromium-based browsers
+ * - Firefox position: [positive](https://mozilla.github.io/standards-positions/#view-transitions)
+ * - WebKit position: [support](https://github.com/WebKit/standards-positions/issues/48#issuecomment-1679760489)
+ */
+export function startViewTransition(runner: () => Promise<void>) {
+  if ('startViewTransition' in document) {
+    document.startViewTransition(runner);
+  } else {
+    void runner();
+  }
+}

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

@@ -69,15 +69,13 @@
   },
   "common": {
     "openingHours": {
-      "closing": "Schließt {{relativeDateTime}}",
-      "closing_soon_warning": "Schließt bald! Um {{time}} Uhr",
-      "closing_today": "Schließt um {{time}} Uhr",
+      "closing": "Schließt {{date}}",
+      "closing_soon": "Schließt in {{duration}}",
       "state_closed": "Geschlossen",
       "state_maybe": "Vielleicht Geöffnet",
       "state_open": "Geöffnet",
-      "opening": "Öffnet {{relativeDateTime}}",
-      "opening_today": "Öffnet um {{time}} Uhr",
-      "opening_soon_warning": "Öffnet bald! Um {{time}} Uhr"
+      "opening": "Öffnet {{date}}",
+      "opening_soon": "Öffnet in {{duration}}"
     }
   },
   "dashboard": {
@@ -244,6 +242,25 @@
     }
   },
   "map": {
+    "directions": {
+      "TITLE": "Anbindung",
+      "TITLE_LONG": "Anbindung nach {{name}}",
+      "ADDRESS": "{{streetAddress}}, {{postalCode}} {{addressLocality}}",
+      "COPY_ADDRESS": "Adresse kopieren",
+      "ADDRESS_COPIED": "Adresse wurde kopiert",
+      "GOOGLE_MAPS": {
+        "TITLE": "Google Maps",
+        "URL": "https://www.google.com/maps/dir/?api=1&destination={{lat}},{{lon}}&origin={{posLat}},{{posLon}}"
+      },
+      "APPLE_MAPS": {
+        "TITLE": "Apple Maps",
+        "URL": "https://maps.apple.com/?daddr={{lat}},{{lon}}&saddr={{posLat}},{{posLon}}"
+      },
+      "OSM_ROUTING": {
+        "TITLE": "OpenStreetMaps Routing",
+        "URL": "https://routing.openstreetmap.de/?loc={{posLat}},{{posLon}}&loc={{lat}},{{lon}}&srv=2&hl=de"
+      }
+    },
     "page": {
       "TITLE": "Karte",
       "search_bar": {

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

@@ -69,15 +69,13 @@
   },
   "common": {
     "openingHours": {
-      "closing": "Closing {{relativeDateTime}}",
-      "closing_soon_warning": "Closing soon! At {{time}}",
-      "closing_today": "Closing at {{time}}",
+      "closing": "Closing {{date}}",
+      "closing_soon": "Closing in {{duration}}",
       "state_closed": "Closed",
       "state_maybe": "Maybe open",
       "state_open": "Open",
-      "opening": "Opens {{relativeDateTime}}",
-      "opening_today": "Opens at {{time}}",
-      "opening_soon_warning": "Opens soon! At {{time}}"
+      "opening": "Opens {{date}}",
+      "opening_soon": "Opens in {{duration}}"
     }
   },
   "dashboard": {
@@ -244,6 +242,25 @@
     }
   },
   "map": {
+    "directions": {
+      "TITLE": "Directions",
+      "TITLE_LONG": "Directions to {{name}}",
+      "ADDRESS": "{{streetAddress}}, {{addressLocality}} {{postalCode}}",
+      "COPY_ADDRESS": "Copy Address",
+      "ADDRESS_COPIED": "Address copied",
+      "GOOGLE_MAPS": {
+        "TITLE": "Google Maps",
+        "URL": "https://www.google.com/maps/dir/?api=1&destination={{lat}},{{lon}}&origin={{posLat}},{{posLon}}"
+      },
+      "APPLE_MAPS": {
+        "TITLE": "Apple Maps",
+        "URL": "https://maps.apple.com/?daddr={{lat}},{{lon}}&saddr={{posLat}},{{posLon}}"
+      },
+      "OSM_ROUTING": {
+        "TITLE": "OpenStreetMaps Routing",
+        "URL": "https://routing.openstreetmap.de/?loc={{posLat}},{{posLon}}&loc={{lat}},{{lon}}&srv=2&hl=en"
+      }
+    },
     "page": {
       "TITLE": "Map",
       "search_bar": {

frontend/app/src/global.scss

@@ -131,6 +131,18 @@ ion-alert {
   }
 }
 
+.stapps-location ion-icon {
+  width: 100%;
+  height: 100%;
+  color: #fd435c;
+}
+
+.stapps-device-location ion-icon {
+  width: 100%;
+  height: 100%;
+  color: #4387fd;
+}
+
 .add-event-popover {
   --width: fit-content;
   --max-width: 95%;

frontend/app/tsconfig.spec.json

@@ -2,7 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
-    "types": ["jasmine", "node"],
+    "types": ["jasmine", "node", "dom-view-transitions"],
     "paths": {
       "@capacitor/*": ["__mocks__/@capacitor/*"]
     }

images/app-cypress/Dockerfile

@@ -94,6 +94,9 @@ RUN echo  " node version:    $(node -v) \n" \
   "git version:     $(git --version) \n" \
   "whoami:          $(whoami) \n"
 
+# https://docs.cypress.io/guides/guides/launching-browsers#Linux-Dependencies
+RUN npx playwright install-deps webkit
+
 # a few environment variables to make NPM installs easier
 # good colors for most applications
 ENV TERM=xterm

images/app-cypress/package.json

@@ -5,8 +5,7 @@
   "type": "module",
   "license": "GPL-3.0-only",
   "author": "Rainer Killinger <mail-openstapps@killinger.co>",
-  "contributors": [
-  ],
+  "contributors": [],
   "files": [
     "Dockerfile",
     "CHANGELOG.md"

package.json

@@ -40,5 +40,10 @@
     "turbo-ignore": "1.10.6",
     "typedoc": "0.24.8",
     "typescript": "5.1.6"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "@cypress/schematic@2.5.1": "patches/@cypress__schematic@2.5.1.patch"
+    }
   }
 }

patches/@cypress__schematic@2.5.1.patch

@@ -0,0 +1,14 @@
+diff --git a/src/builders/cypress/schema.json b/src/builders/cypress/schema.json
+index 70af07ab029ef30f71388db9f91ad411cfb57ace..5a6a0a33ea089524a9b24f121b831c96a065263e 100644
+--- a/src/builders/cypress/schema.json
++++ b/src/builders/cypress/schema.json
+@@ -27,7 +27,8 @@
+         "chromium",
+         "canary",
+         "firefox",
+-        "edge"
++        "edge",
++        "webkit"
+       ]
+     },
+     "devServerTarget": {

pnpm-lock.yaml

@@ -4,6 +4,11 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+patchedDependencies:
+  '@cypress/schematic@2.5.1':
+    hash: qd7kay72vjjbh3q6b6qch7h5ha
+    path: patches/@cypress__schematic@2.5.1.patch
+
 importers:
 
   .:
@@ -752,6 +757,9 @@ importers:
       '@capacitor/browser':
         specifier: 4.1.0
         version: 4.1.0(@capacitor/core@4.6.1)
+      '@capacitor/clipboard':
+        specifier: 4.1.0
+        version: 4.1.0(@capacitor/core@4.6.1)
       '@capacitor/core':
         specifier: 4.6.1
         version: 4.6.1
@@ -824,12 +832,18 @@ importers:
       '@transistorsoft/capacitor-background-fetch':
         specifier: 1.0.2
         version: 1.0.2(@capacitor/core@4.6.1)
+      '@types/dom-view-transitions':
+        specifier: 1.0.1
+        version: 1.0.1
       capacitor-secure-storage-plugin:
         specifier: 0.8.1
         version: 0.8.1(@capacitor/core@4.6.1)
       cordova-plugin-calendar:
         specifier: 5.1.6
         version: 5.1.6
+      date-fns:
+        specifier: 2.30.0
+        version: 2.30.0
       deepmerge:
         specifier: 4.3.1
         version: 4.3.1
@@ -857,6 +871,9 @@ importers:
       moment:
         specifier: 2.29.4
         version: 2.29.4
+      ngx-date-fns:
+        specifier: 10.0.1
+        version: 10.0.1(@angular/common@16.1.4)(@angular/core@16.1.4)(date-fns@2.30.0)
       ngx-logger:
         specifier: 5.0.12
         version: 5.0.12(rxjs@7.8.1)
@@ -937,8 +954,8 @@ importers:
         specifier: 1.1.19
         version: 1.1.19
       '@cypress/schematic':
-        specifier: 1.7.0
-        version: 1.7.0(@angular/cli@16.1.4)(@angular/core@16.1.4)
+        specifier: 2.5.1
+        version: 2.5.1(patch_hash=qd7kay72vjjbh3q6b6qch7h5ha)(@angular/cli@16.1.4)(@angular/core@16.1.4)
       '@ionic/angular-toolkit':
         specifier: 10.0.0
         version: 10.0.0
@@ -997,8 +1014,8 @@ importers:
         specifier: 0.15.4
         version: 0.15.4
       cypress:
-        specifier: 12.17.1
-        version: 12.17.1
+        specifier: 13.2.0
+        version: 13.2.0
       eslint:
         specifier: 8.43.0
         version: 8.43.0
@@ -1056,6 +1073,9 @@ importers:
       license-checker:
         specifier: 25.0.1
         version: 25.0.1
+      playwright-webkit:
+        specifier: 1.38.0
+        version: 1.38.0
       prettier:
         specifier: 2.8.6
         version: 2.8.6
@@ -1089,6 +1109,8 @@ importers:
 
   images/app-builder: {}
 
+  images/app-cypress: {}
+
   images/node-base: {}
 
   images/node-builder: {}
@@ -2092,14 +2114,6 @@ packages:
       '@jridgewell/trace-mapping': 0.3.18
     dev: true
 
-  /@angular-devkit/architect@0.1202.18:
-    resolution: {integrity: sha512-C4ASKe+xBjl91MJyHDLt3z7ICPF9FU6B0CeJ1phwrlSHK9lmFG99WGxEj/Tc82+vHyPhajqS5XJ38KyVAPBGzA==}
-    engines: {node: ^12.14.1 || >=14.0.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
-    dependencies:
-      '@angular-devkit/core': 12.2.18
-      rxjs: 6.6.7
-    dev: true
-
   /@angular-devkit/architect@0.1601.4(chokidar@3.5.3):
     resolution: {integrity: sha512-OOSbNlDy+Q3jY0oFHaq8kkna9HYI1zaS8IHeCIDP6T/ZIAVad4+HqXAL4SKQrKJikkoBQv1Z/eaDBL5XPFK9Bw==}
     engines: {node: ^16.14.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
@@ -2246,18 +2260,6 @@ packages:
       - chokidar
     dev: true
 
-  /@angular-devkit/core@12.2.18:
-    resolution: {integrity: sha512-GDLHGe9HEY5SRS+NrKr14C8aHsRCiBFkBFSSbeohgLgcgSXzZHFoU84nDWrl3KZNP8oqcUSv5lHu6dLcf2fnww==}
-    engines: {node: ^12.14.1 || >=14.0.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
-    dependencies:
-      ajv: 8.6.2
-      ajv-formats: 2.1.0(ajv@8.6.2)
-      fast-json-stable-stringify: 2.1.0
-      magic-string: 0.25.7
-      rxjs: 6.6.7
-      source-map: 0.7.3
-    dev: true
-
   /@angular-devkit/core@13.3.11(chokidar@3.5.3):
     resolution: {integrity: sha512-rfqoLMRYhlz0wzKlHx7FfyIyQq8dKTsmbCoIVU1cEIH0gyTMVY7PbVzwRRcO6xp5waY+0hA+0Brriujpuhkm4w==}
     engines: {node: ^12.20.0 || ^14.15.0 || >=16.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
@@ -2293,15 +2295,6 @@ packages:
       source-map: 0.7.4
     dev: true
 
-  /@angular-devkit/schematics@12.2.18:
-    resolution: {integrity: sha512-bZ9NS5PgoVfetRC6WeQBHCY5FqPZ9y2TKHUo12sOB2YSL3tgWgh1oXyP8PtX34gasqsLjNULxEQsAQYEsiX/qQ==}
-    engines: {node: ^12.14.1 || >=14.0.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
-    dependencies:
-      '@angular-devkit/core': 12.2.18
-      ora: 5.4.1
-      rxjs: 6.6.7
-    dev: true
-
   /@angular-devkit/schematics@13.3.11(chokidar@3.5.3):
     resolution: {integrity: sha512-ben+EGXpCrClnIVAAnEQmhQdKmnnqFhMp5BqMxgOslSYBAmCutLA6rBu5vsc8kZcGian1wt+lueF7G1Uk5cGBg==}
     engines: {node: ^12.20.0 || ^14.15.0 || >=16.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
@@ -2648,7 +2641,7 @@ packages:
       rxjs: ^5.5.0 || ^6.5.0 || ^7.3.0
     dependencies:
       '@awesome-cordova-plugins/core': 5.45.0(rxjs@7.8.1)
-      '@types/cordova': 11.0.0
+      '@types/cordova': 11.0.1
       rxjs: 7.8.1
     dev: false
 
@@ -2657,7 +2650,7 @@ packages:
     peerDependencies:
       rxjs: ^5.5.0 || ^6.5.0 || ^7.3.0
     dependencies:
-      '@types/cordova': 11.0.0
+      '@types/cordova': 11.0.1
       rxjs: 7.8.1
     dev: false
 
@@ -4910,6 +4903,14 @@ packages:
       - supports-color
     dev: true
 
+  /@capacitor/clipboard@4.1.0(@capacitor/core@4.6.1):
+    resolution: {integrity: sha512-lfUwDqZces3mQcBOyfxpBCsRWWSfLuPzekA1N3RaMgYVhD6/rdzFnzfRiksj1hm4It+lnULK0y+N5nxVnTt+0Q==}
+    peerDependencies:
+      '@capacitor/core': ^4.0.0
+    dependencies:
+      '@capacitor/core': 4.6.1
+    dev: false
+
   /@capacitor/core@4.6.1:
     resolution: {integrity: sha512-7A2IV9E8umgu9u0fChUTjQJq+Jp25GJZMmWxoQN/nVx/1rcpFJ4m1xo3NPBoIRs+aV7FR+BM17mPrnkKlA8N2g==}
     dependencies:
@@ -5336,8 +5337,8 @@ packages:
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /@cypress/request@2.88.11:
-    resolution: {integrity: sha512-M83/wfQ1EkspjkE2lNWNV5ui2Cv7UCv1swW1DqljahbzLVWltcsexQh8jYtuS/vzFXP+HySntGM83ZXA9fn17w==}
+  /@cypress/request@3.0.1:
+    resolution: {integrity: sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==}
     engines: {node: '>= 6'}
     dependencies:
       aws-sign2: 0.7.0
@@ -5355,26 +5356,23 @@ packages:
       performance-now: 2.1.0
       qs: 6.10.4
       safe-buffer: 5.2.1
-      tough-cookie: 2.5.0
+      tough-cookie: 4.1.3
       tunnel-agent: 0.6.0
       uuid: 8.3.2
     dev: true
 
-  /@cypress/schematic@1.7.0(@angular/cli@16.1.4)(@angular/core@16.1.4):
-    resolution: {integrity: sha512-CouQrVlZ+uHVVBQtmNoMYU9LyoSAmQTOLDpVjrdTdMPpJH1mWnHCL5OCMt+FZLR+43KRiWEvDUjNqSza11oGsQ==}
+  /@cypress/schematic@2.5.1(patch_hash=qd7kay72vjjbh3q6b6qch7h5ha)(@angular/cli@16.1.4)(@angular/core@16.1.4):
+    resolution: {integrity: sha512-tO2lUnr5C0udB4xpewndlTMkEHHdgyvSNLI9+bTdYbxCby8MlxrFpewxmqPIfH21ZmOQP8XghD5uMd3l732ESA==}
     peerDependencies:
-      '@angular/cli': '>=12'
-      '@angular/core': '>=12'
+      '@angular/cli': '>=14'
+      '@angular/core': '>=14'
     dependencies:
-      '@angular-devkit/architect': 0.1202.18
-      '@angular-devkit/core': 12.2.18
-      '@angular-devkit/schematics': 12.2.18
       '@angular/cli': 16.1.4
       '@angular/core': 16.1.4(rxjs@7.8.1)(zone.js@0.13.1)
-      '@schematics/angular': 12.2.18
       jsonc-parser: 3.2.0
       rxjs: 6.6.7
     dev: true
+    patched: true
 
   /@cypress/xvfb@1.2.4(supports-color@8.1.1):
     resolution: {integrity: sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==}
@@ -5739,7 +5737,7 @@ packages:
     peerDependencies:
       rxjs: ^5.5.0 || ^6.5.0
     dependencies:
-      '@types/cordova': 11.0.0
+      '@types/cordova': 11.0.1
       rxjs: 7.8.1
     dev: false
 
@@ -5751,7 +5749,7 @@ packages:
       rxjs: ^5.5.0 || ^6.5.0
     dependencies:
       '@ionic-native/core': 5.36.0(rxjs@7.8.1)
-      '@types/cordova': 11.0.0
+      '@types/cordova': 11.0.1
       rxjs: 7.8.1
     dev: false
     optional: true
@@ -5764,7 +5762,7 @@ packages:
       rxjs: ^5.5.0 || ^6.5.0
     dependencies:
       '@ionic-native/core': 5.36.0(rxjs@7.8.1)
-      '@types/cordova': 11.0.0
+      '@types/cordova': 11.0.1
       rxjs: 7.8.1
     dev: false
     optional: true
@@ -5777,7 +5775,7 @@ packages:
       rxjs: ^5.5.0 || ^6.5.0
     dependencies:
       '@ionic-native/core': 5.36.0(rxjs@7.8.1)
-      '@types/cordova': 11.0.0
+      '@types/cordova': 11.0.1
       rxjs: 7.8.1
     dev: false
     optional: true
@@ -5790,7 +5788,7 @@ packages:
       rxjs: ^5.5.0 || ^6.5.0
     dependencies:
       '@ionic-native/core': 5.36.0(rxjs@7.8.1)
-      '@types/cordova': 11.0.0
+      '@types/cordova': 11.0.1
       rxjs: 7.8.1
     dev: false
     optional: true
@@ -6444,15 +6442,6 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
-  /@schematics/angular@12.2.18:
-    resolution: {integrity: sha512-niRS9Ly9y8uI0YmTSbo8KpdqCCiZ/ATMZWeS2id5M8JZvfXbngwiqJvojdSol0SWU+n1W4iA+lJBdt4gSKlD5w==}
-    engines: {node: ^12.14.1 || >=14.0.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
-    dependencies:
-      '@angular-devkit/core': 12.2.18
-      '@angular-devkit/schematics': 12.2.18
-      jsonc-parser: 3.0.0
-    dev: true
-
   /@schematics/angular@16.1.4:
     resolution: {integrity: sha512-XfoeL+aBVIR/DzgVKGVhHW/TGQnqWvngyJVuCwXEVWzNfjxHYFkchXa78OItpAvTEr6/Y0Me9FQVAGVA4mMUyg==}
     engines: {node: ^16.14.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
@@ -6712,8 +6701,8 @@ packages:
     resolution: {integrity: sha512-t73xJJrvdTjXrn4jLS9VSGRbz0nUY3cl2DMGDU48lKl+HR9dbbjW2A9r3g40VA++mQpy6uuHg33gy7du2BKpog==}
     dev: true
 
-  /@types/cordova@11.0.0:
-    resolution: {integrity: sha512-AtBm1IAqqXsXszJe6XxuA2iXLhraNCj25p/FHRyikPeW0Z3YfgM6qzWb+VJglJTmZc5lqRNy84cYM/sQI5v6Vw==}
+  /@types/cordova@11.0.1:
+    resolution: {integrity: sha512-Zd6LAhYUAdn0mL0SbxHeF4fO/3uzkcW3fzE0ZIK1wDlTRCWlI4/0i+Phb+otP9ryziyeW2LKofRNSP5yil85hA==}
     dev: false
 
   /@types/cors@2.8.13:
@@ -6735,6 +6724,10 @@ packages:
       '@types/node': 18.15.3
     dev: false
 
+  /@types/dom-view-transitions@1.0.1:
+    resolution: {integrity: sha512-A9S1ijj/4MX06I1W/6on8lhaYyq1Ir7gaOvfllW1o4RzVWW88HAeqX0pUx9VgOLnNpdiGeUW2CTkg18p5LWIrA==}
+    dev: false
+
   /@types/eslint-scope@3.7.4:
     resolution: {integrity: sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==}
     dependencies:
@@ -6944,6 +6937,10 @@ packages:
   /@types/node@18.15.3:
     resolution: {integrity: sha512-p6ua9zBxz5otCmbpb5D3U4B5Nanw6Pk3PPyX05xnxbB/fRv71N7CPmORg7uAD5P70T0xmx1pzAx/FUfa5X+3cw==}
 
+  /@types/node@18.17.17:
+    resolution: {integrity: sha512-cOxcXsQ2sxiwkykdJqvyFS+MLQPLvIdwh5l6gNg8qF6s+C7XSkEWOZjK+XhUZd+mYvHV/180g2cnCcIl4l06Pw==}
+    dev: true
+
   /@types/nodemailer@6.4.7:
     resolution: {integrity: sha512-f5qCBGAn/f0qtRcd4SEn88c8Fp3Swct1731X4ryPKqS61/A3LmmzN8zaEz7hneJvpjFbUUgY7lru/B/7ODTazg==}
     dependencies:
@@ -7667,17 +7664,6 @@ packages:
       clean-stack: 2.2.0
       indent-string: 4.0.0
 
-  /ajv-formats@2.1.0(ajv@8.6.2):
-    resolution: {integrity: sha512-USH2jBb+C/hIpwD2iRjp0pe0k+MvzG0mlSn/FIdCgQhUb9ALPRjt2KIQdfZDS9r0ZIeUAg7gOu9KL0PFqGqr5Q==}
-    peerDependencies:
-      ajv: ^8.0.0
-    peerDependenciesMeta:
-      ajv:
-        optional: true
-    dependencies:
-      ajv: 8.6.2
-    dev: true
-
   /ajv-formats@2.1.1(ajv@8.12.0):
     resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
     peerDependencies:
@@ -7733,15 +7719,6 @@ packages:
       require-from-string: 2.0.2
       uri-js: 4.4.1
 
-  /ajv@8.6.2:
-    resolution: {integrity: sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==}
-    dependencies:
-      fast-deep-equal: 3.1.3
-      json-schema-traverse: 1.0.0
-      require-from-string: 2.0.2
-      uri-js: 4.4.1
-    dev: true
-
   /ajv@8.9.0:
     resolution: {integrity: sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==}
     dependencies:
@@ -9451,15 +9428,15 @@ packages:
     resolution: {integrity: sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==}
     dev: true
 
-  /cypress@12.17.1:
-    resolution: {integrity: sha512-eKfBgO6t8waEyhegL4gxD7tcI6uTCGttu+ZU7y9Hq8BlpMztd7iLeIF4AJFAnbZH1xjX+wwgg4cRKFNSvv3VWQ==}
-    engines: {node: ^14.0.0 || ^16.0.0 || >=18.0.0}
+  /cypress@13.2.0:
+    resolution: {integrity: sha512-AvDQxBydE771GTq0TR4ZUBvv9m9ffXuB/ueEtpDF/6gOcvFR96amgwSJP16Yhqw6VhmwqspT5nAGzoxxB+D89g==}
+    engines: {node: ^16.0.0 || ^18.0.0 || >=20.0.0}
     hasBin: true
     requiresBuild: true
     dependencies:
-      '@cypress/request': 2.88.11
+      '@cypress/request': 3.0.1
       '@cypress/xvfb': 1.2.4(supports-color@8.1.1)
-      '@types/node': 14.18.38
+      '@types/node': 18.17.17
       '@types/sinonjs__fake-timers': 8.1.1
       '@types/sizzle': 2.3.3
       arch: 2.2.0
@@ -9492,6 +9469,7 @@ packages:
       minimist: 1.2.8
       ospath: 1.2.2
       pretty-bytes: 5.6.0
+      process: 0.11.10
       proxy-from-env: 1.0.0
       request-progress: 3.0.0
       semver: 7.5.4
@@ -14252,6 +14230,19 @@ packages:
     resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
     dev: true
 
+  /ngx-date-fns@10.0.1(@angular/common@16.1.4)(@angular/core@16.1.4)(date-fns@2.30.0):
+    resolution: {integrity: sha512-8IdwrblaMULNQgqwA0Yo8HPpUMQDLKC1pvkoFTToElf7gZDPWroOva2cogUrrNXXWLkwA9YDpc1skZVfI+mmwA==}
+    peerDependencies:
+      '@angular/common': '>=14'
+      '@angular/core': '>=14'
+      date-fns: '>=2'
+    dependencies:
+      '@angular/common': 16.1.4(@angular/core@16.1.4)(rxjs@7.8.1)
+      '@angular/core': 16.1.4(rxjs@7.8.1)(zone.js@0.13.1)
+      date-fns: 2.30.0
+      tslib: 2.4.1
+    dev: false
+
   /ngx-logger@5.0.12(rxjs@7.8.1):
     resolution: {integrity: sha512-4kTtPvxQoV2ka6pigtvkbtaLKpMYWqZm7Slu0YQVcwzBKoVR2K+oLmMVcA50S6kCxkZXq7iKcrXUKR2vhMXPqQ==}
     peerDependencies:
@@ -15164,6 +15155,21 @@ packages:
     resolution: {integrity: sha512-sxMwpDw/ySY1WB2CE3+IdMuEcWibJ72DDOsXLkSmEaSzwEUaYBT6DWgOfBiHGCux4q433X6+OEFWjlVqp7gL6g==}
     dev: false
 
+  /playwright-core@1.38.0:
+    resolution: {integrity: sha512-f8z1y8J9zvmHoEhKgspmCvOExF2XdcxMW8jNRuX4vkQFrzV4MlZ55iwb5QeyiFQgOFCUolXiRHgpjSEnqvO48g==}
+    engines: {node: '>=16'}
+    hasBin: true
+    dev: true
+
+  /playwright-webkit@1.38.0:
+    resolution: {integrity: sha512-i+/8WMxFgZIRukwFjrU/dDCjHPUE1eFvFSR4I+kIc+WOm0VU5kWhj8b2Ob2Z8Y0BIQKCH8qj6SHW/kXKpc61ug==}
+    engines: {node: '>=16'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      playwright-core: 1.38.0
+    dev: true
+
   /plist@3.1.0:
     resolution: {integrity: sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ==}
     engines: {node: '>=10.4.0'}
@@ -15399,6 +15405,11 @@ packages:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
     dev: true
 
+  /process@0.11.10:
+    resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
+    engines: {node: '>= 0.6.0'}
+    dev: true
+
   /progress@1.1.8:
     resolution: {integrity: sha512-UdA8mJ4weIkUBO224tIarHzuHs4HuYiJvsuGT7j/SPQiUJVjYvNDBIPa0hAorduOfjGohB/qHWRa/lrrWX/mXw==}
     engines: {node: '>=0.4.0'}
@@ -15543,6 +15554,10 @@ packages:
     engines: {node: '>=0.6'}
     dev: true
 
+  /querystringify@2.2.0:
+    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
+    dev: true
+
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -17554,6 +17569,16 @@ packages:
       punycode: 2.3.0
     dev: true
 
+  /tough-cookie@4.1.3:
+    resolution: {integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==}
+    engines: {node: '>=6'}
+    dependencies:
+      psl: 1.9.0
+      punycode: 2.3.0
+      universalify: 0.2.0
+      url-parse: 1.5.10
+    dev: true
+
   /tr46@1.0.1:
     resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
     dependencies:
@@ -18096,6 +18121,11 @@ packages:
     engines: {node: '>= 4.0.0'}
     dev: true
 
+  /universalify@0.2.0:
+    resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
+    engines: {node: '>= 4.0.0'}
+    dev: true
+
   /universalify@2.0.0:
     resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
     engines: {node: '>= 10.0.0'}
@@ -18137,6 +18167,13 @@ packages:
     resolution: {integrity: sha512-1WJ8YX1Kcec9wgxy8d/ATzGP1ayO6BRnd3iB6NlM+7cOnn6U8p5PKppRTCPLobh3CSdJ4d0TdPjopzyU2KcVFw==}
     dev: true
 
+  /url-parse@1.5.10:
+    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
+    dependencies:
+      querystringify: 2.2.0
+      requires-port: 1.0.0
+    dev: true
+
   /url-value-parser@2.2.0:
     resolution: {integrity: sha512-yIQdxJpgkPamPPAPuGdS7Q548rLhny42tg8d4vyTNzFqvOnwqrgHXvgehT09U7fwrzxi3RxCiXjoNUNnNOlQ8A==}
     engines: {node: '>=6.0.0'}