Skip to content

th-app-java
th-app-java
Commit d27b4258 by willgonzz
Options

estilizacion de form Postulante

parent 4a89be91
Showing with 83 additions and 82 deletions
curriculumsearch/src/main/resources/static/main.js
...@@ -90,22 +90,31 @@ function agregarFieldExpierncia(event){ ...@@ -90,22 +90,31 @@ function agregarFieldExpierncia(event){
//imprimir lista actualizada //imprimir lista actualizada
const div = document.querySelector("#experiencias") const div = document.querySelector("#experiencias")
const div1 = document.createElement('div'); const div1 = document.createElement('div');
let content='<ul>'
let content='';
for (let index = 0; index < experiencias.length; index++) { for (let index = 0; index < experiencias.length; index++) {
const exp = experiencias[index]; const exp = experiencias[index];
if(exp==null) continue; if(exp==null) continue;
content += ` content += `
<li id="exp-${index}"> <div class="col border border-3" id="exp-${index}">
${exp.institucion} <h4><center>Experiencia</center></h4>
<button type="button" class="btn btn-primary" onclick="eliminarExperiencia(event)"> <span class="glyphicon glyphicon-trash"></span> Eliminar</button> <label><b>Institucion:</b> ${exp.institucion}</label><br>
</li> <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>" //content += "</ul>"
div1.innerHTML = content div.innerHTML = content
div.innerHTML = ''; //div.innerHTML = '';
div.appendChild(div1); //div.appendChild(div1);
cont_experiencia++; cont_experiencia++;
} }
/*--------------------------------------------------------------------*/ /*--------------------------------------------------------------------*/
...@@ -152,23 +161,24 @@ function agregarFieldTecnologia(){ ...@@ -152,23 +161,24 @@ function agregarFieldTecnologia(){
const div1 = document.createElement('div'); const div1 = document.createElement('div');
console.log(tecnologias[0]) console.log(tecnologias[0])
let content1='<ul>' let content1=''
for (let index = 0; index < tecnologias.length; index++) { for (let index = 0; index < tecnologias.length; index++) {
const tecn = tecnologias[index]; const tecn = tecnologias[index];
if(tecn==null) continue; if(tecn==null) continue;
content1 += ` content1 += `
<li id="tecn-${index}"> <div class="col border border-3" id="tecn-${index}">
${tecn.tecnologia.nombre} <label>${tecn.tecnologia.nombre}</label><br>
<label><progress value="${tecn.nivel}" max="5"></progress></label> <br>
<button type="button" class="btn btn-primary" onclick="eliminarTecnologia(event)">Eliminar</button> <button type="button" class="btn btn-primary" onclick="eliminarTecnologia(event)">Eliminar</button>
<br> <br>
</li> </div>
` `
} }
content1 += "</ul>" //content1 += "</ul>"
div1.innerHTML = content1 div.innerHTML = content1
div.innerHTML = ''; //div.innerHTML = '';
div.appendChild(div1); //div.appendChild(div1);
cont_tecnologia++; cont_tecnologia++;
} }
...@@ -314,23 +324,29 @@ function agregarFieldEstudio(){ ...@@ -314,23 +324,29 @@ function agregarFieldEstudio(){
//imprimir lista actualizada //imprimir lista actualizada
const div = document.querySelector("#estudios") const div = document.querySelector("#estudios")
const div1 = document.createElement('div'); const div1 = document.createElement('div');
let content='<ul>' let content='';
for (let index = 0; index < estudios.length; index++) { for (let index = 0; index < estudios.length; index++) {
const est = estudios[index]; const est = estudios[index];
if(est==null) continue; if(est==null) continue;
content += ` content += `
<li id="est-${index}"> <div class="col border border-3" id="est-${index}">
${est.institucion.nombre} <h4><center>Estudio</center></h4>
<label><b>Institucion:</b> ${est.institucion.nombre}</label><br>
<label><b>Tipo de estudio:</b> ${est.tipoDeEstudio}</label><br>
<label><b>Carrera:</b> ${est.temaDeEstudio}</label><br>
<label><b>Fecha Inicio:</b> ${est.fechaDesde}</label><br>
<label><b>Fecha Fin:</b> ${est.fechaHasta}</label><br>
<label><b>Estado:</b> ${est.estado}</label><br>
<button type="button" class="btn btn-primary" onclick="eliminarEstudio(event)">Eliminar</button> <button type="button" class="btn btn-primary" onclick="eliminarEstudio(event)">Eliminar</button>
</li> </div>
` `
} }
content += "</ul>"
div1.innerHTML = content div.innerHTML = content
div.innerHTML = ''; //div.innerHTML = '';
div.appendChild(div1); //div.appendChild(div1);
cont_estudios++; cont_estudios++;
} }
...@@ -397,22 +413,22 @@ function agregarFieldCargo(){ ...@@ -397,22 +413,22 @@ function agregarFieldCargo(){
const div = document.querySelector("#cargos") const div = document.querySelector("#cargos")
const div1 = document.createElement('div'); const div1 = document.createElement('div');
let content1='<ul>' let content1=''
for (let index = 0; index < postulaciones.length; index++) { for (let index = 0; index < postulaciones.length; index++) {
const car = postulaciones[index]; const car = postulaciones[index];
if(car==null) continue; if(car==null) continue;
content1 += ` content1 += `
<li id="car-${index}"> <div class="col border border-3" id="car-${index}" style="text-transform: uppercase;">
${document.querySelector('[name=cargo-id] > option[value="'+car.id+'"]').innerHTML}<br> <label>${document.querySelector('[name=cargo-id] > option[value="'+car.id+'"]').innerHTML}</label><br>
<button type="button" class="btn btn-primary" onclick="eliminarCargoPostulante(event)">Eliminar</button> <button type="button" class="btn btn-primary" onclick="eliminarCargoPostulante(event)">Eliminar</button><br>
</li> </div>
` `
} }
content1 += "</ul>" //content1 += "</ul>"
div1.innerHTML = content1 div.innerHTML = content1
div.innerHTML = ''; //div.innerHTML = '';
div.appendChild(div1); //div.appendChild(div1);
cont_cargo++; cont_cargo++;
} }
...@@ -498,22 +514,25 @@ function agregarFieldReferencia(event){ ...@@ -498,22 +514,25 @@ function agregarFieldReferencia(event){
//imprimir lista actualizada //imprimir lista actualizada
const div = document.querySelector("#referencia") const div = document.querySelector("#referencia")
const div1 = document.createElement('div'); const div1 = document.createElement('div');
let content='<ul>' let content=''
for (let index = 0; index < referencias.length; index++) { for (let index = 0; index < referencias.length; index++) {
const exp = referencias[index]; const exp = referencias[index];
if(exp==null) continue; if(exp==null) continue;
content += ` content += `
<li id="exp-${index}"> <div class="col border border-3" id="exp-${index}">
${exp.nombre} <h4><center>Referencia Personal</center></h4>
<button type="button" class="btn btn-primary" onclick="eliminarReferencia(event)"> <span class="glyphicon glyphicon-trash"></span> Tras</button> <label><b>Nombre:</b> ${exp.nombre}</label><br>
</li> <label><b>Telefono:</b> ${exp.telefono}</label><br>
<label><b>Relacion:</b> ${exp.relacion}</label><br>
<button type="button" class="btn btn-primary" onclick="eliminarReferencia(event)"> <span class="glyphicon glyphicon-trash"></span>Eliminar</button>
</div>
` `
} }
content += "</ul>" //content += "</ul>"
div1.innerHTML = content div.innerHTML = content
div.innerHTML = ''; //div.innerHTML = '';
div.appendChild(div1); //div.appendChild(div1);
cont_referencias++; cont_referencias++;
} }
......
curriculumsearch/src/main/webapp/css/formPostulanteStyle.css
body { body {
/* background-color: #506BEE; */ background-color: #baebd8;
background-image:url(/img/fondo.png); /* background-image:url(/img/fondo2.png); */
/*background-size:cover;*/ /*background-size:cover;*/
background-repeat:repeat; background-repeat:repeat;
height:100vh;width:100vw; height:100vh;width:100vw;
......
curriculumsearch/src/main/webapp/jsp/postulante-form.jsp
...@@ -98,8 +98,8 @@ ...@@ -98,8 +98,8 @@
<select name="ciudadId" id="ciudad" class="bg-light"> <select name="ciudadId" id="ciudad" class="bg-light">
</select> </select>
</div> </div>
<div class="inputs mb-3 col-md-6"> <div class="inputs mb-3 col-md-6">
<label for="telefono" class="form-label">Telefono</label> <label for="telefono" class="form-label">Telefono</label>
<input type="number" name="telefono" class="form-control " id="telefono" required> <input type="number" name="telefono" class="form-control " id="telefono" required>
...@@ -142,46 +142,28 @@ ...@@ -142,46 +142,28 @@
<c:forEach items="${estadosCiviles}" var="estadoCivil"> <c:forEach items="${estadosCiviles}" var="estadoCivil">
<option value="${estadoCivil.getDescripcion()}">${estadoCivil.getDescripcion()}</option> <option value="${estadoCivil.getDescripcion()}">${estadoCivil.getDescripcion()}</option>
</c:forEach> </c:forEach>
</select>
</select> </div>
<div >
<div style="color:blue" class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience" class="btn btn-primary" data-toggle="modal" data-target="#cargoForm"><i class="fa fa-plus"></i>&nbsp;Cargo al que postulas</span></div><br>
</div>
<div class="mt-3 gap-2 d-flex justify-content-between" id="cargos">
</div>
<div >
<div style="color:blue" class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience" data-toggle="modal" data-target="#experienciaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Experiencia</span></div><br>
</div> </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>
<div class="mt-3 gap-2 row row-cols-4" style="display: flex;" id="cargos"></div>
<div class="mt-3 gap-2 d-flex justify-content-between" id="experiencias"> <!-- Button Agregar Experiencia -->
</div> <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>
<div class="mt-3 gap-2 row row-cols-4" id="experiencias"></div>
<!-- Button Agregar Estudio -->
<div > <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>
<div style="color:blue" class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience" data-toggle="modal" data-target="#estudioForm"><i class="fa fa-plus"></i>&nbsp;Agregar Estudio</span></div><br> <div class="mt-3 gap-2 row row-cols-4" id="estudios"></div>
</div>
<div class="mt-3 gap-2 d-flex justify-content-between" id="estudios">
</div>
<!-- Button Agregar Tecnologia -->
<div > <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>
<div style="color:blue" class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience" data-toggle="modal" data-target="#tecnologiaForm"><i class="fa fa-plus"></i>&nbsp;Agregar Tecnologia</span></div><br> <div class="mt-3 gap-2 row row-cols-5" style="display: flex;" id="tecnologias"></div>
</div>
<div class="mt-3 gap-2 d-flex justify-content-between" id="tecnologias">
</div>
<div > <!-- Button Agregar Refencia personal -->
<div style="color:blue" class=" inputs d-flex justify-content-between align-items-center experience"><span class="border px-3 p-1 add-experience" data-toggle="modal" data-target="#referenciaForm"><i class="fa fa-plus"></i>&nbsp;Referencias Personales</span></div><br> <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>
</div> <div class="mt-3 gap-2 row row-cols-4" id="referencia"></div>
<div class="mt-3 gap-2 d-flex justify-content-between" id="referencia">
</div>
......
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