EVOLUTION-MANAGER

Edit File: crud-lotaip.js

const li = document.querySelectorAll('.li');
const bloque = document.querySelectorAll('.bloque');
const lotaip = window.appData.lotaip;
var contenedor_archivos = [];
var nombre_orden = [];

li.forEach((cadaLi, i) => {
    li[i].addEventListener('click', () => {
        li.forEach((cadaLi, i) => {
            li[i].classList.remove('activo');
            bloque[i].classList.remove('activo');
        })
        li[i].classList.add('activo');
        bloque[i].classList.add('activo');
    });
});

function delete_button(event, id, ide, mes) {
    event.preventDefault();
    Swal.fire({
        title: "Esta seguro de borrar este registro?",
        text: "Si lo hace no podra recuperarlo!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Si, borralo!"
    }).then((result) => {
        if (result.isConfirmed) {
            const loadingModal = document.getElementById('loadingModal');
            loadingModal.style.display = 'block';

$.ajaxSetup({
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
                }
            });

$.ajax({
                url: "/administrador/crud-lotaip/eliminar-lotaip/" + id + "/" + ide,
                method: "DELETE",
                enctype: "multipart/form-data",
                processData: false,
                contentType: false,
                success: function (response) {
                    if (response.success) {
                        loadingModal.style.display = 'none';
                        document.getElementById(mes + ide).remove();
                        for (var x = lotaip.length - 1; x >= 0; x--) {
                            if (lotaip[x]["id_lotaipvigente"] == ide && lotaip[x]["id_lotaip"] == id) {
                                lotaip.splice(x, 1);
                            }
                        }
                        mensaje_de_alerta("success", response.message);
                    } else {
                        loadingModal.style.display = 'none';
                        if (response.error) {
                            mensaje_de_alerta("error", response.error);
                        }
                    }
                },
                error: function (xhr) {
                    loadingModal.style.display = 'none';
                    var message = JSON.parse(xhr.responseText);
                    mensaje_de_alerta("error", message.message);
                }
            });
        }
    });
}

function editar_lotaip(id, ide, titulo) {

lotaip.forEach(item => {
        if (item.id_lotaipvigente == id && item.id_lotaip == ide) {
            nombre_orden.push([item.id_datos_lotaip, item.posicion]);
        }
    });

let contenido = document.getElementById('ventana-formulario');
    contenido.classList.add('show');
    contenido.innerHTML =
        `<div class="opciones-edicion">
        <p style="text-align: center;">`+ titulo + `</p>
        <div class="tab-box">
            <button class="tab-btn activo">Pdf</button>
            <button class="tab-btn">Datos</button>
            <button class="tab-btn">Metadatos</button>
            <button class="tab-btn">Diccionario</button>
            <div class="linea"></div>
        </div>
        <div class="content-box">
            <div class="content activo">
                <div class="ventana-modal">
                    <h2 class="titulo-area-subir">Cargar archivo</h2>
                    <input name="cargar-pdf" type="file" id="cargar-pdf" onchange="cambios_id(this, 'pdf');" accept=".pdf" hidden>
                    <label for="cargar-pdf" class="cargar_archivo">
                        <span><i class="icon-upload-cloud"></i></span>
                        <p>Click para Subir archivo</p>
                        <div class="progressBar" id="progressBar-pdf"></div>
                    </label>
                    <div class="vista-archivos" id="documentos-cargados-pdf">
                        <h3 class="subidos-exito">Documentos subidos</h3>
                    </div>
                </div>
                <div id="message-error-pdf"></div>
            </div>
            <div class="content">
                <div class="ventana-modal">
                    <h2 class="titulo-area-subir">Cargar archivo</h2>
                    <input name="cargar-datos" type="file" id="cargar-datos" onchange="cambios_id(this, 'datos');" accept=".csv" hidden>
                    <label for="cargar-datos" class="cargar_archivo">
                        <span><i class="icon-upload-cloud"></i></span>
                        <p>Click para Subir archivo</p>
                        <div class="progressBar" id="progressBar-datos"></div>
                    </label>
                    <div class="vista-archivos" id="documentos-cargados-datos">
                        <h3 class="subidos-exito">Documentos subidos</h3>
                    </div>
                </div>
                <div id="message-error-datos"></div>
            </div>
            <div class="content">
                <div class="ventana-modal">
                    <h2 class="titulo-area-subir">Cargar archivo</h2>
                    <input name="cargar-metadatos" type="file" id="cargar-metadatos" onchange="cambios_id(this, 'metadatos');" accept=".csv" hidden>
                    <label for="cargar-metadatos" class="cargar_archivo">
                        <span><i class="icon-upload-cloud"></i></span>
                        <p>Click para Subir archivo</p>
                        <div class="progressBar" id="progressBar-metadatos"></div>
                    </label>
                    <div class="vista-archivos" id="documentos-cargados-metadatos">
                        <h3 class="subidos-exito">Documentos subidos</h3>
                    </div>
                </div>
                <div id="message-error-metadatos"></div>
            </div>
            <div class="content">
                <div class="ventana-modal">
                    <h2 class="titulo-area-subir">Cargar archivo</h2>
                    <input name="cargar-diccionario" type="file" id="cargar-diccionario" onchange="cambios_id(this, 'diccionario');" accept=".csv" hidden>
                    <label for="cargar-diccionario" class="cargar_archivo">
                        <span><i class="icon-upload-cloud"></i></span>
                        <p>Click para Subir archivo</p>
                        <div class="progressBar" id="progressBar-diccionario"></div>
                    </label>
                    <div class="vista-archivos" id="documentos-cargados-diccionario">
                        <h3 class="subidos-exito">Documentos subidos</h3>
                    </div>
                </div>
                <div id="message-error-diccionario"></div>
            </div>
        </div>
        <div class="orden-ubicacion-opc">
            <button class="guardar-lotaip-edit" onclick="guardar_edicion('`+ id + `', '` + ide + `');">Guardar Cambios</button>
            <div class="cerrar-ventana-modal" onclick="cerrar_ventana();">Cerrar</div>
        </div>
    </div>`;

const tabs = document.querySelectorAll('.tab-btn');
    const all_content = document.querySelectorAll('.content');

tabs.forEach((tab, index) => {
        tab.addEventListener('click', (e) => {
            tabs.forEach(tab => { tab.classList.remove('activo') });
            tab.classList.add('activo');

var linea = document.querySelector('.linea');
            linea.style.width = e.target.offsetWidth + "px";
            linea.style.left = e.target.offsetLeft + "px";

all_content.forEach(content => { content.classList.remove('activo') });
            all_content[index].classList.add('activo');
        });
    });
}

function cambios_id(e, nombre) {
    var input = document.getElementById("cargar-" + nombre);
    var show_archivos = document.getElementById("documentos-cargados-" + nombre);

const fileshow = (filename, filetype) => {

let container = document.createElement('div');
        container.className = 'mostrar-archivos';
        container.id = nombre;

let leftdiv = document.createElement('div');
        leftdiv.className = 'left';

let filespan = document.createElement('span');
        filespan.className = 'tipo-archivo';
        filespan.textContent = filetype;

let fileh3 = document.createElement('h3');
        fileh3.textContent = filename;

leftdiv.appendChild(filespan);
        leftdiv.appendChild(fileh3);

let rightdiv = document.createElement('div');
        rightdiv.setAttribute('onclick', 'borrar_archivo("' + nombre + '")');
        rightdiv.className = 'right';
        rightdiv.id = 'borrar';

let filespan2 = document.createElement('span');
        filespan2.innerHTML = '&#215;';

rightdiv.appendChild(filespan2);
        container.appendChild(leftdiv);
        container.appendChild(rightdiv);

show_archivos.innerHTML = '';
        show_archivos.appendChild(container);

}

if (e.files[0]) {
        let filename = e.files[0].name;
        let filetype = e.value.split(".").pop();

if (contenedor_archivos.length > 0) {
            for (var x = contenedor_archivos.length - 1; x >= 0; x--) {
                if (contenedor_archivos[x][1] == nombre) {
                    contenedor_archivos.splice(x, 1);
                }
            }            
        }
        contenedor_archivos.push([e.files[0], nombre]);
        //
        const file = input.files[0];
        const reader = new FileReader();
        reader.readAsArrayBuffer(file);
        var porcentaje;

const progressBar = document.getElementById('progressBar-' + nombre);
        progressBar.classList.add('progressBarshow');

reader.onprogress = (e) => {
            porcentaje = Math.round((e.loaded / e.total) * 100);
            progressBar.style.width = porcentaje + '%';
            progressBar.innerHTML = porcentaje + "%"
        }

reader.onload = (e) => {
            progressBar.classList.remove('progressBarshow');
            progressBar.style.width = '0%';
            fileshow(filename, filetype);
            input.value = "";
        }
    } else {
        show_archivos.innerHTML = `<h3 class="subidos-exito">Documentos subidos</h3>`;
        input.value = "";
    }
}

function guardar_edicion(id_vigente, id_lotaip) {
    if (contenedor_archivos.length > 0) {
        const loadingModal = document.getElementById('loadingModal');
        loadingModal.style.display = 'block';

$.ajaxSetup({
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
            }
        });

$.ajax({
            url: "/administrador/crud-lotaip/actualizar-lotaip",
            method: "POST",
            enctype: "multipart/form-data",
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                if (response.success) {
                    loadingModal.style.display = 'none';
                    cerrar_ventana();
                    for (var y = 0; y < response.ides.length; y++) {
                        var cambio = document.getElementById(response.ides[y]);
                        if (response.id_archivo) {
                            let url = new URL(response.ruta + response.id_archivo[y] + "/view");
                            cambio.href = url;
                            cambio.target = "_blank";
                            var icono = cambio.querySelector('i');
                            if (icono) {
                                icono.style.color = "black";
                            }
                        }
                    }
                    mensaje_de_alerta("success", response.message);
                } else {
                    loadingModal.style.display = 'none';
                    if (response.error_validacion) {
                        mensaje_de_alerta("error", "Error de Validación, comprueba los archivos que intenta subir");
                    }
                    if (response.error) {
                        mensaje_de_alerta("error", response.error);
                    }
                }
            },
            error: function (xhr) {
                loadingModal.style.display = 'none';
                var message = JSON.parse(xhr.responseText);
                mensaje_de_alerta("error", message.message);
            }
        });
    } else {
        mensaje_de_alerta("error", "Suba un archivo para guardar los cambios");
    }
}

function borrar_archivo(nombre) {
    // Encuentra el índice del archivo que coincida con el nombre
    var index = contenedor_archivos.findIndex(archivo => archivo[1] == nombre);

if (index !== -1) {
        // Elimina el archivo del arreglo contenedor_archivos y nombre_orden
        contenedor_archivos.splice(index, 1);
        // nombre_orden.splice(index, 1);
    }
    // Elimina el elemento del DOM si existe
    var archivoElement = document.getElementById(nombre);
    if (archivoElement) {
        archivoElement.remove();
    }

// Actualiza el contenido del contenedor de documentos cargados si existe
    var documentosCargadosElement = document.getElementById('documentos-cargados-' + nombre);
    if (documentosCargadosElement) {
        documentosCargadosElement.innerHTML = `<h3 class="subidos-exito">Documentos subidos</h3>`;
    }
}

function cerrar_ventana() {
    contenedor_archivos = [];
    nombre_orden = [];
    var modal = document.getElementById("ventana-formulario");
    modal.innerHTML = "";
    modal.classList.remove("show");
}

function mensaje_de_alerta(icon, title) {
    Swal.fire({
        icon: icon,
        title: title,
        showConfirmButton: true,
    });
}