205 lines
7.8 KiB
Plaintext
205 lines
7.8 KiB
Plaintext
@model RdvQuery
|
||
@{ ViewData["Title"] = $"Proposition de rendez-vous à {Model.PerformerProfile.Performer.UserName} [{ViewBag.Activity.Name}]"; }
|
||
|
||
<script src="https://maps.googleapis.com/maps/api/js?key=@ViewBag.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" />
|
||
@section header {
|
||
<style>
|
||
#map {
|
||
width: 100%;
|
||
height: 250px;
|
||
}
|
||
#Location_combo li {
|
||
cursor: pointer;
|
||
}
|
||
#Location_combo li:hover {
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
}
|
||
@section scripts {
|
||
<script>
|
||
$(document).ready(function () {
|
||
|
||
$('#datetimepicker2').datetimepicker({
|
||
locale: 'fr',
|
||
format: "YYYY/MM/DD HH:mm"
|
||
});
|
||
|
||
|
||
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);
|
||
$('#' + config.longId).val(pos.lng);
|
||
});
|
||
$('#' + 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: {
|
||
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', $(this).data("geoloc")) })
|
||
.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>
|
||
}
|
||
<h2>@ViewData["Title"]</h2>
|
||
<form asp-action="Create" id="FrmComCre" role="form">
|
||
<div class="form-horizontal">
|
||
<h4>Saisissez votre demande de rendez-vous</h4>
|
||
<hr />
|
||
<div asp-validation-summary="ValidationSummary.All" class="text-danger" id="valsum"></div>
|
||
<div class="form-group" has-feedback>
|
||
<fieldset>
|
||
<legend>Votre évennement</legend>
|
||
<label for="EventDate" class="col-md-2 control-label">
|
||
Date de l'évennement
|
||
</label>
|
||
<div class="col-md-10">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class='col-sm-6'>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
|
||
<span asp-validation-for="EventDate" class="text-danger">
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<label for="Location_Address" class="col-md-2 control-label">
|
||
Lieu
|
||
</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" data-val-remote="Google n'a pas pu identifier ce lieu">
|
||
<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>
|
||
<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>
|
||
@Html.HiddenFor(model=>model.Location.Latitude)
|
||
@Html.HiddenFor(model=>model.Location.Longitude)
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="col-md-offset-2 col-md-10">
|
||
<input type="submit" value="Créer" class="btn btn-default" />
|
||
</div>
|
||
</div>
|
||
@Html.HiddenFor(model=>model.ClientId)
|
||
@Html.HiddenFor(model=>model.PerformerId)
|
||
@Html.HiddenFor(model=>model.ActivityCode)
|
||
</div>
|
||
|
||
|
||
</form>
|
||
|
||
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
|