-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Use autocomplete in location lookup * new Posts are created in the proper region * Event themes are a defined list * Event End Time is the Start Time set until the Start Time is validated * Events are filtered by start time by default When signing up a business, the location placeholder should be 'Name and City' * Employees should have a first name and last name * If an employee entry is fully defined, then it should be added with clicking next in the 'Add Employees' stage of signup
- Loading branch information
Showing
8 changed files
with
170 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| <template> | ||
| <div class="location-autocomplete"> | ||
| <div id="search-result" ref="searchResult"> | ||
| </div> | ||
| <md-field> | ||
| <label>Business Name and City</label> | ||
| <md-input @keypress='tryAutocomplete' v-model='address'> | ||
| </md-input> | ||
| </md-field> | ||
| <md-list class="md-double-line"> | ||
| <md-list-item | ||
| v-for="(p, i) in predictions" | ||
| :key='`place.${i}`' | ||
| @click='() => getPlace(p)' | ||
| :class="{selected: place && p.place_id === place.place_id}" | ||
| > | ||
| <div class="md-list-item-text"> | ||
| <span>{{p.description}}</span> | ||
| </div> | ||
| </md-list-item> | ||
| </md-list> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| import initGoogle from '../services/google' | ||
| export default { | ||
| name: 'LocationAutocomplete', | ||
| data() { | ||
| return { | ||
| autocomplete: null, | ||
| sessionToken: null, | ||
| places: null, | ||
| place: null, | ||
| address: '', | ||
| predictions: [], | ||
| } | ||
| }, | ||
| mounted() { | ||
| initGoogle.then(google => { | ||
| this.places = new google.maps.places.PlacesService(this.$refs.searchResult) | ||
| this.autocomplete = new google.maps.places.AutocompleteService() | ||
| this.sessionToken = new google.maps.places.AutocompleteSessionToken() | ||
| }) | ||
| }, | ||
| methods: { | ||
| tryAutocomplete(event) { | ||
| if (this.address.length > 3) { | ||
| const request = { | ||
| input: this.address, | ||
| // https://developers.google.com/places/supported_types#table3 | ||
| types: ['establishment'], | ||
| sessionToken: this.sessionToken, | ||
| } | ||
| this.autocomplete.getPlacePredictions(request, this.autocompleteResponse) | ||
| } | ||
| }, | ||
| autocompleteResponse(predictions, serviceStatus) { | ||
| switch (serviceStatus) { | ||
| case 'OK': | ||
| this.predictions = predictions | ||
| break | ||
| default: | ||
| console.log(`Service status is not OK: ${serviceStatus}`) | ||
| } | ||
| }, | ||
| getPlace(prediction) { | ||
| const request = { | ||
| placeId: prediction.place_id, | ||
| sessionToken: this.sessionToken, | ||
| fields: [ | ||
| 'formatted_address', | ||
| 'name', | ||
| 'place_id', | ||
| 'photos', | ||
| ] | ||
| } | ||
| this.places.getDetails(request, this.detailsResponse) | ||
| }, | ||
| detailsResponse(place, serviceStatus) { | ||
| switch (serviceStatus) { | ||
| case 'OK': | ||
| console.log('Selectd location', place) | ||
| this.$emit('locationSelected', place) | ||
| console.log('place', place) | ||
| // place.photos[].geturl() => https://image.url | ||
| this.place = place | ||
| break | ||
| default: | ||
| console.log(`Service status is not OK: ${serviceStatus}`) | ||
| } | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .selected { | ||
| background-color: lightgray; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.