fix hardcoded urls. add error handling.

Author: clouless

DEVELOPMENT.md

@@ -1,5 +1,17 @@
 # Development
 
+
+
+```
+yarn start
+```
+
+GoTo http://localhost:4200 and enter in console `localStorage.setItem('LOCAL_DEV', true);`
+
+----
+
+ 
+
 ### CI and Releasing
 
 Git Tagging

README.md

@@ -1,3 +1,11 @@
+[![](https://codeclou.github.io/kartoffelstampf/img/kartoffelstampf.svg)](https://github.com/codeclou/kartoffelstampf/)
+
+ 
+
+> Compress, Squash and Stampf your Images in a convenient way. Out-of-the-Box Docker Image with Web-GUI to perform lossless PNG and JPG compression.
+
+ 
+
 # Kartoffelstampf Client
 
 Microservice of Kartoffelstampf Project that provides the UI as a Browser Single-Page-Application

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kartoffelstampf-client",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",

src/app/services/backend.service.ts

@@ -19,33 +19,43 @@ export type FnOnMessageCallback = (arg1: KartoffelstampfTerminalOutputEntry) =>
 @Injectable()
 export class BackendService {
 
-  private static WEB_SOCKET_COMPRESS_URL = `ws://${window.location.hostname}:9999/`;
-  private static REST_API_UPLOAD_URL = `http://${window.location.hostname}:9999/upload`;
-  private static REST_API_DOWNLOAD_URL = `http://${window.location.hostname}:9999/download`;
+  private restApiBaseUrl: string;
+  private webSocketBaseUrl: string;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+    // Autodetect URLs
+    const hostname = window.location.hostname;
+    const protocol = window.location.protocol;
+    const port = window.location.port;
+    if (protocol === 'https:') {
+      this.restApiBaseUrl = `https://${hostname}${port ? ':' + port : ''}`;
+      this.webSocketBaseUrl = `wss://${hostname}${port ? ':' + port : ''}`;
+    } else {
+      this.restApiBaseUrl = `http://${hostname}${port ? ':' + port : ''}`;
+      this.webSocketBaseUrl = `ws://${hostname}${port ? ':' + port : ''}`;
+    }
+    //
+    // Note on localhost we need to overwrite the URLs
+    //
+    if (localStorage && localStorage.getItem('LOCAL_DEV')) {
+      this.restApiBaseUrl = `http://localhost:9999`;
+      this.webSocketBaseUrl = `ws://localhost:9999`;
+    }
+  }
 
   getDownloadUrl(temporaryFileName: string, originalFileName: string) {
-    return `${BackendService.REST_API_DOWNLOAD_URL}/${temporaryFileName}/${originalFileName}`;
+    return `${this.restApiBaseUrl}/download/${temporaryFileName}/${originalFileName}`;
   }
 
   uploadImage(base64Image: string, type: string) {
     return this.http.post<KartoffelstampfImageUploadResponse>(
-      BackendService.REST_API_UPLOAD_URL, {
+      `${this.restApiBaseUrl}/upload`, {
         contentDataUri: base64Image,
-      } as KartoffelstampfImageUploadRequest, httpOptions)
-    .pipe(
-      catchError((e: HttpErrorResponse) => {
-        console.log(e);
-        return throwError(
-          'Something bad happened; please try again later.'
-        );
-      })
-    );
+      } as KartoffelstampfImageUploadRequest, httpOptions);
   }
 
   runCompressCommand(compressInstruction: KartoffelstampfCompressInstruction): Observable<KartoffelstampfTerminalOutputEntry> {
-    const ws = new WebSocket(BackendService.WEB_SOCKET_COMPRESS_URL);
+    const ws = new WebSocket(`${this.webSocketBaseUrl}/`);
     const subject = new Subject<KartoffelstampfTerminalOutputEntry>();
     ws.onopen = function (event) {
       ws.send(JSON.stringify(compressInstruction));

src/app/types/kartoffelstampf-client.ts

@@ -29,4 +29,5 @@ export class CompressImageJobItem {
   compressDone = false;
   downloadClicked = false;
   terminalLinesExpanded = false;
+  serverError: string = null;
 }

src/app/upload-page/upload-page.component.html

@@ -57,7 +57,10 @@
           {{imageCompressJob.compressedSize ? (1 - (imageCompressJob.compressedSize / imageCompressJob.originalSize) | percent) : '...'}}
         </td>
         <td>
-          <app-spinner *ngIf="!imageCompressJob.compressDone"></app-spinner>
+          <app-spinner *ngIf="imageCompressJob.serverError == null && !imageCompressJob.compressDone"></app-spinner>
+          <span class="error" *ngIf="imageCompressJob.serverError != null">
+            {{imageCompressJob.serverError}}
+          </span>
           <a
             *ngIf="imageCompressJob.compressDone == true"
             [href]="getDownloadUrl(imageCompressJob)"
@@ -71,6 +74,7 @@
       <tr *ngIf="imageCompressJob.terminalLinesExpanded == true">
         <td colspan="5" class="terminal-line-td">
           <app-terminal-output
+            *ngIf="imageCompressJob.serverError == null"
             [temporaryFileName]="imageCompressJob.temporaryFileName"
             [originalFileName]="imageCompressJob.originalFileName"
             [lines]="imageCompressJob.terminalLines"

src/app/upload-page/upload-page.component.ts

@@ -3,7 +3,9 @@ import { BackendService } from '../services/backend.service';
 import { KartoffelstampfTerminalOutputEntry, KartoffelstampfCompressInstruction } from '../types/kartoffelstampf-server';
 import { TerminalLine, CompressImageJobItem } from '../types/kartoffelstampf-client';
 import { finalize, takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
+import { Subject, throwError, of, EMPTY } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { HttpErrorResponse } from '@angular/common/http';
 
 @Component({
   selector: 'app-upload-page',
@@ -40,6 +42,7 @@ import { Subject } from 'rxjs';
       justify-content: flex-start;
       align-items: center;
      }`,
+     `.error { display:block; padding:2px 4px; background-color: #A60000; color:#fff;}`,
    ],
   providers: [BackendService]
 })
@@ -112,9 +115,14 @@ export class UploadPageComponent implements OnInit, OnDestroy {
           self.backendService
             .uploadImage(job.uploadedFileBase64URI, 'PNG')
             .pipe(
-              takeUntil(self.preDestroy)
+              takeUntil(self.preDestroy),
+              catchError((e: any) => {
+                self.imageCompressJobs.push(job);
+                job.serverError = e.error.error;
+                return EMPTY;
+              })
             )
-            .subscribe(uploadResponse => {
+            .subscribe((uploadResponse: any) => {
               job.temporaryFileName = uploadResponse.fileName;
               self.imageCompressJobs.push(job);
               self.runCompressCommand(job);