opt-cc/static/src/app/manage/squads/edit-squad/edit-squad.component.ts

108 lines
3.4 KiB
TypeScript

import {Component, OnDestroy, OnInit, 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';
import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-bar.service';
import {TranslateService} from '@ngx-translate/core';
@Component({
templateUrl: './edit-squad.component.html',
styleUrls: ['./edit-squad.component.scss']
})
export class EditSquadComponent implements OnInit, OnDestroy {
subscription: Subscription;
squad: Squad = {name: '', fraction: '', sortingNumber: 0};
fileList: FileList;
saved = false;
showImageError = false;
imagePreviewSrc;
@ViewChild(NgForm) form: NgForm;
readonly fraction = Fraction;
constructor(private route: ActivatedRoute,
private router: Router,
private squadService: SquadService,
private snackBarService: SnackBarService,
private translate: TranslateService) {
}
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(squad => {
this.saved = true;
this.router.navigate(['..'], {relativeTo: this.route});
});
} else {
this.translate.get('squad.submit.field.logo').subscribe((fieldNameLogo) => {
this.translate.get('public.error.message.required',
{fieldName: fieldNameLogo}).subscribe((message) => {
this.snackBarService.showError(message, 4000);
})
});
}
} else {
if (this.fileList) {
file = this.fileList[0];
}
delete this.squad['__v'];
this.squadService.submitSquad(this.squad, file)
.subscribe(squad => {
setTimeout(() => {
this.imagePreviewSrc = 'resource/squad/' + this.squad._id + '.png?' + Date.now();
}, 300);
fileInput.value = '';
this.snackBarService.showSuccess('generic.save.success');
}, error => {
const errorMsg = error._body ? JSON.parse(error._body).error.message : error.error.error.message;
this.snackBarService.showError('Error: '.concat(errorMsg), 15000);
});
}
}
cancel() {
this.router.navigate([this.squad._id ? '../..' : '..'], {relativeTo: this.route});
return false;
}
}