notazof/yavsc
1
1
Fork 0
Code Issues 1 Pull requests 1 Projects 2 Releases 9 Packages Wiki Activity Actions

prepares refactorisation for geocoding

Browse source
This commit is contained in:
Paul Schneider 2016-11-06 00:31:23 +01:00
commit 56d0654fdc
2 changed files with 118 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

53
Yavsc/Views/Command/Create.cshtml
View file

@ -27,24 +27,34 @@
<script> <script>
$(document).ready(function(){ $(document).ready(function(){
var config = {
mapId: 'map',
addrId: 'Location_Address',
longId: 'Location_Longitude',
latId: 'Location_Latitude',
addrValidationId: 'valloc',
formValidId: 'valsum',
locComboId: 'loccomb'
};
$.validator.setDefaults({ $.validator.setDefaults({
messages: { messages: {
remote: "Ce lieu n'est pas identifié par les services de géo-localisation Google", remote: "Ce lieu n'est pas identifié par les services de géo-localisation Google",
required: "Veuillez renseigner ce champ" required: "Veuillez renseigner ce champ"
} }
}); });
var gmap = new google.maps.Map(document.getElementById('map'), { var gmap = new google.maps.Map(document.getElementById(config.mapId), {
zoom: 16, zoom: 16,
center: { lat: 48.862854, lng: 2.2056466 } center: { lat: 48.862854, lng: 2.2056466 }
}); });
var marker; var marker;
function chooseLoc(loc) { function chooseLoc(sender,loc) {
$('#Location_Address').val(loc.formatted_address); if (sender === 'user') $('#'+config.addrId).val(loc.formatted_address);
var pos = loc.geometry.location; var pos = loc.geometry.location;
var lat = new Number(pos.lat); var lat = new Number(pos.lat);
var lng = new Number(pos.lng); var lng = new Number(pos.lng);
$('#Location_Latitude').val(lat.toLocaleString('en')); $('#'+config.latId).val(lat.toLocaleString('en'));
$('#Location_Longitude').val(lng.toLocaleString('en')); $('#'+config.longId).val(lng.toLocaleString('en'));
gmap.setCenter(pos); gmap.setCenter(pos);
if (marker) {  if (marker) { 
marker.setMap(null); marker.setMap(null);
@ -58,39 +68,41 @@ $(document).ready(function(){
google.maps.event.addListener(marker, 'dragend', function() { google.maps.event.addListener(marker, 'dragend', function() {
// TODO reverse geo code // TODO reverse geo code
var pos = marker.getPosition(); var pos = marker.getPosition();
$('#Location_Latitude').val(pos.lat); $('#'+config.latId).val(pos.lat);
$('#Location_Longitude').val(pos.lng); $('#'+config.longId).val(pos.lng);
}); });
$('#Location_Address').valid(); $('#'+config.addrId).valid();
$('#'+config.addrValidationId).empty();
$('#'+config.formValidId).empty();
return true; return true;
} }
$('#EventDate').datepicker({language:'fr'}); $('#EventDate').datepicker({language:'fr'});
$('#Location_Address').rules("add", $('#'+config.addrId).rules("add",
{ {
remote: { remote: {
url: 'http://maps.googleapis.com/maps/api/geocode/json', url: 'https://maps.googleapis.com/maps/api/geocode/json',
type: 'get', type: 'get',
data: { data: {
sensor: false, sensor: false,
address: function () { return $('#Location_Address').val() } address: function () { return $('#'+config.addrId).val() }
}, },
dataType: 'json', dataType: 'json',
dataFilter: function(datastr,type) { dataFilter: function(datastr,type) {
$('#Location_combo').html(""); $('#'+config.locComboId).html("");
var data = JSON.parse(datastr); var data = JSON.parse(datastr);
data.results.forEach(function(element) { data.results.forEach(function(element) {
if (element.formatted_address !== $('#Location_Address').val()) { if (element.formatted_address !== $('#'+config.addrId).val()) {
$('<li>'+element.formatted_address+'</li>') $('<li>'+element.formatted_address+'</li>')
.data("geoloc",element) .data("geoloc",element)
.click(function() { chooseLoc($(this).data("geoloc")) }) .click(function() { chooseLoc('user',$(this).data("geoloc")) })
.appendTo($('#Location_combo'));} .appendTo($('#'+config.locComboId));}
else { } else { }
}); });
if ((data.status === 'OK') && (data.results.length == 1)) if ((data.status === 'OK') && (data.results.length == 1))
{ {
chooseLoc(data.results[0]); chooseLoc('google',data.results[0]);
return true; return true;
} }
return false; return false;
@ -110,9 +122,8 @@ $(document).ready(function(){
<div class="form-horizontal"> <div class="form-horizontal">
<h4>@SR["Fill in your book query"]</h4> <h4>@SR["Fill in your book query"]</h4>
<hr /> <hr />
<div asp-validation-summary="ValidationSummary.All" class="text-danger"></div> <div asp-validation-summary="ValidationSummary.All" class="text-danger" id="valsum"></div>
<div class="form-group" has-feedback> <div class="form-group" has-feedback>
@Html.ValidationSummary()
<fieldset> <fieldset>
<legend><label for="EventDate" class="col-md-2 control-label" > <legend><label for="EventDate" class="col-md-2 control-label" >
@SR["Event date"] @SR["Event date"]
@ -154,8 +165,8 @@ $(document).ready(function(){
<input asp-for="Location.Address" type="text" name="Location.Address" id="Location_Address" <input asp-for="Location.Address" type="text" name="Location.Address" id="Location_Address"
class="form-control" data-val-required=@SR["SpecifyPlace"] class="form-control" data-val-required=@SR["SpecifyPlace"]
data-val-remote=@SR["GoogleDidntGeoLocalized"]> data-val-remote=@SR["GoogleDidntGeoLocalized"]>
<span asp-validation-for="Location.Address" class="text-danger" ></span> <span asp-validation-for="Location.Address" class="text-danger" id="valloc" ></span>
<ul id="Location_combo" > <ul id="loccomb" >
</ul> </ul>
<div id="map"></div> <div id="map"></div>
</div> </div>

166
Yavsc/Views/Manage/SetActivity.cshtml
View file

@ -1,42 +1,50 @@
@model PerformerProfile @model PerformerProfile
@{ @{ ViewData["Title"] = "Setup your performer profile"; }
ViewData["Title"] = "Setup your performer profile";
}
@section header{ @section header{
<script src="~/js/jquery-ui.js"></script> @{ await Html.RenderPartialAsync("_ValidationScriptsPartial");
<script src="~/lib/jquery-validation/jquery.validate.js"></script>
<script src="~/lib/jquery-validation/additional-methods.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script src="~/js/validator.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=@ViewBag.GoogleSettings.BrowserApiKey"></script> <script src="https://maps.googleapis.com/maps/api/js?key=@ViewBag.GoogleSettings.BrowserApiKey"></script>
<script src="~/js/google.geocode.js"></script> }
<style> <style>
#map { #map {
width: 100%; width: 100%;
height: 250px; height: 250px;
} }
</style> </style>
} }
@section scripts{ @section scripts{
<script> <script>
$(document).ready(function(){ $(document).ready(function(){
var gmap = new google.maps.Map(document.getElementById('map'), { var config = {
mapId: 'map',
addrId: 'OrganizationAddress_Address',
longId: 'OrganizationAddress_Longitude',
latId: 'OrganizationAddress_Latitude',
addrValidationId: 'AddressError',
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('map'), {
zoom: 16, zoom: 16,
center: { lat: 48.862854, lng: 2.2056466 } center: { lat: 48.862854, lng: 2.2056466 }
}); });
var marker; var marker;
function chooseLoc(loc) {
$('#Location_Address').val(loc.formatted_address); function chooseLoc(sender,loc) {
if (sender === 'user') $('#'+config.addrId).val(loc.formatted_address);
var pos = loc.geometry.location; var pos = loc.geometry.location;
var lat = new Number(pos.lat); var lat = new Number(pos.lat);
var lng = new Number(pos.lng); var lng = new Number(pos.lng);
$('#OrganizationAddress_Latitude').val(lat.toLocaleString()); $('#'+config.latId).val(lat.toLocaleString('en'));
$('#OrganizationAddress_Longitude').val(lng.toLocaleString()); $('#'+config.longId).val(lng.toLocaleString('en'));
gmap.setCenter(pos); gmap.setCenter(pos);
if (marker) { if (marker) { 
marker.setMap(null); marker.setMap(null);
} }
marker = new google.maps.Marker({ marker = new google.maps.Marker({
@ -48,53 +56,42 @@ var gmap = new google.maps.Map(document.getElementById('map'), {
google.maps.event.addListener(marker, 'dragend', function() { google.maps.event.addListener(marker, 'dragend', function() {
// TODO reverse geo code // TODO reverse geo code
var pos = marker.getPosition(); var pos = marker.getPosition();
$('#OrganizationAddress_Latitude').val(pos.lat); $('#'+config.latId).val(pos.lat);
$('#OrganizationAddress_Longitude').val(pos.lng); $('#'+config.longId).val(pos.lng);
}); });
$('#Location_Address').valid(); $('#'+config.addrId).valid();
$('#'+config.addrValidationId).empty();
$('#'+config.formValidId).empty();
return true; return true;
}; }
$('#Location_Address').geocode( { submit: 'btngeocode' , $('#'+config.addrId).rules("add",
inputLatitude: 'OrganizationAddress_Longitude',
inputLongitude: 'OrganizationAddress_Latitude',
combo: 'dropdownItems1',
onValidated: function (e) {
if (e.success) {
var firstres = e.results[0];
console.log(firstres);
console.log(firstres.geometry);
$('#AddressError').html("");
}
else {
if (e.status=="ZERO_RESULTS") {
$('#AddressError').html("aucun résultat");
}
else $('#AddressError').html(e.status);
}
} } );
$('#OrganizationAddress').rules("add",
{ {
remote: { remote: {
url: 'http://maps.googleapis.com/maps/api/geocode/json', url: 'https://maps.googleapis.com/maps/api/geocode/json',
type: 'get', type: 'get',
data: { data: {
sensor: false, sensor: false,
address: function () { return $('#Location_Address').val() } address: function () { return $('#'+config.addrId).val() }
}, },
dataType: 'json', dataType: 'json',
dataFilter: function(datastr,type) { dataFilter: function(datastr,type) {
$('#Location_combo').html(""); $('#'+config.locComboId).html("");
var data = JSON.parse(datastr); var data = JSON.parse(datastr);
data.results.forEach(function(element) { data.results.forEach(function(element) {
if (element.formatted_address !== $('#Location_Address').val()) { if (element.formatted_address !== $('#'+config.addrId).val()) {
$('<li>'+element.formatted_address+'</li>') $('<li>'+element.formatted_address+'</li>')
.data("geoloc",element) .data("geoloc",element)
.click(function() { chooseLoc($(this).data("geoloc")) }) .click(function() { chooseLoc('user',$(this).data("geoloc")) })
.appendTo($('#Location_combo'));}}); .appendTo($('#'+config.locComboId));}
return (data.status === 'OK') && (data.results.length == 1); else { }
});
if ((data.status === 'OK') && (data.results.length == 1))
{
chooseLoc('google',data.results[0]);
return true;
}
return false;
}, },
error: function(xhr, textStatus, errorThrown) error: function(xhr, textStatus, errorThrown)
{ {
@ -102,12 +99,9 @@ var gmap = new google.maps.Map(document.getElementById('map'), {
return false; return false;
} }
} }
});
}); });
</script> @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); } }
});
</script>
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}
<h2>@ViewData["Title"].</h2> <h2>@ViewData["Title"].</h2>
@ -116,23 +110,23 @@ var gmap = new google.maps.Map(document.getElementById('map'), {
<form id="FrmSetAct" asp-controller="Manage" asp-action="SetActivity" method="post" class="form-horizontal" role="form"> <form id="FrmSetAct" asp-controller="Manage" asp-action="SetActivity" method="post" class="form-horizontal" role="form">
<h4>@SR["Choose below your main activity"]:</h4> <h4>@SR["Choose below your main activity"]:</h4>
<hr /> <hr />
<div asp-validation-summary="ValidationSummary.All" class="text-danger"></div> <div asp-validation-summary="ValidationSummary.All" class="text-danger" id="valsum"></div>
<div class="form-group"> <div class="form-group">
<label asp-for="ActivityCode" class="col-md-2 control-label"></label> <label asp-for="ActivityCode" class="col-md-2 control-label"></label>
<div class="col-md-10"> <div class="col-md-10">
<select asp-for="ActivityCode" asp-items=@ViewBag.Activities class="form-control" > <select asp-for="ActivityCode" asp-items=@ViewBag.Activities class="form-control">
</select> </select>
<span asp-validation-for="ActivityCode" class="text-danger"></span> <span asp-validation-for="ActivityCode" class="text-danger"></span>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="AcceptNotifications" class="col-md-2 control-label"></label> <label asp-for="AcceptNotifications" class="col-md-2 control-label"></label>
<div class="col-md-10"> <div class="col-md-10">
<input asp-for="AcceptNotifications" class="form-control" /> <input asp-for="AcceptNotifications" class="form-control" />
<span asp-validation-for="AcceptNotifications" class="text-danger"></span> <span asp-validation-for="AcceptNotifications" class="text-danger"></span>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="AcceptPublicContact" class="col-md-2 control-label"></label> <label asp-for="AcceptPublicContact" class="col-md-2 control-label"></label>
<div class="col-md-10"> <div class="col-md-10">
@ -140,8 +134,8 @@ var gmap = new google.maps.Map(document.getElementById('map'), {
<span asp-validation-for="AcceptPublicContact" class="text-danger"></span> <span asp-validation-for="AcceptPublicContact" class="text-danger"></span>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="AcceptGeoLocalization" class="col-md-2 control-label"></label> <label asp-for="AcceptGeoLocalization" class="col-md-2 control-label"></label>
<div class="col-md-10"> <div class="col-md-10">
@ -149,8 +143,8 @@ var gmap = new google.maps.Map(document.getElementById('map'), {
<span asp-validation-for="AcceptGeoLocalization" class="text-danger"></span> <span asp-validation-for="AcceptGeoLocalization" class="text-danger"></span>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="WebSite" class="col-md-2 control-label"></label> <label asp-for="WebSite" class="col-md-2 control-label"></label>
<div class="col-md-10"> <div class="col-md-10">
@ -158,8 +152,8 @@ var gmap = new google.maps.Map(document.getElementById('map'), {
<span asp-validation-for="WebSite" class="text-danger"></span> <span asp-validation-for="WebSite" class="text-danger"></span>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="MinDailyCost" class="col-md-2 control-label"></label> <label asp-for="MinDailyCost" class="col-md-2 control-label"></label>
<div class="col-md-10"> <div class="col-md-10">
@ -167,8 +161,8 @@ var gmap = new google.maps.Map(document.getElementById('map'), {
<span asp-validation-for="MinDailyCost" class="text-danger"></span> <span asp-validation-for="MinDailyCost" class="text-danger"></span>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="MaxDailyCost" class="col-md-2 control-label"></label> <label asp-for="MaxDailyCost" class="col-md-2 control-label"></label>
<div class="col-md-10"> <div class="col-md-10">
@ -176,38 +170,38 @@ var gmap = new google.maps.Map(document.getElementById('map'), {
<span asp-validation-for="MaxDailyCost" class="text-danger"></span> <span asp-validation-for="MaxDailyCost" class="text-danger"></span>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="Active" class="col-md-2 control-label"></label> <label asp-for="Active" class="col-md-2 control-label"></label>
<div class="col-md-10"> <div class="col-md-10">
<input asp-for="Active" class="form-control" /> <input asp-for="Active" class="form-control" />
<span asp-validation-for="Active" class="text-danger"></span> <span asp-validation-for="Active" class="text-danger"></span>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="SIREN" class="col-md-2 control-label"></label> <label asp-for="SIREN" class="col-md-2 control-label"></label>
<div class="col-md-10"> <div class="col-md-10">
<input asp-for="SIREN" class="form-control" /> <input asp-for="SIREN" class="form-control" />
<span asp-validation-for="SIREN" class="text-danger"></span> <span asp-validation-for="SIREN" class="text-danger"></span>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label asp-for="OrganizationAddress.Address" class="col-md-2 control-label"></label> <label asp-for="OrganizationAddress.Address" class="col-md-2 control-label"></label>
<div class="col-md-10"> <div class="col-md-10">
<input asp-for="OrganizationAddress.Address" class="form-control" type="text" /> <input asp-for="OrganizationAddress.Address" class="form-control" type="text" />
<span id="AddressError" asp-validation-for="OrganizationAddress.Address" class="text-danger"></span> <span id="AddressError" asp-validation-for="OrganizationAddress.Address" class="text-danger"></span>
<ul id="loccomb" >
</ul>
<div id="map"></div> <div id="map"></div>
</div> </div>
</div> </div>
@Html.Hidden("OrganizationAddress.Latitude") @Html.Hidden("OrganizationAddress.Latitude") @Html.Hidden("OrganizationAddress.Longitude") @Html.Hidden("PerformerId")
@Html.Hidden("OrganizationAddress.Longitude")
@Html.Hidden("PerformerId")
<button type="submit" class="btn btn-default">Save these settings</button> <button type="submit" class="btn btn-default">Save these settings</button>
</form> </form>