1 | import { Component, EventEmitter, OnInit, Output } from '@angular/core';
|
---|
2 | import { FormBuilder, FormControl } from '@angular/forms';
|
---|
3 | import { map, startWith, switchMap } from 'rxjs/operators';
|
---|
4 | import { Observable } from 'rxjs';
|
---|
5 | import { CityService } from '../_services/city.service';
|
---|
6 | import { City } from '../_models/city';
|
---|
7 | import { Companion } from '../_models/companion';
|
---|
8 | import { CompanionService } from '../_services/companion.service';
|
---|
9 | import { Category } from '../_models/category';
|
---|
10 | import { CategoryService } from '../_services/cateogry.service';
|
---|
11 | import { MatChip } from '@angular/material/chips';
|
---|
12 | import { LocationService } from '../_services/location.service';
|
---|
13 | import { Region } from '../_models/region';
|
---|
14 | import { RegionService } from '../_services/region.service';
|
---|
15 | import { ActivatedRoute, Params, Router } from '@angular/router';
|
---|
16 | import { Location } from '../_models/location';
|
---|
17 |
|
---|
18 |
|
---|
19 |
|
---|
20 | @Component({
|
---|
21 | selector: 'app-locations-form',
|
---|
22 | templateUrl: './locations-form.component.html',
|
---|
23 | styleUrls: ['./locations-form.component.css']
|
---|
24 | })
|
---|
25 | export class LocationsFormComponent implements OnInit {
|
---|
26 |
|
---|
27 | myControl = new FormControl();
|
---|
28 | cities: City[];
|
---|
29 | regions: Region[];
|
---|
30 | companions: Companion[];
|
---|
31 | categories: Category[];
|
---|
32 | filteredOptions: Observable<City[]>;
|
---|
33 | disableSelect = new FormControl(false);
|
---|
34 | chipsSeletion: number[];
|
---|
35 | categoryIds: string;
|
---|
36 | locationId: number;
|
---|
37 | regionId: number;
|
---|
38 | cityId: number;
|
---|
39 | companionId: number;
|
---|
40 | lengthOfStay: number;
|
---|
41 | cityOption: boolean = false;
|
---|
42 | regionOption: boolean = false;
|
---|
43 | value: number;
|
---|
44 | max: number;
|
---|
45 | toggle = true;
|
---|
46 | status = 'Enable';
|
---|
47 | proba: any[];
|
---|
48 |
|
---|
49 |
|
---|
50 | constructor(private cityService: CityService, private regionService: RegionService,
|
---|
51 | private companionService: CompanionService, private categoryService: CategoryService,
|
---|
52 | private locationService: LocationService, private router: Router, private fb: FormBuilder, private route: ActivatedRoute) {
|
---|
53 | this.filteredOptions = new Observable<City[]>();
|
---|
54 | this.cities = [];
|
---|
55 | this.regions = [];
|
---|
56 | this.companions = [];
|
---|
57 | this.categories = [];
|
---|
58 | this.chipsSeletion = [];
|
---|
59 | this.locationId = 0;
|
---|
60 | this.companionId = 0;
|
---|
61 | this.lengthOfStay = 1;
|
---|
62 | this.categoryIds = '';
|
---|
63 | this.regionId = 0;
|
---|
64 | this.cityId = 0;
|
---|
65 | this.value = 0;
|
---|
66 | this.max = 30;
|
---|
67 | this.proba = [];
|
---|
68 | }
|
---|
69 |
|
---|
70 | ngOnInit(): void {
|
---|
71 |
|
---|
72 | this.filteredOptions = this.myControl.valueChanges
|
---|
73 | .pipe(
|
---|
74 | startWith(''),
|
---|
75 | switchMap(val => {
|
---|
76 | return this.filter(val || '')
|
---|
77 | })
|
---|
78 | );
|
---|
79 |
|
---|
80 | this.cityService.getAllCities().subscribe(
|
---|
81 | data => {
|
---|
82 | this.cities = data;
|
---|
83 | }
|
---|
84 | );
|
---|
85 |
|
---|
86 | this.regionService.getAllRegions().subscribe(
|
---|
87 | data => {
|
---|
88 | this.regions = data;
|
---|
89 | }
|
---|
90 | );
|
---|
91 |
|
---|
92 | this.categoryService.getAllCategories().subscribe(
|
---|
93 | data => {
|
---|
94 | this.categories = data;
|
---|
95 | }
|
---|
96 | );
|
---|
97 |
|
---|
98 | this.companionService.getAllCompanions().subscribe(
|
---|
99 | data => {
|
---|
100 | this.companions = data;
|
---|
101 | }
|
---|
102 | );
|
---|
103 |
|
---|
104 | }
|
---|
105 |
|
---|
106 | filter(val: string): Observable<City[]> {
|
---|
107 | // call the service which makes the http-request
|
---|
108 | return this.cityService.getAllCities()
|
---|
109 | .pipe(
|
---|
110 | map(response => response.filter(option => {
|
---|
111 | return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
|
---|
112 | }))
|
---|
113 | )
|
---|
114 | }
|
---|
115 |
|
---|
116 | toggleSelection(chip: MatChip, category: Category) {
|
---|
117 | chip.toggleSelected();
|
---|
118 |
|
---|
119 | if (this.chipsSeletion.length > 0) {
|
---|
120 | if (this.chipsSeletion.indexOf(category.id) <= -1) {
|
---|
121 | this.chipsSeletion.push(category.id);
|
---|
122 | } else {
|
---|
123 | const index = this.chipsSeletion.indexOf(category.id);
|
---|
124 | this.chipsSeletion.splice(index, 1);
|
---|
125 | }
|
---|
126 | } else {
|
---|
127 | this.chipsSeletion.push(category.id);
|
---|
128 | }
|
---|
129 | console.log(this.chipsSeletion);
|
---|
130 | }
|
---|
131 |
|
---|
132 |
|
---|
133 |
|
---|
134 | createMyPlanner() {
|
---|
135 | this.categoryIds = this.chipsSeletion.join(',');
|
---|
136 | console.log(this.categoryIds);
|
---|
137 |
|
---|
138 | if (this.cityOption) {
|
---|
139 | this.locationService.getLocationsFromCity(this.cityId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
|
---|
140 | result => {
|
---|
141 | console.log(result);
|
---|
142 | this.proba = result;
|
---|
143 | this.router.navigate(['locations'], {queryParams: {cityId: this.cityId, companionId: this.companionId, lengthOfStay: this.lengthOfStay, categoryIds: this.categoryIds}});
|
---|
144 | }
|
---|
145 | );
|
---|
146 | } else
|
---|
147 | if (this.regionOption) {
|
---|
148 | this.locationService.getLocationsFromRegion(this.regionId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
|
---|
149 | result => {
|
---|
150 | console.log(result);
|
---|
151 | this.router.navigate(['locations'], {queryParams: {regionId: this.regionId, companionId: this.companionId, lengthOfStay: this.lengthOfStay, categoryIds: this.categoryIds}});
|
---|
152 | }
|
---|
153 | );
|
---|
154 | }
|
---|
155 | }
|
---|
156 |
|
---|
157 | chooseCityOption() {
|
---|
158 | this.cityOption = true;
|
---|
159 | this.regionOption = false;
|
---|
160 | }
|
---|
161 | chooseRegionOption() {
|
---|
162 | this.regionOption = true;
|
---|
163 | this.cityOption = false;
|
---|
164 | }
|
---|
165 |
|
---|
166 | constraintMaxNumberDays() {
|
---|
167 | if (this.value > this.max) {
|
---|
168 | this.value = this.max;
|
---|
169 | }
|
---|
170 | }
|
---|
171 |
|
---|
172 |
|
---|
173 | }
|
---|