1726 lines
85 KiB
Plaintext
1726 lines
85 KiB
Plaintext
<%@ Page Title="Transportes V&A - Calendario" Language="VB" MasterPageFile="~/Site.master" EnableEventValidation="false"
|
|
AutoEventWireup="false" CodeFile="RepContratosCalendario.aspx.vb" Inherits="RepContratosCalendario" %>
|
|
|
|
<%@ Register Assembly="TimePicker" Namespace="MKB.TimePicker" TagPrefix="cc1" %>
|
|
|
|
<asp:Content ID="Content1" ContentPlaceHolderID="Css" runat="Server">
|
|
<style type="text/css">
|
|
|
|
#chart-header > div:nth-child(1) > svg:nth-child(1) > g:nth-child(2) > g:nth-child(2) > g:nth-child(1) > g:nth-child(1) > g:nth-child(1) > g:nth-child(1) > g:nth-child(1) > g:nth-child(1) > g:nth-child(1) > g:nth-child(1) > g:nth-child(1) > g:nth-child(2) > g:nth-child(8){
|
|
display:none!important
|
|
}
|
|
|
|
/* #chartdiv {
|
|
width: 100%;
|
|
height: 100%;
|
|
} */
|
|
|
|
/*
|
|
.tipo_vista {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
}*/
|
|
|
|
.my-1 {
|
|
margin-block: 1rem;
|
|
}
|
|
|
|
/* .miGrid {
|
|
color: white;
|
|
}*/
|
|
/*
|
|
#chartdiv {
|
|
width: 100%;
|
|
height: 600px;
|
|
}*/
|
|
|
|
|
|
.fc-month-view .fc-day {
|
|
border-left: 4px solid #464646;
|
|
border-right: 4px solid #464646
|
|
}
|
|
.fc-month-view .fc-week {
|
|
border-left: 4px solid #464646;
|
|
border-right: 4px solid #464646;
|
|
border-top: 4px solid #464646;
|
|
}
|
|
.fc-month-view .fc-row.fc-week.fc-widget-content:last-of-type {
|
|
border-bottom: 4px solid #464646!important;
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<%-- <style>
|
|
.btn.newsubpro {
|
|
margin-left: 3px;
|
|
padding: 2px 4px;
|
|
}
|
|
</style>
|
|
<style>
|
|
.gantt-samples-banner_controls_bar.controls_bar {
|
|
margin: 0;
|
|
/*position: absolute;*/
|
|
top: -30px;
|
|
width: 100%;
|
|
right: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.controls_bar {
|
|
border-top: 1px solid #bababa;
|
|
border-bottom: 1px solid #bababa;
|
|
clear: both;
|
|
height: 28px;
|
|
background: #f1f1f1;
|
|
color: #494949;
|
|
font-family: Arial, sans-serif;
|
|
font-size: 13px;
|
|
padding-left: 10px;
|
|
line-height: 25px;
|
|
}
|
|
|
|
.gantt-samples-banner_controls_bar.controls_bar, .gantt_scale_line .gantt_scale_cell, .gantt_grid_scale .gantt_grid_head_cell, .gantt_grid_scale .gantt_grid_head_cell a, .gantt_grid_scale .gantt_grid_head_cell a:hover {
|
|
background-color: #95a5a6 !important;
|
|
color: #FFF !important;
|
|
}
|
|
|
|
.gantt_link_point {
|
|
display: none !important; /* Oculta los checkmarks (drag handles) */
|
|
}
|
|
|
|
#gantt_here {
|
|
width: 100%; /* El ancho será el 100% del contenedor padre */
|
|
height: 400px; /* Puedes ajustar esta altura según necesites */
|
|
border: 1px solid #ccc; /* Opcional: Un borde para visualizar mejor el área del Gantt */
|
|
box-sizing: border-box; /* Asegura que el padding y el borde no afecten el tamaño total */
|
|
}
|
|
|
|
.gantt_parent_task {
|
|
background-color: #ffcccc !important; /* Color para las tareas principales */
|
|
}
|
|
|
|
.gantt_child_task {
|
|
background-color: #cce5ff !important; /* Color para las sub-tareas */
|
|
}
|
|
</style>--%>
|
|
|
|
<%--<link rel="stylesheet" href="/Transportes/Gant/dhtmlxgantt.css" type="text/css">--%>
|
|
|
|
</asp:Content>
|
|
|
|
<asp:Content ID="Content2" ContentPlaceHolderID="E" runat="Server">
|
|
Calendario de Viajes
|
|
</asp:Content>
|
|
|
|
<asp:Content ID="Content3" ContentPlaceHolderID="H" runat="Server">
|
|
<asp:UpdatePanel runat="server" ID="UpAcciones" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<li>
|
|
<asp:LinkButton ID="LnkPdf" runat="server"><i class="fa fa-ad-pdf"></i> Generar PDF</asp:LinkButton>
|
|
</li>
|
|
<li>
|
|
<asp:LinkButton ID="LnkExcel" runat="server"><i class="fa fa-ad-excel"></i> Generar Excel</asp:LinkButton>
|
|
</li>
|
|
</ContentTemplate>
|
|
<Triggers>
|
|
<asp:PostBackTrigger ControlID="LnkPdf" />
|
|
<asp:PostBackTrigger ControlID="LnkExcel" />
|
|
</Triggers>
|
|
</asp:UpdatePanel>
|
|
|
|
</asp:Content>
|
|
|
|
<asp:Content ID="Content4" ContentPlaceHolderID="C" runat="Server">
|
|
<asp:Panel ID="PnlGeneral" runat="server">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<%-- Filtros --%>
|
|
<asp:UpdatePanel ID="UPFiltros" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<div class="portlet solid grey-cascade portlet-filter" id="dvFiltros">
|
|
<%-- Filtro Visible - Consulta --%>
|
|
<div class="portlet-title portlet-filterT smalltitle">
|
|
<div class="tools">
|
|
<asp:Button ID="BtnConsultar" runat="server" Text="Consultar" class="btn btn-primary" OnClick="BtnConsultar_Click" />
|
|
<a href="javascript:;" class="expand"></a>
|
|
</div>
|
|
<div class="titlefiltros caption">
|
|
<div class="row" style="height: 32px;">
|
|
<%-- Fecha Inicial --%>
|
|
<label class="col-md-1 truncate">Fecha Inicial</label>
|
|
<div class="col-md-1" style="min-width: 115px">
|
|
<div class="input-group input-sm input-small date date-picker "
|
|
data-date-format="dd/mm/yyyy"
|
|
style="width: 100px !important; padding: 0px;">
|
|
<asp:TextBox Width="80px" ID="txtFechaI" runat="server" CssClass="form-control"
|
|
MaxLength="10"></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>
|
|
</div>
|
|
<%-- Fecha Final --%>
|
|
<label class="col-md-1 truncate">Fecha Fin</label>
|
|
<div class="col-md-1" style="min-width: 115px">
|
|
<div class="input-group input-sm input-small date date-picker" data-date-format="dd/mm/yyyy"
|
|
style="width: 100px !important; padding: 0px;">
|
|
<asp:TextBox Width="80px" ID="txtFechaF" runat="server" CssClass="form-control"
|
|
MaxLength="10"></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>
|
|
</div>
|
|
<%-- Cliente --%>
|
|
<label class="col-md-1">Cliente</label>
|
|
<div class="col-md-2">
|
|
<ADS:Dropdownlost CssClassDdl="select2me" ID="DdlCliente" Width="100%"
|
|
data-metodo="getcliente"
|
|
runat="server" DataTextField="NombreComercial" DataValueField="CveCliente"
|
|
CssStyle="width: 100%;"
|
|
UsaWebService="true" Enabled="false"></ADS:Dropdownlost>
|
|
</div>
|
|
<%-- Estatus --%>
|
|
<label class="col-md-1 ">Estatus:</label>
|
|
<div class="col-md-1">
|
|
<asp:DropDownList ID="DdlEstatusConsulta" data-text="Todos" AppendDataBoundItems="true" ClientIDMode="Static"
|
|
DataTextField="ContratoEstatus"
|
|
DataValueField="CveContratoEstatus" CssClass="form-control ddlFiltros input-sm select2me Widthall"
|
|
Style="width: 100%;" runat="server">
|
|
</asp:DropDownList>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%-- Filtro Oculto --%>
|
|
<div class="portlet-body row" style="display: none">
|
|
<%-- Centro de Costos --%>
|
|
<label class="col-md-1 truncate ">Centro de Costos</label>
|
|
<div class="col-md-1">
|
|
<asp:DropDownList ID="DdlSubProyectos" data-text="Todos" AppendDataBoundItems="true"
|
|
DataTextField="SubProyecto" DataValueField="CveSubProyecto" CssClass="form-control ddlFiltros input-sm select2me Widthall" ClientIDMode="Static"
|
|
Style="width: 100%;" runat="server">
|
|
</asp:DropDownList>
|
|
</div>
|
|
<%-- Tipo de Unidad --%>
|
|
<label class="col-md-1 ">Tipo de Unidad</label>
|
|
<div class="col-md-1">
|
|
<asp:DropDownList ID="DdlTipoUnidad" data-text="Todos" AppendDataBoundItems="true"
|
|
DataTextField="TipoActivoFijo" DataValueField="CveTipoActivoFijo" CssClass="form-control ddlFiltros input-sm select2me Widthall" ClientIDMode="Static"
|
|
Style="width: 100%;" runat="server">
|
|
</asp:DropDownList>
|
|
</div>
|
|
<%-- Chofer --%>
|
|
<label class="col-md-1 ">Chofer:</label>
|
|
<div class="col-md-2">
|
|
<asp:DropDownList ID="DdlChoferFiltro" data-text="Todos" AppendDataBoundItems="true"
|
|
DataTextField="NombreCompleto" DataValueField="CvePersonal" CssClass="form-control ddlFiltros input-sm select2me Widthall" ClientIDMode="Static"
|
|
Style="width: 100%;" runat="server">
|
|
</asp:DropDownList>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<ajax:TabContainer ID="Tab" runat="server" Width="100%" ActiveTabIndex="0">
|
|
<%--Calendario Tab--%>
|
|
<ajax:TabPanel ID="TabAlta" runat="server" HeaderText="Calendario" OnClientClick="TabAltaClicked">
|
|
<ContentTemplate>
|
|
|
|
<div class="portlet solid grey-cascade portlet-filter" id="idnecesaria">
|
|
<div class="portlet-title portlet-filterT smalltitle">
|
|
<div class="tools">
|
|
</div>
|
|
<div class="titlefiltros caption">
|
|
</div>
|
|
<div class="row" style="height: 32px;">
|
|
<label class="col-md-1">Tipo Vista: </label>
|
|
<div class="col-md-2">
|
|
<asp:RadioButtonList ID="RBTipoVista" runat="server" AutoPostBack="True" RepeatDirection="Horizontal" OnSelectedIndexChanged="RBTipoVista_SelectedIndexChanged">
|
|
<asp:ListItem Text="Fecha de Salida" Value="fecha" Selected="True" />
|
|
<asp:ListItem Text="Duración" Value="duracion" />
|
|
</asp:RadioButtonList>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portlet-body" style="display: none">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12 col-sm-12">
|
|
<div class="portlet light calendar ">
|
|
<div class="tipo_vista">
|
|
<div>
|
|
<h4 class="bold ribbon-color-success"> </h4>
|
|
</div>
|
|
</div>
|
|
<div class="portlet-body">
|
|
|
|
<asp:UpdatePanel runat="server" ID="UpCalendario" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<div id="calendar">
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</ajax:TabPanel>
|
|
<%--Contratos Tab--%>
|
|
<ajax:TabPanel ID="TabCont" runat="server" HeaderText="Contratos">
|
|
<ContentTemplate>
|
|
<%-- Contratos --%>
|
|
<asp:UpdatePanel ID="UpTitulos" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
|
|
<div class="row" style="margin-right: 10px; margin-top: 18px;" align="right">
|
|
<input type="text" id="TxtBusqueda" class="form-control input-sm" onkeyup="<%= String.Format("FiltrarTabla('TxtBusqueda','{0}')", GvContratos.ClientID) %>" style="display: inline-block; margin-right: -20px; width: 150px;" />
|
|
<a href="javascript:;" onclick="<%= String.Format("FiltrarTabla('TxtBusqueda','{0}')", GvContratos.ClientID) %>" style="margin-top: -3px;" class="btn btn-circle btn-sm label-info"><i class="icon-magnifier"></i></a>
|
|
</div>
|
|
|
|
<asp:GridView ID="GvContratos" runat="server" AutoGenerateColumns="false" EmptyDataText="No se Encontró Contrato Registrado"
|
|
CssClass="table table-striped table-hover Widthall ScrollAD mysmallbtn miGrid"
|
|
GridLines="None" data-sort="true"
|
|
DataKeyNames="CveContrato,NumeroContrato,DescripcionContrato,Ubicacion,FechaInicial,FechaFinal,CveCliente,NombreComercial,CveTipoAF,Importe,ImporteMin,ImporteMax,Observaciones,CveAF,CveChofer,CveChofer2,CveContratosEstatus,CantidadPasajeros,CveMoneda,Moneda,CveSubProyecto,NumChoferes,CveVentaRemision,RemisionSerieFolio,RemisionSaldo,TipoEstatus">
|
|
<Columns>
|
|
<asp:TemplateField HeaderText="Contrato">
|
|
<ItemTemplate>
|
|
<asp:HyperLink ForeColor="White" runat="server" NavigateUrl='<%# "~/Transportes/RepContratoDetalle.aspx?CveContrato=" + If(Eval("CveContrato") IsNot DBNull.Value, Eval("CveContrato").ToString(), String.Empty) %>'
|
|
Text='<%# Eval("NumeroContrato") %>'></asp:HyperLink>
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
|
|
<asp:TemplateField ItemStyle-Width="120px">
|
|
<HeaderTemplate>
|
|
Fecha<br />
|
|
Salida
|
|
|
|
</HeaderTemplate>
|
|
<ItemTemplate>
|
|
<asp:Literal ID="LtlFechaI" runat="server" Text='<%# Eval("FechaInicial", "{0:dd/MM/yyyy HH:mm}") %>'></asp:Literal>
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
|
|
<asp:TemplateField HeaderText="Viaje">
|
|
<ItemTemplate>
|
|
<asp:Literal ID="LtlDescripcionContrato" runat="server" Text='<%# Eval("DescripcionContrato") %>'></asp:Literal>
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
|
|
<asp:TemplateField HeaderText="Cliente">
|
|
<ItemTemplate>
|
|
<asp:Literal ID="LtNombreComercial" runat="server" Text='<%# Eval("NombreComercial") %>'></asp:Literal>
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
|
|
<asp:TemplateField HeaderText="Chofer">
|
|
<ItemTemplate>
|
|
<asp:Literal ID="LtlChofer" runat="server" Text='<%# Eval("NombreChofer") %>'></asp:Literal>
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
|
|
<asp:TemplateField HeaderText="Chofer2">
|
|
<ItemTemplate>
|
|
<asp:Literal ID="LtlChofer2" runat="server" Text='<%# Eval("NombreChofer2") %>'></asp:Literal>
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
|
|
<asp:TemplateField HeaderText="Unidad">
|
|
<ItemTemplate>
|
|
<asp:Literal ID="LtlAF" runat="server" Text='<%# Eval("CodigoAF") %>'></asp:Literal>
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
<asp:TemplateField HeaderText="Fecha Final" ItemStyle-Width="100px">
|
|
<HeaderTemplate>
|
|
Fecha<br />
|
|
Regreso
|
|
</HeaderTemplate>
|
|
<ItemTemplate>
|
|
<asp:Literal ID="LtlFechaFinal" runat="server" Text='<%# Eval("FechaFinal", "{0:d}") %>'></asp:Literal>
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
<asp:TemplateField HeaderText="Estatus">
|
|
<ItemTemplate>
|
|
<asp:Label ID="LtlContrato" runat="server" Text='<%# Eval("ContratoEstatus") %>'>
|
|
</asp:Label>
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
<asp:TemplateField ItemStyle-HorizontalAlign="Center" HeaderText="Acciones">
|
|
<ItemTemplate>
|
|
<asp:LinkButton ID="BtnEditar" runat="server" AlternateText="Editar" OnClick="UpdateModal"
|
|
CssClass="btn btn-circle btn-xs green" Text="<i class='fa fa-pencil'></i>" />
|
|
</ItemTemplate>
|
|
</asp:TemplateField>
|
|
</Columns>
|
|
</asp:GridView>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</ContentTemplate>
|
|
</ajax:TabPanel>
|
|
<%--Calendario Tab--%>
|
|
<ajax:TabPanel ID="TabGrantt" runat="server" HeaderText="Cronograma">
|
|
<ContentTemplate>
|
|
|
|
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
|
|
<ContentTemplate>
|
|
<div class="portlet solid grey-cascade portlet-filter">
|
|
<div class="portlet-title portlet-filterT smalltitle">
|
|
<div class="tools">
|
|
<a href="javascript:;" class="expand"></a>
|
|
</div>
|
|
<div class="titlefiltros caption">
|
|
<div class="row" style="height: 32px;">
|
|
<label class="col-md-1 truncate">Tipo Vista:</label>
|
|
<div class="col-md-1">
|
|
<asp:DropDownList ID="DdlTipoVistaCalendario" AutoPostBack="true" OnSelectedIndexChanged="DdlTipoVistaCalendario_SelectedIndexChanged" CssClass="form-control select2me input-sm select2me Widthall"
|
|
Style="width: 100%;" runat="server">
|
|
<asp:ListItem Text="Todos" Value="-1"></asp:ListItem>
|
|
<asp:ListItem Text="Solo Viaje" Value="1"></asp:ListItem>
|
|
</asp:DropDownList>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
|
|
<asp:UpdatePanel ID="UPGat" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
|
|
<div style="display:none!important">
|
|
<div class="gantt-samples-banner_controls_bar controls_bar" style="display:none!important">
|
|
|
|
<strong>Formato: </strong>
|
|
<label>
|
|
<input name="scales" onclick="zoom_tasks(this)" type="radio" value="week">
|
|
<span>Horas</span></label>
|
|
<label>
|
|
<input name="scales" onclick="zoom_tasks(this)" type="radio" value="trplweek" checked="true">
|
|
<span>Día</span></label>
|
|
<label>
|
|
<input name="scales" onclick="zoom_tasks(this)" type="radio" value="year">
|
|
<span>Mes</span></label>
|
|
<label>
|
|
<input name="scales" onclick="zoom_tasks(this)" type="radio" value="yearyear">
|
|
<span>año</span></label>
|
|
|
|
<div id="filter_hours" style="display: none;">
|
|
|
|
<span> | </span>
|
|
<strong>Mostrar: </strong>
|
|
<label>
|
|
<input name="scales_filter" onclick="set_scale_units(this)" type="radio" value="full_day">
|
|
<span>Dia Completo</span>
|
|
</label>
|
|
<label>
|
|
<input name="scales_filter" onclick="set_scale_units(this)" type="radio" value="work_hours">
|
|
<span>Horario de Oficina</span>
|
|
</label>
|
|
</div>
|
|
<div id="filter_days" style="">
|
|
|
|
<span> | </span>
|
|
<strong>Mostrar: </strong>
|
|
<label>
|
|
<input name="scales_filter" onclick="set_scale_units(this)" type="radio" value="full_week">
|
|
<span>Semana completa</span>
|
|
</label>
|
|
<label>
|
|
<input name="scales_filter" onclick="set_scale_units(this)" type="radio" value="work_week">
|
|
<span>Dias de Trabajo</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div id="gantt_here"></div>
|
|
|
|
</div>
|
|
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
|
|
<asp:UpdatePanel ID="UPPGantt" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<div class="portlet solid grey-cascade portlet-filter" style="display:none!important">
|
|
<div class="portlet-title portlet-filterT smalltitle">
|
|
<div class="tools">
|
|
<a href="javascript:;" class="expand"></a>
|
|
</div>
|
|
<div class="titlefiltros caption">
|
|
<div class="row" style="height: 32px;">
|
|
<label class="col-md-1 truncate">Tipo Vista:</label>
|
|
<div class="col-md-1">
|
|
<asp:DropDownList ID="DdlTipoVista" AutoPostBack="true" OnSelectedIndexChanged="DdlTipoVista_SelectedIndexChanged" CssClass="form-control select2me input-sm select2me Widthall"
|
|
Style="width: 100%;" runat="server">
|
|
<asp:ListItem Text="Todos" Value="-1"></asp:ListItem>
|
|
<asp:ListItem Text="Solo Viaje" Value="1"></asp:ListItem>
|
|
</asp:DropDownList>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div id="chartdiv"></div>
|
|
|
|
|
|
<div id="chart-container" style="width: 100%; height: 600px;max-height:601px!important">
|
|
<div id="chart-header" style="width: 100%; height: 50px;"></div>
|
|
<div style="width: 100%; height: 550px; overflow-y: auto; max-height:800px!important">
|
|
<div id="chart-body" style="width: 100%; height: 550px; overflow-y: auto;"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<asp:UpdatePanel ID="UPScheduler" runat="server" UpdateMode="Conditional" >
|
|
<ContentTemplate>
|
|
<div id="Gantt55"></div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
|
|
|
|
|
|
</ContentTemplate>
|
|
</ajax:TabPanel>
|
|
</ajax:TabContainer>
|
|
</div>
|
|
</div>
|
|
</asp:Panel>
|
|
<%-- Modal --%>
|
|
<div id="ModalActualizar" class="modal ADS fade" role="dialog">
|
|
<asp:UpdatePanel runat="server" ID="UpModal" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<div class="modal-dialog rowpadding">
|
|
<div class="modal-content" style="width: 950px;">
|
|
<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" runat="server">Actualizar Contrato</h4>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="row my-1">
|
|
|
|
<label class="col-md-3 bold text-primary">Folio:</label>
|
|
<div class="col-md-2">
|
|
<asp:TextBox ID="TxtFolio" runat="server" Width="80px" Font-Bold="true" CssClass="textaslabel"></asp:TextBox>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<asp:HyperLink runat="server" Text="" Target="_blank" ID="HypRemision" CssClass="Texto"></asp:HyperLink>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<asp:Label runat="server" ID="LblSaldo"></asp:Label>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="row my-1">
|
|
<label class="col-md-3">Cliente</label>
|
|
<div class="col-md-9">
|
|
<ADS:Dropdownlost CssClassDdl="select2me" ID="DdlClientes" Width="100%" data-metodo="getcliente"
|
|
runat="server" DataTextField="NombreComercial" DataValueField="CveCliente" CssStyle="width: 100%;"
|
|
UsaWebService="true" Enabled="false"></ADS:Dropdownlost>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row my-1">
|
|
<label class="col-md-3">
|
|
<asp:Label runat="server" ID="LblSubProyectoModal"></asp:Label>
|
|
</label>
|
|
<div class="col-md-9">
|
|
<asp:DropDownList runat="server" ID="DdlSubProyectoModal" Width="100%" DataValueField="CveSubProyecto" DataTextField="SubProyecto" CssClass="select2me"></asp:DropDownList>
|
|
<asp:RequiredFieldValidator ID="RfvDdlSubProyectoModal" runat="server" ControlToValidate="DdlSubProyectoModal" InitialValue="-1" ErrorMessage="Campo sub Proyecto requerido." ValidationGroup="GrpGuardar"></asp:RequiredFieldValidator>
|
|
<ajax:ValidatorCalloutExtender ID="VCERfvDdlSubProyectoModal" runat="server" HighlightCssClass="vco" TargetControlID="RfvDdlSubProyectoModal" Width="300px"></ajax:ValidatorCalloutExtender>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label class="col-md-3">Servicio:</label>
|
|
<div class="col-md-9">
|
|
<asp:TextBox ID="TxtDescripcion" runat="server" Width="100%" TextMode="MultiLine"
|
|
Rows="2"></asp:TextBox>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<label class="col-md-3">Observaciones:</label>
|
|
<div class="col-md-9">
|
|
<asp:TextBox ID="TxtObservaciones" runat="server" Width="100%" TextMode="MultiLine" MaxLength="500"
|
|
Rows="6"></asp:TextBox>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<asp:Label ID="LbEstatus" runat="server" class="col-md-3">Estatus:</asp:Label>
|
|
<div class="col-md-9">
|
|
<asp:DropDownList ID="DdlEstatusContrato" Enabled="false" runat="server" Class="table-group-action-input form-control input-inline select2me"
|
|
AppendDataBoundItems="true" DataValueField="CveContratoEstatus"
|
|
DataTextField="ContratoEstatus"
|
|
Width="100%">
|
|
</asp:DropDownList>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row my-1">
|
|
<label class="col-md-3">Moneda:</label>
|
|
<div class="col-md-9">
|
|
<asp:TextBox ID="TxtMoneda" runat="server" Width="100%" Enabled="false"></asp:TextBox>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
|
|
<div class="row ">
|
|
<label class="col-md-3"># Pasajeros:</label>
|
|
<div class="col-md-9">
|
|
<asp:TextBox ID="TxtCantidadPasajeros" runat="server" Width="80px"></asp:TextBox>
|
|
</div>
|
|
</div>
|
|
<div class="row my-1">
|
|
<label class="col-md-3">Lugar de Salida:</label>
|
|
<div class="col-md-9">
|
|
<asp:TextBox ID="TxtUbicacion" runat="server" Width="100%"></asp:TextBox>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<label class="col-md-3">Fecha Salida:</label>
|
|
<div class="col-md-9">
|
|
<asp:TextBox ID="TxtFechaSalida" runat="server" CssClass="form-control"
|
|
Width="100%"></asp:TextBox>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row my-1">
|
|
<label class="col-md-3">Fecha Regreso:</label>
|
|
<div class="col-md-9">
|
|
<asp:TextBox ID="TxtFechaRegreso" runat="server" CssClass="form-control"
|
|
Width="100%"></asp:TextBox>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row my-1">
|
|
<label class="col-md-3">Tipo Unidad</label>
|
|
<div class="col-md-9">
|
|
<asp:DropDownList ID="DdlTipoAF" DataValueField="CveTipoActivoFijo"
|
|
DataTextField="TipoActivoFijo" Class="form-control input-inline"
|
|
Width="100%" runat="server" Enabled="true"
|
|
AutoPostBack="true"
|
|
OnSelectedIndexChanged="DdlTipoAF_SelectedIndexChanged">
|
|
</asp:DropDownList>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row my-1" id="DivAF" runat="server">
|
|
<label class="col-md-3">Unidad</label>
|
|
<div class="col-md-9">
|
|
<asp:DropDownList ID="DdlAF" DataValueField="CveActivoFijo"
|
|
DataTextField="CodDesc" Class="form-control select2me"
|
|
Width="100%" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DdlAF_SelectedIndexChanged">
|
|
</asp:DropDownList>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row my-1" runat="server" id="DVMotivoCambioAF" visible="false">
|
|
<label class="col-md-3">Motivo Cambio:</label>
|
|
<div class="col-md-9">
|
|
<asp:TextBox ID="TxtMotivoCambioUnidad" CssStyle=" form-control" runat="server" MaxLength="2000" Width="100%"></asp:TextBox>
|
|
<asp:RequiredFieldValidator ID="RfvTxtMotivoCambioUnidad" runat="server" ControlToValidate="TxtMotivoCambioUnidad" ErrorMessage="Campo Motivo Cambio requerido." ValidationGroup="GrpGuardar"></asp:RequiredFieldValidator>
|
|
<ajax:ValidatorCalloutExtender ID="VCERfvTxtMotivoCambioUnidad" runat="server" HighlightCssClass="vco" TargetControlID="RfvTxtMotivoCambioUnidad" Width="300px"></ajax:ValidatorCalloutExtender>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row my-1">
|
|
<label class="col-md-3">Chofer 1</label>
|
|
<div class="col-md-9">
|
|
<asp:DropDownList ID="DdlChofer" AppendDataBoundItems="true" DataValueField="CvePersonal"
|
|
DataTextField="NombreCompleto" Class="table-group-action-input form-control input-inline select2me"
|
|
Width="100%" runat="server">
|
|
</asp:DropDownList>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row my-1">
|
|
<label class="col-md-3">Chofer 2 <asp:CheckBox runat="server" ID="chkSegundoChofer" AutoPostBack="true" OnCheckedChanged="chkSegundoChofer_CheckedChanged" /></label>
|
|
<div class="col-md-9" runat="server" id="DVChofer2">
|
|
<asp:DropDownList ID="DdlChofer2" AppendDataBoundItems="true" DataValueField="CvePersonal"
|
|
DataTextField="NombreCompleto" Class="table-group-action-input form-control input-inline select2me"
|
|
Width="100%" runat="server">
|
|
</asp:DropDownList>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row hidden">
|
|
<label class="col-md-3">Costo dólares:</label>
|
|
<div class="col-md-9">
|
|
<asp:TextBox ID="TxtDolares" CssStyle=" form-control" runat="server" type="number"></asp:TextBox>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row hidden">
|
|
<label class="col-md-3">Costo pesos:</label>
|
|
<div class="col-md-9">
|
|
<asp:TextBox ID="TxtPesos" CssStyle=" form-control" runat="server" type="number"></asp:TextBox>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row hidden">
|
|
<label class="col-md-3">Anticipo:</label>
|
|
<div class="col-md-9">
|
|
<asp:TextBox ID="TxtAnticipo" CssStyle=" form-control" runat="server" type="decimal"></asp:TextBox>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<asp:Button ID="BtnGuardar" OnClick="UpdateContrato" runat="server" CssClass="btn btn-primary"
|
|
Text="Actualizar"
|
|
ValidationGroup="GrpGuardar"></asp:Button>
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
|
|
<div style="display: none">
|
|
|
|
<asp:UpdatePanel ID="UpCommando" runat="server" UpdateMode="Conditional">
|
|
<ContentTemplate>
|
|
<asp:Button runat="server" ID="BtnModal" OnClick="MostrarModal"></asp:Button>
|
|
<asp:HiddenField runat="server" ID="HdnCveContrato" Value="-1" ClientIDMode="Static" />
|
|
|
|
<%--<asp:Button runat="server" ID="BtnDdlTipoAF" OnClick="BtnDdlTipoAF_Click" ClientIDMode="Static"></asp:Button>--%>
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
</div>
|
|
<asp:HiddenField runat="server" ID="HdnNumContrato" ClientIDMode="Static" />
|
|
<asp:HiddenField runat="server" ID="HidModClienteNombre" ClientIDMode="Static" />
|
|
<asp:HiddenField runat="server" ID="HidModCveCliente" ClientIDMode="Static" />
|
|
<asp:HiddenField runat="server" ID="HidCurrentMonth" ClientIDMode="Static" Value="-1" />
|
|
<asp:HiddenField runat="server" ID="HidCurrentYear" ClientIDMode="Static" Value="-1" />
|
|
<asp:HiddenField runat="server" ID="HidCveTipoAF" Value="-1" ClientIDMode="Static" />
|
|
<asp:HiddenField runat="server" ID="HidNumChoferes" Value="-1" ClientIDMode="Static" />
|
|
<asp:HiddenField runat="server" ID="HidRemisionSerieFolio" Value="-1" ClientIDMode="Static" />
|
|
<asp:HiddenField runat="server" ID="HidCveVentaRemision" Value="-1" ClientIDMode="Static" />
|
|
<asp:HiddenField runat="server" ID="HidRemisionSaldo" Value="-1" ClientIDMode="Static" />
|
|
<asp:HiddenField runat="server" ID="HidCveAF" Value="-1" ClientIDMode="Static" />
|
|
<asp:HiddenField runat="server" ID="HidCveAFDes" Value="-1" ClientIDMode="Static" />
|
|
<div style="display:none!important">
|
|
<asp:UpdatePanel runat="server" ID="UPCargaCalendario">
|
|
<ContentTemplate>
|
|
<asp:Button runat="server" ID="BtnCargaContratoCalendario" OnClick="BtnCargaContratoCalendario_Click" ClientIDMode="Static" />
|
|
</ContentTemplate>
|
|
</asp:UpdatePanel>
|
|
|
|
</div>
|
|
</asp:Content>
|
|
|
|
<asp:Content ID="Content5" ContentPlaceHolderID="JS" runat="Server">
|
|
|
|
<!-- Librería principal de amCharts 4 -->
|
|
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
|
|
|
|
<!-- Módulo de gráficos de XYChart -->
|
|
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
|
|
|
|
<!-- Tema animado de amCharts 4 -->
|
|
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
|
|
|
|
<!-- Paquete de idioma español -->
|
|
<script src="https://cdn.amcharts.com/lib/4/lang/es_ES.js"></script>
|
|
|
|
<script>
|
|
|
|
|
|
var chartHeader;
|
|
var chartBody;
|
|
|
|
function cargaDiagramaGrantAMC4(data, categorias, TipoVista) {
|
|
|
|
// Si ya hay gráficos, eliminarlos para crear nuevos
|
|
if (chartHeader) {
|
|
chartHeader.dispose();
|
|
}
|
|
if (chartBody) {
|
|
chartBody.dispose();
|
|
}
|
|
|
|
// Obtener valores de las cajas de texto o fechas
|
|
let fechaI = document.getElementById('<%= txtFechaI.ClientID %>').value;
|
|
let fechaF = document.getElementById('<%= txtFechaF.ClientID %>').value;
|
|
|
|
// Convertir valores a objetos Date
|
|
let minDate = new Date(fechaI.split("/").reverse().join("-"));
|
|
let maxDate = new Date(fechaF.split("/").reverse().join("-"));
|
|
maxDate.setDate(maxDate.getDate() + 1);
|
|
maxDate.setHours(23, 59, 59, 999);
|
|
|
|
// Crear instancia del gráfico del encabezado
|
|
chartHeader = am4core.create("chart-header", am4charts.XYChart);
|
|
|
|
// Establecer el formato de fecha de entrada
|
|
chartHeader.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm:ss";
|
|
|
|
// Establecer el idioma a español
|
|
chartHeader.language.locale = am4lang_es_ES; // Asegúrate de incluir el archivo de idioma en tu HTML
|
|
|
|
// Aplicar temas
|
|
am4core.useTheme(am4themes_animated);
|
|
|
|
// Configuración general del gráfico del encabezado
|
|
chartHeader.paddingLeft = 0;
|
|
chartHeader.paddingTop = 0; // Cambiado a 0
|
|
chartHeader.mouseWheelBehavior = "none"; // Deshabilita el zoom con la rueda del mouse
|
|
|
|
// Crear eje X (DateAxis) para el encabezado
|
|
var xAxisHeader = chartHeader.xAxes.push(new am4charts.DateAxis());
|
|
//xAxisHeader.baseInterval = { timeUnit: "hour", count: 1 };
|
|
xAxisHeader.baseInterval = { timeUnit: "day", count: 1 };
|
|
xAxisHeader.minPeriod = "day";
|
|
xAxisHeader.min = minDate.getTime();
|
|
xAxisHeader.max = maxDate.getTime();
|
|
xAxisHeader.renderer.opposite = false;
|
|
xAxisHeader.renderer.minGridDistance = 1; // Ajusta según sea necesario para evitar superposición
|
|
xAxisHeader.renderer.minorGridEnabled = false;
|
|
xAxisHeader.markUnitChange = false;
|
|
|
|
|
|
// Configurar las líneas de cuadrícula
|
|
xAxisHeader.renderer.grid.template.disabled = false;
|
|
xAxisHeader.renderer.grid.template.location = 0;
|
|
xAxisHeader.renderer.grid.template.strokeOpacity = 1;
|
|
xAxisHeader.renderer.grid.template.strokeWidth = 1;
|
|
xAxisHeader.renderer.grid.template.stroke = am4core.color("#000000");
|
|
|
|
// Asegurar que todas las etiquetas se muestren
|
|
xAxisHeader.renderer.labels.template.forceShow = true;
|
|
xAxisHeader.renderer.labels.template.location = 0.5;
|
|
xAxisHeader.renderer.labels.template.fontSize = 14;
|
|
xAxisHeader.renderer.labels.template.fontWeight = "bold";
|
|
|
|
// Formatear las etiquetas de fecha
|
|
xAxisHeader.dateFormatter.dateFormat = "dd";
|
|
xAxisHeader.markUnitChange = false;
|
|
xAxisHeader.periodChangeDateFormats.setKey("day", "dd");
|
|
xAxisHeader.periodChangeDateFormats.setKey("month", "dd");
|
|
xAxisHeader.periodChangeDateFormats.setKey("year", "dd");
|
|
|
|
// Personalizar las etiquetas del eje X
|
|
xAxisHeader.renderer.labels.template.adapter.add("text", function (text, target) {
|
|
if (target.dataItem && target.dataItem.date) {
|
|
var date = target.dataItem.date;
|
|
var numberFormatter = new am4core.NumberFormatter();
|
|
return numberFormatter.format(date.getDate(), "00");
|
|
} else {
|
|
return text;
|
|
}
|
|
});
|
|
|
|
// Desactivar marcas y rellenos de cambio de periodo
|
|
xAxisHeader.renderer.ticks.template.disabled = true;
|
|
xAxisHeader.renderer.axisFills.template.disabled = true;
|
|
|
|
|
|
// Crear eje Y (ValueAxis) para el encabezado (dummy)
|
|
var yAxisHeader = chartHeader.yAxes.push(new am4charts.ValueAxis());
|
|
yAxisHeader.renderer.labels.template.disabled = true;
|
|
yAxisHeader.renderer.grid.template.disabled = true;
|
|
|
|
// Asignar datos al gráfico del encabezado
|
|
// Creamos datos con fechas mínimas y máximas
|
|
chartHeader.data = [
|
|
{ date: minDate, value: 0 },
|
|
{ date: maxDate, value: 0 }
|
|
];
|
|
|
|
// Añadir una serie para que el eje X se renderice correctamente
|
|
var seriesHeader = chartHeader.series.push(new am4charts.LineSeries());
|
|
seriesHeader.dataFields.dateX = "date";
|
|
seriesHeader.dataFields.valueY = "value";
|
|
seriesHeader.strokeOpacity = 1; // Hacemos la línea invisible
|
|
seriesHeader.fillOpacity = 1;
|
|
|
|
// Crear instancia del gráfico principal (cuerpo)
|
|
chartBody = am4core.create("chart-body", am4charts.XYChart);
|
|
|
|
// Establecer el formato de fecha de entrada
|
|
chartBody.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm:ss";
|
|
|
|
// Establecer el idioma a español
|
|
chartBody.language.locale = am4lang_es_ES; // Asegúrate de incluir el archivo de idioma en tu HTML
|
|
|
|
// Aplicar temas
|
|
am4core.useTheme(am4themes_animated);
|
|
|
|
// Configuración general del gráfico principal
|
|
chartBody.paddingLeft = 0;
|
|
chartBody.paddingTop = 0;
|
|
chartBody.mouseWheelBehavior = "none"; // Deshabilita el zoom con la rueda del mouse
|
|
|
|
|
|
// Configurar el cursor para permitir interacción solo en el eje X
|
|
chartBody.cursor = new am4charts.XYCursor();
|
|
chartBody.cursor.behavior = "zoomX"; // O "panX" si solo deseas desplazamiento horizontal
|
|
chartBody.cursor.lineY.disabled = true; // Deshabilita la línea vertical del cursor
|
|
|
|
|
|
// Definir cellSize para el tamaño fijo de cada categoría en el eje Y
|
|
var cellSize = 45;
|
|
|
|
// Crear eje Y (CategoryAxis) para el gráfico principal
|
|
var yAxisBody = chartBody.yAxes.push(new am4charts.CategoryAxis());
|
|
yAxisBody.dataFields.category = "category";
|
|
yAxisBody.renderer.inversed = false;
|
|
yAxisBody.renderer.minGridDistance = 1; // Ajusta según sea necesario
|
|
yAxisBody.renderer.labels.template.fontSize = 12;
|
|
yAxisBody.renderer.labels.template.visible = true;
|
|
yAxisBody.start = 0;
|
|
yAxisBody.end = 1;
|
|
yAxisBody.strictMinMax = true;
|
|
yAxisBody.keepSelection = true; // Mantener la selección actual del eje Y
|
|
|
|
yAxisBody.data = categorias;
|
|
|
|
// Crear eje X (DateAxis) para el gráfico principal
|
|
var xAxisBody = chartBody.xAxes.push(new am4charts.DateAxis());
|
|
xAxisBody.baseInterval = { timeUnit: "hour", count: 1 };
|
|
xAxisBody.min = minDate.getTime();
|
|
xAxisBody.max = maxDate.getTime();
|
|
xAxisBody.renderer.opposite = false; // Cambiado a false
|
|
xAxisBody.renderer.minGridDistance = 50; // Ajusta según sea necesario para evitar superposición
|
|
xAxisBody.renderer.minorGridEnabled = true;
|
|
xAxisBody.markUnitChange = false;
|
|
|
|
// Deshabilitar las etiquetas y grids del eje X en el gráfico principal
|
|
xAxisBody.renderer.labels.template.disabled = true;
|
|
// visibilzar grid
|
|
xAxisBody.renderer.grid.template.disabled = false;
|
|
xAxisBody.renderer.labels.template.forceShow = true;
|
|
|
|
|
|
// Añadir la serie al gráfico principal
|
|
var seriesBody = chartBody.series.push(new am4charts.ColumnSeries());
|
|
seriesBody.dataFields.openDateX = "fromDate";
|
|
seriesBody.dataFields.dateX = "toDate";
|
|
seriesBody.dataFields.categoryY = "category";
|
|
|
|
seriesBody.columns.template.tooltipText = "UNIDAD: {category}-{unidad}\nCONTRATO: {contrato}\nCLIENTE: {cliente}\nDURACIÓN: {fromDate} - {toDate}";
|
|
seriesBody.columns.template.strokeOpacity = 0;
|
|
|
|
// Asignar colores a las columnas basado en el campo 'color' de los datos
|
|
seriesBody.columns.template.propertyFields.fill = "color";
|
|
seriesBody.columns.template.propertyFields.stroke = "color";
|
|
|
|
|
|
var labelBullet = seriesBody.bullets.push(new am4charts.LabelBullet());
|
|
labelBullet.label.text = "{contrato}";
|
|
labelBullet.locationX = 0.5;
|
|
labelBullet.label.horizontalCenter = "middle";
|
|
labelBullet.label.verticalCenter = "middle";
|
|
labelBullet.label.fill = am4core.color("#fff");
|
|
labelBullet.label.fontSize = 12;
|
|
labelBullet.label.truncate = true;
|
|
labelBullet.label.maxWidth = 100;
|
|
labelBullet.label.wrap = true;
|
|
|
|
// Asignar datos al gráfico principal
|
|
chartBody.data = data;
|
|
|
|
// Sincronizar los ejes X de ambos gráficos
|
|
xAxisBody.events.on("selectionextremeschanged", function () {
|
|
xAxisHeader.zoomToDates(new Date(xAxisBody.minZoomed), new Date(xAxisBody.maxZoomed));
|
|
});
|
|
|
|
xAxisHeader.events.on("selectionextremeschanged", function () {
|
|
xAxisBody.zoomToDates(new Date(xAxisHeader.minZoomed), new Date(xAxisHeader.maxZoomed));
|
|
});
|
|
|
|
// Añadir barras de scroll si es necesario
|
|
chartBody.scrollbarX = new am4core.Scrollbar();
|
|
//chartBody.scrollbarY = new am4core.Scrollbar();
|
|
|
|
// Ajustar la altura del gráfico en función de los datos
|
|
seriesBody.events.on("datavalidated", function () {
|
|
var xAxisHeight = xAxisBody.pixelHeight;
|
|
var chartHeight = categorias.length * cellSize + xAxisHeight + chartBody.paddingTop + chartBody.paddingBottom;
|
|
|
|
// Establece la altura calculada en el contenedor del gráfico
|
|
document.getElementById('chart-body').style.height = chartHeight + "px";
|
|
|
|
// Asegurar que el eje Y no esté con zoom
|
|
yAxisBody.zoom({ start: 0, end: 1 });
|
|
});
|
|
|
|
|
|
|
|
// Animaciones al cargar
|
|
seriesBody.appear();
|
|
chartBody.appear(1000, 100);
|
|
|
|
|
|
chartBody.events.on("datavalidated", function () {
|
|
//chartHeader.paddingLeft = yAxisBody.renderer.pixelWidth;
|
|
chartHeader.paddingLeft = 50;
|
|
//alert(chartBody.yAxes.getIndex(0).renderer.pixelWidth);
|
|
chartHeader.validateLayout();
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
function cargaDiagramaGrant(data, categorias, TipoVista) {
|
|
|
|
am5.ready(function () {
|
|
// SI YA HAY GRÁFICA, QUITA LA ACTUAL PARA HACER UNA NUEVA
|
|
root.container.children.clear();
|
|
|
|
root.dateFormatter.setAll({
|
|
dateFormat: "yyyy-MM-dd HH:mm:ss",
|
|
dateFields: ["valueX", "openValueX"]
|
|
});
|
|
|
|
root.locale = am5locales_es_ES;
|
|
|
|
// Establecer temas
|
|
//root.setThemes([
|
|
// am5themes_Animated.new(root)
|
|
//]);
|
|
|
|
// Crear gráfico
|
|
let chart = root.container.children.push(am5xy.XYChart.new(root, {
|
|
panX: false,
|
|
panY: false, // Habilita el desplazamiento vertical
|
|
wheelX: "none",
|
|
wheelY: "none", // Habilita el scroll vertical con la rueda del mouse
|
|
layout: root.verticalLayout,
|
|
paddingLeft: 0
|
|
}));
|
|
|
|
// Agregar leyenda
|
|
let legend = chart.children.push(am5.Legend.new(root, {
|
|
centerX: am5.p50,
|
|
x: am5.p50
|
|
}));
|
|
|
|
let colors = chart.get("colors");
|
|
|
|
// Definir cellSize para el tamaño fijo de cada categoría en el eje Y
|
|
let cellSize = 45;
|
|
|
|
chart.paddingTop = 40;
|
|
|
|
yAxis = chart.yAxes.push(
|
|
am5xy.CategoryAxis.new(root, {
|
|
categoryField: "category",
|
|
renderer: am5xy.AxisRendererY.new(root, {
|
|
inversed: false,
|
|
//minGridDistance: cellSize, // Asigna el tamaño fijo a cada unidad
|
|
minorGridEnabled: true,
|
|
neverHide: true,
|
|
forceHidden: false,
|
|
//oversizedBehavior: "none", // Elimina o ajusta oversizedBehavior
|
|
location: 0.5,
|
|
fontSize: 12, // Ajusta el tamaño de fuente si es necesario
|
|
visible: true, // Asegura que las etiquetas sean visibles
|
|
//minPosition: 0.001,
|
|
//maxPosition: 0.999,
|
|
minGridDistance: 1, // Reduced from cellSize to 1
|
|
}),
|
|
tooltip: am5.Tooltip.new(root, {
|
|
themeTags: ["axis"],
|
|
animationDuration: 200
|
|
})
|
|
})
|
|
);
|
|
|
|
yAxis.set('strictMinMax', true);
|
|
//yAxis.set('maxDeviation', 0);
|
|
yAxis.set('start', 0);
|
|
yAxis.set('end', 1);
|
|
|
|
yAxis.data.setAll(categorias);
|
|
|
|
// Obtener valores de las cajas de texto
|
|
let fechaI = document.getElementById('<%= txtFechaI.ClientID %>').value;
|
|
let fechaF = document.getElementById('<%= txtFechaF.ClientID %>').value;
|
|
|
|
// Convertir valores a objetos Date
|
|
let minDate = new Date(fechaI.split("/").reverse().join("-"));
|
|
let maxDate = new Date(fechaF.split("/").reverse().join("-"));
|
|
maxDate.setHours(23, 59, 59, 999);
|
|
|
|
|
|
|
|
// Crear eje X (DateAxis)
|
|
let xAxis = am5xy.DateAxis.new(root, {
|
|
baseInterval: { timeUnit: "hour", count: 1 },
|
|
renderer: am5xy.AxisRendererX.new(root, {
|
|
opposite: true,
|
|
minorGridEnabled: true,
|
|
minGridDistance: 50 // Ajusta según sea necesario para evitar superposición
|
|
}),
|
|
min: minDate.getTime(),
|
|
max: maxDate.getTime(),
|
|
groupData: false,
|
|
markUnitChange: false
|
|
});
|
|
|
|
// Agregar el eje X al contenedor superior
|
|
chart.topAxesContainer.children.push(xAxis);
|
|
|
|
// Asegurar que todas las etiquetas se muestren
|
|
xAxis.get("renderer").labels.template.setAll({
|
|
forceHidden: false,
|
|
minPosition: 0.001,
|
|
maxPosition: 0.999,
|
|
location: 0.5,
|
|
fontSize: 14, // Tamaño de fuente
|
|
fontWeight: "bold"
|
|
});
|
|
|
|
// Formatear las etiquetas de fecha
|
|
xAxis.get("renderer").labels.template.adapters.add("text", function (text, target) {
|
|
let dataItem = target.dataItem;
|
|
if (dataItem) {
|
|
let value = dataItem.get('value');
|
|
let date = new Date(value);
|
|
let day = date.getDate().toString().padStart(2, '0');
|
|
let month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
return day + '/' + month;
|
|
} else {
|
|
return text;
|
|
}
|
|
});
|
|
|
|
// Añadir la serie
|
|
let series = chart.series.push(am5xy.ColumnSeries.new(root, {
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
openValueXField: "fromDate",
|
|
valueXField: "toDate",
|
|
categoryYField: "category"
|
|
/*, sequencedInterpolation: true*/
|
|
}));
|
|
|
|
series.columns.template.setAll({
|
|
templateField: "columnSettings",
|
|
strokeOpacity: 0,
|
|
tooltipText: "UNIDAD: {category}-{unidad} \nCONTRATO: {contrato} \nDURACIÓN: {openValueX} - {valueX}"
|
|
});
|
|
|
|
series.data.processor = am5.DataProcessor.new(root, {
|
|
dateFields: ["fromDate", "toDate"],
|
|
dateFormat: "yyyy-MM-dd HH:mm:ss"
|
|
});
|
|
|
|
series.data.setAll(data);
|
|
|
|
// Scrollbar X
|
|
var scrollbarX = am5.Scrollbar.new(root, {
|
|
orientation: "horizontal"
|
|
});
|
|
|
|
chart.set("scrollbarX", scrollbarX);
|
|
chart.bottomAxesContainer.children.push(scrollbarX);
|
|
|
|
// Scrollbar Y
|
|
let scrollbarY = am5.Scrollbar.new(root, {
|
|
orientation: "vertical"
|
|
});
|
|
|
|
chart.set("scrollbarY", scrollbarY);
|
|
chart.rightAxesContainer.children.push(scrollbarY);
|
|
|
|
|
|
|
|
|
|
series.events.on("datavalidated", function (ev) {
|
|
|
|
let xAxisHeight = xAxis.height();
|
|
let chartHeight = categorias.length * cellSize + xAxisHeight + chart.get("paddingTop", 0) + chart.get("paddingBottom", 0);
|
|
|
|
// Establece la altura calculada en el contenedor del gráfico
|
|
chart.root.dom.style.height = chartHeight + "px";
|
|
|
|
// Asegurar que el eje Y no esté con zoom
|
|
yAxis.zoom(0, 1);
|
|
});
|
|
|
|
//series.events.on("datavalidated", function (ev) {
|
|
// series.dataItems.forEach(function (dataItem) {
|
|
// // Accede a los datos específicos de cada punto de la serie
|
|
// let category = dataItem.get("categoryY");
|
|
// let fromDate = dataItem.get("openValueX");
|
|
// let toDate = dataItem.get("valueX");
|
|
|
|
// // Mostrar los datos específicos en la consola o realizar acciones con ellos
|
|
// console.log("Categoría:", category);
|
|
// console.log("Fecha de inicio:", fromDate);
|
|
// console.log("Fecha de fin:", toDate);
|
|
|
|
// // Puedes también mostrar un tooltip personalizado o modificar visualmente cada columna
|
|
// //dataItem.get("graphics").tooltipText = `UNIDAD: ${category}\nCONTRATO: {contrato} \nDURACIÓN: ${fromDate} - ${toDate}`;
|
|
// });
|
|
//});
|
|
|
|
// Animaciones al cargar
|
|
chart.svgContainer.measure();
|
|
series.appear();
|
|
chart.invalidateRawData();
|
|
chart.appear(1000, 100);
|
|
|
|
//series.show().then(function (ev) {
|
|
// alert("Series is now fully visible");
|
|
//})
|
|
//console.log(series);
|
|
|
|
}); // end am5.ready()
|
|
}
|
|
|
|
function zoomAxisy(inicio,fin) {
|
|
setTimeout(() => {
|
|
//yAxis.zoomToIndexes(inicio, fin);
|
|
}, 100);
|
|
|
|
}
|
|
function zoomAxis(anioI, mesI, diaI, anioF, mesF, diaF) {
|
|
setTimeout(() => {
|
|
// dateAxis.zoomToDates(new Date(anioI, mesI, diaI), new Date(anioF, mesF, diaF));
|
|
}, 1500);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var PrimeraCargaCalendario = true;
|
|
var currentUpdateEvent;
|
|
var addStartDate;
|
|
var addEndDate;
|
|
var globalAllDay;
|
|
var view = null;
|
|
var date = null;
|
|
|
|
function InitCalendar() {
|
|
$(document).ready(function () {
|
|
|
|
let mes = parseInt($('#<%=HidCurrentMonth.ClientID%>').val());
|
|
let anio = parseInt($('#<%=HidCurrentYear.ClientID%>').val());
|
|
|
|
Calendario(mes, anio);
|
|
|
|
});
|
|
}
|
|
|
|
function selectDate(start, end, allDay) {
|
|
}
|
|
|
|
function updateEvent(event, element, esCalendario = true) {
|
|
|
|
|
|
$('#<%=HdnCveContrato.ClientID%>').val(event.id);
|
|
$('#BtnCargaContratoCalendario').click();
|
|
|
|
|
|
}
|
|
|
|
function formatearFechaISO(fechaISO) {
|
|
let fecha = new Date(fechaISO);
|
|
|
|
// Formatear la fecha en DD/MM/YYYY
|
|
let dia = fecha.getDate().toString().padStart(2, '0');
|
|
let mes = (fecha.getMonth() + 1).toString().padStart(2, '0'); // getMonth() devuelve mes de 0-11
|
|
let año = fecha.getFullYear();
|
|
|
|
// Formatear la hora en formato 24 horas
|
|
let horas = fecha.getHours().toString().padStart(2, '0');
|
|
let minutos = fecha.getMinutes().toString().padStart(2, '0');
|
|
let segundos = fecha.getSeconds().toString().padStart(2, '0');
|
|
|
|
// Combinar la fecha y la hora
|
|
return `${dia}/${mes}/${año} ${horas}:${minutos}:${segundos}`;
|
|
}
|
|
|
|
|
|
//function formatearFechaISO(fechaISO) {
|
|
// let fecha = new Date(fechaISO);
|
|
|
|
// // Formatear la fecha en DD/MM/YYYY
|
|
// let dia = fecha.getDate().toString().padStart(2, '0');
|
|
// let mes = (fecha.getMonth() + 1).toString().padStart(2, '0'); // getMonth() devuelve mes de 0-11
|
|
// let año = fecha.getFullYear();
|
|
|
|
// // Formatear la hora en formato 12 horas con AM/PM
|
|
// let horas = fecha.getHours();
|
|
// let minutos = fecha.getMinutes().toString().padStart(2, '0');
|
|
// let periodo = 'a. m.';
|
|
// if (horas >= 12) {
|
|
// periodo = 'p. m.';
|
|
// horas = horas > 12 ? horas - 12 : horas; // Convertir hora de formato 24 a 12 horas
|
|
// }
|
|
// if (horas === 0) horas = 12; // Medianoche se muestra como 12 a.m.
|
|
// horas = horas.toString().padStart(2, '0');
|
|
|
|
// // Combinar la fecha y la hora
|
|
// return `${dia}/${mes}/${año} ${horas}:${minutos}:00 ${periodo}`;
|
|
//}
|
|
|
|
function RadionButtonSelectedValueSet(name, SelectdValue) {
|
|
$('input[name="' + name + '"][value="' + SelectdValue + '"]').prop('checked', true);
|
|
}
|
|
|
|
function updateEventOnDropResize(event, allDay) {
|
|
var eventToUpdate = {
|
|
id: event.id,
|
|
start: event.start
|
|
};
|
|
|
|
if (event.end === null) {
|
|
eventToUpdate.end = eventToUpdate.start;
|
|
}
|
|
else {
|
|
eventToUpdate.end = event.end;
|
|
}
|
|
var endDate;
|
|
if (!event.allDay) {
|
|
endDate = new Date(eventToUpdate.end + 60 * 60000);
|
|
endDate = endDate.toJSON();
|
|
}
|
|
else {
|
|
endDate = eventToUpdate.end.toJSON();
|
|
}
|
|
|
|
eventToUpdate.start = eventToUpdate.start.toJSON();
|
|
eventToUpdate.end = eventToUpdate.end.toJSON(); //endDate;
|
|
eventToUpdate.allDay = event.allDay;
|
|
|
|
PageMethods.ActualizaEvento(eventToUpdate, UpdateTimeSuccess);
|
|
}
|
|
|
|
function eventDropped(event, dayDelta, minuteDelta, allDay, revertFunc) {
|
|
if ($(this).data("qtip")) $(this).qtip("destroy");
|
|
updateEventOnDropResize(event);
|
|
}
|
|
|
|
function eventResized(event, dayDelta, minuteDelta, revertFunc) {
|
|
if ($(this).data("qtip")) $(this).qtip("destroy");
|
|
|
|
updateEventOnDropResize(event);
|
|
}
|
|
|
|
function Calendario(mes = -1, anio = -1) {
|
|
|
|
let fechaActual = new Date();
|
|
if (mes === -1) {
|
|
mes = fechaActual.getMonth() + 1;
|
|
}
|
|
if (anio === -1) {
|
|
anio = fechaActual.getFullYear();
|
|
}
|
|
|
|
|
|
let mesFormateado = ('0' + mes).slice(-2);
|
|
let fechaInicio = `${anio}-${mesFormateado}-01`;
|
|
|
|
var date = new Date();
|
|
var d = date.getDate();
|
|
var m = date.getMonth();
|
|
var y = date.getFullYear();
|
|
var h = {};
|
|
|
|
//alert(fechaInicio);
|
|
if ($('#calendar').width() <= 400) {
|
|
$('#calendar').addClass("mobile");
|
|
h = {
|
|
left: 'title, prev, next',
|
|
center: '',
|
|
right: 'today,month,agendaWeek,agendaDay'
|
|
};
|
|
} else {
|
|
$('#calendar').removeClass("mobile");
|
|
|
|
h = {
|
|
left: 'title',
|
|
center: '',
|
|
right: 'prev,next,today,month,agendaWeek,agendaDay'
|
|
};
|
|
}
|
|
|
|
$('#calendar').fullCalendar('destroy');
|
|
$('#calendar').fullCalendar({
|
|
defaultDate: fechaInicio,
|
|
header: h,
|
|
monthNames: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
|
|
monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
|
|
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
|
|
dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
|
|
buttonText: {
|
|
today: 'Hoy',
|
|
week: 'Semana',
|
|
month: 'Mes',
|
|
day: 'Día'
|
|
},
|
|
eventClick: updateEvent,
|
|
selectable: true,
|
|
selectHelper: true,
|
|
select: selectDate,
|
|
editable: true,
|
|
minTime: "00:00:00",
|
|
maxTime: "24:00:00",
|
|
eventOverlap: false, // No permitir la superposición de eventos
|
|
slotEventOverlap: false, // No permitir la superposición en vistas de agenda
|
|
eventRender: function (event, element) {
|
|
element.css({
|
|
'margin-bottom': '2px',
|
|
'margin-left': '2px',
|
|
'white-space': 'normal', // Permitir el ajuste de texto
|
|
'height': 'auto', // Ajustar la altura automáticamente
|
|
'overflow': 'hidden' // Ocultar cualquier desbordamiento
|
|
});
|
|
element.find('.fc-title').css({
|
|
'white-space': 'normal', // Asegurar que el texto se ajuste
|
|
'line-height': '1.2em' // Ajustar la altura de línea para mejor legibilidad
|
|
});
|
|
|
|
var firstFourChars = event.title.substring(0, 4);
|
|
var restOfTitle = event.title.substring(4);
|
|
|
|
// Aplica el HTML personalizado al elemento del título del evento
|
|
//element.find('.fc-title').html('<span style="color:' + event.colorfont +';">' + firstFourChars + '</span>' + restOfTitle);
|
|
},
|
|
events: {
|
|
url: '/Ashx/CargaEventos.ashx',
|
|
type: 'GET',
|
|
data: {
|
|
U: ' <%= UsuarioActual.CveUsuario %>',
|
|
E: '<%= UsuarioActual.CveEmpresa %>',
|
|
tipoVista: '<%= RBTipoVista.Text %>',
|
|
METODO: 'contrato_transportes',
|
|
CveUsuarioPara: $('#DdlTecnico').val(),
|
|
CveSubProyecto: $('#DdlSubProyecto').val(),
|
|
CveCliente: $('#C_DdlCliente_Value').val(),
|
|
CveContratoEstatus: $('#DdlEstatusConsulta').val(),
|
|
CveTipoActivoFijo: $('#DdlTipoUnidad').val(),
|
|
CvePersonal: $('#DdlChoferFiltro').val()
|
|
}
|
|
},
|
|
eventDrop: eventDropped,
|
|
eventResize: eventResized,
|
|
viewRender: function (view, element) {
|
|
|
|
let pointDate = view.intervalStart;
|
|
let currentMonth = pointDate.month() + 1;
|
|
let currentYear = pointDate.year();
|
|
|
|
$('#<%=DdlTipoAF.ClientID%>').val(currentMonth);
|
|
$('#<%=DdlSubProyectoModal.ClientID%>').val(currentYear);
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
function obtenerFechaInicio(mes = -1, anio = -1) {
|
|
let fechaActual = new Date();
|
|
|
|
if (mes === -1) {
|
|
mes = fechaActual.getMonth() + 1; // getMonth() es base 0, así que se suma 1
|
|
}
|
|
if (anio === -1) {
|
|
anio = fechaActual.getFullYear();
|
|
}
|
|
|
|
|
|
let mesFormateado = ('0' + mes).slice(-2);
|
|
|
|
|
|
let fechaInicio = `${anio}-${mesFormateado}-01`;
|
|
|
|
return fechaInicio;
|
|
}
|
|
|
|
|
|
function TabAltaClicked(sender, e) {
|
|
|
|
setTimeout(function () {
|
|
InitCalendar();
|
|
|
|
}, 10);
|
|
|
|
}
|
|
|
|
|
|
//Gant
|
|
let RCveEvento =<%= RCveEvento %>;
|
|
function NuevoEvento(CveEvento) {
|
|
$('.txtCveEvento').val(CveEvento);
|
|
$('.BtnopenmodalClickGant').click();
|
|
}
|
|
function zoom_tasks(node) {
|
|
switch (node.value) {
|
|
case "week":
|
|
gantt.config.scale_unit = "day";
|
|
gantt.config.date_scale = "%d %M";
|
|
|
|
gantt.config.scale_height = 60;
|
|
gantt.config.min_column_width = 30;
|
|
gantt.config.subscales = [
|
|
{ unit: "hour", step: 1, date: "%H" }
|
|
];
|
|
show_scale_options("hour");
|
|
break;
|
|
case "trplweek":
|
|
gantt.config.min_column_width = 70;
|
|
gantt.config.scale_unit = "day";
|
|
gantt.config.date_scale = "%d %M";
|
|
gantt.config.subscales = [];
|
|
gantt.config.scale_height = 35;
|
|
show_scale_options("day");
|
|
break;
|
|
case "month":
|
|
gantt.config.min_column_width = 70;
|
|
gantt.config.scale_unit = "week";
|
|
gantt.config.date_scale = "Week #%W";
|
|
gantt.config.subscales = [
|
|
{ unit: "day", step: 1, date: "%D" }
|
|
];
|
|
show_scale_options();
|
|
gantt.config.scale_height = 60;
|
|
break;
|
|
case "year":
|
|
gantt.config.min_column_width = 70;
|
|
gantt.config.scale_unit = "month";
|
|
gantt.config.date_scale = "%M";
|
|
gantt.config.scale_height = 60;
|
|
show_scale_options();
|
|
gantt.config.subscales = [
|
|
{ unit: "week", step: 1, date: "#%W" }
|
|
];
|
|
break;
|
|
case "yearyear":
|
|
gantt.config.min_column_width = 70;
|
|
gantt.config.scale_unit = "month";
|
|
gantt.config.date_scale = "%y %M";
|
|
gantt.config.scale_height = 60;
|
|
show_scale_options();
|
|
gantt.config.subscales = [
|
|
{ unit: "month", step: 1, date: "#%M" }
|
|
];
|
|
break;
|
|
}
|
|
set_scale_units();
|
|
gantt.render();
|
|
}
|
|
function show_scale_options(mode) {
|
|
var hourConf = document.getElementById("filter_hours"),
|
|
dayConf = document.getElementById("filter_days");
|
|
if (mode == 'day') {
|
|
hourConf.style.display = "none";
|
|
dayConf.style.display = "";
|
|
dayConf.getElementsByTagName("input")[0].checked = true;
|
|
} else if (mode == "hour") {
|
|
hourConf.style.display = "";
|
|
dayConf.style.display = "none";
|
|
hourConf.getElementsByTagName("input")[0].checked = true;
|
|
} else {
|
|
hourConf.style.display = "none";
|
|
dayConf.style.display = "none";
|
|
}
|
|
}
|
|
function set_scale_units(mode) {
|
|
if (mode && mode.getAttribute) {
|
|
mode = mode.getAttribute("value");
|
|
}
|
|
|
|
switch (mode) {
|
|
case "work_hours":
|
|
gantt.config.subscales = [
|
|
{ unit: "hour", step: 1, date: "%H" }
|
|
];
|
|
gantt.ignore_time = function (date) {
|
|
if (date.getHours() < 9 || date.getHours() > 16) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
};
|
|
|
|
break;
|
|
case "full_day":
|
|
gantt.config.subscales = [
|
|
{ unit: "hour", step: 3, date: "%H" }
|
|
];
|
|
gantt.ignore_time = null;
|
|
break;
|
|
case "work_week":
|
|
gantt.ignore_time = function (date) {
|
|
if (date.getDay() == 0 || date.getDay() == 6) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
};
|
|
|
|
break;
|
|
default:
|
|
gantt.ignore_time = null;
|
|
break;
|
|
}
|
|
gantt.render();
|
|
}
|
|
|
|
var datosGant = [];
|
|
function loadGant() {
|
|
gantt.config.date_format = "%Y-%m-%d %H:%i";
|
|
gantt.config.order_branch = true;
|
|
gantt.config.order_branch_free = true;
|
|
gantt.config.open_tree_initially = true;
|
|
gantt.config.show_tasks_outside_timescale = true;
|
|
gantt.config.drag_move = false; // Desactiva mover tareas
|
|
gantt.config.drag_resize = false; // Desactiva redimensionar tareas
|
|
gantt.config.drag_progress = false; // Desactiva mover la barra de progreso
|
|
|
|
gantt.i18n.setLocale("es");
|
|
gantt.init("gantt_here");
|
|
|
|
|
|
|
|
gantt.config.columns = [
|
|
//{ name: "text", label: "Contrato ", width: "*", min_width: 150, tree: true, resize: true, template: function (obj) { return "<a href=\"/Transportes/RepContratoDetalle.aspx?CveContrato=" + obj.id + "\" target=\"_Blank\">" + obj.text + " </a>" } },
|
|
{ name: "codigoaf", label: "Unidad", max_width: 50, align: "left" },
|
|
//{ name: "start_date", label: "Inicio", min_width: 90, align: "center" },
|
|
//{ name: "end_date", label: "Fin", min_width: 90, align: "center" }
|
|
|
|
//{ name: "progress", label: "Avance", align: "center", template: function (obj) { return "" + (obj.progress * 100).toFixed(2) + " %" } },
|
|
//{ name: "duration", label: "Duración", align: "center" },
|
|
//{ name: "new", label: "<a onclick=\"NuevoEvento(" + RCveEvento + ");\" target=\"_Blank\"><i class='fa fa-plus'></i></a>", align: "center", template: function (obj) { return "<a onclick=\"NuevoEvento(" + obj.id + ");\" target=\"_Blank\"><i class='fa fa-plus'></i> </a>" } }
|
|
/*{name:"staff", label:"Holder(s)", template:function(obj){return obj.holder+"("+obj.progress+")"} },*/
|
|
//{ name: "add", label: "" }
|
|
];
|
|
|
|
gantt.parse({
|
|
data: datosGant
|
|
});
|
|
|
|
|
|
|
|
|
|
// Agregar evento para hover y mostrar tooltip
|
|
gantt.attachEvent("onMouseMove", function (id, e) {
|
|
if (id) {
|
|
var task = gantt.getTask(id);
|
|
|
|
// Mostrar el tooltip burbuja
|
|
var tooltip = document.getElementById("gantt_tooltip");
|
|
if (!tooltip) {
|
|
tooltip = document.createElement("div");
|
|
tooltip.id = "gantt_tooltip";
|
|
tooltip.style.position = "absolute";
|
|
tooltip.style.backgroundColor = "#fff";
|
|
tooltip.style.border = "1px solid #ccc";
|
|
tooltip.style.padding = "5px";
|
|
tooltip.style.borderRadius = "5px";
|
|
tooltip.style.boxShadow = "0 2px 5px rgba(0,0,0,0.2)";
|
|
tooltip.style.zIndex = "1000";
|
|
document.body.appendChild(tooltip);
|
|
}
|
|
|
|
tooltip.innerHTML = "<b>UNIDAD: </b> " + task.unidad + "<br/><b>CONTRATO: </b> " + task.text +
|
|
"<br/><b>DURACIÓN: </b> " + task.duracion;
|
|
|
|
// Posicionar el tooltip cerca del cursor
|
|
tooltip.style.left = (e.pageX + 15) + "px"; // Desplazado un poco a la derecha del cursor
|
|
tooltip.style.top = (e.pageY + 15) + "px"; // Desplazado un poco abajo del cursor
|
|
tooltip.style.display = "block";
|
|
} else {
|
|
var tooltip = document.getElementById("gantt_tooltip");
|
|
if (tooltip) {
|
|
tooltip.style.display = "none";
|
|
}
|
|
}
|
|
});
|
|
|
|
gantt.attachEvent("onTaskDblClick", function (id, e) {
|
|
// Cancelar el comportamiento predeterminado
|
|
return false;
|
|
});
|
|
|
|
|
|
gantt.attachEvent("onBeforeTaskMove", function (id, parent, tindex) {
|
|
console.log(tindex)
|
|
var task = gantt.getTask(id);
|
|
if (task.parent != parent)
|
|
return false;
|
|
return true;
|
|
});
|
|
|
|
gantt.attachEvent("onRowDragEnd", function (id, target, tindex) {
|
|
console.log(tindex)
|
|
debugger;
|
|
drag_id = null;
|
|
gantt.render();
|
|
});
|
|
|
|
gantt.attachEvent("onTaskLoading", function (task) {
|
|
if (task.hidden) {
|
|
task.$rendered = false; // Evitar que la tarea se renderice
|
|
}
|
|
return true;
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
// loadGant();
|
|
|
|
</script>
|
|
|
|
</asp:Content>
|