Cambios en Trayectos
This commit is contained in:
@@ -36,9 +36,12 @@
|
||||
<asp:Content ID="Content5" ContentPlaceHolderID="H" runat="Server">
|
||||
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
|
||||
<ContentTemplate>
|
||||
<li>
|
||||
<li>
|
||||
<asp:LinkButton runat="server" ID="BtnTerminarTrayeto" OnClick="BtnTerminarTrayeto_Click"><i class="fa fa-map-marker"></i>Terminar Trayecto</asp:LinkButton>
|
||||
</li>
|
||||
</li>
|
||||
<li>
|
||||
<asp:LinkButton runat="server" ID="LnkActualizarEstatus" OnClick="LnkActualizarEstatus_Click"><i class="fa fa-refresh"></i>Actualizar al estatus siguiente</asp:LinkButton>
|
||||
</li>
|
||||
<li>
|
||||
<asp:LinkButton ID="LnkAgregar" OnClick="LnkAgregar_Click" runat="server"><i class="fa fa-plus"></i>Agregar Gasto</asp:LinkButton>
|
||||
</li>
|
||||
@@ -223,6 +226,16 @@
|
||||
<div class="col-md-4 v-center">
|
||||
<asp:Literal ID="LtlExcesosVelo" runat="server"></asp:Literal>
|
||||
</div>
|
||||
<div class="col-md-2 v-center">
|
||||
<b>
|
||||
<asp:Literal runat="server" Text="Tiempo Estimado:"></asp:Literal></b>
|
||||
</div>
|
||||
<div class="col-md-3 v-center">
|
||||
<asp:Label ID="LblETA" runat="server" ClientIDMode="Static"></asp:Label>
|
||||
</div>
|
||||
<div class="col-md-1 v-center">
|
||||
<asp:LinkButton ID="BtnRecalcular" runat="server" Text="" OnClick="BtnRecalcular_Click" CssClass="btn btn-sm btn-circle btn-primary" ><i class='fa fa-refresh' aria-hidden='true'></i></asp:LinkButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -469,7 +482,7 @@
|
||||
</div>
|
||||
<div class="portlet-body form">
|
||||
<div style="max-height: 392px; overflow-y: scroll">
|
||||
<asp:GridView ID="GvGastos" runat="server" GridLines="None" CssClass="table table-striped table-advance table-hover Widthall ScrollAD"
|
||||
<asp:GridView ID="GvGastos" runat="server" GridLines="None" CssClass="table table-striped table-advance table-hover Widthall ScrollAD"
|
||||
data-sort="true" data-rows="1" AutoGenerateColumns="False" EmptyDataText="No se encontraron registros" OnRowDataBound="GvGastos_RowDataBound">
|
||||
<Columns>
|
||||
<asp:BoundField DataField="Cantidad" HeaderText="Cantidad" DataFormatString="{0:N2}" ItemStyle-HorizontalAlign="Left" />
|
||||
@@ -547,28 +560,70 @@
|
||||
</ContentTemplate>
|
||||
</asp:UpdatePanel>
|
||||
</div>
|
||||
<asp:Button ID="BtnRefrescarPagina" runat="server" ClientIDMode="Static" Text="Refrescar" Style="display: none;" />
|
||||
|
||||
</asp:Content>
|
||||
<asp:Content ID="Content8" ContentPlaceHolderID="JS" runat="Server">
|
||||
<script type="text/javascript">
|
||||
var map;
|
||||
function initMap() {
|
||||
map = new google.maps.Map(document.getElementById('map'), {
|
||||
center: { lat: 29.0730, lng: -110.9559 },
|
||||
zoom: 7
|
||||
});
|
||||
}
|
||||
var polylines = [];
|
||||
var polygons = [];
|
||||
var polybounds = [];
|
||||
var markers = [];
|
||||
var GeoReferencias = []
|
||||
var GeoReferencias = [];
|
||||
var posicionesETA = [];
|
||||
var lastOpenedInfoWindow;
|
||||
var directionsDisplay;
|
||||
var posInicio, posFin;
|
||||
|
||||
function initMap() {
|
||||
polylines = [];
|
||||
polygons = [];
|
||||
polybounds = [];
|
||||
markers = [];
|
||||
GeoReferencias = [];
|
||||
posicionesETA = [];
|
||||
|
||||
map = new google.maps.Map(document.getElementById('map'), {
|
||||
center: { lat: 29.0730, lng: -110.9559 },
|
||||
zoom: 7
|
||||
});
|
||||
|
||||
//CalcularRuta();
|
||||
}
|
||||
|
||||
function RefrescarPagina() {
|
||||
$('#BtnRefrescarPagina').click();
|
||||
}
|
||||
|
||||
function CalcularRuta() {
|
||||
var origin1 = new google.maps.LatLng(55.930385, -3.118425);
|
||||
|
||||
var destinationA = 'Stockholm, Sweden';
|
||||
var destinationB = new google.maps.LatLng(50.087692, 14.421150);
|
||||
|
||||
var service = new google.maps.DistanceMatrixService();
|
||||
service.getDistanceMatrix(
|
||||
{
|
||||
origins: [origin1],
|
||||
destinations: [destinationA, destinationB],
|
||||
travelMode: 'DRIVING'
|
||||
//transitOptions: TransitOptions,
|
||||
//drivingOptions: DrivingOptions,
|
||||
//unitSystem: UnitSystem,
|
||||
//avoidHighways: Boolean,
|
||||
//avoidTolls: Boolean,
|
||||
}, callback);
|
||||
|
||||
function callback(response, status) {
|
||||
if (status !== "OK") {
|
||||
alert("Error was: " + status);
|
||||
} else {
|
||||
alert(JSON.stringify(response));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//$(document).ready(function () {
|
||||
// initMap();
|
||||
// DeleteMarkers();
|
||||
//});
|
||||
function DeleteMarkers() {
|
||||
for (var i = 0; i < markers.length; i++) {
|
||||
markers[i].setMap(null);
|
||||
@@ -582,13 +637,14 @@
|
||||
directionsDisplay.setMap(null);
|
||||
}
|
||||
}
|
||||
|
||||
function doScaledCLick(boton) {
|
||||
setTimeout(function () {
|
||||
$(boton).click();
|
||||
}, 250);
|
||||
}
|
||||
|
||||
function creaPoligono(coords, color, Geocerca, Estatus, InicioFin, CveEstatus, CveEstatusAnterior) {
|
||||
function creaPoligono(coords, color, Geocerca, Estatus, InicioFin, CveEstatus, CveEstatusAnterior, cruzo) {
|
||||
var polygon = new google.maps.Polygon({
|
||||
paths: coords,
|
||||
strokeColor: color,
|
||||
@@ -600,11 +656,10 @@
|
||||
polygon.setMap(map);
|
||||
polygons.push(polygon);
|
||||
|
||||
CreaMarcadorPoligono(coords, Geocerca, Estatus, InicioFin, CveEstatus, CveEstatusAnterior)
|
||||
CreaMarcadorPoligono(coords, Geocerca, Estatus, InicioFin, CveEstatus, CveEstatusAnterior, cruzo)
|
||||
}
|
||||
var posInicio, posFin;
|
||||
|
||||
function CreaMarcadorPoligono(coords, GeoCerca, Estatus, InicioFin, CveEstatus, CveEstatusAnterior) {
|
||||
|
||||
function CreaMarcadorPoligono(coords, GeoCerca, Estatus, InicioFin, CveEstatus, CveEstatusAnterior, cruzo) {
|
||||
var bounds = new google.maps.LatLngBounds();
|
||||
for (i = 0; i < coords.length; i++) {
|
||||
bounds.extend(coords[i]);
|
||||
@@ -629,6 +684,12 @@
|
||||
|
||||
calculateAndDisplayRoute(directionsService, directionsDisplay, posInicio, posFin);
|
||||
}
|
||||
|
||||
if (cruzo == "0") {
|
||||
var center = bounds.getCenter();
|
||||
posicionesETA.push({ lat: center.lat(), lng: center.lng() });
|
||||
}
|
||||
|
||||
var marker = new google.maps.Marker({
|
||||
position: bounds.getCenter(),
|
||||
title: GeoCerca,
|
||||
@@ -647,6 +708,7 @@
|
||||
|
||||
markers.push(marker);
|
||||
}
|
||||
|
||||
function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
|
||||
var waypts = [];
|
||||
var orden = GeoReferencias.sort((a, b) => parseInt(a.CveEstatusAnterior) - parseInt(b.CveEstatusAnterior));
|
||||
@@ -669,6 +731,7 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function CenterPoligono(coords) {
|
||||
var bounds = new google.maps.LatLngBounds();
|
||||
for (i = 0; i < coords.length; i++) {
|
||||
@@ -706,6 +769,29 @@
|
||||
|
||||
map.fitBounds(bounds)
|
||||
}
|
||||
|
||||
function CreaMarcadorPI(coords, nomPunto, ContentString) {
|
||||
var marker = new google.maps.Marker({
|
||||
position: coords,
|
||||
title: nomPunto,
|
||||
map: map
|
||||
});
|
||||
var infowindow = new google.maps.InfoWindow({
|
||||
content: ContentString
|
||||
});
|
||||
marker.addListener('click', function () {
|
||||
closeLastOpenedInfoWindow();
|
||||
infowindow.open(map, marker);
|
||||
lastOpenedInfoWindow = infowindow;
|
||||
});
|
||||
markers.push(marker);
|
||||
if (markers.length > 1) {
|
||||
fitBoundsToVisibleMarkers()
|
||||
} else if (markers.length === 1) {
|
||||
map.setZoom(15);
|
||||
map.setCenter(coords);
|
||||
}
|
||||
}
|
||||
|
||||
function CreaMarcador(coords, nomEquipo, ContentString, imagen) {
|
||||
//setTimeout(function () {
|
||||
@@ -729,7 +815,7 @@
|
||||
lastOpenedInfoWindow = infowindow;
|
||||
});
|
||||
markers.push(marker);
|
||||
|
||||
posicionesETA.push(coords);
|
||||
}
|
||||
|
||||
function creaPolyline(coords, color, GeoCerca) {
|
||||
@@ -782,7 +868,97 @@
|
||||
|
||||
}
|
||||
|
||||
function CreaCirculo(coords, color) {
|
||||
//var Circle = new google.maps.Circle({
|
||||
// strokeColor: color,
|
||||
// strokeOpacity: 0.8,
|
||||
// strokeWeight: 2,
|
||||
// fillColor: color,
|
||||
// fillOpacity: 0.35,
|
||||
// map: map,
|
||||
// center: coords,
|
||||
// radius: 15
|
||||
//});
|
||||
var Circle = new google.maps.Marker({
|
||||
position: coords,
|
||||
icon: {
|
||||
path: google.maps.SymbolPath.CIRCLE,
|
||||
scale: 10,
|
||||
fillColor: color,
|
||||
fillOpacity: 0.35,
|
||||
strokeWeight: 2,
|
||||
strokeColor: color,
|
||||
strokeOpacity: 0.8
|
||||
},
|
||||
map: map
|
||||
});
|
||||
circles.push(Circle);
|
||||
}
|
||||
|
||||
function CalcularETA() {
|
||||
|
||||
if (posicionesETA.length > 1) {
|
||||
var latlongs = [];
|
||||
var destinations = [];
|
||||
var sources = [];
|
||||
|
||||
for (var i = 0; i < posicionesETA.length; i++) {
|
||||
latlongs.push([posicionesETA[i].lng, posicionesETA[i].lat]);
|
||||
|
||||
if (i > 0) {
|
||||
destinations.push(i);
|
||||
}
|
||||
|
||||
if (i < posicionesETA.length - 1) {
|
||||
sources.push(i);
|
||||
}
|
||||
}
|
||||
|
||||
const body = { locations: latlongs, destinations: destinations, sources: sources, resolve_locations: true };
|
||||
|
||||
fetch('https://api.openrouteservice.org/v2/matrix/driving-car', {
|
||||
method: 'POST', // or 'PUT'
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': '5b3ce3597851110001cf624839503f1e326e4ab8aa8a27afbcf30f6a'
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
let duracionTotal = 0;
|
||||
|
||||
if (data.durations.length > 0) {
|
||||
for (var j = 0; j < data.durations.length; j++) {
|
||||
let duracionPunto = data.durations[j][j]
|
||||
duracionTotal += duracionPunto;
|
||||
}
|
||||
}
|
||||
|
||||
LblETA.innerText = formatETA(duracionTotal);
|
||||
})
|
||||
.catch((error) => {
|
||||
alert('Error:' + error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function formatETA(time) {
|
||||
// Hours, minutes and seconds
|
||||
var hrs = ~~(time / 3600);
|
||||
var mins = ~~((time % 3600) / 60);
|
||||
var secs = ~~time % 60;
|
||||
|
||||
// Output like "1:01" or "4:03:59" or "123:03:59"
|
||||
var ret = "";
|
||||
if (hrs > 0) {
|
||||
ret += "" + hrs + " horas " + (mins < 10 ? "0" : "");
|
||||
}
|
||||
ret += "" + mins + " minutos " + (secs < 10 ? "0" : "");
|
||||
ret += "" + secs + " segundos";
|
||||
return ret;
|
||||
}
|
||||
|
||||
</script>
|
||||
<script src="<%= String.Format("https://maps.googleapis.com/maps/api/js?key={0}&libraries=places", Extensiones.GOOGLE_MAPS_API_KEY) %>"></script>
|
||||
</asp:Content>
|
||||
|
||||
Reference in New Issue
Block a user