FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix thumbnail editing, add blobtodataurl method
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma 2021-08-05 16:33:31 +02:00
parent 1daa8e257f
commit eb1157d608
3 changed files with 53 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
projects/common/src/fm/components/thumbnail/thumbnail.component.html
View File

@ -1,9 +1,9 @@
<div #thumbnail class="thumbnail" [style.background-color]="itemTypeService.getColor(item.itemType)" >
<div class="content">
<img *ngIf="item.thumbnail" class="card-img-top" [src]="getThumbnailUrl(item)" />
<div *ngIf="!item.thumbnail" class="large-icon" [style.font-size]="getFontSize()" [style.line-height]="getLineHeight()"><i [ngClass]="itemTypeService.getIcon(item.itemType)"></i></div>
<img *ngIf="hasThumbnail()" class="card-img-top" [src]="getThumbnailUrl(item)" />
<div *ngIf="!hasThumbnail()" class="large-icon" [style.font-size]="getFontSize()" [style.line-height]="getLineHeight()"><i [ngClass]="itemTypeService.getIcon(item.itemType)"></i></div>
<div *ngIf="canEdit()" class="edit btn btn-secondary rounded-circle" (click)="onEditClick()"><i class="fal fa-camera"></i></div>
</div>
</div>
<fm-edit-image-modal #modal (changed)="onChanged()"></fm-edit-image-modal>
<fm-edit-image-modal #modal (changed)="onChanged($event)"></fm-edit-image-modal>

47
projects/common/src/fm/components/thumbnail/thumbnail.component.ts
View File

@ -1,7 +1,8 @@
import { Component,Input ,ViewChild,ElementRef,ChangeDetectorRef} from '@angular/core';
import { Component,Input ,ViewChild,ElementRef,ChangeDetectorRef, Output,EventEmitter} from '@angular/core';
import { Store } from '@ngrx/store';
import { IListItem } from '../../models/list.item';
import { ImageService } from '../../services/image.service';
import { commonReducers,ItemTypeService } from '../../../public-api'
import { EditImageModalComponent} from '../edit-image-modal/edit-image-modal.component';
import { AppConfig } from "../../shared/app.config";
@ -16,14 +17,25 @@ import { AppConfig } from "../../shared/app.config";
export class ThumbnailComponent {
@Input() public item: IListItem;
@Input() public edit: boolean = false;
@Input() public save: boolean = true;
@Output() changed = new EventEmitter();
@ViewChild('thumbnail') el:ElementRef;
@ViewChild('modal') modal:EditImageModalComponent;
constructor(public store: Store<commonReducers.State>, public itemTypeService: ItemTypeService,public appConfig: AppConfig,private changeDetector:ChangeDetectorRef) {
public image = null;
private endpoint = "";
public thumnailUrl = "";
constructor(public store: Store<commonReducers.State>, public itemTypeService: ItemTypeService,public appConfig: AppConfig,private changeDetector:ChangeDetectorRef,public imageService:ImageService) {
}
getThumbnailUrl(item:IListItem):string {
return this.appConfig.getConfig("apiEndPoint")+item.url+'/thumbnail?v=' + Date.parse(item.updated);
if(this.image == null && this.item.thumbnail) {
this.thumnailUrl = this.appConfig.getConfig("apiEndPoint")+item.url+'/thumbnail?v=' + Date.parse(item.updated);
} else if (this.image == null) {
this.thumnailUrl = "";
}
return this.thumnailUrl;
}
getFontSize():string {
@ -47,15 +59,28 @@ import { AppConfig } from "../../shared/app.config";
return this.edit && this.item != null;
}
onEditClick() {
var endpoint = `${this.appConfig.getConfig("apiEndPoint")}/api/v1/items/${this.item.code}/thumbnail`;
this.modal.open(endpoint,4/3);
hasThumbnail():boolean {
return (this.item && this.item.thumbnail) || this.image != null;
}
onChanged() {
if(this.item) {
this.item.updated = new Date(new Date().getTime()).toISOString();
this.changeDetector.detectChanges();
}
onEditClick() {
this.endpoint = `${this.appConfig.getConfig("apiEndPoint")}/api/v1/items/${this.item.code}/thumbnail`;
this.modal.open(this.endpoint,4/3,false,200,false);
}
onChanged(event:any) {
this.image = event.croppedImage;
this.imageService.blobToDataUrl(event.croppedImage).then(url => {
this.thumnailUrl = url
this.changeDetector.detectChanges();
if(this.save) this.saveImage();
this.changed.emit(event.croppedImage);
});
}
saveImage() {
if(this.image) {
this.imageService.putImage(this.endpoint,this.image).subscribe(() => {});
}
}
}

14
projects/common/src/fm/services/image.service.ts
View File

@ -48,4 +48,18 @@ export class ImageService {
blobToFile(blob:Blob, filename:string):File {
return new File([blob],filename,{type:blob.type});
}
blobToDataUrl(blob:File):Promise<string> {
return new Promise<string>((resolve) => {
let reader = new FileReader();
reader.addEventListener('error', () => {
resolve("");
});
reader.addEventListener("load", function () {
resolve(reader.result as string);
}, false);
reader.readAsDataURL(blob);
});
}
}