fixes the haircut map
This commit is contained in:
parent
531705eded
commit
cf060bf771
2 changed files with 104 additions and 120 deletions
|
|
@ -1,27 +1,16 @@
|
||||||
@model Yavsc.Models.Haircut.HairCutQuery
|
@model Yavsc.Models.Haircut.HairCutQuery
|
||||||
@{ ViewData["Title"] = $"{ViewBag.Activity.Name}: Votre commande"; }
|
@{ ViewData["Title"] = $"{ViewBag.Activity.Name}: Votre commande"; }
|
||||||
@await Html.PartialAsync("BrusherProfileScript",ViewData["PerfPrefs"])
|
@await Html.PartialAsync("BrusherProfileScript",ViewData["PerfPrefs"])
|
||||||
|
|
||||||
@section header {
|
@section header {
|
||||||
|
|
||||||
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=@Startup.GoogleSettings.BrowserApiKey"></script>
|
|
||||||
<script type="text/javascript" src="~/lib/moment/moment-with-locales.min.js"></script>
|
<script type="text/javascript" src="~/lib/moment/moment-with-locales.min.js"></script>
|
||||||
<script type="text/javascript" src="~/lib/eonasdan-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
|
<script type="text/javascript" src="~/lib/eonasdan-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
|
||||||
<link rel="stylesheet" href="~/lib/eonasdan-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
|
<link rel="stylesheet" href="~/lib/eonasdan-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#map {
|
#map {
|
||||||
height: 30em;
|
width: 100%;
|
||||||
width: 30em;
|
height: 250px;
|
||||||
}
|
}
|
||||||
#Location_combo li {
|
</style>
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
#Location_combo li:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@section scripts {
|
@section scripts {
|
||||||
|
|
@ -153,97 +142,6 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
|
||||||
$(document).ready(function () {
|
|
||||||
|
|
||||||
var config = {
|
|
||||||
mapId: 'map',
|
|
||||||
addrId: 'Location_Address',
|
|
||||||
longId: 'Location_Longitude',
|
|
||||||
latId: 'Location_Latitude',
|
|
||||||
addrValidationId: 'valloc',
|
|
||||||
formValidId: 'valsum',
|
|
||||||
locComboId: 'loccomb'
|
|
||||||
};
|
|
||||||
$.validator.setDefaults({
|
|
||||||
messages: {
|
|
||||||
remote: "Ce lieu n'est pas identifié par les services de géo-localisation Google",
|
|
||||||
required: "Veuillez renseigner ce champ"
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var gmap = new google.maps.Map(document.getElementById(config.mapId), {
|
|
||||||
zoom: 16,
|
|
||||||
center: { lat: 48.862854, lng: 2.2056466 }
|
|
||||||
});
|
|
||||||
var marker;
|
|
||||||
function chooseLoc(sender, loc) {
|
|
||||||
if (sender === 'user') $('#' + config.addrId).val(loc.formatted_address);
|
|
||||||
var pos = loc.geometry.location;
|
|
||||||
var lat = new Number(pos.lat);
|
|
||||||
var lng = new Number(pos.lng);
|
|
||||||
$('#' + config.latId).val(lat.toLocaleString('en'));
|
|
||||||
$('#' + config.longId).val(lng.toLocaleString('en'));
|
|
||||||
gmap.setCenter(pos);
|
|
||||||
if (marker) {
|
|
||||||
marker.setMap(null);
|
|
||||||
}
|
|
||||||
marker = new google.maps.Marker({
|
|
||||||
map: gmap,
|
|
||||||
draggable: true,
|
|
||||||
animation: google.maps.Animation.DROP,
|
|
||||||
position: pos
|
|
||||||
});
|
|
||||||
google.maps.event.addListener(marker, 'dragend', function () {
|
|
||||||
// TODO reverse geo code
|
|
||||||
var pos = marker.getPosition();
|
|
||||||
$('#' + config.latId).val(pos.lat.toLocaleString('en'));
|
|
||||||
$('#' + config.longId).val(pos.lng.toLocaleString('en'));
|
|
||||||
});
|
|
||||||
$('#' + config.addrId).valid();
|
|
||||||
$('#' + config.addrValidationId).empty();
|
|
||||||
$('#' + config.formValidId).empty();
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
$('#' + config.addrId).rules("add",
|
|
||||||
{
|
|
||||||
remote: {
|
|
||||||
url: 'https://maps.googleapis.com/maps/api/geocode/json',
|
|
||||||
type: 'get',
|
|
||||||
data: {
|
|
||||||
key: '@Startup.GoogleSettings.BrowserApiKey',
|
|
||||||
sensor: false,
|
|
||||||
address: function () { return $('#' + config.addrId).val() }
|
|
||||||
},
|
|
||||||
dataType: 'json',
|
|
||||||
dataFilter: function (datastr, type) {
|
|
||||||
$('#' + config.locComboId).html("");
|
|
||||||
var data = JSON.parse(datastr);
|
|
||||||
data.results.forEach(function (element) {
|
|
||||||
if (element.formatted_address !== $('#' + config.addrId).val()) {
|
|
||||||
$('<li>' + element.formatted_address + '</li>')
|
|
||||||
.data("geoloc", element)
|
|
||||||
.click(function () { chooseLoc('user') })
|
|
||||||
.appendTo($('#' + config.locComboId));
|
|
||||||
}
|
|
||||||
else { }
|
|
||||||
});
|
|
||||||
if ((data.status === 'OK') && (data.results.length == 1)) {
|
|
||||||
chooseLoc('google', data.results[0]);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
error: function (xhr, textStatus, errorThrown) {
|
|
||||||
console.log('ajax loading error ... ' + textStatus + ' ... ' + errorThrown);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
}
|
}
|
||||||
<em>@ViewBag.Activity.Description</em>
|
<em>@ViewBag.Activity.Description</em>
|
||||||
|
|
||||||
|
|
@ -353,22 +251,14 @@
|
||||||
<label for="Location_Address" class="col-md-2 control-label">
|
<label for="Location_Address" class="col-md-2 control-label">
|
||||||
@SR["Location"]
|
@SR["Location"]
|
||||||
</label>
|
</label>
|
||||||
<div class="col-md-10">
|
<input asp-for="Location.Address" type="text" name="Location_Address" id="Location_Address" class="form-control">
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class='col-sm-6'>
|
|
||||||
<div>
|
|
||||||
<input asp-for="Location.Address" type="text" name="Location.Address" id="Location_Address" class="form-control" data-val-required=@SR[
|
|
||||||
"SpecifyPlace"] data-val-remote=@SR[ "GoogleDidntGeoLocalized"]>
|
|
||||||
<span asp-validation-for="Location.Address" class="text-danger" id="valloc"></span>
|
<span asp-validation-for="Location.Address" class="text-danger" id="valloc"></span>
|
||||||
<ul id="loccomb">
|
<ul id="loccomb">
|
||||||
</ul>
|
</ul>
|
||||||
<div id="map"></div>
|
<div id="map" class="map" data-val="valloc" data-addr="Location_Address" data-loccombo="loccomb"
|
||||||
</div>
|
data-lat="Address_Latitude" data-lon="Address_Longitude" ></div>
|
||||||
</div>
|
@Html.Hidden("Address.Latitude")
|
||||||
</div>
|
@Html.Hidden("Address.Longitude")
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
|
|
@ -400,3 +290,4 @@
|
||||||
<input type="hidden" name="activityCode" value="@ViewBag.Activity.Code" />
|
<input type="hidden" name="activityCode" value="@ViewBag.Activity.Code" />
|
||||||
</form>
|
</form>
|
||||||
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
|
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
|
||||||
|
@{ await Html.RenderPartialAsync("_MapScriptsPartial"); }
|
||||||
|
|
|
||||||
93
Yavsc/Views/Shared/_MapScriptsPartial.cshtml
Normal file
93
Yavsc/Views/Shared/_MapScriptsPartial.cshtml
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
|
||||||
|
<script src="https://maps.googleapis.com/maps/api/js?key=@Yavsc.Startup.GoogleSettings.BrowserApiKey"></script>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function(){
|
||||||
|
|
||||||
|
function chooseLoc(config, sender, loc) {
|
||||||
|
if (sender === 'user') $('#'+config.addrId).val(loc.formatted_address);
|
||||||
|
var pos = loc.geometry.location;
|
||||||
|
var lat = new Number(pos.lat);
|
||||||
|
var lng = new Number(pos.lng);
|
||||||
|
var mapid = '#'+config.addrId;
|
||||||
|
var gmap = config.gmap;
|
||||||
|
gmap.setCenter(pos);
|
||||||
|
$('#'+config.latId).val(pos.lat);
|
||||||
|
$('#'+config.longId).val(pos.lng);
|
||||||
|
var marker = new google.maps.Marker({
|
||||||
|
map: gmap,
|
||||||
|
draggable: true,
|
||||||
|
animation: google.maps.Animation.DROP,
|
||||||
|
position: pos
|
||||||
|
});
|
||||||
|
google.maps.event.addListener(marker, 'dragend', function() {
|
||||||
|
var pos = marker.getPosition();
|
||||||
|
$('#'+config.latId).val(pos.lat);
|
||||||
|
$('#'+config.longId).val(pos.lng);
|
||||||
|
});
|
||||||
|
$('#'+config.addrId).valid();
|
||||||
|
$('#'+config.valId).empty();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupInputAddress (mapDiv)
|
||||||
|
{
|
||||||
|
var config = {
|
||||||
|
mapId: $(mapDiv).attr('id'),
|
||||||
|
addrId: $(mapDiv).data('addr'),
|
||||||
|
lonId: $(mapDiv).data('lon'),
|
||||||
|
latId: $(mapDiv).data('lat'),
|
||||||
|
valId: $(mapDiv).data('val'),
|
||||||
|
locComboId: $(mapDiv).data('loccombo')
|
||||||
|
};
|
||||||
|
console.log(config);
|
||||||
|
|
||||||
|
var input = '#'+config.addrId;
|
||||||
|
$(input).data("val-required", '@SR["SpecifyPlace"]') ;
|
||||||
|
$(input).data("val-remote", '@SR[ "GoogleDidntGeoLocalized"]') ;
|
||||||
|
$(input).rules("add",
|
||||||
|
{
|
||||||
|
remote: {
|
||||||
|
url: 'https://maps.googleapis.com/maps/api/geocode/json',
|
||||||
|
type: 'get',
|
||||||
|
data: {
|
||||||
|
key: '@Startup.GoogleSettings.BrowserApiKey',
|
||||||
|
sensor: false,
|
||||||
|
address: function () { return $('#'+config.addrId).val() }
|
||||||
|
},
|
||||||
|
dataType: 'json',
|
||||||
|
dataFilter: function(datastr,type) {
|
||||||
|
$('#'+config.locComboId).html("");
|
||||||
|
var data = JSON.parse(datastr);
|
||||||
|
data.results.forEach(function(element) {
|
||||||
|
if (element.formatted_address !== $('#'+config.addrId).val()) {
|
||||||
|
$('<li style="pointer:cursor;">'+element.formatted_address+'</li>')
|
||||||
|
.data("geoloc",element)
|
||||||
|
.click(function() { chooseLoc(config, 'user', $(this).data("geoloc")) })
|
||||||
|
.appendTo($('#'+config.locComboId));}
|
||||||
|
});
|
||||||
|
if ((data.status === 'OK') && (data.results.length == 1))
|
||||||
|
{
|
||||||
|
chooseLoc(config, 'google', data.results[0]);
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
error: function(xhr, textStatus, errorThrown)
|
||||||
|
{
|
||||||
|
console.log('ajax loading error ... '+textStatus+' ... '+ errorThrown);
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var gmap = new google.maps.Map(document.getElementById(config.mapId), {
|
||||||
|
zoom: 8
|
||||||
|
});
|
||||||
|
config.gmap = gmap;
|
||||||
|
}
|
||||||
|
$("div.map").each(function(indexMap){
|
||||||
|
setupInputAddress(this)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue