paul/yavsc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes the haircut map

Browse Source
This commit is contained in:
Paul Schneider
2018-12-26 21:03:31 +00:00
parent 00d7820f3c
commit f0cc122d15
2 changed files with 104 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
Yavsc/Views/HairCutCommand/HairCut.cshtml
View File

@ -1,27 +1,16 @@
@model Yavsc.Models.Haircut.HairCutQuery
@{ ViewData["Title"] = $"{ViewBag.Activity.Name}: Votre commande"; }
@await Html.PartialAsync("BrusherProfileScript",ViewData["PerfPrefs"])
@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/eonasdan-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="~/lib/eonasdan-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
<style>
#map {
height: 30em;
width: 30em;
}
#Location_combo li {
cursor: pointer;
}
#Location_combo li:hover {
text-decoration: underline;
cursor: pointer;
}
</style>
#map {
width: 100%;
height: 250px;
}
</style>
}
@section scripts {
@ -153,97 +142,6 @@
});
</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>
@ -353,22 +251,14 @@
<label for="Location_Address" class="col-md-2 control-label">
@SR["Location"]
</label>
<div class="col-md-10">
<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"]>
<input asp-for="Location.Address" type="text" name="Location_Address" id="Location_Address" class="form-control">
<span asp-validation-for="Location.Address" class="text-danger" id="valloc"></span>
<ul id="loccomb">
</ul>
<div id="map"></div>
</div>
</div>
</div>
</div>
</div>
<div id="map" class="map" data-val="valloc" data-addr="Location_Address" data-loccombo="loccomb"
data-lat="Address_Latitude" data-lon="Address_Longitude" ></div>
@Html.Hidden("Address.Latitude")
@Html.Hidden("Address.Longitude")
</div>
<div class="form-group">
@ -400,3 +290,4 @@
<input type="hidden" name="activityCode" value="@ViewBag.Activity.Code" />
</form>
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
@{ await Html.RenderPartialAsync("_MapScriptsPartial"); }

93
Yavsc/Views/Shared/_MapScriptsPartial.cshtml Normal file
View 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>