Skip to content

Instantly share code, notes, and snippets.

@akehir
Last active August 12, 2020 08:41
Show Gist options
  • Save akehir/5d03085f63ec7c4b7ae4c14810c059f3 to your computer and use it in GitHub Desktop.
Save akehir/5d03085f63ec7c4b7ae4c14810c059f3 to your computer and use it in GitHub Desktop.
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();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment