Skip to content

th-app-java
th-app-java
Commit ecedf95e by Joel Florentin
Options

form postulante correcion de modal y selects

parent 78c12fed
Showing with 353 additions and 396 deletions
curriculumsearch/src/main/resources/static/main.js
......@@ -13,7 +13,18 @@ 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'
......@@ -37,114 +48,66 @@ const formValidator = function () {
}, false)
})
}
function carg(elemento) {
var element = document.getElementById('descripcion');
if(elemento == "otro"){
element.style.display='block';
}else{
element.style.display='none';
}
}
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.querySelector(".errorfecha"+appendTo)
formexp['fecha'+appendTo].setCustomValidity(error)
document.querySelector(".errorfecha"+appendTo).innerHTML = error;
console.log(error);
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;
}
else{
formexp.fechaDesde.setCustomValidity('')
formexp.fechaHasta.setCustomValidity('')
if (mm < 10) {
mm = '0' + mm;
}
const reconocimientos = [{},{},{}];
let pos_rec;
let returnFlag = false;
today = yyyy + '-' + mm + '-' + dd;
let requiredValues = ["institucion", "cargo", "fechaDesde"]
formData.forEach((value, key)=>{
if(requiredValues.includes(key)
&& value==="" && returnFlag == false){
console.log(key, value)
returnFlag = true;
}
});
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
if(returnFlag===true){
let message = "Rellene "
for(let i=0;i<requiredValues.length;i++){
message+=", "+requiredValues[i];
}
message += " como minimo."
alert(message);
return;
}
fechaDesdeEstudio.setAttribute("max", today);
fechaDesdeExperiencia.setAttribute("max", today);
fechaNacimiento.setAttribute("max", today);
for (const [name, value] of formData){
pos_rec = name.split("-");//rec-nombre-index
if (pos_rec.length > 1) {
reconocimientos[pos_rec[2]][pos_rec[1]] = value
}
else{
pairs[name] = value
}
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)
}
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 += `
<div class="col border border-3" id="exp-${index}">
<h4><center>Experiencia</center></h4>
<label><b>Institucion:</b> ${exp.institucion}</label><br>
<label><b>Fecha Inicio:</b> ${exp.fechaDesde}</label><br>
<label><b>Fecha Fin:</b> ${exp.fechaHasta}</label><br>
<label><b>Referencia:</b> ${exp.nombreReferencia}</label><br>
<label><b>Telefono de la referencia:</b> ${exp.telefonoReferencia}</label><br>
<label><b>Cargo:</b> ${exp.cargo}</label><br>
<label><b>Motivo de salida:</b> ${exp.motivoSalida}</label><br>
ciudad.replaceChildren(frag);
<button type="button" class="btn btn-primary" onclick="eliminarExperiencia(event)"> <span class="glyphicon glyphicon-trash"></span>Eliminar</button>
</div>
`
}
//content += "</ul>"
div.innerHTML = content
//div.innerHTML = '';
//div.appendChild(div1);
cont_experiencia++;
}
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>fechadehoy){
return "la fecha hasta no puede ser mayor a la fecha actual" ;
}
if(fechaHasta =! null && fechaDesde>fechaHasta){
return "la fecha desde no puede ser mayor a la fecha hasta";
......@@ -152,7 +115,7 @@ function validarfecha(fechaDesde, fechaHasta){
return false
}
/*--------------------------------------------------------------------*/
/*-----------------Tecnologia----------------------------------------*/
function agregarFieldTecnologia(){
//recoger del form
const pairs = {};
......@@ -217,146 +180,135 @@ function agregarFieldTecnologia(){
cont_tecnologia++;
document.querySelector("#no-valid-tecno").style.display = "none";
}
/*--------------------------------------------------------------------*/
function eliminarExperiencia(event) {
//eliminar del array
experiencias[event.target.parentElement.id.split("-")[1]]=null
//eliminar en html
event.target.parentElement.remove()
}
/*----------------------------------------------------------------- */
function eliminarTecnologia(event) {
//eliminar del array
tecnologias[event.target.parentElement.id.split("-")[1]]=null
//eliminar en html
event.target.parentElement.remove()
}
/*----------------------------------------------------------------- */
function serializeJSON (form) {
// 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('')
}
/*----------------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";
// 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) {
pairs[name] = value
}
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";
formexp['fecha'+appendTo].setCustomValidity(error)
formexp.querySelector(".errorFecha"+appendTo).innerHTML = error;
console.log(error);
}
if(noValidateFlag){
return;
else{
formexp.fechaDesde.setCustomValidity('')
formexp.fechaHasta.setCustomValidity('')
}
noValidateFlag = false
// Return the JSON string
return JSON.stringify(pairs, null, 2);
}
const reconocimientos = [{},{},{}];
let pos_rec;
let returnFlag = false;
function obtenerCV(){
let input = document.querySelector('#cvFile')
return input.files[0];
let requiredValues = ["institucion", "cargo", "fechaDesde"]
}
formData.forEach((value, key)=>{
if(requiredValues.includes(key)
&& value==="" && returnFlag == false){
console.log(key, value)
returnFlag = true;
}
});
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
if(returnFlag===true){
let message = "Rellene "
for(let i=0;i<requiredValues.length;i++){
message+=", "+requiredValues[i];
}
senddata["headers"][headerxs] = token;
let response = null
if(!noValidateFlag){
response = await fetch(url, senddata);
message += " como minimo."
//alert(message);
return;
}
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
}
formValidator()
form = document.querySelector("form");
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{
console.log(response.text().then(value => console.log(value)))
for (const [name, value] of formData){
pos_rec = name.split("-");//rec-nombre-index
if (pos_rec.length > 1) {
reconocimientos[pos_rec[2]][pos_rec[1]] = value
}
});
else{
pairs[name] = value
}
noValidateFlag = false
} );
}
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');
//Metodos para Estudios
let content='';
for (let index = 0; index < experiencias.length; index++) {
const exp = experiencias[index];
if(exp==null) continue;
content += `
<div class="col border border-3" id="exp-${index}">
<h4><center>Experiencia</center></h4>
<label><b>Institucion:</b> ${exp.institucion}</label><br>
<label><b>Fecha Inicio:</b> ${exp.fechaDesde}</label><br>
<label><b>Fecha Fin:</b> ${exp.fechaHasta}</label><br>
<label><b>Referencia:</b> ${exp.nombreReferencia}</label><br>
<label><b>Telefono de la referencia:</b> ${exp.telefonoReferencia}</label><br>
<label><b>Cargo:</b> ${exp.cargo}</label><br>
<label><b>Motivo de salida:</b> ${exp.motivoSalida}</label><br>
<button type="button" class="btn btn-primary" onclick="eliminarExperiencia(event)"> <span class="glyphicon glyphicon-trash"></span>Eliminar</button>
</div>
`
}
//content += "</ul>"
div.innerHTML = content
//div.innerHTML = '';
//div.appendChild(div1);
cont_experiencia++;
modalExperiencia.hide()
}
function eliminarExperiencia(event) {
//eliminar del array
experiencias[event.target.parentElement.id.split("-")[1]]=null
//eliminar en html
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;
......@@ -377,7 +329,7 @@ function agregarFieldEstudio(){
message+=", "+requiredValues[i];
}
message += " como minimo."
alert(message);
//alert(message);
return;
}
......@@ -430,20 +382,17 @@ function agregarFieldEstudio(){
//div.innerHTML = '';
//div.appendChild(div1);
cont_estudios++;
formest.classList.remove('was-validated')
modalEstudio.hide()
}
function eliminarEstudio(event) {
//eliminar del array
estudios[event.target.parentElement.id.split("-")[1]]=null
//eliminar en html
event.target.parentElement.remove()
}
/*--------------------------------------------------------------------*/
/*------------Cargos----------------------------------------*/
function agregarFieldCargo(){
//recoger del form
const pairs = {};
......@@ -513,49 +462,21 @@ function agregarFieldCargo(){
//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()
}
/*--------------------------------------------------------------------*/
//evento para cambio de ciudad segun departamento
const depSelect = document.querySelector("#departamentos");
depSelect.addEventListener("change",evt => listarCiudades(evt.target.value))
listarCiudades(depSelect.value);
//variable ciudades esta declarada en el jsp
/**
* Listar todas las ciudades en el select de ciudades
* @param {*} depId
*/
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);
}
/*--------------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;
......@@ -577,7 +498,7 @@ function agregarFieldReferencia(event){
message+=", "+requiredValues[i];
}
message += " como minimo."
alert(message);
//alert(message);
return;
}
......@@ -617,71 +538,147 @@ function agregarFieldReferencia(event){
//div.innerHTML = '';
//div.appendChild(div1);
cont_referencias++;
formexp.classList.remove('was-validated')
modalExperiencia.hide()
}
/*----------------------------------------------------------------- */
function eliminarReferencia(event) {
//eliminar del array
referencias[event.target.parentElement.id.split("-")[1]]=null
//eliminar en html
event.target.parentElement.remove()
}
/*----------------------------------------------------------------- */
/*--------------------------------------------------------------------------------------------------------- */
// $(function(){
// $("#wizard").steps({
// headerTag: "h4",
// bodyTag: "section",
// transitionEffect: "fade",
// enableAllSteps: true,
// transitionEffectSpeed: 500,
// onStepChanging: function (event, currentIndex, newIndex) {
// if ( newIndex === 1 ) {
// $('.steps ul').addClass('step-2');
// } else {
// $('.steps ul').removeClass('step-2');
// }
// if ( newIndex === 2 ) {
// $('.steps ul').addClass('step-3');
// } else {
// $('.steps ul').removeClass('step-3');
// }
//
// if ( newIndex === 3 ) {
// $('.steps ul').addClass('step-4');
// $('.actions ul').addClass('step-last');
// } else {
// $('.steps ul').removeClass('step-4');
// $('.actions ul').removeClass('step-last');
// }
// return true;
// },
// labels: {
// finish: "Order again",
// next: "Next",
// previous: "Previous"
// }
// });
// // Custom Steps Jquery Steps
// $('.wizard > .steps li a').click(function(){
// $(this).parent().addClass('checked');
// $(this).parent().prevAll().addClass('checked');
// $(this).parent().nextAll().removeClass('checked');
// });
// // Custom Button Jquery Steps
// $('.forward').click(function(){
// $("#wizard").steps('next');
// })
// $('.backward').click(function(){
// $("#wizard").steps('previous');
// })
// // Checkbox
// $('.checkbox-circle label').click(function(){
// $('.checkbox-circle label').removeClass('active');
// $(this).addClass('active');
// })
// })
/*--------------------------------------------------------------------------------------------------------- */
\ No newline at end of file
/*--------------Form submit----------------------------- */
function serializeJSON (form) {
// 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) {
pairs[name] = value
}
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 = `
<div class="alert alert-warning alert-dismissible fade show " role="alert">
<strong>Ha ocurrido un error</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>`;
console.log(reason)
errorSection.focus()
}
//evento para cambio de ciudad segun departamento
depSelect.addEventListener("change",evt => listarCiudades(evt.target.value))
curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
......@@ -15,6 +15,11 @@
</head>
<body class="container">
<div class="row">
<div id="errorSection" class="col" tabindex="-1">
</div>
</div>
<form name="postulante" method="post" class="needs-validation" novalidate>
<div class="container mt-3">
<div class="card p-3 text-center">
......@@ -23,38 +28,25 @@
</div>
<h4>Curriculum</h4>
<div class="row">
<div class="about-inputs mb-3 col-md-12 center">
<label for="resumen" class="form-label">Resumen</label>
<textarea class="form-control center " name="resumen" id="resumen" required > </textarea>
<div class="valid-feedback">
Luce Bien!
</div>
</div>
<div class="inputs mb-3 col-md-6">
<label for="nombre" class="form-label">Nombre</label>
<input type="text" name="nombre" class="form-control " id="nombre" required>
<div class="valid-feedback">
Luce Bien!
</div>
</div>
<div class="inputs mb-3 col-md-6">
<label for="apellido" class="form-label">Apellido</label>
<input type="text" name="apellido" class="form-control " id="apellido" required>
<div class="valid-feedback">
Luce Bien!
</div>
</div>
<div class="inputs mb-3 col-md-6">
<label for="correo" class="form-label">Email address</label>
<input type="email" name="correo" class="form-control " id="correo" required>
<div class="valid-feedback">
Luce Bien!
</div>
</div>
<div class="inputs mb-3 col-md-6">
......@@ -68,7 +60,7 @@
<div class="inputs mb-3 col-md-6">
<label for="tipoDocumento" class="form-label"> Tipo de documento</label>
<select name="tipoDocumento" id="tipoDocumento" class="bg-light" required onchange='carg(this.value);'>
<select name="tipoDocumento" id="tipoDocumento" class="bg-light" required>
<option value='CI' selected>C.I</option>
<option value='PAS'>Pasport</option>
<option value='Otro'>Otro</option>
......@@ -78,9 +70,7 @@
<div class="inputs mb-3 col-md-6">
<label for="nroDocument" class="form-label">Numero de Documento</label>
<input type="number" name="nroDocument" class="form-control " id="nroDocument" required>
<div class="valid-feedback">
Luce Bien!
</div>
</div>
<div class="inputs mb-3 col-md-6">
......@@ -103,21 +93,24 @@
<div class="inputs mb-3 col-md-6">
<label for="telefono" class="form-label">Telefono</label>
<input type="number" name="telefono" class="form-control " id="telefono" required>
<div class="valid-feedback">
Luce Bien!
</div>
</div>
<div class="inputs mb-3 col-md-6">
<label for="fechaNacimiento" class="form-label">Fecha de nacimiento</label>
<input type="date" name="fechaNacimiento" class="form-control " id="fechaNacimiento" required>
<div class="valid-feedback">
Luce Bien!
</div>
<div class="about-inputs mb-3 col-md-12 center">
<label for="resumen" class="form-label">Resumen</label>
<textarea class="form-control center " name="resumen" id="resumen" required > </textarea>
</div>
<div class="inputs mb-3 col-md-4"> <label for="nivelIngles" class="form-label"> Nivel de ingles</label>
<div class="inputs mb-3 col-md-3"> <label for="nivelIngles" class="form-label"> Nivel de ingles</label>
<select name="nivelIngles" id="nivelIngles" class="content-select">
<option value="1" selected>Ingles muy basico</option>
<option value="2" >Comprendo algunas cosas y puedo leer con la ayuda del traductor</option>
......@@ -127,7 +120,7 @@
</select>
</div>
<div class="inputs mb-3 col-md-4">
<div class="inputs mb-3 col-md-3">
<label for="disponibilidad" class="form-label"> Disponibilidad</label>
<select name="disponibilidad" id="disponibilidad" class="content-select">
<c:forEach items="${disponibilidades}" var="disponibilidad">
......@@ -136,7 +129,7 @@
</select> </div>
<div class="inputs mb-3 col-md-4">
<div class="inputs mb-3 col-md-3">
<label for="estadoCivil" class="form-label"> Estado Civil</label>
<select name="estadoCivil" id="estadoCivil" class="content-select">
<c:forEach items="${estadosCiviles}" var="estadoCivil">
......@@ -144,28 +137,28 @@
</c:forEach>
</select>
</div>
<div class="inputs mb-3 col-md-4">
<div class="inputs mb-3 col-md-3">
<label for="formFile" class="form-label">Cargar cv</label>
<input class="form-control" type="file" id="cvFile">
</div>
<!-- Button Agregar Cargo al que postulas -->
<button type="button" class="btn btn-primary"><span class="add-experience" class="btn btn-primary" data-toggle="modal" data-target="#cargoForm"><i class="fa fa-plus"></i>&nbsp;Agregar Cargo al que postulas</span></button><br>
<button type="button" class="btn btn-primary"><span class="add-experience" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#cargoForm"><i class="fa fa-plus"></i>&nbsp;Agregar Cargo al que postulas</span></button><br>
<p id="no-valid-cargo" style="display: none; color: darkred; border: solid 1px darkred; border-radius: 25px; width: 75%" class="m-3">
*Agrega por lo menos un cargo
</p>
<div class="mt-3 gap-2 row row-cols-4" style="display: flex;" id="cargos"></div>
<!-- Button Agregar Experiencia -->
<button type="button" class="btn btn-primary"><span class="add-experience" data-toggle="modal" data-target="#experienciaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Experiencia</span></button><br>
<button type="button" class="btn btn-primary mt-2"><span class="add-experience" data-bs-toggle="modal" data-bs-target="#experienciaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Experiencia</span></button><br>
<div class="mt-3 gap-2 row row-cols-4" id="experiencias"></div>
<!-- Button Agregar Estudio -->
<button type="button" class="btn btn-primary"><span class="add-experience" data-toggle="modal" data-target="#estudioForm"><i class="fa fa-plus"></i>&nbsp;Agregar Estudio</span></button><br>
<button type="button" class="btn btn-primary mt-2"><span class="add-experience" data-bs-toggle="modal" data-bs-target="#estudioForm"><i class="fa fa-plus"></i>&nbsp;Agregar Estudio</span></button><br>
<div class="mt-3 gap-2 row row-cols-4" id="estudios"></div>
<!-- Button Agregar Tecnologia -->
<button type="button" class="btn btn-primary"><span class="add-experience" data-toggle="modal" data-target="#tecnologiaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Tecnologia</span></button><br>
<button type="button" class="btn btn-primary mt-2"><span class="add-experience" data-bs-toggle="modal" data-bs-target="#tecnologiaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Tecnologia</span></button><br>
<p id="no-valid-tecno" style="display: none; color: darkred; border: solid 1px darkred; border-radius: 25px; width: 75%" class="m-3">
*Agrega por lo menos una tecnologia
......@@ -174,13 +167,13 @@
</div>
<!-- Button Agregar Refencia personal -->
<button type="button" class="btn btn-primary"><span class="add-experience" data-toggle="modal" data-target="#referenciaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Referencia Personal</span></button><br>
<button type="button" class="btn btn-primary mt-2"><span class="add-experience" data-bs-toggle="modal" data-bs-target="#referenciaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Referencia Personal</span></button><br>
<div class="mt-3 gap-2 row row-cols-4" id="referencia"></div>
<div class="mt-3 gap-2 d-flex justify-content-end">
<a class="px-3 btn btn-sm btn-outline-primary" href="/postulante">Cancelar</a>
<a class="px-3 btn btn-sm btn-outline-primary" href="/work-with-us">Cancelar</a>
<button class="px-3 btn btn-sm btn-primary" type="submit">Guardar</button>
</div>
</div>
......@@ -188,12 +181,12 @@
</div>
</form>
<!---------------------------------------Modal de Cargos disponibles---------------------------------------------------------------->
<div class="modal fade" id="cargoForm" tabindex="-2" role="dialog" aria-labelledby="cargoForm" aria-hidden="true">
<div class="modal fade" id="cargoForm" tabindex="-1" role="dialog" aria-labelledby="cargoForm" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel" >CargosDisponibles</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
......@@ -202,7 +195,7 @@
<label for="cargo-nombre" class="form-label">Cargo</label>
<div class="input-group mb-3">
<select class="form-select" name="cargo-id" aria-label="Default select example" required>
<option value="-1" selected>Open this select menu</option>
<c:forEach items="${CargosDisponibles}" var="convocatoria">
<option value="${convocatoria.getId()}">${convocatoria.getCargo().getNombre()}</option>
</c:forEach>>
......@@ -211,8 +204,8 @@
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="agregarFieldCargo()" data-dismiss="modal">Agregar</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary" onclick="agregarFieldCargo()">Agregar</button>
</div>
</div>
</div>
......@@ -225,7 +218,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Experiencia</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
......@@ -288,19 +281,19 @@
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="agregar-exp" type="button" class="btn btn-primary" onclick="agregarFieldExpierncia()" data-dismiss="modal">Agregar</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<button id="agregar-exp" type="button" class="btn btn-primary" onclick="agregarFieldExpierncia()">Agregar</button>
</div>
</div>
</div>
</div>
<!--------------------------------------------------------------------------------------->
<div class="modal fade" id="tecnologiaForm" tabindex="-2" role="dialog" aria-labelledby="tecnologiaForm" aria-hidden="true">
<div class="modal fade" id="tecnologiaForm" tabindex="-1" role="dialog" aria-labelledby="tecnologiaForm" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel" >tecnologia</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
......@@ -309,7 +302,7 @@
<label for="tecnologia-nombre" class="form-label">Tecnologia</label>
<div class="input-group mb-3">
<select class="form-select" name="tecnologia-id" aria-label="Default select example" required>
<option value="-1" selected>Open this select menu</option>
<c:forEach items="${tecnologias}" var="tecnologia">
<option value="${tecnologia.id}">${tecnologia.nombre}</option>
</c:forEach>
......@@ -323,8 +316,8 @@
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="agregarFieldTecnologia()" data-dismiss="modal">Agregar</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary" onclick="agregarFieldTecnologia()">Agregar</button>
</div>
</div>
</div>
......@@ -338,7 +331,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Estudios</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
......@@ -349,7 +342,7 @@
<div class="form-group">
<label for="tipoDeEstudio">Tipo de Estudio</label>
<select name="tipoDeEstudio" id="tipoDeEstudio" required>
<option value="-1" selected disabled hidden>Seleccionar</option>
<c:forEach items="${tiposDeEstudio}" var="tipo">
<option value="${tipo}">${tipo.name}</option>
</c:forEach>
......@@ -368,7 +361,7 @@
<div class="form-group">
<label for="estado">Estado</label>
<select name="estado" id="estado" required>
<option value="-1" selected disabled hidden>Seleccionar</option>
<c:forEach items="${estadosEstudio}" var="estado">
<option value="${estado}">${estado.name}</option>
</c:forEach>
......@@ -377,18 +370,24 @@
<div class="form-group">
<label for="fechaDesdeEstudio" class="form-label">Fecha Desde</label>
<input type="date" class="form-control " name="fechaDesde" id="fechaDesdeEstudio" required>
<div class="invalid-feedback errorFechaDesde">
</div>
</div>
<div class="form-group">
<label for="fechaHastaEstudio" class="form-label">Fecha Hasta</label>
<input type="date" class="form-control " name="fechaHasta" id="fechaHastaEstudio" >
<div class="invalid-feedback errorFechaHasta">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary" onclick="agregarFieldEstudio()" data-dismiss="modal">Agregar</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary" onclick="agregarFieldEstudio()">Agregar</button>
</div>
</div>
</div>
......@@ -401,7 +400,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Referencias Personales</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
......@@ -427,8 +426,8 @@
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary" onclick="agregarFieldReferencia()" data-dismiss="modal">Agregar</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary" onclick="agregarFieldReferencia()">Agregar</button>
</div>
</div>
</div>
......@@ -436,48 +435,10 @@
<!-- Optional JavaScript; choose one of the two! -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script>
var ciudades = ${ciudades};
(function(){
var today = new Date();
var dd = today.getDate();
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)
})
})()
</script>
<script src="./main.js"></script>
</body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment