implemented delete;

frontend/src/app/component/images/images.component.html

@@ -18,6 +18,12 @@
     <span style="width: 30em">
       ✓ | X (TO BE DONE)
     </span>
+    <span style="float: right; margin-left: auto; margin-right: 1em;">
+      <button mat-raised-button color="warn"
+              (click)="deleteImage(image); $event.stopPropagation()">
+        Delete
+      </button>
+    </span>
   </mat-expansion-panel-header>
 
   <ng-template matExpansionPanelContent>
@@ -36,16 +42,11 @@
                        [meta]=image
                        (reload)="loadImage(i + paginationGetStart(), $event.split('.')[0])"
     ></app-file-uploader>
-
-    <span style="float: right">
-      <button mat-raised-button color="warn" (click)="deleteImage(image)">
-        Delete
-      </button>
-    </span>
   </ng-template>
 </mat-expansion-panel>
 
-<mat-paginator [length]="images.length"
+<mat-paginator *ngIf="images.length > 0"
+               [length]="images.length"
                [pageSize]="pageSizeOptions[0]"
                [pageSizeOptions]="pageSizeOptions"
                (page)="lastPageEvent = $event"

frontend/src/app/component/images/images.component.ts

@@ -45,7 +45,6 @@ export class ImagesComponent implements OnInit, AfterViewInit {
 
   deleteImage(image: ImageMetadata) {
     this.restService.deleteImage(image.filename.split('.')[0]).toPromise().then(() => {
-      this.images = this.images.filter(im => im !== image);
       this.snackbar.open('Successfully deleted ' + image.filename, 'Dismiss');
       this.reload.emit();
     }).catch(err => this.logger.error(err));

frontend/src/app/component/landing/landing.component.html

@@ -6,7 +6,7 @@
   </span>
 </h1>
 
-<mat-tab-group *ngIf="images.length > 0; else noImages">
+<mat-tab-group *ngIf="images">
   <mat-tab label="Images">
     <app-images [images]="images" (reload)="loadImages()"></app-images>
   </mat-tab>
@@ -14,4 +14,3 @@
     <app-map [images]="images"></app-map>
   </mat-tab>
 </mat-tab-group>
-<ng-template #noImages>No images found</ng-template>

frontend/src/app/services/rest.service.ts

@@ -23,14 +23,6 @@ export class RestService {
   private updateImageUrl = this.imageUrl + '/update';
   private healthCheckUrl = this.currentLocation + '/check';
 
-  private static stripUploadFileName(name: string) {
-    // const generalUploadFileName: string =
-    // (document.getElementById('generalUpload').firstChild as HTMLElement).children[5].children[0].textContent;
-    // this.logger.debug('Get filename', generalUploadFileName);
-    const temp: string[] = name.split('.');
-    return temp.slice(0, temp.length - 1).join('.');
-  }
-
   public getAllImages(): Observable<any> {
     return this.http.get<any>(this.getImageUrl + '/all').pipe(
       tap(next => this.logger.debug('getAllImages', next))
@@ -55,10 +47,9 @@ export class RestService {
     );
   }
 
-  public deleteImage(filenameWithExtension: string): Observable<any> {
+  public deleteImage(filename: string): Observable<any> {
-    const stripped = RestService.stripUploadFileName(filenameWithExtension);
+    return this.http.delete<any>(this.deleteImageUrl + '/' + filename).pipe(
-    return this.http.delete<any>(this.deleteImageUrl + '/' + stripped).pipe(
+      tap(next => this.logger.debug('deleteImage', filename, next))
-      tap(next => this.logger.debug('deleteImage', stripped, next))
     );
   }