521 lines
24 KiB
Plaintext
521 lines
24 KiB
Plaintext
<%@ Page Title="" Language="VB" MasterPageFile="~/SiteGPS.master" AutoEventWireup="false" CodeFile="Busqueda.aspx.vb" Inherits="GPS_Busqueda" %>
|
|
|
|
<asp:Content ID="Content1" ContentPlaceHolderID="CP" runat="Server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content2" ContentPlaceHolderID="Css" runat="Server">
|
|
<style type="text/css">
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
#map {
|
|
position: fixed !important;
|
|
width: 100%;
|
|
height: calc(100% - 51px);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.pac-container.pac-logo {
|
|
z-index: 100000;
|
|
}
|
|
|
|
|
|
#iw-container .iw-title {
|
|
font-family: 'Open Sans Condensed', sans-serif;
|
|
font-size: 22px;
|
|
font-weight: 400;
|
|
padding: 10px;
|
|
background-color: #48b5e9;
|
|
color: white;
|
|
margin: 0;
|
|
border-radius: 2px 2px 0 0;
|
|
}
|
|
|
|
#iw-container .iw-content {
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
font-weight: 400;
|
|
margin-right: 1px;
|
|
padding: 15px 5px 20px 15px;
|
|
max-height: 140px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.iw-content img {
|
|
float: right;
|
|
margin: 0 5px 5px 10px;
|
|
}
|
|
|
|
.iw-subTitle {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.iw-bottom-gradient {
|
|
position: absolute;
|
|
width: 326px;
|
|
height: 25px;
|
|
bottom: 10px;
|
|
right: 18px;
|
|
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
|
|
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
|
|
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
|
|
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
|
|
}
|
|
</style>
|
|
</asp:Content>
|
|
<asp:Content ContentPlaceHolderID="H" ID="Content9" runat="server">
|
|
<li>
|
|
<a id="BtnDir" onclick="$('#divDirecciones').modal();">
|
|
<i class='fa fa-search'></i><span>Buscar Dirección</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a id="BtnClose" onclick="$('#divAgregarTipo').modal()">
|
|
<i class='fa fa-taxi'></i><span>Buscar Equipo Más Cercano</span>
|
|
</a>
|
|
</li>
|
|
</asp:Content>
|
|
<asp:Content ID="Content6" ContentPlaceHolderID="C" runat="Server">
|
|
<asp:UpdatePanel ID="UpFiltros" runat="server" UpdateMode="conditional">
|
|
<ContentTemplate>
|
|
<asp:HiddenField ID="CommandArg" runat="server" ClientIDMode="Static" />
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
<div id="map"></div>
|
|
<div id="divAgregarTipo" class="modal ADS fade" role="dialog">
|
|
<div class="modal-dialog">
|
|
<asp:UpdatePanel ID="UpAgregar" class="modal-content rowpadding" tabindex="-1" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<h4 class="modal-title" id="myModalLabel">Buscar equipo más cercano a:</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<asp:UpdatePanel ID="UpBodyTipoEquipo" UpdateMode="Conditional" runat="server">
|
|
<ContentTemplate>
|
|
<div class="form-group form-md-line-input input-iconright">
|
|
<asp:DropDownList ID="DdlTipoRastreo" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DdlTipoRastreo_SelectedIndexChanged" CssClass="form-control select2me js-Impuesto-programmatic" Width="100%">
|
|
<asp:ListItem Value="Dir" Text="Dirección"></asp:ListItem>
|
|
<asp:ListItem Value="Coord" Text="Coordenadas"></asp:ListItem>
|
|
</asp:DropDownList>
|
|
<label for="<%=DdlTipoRastreo.ClientID.ToString()%>">Rastrear Por:</label>
|
|
</div>
|
|
<div class="form-group form-md-line-input input-iconright" runat="server" id="dvDireccion">
|
|
<asp:TextBox ID="TxtDireccion" runat="server" CssClass="form-control" Width="100%" CausesValidation="true"></asp:TextBox>
|
|
<asp:RequiredFieldValidator ID="RFVDireccion" runat="server" CssClass="help-block errorimput" ControlToValidate="TxtDireccion" ErrorMessage="<b><span style='text-decoration: underline'>ERROR:</span></b><br />El campo <b>''Dirección''</b> es necesario, por favor ingréselo." ValidationGroup="GrpObligatorio"></asp:RequiredFieldValidator>
|
|
<label for="<%= TxtDireccion.ClientID.ToString()%>">Dirección:</label>
|
|
</div>
|
|
<div class="row" id="dvLatLng" style="display: none" runat="server">
|
|
<div class="col-md-6">
|
|
<div class="form-group form-md-line-input">
|
|
<asp:TextBox ID="TxtLat" runat="server" CssClass="form-control" CausesValidation="true"></asp:TextBox>
|
|
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" CssClass="help-block errorimput" ControlToValidate="TxtLat" ValidationGroup="Grp2" ErrorMessage="<b><span style='text-decoration: underline'>ERROR:</span></b><br />El campo <b>''Latitud''</b> es necesario, por favor ingréselo."></asp:RequiredFieldValidator>
|
|
<label for="<%= TxtLat.ClientID.ToString()%>">Latitud:</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group form-md-line-input">
|
|
<asp:TextBox ID="TxtLng" runat="server" CssClass="form-control" CausesValidation="true"></asp:TextBox>
|
|
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" CssClass="help-block errorimput" ControlToValidate="TxtLng" ValidationGroup="Grp2" ErrorMessage="<b><span style='text-decoration: underline'>ERROR:</span></b><br />El campo <b>''Longitud''</b> es necesario, por favor ingréselo."></asp:RequiredFieldValidator>
|
|
<label for="<%= TxtLng.ClientID.ToString()%>">Longitud:</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<asp:UpdatePanel ID="UpFooter" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<asp:LinkButton ID="BtnBuscarEquipoC" runat="server" OnClick="BtnBuscarEquipoC_Click" CssClass="btn btn-primary" ValidationGroup="GrpObligatorio"> <i class='fa fa-search '></i> Buscar</asp:LinkButton>
|
|
<button id="btnCancelar" class="btn btn-default" data-dismiss="modal">Cancelar</button>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
<div id="divDirecciones" class="modal ADS fade" role="dialog">
|
|
<div class="modal-dialog">
|
|
<asp:UpdatePanel ID="UpBusquedaDir" class="modal-content rowpadding" tabindex="-1" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<h4 class="modal-title" id="H1" runat="server">Buscar Dirección en mapa:</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
|
|
<ContentTemplate>
|
|
<div class="form-group form-md-line-input input-iconright" runat="server" id="Div1">
|
|
<asp:TextBox ID="TxtDireccion2" runat="server" CssClass="form-control" Width="100%" CausesValidation="true"></asp:TextBox>
|
|
<label for="<%= TxtDireccion2.ClientID.ToString()%>">Direccion:</label>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<button class="btn btn-default" data-dismiss="modal">Cancelar</button>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
<asp:UpdatePanel runat="server" ID="UpHidden" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<asp:HiddenField ID="HdnCveDipositivo" runat="server" ClientIDMode="Static" />
|
|
<asp:Button runat="server" ID="BtnCargaComandos" Style="display: none" />
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
<div id="divComandos" class="modal ADS fade" role="dialog">
|
|
<div class="modal-dialog">
|
|
<asp:UpdatePanel ID="UpComandos" class="modal-content rowpadding" tabindex="-1" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<h4 class="modal-title" id="myModalLabel">Comandos para vehículo: </h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<asp:GridView ID="GvComandos" runat="server" DataKeyNames="CveComando, RequiereValor" Style="table-layout: fixed" AutoGenerateColumns="False" ShowHeader="True" EmptyDataText="No se encontraron comandos para este modelo" GridLines="none" ToolTip="Listado de Comandos" data-sort="false" CssClass="table table-striped table-hover Widthall ScrollAD">
|
|
<Columns>
|
|
<asp:TemplateField ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center">
|
|
<ItemTemplate>
|
|
<asp:Button ID="BtnEnviar" runat="server" CssClass="btn btn-primary" CommandName="EnviarComando" CommandArgument="<%# CType(Container, GridViewRow).RowIndex %>" Text="Enviar" />
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
<asp:BoundField HeaderText="Comando" DataField="Comando" ItemStyle-Width="40%" FooterStyle-HorizontalAlign="Left" />
|
|
<asp:TemplateField ItemStyle-Width="20%" ItemStyle-HorizontalAlign="Center">
|
|
<HeaderTemplate>Valor</HeaderTemplate>
|
|
<ItemTemplate>
|
|
<asp:TextBox ID="TxtValor" Visible="false" Width="99px" runat="server" Text=""></asp:TextBox>
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
<asp:BoundField DataField="UltimaFechaEjecucion" ItemStyle-Width="20%" HeaderText="Última Ejecución" ItemStyle-HorizontalAlign="center" />
|
|
<asp:BoundField DataField="FechaRespuesta" ItemStyle-Width="20%" HeaderText="Última Respuesta" ItemStyle-HorizontalAlign="center" />
|
|
</Columns>
|
|
</asp:GridView>
|
|
</div>
|
|
<div class="modal-footer">
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
</asp:Content>
|
|
<asp:Content ID="Content7" ContentPlaceHolderID="JS" runat="Server">
|
|
<script src="../Metronic/assets/layouts/layout3/scripts/jquery.datetimepicker.full.js"></script>
|
|
<script>
|
|
var geocoder;
|
|
var map;
|
|
var directionsService;
|
|
var directionsDisplay;
|
|
|
|
function initMap() {
|
|
var uluru = { lat: 29.0730, lng: -110.9559 }
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|
center: uluru,
|
|
zoom: 10
|
|
});
|
|
|
|
directionsService = new google.maps.DirectionsService;
|
|
directionsDisplay = new google.maps.DirectionsRenderer;
|
|
directionsDisplay.setOptions({ suppressMarkers: true });
|
|
geocoder = new google.maps.Geocoder();
|
|
directionsDisplay.setMap(map);
|
|
|
|
var input = document.getElementById('C_TxtDireccion');
|
|
var input2 = document.getElementById('C_TxtDireccion2');
|
|
var searchBox = new google.maps.places.SearchBox(input);
|
|
var searchBox2 = new google.maps.places.SearchBox(input2);
|
|
// map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
|
|
|
|
map.addListener('bounds_changed', function () {
|
|
searchBox.setBounds(map.getBounds());
|
|
searchBox2.setBounds(map.getBounds());
|
|
});
|
|
|
|
map.addListener('bounds_changed', function () {
|
|
searchBox.setBounds(map.getBounds());
|
|
searchBox2.setBounds(map.getBounds());
|
|
});
|
|
|
|
searchBox.addListener('places_changed', function () {
|
|
var places = searchBox.getPlaces();
|
|
|
|
if (places.length == 0) {
|
|
return;
|
|
}
|
|
|
|
// Clear out the old markers.
|
|
markers.forEach(function (marker) {
|
|
marker.setMap(null);
|
|
});
|
|
markers = [];
|
|
|
|
// For each place, get the icon, name and location.
|
|
var bounds = new google.maps.LatLngBounds();
|
|
places.forEach(function (place) {
|
|
if (!place.geometry) {
|
|
console.log("Returned place contains no geometry");
|
|
return;
|
|
}
|
|
var icon = {
|
|
url: place.icon,
|
|
size: new google.maps.Size(71, 71),
|
|
origin: new google.maps.Point(0, 0),
|
|
anchor: new google.maps.Point(17, 34),
|
|
scaledSize: new google.maps.Size(25, 25)
|
|
};
|
|
|
|
// Create a marker for each place.
|
|
markers.push(new google.maps.Marker({
|
|
map: map,
|
|
icon: icon,
|
|
title: place.name,
|
|
position: place.geometry.location
|
|
}));
|
|
var lat = place.geometry.location.lat();
|
|
var lng = place.geometry.location.lng();
|
|
$('#CommandArg').val(lng + " " + lat);
|
|
|
|
if (place.geometry.viewport) {
|
|
// Only geocodes have viewport.
|
|
bounds.union(place.geometry.viewport);
|
|
} else {
|
|
bounds.extend(place.geometry.location);
|
|
}
|
|
});
|
|
map.fitBounds(bounds);
|
|
});
|
|
|
|
searchBox2.addListener('places_changed', function () {
|
|
var places = searchBox2.getPlaces();
|
|
|
|
if (places.length == 0) {
|
|
return;
|
|
}
|
|
|
|
// Clear out the old markers.
|
|
markers.forEach(function (marker) {
|
|
marker.setMap(null);
|
|
});
|
|
markers = [];
|
|
|
|
// For each place, get the icon, name and location.
|
|
var bounds = new google.maps.LatLngBounds();
|
|
places.forEach(function (place) {
|
|
if (!place.geometry) {
|
|
console.log("Returned place contains no geometry");
|
|
return;
|
|
}
|
|
var icon = {
|
|
url: place.icon,
|
|
size: new google.maps.Size(71, 71),
|
|
origin: new google.maps.Point(0, 0),
|
|
anchor: new google.maps.Point(17, 34),
|
|
scaledSize: new google.maps.Size(25, 25)
|
|
};
|
|
|
|
// Create a marker for each place.
|
|
markers.push(new google.maps.Marker({
|
|
map: map,
|
|
icon: icon,
|
|
title: place.name,
|
|
position: place.geometry.location
|
|
}));
|
|
var lat = place.geometry.location.lat();
|
|
var lng = place.geometry.location.lng();
|
|
|
|
if (place.geometry.viewport) {
|
|
// Only geocodes have viewport.
|
|
bounds.union(place.geometry.viewport);
|
|
} else {
|
|
bounds.extend(place.geometry.location);
|
|
}
|
|
});
|
|
map.fitBounds(bounds);
|
|
$("#divDirecciones").modal('hide')
|
|
});
|
|
|
|
|
|
}
|
|
function CargaPickers() {
|
|
$.datetimepicker.setLocale('es');
|
|
|
|
$('#C_txtFechaI').datetimepicker({
|
|
dayOfWeekStart: 1,
|
|
lang: 'es',
|
|
format: 'd/m/Y H:i',
|
|
formatDate: 'd/m/Y H:i',
|
|
step: 30
|
|
});
|
|
$('#C_txtFechaF').datetimepicker({
|
|
dayOfWeekStart: 1,
|
|
lang: 'es',
|
|
format: 'd/m/Y H:i',
|
|
formatDate: 'd/m/Y H:i',
|
|
step: 30
|
|
});
|
|
|
|
$('#C_imgCalendario').click(function () {
|
|
$('#C_txtFechaI').datetimepicker('show');
|
|
});
|
|
|
|
$('#C_imgCalendarioF').click(function () {
|
|
$('#C_txtFechaF').datetimepicker('show');
|
|
});
|
|
|
|
$('#dvConsulta').modal();
|
|
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
initMap();
|
|
//Sys.Application.add_load(function (s, e) {
|
|
// initMap();
|
|
//});
|
|
});
|
|
var markers = [];
|
|
|
|
function CreaMarcador(coords, nomEquipo, imagen, infowindow) {
|
|
|
|
var marker = new google.maps.Marker({
|
|
position: coords,
|
|
title: nomEquipo,
|
|
map: map
|
|
});
|
|
|
|
if (!(imagen == null)) {
|
|
var markerIcon = {
|
|
url: "https://sig.adssistemas.mx" + imagen,
|
|
labelOrigin: new google.maps.Point(26, 43)
|
|
};
|
|
marker.setIcon(markerIcon);
|
|
}
|
|
|
|
var infowindow = new google.maps.InfoWindow({
|
|
content: infowindow
|
|
});
|
|
|
|
marker.addListener('click', function () {
|
|
infowindow.open(map, marker);
|
|
});
|
|
|
|
markers.push(marker);
|
|
map.setCenter(coords);
|
|
|
|
GetDirecciones(coords, infowindow, marker);
|
|
}
|
|
|
|
function DeleteMarkers() {
|
|
for (var i = 0; i < markers.length; i++) {
|
|
markers[i].setMap(null);
|
|
}
|
|
markers = [];
|
|
directionsDisplay.setMap(null);
|
|
}
|
|
|
|
function calculateAndDisplayRoute(origin, destination, nombre, infowindow, icono) {
|
|
directionsService.route({
|
|
origin: origin,
|
|
destination: destination,
|
|
travelMode: 'DRIVING'
|
|
}, function (response, status) {
|
|
if (status === 'OK') {
|
|
directionsDisplay.setDirections(response);
|
|
directionsDisplay.setMap(map);
|
|
|
|
CreaMarcador(origin, "<h5><b>Punto de Referencia</b></h5><br>", null, "<h5><b>Punto de Referencia</b></h5><br>");//punto referencia
|
|
CreaMarcador(destination, nombre, icono, infowindow);//dispositivo
|
|
} else {
|
|
window.alert('Directions request failed due to ' + status);
|
|
}
|
|
});
|
|
}
|
|
|
|
function EquipoMasCercano(origin, destination, nombre, infowindow, icono) {
|
|
DeleteMarkers();
|
|
calculateAndDisplayRoute(origin, destination, nombre, infowindow, icono);
|
|
}
|
|
|
|
function GetDirecciones(posicion, infowindow, marker) {
|
|
var lat = posicion.lat
|
|
var lng = posicion.lng
|
|
var url = '<%= ClsPaginas.UrlDirecciones%>' + 'nominatim/reverse.php?format=jsonv2&lat=' + lat + '&lon=' + lng;
|
|
|
|
$.getJSON(url, function (data) {
|
|
if (typeof (data.error) === 'undefined') {
|
|
marker.formatted_address = data.display_name;
|
|
var contenido = infowindow.getContent();
|
|
debugger;
|
|
if (contenido.indexOf("direccion") >= 0) {
|
|
var html = $($.parseHTML(contenido));
|
|
var dir = html.filter(".direccion");;
|
|
dir.text("Dirección: " + data.display_name);
|
|
var htmlstring = "";
|
|
for (var i = 0; i < html.length; i++) {
|
|
htmlstring = htmlstring.concat(html[i].outerHTML);
|
|
}
|
|
infowindow.setContent(htmlstring);
|
|
} else {
|
|
infowindow.setContent(contenido + "<div class='direccion' style='margin-left:5px'>" + "Dirección: " + data.display_name + "</div>");
|
|
}
|
|
} else {
|
|
marker.formatted_address = "Dirección no encontrada";
|
|
if (contenido.indexOf("direccion") >= 0) {
|
|
var html = $($.parseHTML(contenido));
|
|
var dir = html.filter(".direccion");;
|
|
dir.text("Dirección no encontrada");
|
|
var htmlstring = "";
|
|
for (var i = 0; i < html.length; i++) {
|
|
htmlstring = htmlstring.concat(html[i].outerHTML);
|
|
}
|
|
infowindow.setContent(htmlstring);
|
|
} else {
|
|
infowindow.setContent(infowindow.getContent() + "<div style='margin-left:5px'> Dirección: No Encontrada </div>");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
var lastOpenedInfoWindow;
|
|
function closeLastOpenedInfoWindow() {
|
|
if (lastOpenedInfoWindow) {
|
|
lastOpenedInfoWindow.close();
|
|
}
|
|
}
|
|
function CargaComandos(Vehiculo, CveDispositivo) {
|
|
$("#HdnCveDipositivo").val(CveDispositivo)
|
|
// if (open) { FNShowDiv(); }
|
|
$("#myModalLabel").text("Comando para vehículo: " + Vehiculo)
|
|
closeLastOpenedInfoWindow();
|
|
$("#divComandos").modal('show');
|
|
$("#C_BtnCargaComandos").click();
|
|
|
|
}
|
|
</script>
|
|
<script src="<%= String.Format("https://maps.googleapis.com/maps/api/js?key={0}&libraries=drawing&libraries=places", Extensiones.GOOGLE_MAPS_API_KEY) %>"</script>
|
|
</asp:Content>
|
|
|
|
|
|
|