var cont_experiencia = 0; let cont_estudios = 0; let cont_tecnologia = 0; let cont_cargo = 0; const experiencias = []; const estudios = []; const tecnologias = []; let noValidateFlag = false; const postulaciones = []; var cont_referencias=0 ; const referencias= []; form = document.querySelector("form"); const depSelect = document.querySelector("#departamentos"); console.log("saddsa", bootstrap) const modalCargo = bootstrap.Modal.getOrCreateInstance(document.getElementById('cargoForm')) const modalExperiencia = bootstrap.Modal.getOrCreateInstance(document.getElementById('experienciaForm')) const modalTecnologia = bootstrap.Modal.getOrCreateInstance(document.getElementById('tecnologiaForm')) const modalEstudio = bootstrap.Modal.getOrCreateInstance(document.getElementById('estudioForm')) const modalReferencia = bootstrap.Modal.getOrCreateInstance(document.getElementById('referenciaForm')) //variable ciudades esta declarada en el jsp /*-----------------Definicion de funciones de poblacion de elementos y validaciones----------------------------------------*/ const formValidator = function () { 'use strict' // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.querySelectorAll('.needs-validation') var expForm = document.querySelector('#agregar-exp') // Loop over them and prevent submission Array.prototype.slice.call(forms) .forEach(function (form) { form.addEventListener('submit', function (event) { if (!form.checkValidity()) { event.preventDefault() event.stopPropagation() noValidateFlag = true; } form.classList.add('was-validated') }, false) }) } function fechasMaxMin(){ var today = new Date(); var dd = today.getDate()-1; var mm = today.getMonth() + 1; //January is 0! var yyyy = today.getFullYear(); if (dd < 10) { dd = '0' + dd; } if (mm < 10) { mm = '0' + mm; } today = yyyy + '-' + mm + '-' + dd; let fechaDesdeEstudio = document.querySelector("#fechaDesdeEstudio"); let fechaDesdeExperiencia = document.querySelector("#fechaDesdeExperiencia"); let fechaHastaEstudio = document.querySelector("#fechaHastaEstudio"); let fechaHastaExperiencia = document.querySelector("#fechaHastaExperiencia"); let fechaNacimiento = document.querySelector("#fechaNacimiento"); let fechas = [fechaDesdeEstudio,fechaDesdeExperiencia,fechaHastaEstudio,fechaHastaExperiencia,fechaNacimiento] fechas.forEach(fch => fch.addEventListener('keydown',()=>false))//no dejar cargar manualmente fechas fechaDesdeEstudio.setAttribute("max", today); fechaDesdeExperiencia.setAttribute("max", today); fechaNacimiento.setAttribute("max", today); fechaDesdeExperiencia.addEventListener("change", ()=>{ fechaHastaExperiencia.setAttribute("min", fechaDesdeExperiencia.value) }) fechaDesdeEstudio.addEventListener("change", ()=>{ fechaHastaEstudio.setAttribute("min", fechaDesdeEstudio.value) }) } function listarCiudades(depId){ const ciuAmostrar = ciudades.filter(c=>c.departamentoId==depId); const ciudad = document.querySelector("select[name=ciudadId]"); const frag = document.createDocumentFragment(); for (const ciu of ciuAmostrar) { const opt = document.createElement("option"); opt.value = ciu.id; opt.innerHTML = ciu.nombre; opt.setAttribute("data-departamentoId",ciu.departamentoId); frag.appendChild(opt) } ciudad.replaceChildren(frag); } function validarfecha(fechaDesde, fechaHasta){ let fechadehoy= new Date().toISOString().slice(0,10); if(fechaDesde>fechadehoy ){ return "la fecha desde no puede ser mayor a la fecha actual" ; } if(fechaHasta =! null && fechaHasta.trim().length >0 && fechaDesde>fechaHasta){ return "la fecha desde no puede ser mayor a la fecha hasta"; } return false } /*-----------------Tecnologia----------------------------------------*/ function agregarFieldTecnologia(){ //recoger del form const pairs = {}; const formtecn = document.querySelector("[name=tecnologia-form]"); const formData = new FormData(formtecn); //Validacion let returnFlag = false; let requiredValues = ["nombre", "nivel"] formData.forEach((value, key)=>{ if(requiredValues.includes(key) && value==="" && returnFlag == false){ console.log(key, value) returnFlag = true; } }); if(returnFlag===true){ let message = "Rellene " for(let i=0;i option[value="'+pairs["tecnologia-id"]+'"]').innerHTML} tecnologias[cont_tecnologia]["nivel"]=pairs.nivel //tecnologias[cont_tecnologia] = pairs; formtecn.reset(); document.querySelector("#tecnologia-nombre").classList.add('d-none') //imprimir lista actualizada const div = document.querySelector("#tecnologias") const div1 = document.createElement('div'); console.log(tecnologias[0]) let content1='' for (let index = 0; index < tecnologias.length; index++) { const tecn = tecnologias[index]; if(tecn==null) continue; content1 += `
${tecn.tecnologia.nombre} ( ${tecn.nivel} )  
` } //content1 += "" div.innerHTML = content1 //div.innerHTML = ''; //div.appendChild(div1); cont_tecnologia++; document.querySelector("#no-valid-tecno").style.display = "none"; modalTecnologia.hide() } function eliminarTecnologia(event) { //eliminar del array tecnologias[event.target.parentElement.id.split("-")[1]]=null //eliminar en html event.target.parentElement.remove() } /*----------------Experiencia-----------------------------------------*/ function agregarFieldExpierncia(event){ //recoger del form const pairs = {}; const formexp = document.querySelector("[name=experiencia-form]"); formexp.classList.add('was-validated') const formData = new FormData(formexp); let error=validarfecha(formData.get("fechaDesde"), formData.get("fechaHasta")) let appendTo = "Hasta"; if (error) { if(error.includes("desde")) appendTo = "Desde"; formexp['fecha'+appendTo].setCustomValidity(error) formexp.querySelector(".errorFecha"+appendTo).innerHTML = error; console.log(error); } else{ formexp.fechaDesde.setCustomValidity('') formexp.fechaHasta.setCustomValidity('') } const reconocimientos = [{},{},{}]; let pos_rec; let returnFlag = false; let requiredValues = ["institucion", "cargo", "fechaDesde", "descripcion","nombreReferencia","telefonoReferencia"] formData.forEach((value, key)=>{ if(requiredValues.includes(key) && value.trim()==="" && returnFlag == false){ console.log(key, value) returnFlag = true; } }); if(returnFlag===true){ let message = "Rellene " for(let i=0;i 1) { reconocimientos[pos_rec[2]][pos_rec[1]] = value } else{ pairs[name] = value } } pairs["reconocimientos"] = reconocimientos.filter(rec => rec.nombre); experiencias[cont_experiencia] = pairs; formexp.reset(); formexp.classList.remove('was-validated') //imprimir lista actualizada const div = document.querySelector("#experiencias") const div1 = document.createElement('div'); let content=''; for (let index = 0; index < experiencias.length; index++) { const exp = experiencias[index]; if(exp==null) continue; content += `
Experiencia
Institucion
${exp.institucion}
Cargo
${exp.cargo}
Referencia
${exp.nombreReferencia}
Telf. Referencia
${exp.telefonoReferencia}
Fecha Inicio
${exp.fechaDesde}
Fecha Fin
${exp.fechaHasta}
Motivo de salida
${exp.motivoSalida}
` } //content += "" div.innerHTML = content //div.innerHTML = ''; //div.appendChild(div1); cont_experiencia++; modalExperiencia.hide() } function eliminarExperiencia(index) { //eliminar del array experiencias[index]=null //eliminar en html document.getElementById("exp-"+index).remove() //event.target.parentElement.remove() } /*---------------Estudios---------------------------*/ function agregarFieldEstudio(){ //recoger del form let pairs = {}; const formest = document.querySelector("[name=estudio-form]"); const formData = new FormData(formest); formest.classList.add('was-validated') let error=validarfecha(formData.get("fechaDesde"), formData.get("fechaHasta")) let appendTo = "Hasta"; if (error) { if(error.includes("desde")) appendTo = "Desde"; formest['fecha'+appendTo].setCustomValidity(error) formest.querySelector(".errorFecha"+appendTo).innerHTML = error; console.log(error); } else{ formest.fechaDesde.setCustomValidity('') formest.fechaHasta.setCustomValidity('') } //Validacion let returnFlag = false; let requiredValues = ["tipoDeEstudio", "institucion", "estado", "fechaDesde", "temaDeEstudio"] formData.forEach((value, key)=>{ if(requiredValues.includes(key) && value==="" && returnFlag == false){ console.log(key, value) returnFlag = true; } }); if(returnFlag===true){ let message = "Rellene " for(let i=0;i 1) { estudioReconocimiento[pos_rec[2]][pos_rec[1]] = value } else{ pairs[name] = value } } let nombre = pairs["institucion"] delete pairs["institucion"] console.log(pairs) pairs["institucion"] = { } pairs["institucion"].nombre = nombre pairs["institucion"].subNombre = "" pairs["estudioReconocimiento"] = estudioReconocimiento.filter(rec => rec.nombre); estudios[cont_estudios] = pairs; formest.reset(); //imprimir lista actualizada const div = document.querySelector("#estudios") const div1 = document.createElement('div'); let content=''; for (let index = 0; index < estudios.length; index++) { const est = estudios[index]; if(est==null) continue; content += `
Estudio
Institucion
${est.institucion.nombre}
Tipo de estudio
${est.tipoDeEstudio}
Carrera
${est.temaDeEstudio}
Fecha Inicio
${est.fechaDesde}
Fecha Fin
${est.fechaHasta}
Estado
${est.estado}
` } div.innerHTML = content //div.innerHTML = ''; //div.appendChild(div1); cont_estudios++; formest.classList.remove('was-validated') modalEstudio.hide() } function eliminarEstudio(index) { //eliminar del array estudios[index]=null //eliminar en html document.getElementById("est-"+index).remove() } /*------------Cargos----------------------------------------*/ function agregarFieldCargo(){ //recoger del form const pairs = {}; const formcar = document.querySelector("[name=cargo-form]"); const formData = new FormData(formcar); //Validacion let returnFlag = false; let requiredValues = ["nombre"] formData.forEach((value, key)=>{ if(requiredValues.includes(key) && value==="" && returnFlag == false){ console.log(key, value) returnFlag = true; } }); if(returnFlag===true){ let message = "Rellene " for(let i=0;i option[value="'+pairs["cargo-id"]+'"]').innerHTML} console.log(postulaciones) formcar.reset(); //imprimir lista actualizada const div = document.querySelector("#cargos") const div1 = document.createElement('div'); let content1='' for (let index = 0; index < postulaciones.length; index++) { const car = postulaciones[index]; if(car==null) continue; content1 += `
${document.querySelector('[name=cargo-id] > option[value="'+car.id+'"]').innerHTML}  
` } //content1 += "" div.innerHTML = content1 //div.innerHTML = ''; //div.appendChild(div1); cont_cargo++; document.querySelector("#no-valid-cargo").style.display = "none"; modalCargo.hide() } function eliminarCargoPostulante(event) { //eliminar del array postulaciones[event.target.parentElement.id.split("-")[1]]=null //eliminar en html event.target.parentElement.remove() } /*--------------Referencias----------------------------- */ function agregarFieldReferencia(event){ //recoger del form const pairs = {}; const formexp = document.querySelector("[name=referencia-form]"); formexp.classList.add('was-validated') const formData = new FormData(formexp); const referenciaPersonal = [{},{},{}]; let pos_rec; let returnFlag = false; let requiredValues = ["nombre", "relacion", "telefono"] formData.forEach((value, key)=>{ if(requiredValues.includes(key) && value==="" && returnFlag == false){ console.log(key, value) returnFlag = true; } }); if(returnFlag===true){ let message = "Rellene " for(let i=0;i 1) { referenciaPersonal[pos_rec[2]][pos_rec[1]] = value } else{ pairs[name] = value } } pairs["referenciaPersonal"] = referenciaPersonal.filter(rec => rec.nombre); referencias[cont_referencias] = pairs; formexp.reset(); //imprimir lista actualizada const div = document.querySelector("#referencia") const div1 = document.createElement('div'); let content='' for (let index = 0; index < referencias.length; index++) { const exp = referencias[index]; if(exp==null) continue; content += `
Referencia Personal
Nombre
${exp.nombre}
Telefono
${exp.telefono}
Relacion
${exp.relacion}
` } //content += "" div.innerHTML = content //div.innerHTML = ''; //div.appendChild(div1); cont_referencias++; formexp.classList.remove('was-validated') modalReferencia.hide() } function eliminarReferencia(index) { //eliminar del array referencias[index]=null //eliminar en html document.getElementById("ref-"+index).remove() } /*--------------Form submit----------------------------- */ function serializeJSON (form,excluded_input=['cargo-id']) { // Create a new FormData object const formData = new FormData(form); if(formData.get('fechaNacimiento')>=new Date().toISOString().slice(0,10)){ form['fechaNacimiento'].setCustomValidity('Fecha de nacimiento debe ser menor que actual') noValidateFlag = true; return; } else{ form['fechaNacimiento'].setCustomValidity('') } // Create an object to hold the name/value pairs const pairs = {}; // Add each name/value pair to the object for (const [name, value] of formData) { if(excluded_input.includes(name)) continue; pairs[name] = value } let cargos = document.getElementsByName("cargo-id"); cont_cargo = 0; const postulaciones=[]; for (let i = 0; i < cargos.length; i++) { if(cargos[i].checked){ postulaciones[cont_cargo] = {} postulaciones[cont_cargo]["id"] = cargos[i].value; cont_cargo++; } } pairs["experiencias"] = experiencias.filter(exp => exp)//eliminacion de nulos pairs["estudios"] = estudios.filter(est => est)//eliminacion de nulos pairs["tecnologias"] = tecnologias.filter(tec => tec)//eliminacion de nulos pairs["postulaciones"] = postulaciones.filter(car => car)//eliminacion de nulos pairs["referencias"] = referencias.filter(tec => tec) if(pairs["postulaciones"].length<1){ document.querySelector("#no-valid-cargo").style.display = "block"; noValidateFlag = true; }else{ document.querySelector("#no-valid-cargo").style.display = "none"; } console.log(pairs["tecnologias"]) if(pairs["tecnologias"].length<1){ document.querySelector("#no-valid-tecno").style.display = "block"; noValidateFlag = true; }else{ document.querySelector("#no-valid-tecno").style.display = "none"; } if(noValidateFlag){ return; } noValidateFlag = false // Return the JSON string return JSON.stringify(pairs, null, 2); } function obtenerCV(){ let input = document.querySelector('#cvFile') return input.files[0]; } async function postData(url = '', data = {}) { var token = document.querySelector("meta[name='_csrf']").content; var headerxs = document.querySelector("meta[name='_csrf_header']").content; // Default options are marked with * let senddata = { method: 'POST', // *GET, POST, PUT, DELETE, etc. mode: 'cors', // no-cors, *cors, same-origin cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached credentials: 'same-origin', // include, *same-origin, omit headers: { //'Content-Type': undefined//'application/json', // 'Content-Type': 'application/x-www-form-urlencoded', }, redirect: 'follow', // manual, *follow, error referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url body: data // body data type must match "Content-Type" header } senddata["headers"][headerxs] = token; let response = null if(!noValidateFlag){ response = await fetch(url, senddata); } return response; // parses JSON response into native JavaScript objects } function formatearJsonWithFile(json, file){ formData = new FormData(); formData.append("file", file); formData.append('postulante', new Blob([json], { type: "application/json" })); return formData } /*--------------Llamar funciones y agregar listeners----------------------------- */ formValidator(); fechasMaxMin(); listarCiudades(depSelect.value); form.addEventListener("submit",(evt)=>{ // if (!form.checkValidity()) { // evt.preventDefault() // evt.stopPropagation() // } // form.classList.add('was-validated') evt.preventDefault(); let formSerialized = serializeJSON(form); let fileCV = obtenerCV(); if(!noValidateFlag){ postData('work-with-us', formatearJsonWithFile(formSerialized,fileCV)) .then(response => { if(response.status==200 || response.status==302){ location.replace(response.url); }else{ errorDispatcher(response.text().then(value => console.log(value))); } },(reason)=>{ errorDispatcher(reason); }); } noValidateFlag = false } ); function errorDispatcher(reason){ const errorSection = document.querySelector("#errorSection") errorSection.innerHTML = ` `; console.log(reason) errorSection.focus() } //evento para cambio de ciudad segun departamento depSelect.addEventListener("change",evt => listarCiudades(evt.target.value))