109 lines
3.0 KiB
TypeScript
109 lines
3.0 KiB
TypeScript
import {Component, ViewChild} from '@angular/core';
|
|
import {ActivatedRoute, Router} from '@angular/router';
|
|
import {NgForm} from '@angular/forms';
|
|
import {Squad} from '../../models/model-interfaces';
|
|
import {SquadService} from '../../services/army-management/squad.service';
|
|
import {Subscription} from 'rxjs/Subscription';
|
|
import {Fraction} from '../../utils/fraction.enum';
|
|
|
|
|
|
@Component({
|
|
templateUrl: './edit-squad.component.html',
|
|
styleUrls: ['./edit-squad.component.css', '../../style/entry-form.css', '../../style/overview.css']
|
|
})
|
|
export class EditSquadComponent {
|
|
|
|
subscription: Subscription;
|
|
|
|
squad: Squad = {name: '', fraction: '', sortingNumber: 0};
|
|
|
|
fileList: FileList;
|
|
|
|
saved = false;
|
|
|
|
showImageError = false;
|
|
|
|
showSuccessLabel = false;
|
|
|
|
imagePreviewSrc;
|
|
|
|
@ViewChild(NgForm) form: NgForm;
|
|
|
|
readonly fraction = Fraction;
|
|
|
|
constructor(private route: ActivatedRoute,
|
|
private router: Router,
|
|
private squadService: SquadService) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.subscription = this.route.params
|
|
.map(params => params['id'])
|
|
.filter(id => id !== undefined)
|
|
.flatMap(id => this.squadService.getSquad(id))
|
|
.subscribe(squad => {
|
|
this.squad = squad;
|
|
this.imagePreviewSrc = 'resource/squad/' + this.squad._id + '.png?' + Date.now();
|
|
});
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this.subscription.unsubscribe();
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
saveSquad(fileInput) {
|
|
let file: File;
|
|
if (!this.squad._id) {
|
|
if (this.fileList) {
|
|
file = this.fileList[0];
|
|
this.squadService.submitSquad(this.squad, file)
|
|
.subscribe(rank => {
|
|
this.saved = true;
|
|
this.router.navigate(['..'], {relativeTo: this.route});
|
|
});
|
|
} else {
|
|
return window.alert(`Bild ist ein Pflichtfeld`);
|
|
}
|
|
} else {
|
|
if (this.fileList) {
|
|
file = this.fileList[0];
|
|
}
|
|
delete this.squad['__v'];
|
|
this.squadService.submitSquad(this.squad, file)
|
|
.subscribe(rank => {
|
|
setTimeout(() => {
|
|
this.imagePreviewSrc = 'resource/squad/' + this.squad._id + '.png?' + Date.now();
|
|
}, 300);
|
|
fileInput.value = '';
|
|
this.showSuccessLabel = true;
|
|
setTimeout(() => {
|
|
this.showSuccessLabel = false;
|
|
}, 2000)
|
|
})
|
|
}
|
|
}
|
|
|
|
cancel() {
|
|
this.router.navigate([this.squad._id ? '../..' : '..'], {relativeTo: this.route});
|
|
return false;
|
|
}
|
|
|
|
canDeactivate(): boolean {
|
|
if (this.saved || !this.form.dirty) {
|
|
return true;
|
|
}
|
|
return window.confirm(`Ihr Formular besitzt ungespeicherte Änderungen, möchten Sie die Seite wirklich verlassen?`);
|
|
}
|
|
|
|
}
|