Replace resumablejs with ngx-uploadx

package-lock.json

@@ -646,7 +646,7 @@
       "version": "file:dist/common",
       "requires": {
         "angular-oauth2-oidc": "^5.0.2",
-        "resumablejs": "1.1.0",
+        "ngx-uploadx": "^3.1.2",
         "tslib": "^1.9.0"
       }
     },
@@ -6889,6 +6889,14 @@
         }
       }
     },
+    "ngx-uploadx": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/ngx-uploadx/-/ngx-uploadx-3.1.2.tgz",
+      "integrity": "sha512-4SWS5AjucJFUOU7uBUCxXwstKqLOtbrHHRMlTZWKPnDM/fLdpA31ZBvBr2u7nxYL8amadWYkfmA987p9anyXbg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://repository.akkerweb.nl/repository/npm-group/nice-try/-/nice-try-1.0.5.tgz",

projects/common/package-lock.json

@@ -4,40 +4,6 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "@angular/common": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-7.2.0.tgz",
-      "integrity": "sha512-5HNGT+XsY+7sQcNoFRqhbUfVdnBAtXaupmMbBclnQHTon9y9Ijp0ocYi7zxx39feo6xYF5HhBMnDPkFgtAnsYQ==",
-      "requires": {
-        "tslib": "^1.9.0"
-      }
-    },
-    "@angular/core": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-7.2.0.tgz",
-      "integrity": "sha512-tlCDDM9IknXvVLk1sg0lzCO4OREM54i1bFtTpl5kPtugK6l4kYCOH78UzDPHnOzzI3LGLj8Hb2NiObVa9c4fdg==",
-      "requires": {
-        "tslib": "^1.9.0"
-      }
-    },
-    "@ng-bootstrap/ng-bootstrap": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-4.2.1.tgz",
-      "integrity": "sha512-7etP9X9jKIkbuDzU3ngI2jQhHQDZxIu0ErvlkHb7u7YH9akIOLVkXvz2mTMvcFABWZhze64UjFuEgR46b6WGSw==",
-      "requires": {
-        "tslib": "^1.9.0"
-      }
-    },
-    "@ngrx/effects": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-7.2.0.tgz",
-      "integrity": "sha512-vymKSoubYlUWGbiclPK0N/LwB409sB9atjSTQRy2EisZfFtQ2tCDqmk4JGgDy/gV9SqZWrwPSy1xXsLqYnyN3g=="
-    },
-    "@ngrx/store": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-7.2.0.tgz",
-      "integrity": "sha512-E9c0cDot0HeE0mXyeqw18SwmJ2+eKnA5mMMfwvoskpMInCYGI2pq1i6/lCVQ2wrEHSH+KvObK4PQbepcA9vP+w=="
-    },
     "angular-oauth2-oidc": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/angular-oauth2-oidc/-/angular-oauth2-oidc-5.0.2.tgz",
@@ -52,6 +18,14 @@
       "resolved": "https://registry.npmjs.org/jsrsasign/-/jsrsasign-8.0.12.tgz",
       "integrity": "sha1-Iqu5ZW00owuVMENnIINeicLlwxY="
     },
+    "ngx-uploadx": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/ngx-uploadx/-/ngx-uploadx-3.1.2.tgz",
+      "integrity": "sha512-4SWS5AjucJFUOU7uBUCxXwstKqLOtbrHHRMlTZWKPnDM/fLdpA31ZBvBr2u7nxYL8amadWYkfmA987p9anyXbg==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "tslib": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",

projects/common/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@farmmaps/common",
   "version": "0.0.1",
-  "publishConfig":{
+  "publishConfig": {
-    "registry":"https://repository.akkerweb.nl/repository/npm-hosted/"
+    "registry": "https://repository.akkerweb.nl/repository/npm-hosted/"
   },
   "dependencies": {
     "angular-oauth2-oidc": "^5.0.2",
-    "resumablejs": "1.1.0"
+    "ngx-uploadx": "^3.1.2"
   },
   "peerDependencies": {
     "@ng-bootstrap/ng-bootstrap": "^4.2.1",

projects/common/src/lib/common.module.ts

@@ -9,6 +9,7 @@ import { OAuthModule,AuthConfig, OAuthService, OAuthStorage } from 'angular-oaut
 import { StoreModule,Store } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import {UploadxModule } from 'ngx-uploadx';
 
 
 // routing module
@@ -98,7 +99,8 @@ export {FolderService,
     EffectsModule.forFeature([commonEffects.AppCommonEffects]),
     OAuthModule.forRoot(),
     NgbModule,
-    FormsModule
+    FormsModule,
+    UploadxModule
   ],
   providers: [
     DatePipe
@@ -113,7 +115,7 @@ export {FolderService,
     TagInputComponent,
     SessionClearedComponent
   ],
-  exports: [NgbModule, ResumableFileUploadComponent, SidePanelComponent, CommonModule, HttpClientModule, SafePipe, TimespanComponent, TagInputComponent ]
+  exports: [NgbModule,UploadxModule, ResumableFileUploadComponent, SidePanelComponent, CommonModule, HttpClientModule, SafePipe, TimespanComponent, TagInputComponent ]
 })
 export class AppCommonModule {
   static forRoot(): ModuleWithProviders {

projects/common/src/lib/components/resumable-file-upload/resumable-file-upload.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ElementRef, HostListener, ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, HostListener, ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
 import { ResumableFileUploadService, File } from './resumable-file-upload.service';
 import { Subscription } from 'rxjs';
 
@@ -11,28 +11,6 @@ import { Subscription } from 'rxjs';
 
 export class ResumableFileUploadComponent implements OnInit, OnDestroy {
 
-  private browseFileElement$: ElementRef;
-
-  @Input('browseFileElement')
-  get browseFileElement(): ElementRef {
-    return this.browseFileElement$;
-  }
-
-  set browseFileElement(element: ElementRef) {
-    this.uploadService.assignFileBrowse(element);
-    this.browseFileElement$ = element;
-  }
-
-  @Input('browseDirectoryElement')
-  set browseDirectoryElement(element: ElementRef) {
-    this.uploadService.assignDirectoryBrowse(element);
-  }
-
-  @Input('fileDropElement')
-  set fileDropElement(element: ElementRef) {
-    this.uploadService.assignDrop(element);
-  }
-
   @Input('parentCode')
   set parentCode(parentCode: string) {
     if (parentCode && parentCode != "null" && parentCode != "")
@@ -47,6 +25,7 @@ export class ResumableFileUploadComponent implements OnInit, OnDestroy {
     private refreshSub: Subscription;
 
     ngOnInit() {
+      this.uploadService.init();
       this.refreshSub = this.uploadService.refresh.subscribe((e: any) => {
         this.cd.markForCheck();
       });  
@@ -56,7 +35,7 @@ export class ResumableFileUploadComponent implements OnInit, OnDestroy {
       if(this.refreshSub) this.refreshSub.unsubscribe();
     }
 
-    //this.cd.markForCheck();
+    //TODO do this with an canunload guard
     @HostListener('window:beforeunload')
     windowBeforeUnload = function () {
         if (this.uploadService.isUploading) {

projects/common/src/lib/components/resumable-file-upload/resumable-file-upload.service.ts

@@ -1,17 +1,13 @@
-import { Injectable, ElementRef } from '@angular/core';
+import { Injectable, OnDestroy } from '@angular/core';
 import { OAuthService } from 'angular-oauth2-oidc';
-import { Subject ,  of } from 'rxjs';
+import { Subject , Subscription } from 'rxjs';
-import { HttpClient, HttpParams } from "@angular/common/http";
+import { HttpClient } from "@angular/common/http";
+import { UploadxService, UploadState} from 'ngx-uploadx';
+import { AppConfig } from '../../shared/app.config';
 
 
-declare var require; // avoid missing property error on require
+@Injectable({ providedIn: 'root' })
-
+export class ResumableFileUploadService implements OnDestroy{
-@Injectable()
-export class ResumableFileUploadService {
-  private resumable: any;
-  private dropElement: ElementRef;
-  private fileBrowseElement: ElementRef;
-  private directoryBrowseElement: ElementRef;
   public files: Array<File> = new Array<File>();
   public isUploading = false;
   public totalProgress = "0";
@@ -19,138 +15,58 @@ export class ResumableFileUploadService {
   public isMinimized = false;
   public parentCode: string;
   public refresh: Subject<any> = new Subject<any>();
+  private _eventSub:Subscription;
+  private initialized = false;
 
-  constructor(private httpClient: HttpClient,private oauthService: OAuthService) {
+  constructor(private httpClient: HttpClient,private oauthService: OAuthService,private uploadService: UploadxService,public appConfig: AppConfig) {
-    this.init();
+   
   }
 
-  init = function () {
+  endPoint() {
-    this.ref
+    return `${this.appConfig.getConfig("apiEndPoint")}/api/v1/file`;
-    require.ensure([], require => {
+  }
-      let Resumable = require('./resumable.js');
-      var other = this;
-      this.resumable = new Resumable(
-        {
-          target: '/api/v1/file/chunk',
-          query: function (file, chunk) {
-            var options = {};
-            if (file.parentCode) options["parentCode"] = file.parentCode;
-            if (chunk.tested) {
-              if (file.file.geoRefJson) options["geoRefJson"] = file.file.geoRefJson;
-              if (file.file.attributes) options["attributes"] = file.file.attributes;
-            }                         
-            return options;
-          },
-          headers: function (file) {
-            return { Authorization: "Bearer " + other.oauthService.getAccessToken() }
-          },
-          generateUniqueIdentifier: function (file, event) {
-            var params = new HttpParams()
-              .set("name", file.fileName || file.name)
-              .set("size", file.size);
 
-            return other.httpClient.post("/api/v1/file",params).toPromise().then(res => res.code);
+  init() {
-          },
+    if(!this.initialized) {
-          chunkNumberParameterName: 'chunkNumber',
+      this._eventSub=this.uploadService.init({
-          chunkSizeParameterName: 'chunkSize',
+        endpoint:this.endPoint(),
-          currentChunkSizeParameterName: 'currentChunkSize',
+        token:() => this.oauthService.getAccessToken(),
-          totalSizeParameterName: 'size',
+        chunkSize: 2097152}).subscribe((uploadState:UploadState) => {
-          typeParameterName: 'type',
+        this.handleState(uploadState);  
-          identifierParameterName: 'code',
+     } );
-          fileNameParameterName: 'name',
+     this.initialized=true;  
-          relativePathParameterName: 'relativePath',
+    }
-          totalChunksParameterName: 'totalChunks'
+  }
-        }
-      ) as any;
 
-      var other = this;
+  handleState(state:UploadState) {
-
+      switch(state.status) {
-      this.resumable.on('catchAll', function (event) {
+        case "added": {
-        other.isUploading = other.resumable.isUploading();
+            this.files.push(new File(state));
-        other.totalProgress = (other.resumable.progress() * 100).toFixed(0);
+        };break;
-        other.refresh.next({});
+        case "uploading":
-      });
+        case "complete": {
-
+            var file =this.files.find((f) => f.identifier == state.uploadId )
-      this.resumable.on('filesAdded', function (files) {
+            if(file) {
-        files.forEach(function (file) {
+              file.progress = (state.progress * 100) + '%';
-          file.parentCode = other.parentCode;
+            }
-          other.files.push(new File(file));
+        };break;
-        });
+      }
-        other.isClosed = false;
-        other.resumable.upload();
-      });
-
-      this.resumable.on('fileSuccess', function (file) {
-        var index = other.getIndex(file);
-        if (index >= 0) {
-          other.files[index].success = true;
-        }
-      });
-
-      this.resumable.on('error', function (message,file) {
-        var index = other.getIndex(file);
-        if (index >= 0) {
-          other.files[index].error = true;
-          other.files[index].errorMessage = message;
-        }
-      });
-
-      this.resumable.on('fileProgress', function (file) {
-        var index = other.getIndex(file);
-        if (index >= 0) {
-          other.files[index].progress = (file.progress() * 100) + '%';
-        }
-      });
-
-      if (this.dropElement) this.resumable.assignDrop(this.dropElement);
-      if (this.fileBrowseElement) this.resumable.assignBrowse(this.fileBrowseElement);
-      if (this.directoryBrowseElement) this.resumable.assignBrowse(this.directoryBrowseElement, true);
-    });
   }
 
   addFiles = (files: any[], event: any, geoRefJson?: string, attributes?: any) => {
     for (let f of files) {
-      if (geoRefJson) f.geoRefJson = geoRefJson;
+      this.uploadService.handleFile(f);
-      if (attributes) f.attributes = JSON.stringify(attributes);
+      // if (geoRefJson) f.geoRefJson = geoRefJson;
+      // if (attributes) f.attributes = JSON.stringify(attributes);
     }
-    this.resumable.addFiles(files, event);
   }
-
+  
-  assignDrop = function (element: ElementRef) {
-    if (this.resumable) {
-      this.resumable.assignDrop(element);
-    }
-    this.dropElement = element;
-  }
-
-  assignFileBrowse = function (element: ElementRef) {
-    if (this.resumable) {
-      this.resumable.assignBrowse(element);
-    }
-    this.fileBrowseElement = element;
-  }
-
-  assignDirectoryBrowse = function (element: ElementRef) {
-    if (this.resumable) {
-      this.resumable.assignBrowse(element, true);
-    }
-    this.directoryBrowseElement = element;
-  }
-
-  getIndex = function (file) {
-    for (var i = 0; i < this.files.length; i++) {
-      if (this.files[i].identifier == file.uniqueIdentifier)
-        return i;
-    }
-    return -1;
-  }
-
   toggleMinimize = function () {
     this.isMinimized = !this.isMinimized;
   };
 
   cancelFile = function (file) {
-    file.file.cancel();
+    this.uploadService.control({action:'cancel',uploadId:file.identifier});    
     var index = this.files.indexOf(file, 0);
     if (index > -1) {
       this.files.splice(index, 1);
@@ -158,7 +74,7 @@ export class ResumableFileUploadService {
   };
 
   doClose = function () {
-    this.resumable.cancel();
+    this.uploadService.control({action:'cancelAll'});
     this.files = new Array<File>();
     this.isClosed = true;
   }
@@ -172,6 +88,10 @@ export class ResumableFileUploadService {
       this.doClose();
     }
   }
+
+  ngOnDestroy() {
+    if(this._eventSub) this._eventSub.unsubscribe();
+  }
 }
 
 export class File {
@@ -184,11 +104,11 @@ export class File {
   public errorMessage: string;
 
 
-  constructor(file: any) {
+  constructor(state: UploadState) {
-    this.file = file;
+    this.file = state;
-    this.fileName = file.fileName;
+    this.fileName = state.file.name;
-    this.progress = (file.progress() * 100) + '%';
+    this.progress = (state.progress * 100) + '%';
-    this.identifier = file.uniqueIdentifier;
+    this.identifier = state.uploadId;
     this.success = false;
     this.error = false;
     this.errorMessage = "";

projects/common/src/lib/components/timespan/timespan.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit,Input,ViewChild,ElementRef,OnChanges,AfterViewInit,ChangeDetectorRef,Output, EventEmitter,SimpleChanges } from '@angular/core';
+import { Component, OnInit,Input,ViewChild,OnChanges,ChangeDetectorRef,Output, EventEmitter,SimpleChanges } from '@angular/core';
 import { DatePipe } from '@angular/common';
 import {NgbPopover} from '@ng-bootstrap/ng-bootstrap';
 

projects/common/src/lib/services/event.service.ts

@@ -9,13 +9,13 @@ import { AppConfig } from "../shared/app.config";
 @Injectable()
 export class EventService {
 
-    public event:Subject <IEventMessage> = new Subject<IEventMessage>();
+  public event:Subject <IEventMessage> = new Subject<IEventMessage>();
   private _connection: HubConnection = null;
   private _apiEndPoint: string;
     
   constructor(private oauthService: OAuthService, private appConfig: AppConfig) {
-    this._apiEndPoint = ""; //appConfig.getConfig("apiEndPoint");
+    this._apiEndPoint = appConfig.getConfig("apiEndPoint");
-    this._connection = new HubConnectionBuilder().withUrl(`${this._apiEndPoint}/eventHub`).configureLogging(LogLevel.Information).build();
+    this._connection = new HubConnectionBuilder().withUrl(`${ this._apiEndPoint}/eventHub`).configureLogging(LogLevel.Information).build();
     this._connection.start().then(() => {
       var accessToken = oauthService.getAccessToken();
       if (accessToken) {

projects/common/src/lib/services/folder.service.ts

@@ -8,10 +8,12 @@ import { AppConfig } from "../shared/app.config";
 
 @Injectable()
 export class FolderService {
-    private _apiEndPoint: string;
 
-    constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
+  constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
-      this._apiEndPoint = "";//appConfig.getConfig("apiEndPoint");
+  }
+
+  ApiEndpoint() {
+    return this.appConfig.getConfig("apiEndPoint");
   }
 
   parseDates(item: any): IListItem {
@@ -22,31 +24,31 @@ export class FolderService {
   }
 
     getFolder(code: string): Observable<IListItem> {
-      return this.httpClient.get<IListItem>(`${this._apiEndPoint}/api/v1/folders/${code}`).pipe(map(i => this.parseDates(i)));            
+      return this.httpClient.get<IListItem>(`${this.ApiEndpoint()}/api/v1/folders/${code}`).pipe(map(i => this.parseDates(i)));            
     }
 
     getMyRoots(): Observable<IListItem[]> {
-      return this.httpClient.get<IListItem[]>(`${this._apiEndPoint}/api/v1/folders/my_roots`).pipe(map(ia => ia.map(i => this.parseDates(i))));
+      return this.httpClient.get<IListItem[]>(`${this.ApiEndpoint()}/api/v1/folders/my_roots`).pipe(map(ia => ia.map(i => this.parseDates(i))));
     }    
 
     getFolderParents(code: string): Observable<IListItem[]> {
-      return this.httpClient.get<IListItem[]>(`${this._apiEndPoint}/api/v1/folders/${code}/parents`).pipe(map(ia => ia.map(i => this.parseDates(i))));
+      return this.httpClient.get<IListItem[]>(`${this.ApiEndpoint()}/api/v1/folders/${code}/parents`).pipe(map(ia => ia.map(i => this.parseDates(i))));
     }
 
     getChildFolders(code: string): Observable<IListItem[]> {
-      return this.httpClient.get<IListItem[]>(`${this._apiEndPoint}/api/v1/folders/${code}/listfolders`).pipe(map(ia => ia.map(i => this.parseDates(i))));
+      return this.httpClient.get<IListItem[]>(`${this.ApiEndpoint()}/api/v1/folders/${code}/listfolders`).pipe(map(ia => ia.map(i => this.parseDates(i))));
     }
 
     getItems(code: string,skip:number, take:number): Observable<IListItem[]> {
-      return this.httpClient.get<IListItem[]>(`${this._apiEndPoint}/api/v1/folders/${code}/list?skip=${skip}&take=${take}`).pipe(map(ia => ia.map(i => this.parseDates(i))));
+      return this.httpClient.get<IListItem[]>(`${this.ApiEndpoint()}/api/v1/folders/${code}/list?skip=${skip}&take=${take}`).pipe(map(ia => ia.map(i => this.parseDates(i))));
     }
 
     moveItem(itemCode: string, newParentCode: string): Observable<IListItem> {
         const body = { itemCode: itemCode,newParentCode: newParentCode };
-      return this.httpClient.post<IListItem>(`${this._apiEndPoint}/api/v1/items/move`, body).pipe(map(i => this.parseDates(i)));
+      return this.httpClient.post<IListItem>(`${this.ApiEndpoint()}/api/v1/items/move`, body).pipe(map(i => this.parseDates(i)));
     }
 
     createFolder(folder: IItem): Observable<IListItem> {
-      return this.httpClient.post<IListItem>(`${this._apiEndPoint}/api/v1/folders/`, folder).pipe(map(i => this.parseDates(i)));
+      return this.httpClient.post<IListItem>(`${this.ApiEndpoint()}/api/v1/folders/`, folder).pipe(map(i => this.parseDates(i)));
     }
 }

projects/common/src/lib/services/item.service.ts

@@ -9,10 +9,11 @@ import { AppConfig } from "../shared/app.config";
 
 @Injectable()
 export class ItemService {
-  private _apiEndPoint: string;
-
   constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
-    this._apiEndPoint = ""; //appConfig.getConfig("apiEndPoint");
+  }
+
+  ApiEndpoint() {
+    return this.appConfig.getConfig("apiEndPoint");
   }
 
   parseDates(item: any): IItem {
@@ -23,7 +24,7 @@ export class ItemService {
   }
 
   getItemTypes(): Observable<{ [id: string]: IItemType }> {
-    return this.httpClient.get<{ [id: string]: IItemType }>(`${this._apiEndPoint}/api/v1/itemtypes/`);
+    return this.httpClient.get<{ [id: string]: IItemType }>(`${this.ApiEndpoint()}/api/v1/itemtypes/`);
   }
 
   getFeatures(extent: number[], crs: string, searchText?: string, searchTags?:string,startDate?:Date,endDate?:Date): Observable<any> {
@@ -34,21 +35,21 @@ export class ItemService {
     if (searchTags) params = params.append("t", searchTags);
     if (startDate) params = params.append("sd", startDate.toISOString());
     if (endDate) params = params.append("ed", endDate.toISOString());
-    return this.httpClient.get<any>(`${this._apiEndPoint}/api/v1/items/features/`, {params:params});
+    return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/features/`, {params:params});
   }
 
   getFeature(code:string, crs: string): Observable<any> {
     var params = new HttpParams();
     params = params.append("crs", crs);
-    return this.httpClient.get<any>(`${this._apiEndPoint}/api/v1/items/${code}/feature/`, { params: params });
+    return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/feature/`, { params: params });
   }
 
   getItem(code: string): Observable<IItem> {
-    return this.httpClient.get<IItem>(`${this._apiEndPoint}/api/v1/items/${code}`).pipe(map(i => this.parseDates(i)));
+    return this.httpClient.get<IItem>(`${this.ApiEndpoint()}/api/v1/items/${code}`).pipe(map(i => this.parseDates(i)));
   }
 
   getItemByCodeAndType(code: string, itemType: string): Observable<IItem> {
-    return this.httpClient.get<IItem>(`${this._apiEndPoint}/api/v1/items/${code}/${itemType}`);
+    return this.httpClient.get<IItem>(`${this.ApiEndpoint()}/api/v1/items/${code}/${itemType}`);
   }
 
   getItemList(itemType: string, dataFilter?: any, level: number = 1): Observable<IItem[]> {
@@ -58,7 +59,7 @@ export class ItemService {
       params = params.append("df", JSON.stringify(dataFilter));
     }
     params = params.append("lvl", itemType);
-    return this.httpClient.get<IItem[]>(`${this._apiEndPoint}/api/v1/items/`, { params: params }).pipe(map(ia => ia.map(i => this.parseDates(i))));
+    return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/`, { params: params }).pipe(map(ia => ia.map(i => this.parseDates(i))));
   }
 
   getChildItemList(parentcode: string, itemType: string, dataFilter?: any, level: number = 1): Observable<IItem[]> {
@@ -68,7 +69,7 @@ export class ItemService {
       params = params.append("df", JSON.stringify(dataFilter));
     }
     params = params.append("lvl", level.toString());
-    return this.httpClient.get<IItem[]>(`${this._apiEndPoint}/api/v1/items/${parentcode}/children`, { params: params });
+    return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/${parentcode}/children`, { params: params });
   }
 
   getChildItemListByExtent(parentcode: string, itemType: string, extent: number[], crs: string, dataFilter?: any, level: number = 1): Observable<IItem[]> {
@@ -80,7 +81,7 @@ export class ItemService {
       params = params.append("df", JSON.stringify(dataFilter));
     }
     params = params.append("lvl", level.toString());
-    return this.httpClient.get<IItem[]>(`${this._apiEndPoint}/api/v1/items/${parentcode}/children`, { params: params });
+    return this.httpClient.get<IItem[]>(`${this.ApiEndpoint()}/api/v1/items/${parentcode}/children`, { params: params });
   }
 
   getItemFeatures(code: string, extent: number[], crs: string, layerIndex?:number): Observable<any> {
@@ -88,32 +89,32 @@ export class ItemService {
     params = params.append("bbox", extent.join(","));
     params = params.append("crs", crs);
     if(layerIndex!=null)
-      return this.httpClient.get<any>(`${this._apiEndPoint}/api/v1/items/${code}/features/layer/${layerIndex}`, { params: params });
+      return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/features/layer/${layerIndex}`, { params: params });
     else
-      return this.httpClient.get<any>(`${this._apiEndPoint}/api/v1/items/${code}/features`, { params: params });
+      return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/features`, { params: params });
   }
 
   putItem(item:IItem): Observable<IItem> {
-    return this.httpClient.put<IItem>(`${this._apiEndPoint}/api/v1/items/${item.code}`,item);
+    return this.httpClient.put<IItem>(`${this.ApiEndpoint()}/api/v1/items/${item.code}`,item);
   }
 
   deleteItems(itemCodes:string[]): Observable<any> {
-    return this.httpClient.post<any>(`${this._apiEndPoint}/api/v1/items/delete`, itemCodes);
+    return this.httpClient.post<any>(`${this.ApiEndpoint()}/api/v1/items/delete`, itemCodes);
   }
 
   getTemporalLast(code: string): Observable<any> {
-    return this.httpClient.get<any>(`${this._apiEndPoint}/api/v1/items/${code}/temporal/last`);
+    return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/temporal/last`);
   }
 
   getTemporal(code: string, startDate?: Date, endDate?: Date): Observable<any> {
     var params = new HttpParams();
     if (startDate) params = params.append("sd", startDate.toISOString());
     if (endDate) params = params.append("ed", endDate.toISOString());
-    return this.httpClient.get<any>(`${this._apiEndPoint}/api/v1/items/${code}/temporal/`, { params: params });
+    return this.httpClient.get<any>(`${this.ApiEndpoint()}/api/v1/items/${code}/temporal/`, { params: params });
   }
 
   postItemTask(item: IItem, task: IItemTask): Observable<IItemTask> {
-    return this.httpClient.post<IItemTask>(`${this._apiEndPoint}/api/v1/items/${item.code}/tasks`, task);
+    return this.httpClient.post<IItemTask>(`${this.ApiEndpoint()}/api/v1/items/${item.code}/tasks`, task);
   }
 }
 

projects/common/src/lib/services/typeahead.service.ts

@@ -6,17 +6,18 @@ import { AppConfig } from "../shared/app.config";
 
 @Injectable()
 export class TypeaheadService {
-  private _apiEndPoint: string;
-
   constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
-    this._apiEndPoint = appConfig.getConfig("apiEndPoint");
+  }
+
+  ApiEndpoint() {
+    return this.appConfig.getConfig("apiEndPoint");
   }
 
   getSearchTypeaheadItems(searchText:string,skip:number = 0,take:number = 10): Observable<ITypeaheadItem[]> {
-    return this.httpClient.get<ITypeaheadItem[]>(`${this._apiEndPoint}/api/v1/typeahead/search/?q=${searchText}&skip=${skip}&take=${take}`);
+    return this.httpClient.get<ITypeaheadItem[]>(`${this.ApiEndpoint()}/api/v1/typeahead/search/?q=${searchText}&skip=${skip}&take=${take}`);
   }
 
   getTagTypeaheadItems(searchText: string, skip: number = 0, take: number = 10): Observable<ITypeaheadItem[]> {
-    return this.httpClient.get<ITypeaheadItem[]>(`${this._apiEndPoint}/api/v1/typeahead/tag/?q=${searchText}&skip=${skip}&take=${take}`);
+    return this.httpClient.get<ITypeaheadItem[]>(`${this.ApiEndpoint()}/api/v1/typeahead/tag/?q=${searchText}&skip=${skip}&take=${take}`);
   }  
 }

projects/common/src/lib/services/user.service.ts

@@ -6,13 +6,14 @@ import { AppConfig } from "../shared/app.config";
 
 @Injectable()
 export class UserService {
-  private _apiEndPoint: string;
-
   constructor(public httpClient: HttpClient, public appConfig: AppConfig) {
-    this._apiEndPoint = "";//appConfig.getConfig("apiEndPoint");
+  }
+
+  ApiEndpoint() {
+    return this.appConfig.getConfig("apiEndPoint");
   }
 
   getCurrentUser(): Observable<IUser> {
-    return this.httpClient.get<IUser>(`${this._apiEndPoint}/api/v1/currentuser`);
+    return this.httpClient.get<IUser>(`${this.ApiEndpoint()}/api/v1/currentuser`);
   }
 }

src/app/app-content.component.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-content',
-  template: '<div>Hello daar</div>'
+  template: '<div style="display:block;width:100%;height:200px;" >Hello daar<input type="file" [uploadx]="{chunkSize:2097152}" /> </div><resumable-file-upload></resumable-file-upload>'  
 })
 export class AppContentComponent {
 }

src/app/app.component.html

@@ -1,23 +1,9 @@
-<!--The content below is only a placeholder and can be replaced.-->
 <div style="text-align:center">
   <h1>
     Welcome to {{ title }}!
   </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 </div>
 <h2>Common Test</h2>
 <router-outlet></router-outlet>
-<ul>
+
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
 

src/configuration.json

@@ -1,8 +1,8 @@
 {
     "issuer": "http://accounts.awtest.nl",
     "clientId": "v1t",
-    "audience": "http://localhost:8082/,http://awtest.nl/,http://aan.awtest.nl",
+    "audience": "http://localhost:8083/,http://awtest.nl/,http://aan.awtest.nl",
     "requireHttps": false,
-    "apiEndPoint": "http://localhost:8082"
+    "apiEndPoint": "http://localhost:8083"
   }