Cambios en Trayectos

This commit is contained in:
2021-05-19 10:16:49 -07:00
parent 1bff45d151
commit 68c6d1b3d1
5 changed files with 518 additions and 154 deletions

View File

@@ -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>