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
.
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:
- No funciona nada
- 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.