opt-cc/static/src/app/request/award/req-award.component.ts

120 lines
3.3 KiB
TypeScript

import {Component, ViewChild} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {Award, Decoration, User} from "../../models/model-interfaces";
import {NgForm} from "@angular/forms";
import {AwardingService} from "../../services/awarding-service/awarding.service";
import {DecorationService} from "../../services/decoration-service/decoration.service";
import {UserService} from "../../services/user-service/user.service";
import {LoginService} from "../../services/login-service/login-service";
@Component({
templateUrl: './req-award.component.html',
styleUrls: ['./req-award.component.css'],
})
export class RequestAwardComponent {
@ViewChild(NgForm) form: NgForm;
showForm = false;
showSuccessLabel = false;
user: User = {_id: '0'};
decoration: Decoration = {_id: '0'};
reason: string = '';
decorations: Decoration[];
awards: Award[];
users: User[];
decoPreviewDisplay = 'none';
constructor(private router: Router,
private route: ActivatedRoute,
private userService: UserService,
private awardingService: AwardingService,
private decorationService: DecorationService,
private loginService: LoginService) {
}
ngOnInit() {
const currentUser = this.loginService.getCurrentUser();
this.userService.findUsers('', undefined, currentUser.squad._id).subscribe(users => {
this.users = users;
});
this.decorationService.findDecorations('', currentUser.squad.fraction).subscribe(decorations => {
this.decorations = decorations;
});
}
toggleUser() {
if (this.user._id !== '0') {
this.awardingService.getUserAwardings(this.user._id).subscribe(awards => {
this.awards = awards;
});
this.showForm = true;
} else {
this.showForm = false;
}
}
toggleDecoPreview(descriptionField, image) {
if (this.decoration._id !== '0') {
this.decoPreviewDisplay = 'flex'; // visible & keep same height for all children
const description = this.decorations.find(
decoration => decoration._id === this.decoration._id
).description;
image.src = 'resource/decoration/' + this.decoration._id + '.png';
descriptionField.innerHTML = description;
} else {
this.decoPreviewDisplay = 'none';
}
}
addAwarding(previewImage, descriptionField) {
if (this.decoration._id && this.reason.length > 0) {
const award: Award = {
"userId": this.user._id,
"decorationId": this.decoration._id,
"reason": this.reason,
"date": Date.now()
};
this.awardingService.requestAwarding(award).subscribe(() => {
this.awardingService.getUserAwardings(this.user._id)
.subscribe(awards => {
this.awards = awards;
this.decoration = {_id: '0'};
this.reason = previewImage.src = descriptionField.innerHTML = '';
this.decoPreviewDisplay = 'none';
this.showSuccessLabel = true;
setTimeout(() => {
this.showSuccessLabel = false;
}, 2000)
})
})
}
}
cancel() {
this.router.navigate(['..'], {relativeTo: this.route});
return false;
}
/**
* compare ngValue with ngModel to assign selected element
*/
equals(o1, o2) {
if (o1 && o2) {
return o1._id === o2._id;
}
}
}