EVOLUTION-MANAGER

Edit File: editar-servicios.js

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

const servicio = window.appData.servicios;
const imagenes = window.appData.imagenes;
const preguntas = window.appData.preguntas;
var img_tiene = [], preguntas_tiene = [], img_eliminados = [], identificador = 0;

servicio.forEach(item => {
    identificador = item.id_servicios;
});

imagenes.forEach(item => {
    img_tiene.push([item.id_servi_imagenes, item.nombre_archivo, item.orden]);
});

preguntas.forEach(item => {
    preguntas_tiene.push([item.id_servi_datos, item.pregunta, item.respuesta, item.orden]);
});

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

new Sortable(preguntas_creadas_usuario, {
    handle: '.preguntas',
    animation: 150,
    ghostClass: 'background-class',
    store: {
        set: function (sortable) {
            sortsorden = sortable.toArray();
        }
    }
});

function maximo(campo, limite, id) {
    if (campo.value.length >= limite) {
        campo.value = campo.value.substring(0, limite);
    }
    document.getElementById(id).innerHTML = limite - campo.value.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';
        container.id = filename;
        container.setAttribute('data-id', filename);

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.setAttribute('onclick', 'borrar_img("' + filename + '")');
        rightdiv.id = 'borrar';

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

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

show_archivos.appendChild(container);
    }

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 (validar_nombreimagenes(filename)) {
                mensaje_de_alerta("error", "Esta intentando subir una imagen repetida");
            } 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.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 {
            contenedor_imagenes.push(e.target.files[0]);

//
            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 {
        input.value = "";
    }
});

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

var nombre_servicio = document.getElementById("nombre").value;
    var descripcion = document.getElementById("descripcion").value;

const textareasPreguntas = document.querySelectorAll('textarea[name="preguntas[]"]');
    const valoresPreguntas = [];

textareasPreguntas.forEach(textarea => {
        valoresPreguntas.push(textarea.value);
    });

const textareasRespuestas = document.querySelectorAll('textarea[name="respuestas[]"]');
    const valoresRespuesta = [];

textareasRespuestas.forEach(textarea => {
        valoresRespuesta.push(textarea.value);
    });

if (nombre_servicio != "" && descripcion != "" && (contenedor_imagenes.length > 0 || img_tiene.length > img_eliminados.length) && valoresPreguntas.length > 0) {
        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('_method', 'PUT');
        var contenedorPadre = document.getElementById('documentos_cargados');
        var hijos = contenedorPadre.getElementsByClassName('mostrar-archivos');

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

if (img_eliminados.length > 0){
 for (var i = 0; i < img_eliminados.length; i++){
 formData.append('eliminar_img[]', img_eliminados[i][0]);
 }
 }

for (var i = 0; i < hijos.length; i++) {
 for (var x = 0; x < img_tiene.length; x++) {
 if (img_tiene[x][1] == hijos[i].id) {
 formData.append('imagen_nuevoorden[]', img_tiene[x][0]);
 formData.append('orden_total[]', 1 + i);
 break;
 }
 }
 }

if (valoresPreguntas.length > 0) {
 for (var i = 0; i < valoresPreguntas.length; i++) {
 formData.append('pregunta[]', valoresPreguntas[i]);
 formData.append('respuesta[]', valoresRespuesta[i]);
 if (sortsorden.length > 0) {
 for (var x = 0; x < sortsorden.length; x++) {
 if (sortsorden[x] == valoresPreguntas[i]) {
 formData.append('orden_p[]', 1 + x);
 break;
 }
 }
 } else
 formData.append('orden_p[]', 1 + i);
 }
 }

$.ajax({
 url: "/administrador/crud-servicios/editar-servicio/"+identificador,
 method: "POST",
 enctype: "multipart/form-data",
 data: formData,
 processData: false,
 contentType: false,
 success: function (response) {
 if (response.success) {
 loadingModal.style.display = 'none';
 mensaje_de_alerta("success", response.message);
 } else {
 loadingModal.style.display = 'none';
 if (response.error_validacion) {
 console.log(response.error_validacion);
 mensaje_de_alerta("error", "Error de Validación");
 var nombre = "", descripcion = "", imagen = "", orden = "";
 var errores = response.error_validacion;
 $.each(errores, function (key, value) {
 if (value[0].includes("nombre"))
 nombre += '' + value[0] + '';
 if (value[0].includes("descripcion"))
 descripcion += '' + value[0] + '';
 if (value[0].includes("imagenes"))
 imagen += '' + value[0] + '';
 if (value[0].includes("orden"))
 orden += '' + value[0] + '';
 });
 if (nombre != "")
 document.getElementById("errors-message-nombre").innerHTML = nombre;
 if (descripcion != "")
 document.getElementById("errors-message-descripcion").innerHTML = descripcion;
 if (imagen != "")
 document.getElementById("errors-message-imagenes").innerHTML = imagen;
 if (orden != "")
 document.getElementById("errors-message-orden").innerHTML = orden;
 }
 if (response.error) {
 console.log(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", "Llene todos los campos solicitados");
 }
});

function validar_nombreimagenes(filename) {
 for (var x = 0; x < contenedor_imagenes.length; x++) {
 if (contenedor_imagenes[x].name == filename)
 return true;
 }
 return false;
}

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

function agregar_pregunta() {
    var enunciado = document.getElementById("enunciado").value;
    var respuesta = document.getElementById("respuesta").value;

if (enunciado != "" && respuesta != "") {
        const divPreguntas = document.createElement('div');
        divPreguntas.className = 'preguntas';
        divPreguntas.id = enunciado;
        divPreguntas.setAttribute('data-id', enunciado);

const h2 = document.createElement('h2');
        h2.innerHTML = enunciado;
        divPreguntas.appendChild(h2);

const p = document.createElement('p');
        p.innerHTML = respuesta;
        divPreguntas.appendChild(p);

const textareaPreguntas = document.createElement('textarea');
        textareaPreguntas.name = 'preguntas[]';
        textareaPreguntas.cols = 30;
        textareaPreguntas.rows = 10;
        textareaPreguntas.value = enunciado;
        textareaPreguntas.style.display = "none";
        divPreguntas.appendChild(textareaPreguntas);

const textareaRespuestas = document.createElement('textarea');
        textareaRespuestas.name = 'respuestas[]';
        textareaRespuestas.cols = 30;
        textareaRespuestas.rows = 10;
        textareaRespuestas.value = respuesta;
        textareaRespuestas.style.display = "none";
        divPreguntas.appendChild(textareaRespuestas);

const eliminarbtn = document.createElement('div');
        eliminarbtn.className = 'right ubicacion-eliminar';
        eliminarbtn.setAttribute('onclick', 'borrar_pregunta("' + enunciado + '")');
        eliminarbtn.id = 'borrar';

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

eliminarbtn.appendChild(filespan2);

divPreguntas.appendChild(eliminarbtn);

document.getElementById('preguntas_creadas_usuario').appendChild(divPreguntas);

document.getElementById("enunciado").value = "";
        document.getElementById("respuesta").value = "";

} else
        mensaje_de_alerta("error", "Llene la información requerida");
}