sgi/apsa/js/midisponibilidad.js

/* 
 * Para crear horario de administrativos
 */
$(document).ready(function(){
    loadHorarioEdicion();
    $('#modal_confirm').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        var id = button.parents(".bloque-clase").data("id_obj");
        $("#id_borrar").val(id);
    });

    $('.editable').click(function(){//abre modal para crear
        $("#errorBox").collapse('hide');
        $("#errorBox_text").html("");
        
        var dia = getDiaNombre($(this).data("dia"));
        var hora = $(this).data("hora");
        if(hora < 10) hora = "0"+hora;
        var min = $(this).data("fraccion");
        if(min < 10) min = "0"+min;

        $('#dia').val($(this).data("dia"));
        $('#hora').val(hora+":"+min);

        $('#fecha_horario').html(dia+" - "+hora+":"+min+" hrs.");

        $("#submitBtn").data('tipo', 1);
        $("#modalLabel").html("Crear Horario");
        $('#duracion').removeClass('is-invalid');
        $('#modal').modal('show');
    });
    
    $('#submitBtn').click(function(){
        //Crea Obj JSON y elemento HTML
        if(validaDuracion(-1, $('#dia').val(), $('#hora').val(), parseFloat($('#duracion').val())*60)){

            var horario = {
                id_obj: id_obj,
                id_db:0,
                dia: parseInt($('#dia').val()),
                dia_orig: parseInt($('#dia').val()),
                hora: $('#hora').val(),
                duracion: parseFloat($('#duracion').val())*60,
                editable: true,
                color: "#f0b6c0"
            };

            if(guardaHorario(1, horario)){
                horariosObj.push(horario);
                //Crea horario HMTL
                creaHorarioHTML(id_obj, getX(horario.dia), getY(horario.hora), getAlto(horario.duracion) ,horario.color, "#bloque-horarios");
                id_obj++;
            }

            $('#modal').modal('hide');
        }//fin duración valida
        else{
            $("#avanzadoBox").collapse('show');
            $('#duracion').addClass('is-invalid');
        }
    });
});

function validaDuracion(pos, dia, hora_ini, duracion){//valida que la materia no tenga conflictos con la siguiente y que esté dentro del límite del horario
    var horaObjIni = new Date();
    var horaObjFin;
    var horaArr = hora_ini.split(":");
    horaObjIni.setHours(horaArr[0]);
    horaObjIni.setMinutes(horaArr[1]);
    horaObjIni.setSeconds(0);
    
    horaObjFin = new Date(horaObjIni.getTime());
    horaObjFin.setMinutes(horaObjFin.getMinutes() + parseInt(duracion));
    
    //Obtiene última hora de clase
    var fechaLimite = new Date();
    fechaLimite.setHours(parseInt($('.hora').last().data('hora')) + 1);
    fechaLimite.setMinutes(0);
    fechaLimite.setSeconds(0);
    
    if( Date.parse(horaObjFin) > Date.parse(fechaLimite)){
        return false;
    }
    
    return validaHorasBloque(pos, dia, horaObjIni, horaObjFin);//valida si choca con el siguiente
}

function validaHorasBloque(pos, dia, horaObjIni, horaObjFin){
    for(var i=0; i < horariosObj.length; i++){
        var horaArr = horariosObj[i].hora.split(":");
        var horaClaseInicio = new Date();
        horaClaseInicio.setHours(horaArr[0]);
        horaClaseInicio.setMinutes(horaArr[1]);
        horaClaseInicio.setSeconds(0);
        
        //Objeto leído no es el objeto actual, mismo día, hora de fin del objeto actual choca con hora de inicio objeto anterior
        if(pos != i && parseInt(horariosObj[i].dia) == parseInt(dia) && Date.parse(horaClaseInicio) < Date.parse(horaObjFin) && Date.parse(horaClaseInicio) > Date.parse(horaObjIni)){
            return false;//Si existe, no es válido
        }
    }
    return true;//no existe, es válido
}

//funcion para guardar por ajax información
function guardaHorario(nuevo, objClase){
    _editable = false;
    var url = './action/midisponibilidad_insert.php';
    if(nuevo != 1){
        url = './action/midisponibilidad_update.php';
    }

    var state = false;
    $.ajax({
        url:  url,
        type: 'POST', 
        dataType: 'json',
        async: false,
        data: { json: JSON.stringify(objClase)},
        beforeSend: function(x) {
            if (x && x.overrideMimeType) {
                x.overrideMimeType("application/j-son;charset=UTF-8");
            }
        },
        success: function(result) {
            if(result["error"]!= "" &&  result["error"] !== undefined){
                $("#errorBox").collapse('show');
                $("#errorBox_text").html("Error al guardar el horario.<br>"+result["error"]);
                $('#messageBox')[0].scrollIntoView({ block: "end" });
                state = false;
            }else{
                state = true;
                if(nuevo == 1){
                    objClase.id_db = result["id"];
                }
            }
            
        },
        error: function(jqXHR, textStatus, errorThrown ){
            $("#errorBox").collapse('show');
            $("#errorBox_text").html(errorThrown);
            $('#messageBox')[0].scrollIntoView({ block: "end" });
            state = false;
        }
    });//ajax
    _editable = true;
    return state;
}

function loadHorarioEdicion(){
    $('.bloque-clase').remove();
    horariosObj = [];
    id_obj = 0;
    //carga horarios y crea bloques
    $.ajax({
        url:  './action/midisponibilidad_select.php',
        type: 'POST', 
        dataType: 'json',
        //data: { autorizacion: _horarioEstado},
        success: function(result) {
            if(result["error"]!= "" &&  result["error"] !== undefined){
                console.log("Ocurrió un error de load");
                $("#errorBox").collapse('show');
                $("#errorBox_text").html(result["error"]);
                $('#messageBox')[0].scrollIntoView({ block: "end" });
            }else{
                var i, j;
                for(i = 0; i< result["horario"].length; i++){
                    
                    var horario = {
                        id_obj: id_obj,
                        id_db: parseInt(result["horario"][i]["id"]),
                        dia: parseInt(result["horario"][i]["dia"]),
                        dia_orig: parseInt(result["horario"][i]["dia"]),
                        hora: result["horario"][i]["hora"],
                        duracion: parseInt(result["horario"][i]["duracion"]),
                        color: result["horario"][i]["color"]
                    };
                    
                    horariosObj.push(horario);
                    
                    creaHorarioHTML(id_obj, getX(horario.dia), getY(horario.hora), getAlto(horario.duracion) ,horario.color, "#bloque-horarios");
                    
                    id_obj++;
                }//fin for
            }
            _editable = true;
        },
        error: function(jqXHR, textStatus, errorThrown ){
            $("#errorBox").collapse('show');
            $("#errorBox_text").html("Error al cargar horario.<br>"+errorThrown);
            $('#messageBox')[0].scrollIntoView({ block: "end" });
            _editable = true;
        }
    });//ajax
}

function creaHorarioHTML(id, posX, posY, alto, color, parentBox){//crea bloque HTML
    var edit_class = "";
    edit_class = "bloque-draggable ui-draggable ui-draggable-handle bloque-resizable";
    var nuevoHorario = '<div class="bloque-clase no-overflow '+edit_class+'" id="bloque_'+id+'" data-id_obj="'+id+'"\
                            style="top:'+posY+'px; left:'+posX+'px; background-color:'+color+'; height:'+alto+'px" >\
                            <div class="menu-wrapper">\
                                <div class="menu-flotante d-none">\
                                    <span class="float-right iconos" >\n\
                                        <span class="ing-basura ing-fw mx-1" aria-hidden="true" data-toggle="modal" data-target="#modal_confirm" title="Borrar bloque"></span>\
                                    </span>\
                                </div>\
                            </div>\
                        </div>';
    $(nuevoHorario).appendTo(parentBox);
    makeDraggable();
    makeResizable();
}

function makeDraggable() {
    $(".bloque-draggable").draggable({
        cursor: "move",
        containment:"#area-horario",
        grid: [_w, _h],
        stack: "#bloque-horarios div",
        revert : true,
        revertDuration: 0,
        start: function( event, ui ) { _drag = true; },
        drag: function( event, ui ) { $(this).find('.menu-flotante').addClass('d-none');},
        stop: function( event, ui ) {
            $(this).find('.menu-flotante').removeClass('d-none');
            //Valida que no colisione con otro objeto
            _drag = false;
            var error = false;
            var fechaObj = new Date();
            var horaArr;
            var objetoOrigen =[0,0,0];//x, y1, y2 (this)
            var objetoDestino =[0,0,0];//x, y1, y2
            var thisIndex = getIndexClase($(this).data("id_obj"));

            var top = ui.position.top;
            var left = ui.position.left;

            //Obtiene coordenadas de objeto actual
            objetoOrigen[0] = left;
            objetoOrigen[1] = top;
            objetoOrigen[2] = top + getAlto(horariosObj[thisIndex].duracion);

            for(var i=0; i < horariosObj.length; i++){
                if(horariosObj[i].id_obj != $(this).data("id_obj")){
                    fechaObj = new Date();
                    //no es el objeto actual, obtiene coordenadas
                    objetoDestino[0] = getX(horariosObj[i].dia);
                    objetoDestino[1] = getY(horariosObj[i].hora);
                    horaArr = horariosObj[i].hora.split(":");
                    fechaObj.setHours(horaArr[0]);
                    fechaObj.setMinutes(horaArr[1]);
                    fechaObj.setMinutes(fechaObj.getMinutes() + parseInt(horariosObj[i].duracion));
                    objetoDestino[2] = getY(fechaObj.getHours()+":"+fechaObj.getMinutes());

                    //valida si se sobreponen
                    if(objetoOrigen[0] == objetoDestino[0]){
                        if(
                            (objetoOrigen[1] >= objetoDestino[1] && objetoOrigen[1] < objetoDestino[2]) ||
                            (objetoDestino[1] >= objetoOrigen[1] && objetoDestino[1] < objetoOrigen[2])
                        ){//si se sobreponen, lo regresa a su posición anterior
                            //si son horario completo o si se enciman las fechas
                            $(this).draggable( "option", "revert", true );
                            error = true;
                            //alert("No se puede mover el horario.");
                        }
                    }
               }
            }

            if(!error){//no se sobreponen
                //Valida cuadricula
                top = Math.floor(top / _h)*_h;
                if(top < 0) top = 0;

                left = Math.floor(left / _w)*_w;
                if(left < 0) left = 0;
                //Actualiza objeto
                horariosObj[thisIndex].dia = getDia(left);
                horariosObj[thisIndex].hora = getHora(top)+":"+getMinutos(top);
                
                
               if(guardaHorario(0, horariosObj[thisIndex])){
                    $(this).css({top: top + "px", left: left + "px"});
                    horariosObj[thisIndex].dia_orig = horariosObj[thisIndex].dia;
                }else{
                    $(this).draggable( "option", "revert", true );
                    horariosObj[thisIndex].dia = horariosObj[thisIndex].dia_orig;
                }
            }
        }
    });
}

function makeResizable() {
    $(".bloque-resizable").resizable({
        containment:"#area-horario",
        maxWidth: _w,
        minWidth: 1,
        minHeight: _frac,
        grid: [_w, _h],
        handles: "s",
        autoHide: true,
        start: function( event, ui ) { _drag = true;},
        stop: function( event, ui ) {
            //Valida que no colisione con otro objeto
            _drag = false;
            var error = false;
            var thisIndex = getIndexClase($(this).data("id_obj"));
            
            var fechaObj = new Date();
            var horaArr;
            var objetoOrigen =[0,0,0];//x, y1, y2 (this)
            var objetoDestino =[0,0,0];//x, y1, y2
            
            var top = ui.position.top;
            var height = ui.size.height;
            var left = ui.position.left;

            //Obtiene coordenadas de objeto actual
            objetoOrigen[0] = left;
            objetoOrigen[1] = top;
            objetoOrigen[2] = top + height;
            
            for(var i=0; i < horariosObj.length; i++){
                if(horariosObj[i].id_obj != $(this).data("id_obj")){
                    fechaObj = new Date();
                    //no es el objeto actual, obtiene coordenadas
                    objetoDestino[0] = getX(horariosObj[i].dia);
                    objetoDestino[1] = getY(horariosObj[i].hora);
                    horaArr = horariosObj[i].hora.split(":");
                    fechaObj.setHours(horaArr[0]);
                    fechaObj.setMinutes(horaArr[1]);
                    fechaObj.setMinutes(fechaObj.getMinutes() + parseInt(horariosObj[i].duracion));
                    objetoDestino[2] = getY(fechaObj.getHours()+":"+fechaObj.getMinutes());

                    //valida si se sobreponen
                    if(objetoOrigen[0] == objetoDestino[0]){
                        if(
                            (objetoOrigen[2] > objetoDestino[1] && objetoOrigen[1] < objetoDestino[1])
                        ){//si se sobreponen, lo regresa a su posición anterior
                            //si son horario completo o si se enciman las fechas
                            $(this).css('height', ui.originalSize.height + 2);
                            error = true;
                            //alert("No se puede mover el horario.");
                        }
                    }
               }
            }
            
            if(!error){//no se sobreponen
                //Valida cuadricula
                height = Math.ceil(height / _h)*_h;

                //Actualiza objeto
                horariosObj[thisIndex].duracion = height/(_h*_frac) * 60;
                if(guardaHorario(0, horariosObj[thisIndex])){
                   $(this).css({height: height + "px"});
                   $(this).find(".tiempo").text(height/(_h*_frac));
//                   $(this).css('height', {height: (ui.originalSize.height) + "px"});
                }else{
                    ui.element.css('height', ui.originalSize.height + 2);
                }
            }else{
                
            }
        },
    });
}

function getIndexClase(idobj){//busca en qué posición del arreglo está el id del horario
    for(var i=0; i < horariosObj.length; i++){
        if(horariosObj[i].id_obj == idobj){
            return i;
        }
    }
    return -1;
}

$(document).on( "click", ".bloque-borra", function(event){
    var thisIndex = getIndexClase($("#id_borrar").val());
    
    $.ajax({
        url:  './action/midisponibilidad_delete.php',
        type: 'POST', 
        dataType: 'json',
        async: false,
        data: { json: JSON.stringify(horariosObj[thisIndex])},
        beforeSend: function(x) {
            if (x && x.overrideMimeType) {
                x.overrideMimeType("application/j-son;charset=UTF-8");
            }
        },
        success: function(result) {
            if(result["error"]!= "" &&  result["error"] !== undefined){
                $("#errorBox").collapse('show');
                $("#errorBox_text").html("Error al borrar el horario.");
                $('#messageBox')[0].scrollIntoView({ block: "end" });
            }else{
                $('#bloque_'+$("#id_borrar").val()).remove();
                var deletedObj = horariosObj.splice(thisIndex, 1);
            }
        },
        error: function(jqXHR, textStatus, errorThrown ){
            $("#errorBox").collapse('show');
            $("#errorBox_text").html(errorThrown);
            $('#messageBox')[0].scrollIntoView({ block: "end" });
        }
    });//ajax
    $(this).parents(".modal").modal("hide");
});