|
1
|
import {Component, Input, OnInit} from '@angular/core';
|
|
2
|
import {CustomizationOptions} from '../../openaireLibrary/connect/community/CustomizationOptions';
|
|
3
|
import {properties} from '../../../environments/environment';
|
|
4
|
import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
|
|
5
|
import {Subscription} from 'rxjs';
|
|
6
|
|
|
7
|
declare var UIkit;
|
|
8
|
|
|
9
|
@Component({
|
|
10
|
selector: 'background',
|
|
11
|
template: `
|
|
12
|
<color [color]="background.color"
|
|
13
|
[label]="label" [light]="light"
|
|
14
|
(colorChange)=
|
|
15
|
" background.color = $event;"></color>
|
|
16
|
<div *ngIf="upload" >
|
|
17
|
<input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
|
|
18
|
<div *ngIf="!background.imageFile" class=" uk-width-1-1"
|
|
19
|
style="margin-top: 7px;">
|
|
20
|
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
|
|
21
|
<div class=" uk-width-1-1 uk-flex uk-flex-center">
|
|
22
|
<button class="uk-button uk-button-secondary uk-flex uk-flex-middle uk-flex-wrap"
|
|
23
|
(click)="file.click()">
|
|
24
|
<icon name="cloud_upload" [flex]="true"></icon>
|
|
25
|
<span class="uk-margin-small-left">Upload a file</span>
|
|
26
|
</button>
|
|
27
|
</div>
|
|
28
|
|
|
29
|
</div>
|
|
30
|
</div>
|
|
31
|
<div *ngIf="background.imageFile" class="uk-width-1-1 uk-flex uk-flex-middle">
|
|
32
|
<div class="uk-card uk-card-default uk-text-center ">
|
|
33
|
<img class="" [src]="background.imageFile.indexOf('data:')==-1?(properties.utilsService + '/download/'+background.imageFile):background.imageFile">
|
|
34
|
</div>
|
|
35
|
<div class="uk-margin-left">
|
|
36
|
<button (click)="removePhoto()" uk-tooltip="Remove" class="uk-button-secondary outlined uk-icon-button">
|
|
37
|
<icon name="remove"></icon>
|
|
38
|
</button>
|
|
39
|
</div>
|
|
40
|
<div class="uk-margin-small-left">
|
|
41
|
<button class="uk-button-secondary uk-icon-button" (click)="file.click()" uk-tooltip="Edit">
|
|
42
|
<icon name="edit"></icon>
|
|
43
|
</button>
|
|
44
|
</div>
|
|
45
|
</div>
|
|
46
|
</div>
|
|
47
|
`
|
|
48
|
})
|
|
49
|
|
|
50
|
export class BackgroundComponent implements OnInit {
|
|
51
|
@Input() label:string = "";
|
|
52
|
@Input() background;
|
|
53
|
@Input() oldBackground;
|
|
54
|
@Input() light:boolean;
|
|
55
|
@Input() upload:boolean = false;
|
|
56
|
@Input() communityId:string = "";
|
|
57
|
|
|
58
|
public file: File;
|
|
59
|
// public photo: string | ArrayBuffer;
|
|
60
|
private maxsize: number = 200 * 1024;
|
|
61
|
properties;
|
|
62
|
private subscriptions: any[] = [];
|
|
63
|
|
|
64
|
constructor(private utilsService: UtilitiesService) {
|
|
65
|
}
|
|
66
|
|
|
67
|
|
|
68
|
ngOnInit() {
|
|
69
|
this.properties = properties;
|
|
70
|
}
|
|
71
|
ngOnDestroy() {
|
|
72
|
this.subscriptions.forEach(subscription => {
|
|
73
|
if (subscription instanceof Subscription) {
|
|
74
|
subscription.unsubscribe();
|
|
75
|
}
|
|
76
|
});
|
|
77
|
}
|
|
78
|
|
|
79
|
removePhoto() {
|
|
80
|
|
|
81
|
if (typeof document != 'undefined') {
|
|
82
|
(<HTMLInputElement>document.getElementById("photo")).value = "";
|
|
83
|
}
|
|
84
|
// this.initPhoto();
|
|
85
|
console.log(this.background.imageFile + " " + this.oldBackground.imageFile)
|
|
86
|
if(this.background.imageFile != this.oldBackground.imageFile){
|
|
87
|
this.deletePhoto();
|
|
88
|
}
|
|
89
|
this.background.imageFile = null;
|
|
90
|
this.file = null;
|
|
91
|
|
|
92
|
}
|
|
93
|
|
|
94
|
|
|
95
|
|
|
96
|
public deletePhoto() {
|
|
97
|
console.log("deletePhoto")
|
|
98
|
if (this.background.imageFile) {
|
|
99
|
console.log("deletePhoto@@")
|
|
100
|
this.subscriptions.push(this.utilsService.deletePhoto(properties.utilsService + '/delete/stakeholder/' +this.background.imageFile).subscribe());
|
|
101
|
}
|
|
102
|
}
|
|
103
|
|
|
104
|
fileChangeEvent(event) {
|
|
105
|
if (event.target.files && event.target.files[0]) {
|
|
106
|
this.file = event.target.files[0];
|
|
107
|
if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') {
|
|
108
|
UIkit.notification('You must choose a file with type: image/png or image/jpeg!', {
|
|
109
|
status: 'danger',
|
|
110
|
timeout: 6000,
|
|
111
|
pos: 'bottom-right'
|
|
112
|
});
|
|
113
|
this.removePhoto();
|
|
114
|
} else if (this.file.size > this.maxsize) {
|
|
115
|
UIkit.notification('File exceeds size\'s limit ('+this.maxsize/1024+'KB)! ', {
|
|
116
|
status: 'danger',
|
|
117
|
timeout: 6000,
|
|
118
|
pos: 'bottom-right'
|
|
119
|
});
|
|
120
|
this.removePhoto();
|
|
121
|
} else {
|
|
122
|
/*const reader = new FileReader();
|
|
123
|
reader.readAsDataURL(this.file);
|
|
124
|
reader.onload = () => {
|
|
125
|
this.background.imageFile = reader.result;
|
|
126
|
|
|
127
|
};*/
|
|
128
|
this.save();
|
|
129
|
}
|
|
130
|
}
|
|
131
|
}
|
|
132
|
|
|
133
|
public save() {
|
|
134
|
if (this.file) {
|
|
135
|
this.subscriptions.push(this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.communityId+"-"+this.label), this.file).subscribe(res => {
|
|
136
|
this.deletePhoto();
|
|
137
|
this.removePhoto();
|
|
138
|
this.background.imageFile = res.filename;
|
|
139
|
|
|
140
|
}, error => {
|
|
141
|
UIkit.notification("An error has been occurred during upload your image. Try again later", {
|
|
142
|
status: 'danger',
|
|
143
|
timeout: 6000,
|
|
144
|
pos: 'bottom-right'
|
|
145
|
});
|
|
146
|
}));
|
|
147
|
}
|
|
148
|
}
|
|
149
|
}
|