EVOLUTION-MANAGER

Edit File: crear-noticias.js

var textareaco = document.getElementById("myTextareacont");
var contador = document.getElementById("charcontador");

var contenedor_imagenes = [];
var sorts = [];

// Establece el número máximo de caracteres permitidos
//var maxLength = 250;

var maxLengthcon = 10000
/* Agrega un listener para el evento input
textarea.addEventListener("input", function() {
    // Obtiene el número de caracteres actuales
    var currentLength = textarea.value.length;
    
    // Actualiza el contador de caracteres restantes
    counter.textContent = maxLength - currentLength;
    
    // Si se excede el límite, recorta el contenido del textarea
    if (currentLength > maxLength) {
        textarea.value = textarea.value.slice(0, maxLength);
        counter.textContent = 0;
    }
});*/

//Agrega un listener para el evento input
// textareaco.addEventListener("input", function () {
//     // Obtiene el número de caracteres actuales
//     var currentLength = textareaco.value.length;

//     // Actualiza el contador de caracteres restantes
//     contador.textContent = maxLengthcon - currentLength;

//     // Si se excede el límite, recorta el contenido del textarea
//     if (currentLength > maxLengthcon) {
//         textareaco.value = textareaco.value.slice(0, maxLengthcon);
//         contador.textContent = 0;

//     }
// });

new Sortable(documentos_cargados_imagenes, {
    handle: '.vista-archivos',
    animation: 150,
    ghostClass: 'background-class',
    store: {
        set: function (sortable) {
            sorts = sortable.toArray();
        }
    }
});

if (document.getElementById('quill-editor-area')) {
    var editor = new Quill('#quill-editor', {
        theme: 'snow'
    });
    var quillEditor = document.getElementById('quill-editor-area');
    editor.on('text-change', function () {
        quillEditor.value = editor.root.innerHTML;
    });

quillEditor.addEventListener('input', function () {
        editor.root.innerHTML = quillEditor.value;
    });

quillEditor_contenido.addEventListener('input', function () {
        editor_contenido.root.innerHTML = quillEditor_contenido.value;
    });

function resetear_contenido() {
        editor_contenido.root.innerHTML = "";
        quillEditor_contenido.value = "";
    }
}

function limitarCaracteres() {
    var campo = document.getElementById("editor");
    var contador = document.getElementById("charCount");
    var maxCaracteres = 250; // Cambia este valor al máximo de caracteres permitidos

var texto = campo.textContent;

if (texto.length > maxCaracteres) {
        //campo.textContent = texto.substring(0, maxCaracteres);
        //texto = campo.textContent; // Actualizar texto después de truncarlo

}

contador.textContent = + (maxCaracteres - texto.length);
    console.log(texto.length);
}

// Esperar a que el DOM esté completamente cargado
// document.addEventListener('DOMContentLoaded', function() {
//     // Agregar el evento de pegado al elemento con ID "editor"
//     document.getElementById("editor").addEventListener('paste', function(event) {
//         // Prevenir la acción predeterminada de pegar
//         event.preventDefault();
//         var contador = document.getElementById("charCount");
//         var campo = document.getElementById("editor");
//         var texto = campo.textContent;
//         var maxCaracteres = 250;
//         // Obtener el texto que se está pegando
//         var pastedText = (event.clipboardData || window.clipboardData).getData('text');

//         // Hacer algo con el texto pegado, por ejemplo, mostrarlo en la consola
//         contador.textContent = + (maxCaracteres - texto.length);
//         console.log(pastedText);
//     });
// });

// Evento keydown para evitar escribir más allá del límite
// document.getElementById("editor").addEventListener("keydown", function (event) {
//     var campo = document.getElementById("editor");
//     var contador = document.getElementById("charCount");
//     var maxCaracteres = 250; // Cambia este valor al máximo de caracteres permitidos

//     if (campo.textContent.length >= maxCaracteres && event.key.length === 1) {
//         event.preventDefault();
//     }
//     var texto = campo.textContent;
//     contador.textContent = + (maxCaracteres - texto.length);
//     console.log("2A-"+texto.length);
// });

var input = document.getElementById("cargar");
var show_archivos = document.getElementById("documentos-cargados");

input.addEventListener("change", (e) => {

const fileshow = (filename, filetype) => {

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

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.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);

var borrar = document.getElementById("borrar")
        borrar.addEventListener("click", () => {
            show_archivos.innerHTML = `<h3 class="subidos-exito">Documentos subidos</h3>`;
            e.target.value = "";
        });

}

if (e.target.files[0]) {
        let filename = e.target.files[0].name;
        let filetype = e.target.value.split(".").pop();
        //
        const file = input.files[0];
        const reader = new FileReader();
        reader.readAsArrayBuffer(file);
        var porcentaje;

const progressBar = document.getElementById('progressBar');
        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);
        }
    } else {
        show_archivos.innerHTML = `<h3 class="subidos-exito">Documentos subidos</h3>`;
        input.value = "";
    }
});

const input_imagenes = document.getElementById("cargar-imagenes");
const show_archivos_imagenes = document.getElementById("documentos_cargados_imagenes");

input_imagenes.addEventListener("change", (e) => {
    if (e.target.files[0]) {
        let filename = e.target.files[0].name;
        let filetype = e.target.value.split(".").pop();

if (contenedor_imagenes.length > 0) {
            if (comprobar_imagenes(filename)) {
                mensaje_de_alerta("error", "Ya existe una imagen con el mismo nombre");
            } else {
                if (contenedor_imagenes.length == 10) {
                    input_imagenes.value = "";
                    mensaje_de_alerta("error", "Solo puede subir un máximo de 10 imagenes");
                } else {
                    contenedor_imagenes.push(e.target.files[0]);

const file = input_imagenes.files[0];
                    const reader = new FileReader();
                    reader.readAsArrayBuffer(file);
                    var porcentaje;

const progressBar = document.getElementById('progressBar-imagenes');
                    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_imagenes(filename, filetype);
                    }
                }
            }
        } else {
            contenedor_imagenes.push(e.target.files[0]);

const file = input_imagenes.files[0];
            const reader = new FileReader();
            reader.readAsArrayBuffer(file);
            var porcentaje;

const progressBar = document.getElementById('progressBar-imagenes');
            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_imagenes(filename, filetype);
            }
        }
    } else {
        input_imagenes.value = "";
    }
});

function comprobar_imagenes(nombre) {
    for (var z = 0; z < contenedor_imagenes.length; z++) {
        if (contenedor_imagenes[z].name == nombre)
            return true;
    }
    return false;
}

const fileshow_imagenes = (filename, filetype) => {
    const show = document.createElement("div");
    show.classList.add("mostrar-archivos");
    show.id = filename;
    show.setAttribute('data-id', filename);

const left = document.createElement("div");
    left.classList.add("left");

const span = document.createElement("span");
    span.classList.add("tipo-archivo");
    span.innerHTML = filetype;
    left.append(span);

const titulo = document.createElement("h3");
    titulo.innerHTML = filename;
    left.append(titulo);
    show.append(left);

const right = document.createElement("div");
    right.setAttribute('onclick', 'borrar_archivo("' + filename + '")');
    right.classList.add("right");
    show.append(right);

const equis = document.createElement("span");
    equis.innerHTML = "&#215;";
    right.append(equis);

show_archivos_imagenes.append(show);
}

function borrar_archivo(nombre) {
    // Eliminar el archivo del array contenedor_imagenes
    for (var x = 0; x < contenedor_imagenes.length; x++) {
        if (contenedor_imagenes[x].name == nombre) {
            contenedor_imagenes.splice(x, 1);
            x--;  // Ajustar el índice después de eliminar un elemento
        }
    }

// Eliminar el archivo del array sorts
    for (var i = 0; i < sorts.length; i++) {
        if (sorts[i] == nombre) {
            sorts.splice(i, 1);
            i--;  // Ajustar el índice después de eliminar un elemento
        }
    }

// Eliminar el elemento del DOM si existe
    var elemento = document.getElementById(nombre);
    if (elemento) {
        elemento.remove();
    }
}

document.getElementById("crear-noticia").addEventListener("submit", (event) => {
    event.preventDefault();

var titulo = document.getElementById("quill-editor-area").value;
    var contenido = document.getElementById("quill-editor-area-contenido").value;
    var fecha = document.getElementById("fecha-noticia").value;
    if (fecha != "") {
        var fecha_separada = new Date(fecha);
        var anio = fecha_separada.getFullYear();
        var mes = new Intl.DateTimeFormat('es-ES', { month: 'long' }).format(fecha_separada);
    }
    var archivo = $('#cargar')[0].files[0];

// if (titulo.length < 12 || contenido.length < 12 || fecha == "" || anio == "" || mes == "" || archivo == "" || contenedor_imagenes.length == 0) {
    //     mensaje_de_alerta("error", "Complete todos los campos");
    // } else {

const loadingModal = document.getElementById('loadingModal');
    loadingModal.style.display = 'block';

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

var formData = new FormData();
    formData.append('titulo', titulo);
    formData.append('contenido', contenido);
    formData.append('fecha', fecha);
    formData.append('anio', anio);
    formData.append('mes', mes);
    formData.append('documento', archivo);

for (var x = 0; x < contenedor_imagenes.length; x++) {
        formData.append('imagenes[]', contenedor_imagenes[x]);
        if (sorts.length > 0) {
            for (var i = 0; i < sorts.length; i++) {
                if (sorts[i] == contenedor_imagenes[x].name) {
                    formData.append('orden[]', i + 1);
                    break;
                }
            }
        } else
            formData.append('orden[]', 1 + x);
    }

$.ajax({
        url: "/administrador/crud-boletin/crear-noticia",
        method: "POST",
        enctype: "multipart/form-data",
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
            if (response.success) {
                loadingModal.style.display = 'none';
                resetear_area();
                resetear_contenido();
                document.getElementById("fecha-noticia").value = "";
                document.getElementById("cargar").value = "";
                contenedor_imagenes = [];
                show_archivos_imagenes.innerHTML = "";
                show_archivos.innerHTML = "";
                if (sorts.length > 0)
                    sorts = [];
                mensaje_de_alerta("success", response.message);
            } else {
                loadingModal.style.display = 'none';
                var errores = {
                    titulo: "",
                    contenido: "",
                    fecha: "",
                    documento: "",
                    imagenes: ""
                };
                // Limpiar los campos de error antes de agregar nuevos errores
                Object.keys(errores).forEach(function (key) {
                    document.getElementById("error-validacion-" + key).innerHTML = "";
                });
                if (response.error_validacion) {
                    $.each(response.error_validacion, function (key, value) {
                        const errorKey = Object.keys(errores).find(key => value[0].includes(key));
                        if (errorKey) {
                            errores[errorKey] += '<p class="alert alert-danger">' + value[0] + '</p>';
                        }
                    });

// Asignar errores a los elementos correspondientes en el DOM
                    Object.keys(errores).forEach(function (key) {
                        if (errores[key] !== "") {
                            document.getElementById("error-validacion-" + key).innerHTML = errores[key];
                        }
                    });
                    mensaje_de_alerta("error", "Error de validación, verifique que la información enviada sea la correcta");
                }
                if (response.error) {
                    mensaje_de_alerta("error", response.error);
                    console.log(response.error);
                }
            }
        },
        error: function (xhr) {
            loadingModal.style.display = 'none';
            var message = JSON.parse(xhr.responseText);
            console.log(message.message);
            mensaje_de_alerta("error", message.message);
        }
    });
    // }
});

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