improves importing of data

Author: conlooptechnologies

back-end/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "api",
-  "version": "preview-2.0.2",
+  "version": "preview-2.0.3",
   "description": "Climsoft API",
   "author": "Climsoft Foundation",
   "private": true,

front-end/pwa/package.json

@@ -1,6 +1,6 @@
 {
   "name": "climsoftweb",
-  "version": "preview-2.0.2",
+  "version": "preview-2.0.3",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

front-end/pwa/src/app/core/dashboard/dashboard.component.html

@@ -33,6 +33,6 @@ <h2>
     </div>
 
     <footer class="text-muted text-center mt-5 small">
-        Climsoft Web (preview-2.0.2-alpha) is a free and open-source modern climate and hydrology data management platform.
+        Climsoft Web (preview-2.0.3) is a free and open-source modern climate and hydrology data management platform.
     </footer>
 </div>

front-end/pwa/src/app/data-ingestion/import-entry/import-entry.component.html

@@ -1,7 +1,8 @@
 <div *ngIf="viewSource" class="card border-0">
   <div class="card-header d-flex px-1 py-0 flex-column">
     <div *ngIf="showStationSelection" class="mt-1">
-      <app-station-selector-single [label]="'Station'" [includeOnlyIds]="onlyIncludeStationIds" [(selectedId)]="selectedStationId" />
+      <app-station-selector-single [label]="'Station'" [includeOnlyIds]="onlyIncludeStationIds"
+        [(selectedId)]="selectedStationId" />
     </div>
     <div class="mt-1 mb-1 d-flex justify-content-between align-items-center">
       <div>
@@ -22,12 +23,9 @@
       <div class="mt-4" [class.text-danger]="uploadError">
         {{ uploadMessage }}
       </div>
-
       <div class="mt-4 px-4 w-100" *ngIf="showUploadProgress">
         <div class="progress">
-          <div class="progress-bar progress-bar-striped" style="width: 100%" [style.width.%]="uploadProgress">
-            {{ uploadProgress === 100? 'Processing...': uploadProgress + '%'}}
-          </div>
+          <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%"> </div>
         </div>
       </div>
 

front-end/pwa/src/app/data-ingestion/import-entry/import-entry.component.ts

@@ -21,7 +21,6 @@ export class ImportEntryComponent implements OnInit, OnDestroy {
   protected uploadMessage: string = "Upload File";
   protected uploadError: boolean = false;
   protected showUploadProgress: boolean = false;
-  protected uploadProgress: number = 0;
 
   protected showStationSelection: boolean = false;
   protected selectedStationId!: string | null;
@@ -53,7 +52,6 @@ export class ImportEntryComponent implements OnInit, OnDestroy {
         } else {
           this.onlyIncludeStationIds = [];
         }
-        console.log('station permission: ', user.permissions.entryPermissions.stationIds)
       } else {
         throw new Error('Data entry not allowed');
       }
@@ -86,7 +84,6 @@ export class ImportEntryComponent implements OnInit, OnDestroy {
     this.destroy$.complete();
   }
 
-
   protected onFileSelected(fileInputEvent: any): void {
     if (fileInputEvent.target.files.length === 0) {
       return;
@@ -100,68 +97,50 @@ export class ImportEntryComponent implements OnInit, OnDestroy {
 
     this.disableUpload = true;
     this.showUploadProgress = true;
-    this.uploadProgress = 0;
     this.uploadError = false;
-    this.uploadMessage = "Uploading file..."
+    this.uploadMessage = "Uploading and processing file..."
 
     // Get the file and append it as the form data to be sent
     const selectedFile = fileInputEvent.target.files[0] as File;
     const formData = new FormData();
     formData.append('file', selectedFile);
 
-    const params = new HttpParams();
     let url = `${this.appConfigService.apiBaseUrl}/observations/upload/${this.viewSource.id}`;
     // If station id is provided, append it as a route parameter
     if (this.showStationSelection && this.selectedStationId) {
       url = url + "/" + this.selectedStationId;
     }
 
-    this.http.post(
-      url,
-      formData,
-      {
-        reportProgress: true,
-        observe: 'events',
-        params: params
-      }).pipe(
-        catchError(error => {
-          console.log("Error returned: ", error);
-          return throwError(() => new Error('Something bad happened. Please try again later.'));
-        })
-      ).subscribe(event => {
-        if (event.type === HttpEventType.UploadProgress) {
-          if (event.total) {
-            this.uploadProgress = Math.round(100 * (event.loaded / event.total));
-            this.uploadMessage = this.uploadProgress < 100 ? "Uploading file..." : "Processing file...";
-          }
-        } else if (event.type === HttpEventType.Response) {
-          this.disableUpload = false;
-          // Clear the file input
-          fileInputEvent.target.value = null;
-
-          // Reset upload progress
-          this.showUploadProgress = false;
-          this.uploadProgress = 0;
-          this.uploadError = false;
-
-          if (!event.body) {
-            this.uploadMessage = "Something went wrong!";
-            this.uploadError = true;
-            return;
-          }
-
-          let response: string = (event.body as any).message;
-          if (response === "success") {
-            this.uploadMessage = "Imported data successfully saved!";
-          } else {
-            this.uploadMessage = response;
-            this.uploadError = true;
-          }
+    this.http.post(url, formData).pipe(
+      take(1),
+      catchError(error => {
+        this.disableUpload = false;
+        this.showUploadProgress = false;
+        this.uploadMessage = 'Something bad happened. Please try again later.';
+        this.uploadError = true;
+        console.log("Error returned: ", error);
+        return error;
+      }),
+    ).subscribe(res => {
+      this.disableUpload = false;
+      this.showUploadProgress = false;
+      // Clear the file input
+      fileInputEvent.target.value = null;
+
+      if (res) {
+        let message: string = (res as any).message;
+        if (message === "success") {
+          this.uploadMessage = "File successfully uploaded and processed!";
+        } else {
+          this.uploadMessage = message;
+          this.uploadError = true;
         }
-      });
+      } else {
+        this.uploadMessage = "Something went wrong!";
+        this.uploadError = true;
+      }
 
+    });
   }
 
-
-
 }