Se agrego modal para referencias personales

curriculumsearch/src/main/resources/static/main.js

 var cont_experiencia = 0;
 let cont_estudios = 0;
 let cont_tecnologia = 0;
+var cont_referencias=0 ;
 const experiencias = [];
 const estudios = [];
 const tecnologias = [];
+const referencias= [];
+
 
 const formValidator = function () {
     'use strict'
@@ -183,6 +186,7 @@ function serializeJSON (form) {
     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["referencias"] = referencias.filter(tec => tec)
     
     // Return the JSON string
     return JSON.stringify(pairs, null, 2);
@@ -306,6 +310,10 @@ function agregarFieldEstudio(){
 
 }
 
+
+
+
+
 function eliminarEstudio(event) {
     //eliminar del array
     estudios[event.target.parentElement.id.split("-")[1]]=null
@@ -339,3 +347,82 @@ function listarCiudades(depId){
     
     
 }
+
+
+
+function agregarFieldReferencia(event){
+    //recoger del form
+    const pairs = {};
+    const formexp = document.querySelector("[name=referencia-form]");
+    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<requiredValues.length;i++){
+            message+=", "+requiredValues[i];
+        }
+        message += " como minimo."
+        alert(message);
+        return;
+    }
+
+    for (const [name, value] of formData){
+        pos_rec = name.split("-");//rec-nombre-index
+        if (pos_rec.length > 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='<ul>'
+    for (let index = 0; index < referencias.length; index++) {
+        const exp = referencias[index];
+        if(exp==null) continue;
+        content += `
+        <li id="exp-${index}">        
+            ${exp.nombre}
+            <button type="button" onclick="eliminarReferencia(event)"> <span class="glyphicon glyphicon-trash"></span> Tras</button>
+        </li>
+        
+        `
+    }
+    content += "</ul>" 
+    div1.innerHTML = content
+    div.innerHTML = '';
+    div.appendChild(div1);
+    cont_referencias++;
+}
+
+/*----------------------------------------------------------------- */
+function eliminarReferencia(event) {
+    //eliminar del array
+    referencias[event.target.parentElement.id.split("-")[1]]=null
+    //eliminar en html
+    event.target.parentElement.remove()
+}
+/*----------------------------------------------------------------- */
+
+
+
+

curriculumsearch/src/main/webapp/jsp/postulante-form.jsp

@@ -281,9 +281,15 @@
                                   <div 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>
                                 
+                                
                                 <div class="mt-3 gap-2 d-flex justify-content-between" id="tecnologias"> 
                                 </div>
-                              
+
+                                <div class="inputs p-3 py-5">
+                                  <div 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>   
+                                </div>
+                                <div class="mt-3 gap-2 d-flex justify-content-between" id="referencia"> 
+                                </div>
                       
                         
                                 
@@ -468,6 +474,45 @@
       </div>
     </div>
   </div>
+    <!--Modal de referencias-->
+       <div class="modal fade" id="referenciaForm" tabindex="-1" role="dialog" aria-labelledby="referenciaForm" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+          <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">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div class="modal-body">
+              <form name="referencia-form" class="needs-validation" novalidate>
+                <div class="form-group">
+                    <label for="nombre" class="form-label">Nombre</label>
+                    <input type="text" class="form-control" name="nombre" id="nombre" required>
+                </div>
+                <div class="form-group">
+                    <label for="relacion" class="form-label">Relacion</label>
+                    <input type="text" class="form-control" name="relacion" id="relacion" required>
+                </div>
+
+                <div class="form-group">
+                  <label for="telefono" class="form-label">Telefono</label>
+                  <input type="number" class="form-control" name="telefono" id="telefono" required>
+              </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="agregarFieldReferencia()" data-dismiss="modal">Agregar</button>
+        </div>
+      </div>
+    </div>
+      </div>
+
 
 
     <!-- Optional JavaScript; choose one of the two! -->