feat: improve cross-uni app workflow

Closes #214

.changeset/cold-years-listen.md

@@ -0,0 +1,5 @@
+---
+"@openstapps/easy-ast": patch
+---
+
+Fixed docs generation

.changeset/rich-rats-guess.md

@@ -0,0 +1,5 @@
+---
+"@openstapps/backend": patch
+---
+
+fix for geo.point mapping

.syncpackrc.cjs

@@ -2,7 +2,13 @@
 
 /** @type {import('syncpack').RcFile} */
 const config = {
-  semverGroups: [{range: ''}],
+  semverGroups: [
+    {
+      range: '',
+      dependencies: ['**'],
+      packages: ['**'],
+    }
+  ],
   source: ['package.json', '**/package.json'],
   indent: '  ',
   sortFirst: [
@@ -20,6 +26,7 @@ const config = {
     'types',
     'bin',
     'files',
+    'builders',
     'engines',
     'scripts',
     'dependencies',

backend/backend/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @openstapps/backend
 
+## 3.3.0
+
+### Minor Changes
+
+- 688bc5f2: v3.3.0 changes
+
+### Patch Changes
+
+- Updated dependencies [688bc5f2]
+  - @openstapps/core@3.3.0
+  - @openstapps/core-tools@3.3.0
+  - @openstapps/logger@3.0.0
+
 ## 3.2.0
 
 ### Minor Changes

backend/backend/config/f-u/version-history/2.5.0.de.md

@@ -0,0 +1,15 @@
+# Goethe-Uni App 2.5
+
+Die Goethe-Uni App ist noch besser geworden!
+
+## Komplett neue Kartenansicht
+
+Wir haben die Karte überarbeitet, um eine klarere und schnellere Übersicht zu bieten.
+
+## Deutschlandticket mit an Bord
+
+Wenn du das Upgrade des Semesterticket zum Deutschlandticket gemacht hast und eingeloggt bist, findet es sich jetzt auch in der App.
+
+## Bibliotheksdienste sind wieder voll funktionsfähig
+
+Aufgrund einiger Adhoc-Änderungen im Bibliothekssystem haben wir die App so angepasst, dass sie damit umgehen kann.

backend/backend/config/f-u/version-history/2.5.0.en.md

@@ -0,0 +1,15 @@
+# Goethe-Uni App 2.5
+
+The Goethe-Uni App got even better!
+
+## Completely new map view
+
+We overhauled the map to offer you a clearer and faster and overview.
+
+## Deutschlandticket included
+
+If you upgraded your Semesterticket to a Deutschlandticket it will now reside in the App if you are logged in.
+
+## Library services are fully functional again
+
+Due to some adhoc changes in the library system we adjusted the app to handle them properly.

backend/backend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/backend",
   "description": "A reference implementation for a StApps backend",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "private": true,
   "type": "module",
   "license": "AGPL-3.0-only",

backend/backend/src/storage/database.ts

@@ -13,15 +13,34 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
-import {SCConfigFile, SCSearchQuery, SCSearchResponse, SCThings, SCUuid} from '@openstapps/core';
+import {
+  SCConfigFile,
+  SCPlace,
+  SCPlaceWithoutReferences,
+  SCSearchQuery,
+  SCSearchResponse,
+  SCThingWithCategoriesWithoutReferences,
+  SCThings,
+  SCUuid,
+} from '@openstapps/core';
 import {MailQueue} from '../notification/mail-queue.js';
 import {Bulk} from './bulk-storage.js';
+import {FeatureCollection, Point, Polygon} from 'geojson';
 
 /**
  * Creates an instance of a database
  */
 export type DatabaseConstructor = new (config: SCConfigFile, mailQueue?: MailQueue) => Database;
 
+export type SupplementaryGeoJSON = FeatureCollection<Point | Polygon, SupplementaryGeoJSONThing>;
+export type SupplementaryGeoJSONThing = Pick<
+  Extract<SCThings, SCPlace>,
+  Exclude<
+    keyof SCPlaceWithoutReferences | keyof SCThingWithCategoriesWithoutReferences<never, never>,
+    'geo' | 'origin' | 'translations'
+  >
+>;
+
 /**
  * Defines what one database class needs to have defined
  */
@@ -82,4 +101,9 @@ export interface Database {
    * @param params Parameters which form a search query to search the backend data
    */
   search(parameters: SCSearchQuery): Promise<SCSearchResponse>;
+
+  /**
+   * Get geo info for display on a map
+   */
+  geo(): Promise<SupplementaryGeoJSON>;
 }

backend/backend/src/storage/elasticsearch/elasticsearch.ts

@@ -26,7 +26,7 @@ import {Logger} from '@openstapps/logger';
 import moment from 'moment';
 import {MailQueue} from '../../notification/mail-queue.js';
 import {Bulk} from '../bulk-storage.js';
-import {Database} from '../database.js';
+import {Database, SupplementaryGeoJSON, SupplementaryGeoJSONThing} from '../database.js';
 import {parseAggregations} from './aggregations.js';
 import * as Monitoring from './monitoring.js';
 import {buildQuery} from './query/query.js';
@@ -46,6 +46,7 @@ import {
 } from './util/index.js';
 import {noUndefined} from './util/no-undefined.js';
 import {retryCatch, RetryOptions} from './util/retry.js';
+import {Feature, Point, Polygon} from 'geojson';
 
 /**
  * A database interface for elasticsearch
@@ -405,4 +406,49 @@ export class Elasticsearch implements Database {
       },
     };
   }
+
+  async geo(): Promise<SupplementaryGeoJSON> {
+    const searchResponse = await this.client.search<Extract<SCThings, {geo: unknown}>>({
+      body: {
+        query: {
+          exists: {
+            field: 'geo',
+          },
+        },
+      },
+      from: 0,
+      allow_no_indices: true,
+      index: ACTIVE_INDICES_ALIAS,
+      size: 1,
+    });
+
+    return {
+      type: 'FeatureCollection',
+      features: searchResponse.hits.hits
+        .map(thing => {
+          return thing._source?.geo
+            ? ({
+                id: Number(thing._source.identifiers?.['OSM']) || undefined,
+                type: 'Feature',
+                geometry: thing._source.geo.polygon ?? thing._source.geo.point,
+                properties: {
+                  name: thing._source.name,
+                  sameAs: thing._source.sameAs,
+                  image: thing._source.image,
+                  alternateNames: thing._source.alternateNames,
+                  description: thing._source.description,
+                  identifiers: thing._source.identifiers,
+                  categories: thing._source.categories,
+                  categorySpecificValues: thing._source.categorySpecificValues,
+                  openingHours: thing._source.openingHours,
+                  address: thing._source.address,
+                  uid: thing._source.uid,
+                  type: thing._source.type,
+                },
+              } satisfies Feature<Polygon | Point, SupplementaryGeoJSONThing>)
+            : undefined;
+        })
+        .filter(noUndefined),
+    };
+  }
 }

backend/backend/src/storage/elasticsearch/query/filters/distance.ts

@@ -25,7 +25,7 @@ export function buildDistanceFilter(
 ): QueryDslSpecificQueryContainer<'geo_distance'> {
   const geoObject: QueryDslGeoDistanceQuery = {
     distance: `${filter.arguments.distance}m`,
-    [`${filter.arguments.field}.point.coordinates`]: {
+    [`${filter.arguments.field}.point`]: {
       lat: filter.arguments.position[1],
       lon: filter.arguments.position[0],
     },

backend/backend/src/storage/elasticsearch/query/filters/geo.ts

@@ -19,14 +19,29 @@ import {QueryDslSpecificQueryContainer} from '../../types/util.js';
  * Converts a geo filter to elasticsearch syntax
  * @param filter A search filter for the retrieval of the data
  */
-export function buildGeoFilter(filter: SCGeoFilter): QueryDslSpecificQueryContainer<'geo_shape'> {
+export function buildGeoFilter(filter: SCGeoFilter): QueryDslSpecificQueryContainer<'bool'> {
   return {
-    geo_shape: {
-      ignore_unmapped: true,
-      [`${filter.arguments.field}.polygon`]: {
-        shape: filter.arguments.shape,
-        relation: filter.arguments.spatialRelation,
-      },
+    bool: {
+      should: [
+        {
+          geo_shape: {
+            ignore_unmapped: true,
+            [`${filter.arguments.field}.polygon`]: {
+              shape: filter.arguments.shape,
+              relation: filter.arguments.spatialRelation,
+            },
+          },
+        } satisfies QueryDslSpecificQueryContainer<'geo_shape'>,
+        {
+          geo_shape: {
+            ignore_unmapped: true,
+            [`${filter.arguments.field}.point`]: {
+              shape: filter.arguments.shape,
+              relation: filter.arguments.spatialRelation,
+            },
+          },
+        } satisfies QueryDslSpecificQueryContainer<'geo_shape'>,
+      ],
     },
   };
 }

backend/backend/src/storage/elasticsearch/query/sort/distance.ts

@@ -25,7 +25,7 @@ export function buildDistanceSort(sort: SCDistanceSort): SortOptions {
       mode: 'avg',
       order: sort.order,
       unit: 'm',
-      [`${sort.arguments.field}.point.coordinates`]: {
+      [`${sort.arguments.field}.point`]: {
         lat: sort.arguments.position[1],
         lon: sort.arguments.position[0],
       },

backend/backend/test/common.ts

@@ -22,7 +22,7 @@ import http from 'http';
 import {MailQueue} from '../src/notification/mail-queue.js';
 import {Bulk, BulkStorage} from '../src/storage/bulk-storage.js';
 import getPort from 'get-port';
-import {Database} from '../src/storage/database.js';
+import {Database, SupplementaryGeoJSON} from '../src/storage/database.js';
 import {v4} from 'uuid';
 import {backendConfig} from '../src/config.js';
 import {getIndexUID} from '../src/storage/elasticsearch/util/index.js';
@@ -58,7 +58,6 @@ export async function startApp(): Promise<Express> {
  * An elasticsearch mock
  */
 export class ElasticsearchMock implements Database {
-  // @ts-expect-error never read
   private bulk: Bulk | undefined;
 
   private storageMock = new Map<string, SCThings>();
@@ -67,6 +66,10 @@ export class ElasticsearchMock implements Database {
     // Nothing to do here
   }
 
+  geo(): Promise<SupplementaryGeoJSON> {
+    throw new Error('Method not implemented.');
+  }
+
   bulkCreated(bulk: Bulk): Promise<void> {
     this.bulk = bulk;
     return Promise.resolve(undefined);

backend/backend/test/routes/search-route.spec.ts

@@ -44,7 +44,6 @@ describe('Search route', async function () {
   });
 
   it('should reject GET, PUT with a valid search query', async function () {
-    // const expectedParams = JSON.parse(JSON.stringify(defaultParams));
     const {status} = await testApp.get('/search').set('Accept', 'application/json').send({
       query: 'Some search terms',
     });

backend/backend/test/storage/elasticsearch/query.spec.ts

@@ -466,7 +466,7 @@ describe('Query', function () {
       const expectedFilter: QueryDslSpecificQueryContainer<'geo_distance'> = {
         geo_distance: {
           'distance': '1000m',
-          'geo.point.coordinates': {
+          'geo.point': {
             lat: 8.123,
             lon: 50.123,
           },
@@ -479,18 +479,39 @@ describe('Query', function () {
     it('should build geo filter for shapes and points', function () {
       const filter = buildFilter(searchFilters.geoPoint);
       const expectedFilter = {
-        geo_shape: {
-          'geo.polygon': {
-            relation: undefined,
-            shape: {
-              type: 'envelope',
-              coordinates: [
-                [50.123, 8.123],
-                [50.123, 8.123],
-              ],
+        bool: {
+          should: [
+            {
+              geo_shape: {
+                'geo.polygon': {
+                  relation: undefined,
+                  shape: {
+                    coordinates: [
+                      [50.123, 8.123],
+                      [50.123, 8.123],
+                    ],
+                    type: 'envelope',
+                  },
+                },
+                'ignore_unmapped': true,
+              },
             },
-          },
-          'ignore_unmapped': true,
+            {
+              geo_shape: {
+                'geo.point': {
+                  relation: undefined,
+                  shape: {
+                    coordinates: [
+                      [50.123, 8.123],
+                      [50.123, 8.123],
+                    ],
+                    type: 'envelope',
+                  },
+                },
+                'ignore_unmapped': true,
+              },
+            },
+          ],
         },
       };
 
@@ -500,18 +521,39 @@ describe('Query', function () {
     it('should build geo filter for shapes only', function () {
       const filter = buildFilter(searchFilters.geoShape);
       const expectedFilter = {
-        geo_shape: {
-          'geo.polygon': {
-            relation: 'contains',
-            shape: {
-              type: 'envelope',
-              coordinates: [
-                [50.123, 8.123],
-                [50.123, 8.123],
-              ],
+        bool: {
+          should: [
+            {
+              geo_shape: {
+                'geo.polygon': {
+                  relation: 'contains',
+                  shape: {
+                    coordinates: [
+                      [50.123, 8.123],
+                      [50.123, 8.123],
+                    ],
+                    type: 'envelope',
+                  },
+                },
+                'ignore_unmapped': true,
+              },
             },
-          },
-          'ignore_unmapped': true,
+            {
+              geo_shape: {
+                'geo.point': {
+                  relation: 'contains',
+                  shape: {
+                    coordinates: [
+                      [50.123, 8.123],
+                      [50.123, 8.123],
+                    ],
+                    type: 'envelope',
+                  },
+                },
+                'ignore_unmapped': true,
+              },
+            },
+          ],
         },
       };
 
@@ -594,7 +636,7 @@ describe('Query', function () {
           'mode': 'avg',
           'order': 'desc',
           'unit': 'm',
-          'geo.point.coordinates': {
+          'geo.point': {
             lat: 50.123,
             lon: 8.123,
           },

configuration/tsconfig/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @openstapps/tsconfig
 
+## 3.3.0
+
+### Minor Changes
+
+- 688bc5f2: v3.3.0 changes
+
 ## 3.0.0
 
 ### Major Changes
@@ -30,7 +36,7 @@
 
   ```js
   #!/usr/bin/env node
-  import './lib/app.js';
+  import "./lib/app.js";
   ```
 
 - 64caebaf: Migrate to ESM
@@ -105,7 +111,7 @@
 
   ```js
   #!/usr/bin/env node
-  import './lib/app.js';
+  import "./lib/app.js";
   ```
 
 - 64caebaf: Migrate to ESM

configuration/tsconfig/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/tsconfig",
   "description": "The tsconfig for the openstapps project",
-  "version": "3.0.0",
+  "version": "3.3.0",
   "type": "commonjs",
   "license": "GPL-3.0-only",
   "repository": "git@gitlab.com:openstapps/eslint-config.git",

configuration/tsconfig/tsconfig.json

@@ -19,15 +19,21 @@
     "allowSyntheticDefaultImports": true,
     "noImplicitAny": true,
     "noImplicitReturns": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     "outDir": "../../../lib/",
-    "lib": ["ES2022", "DOM"],
+    "lib": [
+      "ES2022",
+      "DOM"
+    ],
     "strict": true,
     "target": "ES2022"
   },
   "ts-node": {
     "transpileOnly": true
   },
-  "exclude": ["../../../app.js", "../../../lib/"]
+  "exclude": [
+    "../../../app.js",
+    "../../../lib/"
+  ]
 }

examples/minimal-connector/CHANGELOG.md

@@ -1,12 +1,21 @@
 # @openstapps/minimal-connector
 
+## 3.3.0
+
+### Patch Changes
+
+- Updated dependencies [688bc5f2]
+  - @openstapps/api@3.3.0
+  - @openstapps/core@3.3.0
+  - @openstapps/logger@3.0.0
+
 ## 3.2.0
 
 ### Patch Changes
 
 - Updated dependencies [912ae422]
-  - @openstapps/core@4.0.0
-  - @openstapps/api@4.0.0
+  - @openstapps/core@3.2.0
+  - @openstapps/api@3.2.0
   - @openstapps/logger@3.0.0
 
 ## 3.1.1

examples/minimal-connector/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/minimal-connector",
   "description": "This is a minimal connector which serves as an example",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "private": true,
   "type": "module",
   "license": "GPL-3.0-only",

examples/minimal-plugin/CHANGELOG.md

@@ -1,13 +1,24 @@
 # @openstapps/minimal-plugin
 
+## 3.3.0
+
+### Patch Changes
+
+- Updated dependencies [688bc5f2]
+  - @openstapps/api@3.3.0
+  - @openstapps/core@3.3.0
+  - @openstapps/api-plugin@3.3.0
+  - @openstapps/core-tools@3.3.0
+  - @openstapps/logger@3.0.0
+
 ## 3.2.0
 
 ### Patch Changes
 
 - Updated dependencies [912ae422]
-  - @openstapps/core@4.0.0
-  - @openstapps/api@4.0.0
-  - @openstapps/api-plugin@4.0.0
+  - @openstapps/core@3.2.0
+  - @openstapps/api@3.2.0
+  - @openstapps/api-plugin@3.2.0
   - @openstapps/core-tools@3.0.0
   - @openstapps/logger@3.0.0
 

examples/minimal-plugin/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/minimal-plugin",
   "description": "Minimal Plugin",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "private": true,
   "type": "module",
   "license": "GPL-3.0-only",

flake.lock

@@ -5,11 +5,11 @@
         "systems": "systems"
       },
       "locked": {
-        "lastModified": 1701680307,
-        "narHash": "sha256-kAuep2h5ajznlPMD9rnQyffWG8EM/C73lejGofXvdM8=",
+        "lastModified": 1709126324,
+        "narHash": "sha256-q6EQdSeUZOG26WelxqkmR7kArjgWCdw5sfJVHPH/7j8=",
         "owner": "numtide",
         "repo": "flake-utils",
-        "rev": "4022d587cbbfd70fe950c1e2083a02621806a725",
+        "rev": "d465f4819400de7c8d874d50b982301f28a84605",
         "type": "github"
       },
       "original": {
@@ -20,11 +20,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1701626906,
-        "narHash": "sha256-ugr1QyzzwNk505ICE4VMQzonHQ9QS5W33xF2FXzFQ00=",
+        "lastModified": 1709747860,
+        "narHash": "sha256-RT4zuBy579m+l8VyIQFOR66WXfcs4g1jntZUHjh6eoI=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "0c6d8c783336a59f4c59d4a6daed6ab269c4b361",
+        "rev": "58ae79ea707579c40102ddf62d84b902a987c58b",
         "type": "github"
       },
       "original": {

flake.nix

@@ -28,6 +28,7 @@
                 hash = "sha256-9o0nprGcJhudS1LNm+T7Vf0Dwd1RBauYKI+w1FBQ3ZM=";
               };
             });
+            nodejs = prev.nodejs_18;
           })
         ];
         config = {
@@ -49,21 +50,16 @@
       devShell = pkgs.mkShell rec {
         nativeBuildInputs = [androidFhs];
         buildInputs = with pkgs; [
-          nodejs-18_x
-          nodePackages.pnpm
+          nodejs
+          corepack
           # tools
           curl
           jq
           fontMin
-          # browsers
-          firefox
-          google-chrome
-          epiphany # Safari-ish browser
           cypress
           # android
           jdk17
           android.androidsdk
-          musl
         ];
         ANDROID_JAVA_HOME = "${pkgs.jdk.home}";
         ANDROID_SDK_ROOT = "${pkgs.android.androidsdk}/libexec/android-sdk";

frontend/app/.iconsrc.json

@@ -0,0 +1,25 @@
+{
+  "inputPath": "node_modules/material-symbols/material-symbols-rounded.woff2",
+  "outputPath": "src/assets/icons.min.woff2",
+  "htmlGlob": "src/**/*.html",
+  "scriptGlob": "src/**/*.ts",
+  "additionalIcons": {
+    "about": ["copyright", "campaign", "policy", "description", "text_snippet"],
+    "navigation": [
+      "home",
+      "newspaper",
+      "search",
+      "calendar_month",
+      "local_cafe",
+      "local_library",
+      "inventory_2",
+      "map",
+      "grade",
+      "account_circle",
+      "settings",
+      "info",
+      "rate_review",
+      "work"
+    ]
+  }
+}

frontend/app/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @openstapps/app
 
+## 3.3.0
+
+### Minor Changes
+
+- 688bc5f2: v3.3.0 changes
+
+### Patch Changes
+
+- Updated dependencies [688bc5f2]
+  - @openstapps/api@3.2.0
+  - @openstapps/core@3.2.0
+  - @openstapps/collection-utils@3.0.0
+
 ## 3.2.0
 
 ### Patch Changes

frontend/app/ICONS.md

@@ -50,11 +50,11 @@ the config file.
 Icon font minification is done automatically, but requires you to
 follow a few simple rules:
 
-1. Use the tagged template literal for referencing icon names in
+1. Use the type-safe proxy for referencing icon names in
    TypeScript files and code
 
 ```ts
-SCIcon`icon_name`;
+SCIcon.icon_name;
 ```
 
 2. When using `ion-icon` in HTML, reference either icons that went through

frontend/app/README.md

@@ -13,25 +13,25 @@ The StApps 1.x.x (legacy app, but current app in stores) is written using Ionic
 
 There are (`npm`) scripts defined to get the app running as quickly as possible. Those scripts (shortcuts for docker commands) are called using the syntax `npm run + <script-name>`. So we have the following commands available:
 
-```
+```sh
 npm run docker:pull
 ```
 
 which pulls the up-to-date image ([Dockerfile](Dockerfile)) which contains all the tools needed for building, serving and deploying the app.
 
-```
+```sh
 npm run docker:enter
 ```
 
 which enters the container on docker builder image, where we can run `npm install` (to install the required npm packages) and `npm build` (to build the app: convert into executable files), but also any other arbitrary commands with the tools available in the docker image.
 
-```
+```sh
 npm run docker:build
 ```
 
 which runs `npm install` (to install the required npm packages) and `npm build` (to build the app: convert into executable files) in the docker container which runs on the docker builder image.
 
-```
+```sh
 npm run docker:serve
 ```
 
@@ -39,7 +39,7 @@ which serves the app for running it in the browser. It basically runs `ionic ser
 
 ## How to build and start the app using the default backend?
 
-```
+```sh
 npm run build
 npm run start
 ```
@@ -86,52 +86,98 @@ addToIonicDB(
 
 You'll need to run _Chromium_ using
 
-```shell
+```sh
 pnpm chromium:no-cors
 ```
 
 ### Help, I can't log in!
 
 Login services will often block hosts not coming from the production
-server. You can circumvent this locally by using the `:virtual-host`
-scripts:
+server.
 
-```shell
+#### Web
+
+On the web you can circumvent this locally by using the `:virtual-host` scripts:
+
+```sh
 # Start the dev server on mobile.app.uni-frankfurt.de
 pnpm start:virtual-host
 # Run chromium with flags that redirect mobile.app.uni-frankfurt.de to localhost:8100
 pnpm chromium:virtual-host
 ```
 
+#### Android
+
+On Android you will need to change the `custom_url_scheme` values
+to `de.unifrankfurt.app` in the following files:
+
+- `android/app/src/main/res/values/strings.xml`
+- `src/environment/environment.ts`
+
+Then start the app normally as you would
+
+```sh
+pnpm run:android
+```
+
+**This alone will not make auth work**, only the login flow.
+
+If you need to test login, you have to disable live reload:
+
+```sh
+pnpm ionic capacitor run android
+```
+
+_**CAUTION:** a remote chrome debugging session can in some
+cases hijack the device's ADB connection. If the connection
+fails for no obvious reason, close chrome and uninstall the
+app, then try again._
+
+#### iOS
+
+On Android you will need to change the `custom_url_scheme` value in
+`src/environment/environment.ts` as well as the `CFBundleURLTypes`
+in `ios/App/App/Info.plist`.
+
+- make sure to remove any `Info.plist.orig` as capacitor might override
+  the modified `Info.plist` with that.
+- make sure you have a valid device in XCode (Simulator or real device).
+
+After that, run
+
+```sh
+pnpm run:ios
+```
+
 ### Running the app
 
 Install the npm packages needed for running the app (as for any other node project which uses npm):
 
-```
+```sh
 npm install
 ```
 
 Check the code for linter issues:
 
-```
+```sh
 npm run lint
 ```
 
 Automatically fix linter issues (those where autofix is possible):
 
-```
+```sh
 npm run lint:fix
 ```
 
 Build the app (transpile etc.):
 
-```
+```sh
 npm run build
 ```
 
 Open the app in the browser:
 
-```
+```sh
 ionic serve
 ```
 
@@ -139,7 +185,7 @@ ionic serve
 
 Run the app for testing on an android device (with live reload in the webview / device, when files are changed):
 
-```
+```sh
 npm run build # if needed
 npm run resources:android # generate needed resources (icons and splashscreens)
 npm run docker:run:android # runs "ionic capacitor run android --livereload --external" on a selected device
@@ -159,7 +205,7 @@ Besides that, it is possible to monitor processes (and so the processes related
 
 Build the (debug) app for testing on an android device (creates an APK file in the android's build outputs path):
 
-```
+```sh
 npm run docker:build:android
 ```
 
@@ -169,13 +215,13 @@ The mentioned `docker:*:android` npm commands are executed in a docker container
 
 Execute unit tests:
 
-```
+```sh
 npm test
 ```
 
 Execute e2e tests:
 
-```
+```sh
 npm run e2e
 ```
 

frontend/app/android/app/build.gradle

@@ -16,11 +16,32 @@ android {
             ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
         }
     }
+
+    flavorDimensions 'uni'
+    productFlavors {
+        file('../../config').eachDir {
+            def config = new groovy.json.JsonSlurper().parseText(file("$it/default.json").text)
+            "${it.name}" {
+                dimension 'uni'
+                applicationId config.android.packageName
+                versionName config.appMarketingVersion
+                resValue 'string', 'app_name', config.appName
+                resValue 'string', 'title_activity_main', config.appName
+                resValue 'string', 'package_name', config.android.packageName
+                resValue 'string', 'custom_url_scheme', config.appUrlScheme
+                resValue 'string', 'app_host', config.appLinkHost
+            }
+        }
+    }
+
     buildTypes {
         release {
             minifyEnabled false
             proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
         }
+        debug {
+            applicationIdSuffix ".debug"
+        }
     }
 }
 

frontend/app/android/app/capacitor.build.gradle

@@ -9,6 +9,7 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
+    implementation project(':capacitor-community-screen-brightness')
     implementation project(':capacitor-app')
     implementation project(':capacitor-browser')
     implementation project(':capacitor-clipboard')
@@ -21,6 +22,7 @@ dependencies {
     implementation project(':capacitor-local-notifications')
     implementation project(':capacitor-network')
     implementation project(':capacitor-preferences')
+    implementation project(':capacitor-screen-orientation')
     implementation project(':capacitor-share')
     implementation project(':capacitor-splash-screen')
     implementation project(':transistorsoft-capacitor-background-fetch')

frontend/app/android/app/src/main/assets/capacitor.plugins.json

@@ -1,4 +1,8 @@
 [
+	{
+		"pkg": "@capacitor-community/screen-brightness",
+		"classpath": "com.elylucas.capscreenbrightness.ScreenBrightnessPlugin"
+	},
 	{
 		"pkg": "@capacitor/app",
 		"classpath": "com.capacitorjs.plugins.app.AppPlugin"
@@ -47,6 +51,10 @@
 		"pkg": "@capacitor/preferences",
 		"classpath": "com.capacitorjs.plugins.preferences.PreferencesPlugin"
 	},
+	{
+		"pkg": "@capacitor/screen-orientation",
+		"classpath": "com.capacitorjs.plugins.screenorientation.ScreenOrientationPlugin"
+	},
 	{
 		"pkg": "@capacitor/share",
 		"classpath": "com.capacitorjs.plugins.share.SharePlugin"

frontend/app/android/capacitor.settings.gradle

@@ -1,51 +1,57 @@
 // DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
 include ':capacitor-android'
-project(':capacitor-android').projectDir = new File('../../../node_modules/.pnpm/@capacitor+android@5.5.0_@capacitor+core@5.5.0/node_modules/@capacitor/android/capacitor')
+project(':capacitor-android').projectDir = new File('../../../node_modules/.pnpm/@capacitor+android@5.7.3_@capacitor+core@5.7.3/node_modules/@capacitor/android/capacitor')
+
+include ':capacitor-community-screen-brightness'
+project(':capacitor-community-screen-brightness').projectDir = new File('../../../node_modules/.pnpm/@capacitor-community+screen-brightness@6.0.0_@capacitor+core@5.7.3/node_modules/@capacitor-community/screen-brightness/android')
 
 include ':capacitor-app'
-project(':capacitor-app').projectDir = new File('../../../node_modules/.pnpm/@capacitor+app@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/app/android')
+project(':capacitor-app').projectDir = new File('../../../node_modules/.pnpm/@capacitor+app@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/app/android')
 
 include ':capacitor-browser'
-project(':capacitor-browser').projectDir = new File('../../../node_modules/.pnpm/@capacitor+browser@5.1.0_@capacitor+core@5.5.0/node_modules/@capacitor/browser/android')
+project(':capacitor-browser').projectDir = new File('../../../node_modules/.pnpm/@capacitor+browser@5.2.0_@capacitor+core@5.7.3/node_modules/@capacitor/browser/android')
 
 include ':capacitor-clipboard'
-project(':capacitor-clipboard').projectDir = new File('../../../node_modules/.pnpm/@capacitor+clipboard@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/clipboard/android')
+project(':capacitor-clipboard').projectDir = new File('../../../node_modules/.pnpm/@capacitor+clipboard@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/clipboard/android')
 
 include ':capacitor-device'
-project(':capacitor-device').projectDir = new File('../../../node_modules/.pnpm/@capacitor+device@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/device/android')
+project(':capacitor-device').projectDir = new File('../../../node_modules/.pnpm/@capacitor+device@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/device/android')
 
 include ':capacitor-dialog'
-project(':capacitor-dialog').projectDir = new File('../../../node_modules/.pnpm/@capacitor+dialog@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/dialog/android')
+project(':capacitor-dialog').projectDir = new File('../../../node_modules/.pnpm/@capacitor+dialog@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/dialog/android')
 
 include ':capacitor-filesystem'
-project(':capacitor-filesystem').projectDir = new File('../../../node_modules/.pnpm/@capacitor+filesystem@5.1.4_@capacitor+core@5.5.0/node_modules/@capacitor/filesystem/android')
+project(':capacitor-filesystem').projectDir = new File('../../../node_modules/.pnpm/@capacitor+filesystem@5.2.1_@capacitor+core@5.7.3/node_modules/@capacitor/filesystem/android')
 
 include ':capacitor-geolocation'
-project(':capacitor-geolocation').projectDir = new File('../../../node_modules/.pnpm/@capacitor+geolocation@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/geolocation/android')
+project(':capacitor-geolocation').projectDir = new File('../../../node_modules/.pnpm/@capacitor+geolocation@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/geolocation/android')
 
 include ':capacitor-haptics'
-project(':capacitor-haptics').projectDir = new File('../../../node_modules/.pnpm/@capacitor+haptics@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/haptics/android')
+project(':capacitor-haptics').projectDir = new File('../../../node_modules/.pnpm/@capacitor+haptics@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/haptics/android')
 
 include ':capacitor-keyboard'
-project(':capacitor-keyboard').projectDir = new File('../../../node_modules/.pnpm/@capacitor+keyboard@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/keyboard/android')
+project(':capacitor-keyboard').projectDir = new File('../../../node_modules/.pnpm/@capacitor+keyboard@5.0.8_@capacitor+core@5.7.3/node_modules/@capacitor/keyboard/android')
 
 include ':capacitor-local-notifications'
-project(':capacitor-local-notifications').projectDir = new File('../../../node_modules/.pnpm/@capacitor+local-notifications@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/local-notifications/android')
+project(':capacitor-local-notifications').projectDir = new File('../../../node_modules/.pnpm/@capacitor+local-notifications@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/local-notifications/android')
 
 include ':capacitor-network'
-project(':capacitor-network').projectDir = new File('../../../node_modules/.pnpm/@capacitor+network@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/network/android')
+project(':capacitor-network').projectDir = new File('../../../node_modules/.pnpm/@capacitor+network@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/network/android')
 
 include ':capacitor-preferences'
-project(':capacitor-preferences').projectDir = new File('../../../node_modules/.pnpm/@capacitor+preferences@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/preferences/android')
+project(':capacitor-preferences').projectDir = new File('../../../node_modules/.pnpm/@capacitor+preferences@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/preferences/android')
+
+include ':capacitor-screen-orientation'
+project(':capacitor-screen-orientation').projectDir = new File('../../../node_modules/.pnpm/@capacitor+screen-orientation@6.0.0_@capacitor+core@5.7.3/node_modules/@capacitor/screen-orientation/android')
 
 include ':capacitor-share'
-project(':capacitor-share').projectDir = new File('../../../node_modules/.pnpm/@capacitor+share@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/share/android')
+project(':capacitor-share').projectDir = new File('../../../node_modules/.pnpm/@capacitor+share@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/share/android')
 
 include ':capacitor-splash-screen'
-project(':capacitor-splash-screen').projectDir = new File('../../../node_modules/.pnpm/@capacitor+splash-screen@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/splash-screen/android')
+project(':capacitor-splash-screen').projectDir = new File('../../../node_modules/.pnpm/@capacitor+splash-screen@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/splash-screen/android')
 
 include ':transistorsoft-capacitor-background-fetch'
-project(':transistorsoft-capacitor-background-fetch').projectDir = new File('../../../node_modules/.pnpm/@transistorsoft+capacitor-background-fetch@5.1.1_@capacitor+core@5.5.0/node_modules/@transistorsoft/capacitor-background-fetch/android')
+project(':transistorsoft-capacitor-background-fetch').projectDir = new File('../../../node_modules/.pnpm/@transistorsoft+capacitor-background-fetch@5.2.0_@capacitor+core@5.7.3/node_modules/@transistorsoft/capacitor-background-fetch/android')
 
 include ':capacitor-secure-storage-plugin'
-project(':capacitor-secure-storage-plugin').projectDir = new File('../../../node_modules/.pnpm/capacitor-secure-storage-plugin@0.9.0_@capacitor+core@5.5.0/node_modules/capacitor-secure-storage-plugin/android')
+project(':capacitor-secure-storage-plugin').projectDir = new File('../../../node_modules/.pnpm/capacitor-secure-storage-plugin@0.9.0_@capacitor+core@5.7.3/node_modules/capacitor-secure-storage-plugin/android')

frontend/app/angular.json

@@ -11,7 +11,7 @@
       "schematics": {},
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@openstapps/angular-builder:application",
           "options": {
             "outputPath": "www",
             "index": "src/index.html",
@@ -21,10 +21,13 @@
             "allowedCommonJsDependencies": [
               "moment",
               "opening_hours",
-              "leaflet",
-              "leaflet.markercluster",
-              "localforge",
-              "guid-typescript"
+              "localforage",
+              "i18next",
+              "semver",
+              "suncalc",
+              "guid-typescript",
+              "fast-deep-equal",
+              "maplibre-gl"
             ],
             "aot": true,
             "assets": [
@@ -32,24 +35,13 @@
                 "glob": "**/*",
                 "input": "src/assets",
                 "output": "assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "./node_modules/leaflet/dist/images",
-                "output": "assets/"
               }
             ],
             "styles": [
-              {
-                "input": "src/theme/variables.scss",
-                "inject": true
-              },
               {
                 "input": "src/global.scss",
                 "inject": true
-              },
-              "./node_modules/leaflet/dist/leaflet.css",
-              "./node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
+              }
             ]
           },
           "configurations": {
@@ -132,11 +124,6 @@
                 "glob": "**/*",
                 "input": "src/assets",
                 "output": "/assets"
-              },
-              {
-                "glob": "**/*",
-                "input": "./node_modules/leaflet/dist/images",
-                "output": "assets/"
               }
             ]
           }

frontend/app/capacitor.config.ts

@@ -1,9 +1,17 @@
 import {CapacitorConfig} from '@capacitor/cli';
 
+const variant = process.env.APP_VARIANT ?? 'default';
+// eslint-disable-next-line unicorn/prefer-module, @typescript-eslint/no-var-requires
+const uniConfig = require(`./config/${variant}/default.json`);
+
 const config: CapacitorConfig = {
-  appId: 'de.anyschool.app',
-  appName: 'StApps',
+  appId: uniConfig.android.packageName, // TODO: iOS bundle ID
+  appName: uniConfig.appName,
   webDir: 'www',
+  android: {
+    flavor: variant,
+  },
+  // TODO: iOS scheme
   cordova: {
     preferences: {
       'AndroidXEnabled': 'true',

frontend/app/config/config.schema.json

@@ -0,0 +1,67 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "App Config",
+  "type": "object",
+  "properties": {
+    "$schema": {
+      "type": "string"
+    },
+    "appName": {
+      "type": "string",
+      "description": "Full app name",
+      "examples": ["Open StApps"]
+    },
+    "appDisplayName": {
+      "type": "string",
+      "description": "App name on mobile device homescreen (Not much space)",
+      "examples": ["StApps"]
+    },
+    "backendUrl": {
+      "type": "string",
+      "description": "Publicly available backend url",
+      "examples": ["https://your.backend.server.tld"]
+    },
+    "backendVersion": {
+      "type": "string",
+      "description": "Minimum backend version the app will request",
+      "examples": ["3.0.0"]
+    },
+    "appLinkHost": {
+      "type": "string",
+      "description": "Your host used for universal (deep) links",
+      "examples": ["your.deep.link.host.tdl"]
+    },
+    "appUrlScheme": {
+      "type": "string",
+      "description": "Custom url scheme for native app versions",
+      "examples": ["de.anyschool.app"]
+    },
+    "appMarketingVersion": {
+      "type": "string",
+      "description": "App marketing version used in Stores (preferably SemVer or CalVer)",
+      "examples": ["1.0.0"]
+    },
+    "android": {
+      "type": "object",
+      "properties": {
+        "packageName": {
+          "type": "string",
+          "description": "Android package name",
+          "examples": ["de.anyschool.app"]
+        }
+      },
+      "required": ["packageName"]
+    }
+  },
+  "required": [
+    "$schema",
+    "appName",
+    "appDisplayName",
+    "backendUrl",
+    "backendVersion",
+    "appLinkHost",
+    "appUrlScheme",
+    "appMarketingVersion",
+    "android"
+  ]
+}

frontend/app/config/default.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "./config.schema.json",
+  "appName": "Open StApps",
+  "appDisplayName": "StApps",
+  "backendUrl": "http://localhost:3000",
+  "backendVersion": "3.0.0",
+  "appLinkHost": "localhost:3000",
+  "appUrlScheme": "de.anyschool.app",
+  "appMarketingVersion": "1.0.0",
+  "android": {
+    "packageName": "de.anyschool.app"
+  }
+}

frontend/app/config/f-u/default.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../config.schema.json",
+  "appName": "Uni Frankfurt",
+  "appDisplayName": "Uni Frankfurt",
+  "backendUrl": "https://mobile.server.uni-frankfurt.de",
+  "backendVersion": "3.1.0",
+  "appLinkHost": "mobile.app.uni-frankfurt.de",
+  "appUrlScheme": "de.unifrankfurt.app",
+  "appMarketingVersion": "2.3.0",
+  "android": {
+    "packageName": "de.unifrankfurt.app"
+  }
+}

frontend/app/icons.config.ts

@@ -1,47 +0,0 @@
-/*
- * Copyright (C) 2022 StApps
- * This program is free software: you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along with
- * this program. If not, see <https://www.gnu.org/licenses/>.
- */
-import type {IconConfig} from './scripts/icon-config';
-
-const config: IconConfig = {
-  inputPath: 'node_modules/material-symbols/material-symbols-rounded.woff2',
-  outputPath: 'src/assets/icons.min.woff2',
-  htmlGlob: 'src/**/*.html',
-  scriptGlob: 'src/**/*.ts',
-  additionalIcons: {
-    about: ['copyright', 'campaign', 'policy', 'description', 'text_snippet'],
-    navigation: [
-      'home',
-      'newspaper',
-      'search',
-      'calendar_month',
-      'local_cafe',
-      'local_library',
-      'inventory_2',
-      'map',
-      'grade',
-      'account_circle',
-      'settings',
-      'info',
-      'rate_review',
-      'work',
-    ],
-  },
-  codePoints: {
-    ios_share: 'e6b8',
-    fact_check: 'f0c5',
-  },
-};
-
-export default config;

frontend/app/ios/App/Podfile

@@ -1,4 +1,4 @@
-require_relative '../../../../node_modules/.pnpm/@capacitor+ios@5.5.0_@capacitor+core@5.5.0/node_modules/@capacitor/ios/scripts/pods_helpers'
+require_relative '../../../../node_modules/.pnpm/@capacitor+ios@5.7.3_@capacitor+core@5.7.3/node_modules/@capacitor/ios/scripts/pods_helpers'
 
 platform :ios, '13.0'
 use_frameworks!
@@ -9,24 +9,26 @@ use_frameworks!
 install! 'cocoapods', :disable_input_output_paths => true
 
 def capacitor_pods
-  pod 'Capacitor', :path => '../../../../node_modules/.pnpm/@capacitor+ios@5.5.0_@capacitor+core@5.5.0/node_modules/@capacitor/ios'
-  pod 'CapacitorCordova', :path => '../../../../node_modules/.pnpm/@capacitor+ios@5.5.0_@capacitor+core@5.5.0/node_modules/@capacitor/ios'
-  pod 'CapacitorApp', :path => '../../../../node_modules/.pnpm/@capacitor+app@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/app'
-  pod 'CapacitorBrowser', :path => '../../../../node_modules/.pnpm/@capacitor+browser@5.1.0_@capacitor+core@5.5.0/node_modules/@capacitor/browser'
-  pod 'CapacitorClipboard', :path => '../../../../node_modules/.pnpm/@capacitor+clipboard@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/clipboard'
-  pod 'CapacitorDevice', :path => '../../../../node_modules/.pnpm/@capacitor+device@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/device'
-  pod 'CapacitorDialog', :path => '../../../../node_modules/.pnpm/@capacitor+dialog@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/dialog'
-  pod 'CapacitorFilesystem', :path => '../../../../node_modules/.pnpm/@capacitor+filesystem@5.1.4_@capacitor+core@5.5.0/node_modules/@capacitor/filesystem'
-  pod 'CapacitorGeolocation', :path => '../../../../node_modules/.pnpm/@capacitor+geolocation@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/geolocation'
-  pod 'CapacitorHaptics', :path => '../../../../node_modules/.pnpm/@capacitor+haptics@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/haptics'
-  pod 'CapacitorKeyboard', :path => '../../../../node_modules/.pnpm/@capacitor+keyboard@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/keyboard'
-  pod 'CapacitorLocalNotifications', :path => '../../../../node_modules/.pnpm/@capacitor+local-notifications@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/local-notifications'
-  pod 'CapacitorNetwork', :path => '../../../../node_modules/.pnpm/@capacitor+network@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/network'
-  pod 'CapacitorPreferences', :path => '../../../../node_modules/.pnpm/@capacitor+preferences@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/preferences'
-  pod 'CapacitorShare', :path => '../../../../node_modules/.pnpm/@capacitor+share@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/share'
-  pod 'CapacitorSplashScreen', :path => '../../../../node_modules/.pnpm/@capacitor+splash-screen@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/splash-screen'
-  pod 'TransistorsoftCapacitorBackgroundFetch', :path => '../../../../node_modules/.pnpm/@transistorsoft+capacitor-background-fetch@5.1.1_@capacitor+core@5.5.0/node_modules/@transistorsoft/capacitor-background-fetch'
-  pod 'CapacitorSecureStoragePlugin', :path => '../../../../node_modules/.pnpm/capacitor-secure-storage-plugin@0.9.0_@capacitor+core@5.5.0/node_modules/capacitor-secure-storage-plugin'
+  pod 'Capacitor', :path => '../../../../node_modules/.pnpm/@capacitor+ios@5.7.3_@capacitor+core@5.7.3/node_modules/@capacitor/ios'
+  pod 'CapacitorCordova', :path => '../../../../node_modules/.pnpm/@capacitor+ios@5.7.3_@capacitor+core@5.7.3/node_modules/@capacitor/ios'
+  pod 'CapacitorCommunityScreenBrightness', :path => '../../../../node_modules/.pnpm/@capacitor-community+screen-brightness@6.0.0_@capacitor+core@5.7.3/node_modules/@capacitor-community/screen-brightness'
+  pod 'CapacitorApp', :path => '../../../../node_modules/.pnpm/@capacitor+app@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/app'
+  pod 'CapacitorBrowser', :path => '../../../../node_modules/.pnpm/@capacitor+browser@5.2.0_@capacitor+core@5.7.3/node_modules/@capacitor/browser'
+  pod 'CapacitorClipboard', :path => '../../../../node_modules/.pnpm/@capacitor+clipboard@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/clipboard'
+  pod 'CapacitorDevice', :path => '../../../../node_modules/.pnpm/@capacitor+device@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/device'
+  pod 'CapacitorDialog', :path => '../../../../node_modules/.pnpm/@capacitor+dialog@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/dialog'
+  pod 'CapacitorFilesystem', :path => '../../../../node_modules/.pnpm/@capacitor+filesystem@5.2.1_@capacitor+core@5.7.3/node_modules/@capacitor/filesystem'
+  pod 'CapacitorGeolocation', :path => '../../../../node_modules/.pnpm/@capacitor+geolocation@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/geolocation'
+  pod 'CapacitorHaptics', :path => '../../../../node_modules/.pnpm/@capacitor+haptics@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/haptics'
+  pod 'CapacitorKeyboard', :path => '../../../../node_modules/.pnpm/@capacitor+keyboard@5.0.8_@capacitor+core@5.7.3/node_modules/@capacitor/keyboard'
+  pod 'CapacitorLocalNotifications', :path => '../../../../node_modules/.pnpm/@capacitor+local-notifications@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/local-notifications'
+  pod 'CapacitorNetwork', :path => '../../../../node_modules/.pnpm/@capacitor+network@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/network'
+  pod 'CapacitorPreferences', :path => '../../../../node_modules/.pnpm/@capacitor+preferences@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/preferences'
+  pod 'CapacitorScreenOrientation', :path => '../../../../node_modules/.pnpm/@capacitor+screen-orientation@6.0.0_@capacitor+core@5.7.3/node_modules/@capacitor/screen-orientation'
+  pod 'CapacitorShare', :path => '../../../../node_modules/.pnpm/@capacitor+share@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/share'
+  pod 'CapacitorSplashScreen', :path => '../../../../node_modules/.pnpm/@capacitor+splash-screen@5.0.7_@capacitor+core@5.7.3/node_modules/@capacitor/splash-screen'
+  pod 'TransistorsoftCapacitorBackgroundFetch', :path => '../../../../node_modules/.pnpm/@transistorsoft+capacitor-background-fetch@5.2.0_@capacitor+core@5.7.3/node_modules/@transistorsoft/capacitor-background-fetch'
+  pod 'CapacitorSecureStoragePlugin', :path => '../../../../node_modules/.pnpm/capacitor-secure-storage-plugin@0.9.0_@capacitor+core@5.7.3/node_modules/capacitor-secure-storage-plugin'
   pod 'CordovaPlugins', :path => '../capacitor-cordova-ios-plugins'
 end
 

frontend/app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openstapps/app",
   "description": "The generic app tailored to fulfill needs of German universities, written using Ionic Framework.",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "private": true,
   "license": "GPL-3.0-only",
   "author": "Karl-Philipp Wulfert <krlwlfrt@gmail.com>",
@@ -14,14 +14,10 @@
     "Thea Schöbl <dev@theaninova.de>"
   ],
   "scripts": {
-    "analyze": "webpack-bundle-analyzer www/stats.json",
-    "build": "pnpm check-icons && ng build --configuration=production --stats-json && webpack-bundle-analyzer www/stats.json --mode static --report www/bundle-info.html --no-open",
-    "build:analyze": "npm run build:stats && npm run analyze",
+    "build": "ng build --configuration=production",
     "build:android": "ionic capacitor build android --no-open && cd android && ./gradlew clean assemble && cd ..",
     "build:prod": "ng build --configuration=production",
-    "build:stats": "ng build --configuration=production --stats-json",
     "changelog": "conventional-changelog -p angular -i src/assets/about/CHANGELOG.md -s -r 0",
-    "check-icons": "ts-node scripts/check-icon-correctness.ts",
     "chromium:no-cors": "chromium --disable-web-security --user-data-dir=\".browser-data/chromium\"",
     "chromium:virtual-host": "chromium --host-resolver-rules=\"MAP mobile.app.uni-frankfurt.de:* localhost:8100\" --ignore-certificate-errors",
     "cypress:open": "cypress open",
@@ -35,10 +31,10 @@
     "e2e": "ng e2e",
     "format": "prettier . -c",
     "format:fix": "prettier --write .",
-    "licenses": "license-checker --json > src/assets/about/licenses.json && ts-node ./scripts/accumulate-licenses.ts && git add src/assets/about/licenses.json",
+    "licenses": "license-checker --json > src/assets/about/licenses.json && node ./scripts/accumulate-licenses.mjs && git add src/assets/about/licenses.json",
     "lint": "ng lint && stylelint \"**/*.scss\"",
     "lint:fix": "eslint --fix -c .eslintrc.json --ignore-path .eslintignore --ext .ts,.html src/ && stylelint --fix \"**/*.scss\"",
-    "minify-icons": "ts-node-esm scripts/minify-icon-font.ts",
+    "minify-icons": "node scripts/minify-icon-font.mjs",
     "postinstall": "jetify && echo \"skipping jetify in production mode\"",
     "preview": "http-server www --p 8101 -o",
     "push": "git push && git push origin \"v$npm_package_version\"",
@@ -59,10 +55,9 @@
     "@angular/forms": "17.3.0",
     "@angular/platform-browser": "17.3.0",
     "@angular/router": "17.3.0",
-    "@asymmetrik/ngx-leaflet": "17.0.0",
-    "@asymmetrik/ngx-leaflet-markercluster": "17.0.0",
     "@awesome-cordova-plugins/calendar": "6.6.0",
     "@awesome-cordova-plugins/core": "6.6.0",
+    "@capacitor-community/screen-brightness": "6.0.0",
     "@capacitor/app": "5.0.7",
     "@capacitor/browser": "5.2.0",
     "@capacitor/clipboard": "5.0.7",
@@ -76,11 +71,13 @@
     "@capacitor/local-notifications": "5.0.7",
     "@capacitor/network": "5.0.7",
     "@capacitor/preferences": "5.0.7",
+    "@capacitor/screen-orientation": "6.0.0",
     "@capacitor/share": "5.0.7",
     "@capacitor/splash-screen": "5.0.7",
     "@ionic-native/core": "5.36.0",
     "@ionic/angular": "7.8.0",
     "@ionic/storage-angular": "4.0.0",
+    "@maplibre/ngx-maplibre-gl": "17.4.1",
     "@ngx-translate/core": "15.0.0",
     "@ngx-translate/http-loader": "8.0.0",
     "@openid/appauth": "1.3.1",
@@ -97,15 +94,15 @@
     "geojson": "0.5.0",
     "ionic-appauth": "0.9.0",
     "jsonpath-plus": "6.0.1",
-    "leaflet": "1.9.4",
-    "leaflet.markercluster": "1.5.3",
-    "material-symbols": "0.17.0",
+    "maplibre-gl": "4.0.2",
+    "material-symbols": "0.17.1",
     "moment": "2.30.1",
     "ngx-date-fns": "11.0.0",
     "ngx-logger": "5.0.12",
     "ngx-markdown": "17.1.1",
     "ngx-moment": "6.0.2",
     "opening_hours": "3.8.0",
+    "pmtiles": "3.0.3",
     "rxjs": "7.8.1",
     "semver": "7.6.0",
     "swiper": "8.4.5",
@@ -138,6 +135,7 @@
     "@ionic/cli": "7.2.0",
     "@openstapps/prettier-config": "workspace:*",
     "@openstapps/tsconfig": "workspace:*",
+    "@openstapps/angular-builder": "workspace:*",
     "@types/fontkit": "2.0.7",
     "@types/geojson": "1.0.6",
     "@types/glob": "8.1.0",
@@ -147,8 +145,6 @@
     "@types/karma": "6.3.8",
     "@types/karma-coverage": "2.0.3",
     "@types/karma-jasmine": "4.0.5",
-    "@types/leaflet": "1.9.8",
-    "@types/leaflet.markercluster": "1.5.4",
     "@types/node": "18.15.3",
     "@types/semver": "7.5.8",
     "@typescript-eslint/eslint-plugin": "7.2.0",
@@ -175,7 +171,7 @@
     "karma-junit-reporter": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
     "license-checker": "25.0.1",
-    "stylelint": "16.2.1",
+    "stylelint": "16.3.1",
     "stylelint-config-clean-order": "5.4.1",
     "stylelint-config-prettier-scss": "1.0.0",
     "stylelint-config-recommended-scss": "14.0.0",

frontend/app/scripts/check-icon-correctness.ts

@@ -1,72 +0,0 @@
-/*
- * Copyright (C) 2022 StApps
- * This program is free software: you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but WITHOUT
- * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- * more details.
- *
- * You should have received a copy of the GNU General Public License along with
- * this program. If not, see <https://www.gnu.org/licenses/>.
- */
-import fontkit, {Font} from 'fontkit';
-import config from '../icons.config';
-import {existsSync} from 'fs';
-import {getUsedIconsHtml, getUsedIconsTS} from './gather-used-icons';
-
-const commandName = '"npm run minify-icons"';
-const originalFont = fontkit.openSync(config.inputPath);
-if (!existsSync(config.outputPath)) {
-  console.error(`Minified font not found. Run ${commandName} first.`);
-  process.exit(-1);
-}
-const modifiedFont = fontkit.openSync(config.outputPath);
-
-let success = true;
-
-// eslint-disable-next-line unicorn/prefer-top-level-await
-checkAll().then(() => {
-  console.log();
-  if (success) {
-    console.log('All icons are present in both fonts.');
-  } else {
-    console.error('Errors occurred.');
-    process.exit(-1);
-  }
-});
-
-/**
- *
- */
-async function checkAll() {
-  check(config.additionalIcons || {});
-  check(await getUsedIconsTS(config.scriptGlob));
-  check(await getUsedIconsHtml(config.htmlGlob));
-}
-
-/**
- *
- */
-function check(icons: Record<string, string[]>) {
-  for (const [purpose, iconSet] of Object.entries(icons)) {
-    for (const icon of iconSet) {
-      if (!hasIcon(originalFont, icon)) {
-        success = false;
-        console.error(`${purpose}: ${icon} does not exist. Typo?`);
-      } else if (!hasIcon(modifiedFont, icon)) {
-        success = false;
-        console.error(`${purpose}: ${icon} not found in minified font. Run ${commandName} to regenerate it.`);
-      }
-    }
-  }
-}
-
-/**
- *
- */
-function hasIcon(font: Font, icon: string) {
-  return font.layout(icon).glyphs.some(it => it.isLigature);
-}

frontend/app/scripts/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": "@openstapps/tsconfig",
-  "compilerOptions": {
-    "module": "CommonJS",
-    "moduleResolution": "Node"
-  }
-}

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

@@ -30,7 +30,6 @@ 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';
@@ -70,6 +69,8 @@ import {setDefaultOptions} from 'date-fns';
 import {DateFnsConfigurationService} from 'ngx-date-fns';
 import {Capacitor} from '@capacitor/core';
 import {SplashScreen} from '@capacitor/splash-screen';
+import maplibregl from 'maplibre-gl';
+import {Protocol} from 'pmtiles';
 
 registerLocaleData(localeDe);
 
@@ -91,6 +92,7 @@ export function initializerFactory(
 ) {
   return async () => {
     try {
+      maplibregl.addProtocol('pmtiles', new Protocol().tile);
       initLogger(logger);
       await storageProvider.init();
       await configProvider.init();
@@ -151,7 +153,6 @@ export function createTranslateLoader(http: HttpClient) {
     BrowserAnimationsModule,
     CatalogModule,
     CommonModule,
-    ConfigModule,
     DashboardModule,
     DataModule,
     HebisModule,

frontend/app/src/app/modules/about/about-licenses.scss

@@ -12,24 +12,6 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-ion-content > div {
-  height: 100%;
-}
-
-cdk-virtual-scroll-viewport {
-  width: 100%;
-  height: 100%;
-}
-
-:host ::ng-deep {
-  .cdk-virtual-scroll-content-wrapper {
-    width: 100%;
-  }
-}
-
-.virtual-scroll-expander {
-  clear: both;
-}
 
 .supertext-icon {
   height: 14px;

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

@@ -49,7 +49,7 @@
 @if (content.type === 'router link') {
   <ion-item [routerLink]="content.link">
     @if (content.icon) {
-      <ion-icon [name]="content.icon" slot="start"></ion-icon>
+      <ion-icon [name]="$any(content.icon)" slot="start"></ion-icon>
     }
     <ion-label>{{ 'title' | translateSimple: content }}</ion-label>
   </ion-item>

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

@@ -17,7 +17,7 @@ import {ActivatedRoute} from '@angular/router';
 import {SCAboutPage, SCAppConfiguration} from '@openstapps/core';
 import {ConfigProvider} from '../../config/config.provider';
 import packageJson from '../../../../../package.json';
-import config from 'capacitor.config';
+import config from '../../../../../config/default.json';
 import {App} from '@capacitor/app';
 import {Capacitor} from '@capacitor/core';
 

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

@@ -19,7 +19,6 @@ 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';
@@ -64,6 +63,5 @@ const settingsRoutes: Routes = [
     ScrollingModule,
     UtilModule,
   ],
-  providers: [ConfigProvider],
 })
 export class AboutModule {}

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

@@ -15,7 +15,6 @@
 
 ion-segment-button {
   max-width: 100%;
-  text-transform: none;
 }
 
 .margin-top {

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

@@ -1,27 +0,0 @@
-/*
- * 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.spec.ts

@@ -24,13 +24,17 @@ import {
 } from './errors';
 import {NGXLogger} from 'ngx-logger';
 import {sampleIndexResponse} from '../../_helpers/data/sample-configuration';
+import {BehaviorSubject} from 'rxjs';
+import {InternetConnectionService} from '../../util/internet-connection.service';
 
 describe('ConfigProvider', () => {
+  let internetConnectionServiceMock: {offline$: BehaviorSubject<boolean>};
   let configProvider: ConfigProvider;
   let storageProviderSpy: jasmine.SpyObj<StorageProvider>;
   let ngxLogger: jasmine.SpyObj<NGXLogger>;
 
   beforeEach(() => {
+    internetConnectionServiceMock = {offline$: new BehaviorSubject<boolean>(false)};
     storageProviderSpy = jasmine.createSpyObj('StorageProvider', ['init', 'get', 'has', 'put']);
     const webHttpClientMethodSpy = jasmine.createSpyObj('StAppsWebHttpClient', ['request']);
     ngxLogger = jasmine.createSpyObj('NGXLogger', ['log', 'error', 'warn']);
@@ -51,6 +55,10 @@ describe('ConfigProvider', () => {
           provide: NGXLogger,
           useValue: ngxLogger,
         },
+        {
+          provide: InternetConnectionService,
+          useValue: internetConnectionServiceMock,
+        },
       ],
     });
 
@@ -75,6 +83,22 @@ describe('ConfigProvider', () => {
     expect(error).toEqual(new ConfigFetchError());
   });
 
+  it('should throw device offline error when offline', async () => {
+    // eslint-disable-next-line unicorn/error-message
+    let error = new Error('');
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    internetConnectionServiceMock.offline$ = new BehaviorSubject<boolean>(true);
+
+    try {
+      await configProvider.fetch();
+    } catch (error_) {
+      error = error_ as Error;
+      expect(error).toBeInstanceOf(ConfigFetchError);
+      expect(error.message).toContain('Device is offline.');
+    }
+  });
+
   it('should init from remote and saved config not available', async () => {
     storageProviderSpy.has.and.returnValue(Promise.resolve(false));
     spyOn(configProvider.client, 'handshake').and.returnValue(Promise.resolve(sampleIndexResponse));
@@ -104,9 +128,9 @@ describe('ConfigProvider', () => {
 
   it('should throw error on wrong config version in storage', async () => {
     storageProviderSpy.has.and.returnValue(Promise.resolve(true));
-    const wrongConfig = JSON.parse(JSON.stringify(sampleIndexResponse));
+    const wrongConfig = structuredClone(sampleIndexResponse);
     wrongConfig.backend.SCVersion = '0.1.0';
-    storageProviderSpy.get.and.returnValue(wrongConfig);
+    storageProviderSpy.get.and.returnValue(Promise.resolve(wrongConfig));
     spyOn(configProvider.client, 'handshake').and.returnValue(Promise.resolve(sampleIndexResponse));
     await configProvider.init();
 

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

@@ -27,6 +27,8 @@ import {
   SavedConfigNotAvailable,
   WrongConfigVersionInStorage,
 } from './errors';
+import {InternetConnectionService} from '../../util/internet-connection.service';
+import {firstValueFrom} from 'rxjs';
 
 /**
  * Key to store config in storage module
@@ -72,7 +74,9 @@ export class ConfigProvider {
     private readonly storageProvider: StorageProvider,
     swHttpClient: StAppsWebHttpClient,
     private readonly logger: NGXLogger,
+    private readonly internetConnectionService: InternetConnectionService,
   ) {
+    console.log('config init');
     this.client = new Client(swHttpClient, environment.backend_url, environment.backend_version);
   }
 
@@ -81,9 +85,15 @@ export class ConfigProvider {
    */
   async fetch(): Promise<SCIndexResponse> {
     try {
-      return await this.client.handshake(this.scVersion);
-    } catch {
-      throw new ConfigFetchError();
+      const isOffline = await firstValueFrom(this.internetConnectionService.offline$);
+      if (isOffline) {
+        throw new Error('Device is offline.');
+      } else {
+        return await this.client.handshake(this.scVersion);
+      }
+    } catch (error) {
+      const error_ = error instanceof Error ? new ConfigFetchError(error.message) : new ConfigFetchError();
+      throw error_;
     }
   }
 

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

@@ -19,8 +19,10 @@ 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!');
+  constructor(reason?: string) {
+    const defaultMessage = 'App configuration could not be fetched!';
+    const message = reason ? `${defaultMessage} ${reason}` : defaultMessage;
+    super('ConfigFetchError', message);
   }
 }
 

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

@@ -26,6 +26,7 @@ import {AddEventStates, AddEventStatesMap} from './add-event-action-chip.config'
 import {EditEventSelectionComponent} from '../edit-event-selection.component';
 import {AddEventReviewModalComponent} from '../../../calendar/add-event-review-modal.component';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {MaterialSymbol} from 'material-symbols';
 
 /**
  * Shows a horizontal list of action chips
@@ -55,7 +56,7 @@ export class AddEventActionChipComponent {
   /**
    * Icon
    */
-  icon: string;
+  icon: MaterialSymbol;
 
   /**
    * Current state of icon fill

frontend/app/src/app/modules/data/chips/data/add-event-action-chip.config.ts

@@ -24,28 +24,28 @@ export enum AddEventStates {
 
 export const AddEventStatesMap = {
   [AddEventStates.ADDED_ALL]: {
-    icon: SCIcon`event_available`,
+    icon: SCIcon.event_available,
     fill: true,
     label: 'data.chips.add_events.ADDED_ALL',
     disabled: false,
     color: 'success',
   },
   [AddEventStates.ADDED_SOME]: {
-    icon: SCIcon`event`,
+    icon: SCIcon.event,
     fill: true,
     label: 'data.chips.add_events.ADDED_SOME',
     disabled: false,
     color: 'success',
   },
   [AddEventStates.REMOVED_ALL]: {
-    icon: SCIcon`calendar_today`,
+    icon: SCIcon.calendar_today,
     fill: false,
     label: 'data.chips.add_events.REMOVED_ALL',
     disabled: false,
     color: 'primary',
   },
   [AddEventStates.UNAVAILABLE]: {
-    icon: SCIcon`event_busy`,
+    icon: SCIcon.event_busy,
     fill: false,
     label: 'data.chips.add_events.UNAVAILABLE',
     disabled: true,

frontend/app/src/app/modules/data/data-icon.config.ts

@@ -14,37 +14,38 @@
  */
 import {SCThingType} from '@openstapps/core';
 import {SCIcon} from '../../util/ion-icon/icon';
+import {MaterialSymbol} from 'material-symbols';
 
-export const DataIcons: Record<SCThingType, string> = {
-  'academic event': SCIcon`school`,
-  'assessment': SCIcon`fact_check`,
-  'article': SCIcon`article`,
-  'book': SCIcon`book`,
-  'building': SCIcon`location_city`,
-  'certification': SCIcon`contract`,
-  'catalog': SCIcon`inventory_2`,
-  'contact point': SCIcon`contact_page`,
-  'course of study': SCIcon`school`,
-  'date series': SCIcon`event`,
-  'dish': SCIcon`lunch_dining`,
-  'favorite': SCIcon`favorite`,
-  'floor': SCIcon`foundation`,
-  'id card': SCIcon`badge`,
-  'message': SCIcon`newspaper`,
-  'organization': SCIcon`business_center`,
-  'periodical': SCIcon`feed`,
-  'person': SCIcon`person`,
-  'point of interest': SCIcon`pin_drop`,
-  'publication event': SCIcon`campaign`,
-  'room': SCIcon`meeting_room`,
-  'semester': SCIcon`date_range`,
-  'setting': SCIcon`settings`,
-  'sport course': SCIcon`sports_soccer`,
-  'study module': SCIcon`view_module`,
-  'ticket': SCIcon`confirmation_number`,
-  'todo': SCIcon`task`,
-  'tour': SCIcon`tour`,
-  'video': SCIcon`movie`,
-  'diff': SCIcon`difference`,
-  'job posting': SCIcon`work`,
-};
+export const DataIcons = {
+  'academic event': SCIcon.school,
+  'assessment': SCIcon.fact_check,
+  'article': SCIcon.article,
+  'book': SCIcon.book,
+  'building': SCIcon.location_city,
+  'certification': SCIcon.contract,
+  'catalog': SCIcon.inventory_2,
+  'contact point': SCIcon.contact_page,
+  'course of study': SCIcon.school,
+  'date series': SCIcon.event,
+  'dish': SCIcon.lunch_dining,
+  'favorite': SCIcon.favorite,
+  'floor': SCIcon.foundation,
+  'id card': SCIcon.badge,
+  'message': SCIcon.newspaper,
+  'organization': SCIcon.business_center,
+  'periodical': SCIcon.feed,
+  'person': SCIcon.person,
+  'point of interest': SCIcon.pin_drop,
+  'publication event': SCIcon.campaign,
+  'room': SCIcon.meeting_room,
+  'semester': SCIcon.date_range,
+  'setting': SCIcon.settings,
+  'sport course': SCIcon.sports_soccer,
+  'study module': SCIcon.view_module,
+  'ticket': SCIcon.confirmation_number,
+  'todo': SCIcon.task,
+  'tour': SCIcon.tour,
+  'video': SCIcon.movie,
+  'diff': SCIcon.difference,
+  'job posting': SCIcon.work,
+} satisfies Record<SCThingType, MaterialSymbol>;

frontend/app/src/app/modules/data/data-icon.pipe.ts

@@ -31,7 +31,7 @@ export class DataIconPipe implements PipeTransform {
   /**
    * Provide the icon name from the data type
    */
-  transform(type: SCThingType): string {
+  transform(type: SCThingType) {
     return this.typeIconMap[type];
   }
 }

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

@@ -17,7 +17,6 @@ import {CommonModule} from '@angular/common';
 import {HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {LeafletModule} from '@asymmetrik/ngx-leaflet';
 import {IonicModule, Platform} from '@ionic/angular';
 import {TranslateModule} from '@ngx-translate/core';
 import {MarkdownModule} from 'ngx-markdown';
@@ -30,7 +29,7 @@ import {UtilModule} from '../../util/util.module';
 import {CalendarService} from '../calendar/calendar.service';
 import {ScheduleProvider} from '../calendar/schedule.provider';
 import {GeoNavigationDirective} from '../map/geo-navigation.directive';
-import {MapWidgetComponent} from '../map/widget/map-widget.component';
+import {MapWidgetComponent} from '../map/map-widget.component';
 import {MenuModule} from '../menu/menu.module';
 import {SettingsProvider} from '../settings/settings.provider';
 import {StorageModule} from '../storage/storage.module';
@@ -142,7 +141,6 @@ import {ShareButtonComponent} from './elements/share-button.component';
     FoodDataListComponent,
     LocateActionChipComponent,
     LongInlineTextComponent,
-    MapWidgetComponent,
     MessageDetailContentComponent,
     MessageListItemComponent,
     JobPostingDetailContentComponent,
@@ -187,9 +185,9 @@ import {ShareButtonComponent} from './elements/share-button.component';
     CommonModule,
     DataRoutingModule,
     FormsModule,
+    MapWidgetComponent,
     HttpClientModule,
     IonicModule.forRoot(),
-    LeafletModule,
     MarkdownModule.forRoot(),
     MenuModule,
     IonIconModule,

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

@@ -14,6 +14,10 @@
  */
 @import '../../../../theme/util/mixins';
 
+:host {
+  display: contents;
+}
+
 stapps-origin-detail {
   // css hack to make the element stick to the bottom of the scroll container even
   // when the content is not filling it
@@ -49,13 +53,10 @@ stapps-origin-detail {
       background: var(--ion-color-primary);
     }
 
-    // Firefox doesn't support this yet...
-    @supports selector(:has(*)) {
-      & > .expand-when-space,
-      &:has(> .expand-when-space) {
-        flex: 1;
-        height: unset;
-      }
+    & > .expand-when-space,
+    &:has(> .expand-when-space) {
+      flex: 1;
+      height: unset;
     }
   }
 }

frontend/app/src/app/modules/data/detail/data-detail.scss

@@ -17,7 +17,6 @@ ion-content > div {
   display: flex;
   flex: 1;
   flex-direction: column;
-  min-height: 100%;
 }
 
 ion-title {

frontend/app/src/app/modules/data/elements/favorite-button.component.html

@@ -13,10 +13,11 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<ion-button (click)="toggle($event)" color="medium" size="small" fill="clear">
+<ion-button (click)="toggle($event)" fill="clear" shape="round">
   <ion-icon
     slot="icon-only"
-    [fill]="(isFavorite$ | async) ?? false"
+    [size]="24"
+    [fill]="(isFavorite$ | async) || false"
     [class.selected]="isFavorite$ | async"
     name="grade"
   ></ion-icon>

frontend/app/src/app/modules/data/elements/favorite-button.component.scss

@@ -13,22 +13,25 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-:host {
-  ion-button {
-    --border-radius: 50%;
+ion-button {
+  --background-activated: currentcolor;
+  --background-hover: currentcolor;
+  --background-focused: currentcolor;
 
-    width: 50px;
-    height: 50px;
-  }
+  aspect-ratio: 1;
+  color: inherit;
+}
 
-  .selected {
-    // TODO
-    color: #fbc02d;
-  }
+.selected {
+  color: #fbc02d;
+}
 
-  @media (hover: hover) {
-    ion-button:hover ::ng-deep stapps-icon {
-      --fill: 1;
-    }
+@media (hover: hover) {
+  ion-button:hover ::ng-deep stapps-icon {
+    --fill: 1 !important;
   }
 }
+
+::ng-deep ion-item stapps-favorite-button ion-button {
+  color: var(--ion-color-medium) !important;
+}

frontend/app/src/app/modules/data/elements/favorite-button.component.ts

@@ -12,7 +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 {Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 import {SCIndexableThings} from '@openstapps/core';
 import {FavoritesService} from '../../favorites/favorites.service';
 import {Observable} from 'rxjs';
@@ -25,6 +25,7 @@ import {map, take} from 'rxjs/operators';
   selector: 'stapps-favorite-button',
   templateUrl: './favorite-button.component.html',
   styleUrls: ['./favorite-button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FavoriteButtonComponent {
   /**

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

@@ -21,6 +21,7 @@ import {SCThingUserOrigin, SCThingRemoteOrigin} from '@openstapps/core';
 @Component({
   selector: 'stapps-origin-detail',
   templateUrl: 'origin-detail.html',
+  styleUrl: 'origin-detail.scss',
 })
 export class OriginDetailComponent {
   /**

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

@@ -14,71 +14,61 @@
 -->
 
 @if (origin.type === 'user') {
-  <ion-card>
-    <ion-card-header
-      >{{ 'data.types.origin.TITLE' | translate | titlecase }}:
-      {{ 'data.types.origin.USER' | translate | titlecase }}</ion-card-header
-    >
-    <ion-card-content>
-      <p>
-        {{ 'data.types.origin.detail.CREATED' | translate | titlecase }}:
-        {{ origin.created | amDateFormat: 'll' }}
-      </p>
-      @if (origin.updated) {
-        <p>
-          {{ 'data.types.origin.detail.UPDATED' | translate | titlecase }}:
-          {{ origin.updated | amDateFormat: 'll' }}
-        </p>
-      }
-      @if (origin.modified) {
-        <p>
-          {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}:
-          {{ origin.modified | amDateFormat: 'll' }}
-        </p>
-      }
-      @if (origin.maintainer) {
-        <p>
-          {{ 'data.types.origin.detail.MAINTAINER' | translate }}:
-          <a [routerLink]="['/data-detail', origin.maintainer.uid]">{{ origin.maintainer.name }}</a>
-        </p>
-      }
-    </ion-card-content>
-  </ion-card>
+  <h3>
+    {{ 'data.types.origin.TITLE' | translate | sentencecase }}:
+    {{ 'data.types.origin.USER' | translate | sentencecase }}
+  </h3>
+  <p>
+    {{ 'data.types.origin.detail.CREATED' | translate | sentencecase }}:
+    {{ origin.created | amDateFormat: 'll' }}
+  </p>
+  @if (origin.updated) {
+    <p>
+      {{ 'data.types.origin.detail.UPDATED' | translate | sentencecase }}:
+      {{ origin.updated | amDateFormat: 'll' }}
+    </p>
+  }
+  @if (origin.modified) {
+    <p>
+      {{ 'data.types.origin.detail.MODIFIED' | translate | sentencecase }}:
+      {{ origin.modified | amDateFormat: 'll' }}
+    </p>
+  }
+  @if (origin.maintainer) {
+    <p>
+      {{ 'data.types.origin.detail.MAINTAINER' | translate | sentencecase }}:
+      <a [routerLink]="['/data-detail', origin.maintainer.uid]">{{ origin.maintainer.name }}</a>
+    </p>
+  }
 }
 @if (origin.type === 'remote') {
-  <ion-card>
-    <ion-card-header
-      >{{ 'data.types.origin.TITLE' | translate | titlecase }}:
-      {{ 'data.types.origin.REMOTE' | translate | titlecase }}</ion-card-header
-    >
-    <ion-card-content>
-      <p>
-        {{ 'data.types.origin.detail.INDEXED' | translate | titlecase }}:
-        {{ origin.indexed | amDateFormat: 'll' }}
-      </p>
-      @if (origin.modified) {
-        <p>
-          {{ 'data.types.origin.detail.MODIFIED' | translate | titlecase }}:
-          {{ origin.modified | amDateFormat: 'll' }}
-        </p>
-      }
-      @if (origin.name) {
-        <p>{{ 'data.types.origin.detail.MAINTAINER' | translate }}: {{ origin.name }}</p>
-      }
-      @if (origin.maintainer) {
-        <p>
-          {{ 'data.types.origin.detail.MAINTAINER' | translate | titlecase }}:
-          <a [routerLink]="['/data-detail', origin.maintainer.uid]">{{ origin.maintainer.name }}</a>
-        </p>
-      }
-      @if (origin.responsibleEntity) {
-        <p>
-          {{ 'data.types.origin.detail.RESPONSIBLE' | translate | titlecase }}:
-          <a [routerLink]="['/data-detail', origin.responsibleEntity.uid]">{{
-            origin.responsibleEntity.name
-          }}</a>
-        </p>
-      }
-    </ion-card-content>
-  </ion-card>
+  <h3>
+    {{ 'data.types.origin.TITLE' | translate | sentencecase }}:
+    {{ 'data.types.origin.REMOTE' | translate | sentencecase }}
+  </h3>
+  <p>
+    {{ 'data.types.origin.detail.INDEXED' | translate | sentencecase }}:
+    {{ origin.indexed | amDateFormat: 'll' }}
+  </p>
+  @if (origin.modified) {
+    <p>
+      {{ 'data.types.origin.detail.MODIFIED' | translate | sentencecase }}:
+      {{ origin.modified | amDateFormat: 'll' }}
+    </p>
+  }
+  @if (origin.name) {
+    <p>{{ 'data.types.origin.detail.MAINTAINER' | translate | sentencecase }}: {{ origin.name }}</p>
+  }
+  @if (origin.maintainer) {
+    <p>
+      {{ 'data.types.origin.detail.MAINTAINER' | translate | sentencecase }}:
+      <a [routerLink]="['/data-detail', origin.maintainer.uid]">{{ origin.maintainer.name }}</a>
+    </p>
+  }
+  @if (origin.responsibleEntity) {
+    <p>
+      {{ 'data.types.origin.detail.RESPONSIBLE' | translate | sentencecase }}:
+      <a [routerLink]="['/data-detail', origin.responsibleEntity.uid]">{{ origin.responsibleEntity.name }}</a>
+    </p>
+  }
 }

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

@@ -0,0 +1,15 @@
+:host {
+  padding: var(--spacing-lg);
+  padding-top: 0;
+}
+
+h3 {
+  font-weight: bold;
+}
+
+h3,
+p {
+  margin: 0;
+  font-size: 0.8em;
+  opacity: 0.8;
+}

frontend/app/src/app/modules/data/elements/title-card.component.ts

@@ -18,8 +18,8 @@ import {SCThings} from '@openstapps/core';
 import {SCIcon} from '../../../util/ion-icon/icon';
 
 const AccordionButtonState = {
-  collapsed: SCIcon`expand_more`,
-  expanded: SCIcon`expand_less`,
+  collapsed: SCIcon.expand_more,
+  expanded: SCIcon.expand_less,
 };
 
 @Component({
@@ -35,7 +35,8 @@ export class TitleCardComponent implements OnInit, OnChanges {
 
   @ViewChild('accordionTextArea') accordionTextArea: ElementRef;
 
-  buttonState = AccordionButtonState.collapsed;
+  buttonState: (typeof AccordionButtonState)[keyof typeof AccordionButtonState] =
+    AccordionButtonState.collapsed;
 
   buttonShown = true;
 

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

@@ -33,9 +33,9 @@ ion-item {
   margin: var(--spacing-sm);
 
   ion-thumbnail {
-    --ion-margin: var(--spacing-xs);
+    --size: 36px;
 
-    margin-block: auto;
+    margin: 0;
     margin-inline: var(--spacing-md);
     padding: 0;
   }

frontend/app/src/app/modules/data/list/search-page.scss

@@ -38,7 +38,6 @@ ion-toolbar:first-of-type {
     ion-button {
       width: 50%;
       margin: 0;
-      text-transform: none;
     }
   }
 }

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

@@ -68,5 +68,5 @@
   </ion-card>
 }
 @if (item.inPlace && item.inPlace.geo) {
-  <stapps-map-widget [place]="item.inPlace"></stapps-map-widget>
+  <stapps-map-widget [place]="$any(item.inPlace)"></stapps-map-widget>
 }

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

@@ -17,7 +17,6 @@ import {PositionService} from '../../../map/position.service';
 import {filter, Observable} from 'rxjs';
 import {hasValidLocation, isSCFloor, PlaceTypes, PlaceTypesWithDistance} from './place-types';
 import {map} from 'rxjs/operators';
-import {LatLng, geoJSON} from 'leaflet';
 import {trigger, transition, style, animate} from '@angular/animations';
 
 /**
@@ -39,13 +38,14 @@ export class PlaceListItemComponent {
   @Input() set item(item: PlaceTypes) {
     this._item = item;
     if (!isSCFloor(item) && hasValidLocation(item)) {
-      this.distance = this.positionService.watchCurrentLocation().pipe(
-        map(position =>
-          new LatLng(position.latitude, position.longitude).distanceTo(
-            geoJSON(item.geo.point).getBounds().getCenter(),
-          ),
+      this.distance = this.positionService.geoLocation.pipe(
+        map(
+          position =>
+            Math.hypot(
+              position.coords.latitude - item.geo.point.coordinates[1],
+              position.coords.longitude - item.geo.point.coordinates[0],
+            ) * 111_139,
         ),
-
         filter(it => it !== undefined),
       );
     }

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

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

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

@@ -13,10 +13,6 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-ion-segment-button {
-  text-transform: none;
-}
-
 ion-segment {
   overflow: auto;
   justify-content: space-between;

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

@@ -6,7 +6,6 @@ import {MomentModule} from 'ngx-moment';
 import {DataModule} from '../data/data.module';
 import {UtilModule} from '../../util/util.module';
 import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
-import {ConfigProvider} from '../config/config.provider';
 import {ThingTranslateModule} from '../../translation/thing-translate.module';
 import {RouterModule, Routes} from '@angular/router';
 import {JobsPageComponent} from './page/jobs-page.component';
@@ -26,6 +25,5 @@ const jobsRoutes: Routes = [{path: 'jobs', component: JobsPageComponent}];
     DataModule,
     UtilModule,
   ],
-  providers: [ConfigProvider],
 })
 export class JobModule {}

frontend/app/src/app/modules/library/account/account.page.ts

@@ -11,7 +11,7 @@ export class LibraryAccountPageComponent {
   constructor(private readonly libraryAccountService: LibraryAccountService) {}
 
   async ionViewWillEnter(): Promise<void> {
-    const patron = await this.libraryAccountService.getProfile();
+    const patron = await this.libraryAccountService.getPatron();
     this.name = patron?.name;
   }
 }

frontend/app/src/app/modules/library/account/checked-out/checked-out-page.component.ts

@@ -39,6 +39,8 @@ export class CheckedOutPageComponent {
 
   async fetchItems() {
     try {
+      // Prepare patron (status) for the items
+      await this.libraryAccountService.getPatron();
       this.checkedOutItems = undefined;
       this.checkedOutItems = await this.libraryAccountService.getFilteredItems([PAIADocumentStatus.Held]);
     } catch {

frontend/app/src/app/modules/library/account/checked-out/checked-out-page.html

@@ -27,7 +27,7 @@
     @for (checkedOutItem of checkedOutItems; track checkedOutItem) {
       <stapps-paia-item
         [item]="checkedOutItem"
-        [propertiesToShow]="['label', 'renewals', 'endtime']"
+        [propertiesToShow]="['label', 'renewals', 'duedate']"
         (documentAction)="onDocumentAction($event)"
         listName="checked_out"
       >

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

@@ -14,7 +14,8 @@
  */
 
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {DocumentAction, PAIADocument} from '../../../types';
+import {DocumentAction, PAIADocument, PAIADocumentStatus, PAIADocumentVisualStatus} from '../../../types';
+import {LibraryAccountService} from '../../library-account.service';
 
 @Component({
   selector: 'stapps-paia-item',
@@ -22,7 +23,24 @@ import {DocumentAction, PAIADocument} from '../../../types';
   styleUrls: ['./paiaitem.scss'],
 })
 export class PAIAItemComponent {
-  @Input() item: PAIADocument;
+  private _item: PAIADocument;
+
+  renewable: boolean;
+
+  visualStatus?: PAIADocumentVisualStatus;
+
+  constructor(private readonly libraryAccountService: LibraryAccountService) {}
+
+  @Input()
+  set item(value: PAIADocument) {
+    this._item = value;
+    void this.setRenewable();
+    this.visualStatus = this.getVisualStatus(Number(this.item.status));
+  }
+
+  get item(): PAIADocument {
+    return this._item;
+  }
 
   @Input()
   propertiesToShow: (keyof PAIADocument)[];
@@ -36,4 +54,23 @@ export class PAIAItemComponent {
   async onClick(action: DocumentAction['action']) {
     this.documentAction.emit({doc: this.item, action});
   }
+
+  private async setRenewable() {
+    const isActive = await this.libraryAccountService.isActivePatron();
+    this.renewable = isActive && Number(this.item.status) === PAIADocumentStatus.Held;
+  }
+
+  private getVisualStatus(status: PAIADocumentStatus): PAIADocumentVisualStatus | undefined {
+    switch (status) {
+      case PAIADocumentStatus.Ordered: {
+        return {color: 'warning', status: status, statusText: 'ordered'};
+      }
+      case PAIADocumentStatus.Provided: {
+        return {color: 'success', status: status, statusText: 'ready'};
+      }
+      default: {
+        return undefined;
+      }
+    }
+  }
 }

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

@@ -14,16 +14,22 @@
 -->
 
 <ion-item>
-  <!-- TODO: text not selectable in Chrome, bugfix needed https://github.com/ionic-team/ionic-framework/issues/24956 -->
   <ion-label class="ion-text-wrap">
     @if (item.about) {
-      <h2 class="name">{{ item.about }}</h2>
+      <h2 class="name">
+        @if (visualStatus) {
+          <ion-badge [color]="visualStatus.color" slot="start">
+            {{ 'library.account.pages' + '.' + listName + '.' + visualStatus.statusText | translate }}
+          </ion-badge>
+        }
+        {{ item.about }}
+      </h2>
     }
     @for (property of propertiesToShow; track property) {
       @if (item[property]) {
         <p>
           {{ 'library.account.pages' + '.' + listName + '.' + 'labels' + '.' + property | translate }}:
-          @if (!['endtime', 'duedate'].includes(property)) {
+          @if (!['starttime', 'duedate'].includes(property)) {
             {{ item[property] }}
           } @else {
             {{ $any(item[property]) | amDateFormat: 'll' }}
@@ -40,7 +46,7 @@
       <!--      >-->
       <!--        {{ 'library.account.actions.cancel.header' | translate }}</ion-button-->
       <!--      >-->
-      @if (item.canrenew) {
+      @if (renewable && item.canrenew) {
         <ion-button color="primary" (click)="onClick('renew')">
           {{ 'library.account.actions.renew.header' | translate }}</ion-button
         >

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

@@ -12,3 +12,6 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
+ion-badge {
+  vertical-align: bottom;
+}

frontend/app/src/app/modules/library/account/holds/holds-page.component.ts

@@ -45,6 +45,8 @@ export class HoldsPageComponent {
         ? [PAIADocumentStatus.Reserved]
         : [PAIADocumentStatus.Ordered, PAIADocumentStatus.Provided];
     try {
+      // Prepare patron (status) for the items
+      await this.libraryAccountService.getPatron();
       this.paiaDocuments = await this.libraryAccountService.getFilteredItems(itemsStatus);
     } catch {
       await this.libraryAccountService.handleError();

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

@@ -35,30 +35,20 @@
       @switch (activeSegment) {
         @case ('orders') {
           @for (hold of paiaDocuments; track hold) {
-            @if (toNumber(hold.status) === paiaDocumentStatus.Provided) {
-              <stapps-paia-item
-                [item]="hold"
-                [propertiesToShow]="['label', 'storage']"
-                (documentAction)="onDocumentAction($event)"
-                listName="holds"
-              >
-              </stapps-paia-item>
-            } @else {
-              <stapps-paia-item
-                [item]="hold"
-                [propertiesToShow]="['label']"
-                (documentAction)="onDocumentAction($event)"
-                listName="holds"
-              >
-              </stapps-paia-item>
-            }
+            <stapps-paia-item
+              [item]="hold"
+              [propertiesToShow]="['label', 'storage']"
+              (documentAction)="onDocumentAction($event)"
+              listName="holds"
+            >
+            </stapps-paia-item>
           }
         }
         @case ('reservations') {
           @for (hold of paiaDocuments; track hold) {
             <stapps-paia-item
               [item]="hold"
-              [propertiesToShow]="['label']"
+              [propertiesToShow]="['label', 'starttime', 'storage', 'queue']"
               (documentAction)="onDocumentAction($event)"
               listName="holds"
             >

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

@@ -20,7 +20,15 @@ import {
   SCFeatureConfiguration,
   SCFeatureConfigurationExtern,
 } from '@openstapps/core';
-import {DocumentAction, PAIADocument, PAIADocumentStatus, PAIAFees, PAIAItems, PAIAPatron} from '../types';
+import {
+  DocumentAction,
+  PAIADocument,
+  PAIADocumentStatus,
+  PAIAFees,
+  PAIAItems,
+  PAIAPatron,
+  PAIAPatronStatus,
+} from '../types';
 import {HebisDataProvider} from '../../hebis/hebis-data.provider';
 import {PAIATokenResponse} from '../../auth/paia/paia-token-response';
 import {AuthHelperService} from '../../auth/auth-helper.service';
@@ -43,6 +51,11 @@ export class LibraryAccountService {
    */
   authType: SCAuthorizationProviderType;
 
+  /**
+   * Account (Patron) status
+   */
+  private status?: PAIAPatronStatus;
+
   constructor(
     protected requestor: Requestor = new JQueryRequestor(),
     private readonly hebisDataProvider: HebisDataProvider,
@@ -60,12 +73,23 @@ export class LibraryAccountService {
     this.authType = config.authProvider as SCAuthorizationProviderType;
   }
 
-  async getProfile() {
-    const patron = ((await this.getValidToken()) as PAIATokenResponse).patron;
-    return {
+  async getPatron() {
+    const patronId = ((await this.getValidToken()) as PAIATokenResponse).patron;
+    const patron = {
       ...(await this.performRequest<PAIAPatron>(`${this.baseUrl}/{patron}`)),
-      id: patron,
+      id: patronId,
     } as PAIAPatron;
+    // Refresh the status
+    this.status = Number(patron.status);
+    return patron;
+  }
+
+  async getPatronStatus() {
+    return this.status ?? (this.status = Number((await this.getPatron()).status) as PAIAPatronStatus);
+  }
+
+  async isActivePatron() {
+    return (await this.getPatronStatus()) === PAIAPatronStatus.Active;
   }
 
   async getItems() {

frontend/app/src/app/modules/library/account/profile/profile-page.component.ts

@@ -25,15 +25,19 @@ import {PAIAPatron} from '../../types';
 export class ProfilePageComponent {
   patron?: PAIAPatron;
 
-  propertiesToShow: (keyof PAIAPatron)[] = ['id', 'name', 'email', 'address', 'expires', 'note'];
+  propertiesToShow: (keyof PAIAPatron)[] = ['id', 'name', 'email', 'address', 'expires'];
 
   constructor(private readonly libraryAccountService: LibraryAccountService) {}
 
   async ionViewWillEnter(): Promise<void> {
     try {
-      this.patron = await this.libraryAccountService.getProfile();
+      this.patron = await this.libraryAccountService.getPatron();
     } catch {
       await this.libraryAccountService.handleError();
     }
   }
+
+  isUnlimitedExpiry(date = ''): boolean {
+    return new Date(date).getFullYear() === 9999;
+  }
 }

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

@@ -36,11 +36,11 @@
                   @if (!['expires'].includes(property)) {
                     {{ patron[property] }}
                   } @else {
-                    @if (patron[property] === '9999-12-31') {
+                    @if (isUnlimitedExpiry(patron['expires'])) {
                       {{ 'library.account.pages.profile.values.unlimited' | translate }}
                     } @else {
                       {{ 'library.account.pages.profile.values.expires' | translate }}: {{
-                        patron[property] | amDateFormat: 'll'
+                        patron['expires'] | amDateFormat: 'll'
                       }}
                     }
                   }

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

@@ -19,11 +19,19 @@ export interface PAIAPatron {
   email?: string;
   address?: string;
   expires?: string;
-  status?: string;
+  status?: PAIAPatronStatus;
   type?: string;
   note?: string;
 }
 
+export enum PAIAPatronStatus {
+  Active = 0,
+  Inactive = 1,
+  InactiveExpired = 2,
+  InactiveOutstandingFees = 3,
+  InactiveExpiredOutstandingFees = 4,
+}
+
 /*
  * Document representing a library item received from the HeBIS PAIA service
  * TODO: would be good to standardize the items of HeBIS PAIA to match the official PAIA documentation
@@ -39,7 +47,7 @@ export interface PAIADocument {
   queue?: string;
   renewals?: string;
   reminder?: string;
-  endtime?: string;
+  starttime?: string;
   duedate?: string;
   cancancel?: boolean;
   canrenew?: boolean;
@@ -80,3 +88,9 @@ export interface DocumentAction {
   action: 'cancel' | 'renew';
   doc: PAIADocument;
 }
+
+export interface PAIADocumentVisualStatus {
+  color: 'warning' | 'success';
+  status: PAIADocumentStatus;
+  statusText: 'ordered' | 'ready';
+}

frontend/app/src/app/modules/map/cluster-leaves.pipe.ts

@@ -0,0 +1,51 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {MapService} from '@maplibre/ngx-maplibre-gl';
+import {Feature, Point} from 'geojson';
+import {MapGeoJSONFeature, type GeoJSONSource} from 'maplibre-gl';
+import {combineLatest, distinctUntilChanged, map, mergeMap, from, Observable, ReplaySubject} from 'rxjs';
+import {SCFeatureProperties} from './feature-collection.pipe';
+
+@Pipe({
+  name: 'mglClusterLeaves',
+  standalone: true,
+  pure: true,
+})
+export class MglClusterLeavesPipe implements PipeTransform {
+  source = new ReplaySubject<string>(1);
+
+  feature = new ReplaySubject<MapGeoJSONFeature>(1);
+
+  limit = new ReplaySubject<number>(1);
+
+  offset = new ReplaySubject<number>(1);
+
+  leaves: Observable<Feature<Point, SCFeatureProperties>[]> = combineLatest([
+    this.source.pipe(
+      distinctUntilChanged(),
+      map(source => this.mapService.getSource(source) as GeoJSONSource),
+    ),
+    this.feature.pipe(distinctUntilChanged(it => it.properties.cluster_id)),
+    this.limit.pipe(distinctUntilChanged()),
+    this.offset.pipe(distinctUntilChanged()),
+  ]).pipe(
+    mergeMap(([source, feature, limit, offset]) =>
+      from(source.getClusterLeaves(feature.properties.cluster_id, limit, offset)),
+    ),
+  );
+
+  constructor(private mapService: MapService) {}
+
+  transform(
+    source: string,
+    feature: MapGeoJSONFeature,
+    limit = 0,
+    offset = 0,
+  ): Observable<Feature<Point, SCFeatureProperties>[]> {
+    // MapLibre triggers change detection when the map moves, so this is to prevent flicker
+    this.source.next(source);
+    this.feature.next(feature);
+    this.limit.next(limit);
+    this.offset.next(offset);
+    return this.leaves;
+  }
+}

frontend/app/src/app/modules/map/controls/attribution.component.ts

@@ -0,0 +1,38 @@
+import {animate, style, transition, trigger} from '@angular/animations';
+import {AsyncPipe} from '@angular/common';
+import {ChangeDetectionStrategy, Component, Input, inject} from '@angular/core';
+import {IonicModule} from '@ionic/angular';
+import {MapService} from '@maplibre/ngx-maplibre-gl';
+import {map, delay, Subject, race, mergeWith} from 'rxjs';
+import {IonIconModule} from 'src/app/util/ion-icon/ion-icon.module';
+
+@Component({
+  selector: 'stapps-map-attribution',
+  templateUrl: './attribution.html',
+  styleUrl: './attribution.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [IonicModule, IonIconModule, AsyncPipe],
+  animations: [
+    trigger('fade', [
+      transition(':enter', [
+        style({opacity: 0, scale: '0.8 1'}),
+        animate('0.2s ease', style({opacity: 1, scale: 1})),
+      ]),
+      transition(':leave', [
+        style({opacity: 1, scale: 1}),
+        animate('0.2s ease', style({opacity: 0, scale: '0.8 1'})),
+      ]),
+    ]),
+  ],
+})
+export class AttributionComponent {
+  @Input() direction: 'left' | 'right' = 'right';
+
+  manualVisible = new Subject<void>();
+
+  hideAttribution = race(
+    this.manualVisible,
+    inject(MapService).mapCreated$.pipe(delay(5000), mergeWith(this.manualVisible)),
+  ).pipe(map((_, i) => i % 2 === 0));
+}

frontend/app/src/app/modules/map/controls/attribution.html

@@ -0,0 +1,8 @@
+@if ((hideAttribution | async) === null) {
+  <ion-button [attr.direction]="direction" @fade class="attribution" color="light"
+    >© OpenStreetMap</ion-button
+  >
+}
+<ion-button class="info" shape="round" color="light" (click)="this.manualVisible.next()">
+  <ion-icon slot="icon-only" name="info"></ion-icon>
+</ion-button>

frontend/app/src/app/modules/map/controls/attribution.scss

@@ -0,0 +1,36 @@
+:host {
+  position: relative;
+}
+
+ion-button {
+  height: 28px;
+  min-height: 28px;
+  margin: 0;
+  font-size: 10px;
+}
+
+ion-button.info {
+  --padding-start: 4px;
+  --padding-end: 4px;
+}
+
+ion-button.attribution {
+  position: absolute;
+  top: -3px;
+
+  &[direction='right'] {
+    --border-radius: 0 14px 14px 0;
+    --padding-start: 14px;
+
+    left: 16px;
+    transform-origin: 0 0;
+  }
+
+  &[direction='left'] {
+    --border-radius: 14px 0 0 14px;
+    --padding-end: 14px;
+
+    right: 16px;
+    transform-origin: 100% 0;
+  }
+}

frontend/app/src/app/modules/map/controls/compass-control.component.ts

@@ -0,0 +1,40 @@
+import {AsyncPipe} from '@angular/common';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {IonicModule} from '@ionic/angular';
+import {MapService} from '@maplibre/ngx-maplibre-gl';
+import {MapEventType} from 'maplibre-gl';
+import {map, mergeMap, fromEventPattern, merge} from 'rxjs';
+import {IonIconModule} from 'src/app/util/ion-icon/ion-icon.module';
+
+@Component({
+  selector: 'stapps-compass-control',
+  templateUrl: './compass-control.html',
+  styleUrl: './compass-control.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AsyncPipe, IonicModule, IonIconModule],
+})
+export class CompassControlComponent {
+  transform = this.mapService.mapCreated$.pipe(
+    mergeMap(() =>
+      merge(
+        fromEventPattern<MapEventType['rotate']>(
+          handler => this.mapService.mapInstance.on('rotate', handler),
+          handler => this.mapService.mapInstance.off('rotate', handler),
+        ),
+        fromEventPattern<MapEventType['pitch']>(
+          handler => this.mapService.mapInstance.on('pitch', handler),
+          handler => this.mapService.mapInstance.off('pitch', handler),
+        ),
+      ),
+    ),
+    map(event => {
+      const pitch = event.target.transform.pitch;
+      const angle = event.target.transform.angle;
+
+      return `rotateX(${pitch}deg) rotateZ(${angle}rad)`;
+    }),
+  );
+
+  constructor(readonly mapService: MapService) {}
+}

frontend/app/src/app/modules/map/controls/compass-control.html

@@ -0,0 +1,7 @@
+<ion-fab-button (click)="mapService.mapInstance.resetNorthPitch()" size="small" color="light">
+  <svg [style.transform]="transform | async" width="24" height="24" viewBox="0 0 32 32">
+    >
+    <path d="m8.5 15 6.56-13.13a1.05 1.05 180 0 1 1.88 0L23.5 15 16 12.5Z" />
+    <path d="m8.5 15 6.56-13.13a1.05 1.05 180 0 1 1.88 0L23.5 15 16 12.5Z" transform="rotate(180 16 16)" />
+  </svg>
+</ion-fab-button>

frontend/app/src/app/modules/map/controls/compass-control.scss

@@ -0,0 +1,11 @@
+path {
+  stroke: none;
+
+  &:first-child {
+    fill: var(--ion-color-primary);
+  }
+
+  &:last-child {
+    fill: var(--ion-color-medium);
+  }
+}

frontend/app/src/app/modules/map/controls/geolocate-control.component.ts

@@ -0,0 +1,91 @@
+import {AsyncPipe} from '@angular/common';
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnDestroy,
+  ViewChild,
+} from '@angular/core';
+import {IonicModule} from '@ionic/angular';
+import {MapService} from '@maplibre/ngx-maplibre-gl';
+import {FitBoundsOptions, GeolocateControl, GeolocateControlOptions} from 'maplibre-gl';
+import {Map as MapLibre} from 'maplibre-gl';
+import {BehaviorSubject} from 'rxjs';
+import {IonIconModule} from 'src/app/util/ion-icon/ion-icon.module';
+
+type WatchState = InstanceType<typeof GeolocateControl>['_watchState'];
+
+class CustomGeolocateControl extends GeolocateControl {
+  constructor(
+    public _container: HTMLElement,
+    watchState: BehaviorSubject<WatchState>,
+    options: GeolocateControlOptions,
+  ) {
+    super(options);
+    Object.defineProperty(this, '_watchState', {
+      get() {
+        return watchState.value;
+      },
+      set(value: WatchState) {
+        watchState.next(value);
+      },
+    });
+  }
+
+  override onAdd(map: MapLibre): HTMLElement {
+    const container = this._container;
+    this._container = document.createElement('div');
+    this._map = map;
+    this._setupUI(true);
+    this._container = container;
+    return this._container;
+  }
+
+  override onRemove() {}
+}
+
+@Component({
+  selector: 'stapps-geolocate-control',
+  templateUrl: './geolocate-control.html',
+  styleUrl: './geolocate-control.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AsyncPipe, IonicModule, IonIconModule],
+})
+export class GeolocateControlComponent implements AfterContentInit, OnDestroy {
+  @Input() position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+  @Input() positionOptions?: PositionOptions;
+
+  @Input() fitBoundsOptions?: FitBoundsOptions;
+
+  @Input() trackUserLocation?: boolean;
+
+  @Input() showUserLocation?: boolean;
+
+  @ViewChild('content', {static: true}) content: ElementRef;
+
+  watchState = new BehaviorSubject<WatchState>('OFF');
+
+  control: CustomGeolocateControl;
+
+  constructor(private mapService: MapService) {}
+
+  ngAfterContentInit() {
+    this.control = new CustomGeolocateControl(this.content.nativeElement, this.watchState, {
+      positionOptions: this.positionOptions,
+      fitBoundsOptions: this.fitBoundsOptions,
+      trackUserLocation: this.trackUserLocation,
+      showUserLocation: this.showUserLocation,
+    });
+    this.mapService.mapCreated$.subscribe(() => {
+      this.mapService.addControl(this.control, this.position);
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.mapService.removeControl(this.control);
+  }
+}

frontend/app/src/app/modules/map/controls/geolocate-control.html

@@ -0,0 +1,18 @@
+<div #content class="maplibregl-ctrl">
+  <ion-fab-button color="light" (click)="control.trigger()">
+    @switch (watchState | async) {
+      @case ('ACTIVE_LOCK') {
+        <ion-icon name="my_location" color="primary"></ion-icon>
+      }
+      @case ('BACKGROUND') {
+        <ion-icon name="location_searching"></ion-icon>
+      }
+      @case ('WAITING_ACTIVE') {
+        <ion-icon name="location_searching"></ion-icon>
+      }
+      @default {
+        <ion-icon name="location_disabled"></ion-icon>
+      }
+    }
+  </ion-fab-button>
+</div>

frontend/app/src/app/modules/map/elements/building-markers.component.ts

@@ -0,0 +1,86 @@
+import {ChangeDetectionStrategy, Component, Input, Optional} from '@angular/core';
+import {GeoJSONSourceComponent, LayerComponent, MapService} from '@maplibre/ngx-maplibre-gl';
+import {FeatureCollection, Polygon} from 'geojson';
+import {SCFeatureProperties} from '../feature-collection.pipe';
+import {
+  FillLayerSpecification,
+  LineLayerSpecification,
+  MapLayerMouseEvent,
+  SymbolLayerSpecification,
+} from 'maplibre-gl';
+import {DataRoutingService} from '../../data/data-routing.service';
+import {MapDataProvider} from '../map-data.provider';
+import {fromEvent, map, startWith, Observable} from 'rxjs';
+import {AsyncPipe} from '@angular/common';
+
+/**
+ * Get a CCS variable value
+ */
+function getCssVariable(color: string) {
+  return getComputedStyle(document.documentElement).getPropertyValue(color);
+}
+
+@Component({
+  selector: 'stapps-building-markers',
+  templateUrl: './building-markers.html',
+  styleUrl: './building-markers.scss',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [GeoJSONSourceComponent, LayerComponent, AsyncPipe],
+})
+export class BuildingMarkersComponent {
+  accentColor = getCssVariable('--ion-color-primary');
+
+  haloColor = fromEvent<MediaQueryListEvent>(
+    window.matchMedia('(prefers-color-scheme: dark)'),
+    'change',
+  ).pipe(
+    map(() => getCssVariable('--ion-background-color')),
+    startWith(getCssVariable('--ion-background-color')),
+  );
+
+  buildingPaint: LineLayerSpecification['paint'] = {
+    'line-color': this.accentColor,
+    'line-width': 2,
+  };
+
+  buildingFillPaint: FillLayerSpecification['paint'] = {
+    'fill-color': `${this.accentColor}22`,
+  };
+
+  buildingLabelLayout: SymbolLayerSpecification['layout'] = {
+    'text-field': '{name}',
+    'text-font': ['barlow-700-normal'],
+    'text-max-width': 8,
+    'text-size': 13,
+  };
+
+  buildingLabelPaint: Observable<SymbolLayerSpecification['paint']> = this.haloColor.pipe(
+    map(haloColor => ({
+      'text-color': this.accentColor,
+      'text-halo-color': haloColor,
+      'text-halo-width': 1,
+    })),
+  );
+
+  @Input({required: true}) data: FeatureCollection<Polygon, SCFeatureProperties>;
+
+  constructor(
+    @Optional() readonly dataProvider: MapDataProvider | null,
+    readonly dataRoutingService: DataRoutingService,
+    readonly mapService: MapService,
+  ) {}
+
+  async featureClick(event: MapLayerMouseEvent) {
+    if (this.dataProvider === null) return;
+
+    if (event.originalEvent.target !== event.target._canvas) return;
+    const feature = event.features?.[0];
+    if (!feature) return;
+
+    const item = this.dataProvider.current.value?.data.find(it => it.uid === feature.properties.uid);
+    if (item === undefined) return;
+
+    this.dataRoutingService.emitChildEvent(item);
+  }
+}

frontend/app/src/app/modules/map/elements/building-markers.html

@@ -0,0 +1,26 @@
+<mgl-geojson-source id="polygons" [data]="data"></mgl-geojson-source>
+<mgl-layer
+  id="stapps-building-fill"
+  type="fill"
+  source="polygons"
+  before="poi_label"
+  [paint]="buildingFillPaint"
+  (layerClick)="featureClick($event)"
+  (layerMouseEnter)="dataProvider !== null && mapService.changeCanvasCursor('pointer')"
+  (layerMouseLeave)="dataProvider !== null && mapService.changeCanvasCursor('grab')"
+></mgl-layer>
+<mgl-layer
+  id="stapps-building-outline"
+  type="line"
+  source="polygons"
+  before="poi_label"
+  [paint]="buildingPaint"
+></mgl-layer>
+<mgl-layer
+  id="stapps-building-label"
+  type="symbol"
+  source="polygons"
+  after="poi_label"
+  [paint]="(buildingLabelPaint | async) || {}"
+  [layout]="buildingLabelLayout"
+></mgl-layer>