1 | import { Component, Injectable, OnInit } from '@angular/core';
|
---|
2 | import { FormControl, NgForm } from '@angular/forms';
|
---|
3 | import {map, startWith, switchMap} from 'rxjs/operators';
|
---|
4 | import {forkJoin, Observable} from 'rxjs';
|
---|
5 | import { CityService } from '../_services/city.service';
|
---|
6 | import { City } from '../_models/city';
|
---|
7 | import { Country } from '../_models/country';
|
---|
8 | import { CountryService } from '../_services/country.service';
|
---|
9 | import { Companion } from '../_models/companion';
|
---|
10 | import { CompanionService } from '../_services/companion.service';
|
---|
11 | import { Category } from '../_models/category';
|
---|
12 | import { CategoryService } from '../_services/cateogry.service';
|
---|
13 | import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
|
---|
14 | import { MatChip } from '@angular/material/chips';
|
---|
15 | import { LocationService } from '../_services/location.service';
|
---|
16 | import { Region } from '../_models/region';
|
---|
17 | import { RegionService } from '../_services/region.service';
|
---|
18 | import { Router } from '@angular/router';
|
---|
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 |
|
---|
48 | constructor(private cityService : CityService, private regionService: RegionService,
|
---|
49 | private companionService : CompanionService, private categoryService : CategoryService,
|
---|
50 | private locationService: LocationService, private router : Router){
|
---|
51 | this.filteredOptions = new Observable<City[]>();
|
---|
52 | this.cities = [];
|
---|
53 | this.regions = [];
|
---|
54 | this.companions = [];
|
---|
55 | this.categories = [];
|
---|
56 | this.chipsSeletion = [];
|
---|
57 | this.locationId = 0;
|
---|
58 | this.companionId = 0;
|
---|
59 | this.lengthOfStay = 1;
|
---|
60 | this.categoryIds = '';
|
---|
61 | this.regionId = 0;
|
---|
62 | this.cityId = 0;
|
---|
63 | this.value = 0;
|
---|
64 | this.max = 30;
|
---|
65 | }
|
---|
66 |
|
---|
67 | ngOnInit() :void {
|
---|
68 | this.filteredOptions = this.myControl.valueChanges
|
---|
69 | .pipe(
|
---|
70 | startWith(''),
|
---|
71 | switchMap(val => {
|
---|
72 | return this.filter(val || '')
|
---|
73 | })
|
---|
74 | );
|
---|
75 |
|
---|
76 | this.cityService.getAllCities().subscribe(
|
---|
77 | data => {
|
---|
78 | this.cities = data;
|
---|
79 | }
|
---|
80 | );
|
---|
81 |
|
---|
82 | this.regionService.getAllRegions().subscribe(
|
---|
83 | data => {
|
---|
84 | this.regions = data;
|
---|
85 | }
|
---|
86 | );
|
---|
87 |
|
---|
88 | this.categoryService.getAllCategories().subscribe(
|
---|
89 | data => {
|
---|
90 | this.categories = data;
|
---|
91 | }
|
---|
92 | );
|
---|
93 |
|
---|
94 | this.companionService.getAllCompanions().subscribe(
|
---|
95 | data => {
|
---|
96 | this.companions = data;
|
---|
97 | }
|
---|
98 | )
|
---|
99 | }
|
---|
100 |
|
---|
101 | filter(val: string): Observable<City[]> {
|
---|
102 | // call the service which makes the http-request
|
---|
103 | return this.cityService.getAllCities()
|
---|
104 | .pipe(
|
---|
105 | map(response => response.filter(option => {
|
---|
106 | return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
|
---|
107 | }))
|
---|
108 | )
|
---|
109 |
|
---|
110 | }
|
---|
111 |
|
---|
112 | toggleSelection(chip: MatChip, category: Category){
|
---|
113 | chip.toggleSelected();
|
---|
114 |
|
---|
115 | if (this.chipsSeletion.length > 0) {
|
---|
116 | if (this.chipsSeletion.indexOf(category.id) <= -1) {
|
---|
117 | this.chipsSeletion.push(category.id);
|
---|
118 | } else {
|
---|
119 | const index = this.chipsSeletion.indexOf(category.id);
|
---|
120 | this.chipsSeletion.splice(index, 1);
|
---|
121 | }
|
---|
122 | } else {
|
---|
123 | this.chipsSeletion.push(category.id);
|
---|
124 | }
|
---|
125 | console.log(this.chipsSeletion);
|
---|
126 | }
|
---|
127 |
|
---|
128 |
|
---|
129 | createMyPlanner() {
|
---|
130 | this.categoryIds = this.chipsSeletion.join(',');
|
---|
131 | console.log(this.categoryIds);
|
---|
132 |
|
---|
133 | if (this.cityOption) {
|
---|
134 | this.locationService.getLocationsFromCity(this.cityId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
|
---|
135 | result => {
|
---|
136 | console.log(result);
|
---|
137 | this.router.navigate(['locations']);
|
---|
138 | }
|
---|
139 | );
|
---|
140 | } else if (this.regionOption) {
|
---|
141 | this.locationService.getLocationsFromRegion(this.regionId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
|
---|
142 | result => {
|
---|
143 | console.log(result);
|
---|
144 | this.router.navigate(['locations']);
|
---|
145 | }
|
---|
146 | );
|
---|
147 | }
|
---|
148 |
|
---|
149 |
|
---|
150 |
|
---|
151 | }
|
---|
152 |
|
---|
153 | chooseCityOption() {
|
---|
154 | this.cityOption = true;
|
---|
155 | this.regionOption = false;
|
---|
156 | }
|
---|
157 | chooseRegionOption() {
|
---|
158 | this.regionOption = true;
|
---|
159 | this.cityOption = false;
|
---|
160 | }
|
---|
161 |
|
---|
162 | constraintMaxNumberDays() {
|
---|
163 | if (this.value > this.max) {
|
---|
164 | this.value = this.max;
|
---|
165 | }
|
---|
166 | }
|
---|
167 |
|
---|
168 | }
|
---|