feat(config)!: update config file for better iiif support (DSP-1880) (#511)

* chore(config)!: consistent config

* refactor(app): move app init service to app root

* refactor(representation): upload service was already there

* feat(upload)!: new iiif url config

Author: kilchenmann

…p/main/services/app-init.service.spec.ts src/app/app-init.service.spec.tssrc/app/main/services/app-init.service.spec.ts renamed to src/app/app-init.service.spec.ts src/app/main/services/app-init.service.spec.ts renamed to src/app/app-init.service.spec.ts

@@ -0,0 +1,86 @@
+import { Injectable } from '@angular/core';
+import { KnoraApiConfig } from '@dasch-swiss/dsp-js';
+import { DspIiifConfig } from './main/declarations/dsp-iiif-config';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AppInitService {
+
+    dspApiConfig: KnoraApiConfig;
+    dspIiifConfig: DspIiifConfig;
+
+    config: object;
+
+    constructor() {
+    }
+
+    /**
+     * fetches and initialises the configuration.
+     *
+     * @param path path to the config file.
+     * @param env environment to be used (dev or prod).
+     */
+    Init(path: string, env: { name: string; production: boolean }): Promise<void> {
+
+        return new Promise<void>((resolve, reject) => {
+            fetch(`${path}/config.${env.name}.json`).then(
+                (response: Response) => response.json()).then(dspAppConfig => {
+
+
+                // check for presence of apiProtocol and apiHost
+                if (typeof dspAppConfig.apiProtocol !== 'string' || typeof dspAppConfig.apiHost  !== 'string') {
+                    throw new Error('config misses required members: apiProtocol and/or apiHost');
+                }
+
+                // make input type safe
+                const apiPort = (typeof dspAppConfig.apiPort === 'number' ? dspAppConfig.apiPort : null);
+                const apiPath = (typeof dspAppConfig.apiPath === 'string' ? dspAppConfig.apiPath : '');
+                const jsonWebToken = (typeof dspAppConfig.jsonWebToken === 'string' ? dspAppConfig.jsonWebToken : '');
+                const logErrors = (typeof dspAppConfig.logErrors === 'boolean' ? dspAppConfig.logErrors : false);
+
+                // init dsp-api configuration
+                this.dspApiConfig = new KnoraApiConfig(
+                    dspAppConfig.apiProtocol,
+                    dspAppConfig.apiHost,
+                    apiPort,
+                    apiPath,
+                    jsonWebToken,
+                    logErrors
+                );
+
+                const iiifPort = (typeof dspAppConfig.iiifPort === 'number' ? dspAppConfig.iiifPort : null);
+                const iiifPath = (typeof dspAppConfig.iiifPath === 'string' ? dspAppConfig.iiifPath : '');
+
+                // init iiif configuration
+                this.dspIiifConfig = new DspIiifConfig(
+                    dspAppConfig.iiifProtocol,
+                    dspAppConfig.iiifHost,
+                    iiifPort,
+                    iiifPath
+                );
+
+                // get all options from config
+                this.config = dspAppConfig;
+
+                // set sanitized standard config options
+                this.config['apiProtocol'] = dspAppConfig.apiProtocol;
+                this.config['apiHost'] = dspAppConfig.apiHost;
+                this.config['apiPort'] = apiPort;
+                this.config['apiPath'] = apiPath;
+                this.config['jsonWebToken'] = jsonWebToken;
+                this.config['logErrors'] = logErrors;
+                this.config['iiifProtocol'] = dspAppConfig.iiifProtocol;
+                this.config['iiifHost'] = dspAppConfig.iiifHost;
+                this.config['iiifPort'] = iiifPort;
+                this.config['iiifPath'] = iiifPath;
+                this.config['iiifUrl'] = this.dspIiifConfig.iiifUrl;
+
+                resolve();
+            }
+            ).catch((err) => {
+                reject(err);
+            });
+        });
+    }
+}

src/app/app-init.service.ts

@@ -8,7 +8,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { KnoraApiConnection } from '@dasch-swiss/dsp-js';
 import {
-    AppInitService,
     DspActionModule,
     DspApiConfigToken,
     DspApiConnectionToken,
@@ -23,6 +22,7 @@ import { PdfViewerModule } from 'ng2-pdf-viewer';
 import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { AppInitService } from './app-init.service';
 import { CookiePolicyComponent } from './main/cookie-policy/cookie-policy.component';
 import { DialogHeaderComponent } from './main/dialog/dialog-header/dialog-header.component';
 import { DialogComponent } from './main/dialog/dialog.component';

src/app/app.module.ts

@@ -0,0 +1,44 @@
+/**
+ * configuration to instantiate the iiif url.
+ *
+ * @category Config
+ */
+export class DspIiifConfig {
+
+    static readonly PROTOCOL_HTTP = 'http';
+    static readonly PROTOCOL_HTTPS = 'https';
+
+    static readonly DEFAULT_PORT_HTTP = 80;
+    static readonly DEFAULT_PORT_HTTPS = 443;
+
+    /**
+     * the full IIIF URL
+     */
+    get iiifUrl(): string {
+        return (
+            (this.iiifProtocol + '://' + this.iiifHost) +
+            (this.iiifPort !== null ? ':' + this.iiifPort : '') +
+            this.iiifPath
+        );
+    }
+
+    /**
+     * @param iiifProtocol the protocol of the API (http or https)
+     * @param iiifHost the DSP-API base URL
+     * @param iiifPort the port of DSP-API
+     * @param iiifPath the base path following host and port, if any.
+     */
+    constructor(public iiifProtocol: 'http' | 'https',
+        public iiifHost: string,
+        public iiifPort: number | null = null,
+        public iiifPath: string = '') {
+
+        // remove port in case it's the default one
+        if (iiifProtocol === DspIiifConfig.PROTOCOL_HTTP && iiifPort === DspIiifConfig.DEFAULT_PORT_HTTP) {
+            this.iiifPort = null;
+        } else if (iiifProtocol === DspIiifConfig.PROTOCOL_HTTPS && iiifPort === DspIiifConfig.DEFAULT_PORT_HTTPS) {
+            this.iiifPort = null;
+        }
+
+    }
+}

src/app/main/declarations/dsp-iiif-config.ts

@@ -1,6 +1,7 @@
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
-import { AppInitService, Session, SessionService } from '@dasch-swiss/dsp-ui';
+import { Session, SessionService } from '@dasch-swiss/dsp-ui';
+import { AppInitService } from 'src/app/app-init.service';
 import { UploadedFileResponse, UploadFileService } from './upload-file.service';
 
 describe('UploadFileService', () => {
@@ -15,7 +16,7 @@ describe('UploadFileService', () => {
 
         const appInitSpy = {
             config: {
-                iiifUrl: 'https://sipi.dasch.swiss/'
+                'iiifUrl': 'https://iiif.dasch.swiss'
             }
         };
 
@@ -82,7 +83,7 @@ describe('UploadFileService', () => {
             }
         );
 
-        const httpRequest = httpTestingController.expectOne('https://sipi.dasch.swiss/upload?token=myToken');
+        const httpRequest = httpTestingController.expectOne('https://iiif.dasch.swiss/upload?token=myToken');
 
         expect(httpRequest.request.method).toEqual('POST');
 

src/app/main/services/app-init.service.ts

@@ -1,7 +1,8 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { AppInitService, SessionService } from '@dasch-swiss/dsp-ui';
+import { SessionService } from '@dasch-swiss/dsp-ui';
 import { Observable } from 'rxjs';
+import { AppInitService } from 'src/app/app-init.service';
 
 export interface UploadedFile {
     fileType: string;
@@ -19,7 +20,7 @@ export interface UploadedFileResponse {
 })
 export class UploadFileService {
 
-    iiifHost: string = (this._init.config['iiifUrl'].substr(-1) === '/') ? this._init.config['iiifUrl'] : this._init.config['iiifUrl'] + '/';
+    iiifUrl: string = (this._init.config['iiifUrl'].substr(-1) === '/') ? this._init.config['iiifUrl'] : this._init.config['iiifUrl'] + '/';
 
     constructor(
         private readonly _init: AppInitService,
@@ -32,14 +33,15 @@ export class UploadFileService {
      * @param (file)
      */
     upload(file: FormData): Observable<UploadedFileResponse> {
-        const baseUrl = `${this.iiifHost}upload`;
+
+        const uploadUrl = `${this.iiifUrl}upload`;
 
         // checks if user is logged in
         const jwt = this._session.getSession()?.user.jwt;
         const params = new HttpParams().set('token', jwt);
 
         // --> TODO in order to track the progress change below to true and 'events'
         const options = { params, reportProgress: false, observe: 'body' as 'body' };
-        return this._http.post<UploadedFileResponse>(baseUrl, file, options);
+        return this._http.post<UploadedFileResponse>(uploadUrl, file, options);
     }
 }

src/app/workspace/resource/representation/upload/upload-file.service.spec.ts

@@ -1,6 +1,6 @@
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
-import { AppInitService } from 'src/app/main/services/app-init.service';
+import { AppInitService } from 'src/app/app-init.service';
 import { DisplayPlace, GeonameService } from './geoname.service';
 
 const geonamesGetResponse = {

src/app/workspace/resource/representation/upload/upload-file.service.ts

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable, throwError } from 'rxjs';
 import { catchError, map, shareReplay } from 'rxjs/operators';
-import { AppInitService } from 'src/app/main/services/app-init.service';
+import { AppInitService } from 'src/app/app-init.service';
 
 export interface GIS {
     longitude: number;