implement image post, put, delete;

frontend/package-lock.json

@@ -3334,6 +3334,21 @@
       "dev": true,
       "optional": true
     },
+    "angular-file-uploader": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/angular-file-uploader/-/angular-file-uploader-7.0.3.tgz",
+      "integrity": "sha512-0wkr/3Vn3toG/2sTSiD5vJ5EK3HKYXwzyFd3M3hRegcHhQnagN34licn4r+CBWJQQED5aRWUVB9OWOCtuNwimw==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+        }
+      }
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",

frontend/package.json

@@ -26,6 +26,7 @@
     "@angular/platform-browser-dynamic": "~9.1.9",
     "@angular/router": "~9.1.9",
     "@types/uuid": "8.3.0",
+    "angular-file-uploader": "^7.0.3",
     "bootstrap": "~4.3.1",
     "jquery": "3.5.1",
     "ngx-logger": "4.1.9",

frontend/src/app/app.module.ts

@@ -21,6 +21,7 @@ import {MatTabsModule} from '@angular/material/tabs';
 import {ImagesComponent} from './component/images/images.component';
 import {MapComponent} from './component/map/map.component';
 import {AgmCoreModule} from '@agm/core';
+import {AngularFileUploaderModule} from 'angular-file-uploader';
 
 @NgModule({
   declarations: [LandingComponent, ImagesComponent, MapComponent],
@@ -48,8 +49,8 @@ import {AgmCoreModule} from '@agm/core';
       premium customer, in which case you can
       use clientId
       */
-        })
+    }),
-
+    AngularFileUploaderModule,
   ],
   // enables injecting
   providers: [

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

@@ -1,18 +1,30 @@
 <h2>Available Images</h2>
 
-<div>
+<div style="font-weight: bolder; font-size: 20px">
-  <span style="width: 9.5em; display: inline-block; margin-left: 1.5em">Name</span>
+  <span style="width: 7.6em; display: inline-block; margin-left: 1em">Name</span>
   <span style="width: 15em; display: inline-block">Date</span>
 </div>
 
-<mat-expansion-panel *ngFor="let image of images | slice:paginationGetStart():paginationGetEnd()">
+<mat-expansion-panel *ngFor="let image of images | slice:paginationGetStart():paginationGetEnd(); let i = index">
   <mat-expansion-panel-header (click)="$event.stopPropagation()">
     <span style="width: 10em"
     >{{image.name}}</span>
     <span style="width: 15em"
     >{{image.datetime}}</span>
   </mat-expansion-panel-header>
-  TEST
+
+  <div style="width: 20em; height: 20em; border: solid; margin-bottom: 1em">
+    IMAGE
+  </div>
+
+  <angular-file-uploader style="margin-left: 0 !important;"
+                         [config]="getImageUpdateConfig(image.filename)"
+
+  >
+  </angular-file-uploader>
+  <span style="float: right">
+    <button mat-raised-button color="warn" (click)="deleteImage(image)">Delete</button>
+  </span>
 </mat-expansion-panel>
 
 <mat-paginator [length]="images.length"
@@ -21,3 +33,8 @@
                (page)="lastPageEvent = $event"
                showFirstLastButtons
 ></mat-paginator>
+
+<h3>Upload New Image</h3>
+<angular-file-uploader style="margin-left: 0 !important;"
+  [config]="imageUploadConfig" id="generalUpload">
+</angular-file-uploader>

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

@@ -1,13 +1,16 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {AfterViewInit, Component, Input, OnInit} from '@angular/core';
 import {PageEvent} from '@angular/material/paginator';
 import {ImageMetadata} from '../../interfaces/interface';
+import {RestService} from '../../services/rest.service';
+import {NGXLogger} from 'ngx-logger';
+import {AngularFileUploaderConfig} from 'angular-file-uploader';
 
 @Component({
   selector: 'app-images',
   templateUrl: './images.component.html',
   styleUrls: ['./images.component.css']
 })
-export class ImagesComponent implements OnInit {
+export class ImagesComponent implements OnInit, AfterViewInit {
 
   @Input()
   images: ImageMetadata[];
@@ -15,12 +18,26 @@ export class ImagesComponent implements OnInit {
   pageSizeOptions: number[] = [5, 10, 25, 100];
   lastPageEvent: PageEvent;
 
-  constructor() { }
+  imageUploadConfig: AngularFileUploaderConfig = {
+    uploadAPI: {
+      url: this.restService.getPostImageUrl()
+    }
+  };
+
+  constructor(
+    public restService: RestService,
+    private logger: NGXLogger
+  ) {
+  }
 
   ngOnInit(): void {
     this.lastPageEvent = {pageIndex: 0, pageSize: this.pageSizeOptions[0], length: this.images.length};
   }
 
+  ngAfterViewInit(): void {
+
+  }
+
   paginationGetStart(): number {
     return this.lastPageEvent.pageIndex * this.lastPageEvent.pageSize;
   }
@@ -29,4 +46,18 @@ export class ImagesComponent implements OnInit {
     return this.paginationGetStart() + this.lastPageEvent.pageSize;
   }
 
+  getImageUpdateConfig(filename: string): AngularFileUploaderConfig {
+    return {
+      uploadAPI: {
+        url: this.restService.getUpdateImageUrl(filename),
+        method: 'PUT'
+      }
+    };
+  }
+
+  deleteImage(image: ImageMetadata) {
+    this.restService.deleteImage(image.filename).toPromise().then(() => {
+      this.images = this.images.filter(im => im !== image);
+    }).catch(err => this.logger.error(err));
+  }
 }

frontend/src/app/interfaces/interface.ts

@@ -3,6 +3,7 @@ export interface StorageHealth {
 }
 
 export interface ImageMetadata {
+  id: string;
   datetime: string;
   device_id: string;
   filename: string;

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

@@ -8,34 +8,42 @@ import {StorageHealth} from '../interfaces/interface';
 
 @Injectable()
 export class RestService {
-  private currentLocation = 'http://' + environment.location + ':' + environment.port + '/';
-  private imageUrl = this.currentLocation + 'image/';
-  private getImageUrl = this.imageUrl + 'get/';
-  private deleteImageUrl = this.imageUrl + 'delete/';
-  private postImageUrl = this.imageUrl + 'post$/';
-  private updateImageUrl = this.imageUrl + 'update/';
-  private healthCheckUrl = this.currentLocation + 'check';
 
   constructor(
     private logger: NGXLogger,
     private http: HttpClient
   ) {
   }
+  private currentLocation = 'http://' + environment.location + ':' + environment.port;
+  private imageUrl = this.currentLocation + '/image';
+  private getImageUrl = this.imageUrl + '/get';
+  private deleteImageUrl = this.imageUrl + '/delete';
+  private postImageUrl = this.imageUrl + '/post';
+  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(
+    return this.http.get<any>(this.getImageUrl + '/all').pipe(
       tap(next => this.logger.debug('getAllImages', next))
     );
   }
 
   public getImage(id: string): Observable<any> {
     return this.http.get<any>(this.getImageUrl + id).pipe(
-      tap(next => this.logger.debug('getImage', id, next))
+      tap(next => this.logger.debug('/getImage', id, next))
     );
   }
 
   public getImageVersion(id: string, version: string): Observable<any> {
-    return this.http.get<any>(this.getImageUrl + id + '/version/' + version).pipe(
+    return this.http.get<any>(this.getImageUrl + '/' + id + '/version/' + version).pipe(
       tap(next => this.logger.debug('getImageVersion', id, version, next))
     );
   }
@@ -46,22 +54,31 @@ export class RestService {
     );
   }
 
-  public deleteImage(id: string): Observable<any> {
+  public deleteImage(filenameWithExtension: string): Observable<any> {
-    return this.http.delete<any>(this.deleteImageUrl + id).pipe(
+    const stripped = RestService.stripUploadFileName(filenameWithExtension);
-      tap(next => this.logger.debug('deleteImage', id, next))
+    return this.http.delete<any>(this.deleteImageUrl + '/' + stripped).pipe(
+      tap(next => this.logger.debug('deleteImage', stripped, next))
     );
   }
 
-  public postImage(id: string, image: any): Observable<any> {
+  // public postImage(id: string, image: any): Observable<any> {
-    return this.http.post<any>(this.postImageUrl + id, image).pipe(
+  //   return this.http.post<any>(this.postImageUrl + '/' + id, image).pipe(
-      tap(next => this.logger.debug('postImage', id, image, next))
+  //     tap(next => this.logger.debug('postImage', id, image, next))
-    );
+  //   );
+  // }
+
+  public getPostImageUrl(): string {
+    return this.postImageUrl;
   }
 
-  public updateImage(id: string, image: any): Observable<any> {
+  // public updateImage(id: string, image: any): Observable<any> {
-    return this.http.put<any>(this.updateImageUrl + id, image).pipe(
+  //   return this.http.put<any>(this.updateImageUrl + '/' + id, image).pipe(
-      tap(next => this.logger.debug('updateImage', id, image, next))
+  //     tap(next => this.logger.debug('updateImage', id, image, next))
-    );
+  //   );
+  // }
+
+  public getUpdateImageUrl(filenameWithExtension: string): string {
+    return this.updateImageUrl + '/' + RestService.stripUploadFileName(filenameWithExtension);
   }
 
   public healthCheck(): Observable<StorageHealth> {

frontend/src/index.html

@@ -12,6 +12,4 @@
 </body>
 </html>
 
-<!--<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>-->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>-->
-<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>-->

frontend/src/styles.css

@@ -5,7 +5,7 @@
 
 body {
   width: 95%;
-  margin: auto;
+  margin: auto !important;
 }
 
 h1, h2 {
@@ -13,5 +13,11 @@ h1, h2 {
 }
 
 h2 {
-  margin-bottom: 1.5em;
+  padding-bottom: 1.5em;
+}
+
+#default {
+  margin-left: 0 !important;
+  padding-left: 0 !important;
+  margin-bottom: 1em;
 }

middleware/app_be/services/mongodbservice.py

@@ -23,6 +23,7 @@ class MongoDBService:
 
         try:
             for meta in col.find():
+                meta['id'] = str(meta['_id'])
                 del meta['_id']
                 resp.append(meta)
         except:

middleware/app_be/urls.py

@@ -23,12 +23,12 @@ from app_be.views.rest_api import TestApiClass, ImageEndpoint, HealthEndpoint
 urlpatterns = [
     path('admin/', admin.site.urls),
     url(r'^image/get/all$', ImageEndpoint.image_api_get_all),
-    url(r'^image/get/(?P<identifier>[\w-]+)$', ImageEndpoint.image_api_get_single),
+    url(r'^image/get/(?P<identifier>[\w.-]+)$', ImageEndpoint.image_api_get_single),
-    url(r'^image/get/(?P<identifier>[\w-]+)/version/(?P<version>[\w-]+)$', ImageEndpoint.image_api_get_single_version),
+    url(r'^image/get/(?P<identifier>[\w.-]+)/version/(?P<version>[\w-]+)$', ImageEndpoint.image_api_get_single_version),
     url(r'^image/delete/all$', ImageEndpoint.image_api_delete_all),
-    url(r'^image/delete/(?P<identifier>[\w-]+)$', ImageEndpoint.image_api_delete),
+    url(r'^image/delete/(?P<identifier>[\w.-]+)$', ImageEndpoint.image_api_delete),
     url(r'^image/post$', ImageEndpoint.image_api_post),
-    url(r'^image/update/(?P<identifier>[\w-]+)$', ImageEndpoint.image_api_update),
+    url(r'^image/update/(?P<identifier>[\w.-]+)$', ImageEndpoint.image_api_update),
     url(r'^check', HealthEndpoint.check_systems)
 ]