1339 lines
65 KiB
Plaintext
1339 lines
65 KiB
Plaintext
<%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Trayectos.aspx.vb" Inherits="GPS_Trayectos" EnableEventValidation="false" %>
|
|
|
|
<asp:Content ID="Content1" ContentPlaceHolderID="CP" runat="Server">
|
|
</asp:Content>
|
|
<asp:Content ID="Content2" ContentPlaceHolderID="Css" runat="Server">
|
|
<style>
|
|
.ADScroller-body {
|
|
max-height: 400px;
|
|
}
|
|
|
|
.dataTables_scrollHeadInner > table {
|
|
background: lightgray;
|
|
}
|
|
|
|
table.dataTable th.focus, table.dataTable td.focus {
|
|
outline: 3px solid #3366ff00;
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
table.dataTable,
|
|
table.dataTable th,
|
|
table.dataTable td {
|
|
-webkit-box-sizing: content-box;
|
|
-moz-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.dataTables_scrollBody > .dataTable > thead {
|
|
display: none !important;
|
|
}
|
|
|
|
tr td:nth-child(4) {
|
|
text-align: center;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#map {
|
|
width: 100%;
|
|
height: calc(100% - 51px);
|
|
margin: 0;
|
|
padding: 0;
|
|
position: fixed !important;
|
|
}
|
|
|
|
#mapGeo {
|
|
position: fixed !important;
|
|
width: calc(100% - 3px);
|
|
height: calc(100% - 250px);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.pac-container.pac-logo {
|
|
z-index: 100000;
|
|
}
|
|
|
|
#showdiv1 {
|
|
left: 0 !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
#ShowDiv3:hover {
|
|
line-height: 34px !important;
|
|
-webkit-transition: line-height ease 1s;
|
|
-moz-transition: line-height ease 1s;
|
|
-o-transition: line-height ease 1s;
|
|
transition: line-height ease 1s;
|
|
}
|
|
|
|
.v-center {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
</asp:Content>
|
|
<asp:Content ID="Content3" ContentPlaceHolderID="E" runat="Server">
|
|
Reporte de Trayectos
|
|
</asp:Content>
|
|
<asp:Content ContentPlaceHolderID="H" ID="Content9" runat="server">
|
|
<li>
|
|
<asp:LinkButton ID="LnkAdd" OnClientClick="javascript:$('#DivAgregar').modal({backdrop: 'static', keyboard: false}); return false;" Text="<i class='fa fa-plus'></i><span>Agregar Trayecto</span>" runat="server">
|
|
</asp:LinkButton>
|
|
</li>
|
|
<li>
|
|
<asp:LinkButton ID="LnkAddE" OnClientClick="javascript:$('#DivCrearApatir').modal({backdrop: 'static', keyboard: false}); return false;" Text="<i class='fa fa-plus'></i><span>Crear a partir de</span>" runat="server">
|
|
</asp:LinkButton>
|
|
</li>
|
|
</asp:Content>
|
|
<asp:Content ID="Content6" ContentPlaceHolderID="C" runat="Server">
|
|
<asp:UpdatePanel ID="UPFiltros" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<div class="portlet solid grey-cascade portlet-filter" style="">
|
|
<div class="portlet-title portlet-filterT smalltitle " style="">
|
|
<div class="tools">
|
|
<asp:Button ID="BtnConsultar" runat="server" Text="Consultar" OnClick="BtnConsultar_Click" class="btn btn-primary" />
|
|
</div>
|
|
<div class="titlefiltros caption" style="margin-top: -8px;">
|
|
<ul class="list-inline" style="font-size: 12px;">
|
|
<li>Vehículo:
|
|
|
|
<asp:DropDownList ID="DdlDispositivoFiltro" runat="server" Width="200px" DataTextField="Display" DataValueField="CveDispositivo" CssClass="form-control input-sm select2me">
|
|
</asp:DropDownList>
|
|
</li>
|
|
<li>Estatus:
|
|
|
|
<asp:DropDownList ID="DdlEstatusTrayecto" runat="server" Width="200px" DataTextField="Estatus" DataValueField="CveEstatusTrayecto" CssClass="form-control input-sm select2me">
|
|
</asp:DropDownList>
|
|
</li>
|
|
<li>Fecha Inicio:
|
|
|
|
<div class="input-group input-sm date date-picker " data-date-format="dd/mm/yyyy hh:mm" style="display: inline-block;">
|
|
<asp:TextBox ID="txtFechaI" runat="server" CssClass="form-control input-sm ADDateTimePicker" CausesValidation="true" MaxLength="18" Width="132px "></asp:TextBox>
|
|
</div>
|
|
</li>
|
|
<li>Fecha Fin:
|
|
|
|
<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 ADDateTimePicker" CausesValidation="true" MaxLength="18" Width="132px "></asp:TextBox>
|
|
</div>
|
|
</li>
|
|
<li>Mostrar Solo Activas:
|
|
|
|
<asp:CheckBox ID="ChkActivas" Text=" " runat="server" CssClass="chksino" Width="250px"></asp:CheckBox>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="row" style="margin-left: 0px; margin-top: 5px; margin-bottom: 5px; text-align: right" align="left">
|
|
<div style="margin-right: 15px">
|
|
<input type="text" id="TxtBusquedaG" class="form-control input-sm" onkeyup="<%= String.Format("FiltrarTabla('TxtBusquedaG','{0}')", GvBarra.ClientID) %>" style="display: inline-block; margin-right: -20px; width: 150px;" />
|
|
<a href="javascript:;" onclick="<%= String.Format("FiltrarTabla('TxtBusquedaG','{0}')", GvBarra.ClientID) %>" style="margin-top: -3px;" class="btn btn-circle btn-sm label-info"><i class="icon-magnifier"></i></a>
|
|
</div>
|
|
</div>
|
|
<asp:UpdatePanel runat="server" ID="UPGV" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<asp:HiddenField ID="HdnTrayecto" runat="server" ClientIDMode="Static" Value="" />
|
|
<asp:GridView ID="GvBarra" runat="server" Style="overflow-x: auto;" GridLines="None" OnRowDataBound="GvBarra_RowDataBound" OnRowDeleting="GvBarra_RowDeleting1"
|
|
DataKeyNames="CveTrayecto,EnviarNotificacion,CorreosNotificacion,Intervalo,EnviarLiga" CssClass="table table-striped table-advance table-hover Widthall ScrollAD" data-sort="true" data-sortindex="1" AutoGenerateColumns="False" EmptyDataText="No se encontraron registros" ToolTip="Listado de Trayectos">
|
|
<Columns>
|
|
<asp:BoundField DataField="Trayecto" HeaderText="Nombre del Trayecto" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="20%" />
|
|
<asp:BoundField DataField="Dispositivo" HeaderText="Vehículo" ItemStyle-HorizontalAlign="Left" ItemStyle-Width="15%" />
|
|
<asp:BoundField DataField="Fecha" HeaderText="Fecha Ingreso" DataFormatString="{0:dd/MM/yyyy}" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="15%" />
|
|
<asp:BoundField DataField="Fecha" HeaderText="Hora Ingreso" DataFormatString="{0:HH:mm:ss}" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="15%" />
|
|
<asp:TemplateField HeaderText="Estatus" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="15%">
|
|
<ItemTemplate>
|
|
<asp:Label ID="LblEstatus" Text='<%# Eval("Estatus") %>' runat="server"></asp:Label>
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
<asp:TemplateField HeaderText="Notificar" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="5%">
|
|
<ItemTemplate>
|
|
<asp:LinkButton ID="LnkEnviar" runat="server" Visible="false" OnClick="LnkEnviar_Click" CssClass="Texto" Text="<i class='fa fa-envelope fa-2'></i>" data-toggle="confirmation" data-popout="true" data-original-title="Desea enviar el estado del trayecto?" data-btn-ok-label="si" />
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
<asp:HyperLinkField Text="Ver Detalle" Target="_blank" DataNavigateUrlFormatString="/GPS/TrayectoDetalle.aspx?CveTrayecto={0}" DataNavigateUrlFields="CveTrayecto" ItemStyle-Width="10%" />
|
|
<asp:TemplateField HeaderText="Comandos" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="10%">
|
|
<ItemTemplate>
|
|
<asp:LinkButton ID="imgD" 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 el trayecto?" data-btn-ok-label="si" />
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
</Columns>
|
|
</asp:GridView>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="DivAgregar" class="modal ADS fade" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<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="ModalAgregarTitle" runat="server">Agregar Trayecto</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<asp:UpdatePanel runat="server" ID="UpAgregar" UpdateMode="Conditional">
|
|
<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="RequiredFieldValidator3" 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="GrpTrayecto"></asp:RequiredFieldValidator>
|
|
<label for="<%= TxtNombre.ClientID.ToString()%>">Nombre:</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group form-md-line-input input-iconright">
|
|
<asp:DropDownList ID="DdlDispositivo" DataTextField="Display" DataValueField="CveDispositivo" CssClass="form-control select2me" runat="server"></asp:DropDownList>
|
|
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" InitialValue="-1" CssClass="help-block errorimput" ControlToValidate="DdlDispositivo" ErrorMessage="<b><span style='text-decoration: underline'>ERROR:</span></b><br />El campo <b>''Dispositivo''</b> es necesario, por favor ingréselo." ValidationGroup="GrpTrayecto"></asp:RequiredFieldValidator>
|
|
<label for="<%= DdlDispositivo.ClientID.ToString()%>" style="width: 50%">Vehículo:</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group form-md-line-input">
|
|
Notificar:
|
|
<asp:CheckBox ID="ChkNotificacion" AutoPostBack="true" OnCheckedChanged="ChkNotificacion_CheckedChanged" Checked="false" CssClass="md-checksd" runat="server" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="DivNotificaciones" runat="server" visible="false">
|
|
<div class="col-md-12">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="form-group form-md-line-input input-iconright">
|
|
<asp:TextBox ID="TxtCorreoNot" runat="server" CssClass="form-control" CausesValidation="true"></asp:TextBox>
|
|
<label for="<%= TxtCorreoNot.ClientID.ToString()%>">Correo(s):</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group form-md-line-input input-iconright">
|
|
<asp:DropDownList ID="DdlIntervalo" CssClass="form-control select2me" runat="server">
|
|
<asp:ListItem Selected="True" Text="30 Min" Value="30"></asp:ListItem>
|
|
<asp:ListItem Text="60 Min" Value="60"></asp:ListItem>
|
|
<asp:ListItem Text="2 Hrs" Value="120"></asp:ListItem>
|
|
</asp:DropDownList>
|
|
<label for="<%= DdlIntervalo.ClientID.ToString()%>" style="width: 50%">Intervalo:</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group form-md-line-input">
|
|
Enviar Liga:
|
|
<asp:CheckBox ID="ChkEnviarLiga" Checked="false" CssClass="make-switchsd" runat="server" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" style="margin-left: 0px; margin-top: 5px; margin-bottom: 5px; text-align: right" align="left">
|
|
<div style="margin-right: 15px">
|
|
<input type="text" id="TxtBusqueda" class="form-control input-sm" onkeyup="<%= String.Format("FiltrarTabla('TxtBusqueda','{0}')", GvEstatus.ClientID) %>" style="display: inline-block; margin-right: -20px; width: 150px;" />
|
|
<a href="javascript:;" onclick="<%= String.Format("FiltrarTabla('TxtBusqueda','{0}')", GvEstatus.ClientID) %>" style="margin-top: -3px;" class="btn btn-circle btn-sm label-info"><i class="icon-magnifier"></i></a>
|
|
</div>
|
|
</div>
|
|
<asp:GridView ID="GvEstatus" runat="server" OnRowDataBound="GvEstatus_RowDataBound" GridLines="None" DataKeyNames="CveEstatusTrayecto" CssClass="table table-striped table-advance table-hover Widthall ScrollAD" data-height="300" data-sort="true" BorderWidth="1" BorderColor="#D3D3D3" CellSpacing="0" Width="100%" AutoGenerateColumns="False" EmptyDataText="No se encontraron registros">
|
|
<Columns>
|
|
<asp:TemplateField ItemStyle-HorizontalAlign="center" ItemStyle-Width="10%" ItemStyle-CssClass="NoClick">
|
|
<HeaderTemplate>
|
|
<asp:CheckBox runat="server" ID="chkSelectAll" CssClass="ChkAllClick" />
|
|
</HeaderTemplate>
|
|
<ItemTemplate>
|
|
<asp:CheckBox runat="server" ID="chkDis" />
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
<asp:BoundField DataField="Estatus" ItemStyle-Width="50%" HeaderText="Estatus" ItemStyle-HorizontalAlign="Left" />
|
|
<asp:TemplateField HeaderText="Geocerca" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="30%">
|
|
<ItemTemplate>
|
|
<asp:DropDownList ID="DdlGeocerca" DataTextField="GeoReferencia" AppendDataBoundItems="true" DataValueField="CveGeoReferencia" CssClass="form-control select2me" runat="server">
|
|
<asp:ListItem Selected="True" Text="Seleccione"></asp:ListItem>
|
|
</asp:DropDownList>
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
<asp:TemplateField HeaderText="" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="10%">
|
|
<ItemTemplate>
|
|
<asp:LinkButton ID="imgE" runat="server" AlternateText="Agregar" CausesValidation="False" CssClass="btn btn-circle btn-sm green" Text="<i class='fa fa-plus'></i>" />
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
</Columns>
|
|
</asp:GridView>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<asp:LinkButton ID="BtnAgregar" runat="server" Text="Agregar" OnClick="BtnAgregar_Click" CssClass="btn btn-primary" ValidationGroup="GrpTrayecto"></asp:LinkButton>
|
|
<button data-dismiss="modal" class="btn btn-default">Cancelar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="DivCrearApatir" class="modal ADS fade" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<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">Crear a partir de.</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<asp:UpdatePanel ID="UpDdlTrayecto" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<div class="form-group form-md-line-input input-iconright">
|
|
<asp:TextBox ID="TxtNombreNuevo" runat="server" CssClass="form-control input-sm"></asp:TextBox>
|
|
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" CssClass="help-block errorimput" ControlToValidate="TxtNombreNuevo" ErrorMessage="<b><span style='text-decoration: underline'>ERROR:</span></b><br />El campo <b>''Nombre''</b> es necesario, por favor ingréselo." ValidationGroup="GrpNuevo"></asp:RequiredFieldValidator>
|
|
<label for="<%=TxtNombreNuevo.ClientID.ToString()%>">Nombre:</label>
|
|
</div>
|
|
<div class="form-group form-md-line-input input-iconright">
|
|
<asp:DropDownList ID="DdlTrayecto" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DdlTrayecto_SelectedIndexChanged" DataTextField="Trayecto" DataValueField="CveTrayecto" AppendDataBoundItems="true" CssClass="form-control select2me js-Impuesto-programmatic" Width="100%">
|
|
<asp:ListItem Value="-1" Text="Seleccione"></asp:ListItem>
|
|
</asp:DropDownList>
|
|
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" InitialValue="-1" CssClass="help-block errorimput" ControlToValidate="DdlTrayecto" ErrorMessage="<b><span style='text-decoration: underline'>ERROR:</span></b><br />El campo <b>''Trayecto''</b> es necesario, por favor ingréselo." ValidationGroup="GrpNuevo"></asp:RequiredFieldValidator>
|
|
<label for="<%=DdlTrayecto.ClientID.ToString()%>">Trayecto:</label>
|
|
</div>
|
|
<div class="form-group form-md-line-input input-iconright">
|
|
<asp:DropDownList ID="DdlDispositivoNuevo" DataTextField="Display" DataValueField="CveDispositivo" CssClass="form-control select2me" runat="server"></asp:DropDownList>
|
|
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" InitialValue="-1" CssClass="help-block errorimput" ControlToValidate="DdlDispositivoNuevo" ErrorMessage="<b><span style='text-decoration: underline'>ERROR:</span></b><br />El campo <b>''Dispositivo''</b> es necesario, por favor ingréselo." ValidationGroup="GrpNuevo"></asp:RequiredFieldValidator>
|
|
<label for="<%= DdlDispositivoNuevo.ClientID.ToString()%>" style="width: 50%">Vehículo:</label>
|
|
</div>
|
|
<div class="row" style="margin-left: 0px; margin-top: 5px; margin-bottom: 5px; text-align: right" align="left">
|
|
<div style="margin-right: 15px">
|
|
<input type="text" id="TxtBusqued2a" class="form-control input-sm" onkeyup="<%= String.Format("FiltrarTabla('TxtBusqued2a','{0}')", GvEstatus.ClientID) %>" style="display: inline-block; margin-right: -20px; width: 150px;" />
|
|
<a href="javascript:;" onclick="<%= String.Format("FiltrarTabla('TxtBusqued2a','{0}')", GvEstatusNuevo.ClientID) %>" style="margin-top: -3px;" class="btn btn-circle btn-sm label-info"><i class="icon-magnifier"></i></a>
|
|
</div>
|
|
</div>
|
|
<asp:GridView ID="GvEstatusNuevo" runat="server" OnRowDataBound="GvEstatusNuevo_RowDataBound" GridLines="None" DataKeyNames="CveEstatusTrayecto" CssClass="table table-striped table-advance table-hover Widthall ScrollAD" data-height="300" data-sort="true" BorderWidth="1" BorderColor="#D3D3D3" CellSpacing="0" Width="100%" AutoGenerateColumns="False" EmptyDataText="No se encontraron registros">
|
|
<Columns>
|
|
<asp:TemplateField ItemStyle-HorizontalAlign="center" ItemStyle-Width="10%" ItemStyle-CssClass="NoClick">
|
|
<HeaderTemplate>
|
|
<asp:CheckBox runat="server" ID="chkSelectAll" CssClass="ChkAllClick" />
|
|
</HeaderTemplate>
|
|
<ItemTemplate>
|
|
<asp:CheckBox runat="server" ID="chkDis" />
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
<asp:BoundField DataField="Estatus" ItemStyle-Width="25%" HeaderText="Estatus" ItemStyle-HorizontalAlign="Left" />
|
|
<asp:TemplateField HeaderText="Geocerca" ItemStyle-HorizontalAlign="center" ItemStyle-Width="10%">
|
|
<ItemTemplate>
|
|
<asp:DropDownList ID="DdlGeocerca" DataTextField="GeoReferencia" AppendDataBoundItems="true" DataValueField="CveGeoReferencia" CssClass="form-control select2me" runat="server">
|
|
<asp:ListItem Selected="True" Text="Seleccione"></asp:ListItem>
|
|
</asp:DropDownList>
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
</Columns>
|
|
</asp:GridView>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<asp:UpdatePanel runat="server">
|
|
<ContentTemplate>
|
|
<asp:LinkButton ID="LnkCrear" runat="server" Text="Crear" OnClick="LnkCrear_Click" CssClass="btn btn-primary" ValidationGroup="GrpNuevo"></asp:LinkButton>
|
|
<button data-dismiss="modal" class="btn btn-default">Cancelar</button>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="DivGeocercas" class="modal ADS fade" role="dialog">
|
|
<div class="modal-dialog">
|
|
<asp:UpdatePanel ID="UpGeocercas" class="modal-content rowpadding" tabindex="-1" runat="server" UpdateMode="Conditional" style="width: 900px; height: 900px;">
|
|
<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="H2" runat="server"><i class="fa fa-bell-o"></i>Agregar GeoReferencia </h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<asp:HiddenField ID="HdnIndexEstatus" ClientIDMode="Static" runat="server" Value="-1" />
|
|
<br />
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="form-group form-md-line-input input-iconright">
|
|
<asp:TextBox ID="TxtNombreGeo" runat="server" CssClass="form-control" CausesValidation="true" ValidationGroup="GrpObligatorio"></asp:TextBox>
|
|
<asp:RequiredFieldValidator ID="RFVEstatusOS" runat="server" CssClass="help-block errorimput" ControlToValidate="TxtNombreGeo" ErrorMessage="<b><span style='text-decoration: underline'>ERROR:</span></b><br />El campo <b>''Nombre GeoREferencia''</b> es necesario, por favor ingréselo." ValidationGroup="GrpObligatorio"></asp:RequiredFieldValidator>
|
|
<label for="<%= TxtNombreGeo.ClientID.ToString()%>">Nombre GeoReferencia:</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="DivUtilizarGeocerca">
|
|
<div class="col-md-6">
|
|
<div class="form-group form-md-line-input input-iconright">
|
|
<label id="lblUsarGeo">Utilizar geocerca existente: </label>
|
|
<br />
|
|
<asp:CheckBox ID="ChkUsarGeo" Text=" " runat="server" CssClass="chksino" Width="250px" onclick="MuestraDdlGeocercas();"></asp:CheckBox>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group form-md-line-input input-iconright" style="display: none" id="DivDdlGeo">
|
|
<asp:DropDownList ID="DdlGeocerca" runat="server" CssClass="form-control select2me" DataTextField="GeoReferencia" DataValueField="CveGeoReferencia" onchange="CargaGeocercaExistente();"></asp:DropDownList>
|
|
<label for="<%= DdlGeocerca.ClientID.ToString()%>">Geocerca:</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
<div class="row">
|
|
<div class="col-md-12" style="padding: 0px;">
|
|
<div id="mapGeo"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer" style="padding-top: calc(100% - 250px);">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<asp:LinkButton ID="BtnAgregarGeoreferencia" runat="server" CssClass="btn btn-primary" OnClick="BtnAgregarGeoreferencia_Click"> <i class='material-icons'>done_all</i> Guardar</asp:LinkButton>
|
|
<button id="btnCancelarTE" class="btn btn-default" data-dismiss="modal" value="Cancelar">Cancelar </button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
</asp:Content>
|
|
<asp:Content ID="Content7" ContentPlaceHolderID="JS" runat="Server">
|
|
<script src="../Metronic/assets/layouts/layout3/scripts/jquery.datetimepicker.full.js"></script>
|
|
<script>
|
|
$('body').on('click', '.ChkAllClick input', function () { $(".ChkAllEvt input").not(this).prop('checked', $('.ChkAllClick input').is(':checked')); });
|
|
|
|
var map;
|
|
function initMap() {
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|
center: { lat: 29.0730, lng: -110.9559 },
|
|
zoom: 7
|
|
});
|
|
|
|
var ShowDiv1 = document.createElement('div');
|
|
var ShowDivControl = new ShowDiv(ShowDiv1, map);
|
|
ShowDiv1.index = 1;
|
|
ShowDiv1.id = "showdiv1"
|
|
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(ShowDiv1);
|
|
|
|
google.maps.Polygon.prototype.my_getBounds = function () {
|
|
var bounds = new google.maps.LatLngBounds()
|
|
this.getPath().forEach(function (element, index) { bounds.extend(element) })
|
|
return bounds
|
|
}
|
|
|
|
}
|
|
function CargaModalGeo(index) {
|
|
initMapGeo();
|
|
$("#HdnIndexEstatus").val(index);
|
|
$('#DivGeocercas').modal({ backdrop: 'static', keyboard: false });
|
|
DeletemarkersGeo();
|
|
|
|
}
|
|
|
|
var polylines = [];
|
|
var polygons = [];
|
|
var polybounds = [];
|
|
var markers = [];
|
|
var GeoReferencias = []
|
|
var lastOpenedInfoWindow;
|
|
var directionsDisplay;
|
|
|
|
$(document).ready(function () {
|
|
//initMap();
|
|
$("#SideNav").removeClass("nav-is-visible");
|
|
$("#dvConsulta").modal({ backdrop: 'static', keyboard: false });
|
|
DeleteMarkers();
|
|
});
|
|
function DeleteMarkers() {
|
|
for (var i = 0; i < markers.length; i++) {
|
|
markers[i].setMap(null);
|
|
}
|
|
for (var i = 0; i < polygons.length; i++) {
|
|
polygons[i].setMap(null);
|
|
}
|
|
markers = [];
|
|
polygons = [];
|
|
if (typeof directionsDisplay !== 'undefined') {
|
|
directionsDisplay.setMap(null);
|
|
}
|
|
}
|
|
function creaPoligono(coords, color, Geocerca, Estatus, InicioFin, CveEstatus, CveEstatusAnterior) {
|
|
var polygon = new google.maps.Polygon({
|
|
paths: coords,
|
|
strokeColor: color,
|
|
strokeOpacity: 0.8,
|
|
strokeWeight: 2,
|
|
fillColor: color,
|
|
fillOpacity: 0.35
|
|
});
|
|
polygon.setMap(map);
|
|
polygons.push(polygon);
|
|
|
|
CreaMarcadorPoligono(coords, Geocerca, Estatus, InicioFin, CveEstatus, CveEstatusAnterior)
|
|
}
|
|
var posInicio, posFin;
|
|
|
|
function CreaMarcadorPoligono(coords, GeoCerca, Estatus, InicioFin, CveEstatus, CveEstatusAnterior) {
|
|
var bounds = new google.maps.LatLngBounds();
|
|
for (i = 0; i < coords.length; i++) {
|
|
bounds.extend(coords[i]);
|
|
}
|
|
if (InicioFin == 0) {
|
|
var data = {
|
|
CveEstatus: CveEstatus,
|
|
CveEstatusAnterior: CveEstatusAnterior,
|
|
coords: bounds.getCenter(),
|
|
};
|
|
GeoReferencias.push(data);
|
|
} else if (InicioFin == 1) {
|
|
posInicio = bounds.getCenter();
|
|
} else if (InicioFin == 2) {
|
|
posFin = bounds.getCenter();
|
|
|
|
var directionsService = new google.maps.DirectionsService;
|
|
directionsDisplay = new google.maps.DirectionsRenderer({
|
|
map: map,
|
|
suppressMarkers: true
|
|
});
|
|
|
|
calculateAndDisplayRoute(directionsService, directionsDisplay, posInicio, posFin);
|
|
}
|
|
var marker = new google.maps.Marker({
|
|
position: bounds.getCenter(),
|
|
title: GeoCerca,
|
|
map: map
|
|
});
|
|
|
|
var infowindow = new google.maps.InfoWindow({
|
|
content: '<h4><b> GeoReferencia: ' + GeoCerca + '</b></h4><h4><b> Estatus: ' + Estatus + '</b></h4>'
|
|
});
|
|
|
|
marker.addListener('click', function () {
|
|
closeLastOpenedInfoWindow();
|
|
infowindow.open(map, marker);
|
|
lastOpenedInfoWindow = infowindow;
|
|
});
|
|
|
|
markers.push(marker);
|
|
}
|
|
function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
|
|
var waypts = [];
|
|
var orden = GeoReferencias.sort((a, b) => parseInt(a.CveEstatusAnterior) - parseInt(b.CveEstatusAnterior));
|
|
for (var i = 0; i < orden.length; i++) {
|
|
waypts.push({
|
|
location: orden[i].coords,
|
|
stopover: true
|
|
});
|
|
}
|
|
directionsService.route({
|
|
origin: pointA,
|
|
destination: pointB,
|
|
waypoints: waypts,
|
|
travelMode: google.maps.TravelMode.DRIVING
|
|
}, function (response, status) {
|
|
if (status == google.maps.DirectionsStatus.OK) {
|
|
directionsDisplay.setDirections(response);
|
|
} else {
|
|
window.alert('Directions request failed due to ' + status);
|
|
}
|
|
});
|
|
}
|
|
function CenterPoligono(coords) {
|
|
var bounds = new google.maps.LatLngBounds();
|
|
for (i = 0; i < coords.length; i++) {
|
|
bounds.extend(coords[i]);
|
|
}
|
|
map.fitBounds(bounds)
|
|
}
|
|
|
|
function closeLastOpenedInfoWindow() {
|
|
if (lastOpenedInfoWindow) {
|
|
lastOpenedInfoWindow.close();
|
|
}
|
|
}
|
|
|
|
function FitBounds() {
|
|
var bounds = new google.maps.LatLngBounds();
|
|
for (var i = 0; i < polygons.length; i++) {
|
|
var paths = polygons[i].getPaths();
|
|
paths.forEach(function (path) {
|
|
var ar = path.getArray();
|
|
for (var i = 0, l = ar.length; i < l; i++) {
|
|
bounds.extend(ar[i]);
|
|
}
|
|
})
|
|
}
|
|
for (var i = 0; i < polybounds.length; i++) {
|
|
bounds.extend(polybounds[i]);
|
|
}
|
|
|
|
for (var i = 0; i < markers.length; i++) {
|
|
if (markers[i].getVisible()) {
|
|
bounds.extend(markers[i].getPosition());
|
|
}
|
|
}
|
|
|
|
map.fitBounds(bounds)
|
|
}
|
|
|
|
function CreaMarcador(coords, nomEquipo, ContentString, imagen) {
|
|
if (typeof imagen === 'undefined') { imagen = image; }
|
|
var marker = new google.maps.Marker({
|
|
position: coords,
|
|
title: nomEquipo,
|
|
map: map,
|
|
icon: imagen
|
|
});
|
|
|
|
var infowindow = new google.maps.InfoWindow({
|
|
content: ContentString
|
|
});
|
|
marker.addListener('click', function () {
|
|
closeLastOpenedInfoWindow();
|
|
infowindow.open(map, marker);
|
|
lastOpenedInfoWindow = infowindow;
|
|
});
|
|
markers.push(marker);
|
|
}
|
|
|
|
function creaPolyline(coords, color, GeoCerca) {
|
|
var polyline = new google.maps.Polyline({
|
|
path: coords,
|
|
strokeColor: color,
|
|
strokeOpacity: 0.8,
|
|
strokeWeight: 2,
|
|
fillOpacity: 0.35
|
|
});
|
|
polyline.setMap(map);
|
|
polylines.push(polyline);
|
|
polybounds.push(coords[0]);
|
|
polybounds.push(coords[coords.length - 1]);
|
|
CreaMarcadorPoligono(coords, GeoCerca);
|
|
}
|
|
|
|
function NuevaConsulta() {
|
|
for (var i = 0; i < polygons.length; i++) {
|
|
polygons[i].setMap(null);
|
|
}
|
|
polygons = [];
|
|
for (var i = 0; i < polylines.length; i++) {
|
|
polylines[i].setMap(null);
|
|
}
|
|
|
|
for (var i = 0; i < markers.length; i++) {
|
|
markers[i].setMap(null);
|
|
}
|
|
polylines = [];
|
|
polybounds = [];
|
|
markers = [];
|
|
$("#dvConsulta").modal({ backdrop: 'static', keyboard: false })
|
|
}
|
|
|
|
function fitBoundsToVisibleMarkers() {
|
|
|
|
var bounds = new google.maps.LatLngBounds();
|
|
|
|
for (var i = 0; i < polygons.length; i++) {
|
|
bounds.extend(polygons[i].my_getBounds().getCenter())
|
|
|
|
}
|
|
for (var i = 0; i < markers.length; i++) {
|
|
if (markers[i].getVisible()) {
|
|
bounds.extend(markers[i].getPosition());
|
|
}
|
|
}
|
|
map.fitBounds(bounds);
|
|
|
|
}
|
|
|
|
function ShowDiv(controlDiv, map) {
|
|
|
|
// Set CSS for the control border.
|
|
var controlUI = document.createElement('div');
|
|
controlUI.style.backgroundColor = '#444d58';
|
|
controlUI.style.border = '2px solid #444d58';
|
|
controlUI.style.borderRadius = '3px';
|
|
controlUI.style.width = '100%'
|
|
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 = '0px';
|
|
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 = '#ebebeb';
|
|
controlText.id = "ShowDiv3"
|
|
controlText.style.fontFamily = ' "Open Sans", sans-serif; ';
|
|
controlText.style.fontSize = '14px';
|
|
controlText.style.lineHeight = '20px';
|
|
controlText.style.paddingLeft = '5px';
|
|
controlText.style.paddingRight = '5px';
|
|
controlText.innerHTML = '<i class="fa fa-angle-up" aria-hidden="true"></i>';
|
|
controlUI.appendChild(controlText);
|
|
|
|
// Setup the click event listeners: simply set the map to Chicago.
|
|
controlUI.addEventListener('click', function () {
|
|
FNShowDiv();
|
|
});
|
|
}
|
|
|
|
var open = false;
|
|
function FNShowDiv() {
|
|
if (open === false) {
|
|
$("#h").modal()
|
|
$("#ShowDiv3").css("line-height", "34px")
|
|
open = true
|
|
$("#ShowDiv3").html('<i class="fa fa-angle-down" aria-hidden="true"></i>')
|
|
} else {
|
|
$("#h").modal('hide')
|
|
$("#ShowDiv3").css("line-height", "20px")
|
|
open = false
|
|
$("#ShowDiv3").html('<i class="fa fa-angle-up" aria-hidden="true"></i>')
|
|
}
|
|
}
|
|
var indiceAnteriorKM = 0;
|
|
function doScaledCLickKM(boton, i) {
|
|
setTimeout(function () {
|
|
if (typeof ($("C_GvBarra")) !== 'undefined') {
|
|
if ($("[idgv='" + i + "']") != null) {
|
|
$("[idgv='" + indiceAnteriorKM + "']").css("background-color", 'initial');
|
|
$("[idgv='" + i + "']").css("background-color", '#F5B27A');
|
|
}
|
|
}
|
|
indiceAnteriorKM = i;
|
|
$(boton).click();
|
|
}, 250);
|
|
}
|
|
|
|
var directionsServiceGeo;
|
|
var directionsDisplayGeo;
|
|
var mapGeo;
|
|
|
|
function initMapGeo() {
|
|
try {
|
|
mapGeo = new google.maps.Map(document.getElementById('mapGeo'), {
|
|
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
|
|
// };
|
|
// mapGeo.setCenter(pos);
|
|
// }, function () {
|
|
// handleLocationError(true, infoWindow, mapGeo.getCenter());
|
|
// });
|
|
//}
|
|
|
|
//var input = document.getElementById('pac-input');
|
|
//var searchBox = new google.maps.places.SearchBox(input);
|
|
//mapGeo.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
|
|
//mapGeo.addListener('bounds_changed', function () {
|
|
// searchBox.setBounds(mapGeo.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);
|
|
// }
|
|
// });
|
|
// mapGeo.fitBounds(bounds);
|
|
//});
|
|
|
|
directionsServiceGeo = new google.maps.DirectionsService();
|
|
directionsDisplayGeo = new google.maps.DirectionsRenderer();
|
|
directionsDisplayGeo.setOptions({ suppressMarkers: true });
|
|
directionsDisplayGeo.setMap(mapGeo);
|
|
|
|
var upControlDiv = document.createElement('div');
|
|
var upControl = new ControlUltimoPunto(upControlDiv, mapGeo);
|
|
|
|
upControlDiv.index = 1;
|
|
mapGeo.controls[google.maps.ControlPosition.TOP_RIGHT].push(upControlDiv);
|
|
|
|
var SelectControlDiv = document.createElement('div');
|
|
var SelectControl = new ControlSelect(SelectControlDiv, mapGeo);
|
|
|
|
SelectControlDiv.index = 1;
|
|
mapGeo.controls[google.maps.ControlPosition.TOP_LEFT].push(SelectControlDiv);
|
|
|
|
|
|
//var ColorControlDiv = document.createElement('div');
|
|
//var ColorControl = new ControlColor(ColorControlDiv, mapGeo);
|
|
|
|
|
|
//ColorControlDiv.index = 1;
|
|
//mapGeo.controls[google.maps.ControlPosition.LEFT_TOP].push(ColorControlDiv);
|
|
|
|
// Add a listener for the click event
|
|
mapGeo.addListener('click', addLatLng);
|
|
$("#C_BtnCrear").prop('disabled', true);
|
|
|
|
$("#DivGeocercas").on("shown.bs.modal", function () {
|
|
google.maps.event.trigger(mapGeo, "resize");
|
|
});
|
|
|
|
} catch (err) {
|
|
alert(err.message);
|
|
}
|
|
|
|
}
|
|
var markersGeo = [];
|
|
var mcoordsGeo = [];
|
|
var polygonGeo;
|
|
var UltimoPuntoGeo;
|
|
|
|
|
|
function addLatLng(event) {
|
|
// var path = poly.getPath();
|
|
// path.push(event.latLng);
|
|
var lat = event.latLng.lat();
|
|
var lng = event.latLng.lng();
|
|
mcoordsGeo.push(event.latLng);
|
|
|
|
var info = new google.maps.InfoWindow({
|
|
content: "(" + lat + " " + lng + ")"
|
|
});
|
|
|
|
var marker = new google.maps.Marker({
|
|
position: event.latLng,
|
|
title: 'Punto',
|
|
map: mapGeo,
|
|
draggable: true
|
|
});
|
|
markersGeo.push(marker);
|
|
marker.addListener('click', function () {
|
|
info.open(mapGeo, marker);
|
|
});
|
|
if ($("#HdnTipo").val() === 'Georuta') {
|
|
if (markersGeo.length > 1) {
|
|
CreaRuta();
|
|
}
|
|
}
|
|
else if ($("#HdnTipo").val() === 'Geocerca') {
|
|
var h = $('#GeoCerca').val() + lng + " " + lat + ","
|
|
$('#GeoCerca').val(h);
|
|
if (markersGeo.length == 1) {
|
|
$('#CommandArg').val(lng + " " + lat);
|
|
}
|
|
if (markersGeo.length === 3) {
|
|
creaPoligono2($("#hidden-input").val());
|
|
} else if (markersGeo.length > 3) {
|
|
var path = polygonGeo.getPath();
|
|
path.push(event.latLng);
|
|
}
|
|
}
|
|
|
|
}
|
|
function addLatLngCoords(coords) {
|
|
|
|
var lat = coords.lat;
|
|
var lng = coords.lng;
|
|
|
|
var myLatlng = new google.maps.LatLng(lat, lng);
|
|
|
|
mcoordsGeo.push(myLatlng);
|
|
|
|
var info = new google.maps.InfoWindow({
|
|
content: "(" + lat + " " + lng + ")"
|
|
});
|
|
|
|
var marker = new google.maps.Marker({
|
|
position: myLatlng,
|
|
title: 'Punto',
|
|
map: mapGeo,
|
|
draggable: true
|
|
});
|
|
markersGeo.push(marker);
|
|
marker.addListener('click', function () {
|
|
info.open(mapGeo, marker);
|
|
});
|
|
if ($("#HdnTipo").val() === 'Geocerca') {
|
|
var h = $('#GeoCerca').val() + lng + " " + lat + ","
|
|
$('#GeoCerca').val(h);
|
|
if (markersGeo.length == 1) {
|
|
$('#CommandArg').val(lng + " " + lat);
|
|
}
|
|
if (markersGeo.length === 3) {
|
|
creaPoligono2($("#hidden-input").val());
|
|
} else if (markersGeo.length > 3) {
|
|
var path = polygonGeo.getPath();
|
|
path.push(myLatlng);
|
|
}
|
|
}
|
|
|
|
}
|
|
function setCenterMapGeo() {
|
|
var bounds = new google.maps.LatLngBounds();
|
|
for (i = 0; i < mcoordsGeo.length; i++) {
|
|
bounds.extend(mcoordsGeo[i]);
|
|
}
|
|
mapGeo.setCenter(bounds.getCenter());
|
|
mapGeo.fitBounds(bounds);
|
|
}
|
|
function DeletemarkersGeo() {
|
|
for (var i = 0; i < markersGeo.length; i++) {
|
|
markersGeo[i].setMap(null);
|
|
}
|
|
markersGeo = [];
|
|
directionsDisplayGeo.setMap(null);
|
|
mcoordsGeo = [];
|
|
$('#GeoCerca').val('');
|
|
if (typeof polygonGeo != 'undefined') {
|
|
polygonGeo.setMap(null);
|
|
}
|
|
$("#C_BtnCrear").prop('disabled', true);
|
|
|
|
}
|
|
|
|
function EliminarUltimoPunto() {
|
|
if (markersGeo.length > 0) {
|
|
markersGeo[markersGeo.length - 1].setMap(null)
|
|
markersGeo.splice((markersGeo.length - 1), 1);
|
|
mcoordsGeo.splice((mcoordsGeo.length - 1), 1);
|
|
if ($("#HdnTipo").val() === 'Georuta') {
|
|
if (markersGeo.length >= 2) {
|
|
CreaRuta();
|
|
} else { directionsDisplayGeo.setMap(null); }
|
|
}
|
|
else if ($("#HdnTipo").val() === 'Geocerca') {
|
|
if (typeof polygonGeo != 'undefined') {
|
|
polygonGeo.setMap(null);
|
|
if (markersGeo.length >= 3) {
|
|
creaPoligono2($("#hidden-input").val());
|
|
}
|
|
}
|
|
var h;
|
|
$('#GeoCerca').val('')
|
|
for (var i = 0; i < mcoordsGeo.length; i++) {
|
|
var lat = mcoordsGeo[i].lat()
|
|
var lng = mcoordsGeo[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 = markersGeo[0].position;
|
|
var end = markersGeo[markersGeo.length - 1].position;
|
|
var waypts = [];
|
|
var fin = 1;
|
|
s = ""
|
|
if (document.getElementById("C_chkRutaRegreso").checked) {
|
|
end = start;
|
|
fin = 0;
|
|
}
|
|
for (var i = 1; i < markersGeo.length - fin; i++) {
|
|
waypts.push({
|
|
location: markersGeo[i].position,
|
|
stopover: true
|
|
});
|
|
}
|
|
directionsServiceGeo.route({
|
|
origin: start,
|
|
destination: end,
|
|
travelMode: 'DRIVING',
|
|
waypoints: waypts
|
|
}, function (response, status) {
|
|
if (status === 'OK') {
|
|
directionsDisplayGeo.setDirections(response);
|
|
directionsDisplayGeo.setMap(mapGeo);
|
|
|
|
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 creaPoligono2(color) {
|
|
polygonGeo = new google.maps.Polygon({
|
|
paths: mcoordsGeo,
|
|
strokeColor: color,
|
|
strokeOpacity: 0.8,
|
|
strokeWeight: 2,
|
|
fillColor: color,
|
|
fillOpacity: 0.35,
|
|
editable: true
|
|
});
|
|
polygonGeo.setMap(mapGeo);
|
|
$("#C_BtnCrear").prop('disabled', false);
|
|
}
|
|
|
|
function CambiaColorGeo() {
|
|
$("#hdnColor").val($("#hidden-input").val())
|
|
directionsDisplayGeo.setOptions({
|
|
polylineOptions: {
|
|
strokeColor: $("#hidden-input").val(), strokeWeight: 6,
|
|
strokeOpacity: 0.6
|
|
}
|
|
})
|
|
if ($("#HdnTipo").val() === 'Georuta') {
|
|
if (directionsDisplayGeo.getDirections() != undefined) {
|
|
directionsDisplayGeo.setDirections(directionsDisplayGeo.directions);
|
|
}
|
|
} else if ($("#HdnTipo").val() === 'Geocerca') {
|
|
if (typeof polygonGeo != 'undefined') {
|
|
polygonGeo.setMap(null);
|
|
creaPoligono2($("#hidden-input").val())
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function Limpieza() {
|
|
DeletemarkersGeo();
|
|
$('#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() {
|
|
DeletemarkersGeo();
|
|
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)
|
|
|
|
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 (markersGeo.length === 0) {
|
|
alert('Dibuje los vértices de la geocerca haciendo click en el mapa.');
|
|
} else if (markersGeo.length < 3) { alert('Debe dibujar por lo menos 3 vértices para la creación de la geocerca'); }
|
|
else {
|
|
var r = polygonGeo.getPath();
|
|
var s = "";
|
|
r.forEach(function (xy, i) { s += xy.lng() + ' ' + xy.lat() + ',' })
|
|
s += r.b[0].lng() + ' ' + r.b[0].lat();
|
|
$("#GeoCerca").val(s);
|
|
|
|
$('#divAgregarTipo').modal();
|
|
}
|
|
} else if ($("#HdnTipo").val() === 'Georuta') {
|
|
if (markersGeo.length === 0) {
|
|
alert('Traza la ruta click en el mapa.');
|
|
} else if (markersGeo.length < 2) { alert('Debe dibujar por lo menos 2 puntos en el mapa para la creación de la ruta'); }
|
|
else {
|
|
$('#divAgregarTipo').modal();
|
|
}
|
|
}
|
|
}
|
|
|
|
function CambiaTipo(Tipo) {
|
|
DeletemarkersGeo();
|
|
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")
|
|
}
|
|
}
|
|
|
|
|
|
var lastOpenedInfoWindow;
|
|
var polygons = [];
|
|
var polybounds = [];
|
|
|
|
function creaPoligonoGeo(coords, color, Geocerca) {
|
|
var polygon = new google.maps.Polygon({
|
|
paths: coords,
|
|
strokeColor: color,
|
|
strokeOpacity: 0.8,
|
|
strokeWeight: 2,
|
|
fillColor: color,
|
|
fillOpacity: 0.35
|
|
});
|
|
polygon.setMap(mapGeo);
|
|
polygons.push(polygon);
|
|
CreaMarcadorPoligonoGeo(coords, Geocerca)
|
|
}
|
|
|
|
function CreaMarcadorPoligonoGeo(coords, GeoCerca) {
|
|
var bounds = new google.maps.LatLngBounds();
|
|
for (i = 0; i < coords.length; i++) {
|
|
bounds.extend(coords[i]);
|
|
}
|
|
|
|
var marker = new google.maps.Marker({
|
|
position: bounds.getCenter(),
|
|
title: GeoCerca,
|
|
map: mapGeo
|
|
});
|
|
|
|
var infowindow = new google.maps.InfoWindow({
|
|
content: '<h4><b>' + GeoCerca + '</b></h4>'
|
|
});
|
|
|
|
marker.addListener('click', function () {
|
|
closeLastOpenedInfoWindow();
|
|
infowindow.open(mapGeo, marker);
|
|
lastOpenedInfoWindow = infowindow;
|
|
});
|
|
|
|
markersGeo.push(marker);
|
|
}
|
|
function closeLastOpenedInfoWindow() {
|
|
if (lastOpenedInfoWindow) {
|
|
lastOpenedInfoWindow.close();
|
|
}
|
|
}
|
|
function LimpiarModalGeocercas() {
|
|
C_TxtNombreGeo.value = "";
|
|
HdnModalidadParada.Value = "A"
|
|
$("#DivUtilizarGeocerca").css("display", "block");
|
|
//DivUtilizarGeocerca.Visible = true;
|
|
C_H2.innerHTML = "<i class='fa fa- bell - o'></i>Agregar GeoReferencia ";
|
|
DeletemarkersGeo();
|
|
}
|
|
|
|
function MuestraDdlGeocercas() {
|
|
if (C_ChkUsarGeo.checked) {
|
|
$("#DivDdlGeo").css("display", "block");
|
|
} else {
|
|
$("#DivDdlGeo").css("display", "none");
|
|
}
|
|
}
|
|
function CargaGeocercaExistente() {
|
|
var Id = parseInt($("#C_DdlGeocerca").val())
|
|
|
|
PageMethods.WsGeocercas(Id, function (result, userContext, methodName) {
|
|
if (methodName == 'WsGeocercas') {
|
|
var Geocerca = JSON.parse(result);
|
|
if (typeof Geocerca !== 'undefined') {
|
|
//initMapGeo();
|
|
DeletemarkersGeo();
|
|
for (var i = 0; i < Geocerca.Posiciones.length; i++) {
|
|
addLatLngCoords(Geocerca.Posiciones[i]);
|
|
}
|
|
setTimeout(function () {
|
|
setCenterMapGeo();
|
|
}, 500);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
<script src="<%= String.Format("https://maps.googleapis.com/maps/api/js?key={0}&libraries=places", Extensiones.GOOGLE_MAPS_API_KEY) %>"></script>
|
|
</asp:Content>
|
|
|