mapsdemo.ts

import { EMPTY, from, fromEvent, bindCallback } from 'rxjs';
import { debounceTime, distinctUntilChanged, filter, map, mergeMap, tap } from 'rxjs/operators';

function mapsAutocompleteCallback() {

}

function callMapsAutocomplete(term) {
  // todo map to observable?
  // see example : https://stackoverflow.com/questions/40480855/how-do-you-use-observable-bindcallback
  const observableCallback = bindCallback(mapsCallback)
  let service = { getQueryPredictions: (a, cb) => {} };
  // let service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({ input: term }, observableCallback);

  return observableCallback;
}


function mapsPlaceDetailCallbacl() {

}

function callMapsPlaceDetail() {
  // todo map to observable?
  // see example : https://stackoverflow.com/questions/40480855/how-do-you-use-observable-bindcallback
  const observableCallback = bindCallback(mapsPlaceDetailCallbacl)
  let service = { getQueryPredictions: (a, cb) => {} };
  // service = new google.maps.places.PlacesService(map);
  
  const request = {
    placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
    fields: ['name', 'rating', 'formatted_phone_number', 'geometry']
  };

    // https://developers.google.com/maps/documentation/javascript/places#place_details_requests
  service.getDetails(request, observableCallback);

  return observableCallback;
}

function updateAutocomplete() {
  // todo update UI
  // return elements
  
}

function updateStatus() {
  // todo update UI
}

export function addEventListener(input: HTMLInputElement) {
  fromEvent(input, 'keyup')
    .pipe(
      debounceTime(60),
      map(() => {
        if (input.value && input.value.length > 0) {
          return input.value;
        }
      }),
      filter((term) => !!term),
      distinctUntilChanged(),
      mergeMap((term) => {
        // see https://developers.google.com/maps/documentation/javascript/places-autocomplete
        // -> https://developers.google.com/maps/documentation/javascript/places-autocomplete#place_autocomplete_service

        return callMapsAutocomplete(term)
          .pipe(
          // for each place
          map(() => {}),
          mergeMap((placeID) => {
            callMapsPlaceDetail();
          }),
        );
      }),
      mergeMap((placeDetails) => {
        if(placeDetails.length > 1) {
          let element = updateAutocomplete();

          return  fromEvent(element, 'click');
        }
        return of(placeDetails[0]);
      }),
      map((event) => {
        // map item clicked to place to call

        return 'https://wwz.viu.ch/api/availability/check?city=cham&zip=6330&street=Luzernerstrasse&streetNr=54'
      }),
      mergeMap((url) => {
        return  from(fetch(`${url}`, {method: 'GET',}));
      }),
      mergeMap((response: Response) => {
        if (response?.ok) {
          return response.text();
        }

        return EMPTY;
      }),
      tap(() => {
        updateStatus();
      })
    ).subscribe();
}