2021-08-18 20:51:15 +02:00
|
|
|
"use strict";
|
2020-12-24 23:42:33 +01:00
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
import $ from "jquery";
|
2020-12-24 23:42:33 +01:00
|
|
|
|
2019-10-20 01:40:40 +02:00
|
|
|
$(() => {
|
|
|
|
const $searchLat = $('[name="search-lat"]');
|
|
|
|
const $searchLng = $('[name="search-lng"]');
|
2021-08-18 20:51:15 +02:00
|
|
|
const $nearbyLat = $("#nearby-lat");
|
|
|
|
const $nearbyLng = $("#nearby-lng");
|
|
|
|
const $radius = $("#distance-radius");
|
|
|
|
const $category = $("#distance-category");
|
2019-10-20 01:40:40 +02:00
|
|
|
const $newLocation = $('[name="newlocation"]');
|
2021-08-18 20:51:15 +02:00
|
|
|
const $setnewlocation = $("#setnewlocation");
|
|
|
|
const $newlocationholder = $(".set-newlocation-holder");
|
2019-10-20 01:40:40 +02:00
|
|
|
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
$(".search-location .current-val").text(newLocation);
|
2019-10-20 01:40:40 +02:00
|
|
|
const geoUrl = `https://maps.googleapis.com/maps/api/geocode/json?address=${newLocation}&key=AIzaSyC00L0023LPBhzj12uTCL-4EwJ_6zgwcTU&sensor=true`;
|
|
|
|
|
2020-12-24 23:42:33 +01:00
|
|
|
$.getJSON(geoUrl).done((data) => {
|
2021-08-18 20:51:15 +02:00
|
|
|
if (data.status === "OK") {
|
2020-12-24 23:42:33 +01:00
|
|
|
updatePosition(
|
|
|
|
data.results[0].geometry.location.lat,
|
2021-08-18 20:51:15 +02:00
|
|
|
data.results[0].geometry.location.lng
|
2020-12-24 23:42:33 +01:00
|
|
|
);
|
|
|
|
//getCategories();
|
|
|
|
}
|
|
|
|
});
|
2019-10-20 01:40:40 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
const getCurrentPosition = () => {
|
2021-08-18 20:51:15 +02:00
|
|
|
$(".search-location .current-val").text("Current Location");
|
2019-10-20 01:40:40 +02:00
|
|
|
|
2020-12-24 23:42:33 +01:00
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
|
|
(position) => {
|
|
|
|
updatePosition(position.coords.latitude, position.coords.longitude);
|
|
|
|
//hideDistancesThatDontMatter();
|
|
|
|
},
|
|
|
|
() => {
|
2021-08-18 20:51:15 +02:00
|
|
|
$(".search-location .current-val").text("Unable to get your location");
|
|
|
|
updatePosition("", "");
|
|
|
|
}
|
2020-12-24 23:42:33 +01:00
|
|
|
);
|
|
|
|
};
|
2019-10-20 01:40:40 +02:00
|
|
|
|
|
|
|
if ($newLocation.length && $newLocation.val().length) {
|
|
|
|
getGeoPosition();
|
|
|
|
} else {
|
|
|
|
getCurrentPosition();
|
|
|
|
}
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
$("#Form_SearchForm").on("keyup keypress", (e) => {
|
2019-10-20 01:40:40 +02:00
|
|
|
var keyCode = e.keyCode || e.which;
|
|
|
|
if (keyCode === 13) {
|
|
|
|
e.preventDefault();
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
$(".get-current-location").on("click", (e) => {
|
2019-10-20 01:40:40 +02:00
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
getCurrentPosition();
|
|
|
|
$newlocationholder.toggle();
|
2021-08-18 20:51:15 +02:00
|
|
|
$newLocation.val("");
|
2019-10-20 01:40:40 +02:00
|
|
|
});
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
$setnewlocation.on("click", (e) => {
|
2019-10-20 01:40:40 +02:00
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
$newlocationholder.toggle();
|
|
|
|
});
|
|
|
|
|
|
|
|
$newLocation.blur(() => {
|
|
|
|
getGeoPosition();
|
|
|
|
});
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
$(".new-search").on("click", (e) => {
|
2019-10-20 01:40:40 +02:00
|
|
|
e.preventDefault();
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
$(".section-search-secondary").animate(
|
2020-12-24 23:42:33 +01:00
|
|
|
{
|
2021-08-18 20:51:15 +02:00
|
|
|
"max-height": 300,
|
2020-12-24 23:42:33 +01:00
|
|
|
},
|
2021-08-18 20:51:15 +02:00
|
|
|
"slow"
|
2020-12-24 23:42:33 +01:00
|
|
|
);
|
2019-10-20 01:40:40 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
/*$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();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}*/
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
const $map = $("#Map");
|
|
|
|
if (typeof google !== "undefined" && $map.length) {
|
|
|
|
const $directions = $("#DirectionsPanel"),
|
|
|
|
$fromAddress = $("#FromAddress"),
|
|
|
|
$getDirections = $("#GetDirections"),
|
|
|
|
$directionContainer = $("#DirectionContainer"),
|
2019-10-20 01:40:40 +02:00
|
|
|
directionsDisplay = new google.maps.DirectionsRenderer(),
|
|
|
|
directionsService = new google.maps.DirectionsService(),
|
|
|
|
currentPosition = {
|
2021-08-18 20:51:15 +02:00
|
|
|
lat: $map.data("lat"),
|
|
|
|
lng: $map.data("lng"),
|
2019-10-20 01:40:40 +02:00
|
|
|
},
|
|
|
|
map = new google.maps.Map($map[0], {
|
2020-12-24 23:42:33 +01:00
|
|
|
zoom: 15,
|
|
|
|
mapTypeControl: true,
|
|
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
2019-10-20 01:40:40 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
directionsDisplay.setMap(map);
|
|
|
|
directionsDisplay.setPanel($directions[0]);
|
|
|
|
|
|
|
|
map.setCenter(currentPosition);
|
|
|
|
new google.maps.Marker({
|
|
|
|
map,
|
2020-12-24 23:42:33 +01:00
|
|
|
position: currentPosition,
|
2019-10-20 01:40:40 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
$getDirections.click((e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
const fromLocation = $fromAddress.val();
|
|
|
|
|
|
|
|
if (fromLocation.length) {
|
2020-12-24 23:42:33 +01:00
|
|
|
directionsService.route(
|
|
|
|
{
|
|
|
|
origin: fromLocation,
|
|
|
|
destination: currentPosition,
|
|
|
|
travelMode: google.maps.DirectionsTravelMode.DRIVING,
|
|
|
|
},
|
|
|
|
(response, status) => {
|
|
|
|
if (status === google.maps.DirectionsStatus.OK) {
|
|
|
|
directionsDisplay.setDirections(response);
|
|
|
|
}
|
2021-08-18 20:51:15 +02:00
|
|
|
}
|
2020-12-24 23:42:33 +01:00
|
|
|
);
|
2019-10-20 01:40:40 +02:00
|
|
|
|
|
|
|
$directionContainer.slideDown();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|