95 lines
2.8 KiB
TypeScript
95 lines
2.8 KiB
TypeScript
import {Component} from "@angular/core";
|
|
import {ActivatedRoute, Router} from "@angular/router";
|
|
import {Decoration} from "../../models/model-interfaces";
|
|
import {DecorationService} from "../../services/decoration-service/decoration.service";
|
|
|
|
@Component({
|
|
templateUrl: './decoration-overview.component.html',
|
|
styleUrls: ['./decoration-overview.component.css', '../../style/overview.css'],
|
|
})
|
|
export class DecorationOverviewComponent {
|
|
|
|
id: string;
|
|
|
|
showSuccessLabel = false;
|
|
|
|
showImageError = false;
|
|
|
|
decoration: Decoration;
|
|
|
|
fileList: FileList;
|
|
|
|
previewImage;
|
|
|
|
constructor(private router: Router,
|
|
private route: ActivatedRoute,
|
|
private decorationService: DecorationService) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.route.params.subscribe((params) => {
|
|
this.decorationService.getDecoration(params['id']).subscribe(decoration => {
|
|
this.decoration = decoration;
|
|
this.previewImage = 'resource/decoration/' + this.decoration._id + '.png?' + Date.now();
|
|
})
|
|
})
|
|
}
|
|
|
|
// register file change and save to fileList
|
|
fileChange(event) {
|
|
if (!event.target.files[0].name.endsWith('.png')) {
|
|
this.showImageError = true;
|
|
this.fileList = undefined;
|
|
} else {
|
|
this.showImageError = false;
|
|
this.fileList = event.target.files;
|
|
}
|
|
}
|
|
|
|
update(attrName, inputField) {
|
|
const inputValue = inputField.value;
|
|
if (inputValue.length > 0 && (this.decoration[attrName] !== inputValue || attrName === 'description')) {
|
|
const updateObject = {_id: this.decoration._id};
|
|
updateObject[attrName] = inputValue;
|
|
this.decorationService.submitDecoration(updateObject)
|
|
.subscribe(decoration => {
|
|
this.decoration = decoration;
|
|
if (attrName != 'description') {
|
|
inputField.value = '';
|
|
}
|
|
this.showSuccessLabel = true;
|
|
setTimeout(() => {
|
|
this.showSuccessLabel = false;
|
|
}, 2000)
|
|
})
|
|
}
|
|
}
|
|
|
|
updateGraphic(fileInput) {
|
|
if (this.fileList && this.fileList.length > 0) {
|
|
let file: File = this.fileList[0];
|
|
this.decorationService.submitDecoration({_id: this.decoration._id}, file)
|
|
.subscribe((res) => {
|
|
setTimeout(() => {
|
|
this.previewImage = 'resource/decoration/' + this.decoration._id + '.png?' + Date.now();
|
|
}, 300);
|
|
fileInput.value = '';
|
|
this.showSuccessLabel = true;
|
|
setTimeout(() => {
|
|
this.showSuccessLabel = false;
|
|
}, 2000)
|
|
})
|
|
}
|
|
}
|
|
|
|
deleteDecoration(confirm) {
|
|
if (confirm.toLowerCase() === this.decoration.name.toLocaleLowerCase()) {
|
|
this.decorationService.deleteDecoration(this.decoration)
|
|
.subscribe((res) => {
|
|
this.router.navigate(['../..'], {relativeTo: this.route});
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|