zenon/federated-storage
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

implement image post, put, delete;

Browse Source
This commit is contained in:
Marco Zeisler 2021-01-11 21:45:14 +01:00
parent 54083540d1
commit 63f7d733dc
11 changed files with 154 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/package-lock.json generated
View File

@ -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",

1
frontend/package.json
View File

@ -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",

59
frontend/src/app/app.module.ts
View File

@ -18,39 +18,40 @@ import {MatCardModule} from '@angular/material/card';
import {MatPaginatorModule} from '@angular/material/paginator';
import {MatTableModule} from '@angular/material/table';
import {MatTabsModule} from '@angular/material/tabs';
import { ImagesComponent } from './component/images/images.component';
import { MapComponent } from './component/map/map.component';
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],
imports: [
ReactiveFormsModule,
BrowserModule,
BrowserAnimationsModule,
LoggerModule.forRoot({level: environment.log_level, serverLogLevel: NgxLoggerLevel.ERROR}),
HttpClientModule,
MatFormFieldModule,
FormsModule,
MatButtonModule,
MatInputModule,
MatSlideToggleModule,
MatListModule,
MatExpansionModule,
MatCardModule,
MatPaginatorModule,
MatTableModule,
MatTabsModule,
// GoogleMapsModule,
AgmCoreModule.forRoot({
apiKey: 'AIzaSyBDgLJ1sL48IQg7e5jrwmUyXkqeEfVnf78'
/* apiKey is required, unless you are a
premium customer, in which case you can
use clientId
*/
})
],
imports: [
ReactiveFormsModule,
BrowserModule,
BrowserAnimationsModule,
LoggerModule.forRoot({level: environment.log_level, serverLogLevel: NgxLoggerLevel.ERROR}),
HttpClientModule,
MatFormFieldModule,
FormsModule,
MatButtonModule,
MatInputModule,
MatSlideToggleModule,
MatListModule,
MatExpansionModule,
MatCardModule,
MatPaginatorModule,
MatTableModule,
MatTabsModule,
// GoogleMapsModule,
AgmCoreModule.forRoot({
apiKey: 'AIzaSyBDgLJ1sL48IQg7e5jrwmUyXkqeEfVnf78'
/* apiKey is required, unless you are a
premium customer, in which case you can
use clientId
*/
}),
AngularFileUploaderModule,
],
// enables injecting
providers: [
RestService,

25
frontend/src/app/component/images/images.component.html
View File

@ -1,18 +1,30 @@
<h2>Available Images</h2>
<div>
<span style="width: 9.5em; display: inline-block; margin-left: 1.5em">Name</span>
<div style="font-weight: bolder; font-size: 20px">
<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>

37
frontend/src/app/component/images/images.component.ts
View File

@ -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));
}
}

1
frontend/src/app/interfaces/interface.ts
View File

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

59
frontend/src/app/services/rest.service.ts
View File

@ -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> {
return this.http.delete<any>(this.deleteImageUrl + id).pipe(
tap(next => this.logger.debug('deleteImage', id, next))
public deleteImage(filenameWithExtension: string): Observable<any> {
const stripped = RestService.stripUploadFileName(filenameWithExtension);
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> {
return this.http.post<any>(this.postImageUrl + id, image).pipe(
tap(next => this.logger.debug('postImage', id, image, next))
);
// public postImage(id: string, image: any): Observable<any> {
// return this.http.post<any>(this.postImageUrl + '/' + id, image).pipe(
// tap(next => this.logger.debug('postImage', id, image, next))
// );
// }
public getPostImageUrl(): string {
return this.postImageUrl;
}
public updateImage(id: string, image: any): Observable<any> {
return this.http.put<any>(this.updateImageUrl + id, image).pipe(
tap(next => this.logger.debug('updateImage', id, image, next))
);
// public updateImage(id: string, image: any): Observable<any> {
// return this.http.put<any>(this.updateImageUrl + '/' + id, image).pipe(
// tap(next => this.logger.debug('updateImage', id, image, next))
// );
// }
public getUpdateImageUrl(filenameWithExtension: string): string {
return this.updateImageUrl + '/' + RestService.stripUploadFileName(filenameWithExtension);
}
public healthCheck(): Observable<StorageHealth> {

4
frontend/src/index.html
View File

@ -12,6 +12,4 @@
</body>
</html>
<!--<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>-->
<!--<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>-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

10
frontend/src/styles.css
View File

@ -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;
}

1
middleware/app_be/services/mongodbservice.py
View File

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

8
middleware/app_be/urls.py
View File

@ -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-]+)/version/(?P<version>[\w-]+)$', ImageEndpoint.image_api_get_single_version),
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/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)
]