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