601 lines
34 KiB
Plaintext
601 lines
34 KiB
Plaintext
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.master" CodeBehind="gestionTeletrabajo.aspx.vb" Inherits="WebIntranet.gestionTeletrabajo" %>
|
|
|
|
<asp:Content ID="Content1" ContentPlaceHolderID="Content" runat="server">
|
|
<div class="pag">
|
|
|
|
<div id="desplegableAnadirTeletrabajo" style="display: none; position: fixed; background-color: #000000bf; height: 100vh; width: 100%; top: 0; left: 0; z-index: 100;"></div>
|
|
<div id="desplegableConfirmarTeletrabajo" style="display: none; position: fixed; background-color: #000000bf; height: 100vh; width: 100%; top: 0; left: 0; z-index: 101;"></div>
|
|
|
|
<div class="d-flex row justify-content-center mt-3">
|
|
<div class="col-md-12 mb-4" style="display:flex;justify-content:center"><input type="button" value="Agregar nuevo tramo de teletrabajo" class="btnAzul" onclick="anadirTeletrabajoDesp(0)" /></div>
|
|
<div class="col-md-12 mb-4" style="display:flex;justify-content:center" id="mensajeTeletrabajo2"></div>
|
|
<div class="divListadoTeletrabajo col-md-7" style="" id="divListTeletrabajo"></div>
|
|
|
|
<div id="areaAgenda" class="agenda col-md-5 text-right pt-2">
|
|
|
|
<div class="row" id="divContenidoAgenda" style="height: 100%">
|
|
|
|
<div class="col-md-12" id="tituloAgenda">
|
|
|
|
<p><b>AGENDA</b></p>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-12" id="mesAnno" style="margin-bottom: 10px;">
|
|
|
|
<div class="d-flex justify-content-center position-relative" style="align-items: center;">
|
|
|
|
<a class="icoNavCalendario" onclick="CambiarMes(-1)">
|
|
|
|
<i class="fas fa-caret-left"></i>
|
|
|
|
</a>
|
|
|
|
<p style="width: 180px; text-align: center; margin-left: 10px; margin-right: 10px; margin-bottom: 0px; line-height: 20px;" id="txtAgendaMesAnyo"></p>
|
|
|
|
<a class="icoNavCalendario" onclick="CambiarMes(1)">
|
|
|
|
<i class="fas fa-caret-right"></i>
|
|
|
|
</a>
|
|
|
|
<div id="popupFiltros" class="row"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row nombreDiaSemana col-md-12 d-flex justify-content-center">
|
|
|
|
<div style="font-size: 12px; margin-bottom: 10px;" class="col">Lunes</div>
|
|
|
|
<div style="font-size: 12px; margin-bottom: 10px;" class="col">Martes</div>
|
|
|
|
<div style="font-size: 12px; margin-bottom: 10px;" class="col">Miercoles</div>
|
|
|
|
<div style="font-size: 12px; margin-bottom: 10px;" class="col">Jueves</div>
|
|
|
|
<div style="font-size: 12px; margin-bottom: 10px;" class="col">Viernes</div>
|
|
|
|
<div style="font-size: 12px; margin-bottom: 10px;" class="col">Sábado</div>
|
|
|
|
<div style="font-size: 12px; margin-bottom: 10px;" class="col">Domingo</div>
|
|
|
|
</div>
|
|
<div class="col-md-12 row" id="calendario"></div>
|
|
<div class="d-flex justify-content-around" style="gap:30px; padding:15px">
|
|
<div class="d-flex align-items-center" style="gap: 15px">
|
|
<p style="font-weight:bold" class="m-0">1 DÍA</p>
|
|
<div style="width: 20px; height: 20px; background-color: var(--TT1)"></div>
|
|
</div>
|
|
<div class="d-flex align-items-center" style="gap: 15px">
|
|
<p style="font-weight:bold" class="m-0">2 DÍAS</p>
|
|
<div style="width: 20px; height: 20px; background-color: var(--TT2)"></div>
|
|
</div>
|
|
<div class="d-flex align-items-center" style="gap: 15px">
|
|
<p style="font-weight:bold" class="m-0">3 DÍAS</p>
|
|
<div style="width: 20px; height: 20px; background-color: var(--TT3)"></div>
|
|
</div>
|
|
<div class="d-flex align-items-center" style="gap: 15px">
|
|
<p style="font-weight:bold" class="m-0">EXCEPCIÓN</p>
|
|
<div style="width: 20px; height: 20px; background-color: var(--TTEx)"></div>
|
|
</div>
|
|
</div>
|
|
<%--<div class="col-md-12" id="btnVerMasAgenda"></div>--%>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const monthNames = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
|
|
|
|
"Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
|
|
|
|
var fechaIniMes
|
|
var fechaFinMes
|
|
var diaHoy
|
|
var listaAgenda
|
|
|
|
$(document).ready(function () {
|
|
|
|
var fechahoy = new Date()
|
|
fechahoyDia = fechahoy.getDate()
|
|
fechahoyMes = fechahoy.getMonth() + 1
|
|
fechahoyAnno = fechahoy.getFullYear()
|
|
|
|
fechaIniMes = new Date(Date.now())
|
|
diaHoy = fechaIniMes.getDate()
|
|
fechaIniMes.setDate(1)
|
|
fechaFinMes = new Date(Date.now())
|
|
fechaFinMes.setMonth(fechaFinMes.getMonth() + 1)
|
|
fechaFinMes.setDate(0)
|
|
|
|
var fechaString = fechaIniMes.getFullYear() + "-" + (fechaIniMes.getMonth() + 1) + "-1"
|
|
$("#txtAgendaMesAnyo").text(monthNames[fechaIniMes.getMonth()] + " " + fechaIniMes.getFullYear())
|
|
ObtenerFechaAgenda(fechaString)
|
|
CambiarMes(+0)
|
|
|
|
});
|
|
|
|
|
|
|
|
function CambiarMes(numero) {
|
|
$("#divLoading").css("display", "flex")
|
|
$("#divListTeletrabajo").css("display", "none")
|
|
$("#divContenidoAgenda").css("display", "none")
|
|
fechaIniMes.setMonth(fechaIniMes.getMonth() + numero)
|
|
fechaFinMes.setDate(1)
|
|
fechaFinMes.setMonth(fechaIniMes.getMonth() + 1)
|
|
fechaFinMes.setDate(0)
|
|
fechaFinMes.setYear(fechaIniMes.getFullYear())
|
|
|
|
var fechaString = fechaIniMes.getFullYear() + "-" + (fechaIniMes.getMonth() + 1) + "-01"
|
|
$("#txtAgendaMesAnyo").text(monthNames[fechaIniMes.getMonth()] + " " + fechaIniMes.getFullYear())
|
|
|
|
$.ajax({
|
|
type: "post",
|
|
contentType: "application/json",
|
|
url: "/gestionTeletrabajo.aspx/cargarListaTeletrabajo",
|
|
data: '{"fechaInicio":"' + fechaString + '"}',
|
|
dataType: "json",
|
|
success: function (result) {
|
|
|
|
var lTeletrabajo = JSON.parse(result.d.Result)
|
|
var listadoTeletrabajo = lTeletrabajo.ListadoEF
|
|
var html = ""
|
|
var contadorPersona = 0
|
|
|
|
if (listadoTeletrabajo.length > 0) {
|
|
//for (var i = 0; i < listadoTeletrabajo.length; i++) {
|
|
html += "<div><table class='table table-striped'><tr>" +
|
|
"<th style='width:20%'>Fecha</th>" +
|
|
"<th style='width:20%'>Días posibles</th>" +
|
|
"<th style='width:45%'>Motivo</th>" +
|
|
"<th style='width:5%'>Excepción</th>" +
|
|
"<th style='width:5%'>Días</th>" +
|
|
"<th style='width:5%'></th>" +
|
|
"</tr>"
|
|
|
|
listadoTeletrabajo.sort
|
|
|
|
for (var x = 0; x < listadoTeletrabajo.length; x++) {
|
|
|
|
var diasActivos = []
|
|
if (listadoTeletrabajo[x].lunes == true) { diasActivos.push(1) }
|
|
if (listadoTeletrabajo[x].martes == true) { diasActivos.push(2) }
|
|
if (listadoTeletrabajo[x].miercoles == true) { diasActivos.push(3) }
|
|
if (listadoTeletrabajo[x].jueves == true) { diasActivos.push(4) }
|
|
if (listadoTeletrabajo[x].viernes == true) { diasActivos.push(5) }
|
|
|
|
|
|
|
|
var fecha = new Date(listadoTeletrabajo[x].Fei)
|
|
var fechaForm = fecha.getDate().toString().padStart("2", 0) + "/" + (fecha.getMonth() + 1).toString().padStart("2", 0) + "/" + fecha.getFullYear().toString()
|
|
var fechaFin = new Date(listadoTeletrabajo[x].Fef)
|
|
var fechaFinForm = fechaFin.getDate().toString().padStart("2", 0) + "/" + (fechaFin.getMonth() + 1).toString().padStart("2", 0) + "/" + fechaFin.getFullYear().toString()
|
|
var idTT = listadoTeletrabajo[x].id.toString()
|
|
html += ""
|
|
if (fechaFin < new Date()) { html += "<tr id='" + idTT + "-tr' class='op05' >" } else { html += "<tr id='" + idTT + "-tr' >" }
|
|
html+= "<td style='width:20%' class='listaTeletrabajo' onclick='anadirTeletrabajoDesp(" + idTT + ")' id='" + idTT + "-fecha'>" + fechaForm + " - " + fechaFinForm + "</td>" +
|
|
"<td style='width:20%'>"
|
|
if (listadoTeletrabajo[x].lunes == true) { html += "L " }
|
|
if (listadoTeletrabajo[x].lunes == true && diasActivos.length > 1) { html += "/ " }
|
|
if (listadoTeletrabajo[x].martes == true) { html += "M " }
|
|
if (listadoTeletrabajo[x].martes == true && diasActivos.length > 1) { html += "/ " }
|
|
if (listadoTeletrabajo[x].miercoles == true) { html += "X " }
|
|
if (listadoTeletrabajo[x].miercoles == true && diasActivos.length > 1) { html += "/ " }
|
|
if (listadoTeletrabajo[x].jueves == true) { html += "J " }
|
|
if (listadoTeletrabajo[x].jueves == true && diasActivos.length > 1) { html += "/ " }
|
|
if (listadoTeletrabajo[x].viernes == true) { html += "V" }
|
|
html += "</td>"
|
|
var motivo = ""
|
|
if (listadoTeletrabajo[x].motivo != null) {
|
|
motivo = listadoTeletrabajo[x].motivo
|
|
}
|
|
html += "<td style='width:45%'>" + motivo + "</td>"
|
|
var excepcion = ""
|
|
if (listadoTeletrabajo[x].excepcion == true) {
|
|
excepcion = "<i class='fa fa-check'></i>"
|
|
}
|
|
|
|
var colorNum = ""
|
|
if (listadoTeletrabajo[x].nuDias == 1) {
|
|
colorNum = "var(--TT1)"
|
|
}
|
|
else if (listadoTeletrabajo[x].nuDias == 2) {
|
|
colorNum = "var(--TT2)"
|
|
}
|
|
else if (listadoTeletrabajo[x].nuDias >= 3) {
|
|
colorNum = "var(--TT3)"
|
|
}
|
|
if (listadoTeletrabajo[x].excepcion == true) {
|
|
colorNum = "var(--TTEx)"
|
|
}
|
|
html += "<td style='width:5%; text-align:center'>" + excepcion + "</td>"
|
|
html += "<td style='width:5%; text-align:center'><p style='margin:0; background-color:" + colorNum +"; color:white; height:30px; widht:30px;line-height: 30px;border-radius: 5px;'>" + listadoTeletrabajo[x].nuDias.toString() + "</p></td>"
|
|
html += "<td class='listaTeletrabajoCheck' style='text-align: center; width:5%' onclick='anularTeletrabajo(" + idTT + ")'><i style='min-height:30px' class='fa-solid fa-xmark'></i></td></tr>"
|
|
|
|
|
|
|
|
var FI = new Date(listadoTeletrabajo[x].Fei)
|
|
var FF = new Date(listadoTeletrabajo[x].Fef)
|
|
if ((FI >= fechaIniMes && FI <= fechaFinMes) || (FF >= fechaIniMes && FF <= fechaFinMes) || (FI <= fechaIniMes && FF >= fechaFinMes)) {
|
|
|
|
|
|
var diaInicio = 0
|
|
var diaFin = 0
|
|
if (fecha < fechaIniMes) {
|
|
diaInicio = 1
|
|
}
|
|
else {
|
|
diaInicio = fecha.getDate()
|
|
}
|
|
if (fechaFin > fechaFinMes) {
|
|
diaFin = fechaFinMes.getDate()
|
|
}
|
|
else {
|
|
diaFin = fechaFin.getDate()
|
|
}
|
|
|
|
for (var i = diaInicio; i <= diaFin; i++) {
|
|
var casilla = $("#" + i.toString() + "-calDay")[0]
|
|
if (casilla.classList.contains("finSemana") == false) {
|
|
|
|
var diaRef = new Date(fechaIniMes)
|
|
diaRef.setDate(i)
|
|
if (diasActivos.includes(diaRef.getDay()) || listadoTeletrabajo[x].excepcion == true) {
|
|
var tipoTT = ""
|
|
if (listadoTeletrabajo[x].nuDias == 1 && listadoTeletrabajo[x].excepcion == false && casilla.classList.contains("diaConTeletrabajoEx") == false) { tipoTT = "diaConTeletrabajo1" }
|
|
if (listadoTeletrabajo[x].nuDias == 2 && listadoTeletrabajo[x].excepcion == false && casilla.classList.contains("diaConTeletrabajoEx") == false) { tipoTT = "diaConTeletrabajo2" }
|
|
if (listadoTeletrabajo[x].nuDias >= 3 && listadoTeletrabajo[x].excepcion == false && casilla.classList.contains("diaConTeletrabajoEx") == false) { tipoTT = "diaConTeletrabajo3" }
|
|
if (listadoTeletrabajo[x].excepcion == true) { tipoTT = "diaConTeletrabajoEx" }
|
|
$("#" + i.toString() + "-calDay").addClass(tipoTT)
|
|
if (fechaFin < new Date()) { $("#" + i.toString() + "-calDay").addClass("op05") }
|
|
$("#" + i.toString() + "-calDay").attr("idAsis", listadoTeletrabajo[x].id.toString())
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
//}
|
|
|
|
}
|
|
html += "</table></div>"
|
|
}
|
|
else {
|
|
html += "<div> <table class='table table-striped'><tr>" +
|
|
"<th>Fecha</th>" +
|
|
/* "<th>Anular</th>"*/
|
|
"</tr>"
|
|
html += "<tr><td class='listaTeletrabajo' colspan='3' style='color:red; font-weight:bold;text-align:center'>No hay teletrabajos proximamente</td>"
|
|
html += "</table></div>"
|
|
}
|
|
$("#divListTeletrabajo").html(html)
|
|
//$("#divLoading").css("display", "none")
|
|
},
|
|
error: function (result) {
|
|
alert('error occured');
|
|
//$("#divLoading").css("display", "none")
|
|
//alert(result.responseText);
|
|
},
|
|
});
|
|
//$("#divLoading").css("display", "none")
|
|
ObtenerFechaAgenda(fechaString)
|
|
$("#divListTeletrabajo").css("display", "")
|
|
$("#divContenidoAgenda").css("display", "")
|
|
|
|
}
|
|
function marcarFiestas(fechaInicio, fechaFinal) {
|
|
$("#divLoading").css("display", "flex")
|
|
$.ajax({
|
|
type: "post",
|
|
contentType: "application/json",
|
|
url: "/gestionTeletrabajo.aspx/comprobarFiestas",
|
|
data: '{"fechaInicio":"' + fechaInicio + '","fechaFinal":"' + fechaFinal + '"}',
|
|
dataType: "json",
|
|
success: function (result) {
|
|
let respuesta = JSON.parse(result.d.Result)
|
|
let listadoFiestas = respuesta.ListadoFiestas
|
|
|
|
for (let i = 0; i < listadoFiestas.length; i++) {
|
|
$("#" + new Date(listadoFiestas[i].Fecha).getDate().toString() + "-calDay").addClass("finSemana")
|
|
$("#" + new Date(listadoFiestas[i].Fecha).getDate().toString() + "-calDay").attr("onclick", null);
|
|
}
|
|
|
|
$("#divLoading").css("display", "none")
|
|
},
|
|
error: function (result) {
|
|
alert('error occured');
|
|
//alert(result.responseText);
|
|
$("#divLoading").css("display", "none")
|
|
},
|
|
});
|
|
}
|
|
function ObtenerFechaAgenda(fecha) {
|
|
$("#divLoading").css("display", "flex")
|
|
fecha = new Date(fecha);
|
|
$("#calendario").empty()
|
|
$("#proximosEventos").empty()
|
|
fechaFinal = new Date(fecha)
|
|
fechaFinal.setMonth(fechaFinal.getMonth() + 1)
|
|
fechaFinal.setDate(0)
|
|
|
|
|
|
let fechaString = fecha.getFullYear() + "-" + (fecha.getMonth() + 1).toString().padStart("2", 0) + "-01"
|
|
let fechaStringFinal = fechaFinal.getFullYear() + "-" + (fecha.getMonth() + 1).toString().padStart("2", 0) + "-" + fechaFinal.getDate()
|
|
|
|
//calendario
|
|
var diaInicio = fecha.getDay() - 1
|
|
if (diaInicio == -1) {
|
|
diaInicio = 6
|
|
}
|
|
var htmlCalendario = ""
|
|
for (var i = 0; i < diaInicio; i++) {//cuadros blancos inicio
|
|
htmlCalendario += '<div class=" diaDeLaSemana diaVacio"></div>'
|
|
}
|
|
|
|
|
|
|
|
for (var i = 1; i <= fechaFinal.getDate(); i++) {//calendario
|
|
var numCuadro = fecha.getDay() + i
|
|
|
|
var finSemana = ""
|
|
if ((numCuadro - 1) % 7 == 0 || numCuadro % 7 == 0) {
|
|
finSemana = "finSemana"
|
|
}
|
|
|
|
let fechaDia = fecha.getFullYear() + "-" + (fecha.getMonth() + 1).toString().padStart("2", 0) + "-0" + i
|
|
|
|
|
|
if (finSemana == "") {
|
|
htmlCalendario += '<div class=" diaDeLaSemana diaDeLaSemanaActivo ' + '" id="' + i + '-calDay" ><b class="numeroCalendario">' + i + '</b><div id="' + i + '-cuadrito" class="d-flex" style="min-height:10px;" ></div></div>'
|
|
//onclick="anadirTeletrabajoDesp(' + i + ', ' + (fecha.getMonth() + 1).toString() + ', ' + fecha.getFullYear().toString() + ')"
|
|
|
|
} else if (finSemana == "finSemana") {
|
|
htmlCalendario += '<div class=" diaDeLaSemana diaDeLaSemanaActivo ' + finSemana + '" id="' + i + '-calDay"><b class="numeroCalendario">' + i + '</b><div id="' + i + '-cuadrito" class="d-flex" style="min-height:10px;" ></div></div>'
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
var huecosRestantes = 35 - (fecha.getDay() + fechaFinal.getDate())
|
|
for (var i = 0; i < huecosRestantes; i++) {//cuadros blancos fin
|
|
htmlCalendario += '<div class=" diaDeLaSemana diaVacio"></div>'
|
|
}
|
|
$("#calendario").html(htmlCalendario)
|
|
marcarFiestas(fechaString, fechaStringFinal)
|
|
/* $("#divLoading").css("display", "none")*/
|
|
}
|
|
function anadirTeletrabajoDesp(idTele) {
|
|
var html = ""
|
|
if (idTele != 0) {
|
|
|
|
$.ajax({
|
|
type: "post",
|
|
contentType: "application/json",
|
|
url: "/gestionTeletrabajo.aspx/cargarTeletrabajo",
|
|
data: '{"idTele":"' + idTele + '"}',
|
|
dataType: "json",
|
|
success: function (result) {
|
|
|
|
var lTeletrabajo = JSON.parse(result.d.Result)
|
|
var tl = lTeletrabajo.ListadoEF[0]
|
|
|
|
html += "<div style='background-color:white;padding:20px; display:flex; flex-direction:column;gap:10px;max-height:420px;'>" +
|
|
"<p style='font-weight:bold'>Editar tramo de teletrabajo</p>" +
|
|
"<div style='display:flex; gap:10px; align-items:center'>" +
|
|
"<p style='margin:0'>Fecha de inicio: </p><input type='date' id='fechaAnadirTeletrabajoIni' value='"+tl.Fei.toString().substring(0,10)+"'/>" +
|
|
"<p style='margin:0'>Fecha de fin: </p><input type='date' id='fechaAnadirTeletrabajoFin' value='" + tl.Fef.toString().substring(0, 10) +"'/>" +
|
|
"<p style='margin:0'>Número de días: </p><input type='number' id='nuDiasAnadir' max='5' step='0' style='width: 60px;' min='1' value='"+tl.nuDias+"'/>" +
|
|
"</div>" +
|
|
"<div style='display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:20px'>" +
|
|
"<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Lunes: </p><input type='checkbox' id='LuAn'"
|
|
if(tl.lunes == true) {html+= " checked " }
|
|
html+= "/></div>" +
|
|
"<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Martes: </p><input type='checkbox' id='MaAn'"
|
|
if (tl.martes == true) { html += " checked " }
|
|
html += "/></div>" +
|
|
"<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Miercoles: </p><input type='checkbox' id='MiAn'"
|
|
if (tl.miercoles == true) { html += " checked " }
|
|
html+="/></div>" +
|
|
"<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Jueves: </p><input type='checkbox' id='JuAn' "
|
|
if (tl.jueves == true) { html += " checked " }
|
|
html += "/></div>" +
|
|
"<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Viernes: </p><input type='checkbox' id='ViAn' "
|
|
if (tl.viernes == true) { html += " checked " }
|
|
html+="/></div>" +
|
|
"</div>" +
|
|
"<div style='display:flex; gap:10px; align-items:center; margin-top:20px'>"
|
|
var excepcion = ""
|
|
if (tl.excepcion == true) {excepcion = " checked " }
|
|
html+="<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Excepción: </p> </p><input type='checkbox' id='ExAnadir' " + excepcion +"/></div>"
|
|
var motivo = ""
|
|
if (tl.motivo != null) {motivo=tl.motivo }
|
|
html+="<p style='margin:0'>Motivo: </p><input type='text' id='MotivoAnadir' value='" + motivo + "'/>" +
|
|
"</div>" +
|
|
"<div id='mensajeTeletrabajo' style='display:flex;justify-content:center'></div>"
|
|
|
|
|
|
html += "<div style='gap: 10px; display: flex;justify-content: right;'><button type='button' class='btnAzul' onclick='PopupConfirmarEdicion("+idTele+")'>Confirmar</button>" +
|
|
"<button type='button' class='btnGris' onclick='cerrarDespTeletrabajo()'> Cancelar</button></div></div></div>"
|
|
|
|
$("#desplegableAnadirTeletrabajo").html(html)
|
|
$("#desplegableAnadirTeletrabajo").css("display", "flex")
|
|
$("#desplegableAnadirTeletrabajo").css("justify-content", "center")
|
|
$("#desplegableAnadirTeletrabajo").css("align-items", "center")
|
|
|
|
},
|
|
error: function (result) {
|
|
alert('error occured');
|
|
},
|
|
});
|
|
|
|
//obtener el teletrabajo
|
|
}
|
|
else {
|
|
html += "<div style='background-color:white;padding:20px; display:flex; flex-direction:column;gap:10px;max-height:420px;'>" +
|
|
"<p style='font-weight:bold'>Nuevo tramo de teletrabajo</p>" +
|
|
"<div style='display:flex; gap:10px; align-items:center'>" +
|
|
"<p style='margin:0'>Fecha de inicio: </p><input type='date' id='fechaAnadirTeletrabajoIni' value=''/>" +
|
|
"<p style='margin:0'>Fecha de fin: </p><input type='date' id='fechaAnadirTeletrabajoFin' value=''/>" +
|
|
"<p style='margin:0'>Número de días: </p><input type='number' id='nuDiasAnadir' max='5' step='0' style='width: 60px;' min='1' value='1'/>" +
|
|
"</div>" +
|
|
"<div style='display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:20px'>" +
|
|
"<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Lunes: </p><input type='checkbox' id='LuAn' value=''/></div>" +
|
|
"<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Martes: </p><input type='checkbox' id='MaAn' value=''/></div>" +
|
|
"<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Miercoles: </p><input type='checkbox' id='MiAn' value=''/></div>" +
|
|
"<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Jueves: </p><input type='checkbox' id='JuAn' value=''/></div>" +
|
|
"<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Viernes: </p><input type='checkbox' id='ViAn' value=''/></div>" +
|
|
"</div>" +
|
|
"<div style='display:flex; gap:10px; align-items:center; margin-top:20px'>" +
|
|
"<div style='display:flex; gap:10px; align-items:center'><p style='margin:0'>Excepción: </p> </p><input type='checkbox' id='ExAnadir' value=''/></div>" +
|
|
"<p style='margin:0'>Motivo: </p><input type='text' id='MotivoAnadir' value=''/>" +
|
|
"</div>" +
|
|
"<div id='mensajeTeletrabajo' style='display:flex;justify-content:center'></div>"
|
|
|
|
|
|
html += "<div style='gap: 10px; display: flex;justify-content: right;'><button type='button' class='btnAzul' onclick='ConfirmarTeletrabajo(\"CREAR/EDICION\",0)'>Confirmar</button>" +
|
|
"<button type='button' class='btnGris' onclick='cerrarDespTeletrabajo()'> Cancelar</button></div></div></div>"
|
|
|
|
$("#desplegableAnadirTeletrabajo").html(html)
|
|
$("#desplegableAnadirTeletrabajo").css("display", "flex")
|
|
$("#desplegableAnadirTeletrabajo").css("justify-content", "center")
|
|
$("#desplegableAnadirTeletrabajo").css("align-items", "center")
|
|
|
|
}
|
|
|
|
|
|
}
|
|
function anularTeletrabajo(idTele) {
|
|
var html = "<div style='background-color:white;padding:20px; display:flex; flex-direction:column;gap:10px;max-height:210px;height: 150px;'><div><p>¿Desea anular este teletrabajo? Las picadas ya efectuadas en este tramo de teletrabajo seguirán en vigor.</p></div>" +
|
|
"<div style='display:flex;padding-top: 20px;gap:10px;justify-content: right;'><button type='button' class='btnAzul' onclick='ConfirmarTeletrabajo(\"ELIMINAR\", " + idTele + ")'>Confirmar</button><button type='button' class='btnGris' onclick='cerrarDespTeletrabajo()'>Cancelar</button></div></div>"
|
|
$("#desplegableAnadirTeletrabajo").html(html)
|
|
$("#desplegableAnadirTeletrabajo").css("display", "flex")
|
|
$("#desplegableAnadirTeletrabajo").css("justify-content", "center")
|
|
$("#desplegableAnadirTeletrabajo").css("align-items", "center")
|
|
|
|
}
|
|
function cerrarDespTeletrabajo() {
|
|
$("#desplegableAnadirTeletrabajo").html("")
|
|
$("#desplegableAnadirTeletrabajo").css("display", "none")
|
|
}
|
|
function vaciarDespTeletrabajo() {
|
|
$("#ExAnadir")[0].checked = false
|
|
$("#nuDiasAnadir").val(1)
|
|
$("#LuAn")[0].checked = false
|
|
$("#MaAn")[0].checked = false
|
|
$("#MiAn")[0].checked = false
|
|
$("#JuAn")[0].checked = false
|
|
$("#ViAn")[0].checked = false
|
|
$("#MotivoAnadir").val("")
|
|
$("#fechaAnadirTeletrabajoIni").val("")
|
|
$("#fechaAnadirTeletrabajoFin").val("")
|
|
}
|
|
function ConfirmarTeletrabajo(modo, id) {
|
|
var idtt = id
|
|
if (modo == "CREAR/EDICION") {
|
|
var excepcion = $("#ExAnadir")[0].checked
|
|
var nuDias = $("#nuDiasAnadir").val()
|
|
var lun = $("#LuAn")[0].checked
|
|
var Mar = $("#MaAn")[0].checked
|
|
var Mie = $("#MiAn")[0].checked
|
|
var Jue = $("#JuAn")[0].checked
|
|
var Vie = $("#ViAn")[0].checked
|
|
var motivo = $("#MotivoAnadir").val()
|
|
var Fei = $("#fechaAnadirTeletrabajoIni").val()
|
|
var Fef = $("#fechaAnadirTeletrabajoFin").val()
|
|
|
|
var htmlRespuesta = ""
|
|
var fechaInicio = new Date($('#fechaAnadirTeletrabajoIni').val())
|
|
fechaInicio = ((fechaInicio.getTime() * 10000) + 621355968000000000);
|
|
var fechaFinal = new Date($('#fechaAnadirTeletrabajoFin').val())
|
|
fechaFinal = ((fechaFinal.getTime() * 10000) + 621355968000000000);
|
|
|
|
if (fechaInicio > fechaFinal) {
|
|
htmlRespuesta = "<p style='color:red;font-weight:bold'>La fecha de inicio del tramo debe ser anterior a la de final</p>"
|
|
$("#mesajeTeletrabajo").val(htmlRespuesta)
|
|
return
|
|
}
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/gestionTeletrabajo.aspx/ModTele",
|
|
data: '{"id":"' + idtt + '","excepcion":"' + excepcion + '","nuDias":"' + nuDias + '","lunes":"' + lun + '","martes":"' + Mar + '","miercoles":"' + Mie + '", "jueves": "' + Jue + '","viernes":"' + Vie + '","motivo":"' + motivo + '","Fei":"' + Fei + '","Fef":"' + Fef + '"}',
|
|
contentType: "application/json; charset=utf-8",
|
|
async: true,
|
|
success: function (result) {
|
|
if (result.d != "") {
|
|
var resultado = JSON.parse(result.d.Result)
|
|
if (resultado.resultado == "0") {
|
|
CambiarMes(+0)
|
|
var htmlResult = "<p style='color:green;font-weight: bold; text-align:center;width:100%'>" + resultado.mensaje + "</p>"
|
|
cerrarDespTeletrabajo()
|
|
CerrarDespConfirmar()
|
|
//vaciarDespTeletrabajo()
|
|
$("#mensajeTeletrabajo2").html(htmlResult)
|
|
}
|
|
else {
|
|
var htmlResult = "<p style='color:red;font-weight: bold; text-align:center;width:100%'>" + resultado.mensaje + "</p>"
|
|
$("#mensajeTeletrabajo").html(htmlResult)
|
|
}
|
|
}
|
|
},
|
|
error: function (result) {
|
|
CerrarDespConfirmar()
|
|
cerrarDespTeletrabajo()
|
|
alert('error occured');
|
|
},
|
|
|
|
});
|
|
}
|
|
else if (modo == "ELIMINAR") {
|
|
$.ajax({
|
|
type: "post",
|
|
url: "/gestionTeletrabajo.aspx/DelTele",
|
|
data: '{"id":"' + idtt + '"}',
|
|
contentType: "application/json; charset=utf-8",
|
|
async: true,
|
|
success: function (result) {
|
|
if (result.d != "") {
|
|
var resultado = JSON.parse(result.d.Result)
|
|
if (resultado.resultado == "0") {
|
|
CambiarMes(+0)
|
|
var htmlResult = "<p style='color:green;font-weight: bold; text-align:center;width:100%'>" + resultado.mensaje + "</p>"
|
|
cerrarDespTeletrabajo()
|
|
//vaciarDespTeletrabajo()
|
|
$("#mensajeTeletrabajo2").html(htmlResult)
|
|
}
|
|
else {
|
|
var htmlResult = "<p style='color:red;font-weight: bold; text-align:center;width:100%'>" + resultado.mensaje + "</p>"
|
|
$("#mensajeTeletrabajo").html(htmlResult)
|
|
}
|
|
}
|
|
},
|
|
error: function (result) {
|
|
cerrarDespTeletrabajo()
|
|
alert('error occured');
|
|
},
|
|
|
|
});
|
|
}
|
|
}
|
|
function PopupConfirmarEdicion(id) {
|
|
var html = ""
|
|
html += "<div style='background-color:white;padding:20px; display:flex; flex-direction:column;gap:10px;max-height:420px;'>" +
|
|
"<p style=' text-align:center'>¿Esta seguro/a de editar este tramo de teletrabajo? las picadas ya efectuadas en este tramo se mantendrán</p>" +
|
|
"<div style='gap: 10px; display: flex;justify-content: right;'><button type='button' class='btnAzul' onclick='ConfirmarTeletrabajo(\"CREAR/EDICION\","+id+")'>Confirmar</button>" +
|
|
"<button type='button' class='btnGris' onclick='CerrarDespConfirmar()'> Cancelar</button></div></div></div>"
|
|
$("#desplegableConfirmarTeletrabajo").html(html)
|
|
$("#desplegableConfirmarTeletrabajo").css("display", "flex")
|
|
$("#desplegableConfirmarTeletrabajo").css("justify-content", "center")
|
|
$("#desplegableConfirmarTeletrabajo").css("align-items", "center")
|
|
}
|
|
function CerrarDespConfirmar() {
|
|
$("#desplegableConfirmarTeletrabajo").html("")
|
|
$("#desplegableConfirmarTeletrabajo").css("display", "none")
|
|
}
|
|
</script>
|
|
|
|
</asp:Content>
|