source: trip-planner-front/src/app/locations-form/locations-form.component.ts@ eed0bf8

import { Component, Injectable, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import {map, startWith, switchMap} from 'rxjs/operators';
import {forkJoin, Observable} from 'rxjs';
import { CityService } from '../_services/city.service';
import { City } from '../_models/city';
import { Country } from '../_models/country';
import { CountryService } from '../_services/country.service';
import { Companion } from '../_models/companion';
import { CompanionService } from '../_services/companion.service';
import { Category } from '../_models/category';
import { CategoryService } from '../_services/cateogry.service';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
import { MatChip } from '@angular/material/chips';
import { LocationService } from '../_services/location.service';
import { Region } from '../_models/region';
import { RegionService } from '../_services/region.service';

@Component({
  selector: 'app-locations-form',
  templateUrl: './locations-form.component.html',
  styleUrls: ['./locations-form.component.css']
})
export class LocationsFormComponent implements OnInit {

  myControl = new FormControl();
  cities: City[];
  regions: Region[];
  companions: Companion[];
  categories: Category[];
  filteredOptions: Observable<City[]>;
  disableSelect = new FormControl(false);
  chipsSeletion: number[];
  categoryIds: string;
  locationId: number;
  regionId: number;
  companionId: number;
  lengthOfStay: number;
  cityOption: boolean = false;
  regionOption: boolean = false;

  constructor(private cityService : CityService, private regionService: RegionService,
              private companionService : CompanionService, private categoryService : CategoryService,
              private locationService: LocationService){
    this.filteredOptions = new Observable<City[]>();
    this.cities = [];
    this.regions = [];
    this.companions = [];
    this.categories = [];
    this.chipsSeletion = [];
    this.locationId = 0;
    this.companionId = 0;
    this.lengthOfStay = 1;
    this.categoryIds = '';
    this.regionId = 0;
  }
  
  ngOnInit() :void {
    this.filteredOptions = this.myControl.valueChanges
    .pipe(
      startWith(''),
      switchMap(val => {
        return this.filter(val || '')
      })       
    );

    this.cityService.getAllCities().subscribe(
      data => {
        this.cities = data;
      }
    );

    this.regionService.getAllRegions().subscribe(
      data => {
        this.regions = data;
      }
    );

    this.categoryService.getAllCategories().subscribe(
      data => {
        this.categories = data;
      }
    );

    this.companionService.getAllCompanions().subscribe(
      data => {
        this.companions = data;
      }
    )
  }
  
  filter(val: string): Observable<City[]> {
  // call the service which makes the http-request
    return this.cityService.getAllCities()
    .pipe(
    map(response => response.filter(option => { 
      return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
    }))
  )
  
 }  

 toggleSelection(chip: MatChip, category: Category){
  chip.toggleSelected();
  if(this.chipsSeletion.length > 0){
    if(this.chipsSeletion.indexOf(category.id) <= -1){
      this.chipsSeletion.push(category.id);
    }else{
      const index = this.chipsSeletion.indexOf(category.id);
      this.chipsSeletion.splice(index, 1);
    }
  }else{
    this.chipsSeletion.push(category.id);
  }
  console.log(this.chipsSeletion);
 }


 createMyPlanner(){
   this.categoryIds = this.chipsSeletion.join(',');
   console.log(this.companionId);
   this.locationService.getAllPlaces(this.locationId, this.companionId, this.lengthOfStay, this.categoryIds).subscribe(
     result => {
       console.log(result);
     }
   );
 }
 chooseCityOption(){
   this.cityOption = true;
   this.regionOption = false;
 }
  chooseRegionOption() {
    this.regionOption = true;
    this.cityOption = false;
  }
}