fixes GMaps usage & Command creation

This commit is contained in:
2019-09-01 01:31:55 +01:00
parent cec790b71e
commit 5a3fdada8f
12 changed files with 194 additions and 271 deletions

View File

@ -58,4 +58,11 @@
<script src="~/js/dropzone.js"></script>
@{ await Html.RenderPartialAsync("_FSScriptsPartial"); }
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
<script>
$(document).ready(function() {
if (typeof(allowCircleToBlog) !== 'undefined') {
$('input.Blogcirle[type=checkbox]').on('change', allowCircleToBlog);
}
});
</script>
}

View File

@ -4,7 +4,7 @@
ViewData["Title"] = SR["Blog post edition"];
}
@section header{
@section header {
<link href="~/css/main/quill.snow.css" rel="stylesheet">
<link href="~/css/main/dropzone.css" rel="stylesheet">
@ -35,9 +35,18 @@
<script src="~/js/dropzone.js"></script>
<script src="~/js/quill.js"></script>
<script src="~/js/to-markdown.js"></script>
@{ await Html.RenderPartialAsync("_FSScriptsPartial"); }
}
@section scripts {
<script>
$(document).ready(function() {
if (typeof(allowCircleToBlog) !== 'undefined') {
$('input.Blogcirle[type=checkbox]').on('change', allowCircleToBlog);
}
$(".mdcoding").addClass('hidden');
var onchange = function(){
@ -101,6 +110,7 @@
});
</script>
@Html.Partial("_ValidationScriptsPartial")
}
<h2 > @SR["Blog post edition"] </h2>
<label><input type="checkbox" id="vcbtn" />Editer le code source Markdown</label>

View File

@ -1,27 +1,18 @@
@model RdvQuery
@{ ViewData["Title"] = $"Proposition de rendez-vous à {Model.PerformerProfile.Performer.UserName} [{ViewBag.Activity.Name}]"; }
@section scripts {
@model RdvQuery
@section header {
<style>
#map {
width: 100%;
height: 250px;
}
</style>
<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 {
width: 100%;
height: 250px;
}
</style>
<script>
$(document).ready(function () {
$('#datetimepicker2').datetimepicker({
locale: 'fr',
format: "YYYY/MM/DD HH:mm"
});
});
</script>
}
@{ ViewData["Title"] = $"Proposition de rendez-vous à {Model.PerformerProfile.Performer.UserName} [{ViewBag.Activity.Name}]"; }
<h2>@ViewData["Title"]</h2>
<form asp-action="Create" method="post">
<div class="form-horizontal">
@ -30,7 +21,7 @@
<div asp-validation-summary="ValidationSummary.All" class="text-danger"></div>
<div class="form-group" has-feedback>
<fieldset>
<legend>Votre évennement</legend>
<legend>La date de votre évennement</legend>
<label for="EventDate" class="col-md-2 control-label">
Date de l'évennement
</label>
@ -41,80 +32,83 @@
<div class='input-group date' id='datetimepicker2'>
<input class="form-control" name="EventDate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<span asp-validation-for="EventDate" class="text-danger">
</span>
<span asp-validation-for="EventDate" class="text-danger">
</span>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<label for="Location_Address" class="col-md-2 control-label">
Lieu
<div class="form-group">
<fieldset>
<label asp-for="Location.Address" class="col-md-2 control-label">@SR["Address"]</label>
<div class="col-md-10">
<input asp-for="Location.Address" class="form-control" type="text" data-val-required="Spécifier un lieu" />
<span id="AddressError" asp-validation-for="Location.Address" class="text-danger"></span>
<ul id="LocationCombo" >
</ul>
<div id="map"></div>
</div>
</fieldset>
</div>
<div class="form-group">
<fieldset>
<label asp-for="Reason" class="col-md-2 control-label">
Donnez ici une raison à cette demande
</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="Spécifier un lieu" >
<span asp-validation-for="Location.Address" class="text-danger"></span>
<ul id="loccomb">
</ul>
</div>
</div>
</div>
</div>
<div id="map" class="map" data-val="valloc" data-addr="Location_Address" data-loccombo="loccomb" data-lat="Location_Latitude" data-lon="Location_Longitude" ></div>
</div>
<label asp-for="Reason" class="col-md-2 control-label">
Donnez ici une raison à cette demande
</label>
<div class="col-md-10">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div id='reason1'>
<textarea rows="15" asp-for="Reason" type="text" name="Reason" id="Reason" maxlength="4096" class="form-control"></textarea>
<span asp-validation-for="Reason" class="text-danger"></span>
<dl>
<dt>@SR["Coordonées GPS"]
</dt>
<dd>
<input class="text-box" id="Location_Latitude" name="Location.Latitude" type="text" value="@Model.Location.Latitude" readonly/>
<input class="text-box" id="Location_Longitude" name="Location.Longitude" type="text" value="@Model.Location.Longitude" readonly/>
</dd>
</dl>
</div>
<textarea rows="15" asp-for="Reason" type="text" name="Reason" id="Reason" maxlength="4096" class="form-control"></textarea>
<span asp-validation-for="Reason" class="text-danger"></span>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-default" value="Créer" />
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-default" value="Créer" />
</div>
</div>
@Html.HiddenFor(model=>model.ClientId)
@Html.HiddenFor(model=>model.PerformerId)
@Html.HiddenFor(model=>model.ActivityCode)
</div>
</div>
@Html.HiddenFor(model=>model.ClientId)
@Html.HiddenFor(model=>model.PerformerId)
@Html.HiddenFor(model=>model.ActivityCode)
@Html.HiddenFor(model=>model.Location.Latitude)
@Html.Hidden("Location.Longitude")
</form>
@section scripts {
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
@{ await Html.RenderPartialAsync("_MapScriptsPartial"); }
<script>
$(document).ready(function(){
$("#Location_Address").googlegeocode({
culture: '@System.Globalization.CultureInfo.CurrentCulture.Name',
mapsApiKey: '@Startup.GoogleSettings.BrowserApiKey',
mapId: 'map',
longId: 'Location_Longitude',
latId: 'Location_Latitude',
addrValidationId: 'AddressError',
formValidId: 'ValidationSummary',
locComboId: 'LocationCombo'});
$('#datetimepicker2').datetimepicker({
locale: 'fr',
format: "YYYY/MM/DD HH:mm"
});
})
</script>
}

View File

@ -99,7 +99,7 @@
<input asp-for="OrganizationAddress.Address" class="form-control" type="text" />
<span id="AddressError" asp-validation-for="OrganizationAddress.Address" class="text-danger"></span>
<ul id="loccomb" >
<ul id="LocationCombo" >
</ul>
<div id="map" class="map" data-val="valloc" data-addr="OrganizationAddress_Address" data-loccombo="loccomb" data-lat="OrganizationAddress_Latitude" data-lon="OrganizationAddress_Longitude" data-val-slat="@Model.OrganizationAddress.Latitude" data-val-slon="@Model.OrganizationAddress.Longitude" ></div>
@ -118,8 +118,20 @@
@Html.Hidden("PerfomerId")
<button type="submit" class="btn btn-default">@SR["UnsetActivity"]</button>
</form>
@section scripts {
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
@{ await Html.RenderPartialAsync("_MapScriptsPartial"); }
<script>
$(document).ready(function(){
$("#OrganizationAddress_Address").googlegeocode({
culture: '@System.Globalization.CultureInfo.CurrentCulture.Name',
mapsApiKey: '@Startup.GoogleSettings.BrowserApiKey',
mapId: 'map',
longId: 'OrganizationAddress_Longitude',
latId: 'OrganizationAddress_Latitude',
addrValidationId: 'AddressError',
formValidId: 'ValidationSummary',
locComboId: 'LocationCombo'})
})
</script>
}

View File

@ -1,48 +1,48 @@
@model SetAddressViewModel
@model Location
@section header {
<style>
#map {
#amap {
width: 100%;
height: 250px;
}
</style>
}
<form asp-action="SetAddress">
<div asp-validation-summary="ValidationSummary.All" class="text-danger" id="ValidationSummary"></div>
<div class="form-group">
<label asp-for="Street1" class="col-md-2 control-label">@SR["Address"]</label>
<label asp-for="Address" class="col-md-2 control-label">@SR["Address"]</label>
<div class="col-md-10">
<input asp-for="Street1" class="form-control" type="text" />
<input asp-for="Address" class="form-control" type="text" data-val-required="Spécifier un lieu" />
<span id="AddressError" asp-validation-for="Street1" class="text-danger"></span>
<span id="AddressError" asp-validation-for="Address" class="text-danger"></span>
<ul id="LocationCombo" >
</ul>
<div id="map"></div>
<div id="amap"></div>
<input class="text-box" id="Latitude" name="Latitude" type="hidden" value="@Model.Latitude" readonly/>
<input class="text-box" id="Longitude" name="Longitude" type="hidden" value="@Model.Longitude" readonly/>
</div>
</div>
<input type="submit" class="btn btn-success" value="Enregistrer" />
</form>
@section scripts {
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
@section scripts {
<script src="https://maps.googleapis.com/maps/api/js?key=@ViewBag.GoogleSettings.BrowserApiKey"></script>
<script src="~/js/google-geoloc.js" asp-append-version="true"></script>
<script >
$(document).ready(function(){
$.validator.setDefaults({
messages: {
remote: "Ce lieu n'est pas identifié par les services de géo-localisation Google",
required: "Veuillez renseigner ce champ"
}
});
$("#Address").googlegeocode()
})
</script>
@{ await Html.RenderPartialAsync("_MapScriptsPartial"); }
<script>
$(document).ready(function(){
$("#Address").googlegeocode({
culture: '@System.Globalization.CultureInfo.CurrentCulture.Name',
mapsApiKey: '@Startup.GoogleSettings.BrowserApiKey',
mapId: 'amap',
longId: 'Longitude',
latId: 'Latitude',
addrValidationId: 'AddressError',
formValidId: 'ValidationSummary',
locComboId: 'LocationCombo'})
})
</script>
}

View File

@ -24,14 +24,6 @@
<link rel="stylesheet" href="@Startup.SiteSetup.StyleSheet" asp-append-version="true"/>
<script>
$(document).ready(function() {
if (typeof(allowCircleToBlog) !== 'undefined') {
$('input.Blogcirle[type=checkbox]').on('change', allowCircleToBlog);
}
});
</script>
@RenderSection("header", required: false)
</head>
<body>

View File

@ -1,108 +1,2 @@
<script src="https://maps.googleapis.com/maps/api/js?key=@Yavsc.Startup.GoogleSettings.BrowserApiKey"></script>
<script>
$(document).ready(function(){
function setCoord(config, pos)
{
var culture = '@System.Globalization.CultureInfo.CurrentCulture.Name';
$('#'+config.latId).val(pos.lat.toLocaleString(culture, { minimumFractionDigits: 7 }));
$('#'+config.lonId).val(pos.lng.toLocaleString(culture, { minimumFractionDigits: 7 }));
}
var marker=null;
function chooseLoc(config, sender, loc) {
if (sender === 'user') $('#'+config.addrId).val(loc.formatted_address);
var pos = loc.geometry.location;
var mapid = '#'+config.addrId;
var gmap = config.gmap;
gmap.setCenter(pos);
setCoord(config, pos);
if (marker!=null) {
marker.position = pos;
}
else {
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();
setCoord(config, { lat: pos.lat(), lng: pos.lng() });
});
}
$('#'+config.addrId).valid();
return true;
}
function setupInputAddress (mapDiv)
{
var config = {
mapId: $(mapDiv).attr('id'),
addrId: $(mapDiv).data('addr'),
lonId: $(mapDiv).data('lon'),
latId: $(mapDiv).data('lat'),
locComboId: $(mapDiv).data('loccombo')
};
var scenter = { lat: parseFloat($('#'+config.latId).val().replace(',','.')), lng: parseFloat($('#'+config.lonId).val().replace(',','.')) } ;
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,
center: scenter
});
config.gmap = gmap;
marker = new google.maps.Marker({
map: gmap,
draggable: true,
animation: google.maps.Animation.DROP,
position: scenter
});
}
$("div.map").each(function(indexMap){
setupInputAddress(this)
});
});
</script>
<script src="~/js/google-geoloc.js" asp-append-version="true"></script>