function initUserDelivery() {
GNS.oldUserLocationId = GNS.userLocationId;
GNS.oldUserShopId = GNS.userShopId;
GNS.oldUserDeliveryAddress = GNS.userDeliveryAddress;
GNS.mapOptions = {
styles: [{"featureType":"administrative.locality","elementType":"all","stylers":[{"hue":"#2c2e33"},{"saturation":7},{"lightness":19},{"visibility":"on"}]},{"featureType":"landscape","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"simplified"}]},{"featureType":"poi","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":31},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":31},{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":-2},{"visibility":"simplified"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"hue":"#e9ebed"},{"saturation":-90},{"lightness":-8},{"visibility":"simplified"}]},{"featureType":"transit","elementType":"all","stylers":[{"hue":"#e9ebed"},{"saturation":10},{"lightness":69},{"visibility":"on"}]},{"featureType":"water","elementType":"all","stylers":[{"hue":"#e9ebed"},{"saturation":-78},{"lightness":67},{"visibility":"simplified"}]}],
zoom: 6,
scrollwheel: true,
center: new google.maps.LatLng(49.515313, 30.960325), // Center of Ukraine
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
},
mapTypeControl: false,
scaleControl: false,
panControl: false,
navigationControl: false,
streetViewControl: false,
gestureHandling: 'cooperative'
};
GNS.map1 = {
map: undefined,
marker: undefined,
autocomplete: undefined,
options: {
map: GNS.mapOptions,
marker: {
map: undefined,
icon: '/img/marker-icon-1.png?v=120920212358',
animation: google.maps.Animation.BOUNCE,
animationTimer: undefined
},
autocomplete: {
componentRestrictions: {
country: 'ua'
},
fields: [
'address_components',
'formatted_address',
'geometry',
'name'
],
types: [
'address'
]
}
},
callbacks: {
onAutoCompletePlaceChanged: undefined
},
initMap: function () {
var self = this;
self.map = new google.maps.Map($('#delivery-modal-map-1').get(0), self.options.map);
},
initMarker: function () {
var self = this;
self.options.marker.map = self.map;
self.marker = new google.maps.Marker(self.options.marker);
},
initAutocomplete: function () {
var self = this;
self.autocomplete = new google.maps.places.Autocomplete(
$('#delivery-modal-delivery-address').get(0),
self.options.autocomplete);
self.autocomplete.bindTo('bounds', self.map);
self.autocomplete.addListener('place_changed', function() {
var place = self.autocomplete.getPlace();
if (place.geometry) {
var bounds = new google.maps.LatLngBounds();
if (place.geometry.viewport) {
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
self.map.fitBounds(bounds);
if (!self.marker.getMap()) {
self.marker.setMap(self.map);
}
if (!self.marker.getAnimation()) {
self.marker.setAnimation(GNS.map1.options.marker.animation);
}
if (self.marker.animationTimer) {
clearTimeout(self.marker.animationTimer);
}
self.marker.animationTimer = setTimeout(function () {
self.marker.setAnimation(null);
}, 3000);
self.marker.setPosition(place.geometry.location);
}
self.callbacks.onAutoCompletePlaceChanged(
$('#delivery-modal-delivery-address').val().trim(),
place.name,
place.formatted_address,
place.address_components);
});
},
reset: function () {
var self = this;
self.marker.setMap(null);
self.map.setZoom(self.options.map.zoom);
self.map.setCenter(self.options.map.center);
},
init: function (onAutoCompletePlaceChanged) {
var self = this;
self.callbacks.onAutoCompletePlaceChanged = onAutoCompletePlaceChanged;
self.initMap();
self.initMarker();
self.initAutocomplete();
}
};
GNS.map2 = {
options: {
map: GNS.mapOptions
},
callbacks: {
},
reset: function () {
var self = this;
self.map.setZoom(self.options.map.zoom);
self.map.setCenter(self.options.map.center);
},
// -------------------------------------------------------------------------------------------------------------
// function CustomMarker(...)
marker: undefined,
initMarker: function () {
this.marker = function (latlng, map, args, markerIco) {
this.latlng = latlng;
this.args = args;
this.markerIco = markerIco;
this.setMap(map);
};
this.marker.prototype = new google.maps.OverlayView();
this.marker.prototype.draw = function() {
var self = this;
var div = this.div;
if (!div) {
div = this.div = document.createElement('div');
div.className = 'map-marker-container';
div.innerHTML = '<div class="marker-container" style="background-color:' + this.markerIco + '">'+
'<div class="marker-card">'+
'</div>'+
'</div>';
// Clicked marker highlight
google.maps.event.addDomListener(div, "click", function() {
$('.map-marker-container').removeClass('clicked infoBox-opened');
google.maps.event.trigger(self, "click");
$(this).addClass('clicked infoBox-opened');
});
if (typeof(self.args.marker_id) !== 'undefined') {
div.dataset.marker_id = self.args.marker_id;
}
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
if (point) {
div.style.left = (point.x) + 'px';
div.style.top = (point.y) + 'px';
}
};
this.marker.prototype.remove = function() {
if (this.div) {
this.div.parentNode.removeChild(this.div);
this.div = null;
$(this).removeClass('clicked');
}
};
this.marker.prototype.getPosition = function() {
return this.latlng;
};
},
buildMarker: function (data) {
return new this.marker(
new google.maps.LatLng(data.lat, data.lng),
this.map, {
marker_id: data.id
},
data.icon);
},
// function locationData(...)
buildMarkerInfoBoxContent: function (name, address, isNewFormat, isThanksgivigProgram, workSchedule) {
return (
'<div class="job-listing">' +
'<div class="infoBox-close"><i class="flaticon-cross-out"></i></div>' +
'<div class="job-listing-details">' +
'<div class="job-listing-company-logo">' +
'<img src="/img/logo_mail.png" alt="' + name + '" title="' + name + '">' +
'</div>' +
'<div class="job-listing-description">' +
'<h4 class="job-listing-company">' + name + '</h4>' +
'<h3 class="job-listing-title">' +
// '<span>' + address + '</span>' +
'</h3>' +
'<h3 class="job-listing-title">' +
'<span>Формат магазину: ' + (isNewFormat ? 'Новий' : 'Старий') + '</span>' +
'</h3>' +
'<h3 class="job-listing-title">' +
'<span>Програма подяки: ' + (isThanksgivigProgram ? 'В наявності' : 'Немає в наявності') + '</span>' +
'</h3>' +
'<h3 class="job-listing-title">' +
'<span>' + workSchedule + '</span>' +
'</h3>' +
'</div>' +
'</div>' +
'</div>'
);
},
markersGroups: {},
// Locations section
setMarkerGroups: function () {
var ctx = this;
$.each(GNS.pickupLocations, function (_, location) {
$.each(location.shops, function(_, shop) {
if (shop.id === 0) {
return true;
}
if (!ctx.markersGroups.hasOwnProperty(shop.location_id)) {
ctx.markersGroups[shop.location_id] = {
_locationId: shop.location_id,
color: '#83c341',
textColor: '#fff',
markersData: []
};
}
ctx.markersGroups[shop.location_id].markersData.push({
lat: shop.latitude,
lng: shop.longitude,
icon: shop.is_new_format ? 'darkorange' : 'dodgerblue',
id: shop.id,
_locationId: shop.location_id,
isNewFormat: shop.is_new_format,
isThanksgivingProgram: shop.is_thanksgiving_program,
infoBoxContent: ctx.buildMarkerInfoBoxContent(
location.city + ', ' + shop.address,
'',
shop.is_new_format,
shop.is_thanksgiving_program,
shop.work_schedule),
infoBoxId: shop.id
});
});
});
},
map: undefined,
// Main map section
initMap: function () {
this.map = new google.maps.Map($('#delivery-modal-map-2').get(0), this.options.map);
},
fitMapToBounds: function (positions) {
var ctx = this,
bounds;
ctx.infoBox.close();
if (positions.length === 0) {
ctx.map.panTo(ctx.options.map.center);
ctx.map.setZoom(ctx.options.map.zoom);
} else {
bounds = new google.maps.LatLngBounds(null);
$.each(positions, function (i, position) {
bounds.extend(position);
});
ctx.map.fitBounds(bounds);
ctx.map.panToBounds(bounds);
}
},
infoBoxContentBox: undefined,
initInfoBoxContentBox: function () {
this.infoBoxContentBox = document.createElement('div');
this.infoBoxContentBox.className = 'map-box';
},
getInfoBoxOptions: function () {
var ctx = this;
return {
content: ctx.infoBoxContentBox,
disableAutoPan: false,
alignBottom: true,
maxWidth: 0,
pixelOffset: new google.maps.Size(-150, 0),
zIndex: null,
boxStyle: {
width: "300px"
},
closeBoxMargin: "0",
closeBoxURL: "",
// infoBoxClearance: new google.maps.Size(25, 75),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
},
infoBox: undefined,
currentInfoBoxId: undefined,
// Infobox section
initInfoBox: function () {
this.infoBox = new InfoBox();
},
// Marker Clusterer Init section
buildMarkerCluster: function (markers, bgColor, textColor) {
return new MarkerClusterer(this.map, markers, {
imagePath: 'images/',
styles: [{
backgroundColor: bgColor,
textColor: textColor,
url: '',
height: 50,
width: 50
}],
minimumClusterSize: 2
});
},
markers: [],
markerClusters: {},
setMarkerClustersWithMarkers: function () {
var ctx = this,
markersGroup,
markerData,
marker;
$.each(Object.keys(ctx.markersGroups), function (i, _locationId) {
markersGroup = ctx.markersGroups[_locationId];
for (j = 0; j < markersGroup.markersData.length; j++) {
markerData = markersGroup.markersData[j];
marker = ctx.buildMarker(markerData);
google.maps.event.addDomListener(marker, 'click', (function (marker, infoBoxContent, infoBoxId) {
return function () {
ctx.infoBox.setOptions(ctx.getInfoBoxOptions());
ctx.infoBoxContentBox.innerHTML = infoBoxContent;
ctx.infoBox.close();
ctx.infoBox.open(ctx.map, marker);
ctx.currentInfoBoxId = infoBoxId;
google.maps.event.addListener(ctx.infoBox, 'domready', function () {
$('.infoBox-close').click(function (e) {
e.preventDefault();
ctx.infoBox.close();
$('.map-marker-container').removeClass('clicked infoBox-opened');
});
});
}
})(marker, markerData.infoBoxContent, markerData.infoBoxId));
ctx.markers.push({
id: markerData.id,
_locationId: markerData._locationId,
isNewFormat: markerData.isNewFormat,
isThanksgivingProgram: markerData.isThanksgivingProgram,
marker: marker
});
}
ctx.markerClusters[markerData._locationId] = ctx.buildMarkerCluster([], markersGroup.color, markersGroup.textColor);
});
},
toggleMarkers: function (locationId, shopId, isAllLocations, isAllShops) {
var ctx = this,
positions = [],
markersCount = 0,
marker;
$.each(Object.keys(ctx.markerClusters), function (i, _locationId) {
ctx.markerClusters[_locationId].clearMarkers();
});
$.each(ctx.markers, function (i, item) {
if (!isAllLocations && +locationId && +locationId !== +item._locationId) {
return true;
}
if (!isAllLocations && !isAllShops && +shopId && +shopId !== +item.id) {
return true;
}
ctx.markerClusters[item._locationId].addMarker(item.marker);
positions.push(item.marker.getPosition());
if (markersCount === 0) {
marker = item.marker;
}
markersCount++;
});
ctx.fitMapToBounds(positions);
if (markersCount === 1) {
google.maps.event.trigger(marker, 'click');
}
},
subscribe: function () {
var ctx = this;
google.maps.event.addDomListener(window, 'resize', function () {
var center = ctx.map.getCenter();
google.maps.event.trigger(ctx.map, 'resize');
ctx.map.setCenter(center);
});
},
init: function () {
this.initMap();
this.initMarker();
this.initInfoBoxContentBox();
this.initInfoBox();
this.setMarkerGroups();
this.setMarkerClustersWithMarkers();
this.subscribe();
}
};
new Vue({
el: '#delivery-modal',
data: {
deliveryType: 'address',
deliveryAddress: '',
isPickupLocationShops: false,
note: '',
isWarning: false,
isValid: false,
isSubmit: false
},
mounted: function () {
var self = this,
$body = $('body'),
$modal = $(self.$el),
$tabs = $modal.find('.nav-link');
$modal.on('shown.bs.modal', function () {
if (!GNS.isUserDelivery) {
$('[data-no-user-delivery-bg]').remove();
}
GNS.map1.init(self.deliveryAddressChanged);
GNS.map2.init();
GNS.map2.toggleMarkers(null, null, true, true);
});
if (GNS.isUserDelivery) { // Restore default data
$modal.on('hidden.bs.modal', function () {
self.reset(true, true);
GNS.userLocationId = GNS.oldUserLocationId;
GNS.userShopId = GNS.oldUserShopId;
GNS.userDeliveryAddress = GNS.oldUserDeliveryAddress;
if (self.deliveryType === 'pickup') {
$modal.find('.nav-link:not(.active)').trigger('click');
}
GNS.map2.toggleMarkers(null, null, true, true);
});
}
// Tabs | Addres & Pickup deliveries
$body.on('click', '[data-toggle-tab]', function () {
if (self.isSubmit) {
return false;
}
$modal.find('.nav-link:not(.active)').trigger('click');
});
$tabs.on('show.bs.tab', function () {
var $oldMap = $modal.find('.delivery-modal-map:visible'),
$newMap = $modal.find('.delivery-modal-map:hidden');
if (self.isSubmit) {
return false;
}
$oldMap.hide();
$newMap.show();
self.deliveryType = self.deliveryType === 'address' ? 'pickup' : 'address';
});
$tabs.on('hidden.bs.tab', function () {
if (self.isSubmit) {
return false;
}
self.reset(true, true);
GNS.map2.toggleMarkers(null, null, true, true);
});
// Select2 | Pickup delivery
GNS.$pickupLocations = $('#delivery-modal-pickup-location');
GNS.$pickupLocationShops = $('#delivery-modal-pickup-shop');
GNS.$pickupLocations.select2({
matcher: self.pickupLocationSelect2Match,
language: GNS.language,
data: GNS.pickupLocations.map(function (item) {
return {
id: item.id,
text: item.city,
shops: item.shops
};
})
}).on('select2:select', function (e) {
self.reset(true, false);
GNS.map2.toggleMarkers(+e.params.data.id, null, false, true);
GNS.$pickupLocationShops.select2('destroy').empty().append('<option></option>');
GNS.$pickupLocationShops.select2({
matcher: self.pickupLocationShopSelect2Match,
language: GNS.language,
data: e.params.data.shops.map(function (item) {
return {
id: item.id,
text: item.address,
city: e.params.data.text,
shop: item
};
})
});
self.isPickupLocationShops = true;
});
GNS.$pickupLocationShops.select2({
matcher: self.pickupLocationShopSelect2Match,
language: GNS.language
}).on('select2:select', function (e) {
self.note = e.params.data.shop.note || '';
self.isValid = true;
GNS.userShopId = +e.params.data.shop.id;
GNS.userDeliveryAddress = e.params.data.city + ', ' + e.params.data.text;
GNS.map2.toggleMarkers(null, GNS.userShopId, false, false);
});
},
watch: {
deliveryAddress: function (value) {
var self = this;
if (value.length === 0
&& GNS.userDeliveryAddress.length
&& (self.isValid || self.isWarning)) {
if (self.isSubmit) {
return false;
}
self.reset(false, true);
}
}
},
methods: {
deliveryAddressChanged: function (value, street, address, components) {
var self = this,
city,
isCityDelivery = false,
streetNumber,
notes = [];
if (self.isSubmit) {
return false;
}
self.deliveryAddress = value;
GNS.userDeliveryAddress = value;
$.each(components, function (_, component) {
if (component.types.indexOf('locality') !== -1) {
city = component.long_name;
$.each(GNS.addressLocations, function (_, location) {
if (location.city_ua.toLocaleString().indexOf(city.toLocaleString()) !== -1
|| location.city_ru.toLocaleString().indexOf(city.toLocaleString()) !== -1) {
GNS.userLocationId = +location.id;
if (location.note) {
notes.push(location.note);
}
if (+location.free_delivery_min_order_sum > 0) {
notes.push(GNS.trans.deliveryNoteFreeDeliveryMinOrderSum.replace('@', location.free_delivery_min_order_sum));
}
if (+location.delivery_price) {
notes.push(GNS.trans.deliveryNoteDeliveryPrice.replace('@', location.delivery_price));
}
isCityDelivery = true;
return false;
}
});
if (!isCityDelivery) {
return false;
}
} else if (component.types.indexOf('street_number') !== -1) {
streetNumber = component.long_name;
}
return !city || !streetNumber;
});
if (isCityDelivery && !streetNumber) {
streetNumber = value.replace(/\D/g,'');
}
if (!isCityDelivery) {
self.note = GNS.trans.deliveryNoteNoDelivery;
self.isWarning = true;
} else if (!streetNumber) {
self.note = GNS.trans.deliveryNoteNoStreetNumber;
self.isWarning = true;
} else {
self.note = notes.length ? notes.join('<br><br>') : '';
self.isValid = true;
}
},
pickupLocationSelect2Match: function (params, data) { // https://select2.org/searching
if ($.trim(params.term).toLocaleLowerCase() === '') {
return data;
} else if (typeof data.text === 'undefined') {
return null;
}
if ($.trim(data.text).toLocaleLowerCase().indexOf($.trim(params.term).toLocaleLowerCase()) !== -1) {
return $.extend({}, data, true);
}
return null;
},
pickupLocationShopSelect2Match: function (params, data) { // https://select2.org/searching
if ($.trim(params.term).toLocaleLowerCase() === '') {
return data;
} else if (typeof data.text === 'undefined') {
return null;
}
if ($.trim(data.text).toLocaleLowerCase().indexOf($.trim(params.term).toLocaleLowerCase()) !== -1) {
return $.extend({}, data, true);
}
return null;
},
reset: function (isResetDeliveryAddress, isResetPickupLocations) {
var self = this;
GNS.map1.reset();
GNS.map2.reset();
if (isResetPickupLocations) {
GNS.$pickupLocations.val(null).trigger('change');
}
GNS.$pickupLocationShops.val(null).trigger('change');
if (isResetDeliveryAddress) {
self.deliveryAddress = '';
}
self.isPickupLocationShops = false;
self.note = '';
self.isWarning = false;
self.isValid = false;
GNS.userLocationId = 0;
GNS.userShopId = 0;
GNS.userDeliveryAddress = '';
},
save: function () {
var self = this;
self.isSubmit = true;
$.ajax({
url: '/delivery/save',
type: 'post',
data: self.getSaveData(),
success: function (data) {
if (data.status === 'success') {
window.location.reload(true);
} else {
self.isSubmit = false;
}
if (GNS.isDebug) {
console.log('success[data]:', data);
}
},
error: function (error) {
if (GNS.isDebug) {
console.log('error[error]:', error.responseJSON);
}
}
});
},
getSaveData: function () {
var self = this;
return {
delivery_type: self.deliveryType,
user_location_id: self.deliveryType === 'address' ? GNS.userLocationId : '',
user_shop_id: self.deliveryType === 'pickup' ? GNS.userShopId : '',
user_delivery_address: GNS.userDeliveryAddress,
language: GNS.language
};
}
}
});
}
initUserDelivery();