1. import { Component, OnInit, DoCheck, Input, ViewChild , AfterViewInit, ElementRef, Renderer2   } from '@angular/core';
2. import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
3.  
4. import { Observable, of } from 'rxjs';
5. import { catchError, debounceTime, distinctUntilChanged, tap, map, switchMap, merge, filter } from 'rxjs/operators';
6.  
7. @Component({
8.   selector: 'app-add-trail',
9.   templateUrl: './add-trail.component.html',
10.   styleUrls: ['./add-trail.component.scss']
11. })
12. export class AddTrailComponent implements OnInit, DoCheck, AfterViewInit {
13.  
14.     @Input()
15.     showValidations;
16.    
17.     addTrailForm: FormGroup;
18.     trail_name: FormControl;
19.     lat_start: FormControl;
20.     long_start: FormControl;
21.     lat_end: FormControl;
22.     long_end: FormControl;
23.    
24.     showEditMess : boolean = false;
25.     disabledStart : boolean = false;
26.     disabledEnd : boolean = false;
27.     latitude = 49.822377;
28.     longitude = 19.058384;
29.     mapTypeId = 'terrain';
30.     markers = [];
31.     saveAttr : boolean = true;
32.     private counter : number = 1;
33.    
34.    
35.     constructor(){}
36.  
37.     addMarker(lat: number, lng: number) {
38.         if(this.counter<3){
39.             if(this.counter==1){
40.                 this.lat_start.setValue(lat);
41.                 this.long_start.setValue(lng);
42.                 this.disabledStart = true;
43.             }else if(this.counter==2){
44.                 this.lat_end.setValue(lat);
45.                 this.long_end.setValue(lat);
46.                 this.disabledEnd = true;
47.             }
48.            
49.             this.markers.push({ lat, lng, alpha: 0.4 });
50.         }
51.            
52.         this.counter++;
53.     }
54.    
55.    
56.     ngOnInit() {
57.         this.createFormControls();
58.         this.createForm();
59.     }
60.    
61.   createFormControls() {
62.     this.trail_name = new FormControl('', [Validators.required]);
63.     this.lat_start = new FormControl('', [Validators.required]);
64.     this.long_start = new FormControl('', [Validators.required]);
65.     this.lat_end = new FormControl('', [Validators.required]);
66.     this.long_end = new FormControl('', [Validators.required]);
67.   }
68.  
69.   createForm() {
70.     this.addTrailForm = new FormGroup({
71.       trail_name: this.trail_name,
72.       lat_start: this.lat_start,
73.       long_start: this.long_start,
74.       lat_end: this.lat_end,
75.       long_end: this.long_end,
76.     });
77.   }
78.  
79.   ngDoCheck() {
80.        
81.         if (this.showValidations) {
82.           this.addTrailForm.controls['trail_name'].markAsTouched();
83.           this.addTrailForm.controls['lat_start'].markAsTouched();
84.           this.addTrailForm.controls['long_start'].markAsTouched();
85.           this.addTrailForm.controls['lat_end'].markAsTouched();
86.           this.addTrailForm.controls['long_end'].markAsTouched();
87.         } else if (this.showValidations === false) {
88.           this.addTrailForm.controls['trail_name'].markAsUntouched();
89.           this.addTrailForm.controls['lat_start'].markAsTouched();
90.           this.addTrailForm.controls['long_start'].markAsTouched();
91.           this.addTrailForm.controls['lat_end'].markAsTouched();
92.           this.addTrailForm.controls['long_end'].markAsTouched();
93.         }
94.        
95.         if(this.addTrailForm.status == 'VALID'){
96.             this.saveAttr = false;
97.         }
98.        
99.   }
100.  
101.     ngAfterViewInit() {
102.     }
103.  
104.     saveItem(){
105.         console.log( 'save to database' );
106.         console.log( this.addTrailForm.value )
107.        
108.     }
109.    
110.     deleteMarkers(){
111.         this.markers.length = 0;
112.         this.counter = 1;
113.         this.lat_start.setValue('');
114.         this.long_start.setValue('');
115.         this.lat_end.setValue('');
116.         this.long_end.setValue('');
117.         if(this.addTrailForm.status != 'VALID'){
118.             this.saveAttr = true;
119.         }
120.     }
121.    
122.    
123.  
124. }
125.