106 lines
		
	
	
		
			2.7 KiB
		
	
	
	
		
			TypeScript
		
	
	
			
		
		
	
	
			106 lines
		
	
	
		
			2.7 KiB
		
	
	
	
		
			TypeScript
		
	
	
| import {Component, ViewChild} from "@angular/core";
 | |
| import {ActivatedRoute, Router} from "@angular/router";
 | |
| import {NgForm} from "@angular/forms";
 | |
| import {Rank} from "../../models/model-interfaces";
 | |
| import {RankService} from "../../services/rank-service/rank.service";
 | |
| import {Subscription} from "rxjs/Subscription";
 | |
| 
 | |
| 
 | |
| @Component({
 | |
|   templateUrl: './edit-rank.component.html',
 | |
|   styleUrls: ['./edit-rank.component.css', '../../style/entry-form.css']
 | |
| })
 | |
| export class EditRankComponent {
 | |
| 
 | |
|   subscription: Subscription;
 | |
| 
 | |
|   rank: Rank = {name: '', fraction: '', level: 0};
 | |
| 
 | |
|   fileList: FileList;
 | |
| 
 | |
|   saved = false;
 | |
| 
 | |
|   showImageError = false;
 | |
| 
 | |
|   imagePreviewSrc;
 | |
| 
 | |
|   showSuccessLabel = false;
 | |
| 
 | |
|   @ViewChild(NgForm) form: NgForm;
 | |
| 
 | |
|   constructor(private route: ActivatedRoute,
 | |
|               private router: Router,
 | |
|               private rankService : RankService) {
 | |
|   }
 | |
| 
 | |
|   ngOnInit() {
 | |
|     this.subscription = this.route.params
 | |
|       .map(params => params['id'])
 | |
|       .filter(id => id != undefined)
 | |
|       .flatMap(id => this.rankService.getRank(id))
 | |
|       .subscribe(rank => {
 | |
|         this.rank = rank;
 | |
|         this.imagePreviewSrc = 'resource/rank/' + this.rank._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;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   saveRank(fileInput) {
 | |
|     let file: File;
 | |
|     if (!this.rank._id) {
 | |
|       if (this.fileList) {
 | |
|         file = this.fileList[0];
 | |
|         this.rankService.submitRank(this.rank, 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.rank['__v'];
 | |
|       this.rankService.submitRank(this.rank, file)
 | |
|         .subscribe(rank => {
 | |
|           setTimeout(() => {
 | |
|             this.imagePreviewSrc = 'resource/rank/' + this.rank._id + '.png?' + Date.now();
 | |
|           }, 300);
 | |
|           fileInput.value = '';
 | |
|           this.showSuccessLabel = true;
 | |
|           setTimeout(() => {
 | |
|             this.showSuccessLabel = false;
 | |
|           }, 2000)
 | |
|         })
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   cancel() {
 | |
|     this.router.navigate([this.rank._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?`);
 | |
|   }
 | |
| 
 | |
| }
 |