ComplementosGuiaNodos

by Edgar Martinez

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="contenedor" class="container-fluid" >

		<div class="row">
			<div class="col-sm bg-primary titulo justify-content-center">
			<center><h1>COMPLEMENTOS CFDI</h1></center>
			</div>
		</div>

		<div class="row">
			<div class="col-sm-12 bg-info webContainer">
			<ul id="XML">
				
			</ul>
			</div>
		</div>

</div>


<template id="tNodo">
<div class="card " style="width: 100%">
  <div class="card-header">
	<div class="row">
		<div class="col-4">
			 {NOMBRE} {VERSION} 
	     <font><span style='vertical-align: bottom;cursor:pointer' id="btn_{IDBODY}" class="minus icon ctrl"></span></font>
		</div>

		<div class="col-8">
      Atributos: {ATRIBUTOS}
		</div>
	</div>

	
  </div>
	<div class="card-body body_{IDBODY2}">
		<ul class="list-group list-group-flush">
			<li class="list-group-item">{DESCRIPCION}</li>
		</ul>
	</div>
  <div class="card-footer text-muted">
   {SUBNODOS}
  </div>
</div>
</template>




<template id="atributos">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#{NODO}_{ATTRIBUTO}">
 {NOMBRE}
</button>


<!-- Modal -->
<div class="modal fade" id="{NODO}_{ATTRIBUTO}" tabindex="-1" role="dialog" aria-labelledby="CCP_ATRIBUTO" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header bg-dark" style='color:white;'>
        <h5 class="modal-title" id="exampleModalLabel">{NOMBRE}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="table_{NODO}_{ATTRIBUTO}">
			  
				   {ATRIBUTOS_ATRIBUTOS}
			 
     ...

CSS

@import url('https://fonts.googleapis.com/css2?family=Comforter&display=swap');

.titulo{
	padding: 10px;
	padding-bottom: 1px;
	border-top-left-radius: 9px;
	border-top-right-radius: 9px;
	margin: 9px;
	margin-bottom: 5px;
	font-family: 'Comforter', cursive;
}
.webContainer{
	padding:10px;
}


/* ICONS */
.icon:before{font:16px/1 'HeydingsCommonIconsRegular';height:16px;width:16px;margin:2px 15px 2px...

JavaScript

////////////////////CONFIGURACION
 var allOpen=false;
 
 
 
 
 
 ////////////////////////////////////////////
 var contenedor=$("#XML");
 var template=$("#tNodo").html();
 var templateAttr=$("#atributos").html();
 
 var url="https://api.npoint.io/5291950cd6dc3ef07487";
 
$.getJSON(url, function( data ){

	var COMPLEMENTOS=data.CFDI.COMPLEMENTOS;
	
	for(var i in COMPLEMENTOS){//SE RECORREN LOS COMPLEMENTOS
	
	   var complemento=COMPLEMENTOS[i];

		 var htmlTemplate=template.replace("{NOMBRE}",complemento.NOMBRE);
		 var version="";
		 if(complemento.hasOwnProperty("VERSION")){
	     version=complemento.VERSION+"v";
		 }
		 	htmlTemplate=htmlTemplate.replace("{IDBODY}",i);
		 	htmlTemplate=htmlTemplate.replace("{IDBODY2}",i);
		  htmlTemplate=htmlTemplate.replace("{VERSION}",version);
		  htmlTemplate=htmlTemplate.replace("{DESCRIPCION}",complemento.DESCRIPCION);
			
////////////// ATRIBUTOS DEL COMPLEMENTO
			var listaAtributos="";
			if(complemento.hasOwnProperty("ATRIBUTOS")){
			   var atributos=complemento.ATRIBUTOS;
				 //console.log("BATMAN",atributos);
				 
					for(var x in atributos){
						var atributo=atributos[x];
						var valoresRemplazables=["{NOMBRE}",
						                         "{NOMBRE}",
																		 "{NODO}",
																		 "{ATTRIBUTO}",
																		 "{NODO}",
																		 "{ATTRIBUTO}"];
						var valoresReales=[atributo.NOMBRE,
						                   atributo.NOMBRE,
															 complemento.NOMBRE.trim().replace(/ /g,''),
															 atributo.NOMBRE.trim().replace(/ /g,''),
															 complemento.NOMBRE.trim().replace(/ /g,''),
															 atributo.NOMBRE.trim().replace(/ /g,'')];
															 
					 var indicaciones=atributo.INDICACIONES;
					 var indicaciones_completas=$("<div/>");
					 var table_indicaciones=$("<table/>");
					 table_indicaciones.addClass("table");
					 
					  var tr=$("<tr/>");
						var...