refactor: update changelog

ci: publish release

.changeset/chilly-goats-cough.md

@@ -1,5 +0,0 @@
----
-'@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

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

.changeset/fair-colts-explain.md

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

.changeset/fluffy-lamps-count.md

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

.changeset/forty-eagles-cough.md

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

.changeset/loud-buttons-repeat.md

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

.changeset/orange-knives-happen.md

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

.changeset/pink-sheep-relax.md

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

.changeset/pretty-wombats-double.md

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

.changeset/proud-cameras-fail.md

@@ -1,8 +0,0 @@
----
-'@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/silver-bobcats-cry.md

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

.changeset/sour-carpets-flash.md

@@ -1,5 +0,0 @@
----
-'@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

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

.changeset/tricky-garlics-hope.md

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

.changeset/twelve-planes-knock.md

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

.changeset/wet-houses-provide.md

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

.gitlab-ci.yml

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

.gitlab/publishing.gitlab-ci.yml

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

.gitlab/schedules.gitlab-ci.yml

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

backend/proxy/README.md

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

backend/proxy/config/default.cjs

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

backend/proxy/fixtures/visibleRoute.template

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

backend/proxy/package.json

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

backend/proxy/src/app.ts

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

examples/minimal-deployment/docker-compose.yml

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

flake.nix

@@ -15,12 +15,8 @@
             buildToolsVersions = [ "${buildToolsVersion}" ];
             platformVersions = [ "32" ];
           };
-          cypress = prev.cypress.overrideAttrs(cyPrev: rec {
+          cypress = prev.cypress.overrideAttrs(prev: {
-            version = "13.2.0";
+            version = "12.17.1";
-            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", "cypress/tsconfig.json"],
+        "project": ["tsconfig.json", "tsconfig.spec.json", "e2e/tsconfig.e2e.json"],
         "createDefaultProgram": true
       },
       "extends": [

frontend/app/.gitlab-ci.yml

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

frontend/app/PITFALLS.md

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

frontend/app/angular.json

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

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

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

frontend/app/cypress/integration/opening-hours.spec.ts

@@ -1,141 +0,0 @@
-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,24 +31,36 @@
 // When a command from ./commands is ready to use, import with `import './commands'` syntax
 // import './commands';
 
-beforeEach(function () {
+beforeEach(async function () {
-  cy.wrap(
+  let databases: string[];
-    new Promise(resolve => {
+  if (window.indexedDB.databases) {
-      window.indexedDB.deleteDatabase('_ionicstorage').onsuccess = resolve;
+    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}`);
+    }
+  }
 });
 
 Cypress.on('window:before:load', window => {
-  // Fake that user is using its browser in German
+  // Fake that user is using its browser in german language
   Object.defineProperty(window.navigator, 'language', {value: 'de-DE'});
   Object.defineProperty(window.navigator, 'languages', [{value: 'de-DE'}]);
 
-  cy.spy(window.console, 'error').as('consoleError');
+  // Fail tests on console error
-});
+  cy.stub(window.console, 'error').callsFake(message => {
-
+    // log out to the terminal
-afterEach(function () {
+    cy.now('task', 'error', message);
-  cy.get('@consoleError').should('not.have.been.called');
+    // log to Command Log and fail the test
+    throw new Error(message);
+  });
 });
 
 Cypress.on('uncaught:exception', error => {

frontend/app/package.json

@@ -63,7 +63,6 @@
     "@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",
@@ -88,11 +87,8 @@
     "@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",
@@ -150,7 +146,7 @@
     "@typescript-eslint/eslint-plugin": "5.60.1",
     "@typescript-eslint/parser": "5.60.1",
     "cordova-res": "0.15.4",
-    "cypress": "13.2.0",
+    "cypress": "12.17.1",
     "eslint": "8.43.0",
     "eslint-plugin-jsdoc": "46.4.2",
     "eslint-plugin-prettier": "4.2.1",

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

@@ -1,5 +1,5 @@
-/*!
+/*
- * Copyright (C) 2023 StApps
+ * Copyright (C) 2020 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -12,3 +12,8 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
+import {NGXLogger} from 'ngx-logger';
+
+export let logger: NGXLogger;
+
+export const initLogger = (newLogger: NGXLogger) => (logger = newLogger);

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

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

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

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

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

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

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

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

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

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

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

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

frontend/app/src/app/modules/assessments/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} from '@ionic/angular';
+import {NavController, ViewWillEnter} 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 OnInit {
+export class AssessmentsDetailComponent implements ViewWillEnter, OnInit {
   destroy$ = inject(DestroyRef);
 
   constructor(
@@ -67,4 +67,8 @@ export class AssessmentsDetailComponent implements 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,7 +61,6 @@ 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,7 +71,6 @@ export class AssessmentsPageComponent implements OnInit, AfterViewInit {
           queryParams: {
             token: this.activatedRoute.snapshot.queryParamMap.get('token'),
           },
-          state: {item: thing},
         });
       });
 

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

@@ -12,18 +12,24 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
+
 import {Injectable} from '@angular/core';
 import {IPAIAAuthAction} from './paia/paia-auth-action';
 import {AuthActions, IAuthAction} from 'ionic-appauth';
 import {TranslateService} from '@ngx-translate/core';
 import {JSONPath} from 'jsonpath-plus';
-import {SCAuthorizationProviderType, SCUserConfiguration, SCUserConfigurationMap} from '@openstapps/core';
+import {
+  SCAuthorizationProvider,
+  SCAuthorizationProviderType,
+  SCUserConfiguration,
+  SCUserConfigurationMap,
+} from '@openstapps/core';
+import {ConfigProvider} from '../config/config.provider';
 import {StorageProvider} from '../storage/storage.provider';
 import {DefaultAuthService} from './default-auth.service';
 import {PAIAAuthService} from './paia/paia-auth.service';
 import {SimpleBrowser} from '../../util/browser.factory';
 import {AlertController} from '@ionic/angular';
-import {ConfigProvider} from '../config/config.provider';
 
 const AUTH_ORIGIN_PATH = 'stapps.auth.origin_path';
 
@@ -31,19 +37,23 @@ const AUTH_ORIGIN_PATH = 'stapps.auth.origin_path';
   providedIn: 'root',
 })
 export class AuthHelperService {
-  get userConfigurationMap(): SCUserConfigurationMap {
+  userConfigurationMap: SCUserConfigurationMap;
-    return this.config.auth.default!.endpoints.mapping;
-  }
 
   constructor(
     private translateService: TranslateService,
+    private configProvider: ConfigProvider,
     private storageProvider: StorageProvider,
     private defaultAuth: DefaultAuthService,
     private paiaAuth: PAIAAuthService,
     private browser: SimpleBrowser,
     private alertController: AlertController,
-    private config: ConfigProvider,
+  ) {
-  ) {}
+    this.userConfigurationMap = (
+      this.configProvider.getAnyValue('auth') as {
+        default: SCAuthorizationProvider;
+      }
+    ).default.endpoints.mapping;
+  }
 
   public getAuthMessage(provider: SCAuthorizationProviderType, action: IAuthAction | IPAIAAuthAction) {
     let message: string | undefined;

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

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

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

@@ -12,26 +12,29 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
+
 import {
   AuthorizationRequestHandler,
   AuthorizationServiceConfiguration,
   JQueryRequestor,
   LocalStorageBackend,
+  Requestor,
+  StorageBackend,
   TokenRequestHandler,
 } from '@openid/appauth';
-import {AuthActionBuilder, DefaultBrowser, EndSessionHandler, UserInfoHandler} from 'ionic-appauth';
+import {AuthActionBuilder, Browser, DefaultBrowser, EndSessionHandler, UserInfoHandler} from 'ionic-appauth';
+import {ConfigProvider} from '../config/config.provider';
+import {SCAuthorizationProvider} from '@openstapps/core';
 import {getClientConfig, getEndpointsConfig} from './auth.provider.methods';
 import {Injectable} from '@angular/core';
 import {AuthService} from './auth.service';
-import {ConfigProvider} from '../config/config.provider';
-import {BeforeAppInit} from '../../before-app-init';
 
 const TOKEN_RESPONSE_KEY = 'token_response';
 
 @Injectable({
   providedIn: 'root',
 })
-export class DefaultAuthService extends AuthService implements BeforeAppInit {
+export class DefaultAuthService extends AuthService {
   public localConfiguration: AuthorizationServiceConfiguration;
 
   protected tokenHandler: TokenRequestHandler;
@@ -42,17 +45,13 @@ export class DefaultAuthService extends AuthService implements BeforeAppInit {
 
   protected endSessionHandler: EndSessionHandler;
 
-  constructor(private config: ConfigProvider) {
+  constructor(
-    super(new DefaultBrowser(), new LocalStorageBackend(), new JQueryRequestor());
+    protected browser: Browser = new DefaultBrowser(),
-  }
+    protected storage: StorageBackend = new LocalStorageBackend(),
-
+    protected requestor: Requestor = new JQueryRequestor(),
-  async beforeAppInit() {
+    private readonly configProvider: ConfigProvider,
-    this.authConfig = getClientConfig('default', this.config.auth);
+  ) {
-    this.localConfiguration = new AuthorizationServiceConfiguration(
+    super(browser, storage, requestor);
-      getEndpointsConfig('default', this.config.auth),
-    );
-
-    await super.init();
   }
 
   get configuration(): Promise<AuthorizationServiceConfiguration> {
@@ -61,6 +60,22 @@ export class DefaultAuthService extends AuthService implements BeforeAppInit {
     return Promise.resolve(this.localConfiguration);
   }
 
+  public async init() {
+    this.setupConfiguration();
+    this.setupAuthorizationNotifier();
+    await this.loadTokenFromStorage();
+  }
+
+  setupConfiguration() {
+    const authConfig = this.configProvider.getAnyValue('auth') as {
+      default: SCAuthorizationProvider;
+    };
+    this.authConfig = getClientConfig('default', authConfig);
+    this.localConfiguration = new AuthorizationServiceConfiguration(
+      getEndpointsConfig('default', authConfig),
+    );
+  }
+
   public async signOut() {
     await this.revokeTokens().catch(error => {
       this.notifyActionListers(AuthActionBuilder.SignOutFailed(error));

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

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

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

@@ -12,6 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
+
 import {Calendar} from '@awesome-cordova-plugins/calendar/ngx';
 import {Injectable} from '@angular/core';
 import {ICalEvent} from './ical/ical';
@@ -28,18 +29,18 @@ const RECURRENCE_PATTERNS: Partial<Record<unitOfTime.Diff, string | undefined>>
   day: 'daily',
 };
 
-@Injectable({providedIn: 'root'})
+@Injectable()
 export class CalendarService {
   goToDate = new Subject<number>();
 
   goToDateClicked = this.goToDate.asObservable();
 
-  get calendarName(): string {
+  calendarName = 'StApps';
-    return this.config.app.name ?? 'StApps';
-  }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  constructor(readonly calendar: Calendar, readonly config: ConfigProvider) {}
+  constructor(readonly calendar: Calendar, private readonly configProvider: ConfigProvider) {
+    this.calendarName = (this.configProvider.getValue('name') as string) ?? 'StApps';
+  }
 
   async createCalendar(): Promise<CalendarInfo | undefined> {
     await this.calendar.createCalendar({

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], {state: {item}});
+        void this.router.navigate(['data-detail', item.uid]);
       });
   }
 

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

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2019 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * 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 {NgModule} from '@angular/core';
+import {DataModule} from '../data/data.module';
+import {StorageModule} from '../storage/storage.module';
+import {ConfigProvider} from './config.provider';
+
+/**
+ * TODO
+ */
+@NgModule({
+  imports: [StorageModule, DataModule],
+  providers: [ConfigProvider],
+})
+export class ConfigModule {}

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

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

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

@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2022 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {AppError} from '../../_helpers/errors';
+
+/**
+ * Error that is thrown when fetching from backend fails
+ */
+export class ConfigFetchError extends AppError {
+  constructor() {
+    super('ConfigFetchError', 'App configuration could not be fetched!');
+  }
+}
+
+/**
+ * Error that is thrown when the ConfigProvider could be initialised
+ */
+export class ConfigInitError extends AppError {
+  constructor() {
+    super('ConfigInitError', 'App configuration could not be initialised!');
+  }
+}
+
+/**
+ * Error that is thrown when the requested config value is not available
+ */
+export class ConfigValueNotAvailable extends AppError {
+  constructor(valueKey: string) {
+    super('ConfigValueNotAvailable', `No attribute "${valueKey}" in config available!`);
+  }
+}
+
+/**
+ * Error that is thrown when no saved config is available
+ */
+export class SavedConfigNotAvailable extends AppError {
+  constructor() {
+    super('SavedConfigNotAvailable', 'No saved app configuration available.');
+  }
+}
+
+/**
+ * Error that is thrown when the SCVersion of the saved config is not compatible with the app
+ */
+export class WrongConfigVersionInStorage extends AppError {
+  constructor(correctVersion: string, savedVersion: string) {
+    super(
+      'WrongConfigVersionInStorage',
+      `The saved configs backend version ${savedVersion} ` +
+        `does not equal the configured backend version ${correctVersion} of the app.`,
+    );
+  }
+}

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

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

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

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

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

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

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

@@ -18,6 +18,7 @@
     <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,7 +42,6 @@ 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,6 +14,5 @@
   -->
 
 <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/data.module.ts

@@ -102,8 +102,6 @@ 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
@@ -112,7 +110,6 @@ import {NavigateActionChipComponent} from './chips/data/navigate-action-chip.com
   declarations: [
     ActionChipListComponent,
     AddEventActionChipComponent,
-    NavigateActionChipComponent,
     EditEventSelectionComponent,
     AddressDetailComponent,
     CatalogDetailContentComponent,
@@ -197,7 +194,6 @@ import {NavigateActionChipComponent} from './chips/data/navigate-action-chip.com
     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 initialized', () => {
+  it('should get a data item when the view is entered', () => {
-    comp.ngOnInit();
+    comp.ionViewWillEnter();
     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, OnInit, Output, TemplateRef} from '@angular/core';
+import {Component, ContentChild, EventEmitter, Input, Output, TemplateRef} from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
+import {ActivatedRoute} from '@angular/router';
-import {ModalController} from '@ionic/angular';
+import {ModalController, ViewWillEnter} 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 OnInit {
+export class DataDetailComponent implements ViewWillEnter {
   /**
    * The associated item
    *
@@ -84,15 +84,21 @@ export class DataDetailComponent implements OnInit {
     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;
@@ -132,7 +138,10 @@ export class DataDetailComponent implements OnInit {
     }
   }
 
-  async ngOnInit() {
+  /**
+   * Initialize
+   */
+  async ionViewWillEnter() {
     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,22 +37,32 @@ 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 = Promise.resolve([...item.superCatalogs!, item]);
+      this.path = new Promise(resolve =>
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        resolve([...item.superCatalogs!, item]),
+      );
     } else if (item.type === SCThingType.Assessment && item.superAssessments) {
-      this.path = Promise.resolve([...item.superAssessments!, item]);
+      this.path = new Promise(resolve =>
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        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 catalogWithoutReferences = item.catalogs![0];
+        const catalog = await catalogPromise;
-        const catalog =
+        const superCatalogs = catalog.superCatalogs;
-          item.catalogs!.length === 1
-            ? await this.dataProvider.get(catalogWithoutReferences.uid, DataScope.Remote)
-            : this.routeStack.lastDataDetail;
-        const superCatalogs = (catalog as SCCatalog).superCatalogs;
 
         resolve(
           superCatalogs

frontend/app/src/app/modules/data/elements/offers-in-list.component.ts

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

frontend/app/src/app/modules/data/elements/rating.component.ts

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

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

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

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

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

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

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

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/rxjs/pause-when';
+import {pauseWhen} from '../../../util/pause-when';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 /**

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

@@ -15,9 +15,16 @@
 import {Component, DestroyRef, inject, Input, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Keyboard} from '@capacitor/keyboard';
-import {AlertController, AnimationController} from '@ionic/angular';
+import {AlertController, AnimationBuilder, AnimationController} from '@ionic/angular';
 import {Capacitor} from '@capacitor/core';
-import {SCFacet, SCSearchFilter, SCSearchQuery, SCSearchSort, SCThings} from '@openstapps/core';
+import {
+  SCFacet,
+  SCFeatureConfiguration,
+  SCSearchFilter,
+  SCSearchQuery,
+  SCSearchSort,
+  SCThings,
+} from '@openstapps/core';
 import {NGXLogger} from 'ngx-logger';
 import {combineLatest, Subject} from 'rxjs';
 import {debounceTime, distinctUntilChanged, startWith} from 'rxjs/operators';
@@ -26,9 +33,9 @@ import {SettingsProvider} from '../../settings/settings.provider';
 import {DataRoutingService} from '../data-routing.service';
 import {DataProvider} from '../data.provider';
 import {PositionService} from '../../map/position.service';
+import {ConfigProvider} from '../../config/config.provider';
 import {searchPageSwitchAnimation} from './search-page-switch-animation';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
-import {ConfigProvider} from '../../config/config.provider';
 
 /**
  * SearchPageComponent queries things and shows list of things as search results and filter as context menu
@@ -137,8 +144,21 @@ export class SearchPageComponent implements OnInit {
 
   destroy$ = inject(DestroyRef);
 
-  routeAnimation = searchPageSwitchAnimation(inject(AnimationController));
+  routeAnimation: AnimationBuilder;
 
+  /**
+   * Injects the providers and creates subscriptions
+   * @param alertController AlertController
+   * @param dataProvider DataProvider
+   * @param contextMenuService ContextMenuService
+   * @param settingsProvider SettingsProvider
+   * @param logger An angular logger
+   * @param dataRoutingService DataRoutingService
+   * @param router Router
+   * @param route ActivatedRoute
+   * @param positionService PositionService
+   * @param configProvider ConfigProvider
+   */
   constructor(
     protected readonly alertController: AlertController,
     protected dataProvider: DataProvider,
@@ -149,8 +169,11 @@ export class SearchPageComponent implements OnInit {
     protected router: Router,
     private readonly route: ActivatedRoute,
     protected positionService: PositionService,
-    private readonly config: ConfigProvider,
+    private readonly configProvider: ConfigProvider,
-  ) {}
+    animationController: AnimationController,
+  ) {
+    this.routeAnimation = searchPageSwitchAnimation(animationController);
+  }
 
   /**
    * Fetches items with set query configuration
@@ -319,12 +342,13 @@ export class SearchPageComponent implements OnInit {
         .pipe(takeUntilDestroyed(this.destroy$))
         .subscribe(item => {
           if (this.itemRouting) {
-            void this.router.navigate(['/data-detail', item.uid], {state: {item}});
+            void this.router.navigate(['/data-detail', item.uid]);
           }
         });
     }
     try {
-      this.isHebisAvailable = !!this.config.app.features.plugins?.['hebis-plugin']?.urlPath;
+      const features = this.configProvider.getValue('features') as SCFeatureConfiguration;
+      this.isHebisAvailable = !!features.plugins?.['hebis-plugin']?.urlPath;
     } catch (error) {
       this.logger.error(error);
     }

frontend/app/src/app/modules/data/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], {state: {item}});
+        void this.router.navigate(['/data-detail', item.uid]);
       });
   }
 }

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 | async as items; else loading">
+<ng-container *ngIf="items as items; else loading">
   <ion-list>
     <ng-container *ngIf="!listHeader; else header"></ng-container>
-    <ng-container *ngFor="let item of items">
+    <ng-container *ngFor="let item of items | async">
       <ng-container
         *ngTemplateOutlet="listItemTemplateRef || defaultListItem; context: {$implicit: item}"
       ></ng-container>
     </ng-container>
   </ion-list>
-  <ion-label class="empty-list-message" *ngIf="emptyListMessage && items.length === 0"
+  <ion-label class="empty-list-message" *ngIf="emptyListMessage && (items | async)?.length === 0"
     >{{ emptyListMessage }}</ion-label
   >
 </ng-container>

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

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

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

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

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

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

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

@@ -12,18 +12,23 @@
   ~ You should have received a copy of the GNU General Public License along with
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
-<ng-container *ngIf="isInCalendar | async; else add">
+<ion-card>
-  <ion-chip outline="true" color="success" (click)="removeFromCalendar()">
+  <ion-card-header> {{ 'event' | propertyNameTranslate : item | titlecase }} </ion-card-header>
-    <ion-icon name="event_available" fill="true"></ion-icon>
+  <ion-card-content>
-    <ion-label>{{'chips.addEvent.addedToEvents' | translate}}</ion-label>
+    <a [routerLink]="['/data-detail', item.event.uid]">{{ 'name' | thingTranslate : item.event }}</a>
-  </ion-chip>
+  </ion-card-content>
-</ng-container>
+</ion-card>
-<ng-template #add>
+<ion-card *ngIf="item.inPlace">
-  <ion-chip outline="true" color="primary" (click)="addToCalendar()">
+  <ion-card-header> {{ 'inPlace' | propertyNameTranslate : item | titlecase }} </ion-card-header>
-    <ion-icon name="calendar_today"></ion-icon>
+  <ion-card-content>
-    <ion-label>{{'chips.addEvent.addEvent' | translate}}</ion-label>
+    <ion-icon name="pin_drop"> </ion-icon>
-  </ion-chip>
+    <a [routerLink]="['/data-detail', item.inPlace.uid]">{{ 'name' | thingTranslate : item.inPlace }}</a>
-</ng-template>
+    <stapps-address-detail
+      *ngIf="item.inPlace.address"
+      [address]="item.inPlace.address"
+    ></stapps-address-detail>
+  </ion-card-content>
+</ion-card>
 <stapps-simple-card
   title="{{ 'duration' | propertyNameTranslate : item | titlecase }}"
   [content]="[item.duration | amDuration : 'minutes']"
@@ -51,16 +56,3 @@
   [content]="item.performers"
 ></stapps-simple-card>
 <stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
-<ion-card>
-  <ion-card-header> {{ 'event' | propertyNameTranslate : item | titlecase }} </ion-card-header>
-  <ion-card-content>
-    <stapps-data-list-item [item]="$any(item.event)"></stapps-data-list-item>
-  </ion-card-content>
-</ion-card>
-<ion-card *ngIf="item.inPlace">
-  <ion-card-header> {{ 'inPlace' | propertyNameTranslate : item | titlecase }} </ion-card-header>
-  <ion-card-content>
-    <stapps-data-list-item [item]="$any(item.inPlace)"></stapps-data-list-item>
-  </ion-card-content>
-</ion-card>
-<stapps-map-widget *ngIf="item.inPlace?.geo" [place]="item.inPlace"></stapps-map-widget>

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

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

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

@@ -17,7 +17,7 @@
   <ion-row>
     <ion-col>
       <div class="ion-text-wrap">
-        <ion-label class="title">{{ 'event.name' | thingTranslate : item }}</ion-label>
+        <ion-label class="title">{{ 'name' | thingTranslate : item }}</ion-label>
         <p>
           <ion-icon name="calendar_today"></ion-icon>
           <span *ngIf="item.dates[0] && item.dates[item.dates.length - 1]">

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], {state: {item}});
+        void router.navigate(['/data-detail', item.uid]);
       });
   }
 

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

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

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

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

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

@@ -12,11 +12,10 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {PositionService} from '../../../map/position.service';
-import {Observable, timer} from 'rxjs';
+import {interval, Subscription} from 'rxjs';
 import {hasValidLocation, isSCFloor, PlaceTypes, PlaceTypesWithDistance} from './place-types';
-import {map} from 'rxjs/operators';
 
 /**
  * Shows a place as a list item
@@ -25,10 +24,14 @@ import {map} from 'rxjs/operators';
   selector: 'stapps-place-list-item',
   templateUrl: 'place-list-item.html',
   styleUrls: ['place-list-item.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PlaceListItemComponent {
-  _item: PlaceTypesWithDistance;
+  /**
+   * Item getter
+   */
+  get item(): PlaceTypesWithDistance {
+    return this._item;
+  }
 
   /**
    * An item to show (setter is used as there were issues assigning the distance to the right place in a list)
@@ -36,14 +39,24 @@ export class PlaceListItemComponent {
   @Input() set item(item: PlaceTypes) {
     this._item = item;
     if (!isSCFloor(item) && hasValidLocation(item)) {
-      this.distance = timer(0, 10_000).pipe(map(() => this.positionService.getDistance(item.geo.point)));
+      this.distance = this.positionService.getDistance(item.geo.point);
+      this.distanceSubscription = interval(10_000).subscribe(_ => {
+        this.distance = this.positionService.getDistance(item.geo.point);
+      });
     }
   }
 
+  /**
+   * An item to show
+   */
+  private _item: PlaceTypesWithDistance;
+
   /**
    * Distance in meters
    */
-  distance?: Observable<number | undefined>;
+  distance?: number;
+
+  distanceSubscription?: Subscription;
 
   constructor(private positionService: PositionService) {}
 }

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

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

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

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

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

@@ -12,13 +12,21 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, inject, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {AlertController, AnimationController} from '@ionic/angular';
+import {ActivatedRoute, Router} from '@angular/router';
+import {NGXLogger} from 'ngx-logger';
 import {debounceTime, distinctUntilChanged, startWith, take} from 'rxjs/operators';
 import {combineLatest} from 'rxjs';
 import {SCThingType} from '@openstapps/core';
 import {FavoritesService} from './favorites.service';
+import {DataRoutingService} from '../data/data-routing.service';
 import {ContextMenuService} from '../menu/context/context-menu.service';
 import {SearchPageComponent} from '../data/list/search-page.component';
+import {DataProvider} from '../data/data.provider';
+import {SettingsProvider} from '../settings/settings.provider';
+import {PositionService} from '../map/position.service';
+import {ConfigProvider} from '../config/config.provider';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 /**
@@ -34,7 +42,34 @@ export class FavoritesPageComponent extends SearchPageComponent implements OnIni
 
   showNavigation = false;
 
-  favoritesService = inject(FavoritesService);
+  constructor(
+    alertController: AlertController,
+    dataProvider: DataProvider,
+    contextMenuService: ContextMenuService,
+    settingsProvider: SettingsProvider,
+    logger: NGXLogger,
+    dataRoutingService: DataRoutingService,
+    router: Router,
+    route: ActivatedRoute,
+    positionService: PositionService,
+    private favoritesService: FavoritesService,
+    configProvider: ConfigProvider,
+    animationController: AnimationController,
+  ) {
+    super(
+      alertController,
+      dataProvider,
+      contextMenuService,
+      settingsProvider,
+      logger,
+      dataRoutingService,
+      router,
+      route,
+      positionService,
+      configProvider,
+      animationController,
+    );
+  }
 
   ngOnInit() {
     super.ngOnInit(false);
@@ -77,15 +112,12 @@ 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(
+            void this.router.navigate([
-              [
+              'hebis-detail',
-                'hebis-detail',
+              (item.origin && 'originalId' in item.origin && item.origin['originalId']) || '',
-                (item.origin && 'originalId' in item.origin && item.origin['originalId']) || '',
+            ]);
-              ],
-              {state: {item}},
-            );
           } else {
-            void this.router.navigate(['data-detail', item.uid], {state: {item}});
+            void this.router.navigate(['data-detail', item.uid]);
           }
         }
       });

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

@@ -12,11 +12,16 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, inject, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {TranslateService} from '@ngx-translate/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';
 
 /**
@@ -32,10 +37,28 @@ export class DaiaAvailabilityComponent extends DataDetailComponent implements On
 
   holdingsByDepartments?: Map<DaiaHolding['department']['id'], DaiaHolding[]>;
 
-  private daiaDataProvider = inject(DaiaDataProvider);
+  /**
+   *
+   * @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);
+  }
 
   /**
-   * @override
+   * Initialize
    */
   async ngOnInit() {
     const uid = this.route.snapshot.paramMap.get('uid');

frontend/app/src/app/modules/hebis/daia-data.provider.ts

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

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

@@ -107,8 +107,8 @@ describe('HebisDetailComponent', () => {
     expect(HebisDetailComponent.prototype.getItem).toHaveBeenCalledWith(sampleThing.uid, false);
   });
 
-  it('should get a data item when initialized', () => {
+  it('should get a data item when the view is entered', () => {
-    comp.ngOnInit();
+    comp.ionViewWillEnter();
     expect(HebisDetailComponent.prototype.getItem).toHaveBeenCalledWith(sampleThing.uid, false);
   });
 });

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

@@ -12,11 +12,16 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, inject, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {TranslateService} from '@ngx-translate/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
@@ -26,15 +31,33 @@ import {DaiaHolding} from '../protocol/response';
   styleUrls: ['hebis-detail.scss'],
   templateUrl: 'hebis-detail.html',
 })
-export class HebisDetailComponent extends DataDetailComponent implements OnInit {
+export class HebisDetailComponent extends DataDetailComponent {
   holdings: DaiaHolding[];
 
-  private hebisDataProvider = inject(HebisDataProvider);
+  /**
+   *
+   * @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);
+  }
 
   /**
-   * @override
+   * Initialize
    */
-  async ngOnInit() {
+  async ionViewWillEnter() {
     const uid = this.route.snapshot.paramMap.get('uid') || '';
     await this.getItem(uid ?? '', false);
   }
@@ -45,11 +68,9 @@ export class HebisDetailComponent extends DataDetailComponent implements OnInit
    * @param _forceReload Ignore any cached data
    */
   async getItem(uid: SCUuid, _forceReload: boolean) {
-    this.item = await (this.inputItem ??
+    this.hebisDataProvider.hebisSearch({query: uid, page: 0}).then(result => {
-      this.hebisDataProvider.hebisSearch({query: uid, page: 0}).then(
+      // eslint-disable-next-line unicorn/no-null
-        result =>
+      this.item = (result.data && result.data[0]) || null;
-          // 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,12 +13,19 @@
  * 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
@@ -27,7 +34,6 @@ import {DataProvider} from '../../data/data.provider';
   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 {
   /**
@@ -40,6 +46,47 @@ 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)
@@ -56,7 +103,7 @@ export class HebisSearchPageComponent extends SearchPageComponent implements OnI
       searchOptions.query = this.queryText;
     }
 
-    return (this.dataProvider as HebisDataProvider).hebisSearch(searchOptions).then(
+    return this.dataProvider.hebisSearch(searchOptions).then(
       async result => {
         /*this.singleTypeResponse =
           result.facets.find(facet => facet.field === 'type')?.buckets
@@ -129,10 +176,10 @@ export class HebisSearchPageComponent extends SearchPageComponent implements OnI
       .pipe(takeUntilDestroyed(this.destroy$))
       .subscribe(async item => {
         if (this.itemRouting) {
-          void this.router.navigate(
+          void this.router.navigate([
-            ['hebis-detail', (item.origin && 'originalId' in item.origin && item.origin['originalId']) || ''],
+            'hebis-detail',
-            {state: {item}},
+            (item.origin && 'originalId' in item.origin && item.origin['originalId']) || '',
-          );
+          ]);
         }
       });
   }

frontend/app/src/app/modules/library/account/library-account.service.ts

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

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

@@ -1,92 +0,0 @@
-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

@@ -0,0 +1,36 @@
+<!--
+  ~ 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

@@ -0,0 +1,72 @@
+/*!
+ * 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

@@ -0,0 +1,41 @@
+/*
+ * 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

@@ -19,7 +19,9 @@ import {LeafletModule} from '@asymmetrik/ngx-leaflet';
 import {LeafletMarkerClusterModule} from '@asymmetrik/ngx-leaflet-markercluster';
 import {IonicModule} from '@ionic/angular';
 import {TranslateModule} from '@ngx-translate/core';
+import {Polygon} from 'geojson';
 import {ThingTranslateModule} from '../../translation/thing-translate.module';
+import {ConfigProvider} from '../config/config.provider';
 import {DataFacetsProvider} from '../data/data-facets.provider';
 import {DataModule} from '../data/data.module';
 import {DataProvider} from '../data/data.provider';
@@ -27,11 +29,23 @@ 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/map-list-modal.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 {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)
+ * @param configProvider An instance of the ConfigProvider to read the campus polygon from
+ * @param mapProvider An instance of the MapProvider to set the default polygon (area to show on the map)
+ */
+export function initMapConfigFactory(configProvider: ConfigProvider, mapProvider: MapProvider) {
+  return async () => {
+    mapProvider.defaultPolygon = (await configProvider.getValue('campusPolygon')) as Polygon;
+  };
+}
 
 const mapRoutes: Routes = [
   {path: 'map', component: MapPageComponent},
@@ -42,7 +56,7 @@ const mapRoutes: Routes = [
  * Module containing map related stuff
  */
 @NgModule({
-  declarations: [MapPageComponent, MapListModalComponent],
+  declarations: [MapPageComponent, MapListModalComponent, MapSingleModalComponent, MapItemComponent],
   exports: [],
   imports: [
     CommonModule,
@@ -57,8 +71,6 @@ const mapRoutes: Routes = [
     FormsModule,
     ThingTranslateModule,
     UtilModule,
-    GeoNavigationDirective,
-    GeoNavigationDirective,
   ],
   providers: [Geolocation, MapProvider, DataProvider, DataFacetsProvider, StAppsWebHttpClient],
 })

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

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

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

@@ -27,10 +27,8 @@ 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/rxjs/pause-when';
+import {pauseWhen} from '../../../util/pause-when';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
-import {startViewTransition} from '../../../util/view-transition';
-import {ConfigProvider} from '../../config/config.provider';
 
 /**
  * The main page of the map
@@ -102,17 +100,7 @@ export class MapPageComponent implements OnInit {
   /**
    * Options of the leaflet map
    */
-  options: MapOptions = {
+  options: MapOptions;
-    center: geoJSON(inject(ConfigProvider).app.campusPolygon).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
@@ -146,7 +134,20 @@ 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
@@ -157,7 +158,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], {state: {item}});
+          void this.router.navigate(['/data-detail', item.uid]);
         }
       });
     this.positionService
@@ -304,7 +305,6 @@ 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,12 +384,10 @@ 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() {
-    startViewTransition(async () => {
+    this.location.go('/map');
-      this.location.go('/map');
+    await this.fetchAndUpdateItems(this.items.length > 0);
-      await this.fetchAndUpdateItems(this.items.length > 0);
 
-      this.ref.detectChanges();
+    this.ref.detectChanges();
-    });
   }
 
   /**
@@ -416,16 +414,14 @@ export class MapPageComponent implements OnInit {
    * @param uid Uuid of the place
    */
   async showItem(uid: SCUuid) {
-    startViewTransition(async () => {
+    const response = await this.mapProvider.searchPlace(uid);
-      const response = await this.mapProvider.searchPlace(uid);
+    this.items = response.data as SCPlace[];
-      this.items = response.data as SCPlace[];
+    this.distance = this.positionService.getDistance(this.items[0].geo.point);
-      this.distance = this.positionService.getDistance(this.items[0].geo.point);
+    this.addToMap(this.items, true);
-      this.addToMap(this.items, true);
+    this.ref.detectChanges();
-      this.ref.detectChanges();
+    const url = this.router.createUrlTree(['/map', uid]).toString();
-      const url = this.router.createUrlTree(['/map', uid]).toString();
+    this.location.go(url);
-      this.location.go(url);
+    // center the selected place
-      // center the selected place
+    this.focus(geoJSON(this.items[0].geo.point).getBounds().getCenter());
-      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 id="map">
+<ion-content fullscreen 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">
+    <div class="map-buttons above">
       <ion-button
         *ngIf="items.length > 1"
         color="light"
@@ -67,13 +67,7 @@
       >
         <ion-icon name="list"></ion-icon>&nbsp;&nbsp;{{ 'map.page.buttons.SHOW_LIST' | translate }}
       </ion-button>
-      <ion-button
+      <ion-button color="light" shape="round" size="small" (click)="onPositionClick()">
-        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
@@ -86,12 +80,30 @@
         </ng-template>
       </ion-button>
     </div>
-    <ion-card class="map-item">
+    <stapps-map-item *ngIf="items.length === 1" [item]="items[0]" (onClose)="resetView()"></stapps-map-item>
-      <stapps-data-list-item *ngIf="items.length === 1" [item]="$any(items[0])"></stapps-data-list-item>
+  </div>
-      <ion-button fill="clear" class="close" (click)="resetView()">
+  <div class="map-buttons floating-buttons">
-        <ion-icon size="22" name="close" slot="icon-only"></ion-icon>
+    <ion-button
-      </ion-button>
+      *ngIf="items.length > 1"
-    </ion-card>
+      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>
   </div>
 
   <ion-modal [canDismiss]="true" #mapListModal>

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

@@ -12,87 +12,113 @@
  * 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';
 
-$bottom-offset: 7px; // no idea what happened here
+ion-content {
+  // fixes the unexpected issue that the content is not fullscreen (behind the header)
+  position: absolute;
 
-.map-container {
+  div.map-container {
-  width: 100%;
+    position: fixed;
-  height: 100%;
+    width: 100%;
+    height: 100%;
+  }
+
+  & > div {
+    overflow: hidden;
+  }
 }
 
 ion-toolbar:first-of-type {
   padding: 0 var(--spacing-md) var(--spacing-xs);
 }
 
-.floating-content {
+div.map-buttons {
-  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: var(--spacing-md);
+    margin: 4px;
-
-    &.location-button {
-      view-transition-name: location-button;
-    }
   }
 }
 
-.map-item {
+::ng-deep {
-  position: relative;
+  .stapps-location {
-  max-width: 550px;
+    ion-icon {
-  margin: var(--spacing-md);
+      width: 100%;
+      height: 100%;
+      color: #fd435c;
+    }
+  }
 
-  .close {
+  .stapps-device-location {
-    position: absolute;
+    ion-icon {
-    top: 0;
+      width: 100%;
+      height: 100%;
+      color: #4387fd;
+    }
+  }
+
+  div.floating-content {
+    position: fixed;
+    z-index: 1000;
     right: 0;
-  }
+    bottom: 0;
+    left: 0;
 
-  ::ng-deep ion-item {
+    display: block;
-    margin: 0;
+    justify-content: center;
-  }
-}
 
-@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%;
-    max-width: unset;
+    padding: 0 var(--spacing-md) 8vh;
-    margin: 0;
 
-    border-bottom-right-radius: 0;
+    ion-card {
-    border-bottom-left-radius: 0;
+      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;
   }
 }