opt-cc/static/src/app/users/award-user/award-user.component.ts

115 lines
3.3 KiB
TypeScript

import {Component, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Award, Decoration} from '../../models/model-interfaces';
import {NgForm} from '@angular/forms';
import {AwardingService} from '../../services/army-management/awarding.service';
import {DecorationService} from '../../services/army-management/decoration.service';
import {Fraction} from '../../utils/fraction.enum';
@Component({
templateUrl: './award-user.component.html',
styleUrls: ['./award-user.component.css', '../../style/overview.css', '../../style/hide-scrollbar.css'],
})
export class AwardUserComponent {
@ViewChild(NgForm) form: NgForm;
showSuccessLabel = false;
userId: string;
decorations: Decoration[];
awards: Award[];
decoPreviewDisplay = 'none';
readonly fraction = Fraction;
constructor(private router: Router,
private route: ActivatedRoute,
private awardingService: AwardingService,
private decorationService: DecorationService) {
}
ngOnInit() {
this.decorationService.findDecorations().subscribe(decorations => {
this.decorations = decorations;
});
this.route.params
.map(params => params['id'])
.flatMap(id => this.awardingService.getUserAwardings(id))
.subscribe(awards => {
this.awards = awards;
});
this.route.params
.map(params => params['id'])
.subscribe(id => this.userId = id);
}
toggleDecoPreview(descriptionField, decorationId, image) {
if (decorationId !== '0') {
this.decoPreviewDisplay = 'flex'; // visible & keep same height for all children
const description = this.decorations.find(
decoration => decoration._id === decorationId
).description;
image.src = 'resource/decoration/' + decorationId + '.png';
descriptionField.innerHTML = description;
} else {
this.decoPreviewDisplay = 'none';
}
}
addAwarding(decorationField, reasonField, previewImage, descriptionField) {
const decorationId = decorationField.value;
const reason = reasonField.value;
if (decorationId && reason.length > 0) {
const award = {
'userId': this.userId,
'decorationId': decorationId,
'reason': reason,
'date': Date.now()
};
this.awardingService.addAwarding(award).subscribe(() => {
this.awardingService.getUserAwardings(this.userId)
.subscribe(awards => {
this.awards = awards;
this.decoPreviewDisplay = 'none';
decorationField.value = undefined;
reasonField.value = previewImage.src = descriptionField.innerHTML = '';
this.showSuccessLabel = true;
setTimeout(() => {
this.showSuccessLabel = false;
}, 2000);
});
});
}
}
deleteAwarding(awardingId) {
this.awardingService.deleteAwarding(awardingId).subscribe((res) => {
this.awardingService.getUserAwardings(this.userId)
.subscribe((awards) => {
this.awards = awards;
this.showSuccessLabel = true;
setTimeout(() => {
this.showSuccessLabel = false;
}, 2000);
});
});
}
cancel() {
this.router.navigate(['../..'], {relativeTo: this.route});
return false;
}
}