diff --git a/templates/client/blank.html b/templates/client/blank.html index b94ab16a..c119b6cc 100644 --- a/templates/client/blank.html +++ b/templates/client/blank.html @@ -129,7 +129,7 @@ This template include basic anf main styles and js files, {% endblock %} - + diff --git a/templates/client/includes/company/company_edit.html b/templates/client/includes/company/company_edit.html index c4520e64..69ca699e 100644 --- a/templates/client/includes/company/company_edit.html +++ b/templates/client/includes/company/company_edit.html @@ -204,7 +204,7 @@
-  Раскрыть карту +  Раскрыть карту
 {% trans 'Добавить' %}
{% trans 'адрес компании' %} +15
@@ -233,9 +233,9 @@
-
-
- +
@@ -682,6 +682,17 @@ }, rating:{ id:'profile-rating' + }, + map:{ + + blockId:"address-block", + canvasId:"gmap-canvas", + autocompleteId:"id_address_inf", + zoom:{ + street:14, + city:12, + country:4 + } } diff --git a/templates/client/static_client/css/main.css b/templates/client/static_client/css/main.css index c6b62c34..34757c59 100644 --- a/templates/client/static_client/css/main.css +++ b/templates/client/static_client/css/main.css @@ -13129,7 +13129,7 @@ hr + .rq-note { .edit-profile .editable-wrap .static-value.address{ line-height: 28px; - height: 27px; + min-height: 27px; display: block; } diff --git a/templates/client/static_client/js/_modules/page.company.js b/templates/client/static_client/js/_modules/page.company.js index 087150a6..f91397c8 100644 --- a/templates/client/static_client/js/_modules/page.company.js +++ b/templates/client/static_client/js/_modules/page.company.js @@ -45,7 +45,7 @@ if (EXPO.company){ submit: function (dataToSend) { var self = this; if(!dataToSend){ - dataToSend = ''; + dataToSend = new FormData(this.$form[0]); } $.ajax({ type: 'POST', @@ -532,79 +532,183 @@ if (EXPO.company){ }; var Map = function (opt) { - var self = this; this.opt = opt; - this.$wrapper= $("#address-block"); + var self = this, + canvasId = this.opt.canvasId, + initGooglemap = function () { + var mapHolder = document.getElementById(self.opt.canvasId), + input = document.getElementById(self.opt.autocompleteId); + + self.mapOptions = { + /** + * default zoom for country + */ + zoom: self.opt.zoom.country + }; + self.map = new google.maps.Map(mapHolder, self.mapOptions); + /** + * address to cordinates converter + * @type {google.maps.Geocoder} + */ + self.geocoder = new google.maps.Geocoder(); + /** + * refresh map with new data + */ + self.refresh(); + /** + * autocomplete for adress bar input + * @type {HTMLElement} + */ + var autocomplete = new google.maps.places.Autocomplete(input); + autocomplete.bindTo('bounds', self.map); + /** + * autocomplete item selected event + */ + google.maps.event.addListener(autocomplete, 'place_changed', function() { + if(!self.status.visible){ + + var place = autocomplete.getPlace(); + if (!place.geometry) { + return; + } + + /** + * If the place has a geometry, then present it on a map. + */ + if (place.geometry.viewport) { + self.map.fitBounds(place.geometry.viewport); + } else { + self.map.setCenter(place.geometry.location); + self.map.setZoom(14); + } + + self.marker.setPosition(place.geometry.location); + EXPO.company.forms.address_form.submit(); + } + + + }); + + + }; + /** + * initialize map when body loads + */ + google.maps.event.addDomListener(window, 'load', initGooglemap); + /** + * container with map itself and address static text + * @type {*|jQuery|HTMLElement} + */ + this.$wrapper= $(document.getElementById(this.opt.blockId)); + /** + * show and hide map button + * @type {*|jQuery|HTMLElement} + */ this.$toggle = $(".map-toggle",this.$wrapper); + /** + * container with map to hide and show + * @type {*|jQuery|HTMLElement} + */ this.$container = $(".map-wrap", this.$wrapper); + this.status ={ + /** + * when container with map is hidden pararmeter visible = false + */ visible:false }; this.$toggle.on("click", function () { if($(this).hasClass("active")){ - /** - * hide map - */ self.hideMap(); }else{ + self.showMap(); /** - * show map + * just refresh the map drawing */ - self.showMap(); + google.maps.event.trigger(self.map, 'resize'); + self.refresh(); + } return false; }); - /** - * google map initialization - */ - var mapHolder = document.getElementById('gmap-canvas'); - var initGooglemap = function () { - var mapOptions = { - zoom: 4 - }; - self.map = new google.maps.Map(mapHolder, mapOptions); - - //var marker = new google.maps.Marker({ - // position: myLatlng, - // map: map - //}); - //todo: если есть город то геокодировать его + сделать автокомплит - var country = $("#id_country option:selected").text(); - var geocoder = new google.maps.Geocoder(); - geocoder.geocode({"address":country}, function (results, status) { - if (status == google.maps.GeocoderStatus.OK){ - self.map.setCenter(results[0].geometry.location); - var marker = new google.maps.Marker({ - map: self.map, - position: results[0].geometry.location - }); - }else{ - alert("Geocode was not successful for the following reason: " + status); - } - }); - }; - google.maps.event.addDomListener(window, 'load', initGooglemap); - - }; + /** + * methods + * @type {{showMap: Function, hideMap: Function, refresh: Function}} + */ Map.prototype = { + /** + * just show map container html tag + */ showMap: function () { this.$toggle.addClass("active").children(".label").text(this.$toggle.attr("data-hide-text")); this.status.visible = true; this.$container.removeClass("hidden"); }, + /** + * just hide map container html tag + */ hideMap: function () { this.$toggle.removeClass("active").children(".label").text(this.$toggle.attr("data-show-text")); this.status.visible = false; this.$container.addClass("hidden"); }, + /** + * collects dependent data and force map to refresh with that new data + */ refresh: function () { + var self = this, + country =$("#id_country option:selected").text(), + city = $(document.getElementById("id_city")).attr("data-init-text"), + address = $.trim(document.getElementById(self.opt.autocompleteId).value), + fullAddress; + if( $.trim(country) != ''){ + this.status.visible = true; + this.$toggle.removeClass("hidden"); + if($.trim(city) == ''){ + fullAddress = country; + self.map.set("zoom",self.opt.zoom.country); + }else{ + if($.trim(address) == ''){ + fullAddress = country + ' '+city; + self.map.set("zoom",self.opt.zoom.city); + }else{ + fullAddress = country + ' '+city+ ' '+ address; + self.map.set("zoom",self.opt.zoom.street); + + } + } + /** + * convert text adress data to lat/Ling coordinates with help of google api + */ + this.geocoder.geocode({"address":fullAddress}, function (results, status) { + if (status == google.maps.GeocoderStatus.OK){ + self.map.setCenter(results[0].geometry.location); + /** + * refresh marker position + */ + if(!self.marker){ + self.marker = new google.maps.Marker({ + map: self.map, + position: results[0].geometry.location + }); + }else{ + self.marker.set("position",results[0].geometry.location); + } + }else{ + console.log("!ERORR: Geocode was not successful for the following reason: " + status); + } + }); + }else{ + this.$toggle.addClass("hidden") + this.status.visible = false; + } } }; @@ -647,13 +751,21 @@ if (EXPO.company){ this.rating = new Rating(this.opt.rating); this.forms = {}; + $(function () { var $editables = $('.'+self.opt.editableClass), $country = $('#'+self.opt.selectBox[0].id), $city = $('#'+self.opt.selectBox[1].id), - $theme = $('#'+self.opt.selectBox[3].id); + $theme = $('#'+self.opt.selectBox[3].id), + $address = $("#id_address_inf"); //start of document.ready $waiter = $('#wait-ajax').css({'z-index': '8012'}); + /** + * google map + */ + self.map = new Map(self.opt.map); + + /** * styling with 3-rd party libs */ @@ -665,6 +777,13 @@ if (EXPO.company){ placeholder: self.opt.selectBox[3].placeHolder, maximumSelectionSize: 3 }); + $theme.on("change", function () { + var $theme = $('#theme_form'), + url = $theme.attr("action"), + //toSendObj = new FormData(toSendObj); + toSendObj = $theme.serialize(); + com.postRequest(toSendObj,url); + }); /** * select country */ @@ -672,10 +791,23 @@ if (EXPO.company){ width: 'element', placeholder:self.opt.selectBox[0].placeholder }); + + $country.on("change", function () { $city.val(0); $city.select2("val", ""); }); + $city.on("change", function () { + var chosen = $(this).closest(".epf-field").find(".select2-chosen").text(); + $(this).attr("data-init-text",chosen); + self.forms.address_form.$form.find("input:text").val(""); + self.forms.address_form.$staticValue.text(""); + self.forms.address_form.refreshHTML(); + self.forms.home_form.submit(); + self.forms.address_form.submit(); + //$("#id_address_inf").val('').closest(".address-wrap").find(".static-value").text(' '); + self.map.refresh(); + }); /** * enable city