0

Tengo un documento JavaScript en el que tengo definida una class, para posteriormente poder trabajar con ella, con todas las funciones dinámicas dentro, donde creo formularios, e interactúo con un textarea con formato JSON.

introducir la descripción de la imagen aquí

Y aquí tengo el programa:

class formLOGOSTariff{

   constructor(id, params){
      var temCard    = document.querySelector("#temp-card").innerHTML;
      var temPower   = document.querySelector("#temp-power").innerHTML;
      var temEnergy  = document.querySelector("#temp-energy").innerHTML;
      var temForm    = document.querySelector("#temp-form").innerHTML;
      this.id = id;
      let foorm = document.createElement('div');
         foorm.innerHTML = temForm;
         document.getElementById(id).appendChild(foorm);

      this.contentForm = foorm.querySelector(".content-form");


      foorm.querySelector(".btn-event-addFrm").addEventListener("click",()=>{
         this.addFrm();
      });
      foorm.querySelector(".btn-event-sndFrm").addEventListener("click", ()=>{
         this.sndFrm();
      });
      foorm.querySelector(".btn-event-delFrm").addEventListener("click", ()=>{
         this.delFrm();
      });

      let card = this.addFrm();

      document.body.querySelector('.btn-event-sndTo').addEventListener("click", ()=>{
         this.sndTo();
      });

      document.getElementById("test-atex-1").addEventListener("keyup", ()=>{
         this.sndTo();
      });
   }

   addPower(el)   {
      var temPower   = document.querySelector("#temp-power").innerHTML;

      let power = document.createElement("div");
      power.innerHTML = temPower;
      el.querySelector(".container-power").appendChild(power);

      power.querySelectorAll("input[name=t_power]").forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });

      power.querySelectorAll("input[name=v_power]").forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });


      return power;

   }

   addEnergy(el)   {
      var temEnergy  =  document.querySelector('#temp-energy').innerHTML;

      let energy = document.createElement('div');
         energy.innerHTML = temEnergy;
            el.querySelector('.container-energy').appendChild(energy);

      energy.querySelectorAll("input[name=t_energy]").forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });

      energy.querySelectorAll("input[name=v_energy]").forEach(item=>{
         item.addEventListener("keyup", ()=>{
            this.sndFrm();
         });
      });
               return energy;
   }

   addFrm() {
      var tmp = document.querySelector('#temp-card').innerHTML;
      var cont = this.contentForm;
      let frm  = document.createElement('div');
     
         frm.innerHTML = tmp;
         cont.appendChild(frm);

         frm.querySelectorAll(".name_tarif").forEach(item=>{
         item.addEventListener("keyup", ()=>{
               this.sndFrm();
            });
         });
         frm.querySelectorAll(".btn-event-addPower").forEach(item=>{
           item.addEventListener("click", ()=>{
               this.addPower(frm);
            }); 
         })
         frm.querySelectorAll(".btn-event-addEnergy").forEach(item=>{
           item.addEventListener("click", ()=>{
               this.addEnergy(frm);
            }); 
         })

         this.addPower(frm);
         this.addEnergy(frm);
      return frm;
   }

   sndFrm()   {
      var jotason = [];

      document.body.querySelectorAll(".templatecARD").forEach(form=>{

            let obj = {
               title : form.querySelector(".name_tarif").value
            };

            let power = {};
            form.querySelectorAll("input[name=t_power]").forEach((inpt, index)=>{
               var ob = power[index]||{};
               ob.type=inpt.value;
               power[index]=ob;
            });

            form.querySelectorAll("input[name=v_power]").forEach((inpt, index)=>{
               var ob = power[index]||{};
               ob.value=inpt.value;
               power[index]=ob;
            });

            let energy = {};
            form.querySelectorAll("input[name=t_energy]").forEach((inpt, index)=>{
               var oj = energy[index]||{};
               oj.type=inpt.value;
               energy[index]=oj;
            });

            form.querySelectorAll("input[name=v_energy]").forEach((inpt, index)=>{
               var oj = energy[index]||{};
               oj.value=inpt.value;
               energy[index]=oj;
            });

            obj.power = power;
            obj.energy = energy;
            jotason.push(obj);

      })
      var jsoned = JSON.stringify(jotason,undefined, 2);

      document.getElementById('test-atex-1').value=jsoned;
   }

   sndTo(){
      this.contentForm.innerHTML='';
      let pJsn = document.getElementById('test-atex-1').value;
      var dat  = JSON.parse(pJsn);
      for(let n in dat){
         (form=>{

            let formDv = this.addFrm();
            formDv.querySelector(".container-power").innerHTML='';

               for(let n1  in form.power){
                  (pow=>{
                     let power = this.addPower(formDv);
                     
                     power.querySelector("[name=t_power]").value=pow.type;
                     power.querySelector("[name=v_power]").value=pow.value;
                  })(form.power[n1])
               }

            formDv.querySelector(".container-energy").innerHTML='';

               for(let n2 in form.energy){
                  (eng=>{
                     let energy = this.addEnergy(formDv);

                     energy.querySelector("[name=t_energy]").value=eng.type;
                     energy.querySelector("[name=v_energy]").value=eng.value;
                  })(form.energy[n2])
               }

            formDv.querySelector(".name_tarif").value=form.title;
           
         })(dat[n]);
      }
   }

   delFrm(){
      var nm = document.getElementsByClassName("templatecARD").length -1;
      var cont = document.getElementsByClassName("templatecARD")[nm];
      if (nm > 0){
         if(confirm('¿Quieres borrarlo')){
            cont.remove();
         } else {}
      } else {}
   }
}

window.addEventListener("load",()=>{
   var nomVre = new formLOGOSTariff("test-1", {});
});
<!DOCTYPE html>
<html>
<head>
    <title>LOGOS Energía</title>
    <meta charset="UTF-8"/>
    <script src="app.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>


<!-- TEMPLATES -->
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<template id="temp-card">
 
    <div class="templatecARD" data-group="0" >

        <label>Tarifa</label>
        <input type="text" class="name_tarif" name="tarif"/>
        
        <div>

            <div class="container-power"></div>
            <button class="btn-event-addPower" type="button">+</button>

        </div>
        <div>

            <div class="container-energy" ></div>
            <button class="btn-event-addEnergy" type="button">+</button>

        </div>

    </div>

</template> 
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<template  id="temp-power">
    <div class="box-power" >
        <label>PRECIOS POR POTENCIA</label>
        <div>
            <input type="text" name="t_power" style="width:40px"/>
            <input type="text" name="v_power"/>
        </div>
    </div>

</template> 
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<template  id="temp-energy">
    <div class="box-energy" >
        <label>PRECIOS POR ENERGÍA</label>
        <div>
            <input type="text" name="t_energy" style="width:40px"/>
            <input type="text" name="v_energy"/>
            <input type="hidden" name="">
        </div>
    </div>

</template> 
<!-- TEMPLATES -->
<!-- TEMPLATES -->
<!-- TEMPLATES -->


    <!-- FORMULARIO -->
        <!-- FORMULARIO -->
            <!-- FORMULARIO -->
<template id="temp-form">
    <form method="post">

        <div class="content-form">

        </div>
            
        <div>
            <button class="btn-event-sndFrm" type="button">UPDATE TEXTAREA</button>
            <button class="btn-event-addFrm" type="button"  >+</button>
            <button class="btn-event-delFrm" type="button">-</button>
        </div>
    </form>
</template>
            <!-- FORMULARIO -->
        <!-- FORMULARIO -->
    <!-- FORMULARIO -->






<div>
    <div id="test-1"></div>
    <textarea id="test-atex-1" style="width: 300px;height: 300px;"> </textarea>

    <button class='btn-event-sndTo' type="button">UPDATE FORM</button>
</div>
<!--
<div>
    <div id="test-2"></div>
    <textarea id="test-atex-2" style="width: 300px;height: 300px;"> </textarea>
    <button class='btn-event-sndTo' type="button">UPDATE FORM</button>
</div>

<div>
    <div id="test-3"></div>
    <textarea id="test-atex-3"> </textarea>
    <button class='btn-event-sndTo' type="button">UPDATE FORM</button>
</div>

<div>
    <div id="test-4"></div>
    <textarea id="test-atex-4"> </textarea>
    <button class='btn-event-sndTo' type="button">UPDATE FORM</button>
</div>
-->


</body>
</html>

Como se puede ver, en el final del documento HTML tengo puesto lo que serán los siguientes div donde meteré las otras clases:

  • En el div test-2 implementaré la class formLOGOSTariff2 (por ejemplo)
  • En el div test-3 implementaré la class formLOGOSTariff3 (por ejemplo)
  • En el div test-4 implementaré la class formLOGOSTariff4 (por ejemplo)

Ahora bien, en mis pruebas, he copiado toda la class formLOGOSTariff, la pegué de nuevo cambiándola por formLOGOSTariff2, y alterando los nombres de las variables a un simple nombre_de_variable2 (osea, añadí un 2 al final de todas las variables para que no entrasen en conflicto).

Pero sigue siendo una chapuza, porque elementos como los botones de function: addFrm, delFrm, sndFrm, sndTo entran en conflicto con los originales, ya que la propia función, aunque clonada y modificada, sigue llamando a exactamente el mismo botón, y pasan dos cosas:

  1. No funciona nada
  2. Funciona pero en ambos sitios de trabajo

Necesitaría que fueran independientes, y tener cada formulario independiente a su textarea. Con sus botones independientes etc. Y al trabajar con templates, solo se me ocurre llenar todo de código basura, lo cual no lo veo ni siquiera como una opción, o bien, dejar que entren en conflicto algunas cosas, lo cual, lo veo peor opción aún.

No se si me habré explicado bien, espero que si. Muchas gracias de antemano.

1 respuesta 1

0

Vale, resuelto:

Los cambios a realizar fueron:

window.addEventListener("load",()=>{
   var nomVre = new formLOGOSTariff("test-1", "test-atex-1", {key:12});
   var nomVre2 = new formLOGOSTariff("test-2", "test-atex-2", {key:34});
   var nomVre3 = new formLOGOSTariff("test-3", "test-atex-3", {key:56});
   var nomVre4 = new formLOGOSTariff("test-4", "test-atex-4", {key:78});
});

Añadir más variables a la hora de cargar el documento (ignorad la key que eso es otro tema, nada que ver con la solución).

En el constructor añadir un id como objeto al textarea (idtxt) y cambiarlo también en el querySelector final de eventListener con "keyup":

constructor(id, idtxt, params){
      var temCard    = document.querySelector("#temp-card").innerHTML;
      var temPower   = document.querySelector("#temp-power").innerHTML;
      var temEnergy  = document.querySelector("#temp-energy").innerHTML;
      var temForm    = document.querySelector("#temp-form").innerHTML;
      this.id = id;
      this.idtxt = idtxt;
      let foorm = document.createElement('div');
         foorm.innerHTML = temForm;
         document.getElementById(id).appendChild(foorm);

      this.contentForm = foorm.querySelector(".content-form");


      foorm.querySelector(".btn-event-addFrm").addEventListener("click",()=>{
         this.addFrm();
      });
      foorm.querySelector(".btn-event-sndFrm").addEventListener("click", ()=>{
         this.sndFrm();
      });
      foorm.querySelector(".btn-event-delFrm").addEventListener("click", ()=>{
         this.delFrm();
      });

      let card = this.addFrm();

      document.body.querySelector('.btn-event-sndTo').addEventListener("click", ()=>{
         this.sndTo();
      });

      document.getElementById(this.idtxt).addEventListener("keyup", ()=>{
         this.sndTo();
      });
   }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.