183 lines
4.8 KiB
JavaScript
183 lines
4.8 KiB
JavaScript
'use strict'
|
|
|
|
import $ from 'jquery'
|
|
|
|
$(() => {
|
|
const $searchLat = $('[name="search-lat"]')
|
|
const $searchLng = $('[name="search-lng"]')
|
|
const $nearbyLat = $('#nearby-lat')
|
|
const $nearbyLng = $('#nearby-lng')
|
|
const $radius = $('#distance-radius')
|
|
const $category = $('#distance-category')
|
|
const $newLocation = $('[name="newlocation"]')
|
|
const $setnewlocation = $('#setnewlocation')
|
|
const $newlocationholder = $('.set-newlocation-holder')
|
|
|
|
const updatePosition = (lat, lng) => {
|
|
$searchLat.val(lat)
|
|
$searchLng.val(lng)
|
|
$nearbyLat.val(lat)
|
|
$nearbyLng.val(lng)
|
|
|
|
$searchLat.change()
|
|
$nearbyLat.change()
|
|
}
|
|
|
|
const getGeoPosition = () => {
|
|
const newLocation = $newLocation.val()
|
|
if (!newLocation.length) {
|
|
return
|
|
}
|
|
|
|
$('.search-location .current-val').text(newLocation)
|
|
const geoUrl = `https://maps.googleapis.com/maps/api/geocode/json?address=${newLocation}&key=AIzaSyC00L0023LPBhzj12uTCL-4EwJ_6zgwcTU&sensor=true`
|
|
|
|
$.getJSON(geoUrl).done((data) => {
|
|
if (data.status === 'OK') {
|
|
updatePosition(
|
|
data.results[0].geometry.location.lat,
|
|
data.results[0].geometry.location.lng
|
|
)
|
|
// getCategories();
|
|
}
|
|
})
|
|
}
|
|
|
|
const getCurrentPosition = () => {
|
|
$('.search-location .current-val').text('Current Location')
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
(position) => {
|
|
updatePosition(position.coords.latitude, position.coords.longitude)
|
|
// hideDistancesThatDontMatter();
|
|
},
|
|
() => {
|
|
$('.search-location .current-val').text('Unable to get your location')
|
|
updatePosition('', '')
|
|
}
|
|
)
|
|
}
|
|
|
|
if ($newLocation.length && $newLocation.val().length) {
|
|
getGeoPosition()
|
|
} else {
|
|
getCurrentPosition()
|
|
}
|
|
|
|
$('#Form_SearchForm').on('keyup keypress', (e) => {
|
|
const keyCode = e.keyCode || e.which
|
|
if (keyCode === 13) {
|
|
e.preventDefault()
|
|
return false
|
|
}
|
|
})
|
|
|
|
$('.get-current-location').on('click', (e) => {
|
|
e.preventDefault()
|
|
|
|
getCurrentPosition()
|
|
$newlocationholder.toggle()
|
|
$newLocation.val('')
|
|
})
|
|
|
|
$setnewlocation.on('click', (e) => {
|
|
e.preventDefault()
|
|
|
|
$newlocationholder.toggle()
|
|
})
|
|
|
|
$newLocation.blur(() => {
|
|
getGeoPosition()
|
|
})
|
|
|
|
$('.new-search').on('click', (e) => {
|
|
e.preventDefault()
|
|
|
|
$('.section-search-secondary').animate(
|
|
{
|
|
'max-height': 300,
|
|
},
|
|
'slow'
|
|
)
|
|
})
|
|
|
|
/* $radius.on('change', () => {
|
|
getCategories();
|
|
});
|
|
function getCategories() {
|
|
$.getJSON(`/api/categoriesnearby/${$searchLat.val()}/${$searchLng.val()}/${$radius.val()}`)
|
|
.done((data) => {
|
|
$category.empty(); // remove old options
|
|
$category.append($('<option></option>').attr('value', 'all').text('All Categories'));
|
|
|
|
$.each(data.categories, (i, cat) => {
|
|
$category.append($('<option></option>').attr('value', cat.id).text(cat.name));
|
|
});
|
|
});
|
|
}
|
|
|
|
function hideDistancesThatDontMatter() {
|
|
$.getJSON(`/api/nearestevent/${ $searchLat.val()}/${$searchLat.val()}`)
|
|
.done((data) => {
|
|
const nearest = parseFloat(data);
|
|
|
|
$radius.find('option').each(function() {
|
|
if (this.value !== 'all' && parseFloat(this.value) < nearest) {
|
|
$(this).hide();
|
|
}
|
|
});
|
|
});
|
|
} */
|
|
|
|
const $map = $('#Map')
|
|
if (typeof google !== 'undefined' && $map.length) {
|
|
const $directions = $('#DirectionsPanel')
|
|
const $fromAddress = $('#FromAddress')
|
|
const $getDirections = $('#GetDirections')
|
|
const $directionContainer = $('#DirectionContainer')
|
|
const directionsDisplay = new google.maps.DirectionsRenderer()
|
|
const directionsService = new google.maps.DirectionsService()
|
|
const currentPosition = {
|
|
lat: $map.data('lat'),
|
|
lng: $map.data('lng'),
|
|
}
|
|
const map = new google.maps.Map($map[0], {
|
|
zoom: 15,
|
|
mapTypeControl: true,
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
})
|
|
|
|
directionsDisplay.setMap(map)
|
|
directionsDisplay.setPanel($directions[0])
|
|
|
|
map.setCenter(currentPosition)
|
|
new google.maps.Marker({
|
|
map,
|
|
position: currentPosition,
|
|
})
|
|
|
|
$getDirections.click((e) => {
|
|
e.preventDefault()
|
|
|
|
const fromLocation = $fromAddress.val()
|
|
|
|
if (fromLocation.length) {
|
|
directionsService.route(
|
|
{
|
|
origin: fromLocation,
|
|
destination: currentPosition,
|
|
travelMode: google.maps.DirectionsTravelMode.DRIVING,
|
|
},
|
|
(response, status) => {
|
|
if (status === google.maps.DirectionsStatus.OK) {
|
|
directionsDisplay.setDirections(response)
|
|
}
|
|
}
|
|
)
|
|
|
|
$directionContainer.slideDown()
|
|
}
|
|
})
|
|
}
|
|
})
|