777 lines
39 KiB
Plaintext
777 lines
39 KiB
Plaintext
<%@ Page Title="" Language="VB" MasterPageFile="~/SiteGPS.master" AutoEventWireup="false" CodeFile="GeoReferencias.aspx.vb" Inherits="GPS_GeoReferencias" %>
|
|
|
|
<asp:Content ID="Content1" ContentPlaceHolderID="CP" runat="Server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content2" ContentPlaceHolderID="Css" runat="Server">
|
|
<link href="../Metronic/assets/global/plugins/jquery-minicolors/jquery.minicolors.css" rel="stylesheet" />
|
|
<link href="../Metronic/assets/layouts/layout3/css/jquery.datetimepicker.css" rel="stylesheet" />
|
|
<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;
|
|
}
|
|
|
|
.minicolors {
|
|
display: inline-block;
|
|
}
|
|
|
|
.controls {
|
|
margin-top: 10px;
|
|
border: 1px solid transparent;
|
|
border-radius: 2px 0 0 2px;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
height: 32px;
|
|
outline: none;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
#pac-input {
|
|
background-color: #fff;
|
|
font-family: 'Open Sans Condensed', sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 300;
|
|
margin-left: 12px;
|
|
padding: 0 11px 0 13px;
|
|
text-overflow: ellipsis;
|
|
width: 300px;
|
|
}
|
|
|
|
#pac-input:focus {
|
|
border-color: #4d90fe;
|
|
}
|
|
|
|
|
|
#iw-container {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
</asp:Content>
|
|
<asp:Content ContentPlaceHolderID="H" ID="Content9" runat="server">
|
|
<li>
|
|
<a id="BorrarGeo" onclick="DeleteMarkers();">
|
|
<i class='fa fa-trash-o'></i><span>Deshacer Georeferencia</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a id="BtnAgregar" onclick="AddGeo();">
|
|
<i class='fa fa-plus'></i><span>Agregar Georeferencia</span>
|
|
</a>
|
|
</li>
|
|
</asp:Content>
|
|
<asp:Content ID="Content7" ContentPlaceHolderID="C" runat="Server">
|
|
|
|
<asp:UpdatePanel ID="UpTools" runat="server" style="display: none" UpdateMode="conditional">
|
|
<ContentTemplate>
|
|
<asp:HiddenField ID="HdnTipo" Value="Geocerca" runat="server" ClientIDMode="Static" />
|
|
<asp:HiddenField ID="CommandArg" runat="server" ClientIDMode="Static" />
|
|
<asp:HiddenField ID="GeoCerca" runat="server" ClientIDMode="Static" />
|
|
<ul class="list-inline" style="font-size: 12px;">
|
|
<li>Tipo de Georeferencia:
|
|
<asp:DropDownList ID="DdlTipo" onChange="HabilitaChk(); return false;" Width="100px" runat="server" CssClass="form-control input-sm select2me">
|
|
<asp:ListItem Value="Geocerca" Text="Geocerca"></asp:ListItem>
|
|
<asp:ListItem Value="Ruta" Text="Ruta"></asp:ListItem>
|
|
</asp:DropDownList>
|
|
</li>
|
|
<li>Color Georeferencia:
|
|
<%-- <input type="hidden" onchange="CambiaColor();" id="hidden-input" class="demo" value="#0088FF">--%>
|
|
<asp:HiddenField ID="hdnColor" runat="server" Value="#0088FF" ClientIDMode="Static" />
|
|
</li>
|
|
<li id="liRutaRegreso" style="display: none">Incluir Ruta Regreso
|
|
<asp:CheckBox runat="server" ID="chkRutaRegreso" />
|
|
</li>
|
|
<li>Haga click en los lugares del mapa donde trazará la Georeferencia
|
|
</li>
|
|
</ul>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
|
|
<input id="pac-input" class="controls" type="text" placeholder="Buscar Dirección">
|
|
<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" style="width: 600px;" 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">Agregar Georeferencia</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<asp:UpdatePanel ID="UpBodyTipoEquipo" UpdateMode="Conditional" runat="server">
|
|
<ContentTemplate>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="form-group form-md-line-input input-iconright">
|
|
<asp:TextBox ID="TxtNombre" runat="server" CssClass="form-control" CausesValidation="true"></asp:TextBox>
|
|
<asp:RequiredFieldValidator ID="RFVEstatusOS" runat="server" CssClass="help-block errorimput" ControlToValidate="TxtNombre" ErrorMessage="<b><span style='text-decoration: underline'>ERROR:</span></b><br />El campo <b>''Nombre''</b> es necesario, por favor ingréselo." ValidationGroup="GrpObligatorio"></asp:RequiredFieldValidator>
|
|
<label for="<%= TxtNombre.ClientID.ToString()%>">Nombre GeoReferencia:</label>
|
|
</div>
|
|
<div class="form-group form-md-line-input input-iconright">
|
|
<asp:TextBox ID="TxtTolerancia" runat="server" Style="width: 50%; display: inline-block" CssClass="form-control" CausesValidation="true"></asp:TextBox><asp:Literal runat="server" Text="mts"></asp:Literal>
|
|
<asp:RequiredFieldValidator ID="RFVTxtTolerancia" runat="server" CssClass="help-block errorimput" ControlToValidate="TxtTolerancia" ErrorMessage="<b><span style='text-decoration: underline'>ERROR:</span></b><br />El campo <b>''Tolerancia''</b> es necesario, por favor ingréselo." ValidationGroup="GrpObligatorio"></asp:RequiredFieldValidator>
|
|
<ajax:FilteredTextBoxExtender ID="FTBSerie" runat="server" TargetControlID="TxtTolerancia" FilterType="Numbers" />
|
|
<label for="<%= TxtTolerancia.ClientID.ToString()%>" style="width: 50%">Tolerancia:</label>
|
|
</div>
|
|
<ul class="list-inline" style="font-size: 12px; margin-top: 15px; margin-left: 0px;">
|
|
<li>Fecha I.:
|
|
<div class="input-group input-sm date date-picker " data-date-format="dd/mm/yyyy" style="display: inline-block;">
|
|
<asp:TextBox ID="txtFechaI" runat="server" CssClass="form-control input-sm" CausesValidation="true" MaxLength="10" Width="82px "></asp:TextBox>
|
|
<span class="input-group-btn ">
|
|
<asp:LinkButton ID="imgCalendario" class="btn default " Text="<i class='fa fa-calendar'></i>" runat="server"></asp:LinkButton>
|
|
</span>
|
|
</div>
|
|
<ajax:MaskedEditExtender ID="MEEFechaI" runat="server" TargetControlID="txtFechaI" Mask="99/99/9999" MaskType="Date" DisplayMoney="Left" AcceptNegative="Left"></ajax:MaskedEditExtender>
|
|
<ajax:CalendarExtender runat="server" ID="Calendario" TargetControlID="txtFechaI" PopupButtonID="ImgCalendario" PopupPosition="BottomRight" Enabled="True"></ajax:CalendarExtender>
|
|
<asp:CompareValidator ID="cvFechaI" runat="server" ControlToValidate="txtFechaI" Display="None" ErrorMessage="El campo <b>''Fecha Inicial''</b> no tienes el formato correcto, por favor intente de nuevo con el siguiente formato: (dd/mm/yyyy)." Operator="DataTypeCheck" Type="Date" ValidationGroup="Valida"></asp:CompareValidator>
|
|
<ajax:ValidatorCalloutExtender ID="vcoCvFI" runat="server" HighlightCssClass="vco" TargetControlID="cvFechaI" Width="350px"></ajax:ValidatorCalloutExtender>
|
|
</li>
|
|
<li>Fecha F.:
|
|
<div class="input-group input-sm date date-picker " data-date-format="dd/mm/yyyy" style="display: inline-block;">
|
|
<asp:TextBox ID="txtFechaF" runat="server" CssClass="form-control input-sm" CausesValidation="true" MaxLength="10" Width="82px "></asp:TextBox>
|
|
<span class="input-group-btn ">
|
|
<asp:LinkButton ID="imgCalendarioF" class="btn default " Text="<i class='fa fa-calendar'></i>" runat="server"></asp:LinkButton>
|
|
</span>
|
|
</div>
|
|
<ajax:MaskedEditExtender ID="MEEFechaF" runat="server" TargetControlID="txtFechaF" Mask="99/99/9999" MaskType="Date" DisplayMoney="Left" AcceptNegative="Left"></ajax:MaskedEditExtender>
|
|
<ajax:CalendarExtender runat="server" ID="Calendario2" TargetControlID="txtFechaF" PopupButtonID="imgCalendarioF" PopupPosition="BottomRight" Enabled="True"></ajax:CalendarExtender>
|
|
<asp:CompareValidator ID="cvFechaF" runat="server" ControlToValidate="txtFechaF" Display="None" ErrorMessage="El campo <b>''Fecha Final''</b> no tienes el formato correcto, por favor intente de nuevo con el siguiente formato: (dd/mm/yyyy)." Operator="DataTypeCheck" Type="Date" ValidationGroup="Valida"></asp:CompareValidator>
|
|
<ajax:ValidatorCalloutExtender ID="vcoCvFF" runat="server" HighlightCssClass="vco" TargetControlID="cvFechaF" Width="350px"></ajax:ValidatorCalloutExtender>
|
|
</li>
|
|
</ul>
|
|
<ul class="list-inline" style="font-size: 12px; margin-top: 15px; margin-left: 0px;">
|
|
<li>Aplica Días:
|
|
</li>
|
|
<li>
|
|
<asp:CheckBox runat="server" Text="L" ID="chkLunes" />
|
|
</li>
|
|
<li>
|
|
<asp:CheckBox runat="server" Text="M" ID="chkMartes" />
|
|
</li>
|
|
<li>
|
|
<asp:CheckBox runat="server" Text="M" ID="chkMiercoles" />
|
|
</li>
|
|
<li>
|
|
<asp:CheckBox runat="server" Text="J" ID="chkJueves" />
|
|
</li>
|
|
<li>
|
|
<asp:CheckBox runat="server" Text="V" ID="chkViernes" />
|
|
</li>
|
|
<li>
|
|
<asp:CheckBox runat="server" Text="S" ID="chkSabado" />
|
|
</li>
|
|
<li>
|
|
<asp:CheckBox runat="server" Text="D" ID="chkDomingo" />
|
|
</li>
|
|
</ul>
|
|
<div class="row" style="margin-top: 10px; margin-bottom: 20px;">
|
|
<div class="col-md-1">Hora Inicio:</div>
|
|
<div class="col-md-2">
|
|
<div class="input-group input-sm date date-picker " data-date-format="dd/mm/yyyy hh:mm" style="display: inline-block;">
|
|
<asp:TextBox ID="TxtHoraI" runat="server" CssClass="form-control input-sm hora" CausesValidation="true" MaxLength="18" Width="75px"></asp:TextBox>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-1">Hora Fin:</div>
|
|
<div class="col-md-2">
|
|
<div class="input-group input-sm date date-picker " data-date-format="dd/mm/yyyy" style="display: inline-block;">
|
|
<asp:TextBox ID="TxtHoraF" runat="server" CssClass="form-control input-sm hora" CausesValidation="true" MaxLength="18" Width="75px "></asp:TextBox>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="form-group form-md-line-input input-iconright">
|
|
<asp:DropDownList ID="DdlGrupo" Width="230px" runat="server" DataTextField="Nombre" DataValueField="CveDispositivosGrupos" CssClass="form-control select2me">
|
|
</asp:DropDownList>
|
|
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" CssClass="help-block errorimput" InitialValue="-1" ControlToValidate="DdlGrupo" ErrorMessage="<b><span style='text-decoration: underline'>ERROR:</span></b><br />El campo <b>''Equipo''</b> es necesario, por favor ingréselo." ValidationGroup="GrpAgregarGrupo"></asp:RequiredFieldValidator>
|
|
<label for="<%= DdlGrupo.ClientID.ToString()%>">Grupo:</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3" style="margin-top: 12px; text-align:right;">
|
|
<asp:LinkButton ID="LnkAgregarGrupo" runat="server" CssClass="btn btn-sm btn-success" OnClick="LnkAgregarGrupo_Click" ValidationGroup="GrpAgregarGrupo"><i class='fa fa-plus' aria-hidden='true'></i></asp:LinkButton>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="form-group form-md-line-input input-iconright">
|
|
<asp:DropDownList ID="DdlEquipo" Width="230px" runat="server" DataTextField="Display" DataValueField="CveDispositivo" CssClass="form-control select2me">
|
|
</asp:DropDownList>
|
|
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" CssClass="help-block errorimput" InitialValue="-1" ControlToValidate="DdlEquipo" ErrorMessage="<b><span style='text-decoration: underline'>ERROR:</span></b><br />El campo <b>''Equipo''</b> es necesario, por favor ingréselo." ValidationGroup="GrpAgregarVehiculo"></asp:RequiredFieldValidator>
|
|
<label for="<%= DdlEquipo.ClientID.ToString()%>">Equipo:</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3" style="margin-top: 12px; text-align:right;">
|
|
<asp:LinkButton ID="LnkAgregarDisp" runat="server" CssClass="btn btn-sm btn-success" OnClick="LnkAgregarDisp_Click" ValidationGroup="GrpAgregarVehiculo"><i class='fa fa-plus' aria-hidden='true'></i></asp:LinkButton>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<asp:GridView ID="GvDispositivos" runat="server" GridLines="None" data-height="200" DataKeyNames="CveDispositivo, NoEconomico" CssClass="table table-striped table-advance table-hover Widthall ScrollAD" data-sort="true" BorderWidth="1" BorderColor="#D3D3D3" CellSpacing="0" Width="100%" AutoGenerateColumns="False" OnRowDeleting="GvDispositivos_RowDeleting" EmptyDataText="Seleccione el vehiculo y presione agregar.">
|
|
<Columns>
|
|
<asp:BoundField DataField="NoEconomico" ItemStyle-Width="20%" HeaderText="NoEconomico" ItemStyle-HorizontalAlign="Left" />
|
|
<asp:TemplateField HeaderText="Acciones" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center">
|
|
<ItemTemplate>
|
|
<asp:LinkButton ID="BtnBorrarDispositivo" runat="server" AlternateText="Eliminar" CausesValidation="False" CommandName="Delete" CssClass="btn btn-circle btn-sm red" Text="<i class='icon-trash'></i>" data-toggle="confirmation" data-popout="true" data-original-title="¿Desea eliminar este dispositivo?" data-btn-ok-label="si" />
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
</Columns>
|
|
</asp:GridView>
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
<div class="modal-footer">
|
|
<asp:UpdatePanel ID="UpFooter" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<asp:LinkButton ID="BtnAgregarGeoreferencia" OnClick="BtnCrear_Click" runat="server" CssClass="btn btn-primary" ValidationGroup="GrpObligatorio"> <i class='material-icons'>done_all</i> Guardar</asp:LinkButton>
|
|
<button id="btnCancelarTE" class="btn btn-default" data-dismiss="modal" value="Cancelar">Cancelar </button>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
</asp:Content>
|
|
<asp:Content ID="Content8" ContentPlaceHolderID="JS" runat="Server">
|
|
<script src="../Metronic/assets/layouts/layout3/scripts/jquery.datetimepicker.full.js"></script>
|
|
<script>
|
|
|
|
var directionsService;
|
|
var directionsDisplay;
|
|
|
|
$(document).ready(function () {
|
|
initMap();
|
|
});
|
|
|
|
function initMap() {
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|
center: { lat: 19.432608, lng: -99.133209 },
|
|
zoom: 10
|
|
});
|
|
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition(function (position) {
|
|
var pos = {
|
|
lat: position.coords.latitude,
|
|
lng: position.coords.longitude
|
|
};
|
|
map.setCenter(pos);
|
|
}, function () {
|
|
handleLocationError(true, infoWindow, map.getCenter());
|
|
});
|
|
}
|
|
|
|
var input = document.getElementById('pac-input');
|
|
var searchBox = new google.maps.places.SearchBox(input);
|
|
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
|
|
map.addListener('bounds_changed', function () {
|
|
searchBox.setBounds(map.getBounds());
|
|
});
|
|
|
|
searchBox.addListener('places_changed', function () {
|
|
var places = searchBox.getPlaces();
|
|
|
|
if (places.length == 0) {
|
|
return;
|
|
}
|
|
var bounds = new google.maps.LatLngBounds();
|
|
|
|
places.forEach(function (place) {
|
|
if (place.geometry.viewport) {
|
|
// Only geocodes have viewport.
|
|
bounds.union(place.geometry.viewport);
|
|
} else {
|
|
bounds.extend(place.geometry.location);
|
|
}
|
|
});
|
|
map.fitBounds(bounds);
|
|
});
|
|
|
|
directionsService = new google.maps.DirectionsService;
|
|
directionsDisplay = new google.maps.DirectionsRenderer;
|
|
directionsDisplay.setOptions({ suppressMarkers: true });
|
|
directionsDisplay.setMap(map);
|
|
|
|
var upControlDiv = document.createElement('div');
|
|
var upControl = new ControlUltimoPunto(upControlDiv, map);
|
|
|
|
upControlDiv.index = 1;
|
|
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(upControlDiv);
|
|
|
|
var SelectControlDiv = document.createElement('div');
|
|
var SelectControl = new ControlSelect(SelectControlDiv, map);
|
|
|
|
SelectControlDiv.index = 1;
|
|
map.controls[google.maps.ControlPosition.TOP_LEFT].push(SelectControlDiv);
|
|
|
|
|
|
var ColorControlDiv = document.createElement('div');
|
|
var ColorControl = new ControlColor(ColorControlDiv, map);
|
|
|
|
|
|
ColorControlDiv.index = 1;
|
|
map.controls[google.maps.ControlPosition.LEFT_TOP].push(ColorControlDiv);
|
|
|
|
|
|
|
|
|
|
|
|
// Add a listener for the click event
|
|
map.addListener('click', addLatLng);
|
|
$("#C_BtnCrear").prop('disabled', true);
|
|
$('#C_TxtHoraI').datetimepicker({
|
|
datepicker: false,
|
|
lang: 'es',
|
|
format: 'H:i',
|
|
formatDate: 'H:i',
|
|
step: 30
|
|
});
|
|
$('#C_TxtHoraF').datetimepicker({
|
|
datepicker: false,
|
|
lang: 'es',
|
|
format: 'H:i',
|
|
formatDate: 'H:i',
|
|
step: 30
|
|
});
|
|
|
|
|
|
}
|
|
var markers = [];
|
|
var mcoords = [];
|
|
var polygon;
|
|
var UltimoPunto;
|
|
|
|
|
|
function addLatLng(event) {
|
|
// var path = poly.getPath();
|
|
// path.push(event.latLng);
|
|
var lat = event.latLng.lat();
|
|
var lng = event.latLng.lng();
|
|
mcoords.push(event.latLng)
|
|
|
|
var info = new google.maps.InfoWindow({
|
|
content: "(" + lat + " " + lng + ")"
|
|
});
|
|
|
|
var marker = new google.maps.Marker({
|
|
position: event.latLng,
|
|
title: 'Punto',
|
|
map: map,
|
|
draggable: true
|
|
});
|
|
markers.push(marker);
|
|
marker.addListener('click', function () {
|
|
info.open(map, marker);
|
|
});
|
|
if ($("#HdnTipo").val() === 'Georuta') {
|
|
if (markers.length > 1) {
|
|
CreaRuta();
|
|
}
|
|
}
|
|
else if ($("#HdnTipo").val() === 'Geocerca') {
|
|
var h = $('#GeoCerca').val() + lng + " " + lat + ","
|
|
$('#GeoCerca').val(h)
|
|
if (markers.length == 1) {
|
|
$('#CommandArg').val(lng + " " + lat)
|
|
}
|
|
if (markers.length === 3) {
|
|
creaPoligono($("#hidden-input").val());
|
|
} else if (markers.length > 3) {
|
|
var path = polygon.getPath();
|
|
path.push(event.latLng)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function DeleteMarkers() {
|
|
for (var i = 0; i < markers.length; i++) {
|
|
markers[i].setMap(null);
|
|
}
|
|
markers = [];
|
|
directionsDisplay.setMap(null);
|
|
mcoords = [];
|
|
$('#GeoCerca').val('')
|
|
if (typeof polygon != 'undefined') {
|
|
polygon.setMap(null);
|
|
}
|
|
$("#C_BtnCrear").prop('disabled', true);
|
|
|
|
}
|
|
|
|
function EliminarUltimoPunto() {
|
|
if (markers.length > 0) {
|
|
markers[markers.length - 1].setMap(null)
|
|
markers.splice((markers.length - 1), 1);
|
|
mcoords.splice((mcoords.length - 1), 1);
|
|
if ($("#HdnTipo").val() === 'Georuta') {
|
|
if (markers.length >= 2) {
|
|
CreaRuta();
|
|
} else { directionsDisplay.setMap(null); }
|
|
}
|
|
else if ($("#HdnTipo").val() === 'Geocerca') {
|
|
if (typeof polygon != 'undefined') {
|
|
polygon.setMap(null);
|
|
if (markers.length >= 3) {
|
|
creaPoligono($("#hidden-input").val());
|
|
}
|
|
}
|
|
var h;
|
|
$('#GeoCerca').val('')
|
|
for (var i = 0; i < mcoords.length; i++) {
|
|
var lat = mcoords[i].lat()
|
|
var lng = mcoords[i].lng()
|
|
h = $('#GeoCerca').val() + lng + " " + lat + ","
|
|
$('#GeoCerca').val(h)
|
|
if (i === 0) {
|
|
$('#CommandArg').val(lng + " " + lat)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
var s = "";
|
|
var nextSegment;
|
|
|
|
|
|
function CreaRuta() {
|
|
var start = markers[0].position;
|
|
var end = markers[markers.length - 1].position;
|
|
var waypts = [];
|
|
var fin = 1;
|
|
s = ""
|
|
if (document.getElementById("C_chkRutaRegreso").checked) {
|
|
end = start;
|
|
fin = 0;
|
|
}
|
|
for (var i = 1; i < markers.length - fin; i++) {
|
|
waypts.push({
|
|
location: markers[i].position,
|
|
stopover: true
|
|
});
|
|
}
|
|
directionsService.route({
|
|
origin: start,
|
|
destination: end,
|
|
travelMode: 'DRIVING',
|
|
waypoints: waypts
|
|
}, function (response, status) {
|
|
if (status === 'OK') {
|
|
directionsDisplay.setDirections(response);
|
|
directionsDisplay.setMap(map);
|
|
|
|
var legs = response.routes[0].legs;
|
|
for (i = 0; i < legs.length; i++) {
|
|
var steps = legs[i].steps;
|
|
for (j = 0; j < steps.length; j++) {
|
|
var nextSegment = steps[j].path;
|
|
for (k = 0; k < nextSegment.length; k++) {
|
|
s = s + nextSegment[k] + '+'
|
|
}
|
|
}
|
|
}
|
|
$('#CommandArg').val(s);
|
|
$("#C_BtnCrear").prop('disabled', false);
|
|
} else {
|
|
window.alert('Directions request failed due to ' + status);
|
|
}
|
|
});
|
|
}
|
|
|
|
function creaPoligono(color) {
|
|
polygon = new google.maps.Polygon({
|
|
paths: mcoords,
|
|
strokeColor: color,
|
|
strokeOpacity: 0.8,
|
|
strokeWeight: 2,
|
|
fillColor: color,
|
|
fillOpacity: 0.35,
|
|
editable: true
|
|
});
|
|
polygon.setMap(map);
|
|
$("#C_BtnCrear").prop('disabled', false);
|
|
}
|
|
|
|
function CambiaColor() {
|
|
$("#hdnColor").val($("#hidden-input").val())
|
|
directionsDisplay.setOptions({
|
|
polylineOptions: {
|
|
strokeColor: $("#hidden-input").val(), strokeWeight: 6,
|
|
strokeOpacity: 0.6
|
|
}
|
|
})
|
|
if ($("#HdnTipo").val() === 'Georuta') {
|
|
if (directionsDisplay.getDirections() != undefined) {
|
|
directionsDisplay.setDirections(directionsDisplay.directions);
|
|
}
|
|
} else if ($("#HdnTipo").val() === 'Geocerca') {
|
|
if (typeof polygon != 'undefined') {
|
|
polygon.setMap(null);
|
|
creaPoligono($("#hidden-input").val())
|
|
}
|
|
}
|
|
|
|
}
|
|
function CargaPickersHora() {
|
|
$('#C_TxtHoraI').datetimepicker({
|
|
datepicker: false,
|
|
lang: 'es',
|
|
format: 'H:i',
|
|
formatDate: 'H:i',
|
|
step: 30
|
|
});
|
|
$('#C_TxtHoraF').datetimepicker({
|
|
datepicker: false,
|
|
lang: 'es',
|
|
format: 'H:i',
|
|
formatDate: 'H:i',
|
|
step: 30
|
|
});
|
|
}
|
|
function Limpieza() {
|
|
DeleteMarkers();
|
|
$('#C_TxtHoraI').datetimepicker({
|
|
datepicker: false,
|
|
lang: 'es',
|
|
format: 'H:i',
|
|
formatDate: 'H:i',
|
|
step: 30
|
|
});
|
|
$('#C_TxtHoraF').datetimepicker({
|
|
datepicker: false,
|
|
lang: 'es',
|
|
format: 'H:i',
|
|
formatDate: 'H:i',
|
|
step: 30
|
|
});
|
|
$('#divAgregarTipo').modal('hide');
|
|
}
|
|
|
|
function HabilitaChk() {
|
|
DeleteMarkers();
|
|
if ($("#HdnTipo").val() === 'Georuta') {
|
|
$("#liRutaRegreso").css("display", "")
|
|
} else {
|
|
$("#liRutaRegreso").css("display", "none")
|
|
}
|
|
}
|
|
|
|
function ControlUltimoPunto(controlDiv, map) {
|
|
|
|
// Set CSS for the control border.
|
|
var controlUI = document.createElement('div');
|
|
controlUI.style.backgroundColor = '#fff';
|
|
controlUI.style.border = '2px solid #fff';
|
|
controlUI.style.borderRadius = '3px';
|
|
controlUI.style.width = '165px'
|
|
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
|
|
controlUI.style.cursor = 'pointer';
|
|
controlUI.style.marginRight = '5px';
|
|
controlUI.style.marginTop = '5px';
|
|
controlUI.style.marginBottom = '22px';
|
|
controlUI.style.textAlign = 'center';
|
|
controlUI.title = 'Click para borrar el último punto dibujado';
|
|
controlDiv.appendChild(controlUI);
|
|
|
|
// Set CSS for the control interior.
|
|
var controlText = document.createElement('div');
|
|
controlText.style.color = 'rgb(25,25,25)';
|
|
controlText.style.fontFamily = ' "Open Sans", sans-serif; ';
|
|
controlText.style.fontSize = '14px';
|
|
controlText.style.lineHeight = '38px';
|
|
controlText.style.paddingLeft = '5px';
|
|
controlText.style.paddingRight = '5px';
|
|
controlText.innerHTML = 'Borrar Último Punto';
|
|
controlUI.appendChild(controlText);
|
|
|
|
// Setup the click event listeners: simply set the map to Chicago.
|
|
controlUI.addEventListener('click', function () {
|
|
EliminarUltimoPunto();
|
|
});
|
|
|
|
}
|
|
|
|
function ControlSelect(controlDiv, map) {
|
|
|
|
// Set CSS for the control border.
|
|
var controlUI = document.createElement('div');
|
|
controlUI.style.marginLeft = '10px';
|
|
controlUI.style.zIndex = '0';
|
|
controlUI.style.cursor = 'pointer';
|
|
// controlUI.style.position = 'absolute';
|
|
controlUI.style.left = "0px";
|
|
controlUI.style.width = "150px";
|
|
controlUI.style.marginTop = "10px"
|
|
controlUI.style.top = "0px";
|
|
controlUI.className = 'gmnoprint';
|
|
|
|
controlDiv.appendChild(controlUI);
|
|
|
|
var ControlSub1 = document.createElement('div')
|
|
ControlSub1.style.float = 'left';
|
|
ControlSub1.className = 'gm-style-mtc'
|
|
controlUI.appendChild(ControlSub1)
|
|
|
|
var ControlSub2 = document.createElement('div')
|
|
ControlSub2.style.direction = 'ltr';
|
|
ControlSub2.style.overflow = 'hidden';
|
|
ControlSub2.id = "Geocerca"
|
|
ControlSub2.style.textAlign = 'center';
|
|
ControlSub2.style.position = 'relative';
|
|
ControlSub2.style.color = 'rgb(0,0,0)';
|
|
ControlSub2.style.fontFamily = ' "Open Sans", sans-serif; ';
|
|
ControlSub2.style.msUserSelect = 'none;';
|
|
ControlSub2.style.fontSize = '11px'
|
|
ControlSub2.style.backgroundColor = 'rgb(255,255,255)'
|
|
ControlSub2.style.padding = '11px'
|
|
ControlSub2.style.backgroundClip = 'padding-box'
|
|
ControlSub2.style.minWidth = '28px'
|
|
ControlSub2.style.fontWeight = '500'
|
|
ControlSub2.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,.3)';
|
|
ControlSub2.innerHTML = 'Geocerca'
|
|
ControlSub1.appendChild(ControlSub2)
|
|
|
|
var ControlSub3 = document.createElement('div')
|
|
ControlSub3.style.float = 'left';
|
|
ControlSub3.className = 'gm-style-mtc'
|
|
controlUI.appendChild(ControlSub3)
|
|
|
|
var ControlSub4 = document.createElement('div')
|
|
ControlSub4.style.direction = 'ltr';
|
|
ControlSub4.style.overflow = 'hidden';
|
|
ControlSub4.style.textAlign = 'center';
|
|
ControlSub4.id = "Georuta"
|
|
ControlSub4.style.position = 'relative';
|
|
ControlSub4.style.color = 'rgb(86,86,86)';
|
|
ControlSub4.style.fontFamily = ' "Open Sans", sans-serif; ';
|
|
ControlSub4.style.msUserSelect = 'none;';
|
|
ControlSub4.style.fontSize = '11px'
|
|
ControlSub4.style.backgroundColor = 'rgb(255,255,255)'
|
|
ControlSub4.style.padding = '11px'
|
|
ControlSub4.style.backgroundClip = 'padding-box'
|
|
ControlSub4.style.minWidth = '38px'
|
|
ControlSub4.style.fontWeight = '500'
|
|
ControlSub4.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,.3)';
|
|
ControlSub4.style.borderLeft = '0px;'
|
|
ControlSub4.innerHTML = 'Georuta'
|
|
ControlSub3.appendChild(ControlSub4)
|
|
|
|
|
|
// Setup the click event listeners: simply set the map to Chicago.
|
|
ControlSub3.addEventListener('click', function () {
|
|
CambiaTipo('Georuta');
|
|
});
|
|
|
|
ControlSub1.addEventListener('click', function () {
|
|
CambiaTipo('Geocerca');
|
|
});
|
|
|
|
}
|
|
|
|
function ControlColor(controlDiv, map) {
|
|
|
|
// Set CSS for the control border.
|
|
var controlUI = document.createElement('div');
|
|
controlUI.style.backgroundColor = '#fff';
|
|
controlUI.style.border = '2px solid #fff';
|
|
controlUI.style.borderRadius = '3px';
|
|
controlUI.style.pointer = '3px';
|
|
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
|
|
controlUI.style.cursor = 'pointer';
|
|
controlUI.style.marginLeft = '10px';
|
|
controlUI.style.marginTop = '5px';
|
|
controlUI.style.marginBottom = '22px';
|
|
controlUI.style.textAlign = 'center';
|
|
controlUI.style.color = 'rgb(25,25,25)';
|
|
controlUI.style.fontFamily = ' "Open Sans", sans-serif; ';
|
|
controlUI.style.fontSize = '14px';
|
|
controlUI.style.paddingLeft = '5px';
|
|
controlUI.style.paddingRight = '5px';
|
|
controlUI.innerHTML = 'Cambiar Color '
|
|
controlUI.title = 'Click para cambiar el color del polygono';
|
|
controlDiv.appendChild(controlUI);
|
|
|
|
// Set CSS for the control interior.
|
|
var controlText = document.createElement('input');
|
|
controlText.type = 'hidden';
|
|
controlText.id = 'hidden-input'
|
|
controlText.className = 'demo'
|
|
controlText.value = '#0088FF'
|
|
controlText.onchange = function () { CambiaColor(); };
|
|
controlUI.appendChild(controlText);
|
|
|
|
// Setup the click event listeners: simply set the map to Chicago.
|
|
controlUI.addEventListener('click', function () {
|
|
ComponentsColorPickers.init();
|
|
});
|
|
|
|
|
|
}
|
|
|
|
function AddGeo() {
|
|
|
|
|
|
|
|
if ($("#HdnTipo").val() === 'Geocerca') {
|
|
if (markers.length === 0) {
|
|
alert('Dibuje los vértices de la geocerca haciendo click en el mapa.');
|
|
} else if (markers.length < 3) { alert('Debe dibujar por lo menos 3 vértices para la creación de la geocerca'); }
|
|
else {
|
|
debugger;
|
|
var r = polygon.getPath();
|
|
var s = "";
|
|
r.forEach(function (xy, i) { s += xy.lng() + ' ' + xy.lat() + ',' });
|
|
//s += r.j[0].lng() + ' ' + r.j[0].lat();
|
|
$("#GeoCerca").val(s);
|
|
|
|
$('#divAgregarTipo').modal({ backdrop: 'static', keyboard: false });
|
|
}
|
|
} else if ($("#HdnTipo").val() === 'Georuta') {
|
|
if (markers.length === 0) {
|
|
alert('Traza la ruta click en el mapa.');
|
|
} else if (markers.length < 2) { alert('Debe dibujar por lo menos 2 puntos en el mapa para la creación de la ruta'); }
|
|
else {
|
|
$('#divAgregarTipo').modal({ backdrop: 'static', keyboard: false });
|
|
}
|
|
}
|
|
}
|
|
|
|
function CambiaTipo(Tipo) {
|
|
DeleteMarkers();
|
|
if (Tipo === 'Geocerca') {
|
|
$("#HdnTipo").val('Geocerca')
|
|
$("#Geocerca").css("font-weight", "bold")
|
|
$("#Georuta").css("font-weight", "normal")
|
|
} else if (Tipo === 'Georuta') {
|
|
$("#HdnTipo").val('Georuta')
|
|
$("#Geocerca").css("font-weight", "normal")
|
|
$("#Georuta").css("font-weight", "bold")
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<script src="<%= String.Format("https://maps.googleapis.com/maps/api/js?key={0}&libraries=drawing&libraries=geometry&libraries=places", Extensiones.GOOGLE_MAPS_API_KEY) %>"</script>
|
|
<script src="../Metronic/assets/global/plugins/jquery-minicolors/jquery.minicolors.min.js"></script>
|
|
<script src="../Metronic/assets/global/plugins/jquery-minicolors/components-color-pickers.min.js"></script>
|
|
</asp:Content>
|
|
|