VyA.2024.10.04
This commit is contained in:
rakcsle
@@ -23,7 +23,75 @@
|
||||
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 {
|
||||
scroll-behavior: smooth; /* Aplica un desplazamiento suave */
|
||||
overflow-y: auto; /* Asegura que el desplazamiento vertical esté activo */
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="/Metronic/assets/global/plugins/dhtmlxgantt/dhtmlxgantt.css" type="text/css">
|
||||
|
||||
</asp:Content>
|
||||
|
||||
<asp:Content ID="Content2" ContentPlaceHolderID="E" runat="Server">
|
||||
@@ -287,6 +355,61 @@
|
||||
<%--Calendario Tab--%>
|
||||
<ajax:TabPanel ID="TabGrantt" runat="server" HeaderText="Cronograma">
|
||||
<ContentTemplate>
|
||||
|
||||
<asp:UpdatePanel ID="UPGat" runat="server" UpdateMode="Conditional">
|
||||
<ContentTemplate>
|
||||
|
||||
<div>
|
||||
<div class="gantt-samples-banner_controls_bar controls_bar">
|
||||
|
||||
<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" style='width: 100%; height: 100vh;'></div>
|
||||
|
||||
</div>
|
||||
|
||||
</ContentTemplate>
|
||||
</asp:UpdatePanel>
|
||||
|
||||
<asp:UpdatePanel ID="UPPGantt" runat="server" UpdateMode="Conditional">
|
||||
<ContentTemplate>
|
||||
<div class="portlet solid grey-cascade portlet-filter">
|
||||
@@ -560,6 +683,7 @@
|
||||
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
|
||||
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
|
||||
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
|
||||
<script src="/Metronic/assets/global/plugins/dhtmlxgantt/dhtmlxgantt.js"></script>
|
||||
<script>
|
||||
// Create root element
|
||||
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
||||
@@ -1008,8 +1132,8 @@
|
||||
slotEventOverlap: false, // No permitir la superposición en vistas de agenda
|
||||
eventRender: function (event, element) {
|
||||
element.css({
|
||||
'margin-bottom': '1px',
|
||||
'margin-left': '1px',
|
||||
'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
|
||||
@@ -1086,6 +1210,230 @@
|
||||
}
|
||||
|
||||
|
||||
//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.i18n.setLocale("es");
|
||||
gantt.init("gantt_here");
|
||||
|
||||
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.config.smart_scales = false;// Desactiva el salto automático entre escalas de tiempo
|
||||
//gantt.config.scroll_size = 1;
|
||||
// gantt.config.scroll_on_click = false; // Desactiva el scroll automático al hacer clic
|
||||
//gantt.config.autosize = "xy";
|
||||
//gantt.config.smart_rendering = false;
|
||||
|
||||
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: "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("onGanttScroll", function (left, top) {
|
||||
|
||||
// var step = 50; // Define cuánto avanzar con cada paso del scroll
|
||||
//var newTop = top + step; // Incrementa el scroll vertical en 50 píxeles
|
||||
|
||||
//gantt.scrollTo(left, newTop); // Establece el nuevo valor de scroll vertical
|
||||
console.log("Scroll vertical: ", top);
|
||||
return false; // Previene el scroll predeterminado para que solo se aplique el manual
|
||||
|
||||
|
||||
//return true;
|
||||
});
|
||||
|
||||
|
||||
|
||||
loadGant();
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user