1 2window.addEventListener("load", () => { 3 location.hash = ''; 4 document.getElementById('searchInput').addEventListener('input', () => { 5 6 const input = document.getElementById('searchInput'); 7 const resultsContainer = document.getElementById('resultsContainer'); 8 9 const searchTerm = input.value.toLowerCase().trim(); 10 // const filteredData = data.filter(item => item.nombre.toLowerCase().includes(searchTerm)); 11 const filteredData = org.filter(item => item.orpNombreFavorito.toLowerCase().includes(searchTerm)); 12 resultsContainer.innerHTML = ''; 13 14 if (searchTerm.length > 0 && filteredData.length > 0) { 15 let resultado = '<hr><div class="mt-3"><p class="mb-0 fw-light fz-14">Resultados de búsqueda</p></div>'; 16 17 // Agregamos los resultados a la lista 18 filteredData.forEach(item => { 19 let logo = item.orgLogo.length > 0 ? item.orgLogo : "empresa.png"; 20 let parametros = `${item.orgID}, '${item.orpNombreFavorito}', '${logo}' `; 21 resultado += '<div class="result-item d-flex justify-content-between" onclick="siguientePaso2('+parametros+')" style="cursor: pointer;" >' + 22 '<div>' + 23 '<p class="m-0 fw-bold" >'+item.orpNombreFavorito+'</p>' + 24 '</div>' + 25 '<div>' + 26 '<svg width="11" height="17" viewBox="0 0 11 17" fill="none" xmlns="http://www.w3.org/2000/svg" >' + 27 '<path d="M0.656313 2.13275L7.24031 8.71875L0.655311 15.3048L2.07031 16.7187L10.0703 8.71875L2.07031 0.71875L0.656313 2.13275Z" fill="#1E1E1E"/>' + 28 '</svg>' + 29 '</div>' + 30 '</div>'; 31 }); 32 resultsContainer.innerHTML = resultado; 33 resultsContainer.style.display = 'block'; 34 } else { 35 36 resultsContainer.style.display = 'none'; 37 } 38 }); 39 40 const ids = ['cod-operacion', 'cod-barras']; 41 ids.forEach(id => { 42 document.querySelector(`#${id}`).addEventListener ('keypress',function(e){ 43 if(e.which === 10 || e.which === 13) { 44 siguientePaso3(); 45 } 46 }); 47 }); 48 49 50 // LÃGICA DEL SLIDER DE TARJETAS (MOBILE) 51 const grid = document.querySelector(".data-cards-grid"); 52 const sliderDots = document.querySelectorAll(".mobile-slider-controls .step-dot"); 53 54 if (grid && sliderDots.length > 0) { 55 56 grid.addEventListener("scroll", () => { 57 58 const cardWidth = grid.offsetWidth; 59 const scrollPos = grid.scrollLeft; 60 61 const index = Math.round(scrollPos / cardWidth); 62 63 sliderDots.forEach((dot, i) => { 64 if (i === index) { 65 dot.classList.add("active"); 66 } else { 67 dot.classList.remove("active"); 68 } 69 }); 70 }); 71 } 72 73}); 74 75function siguientePaso2(id,nombre,logo){ 76 document.getElementById('paso2').removeAttribute('hidden'); 77 document.getElementById('paso1').setAttribute('hidden',true); 78 location.hash = "paso2"; 79 document.getElementById('organismo-titulo').innerHTML = nombre; 80 document.getElementById("organismo-logo").src="/resources/img/payment/organismos/"+logo ; 81 82 document.getElementById('orgID').value = id; 83 document.getElementById('orgLogo').value = logo; 84 document.getElementById('orgNombre').value = nombre; 85} 86function siguientePaso3(){ 87 document.getElementById('mjeError').setAttribute('hidden',true); 88 89 const orgID = document.getElementById('orgID').value; 90 const orgLogo = document.getElementById('orgLogo').value == '' ? 'empresa.png' : document.getElementById('orgLogo').value ; 91 const orgNombre = document.getElementById('orgNombre').value; 92 93 const nroPago = document.getElementById('cod-operacion').value; 94 const codBarras = document.getElementById('cod-barras').value; 95 //VALIDACION CAMPOS VACIOS 96 if (nroPago.length === 0 && codBarras.length === 0 ){ 97 document.getElementById('mjeError').innerHTML = 'Debe completar alguno de los campos de búsqueda.'; 98 document.getElementById('mjeError').removeAttribute('hidden'); 99 location.hash = "paso2"; 100 setTimeout( 101 function(){ 102 document.getElementById('mjeError').innerHTML = ''; 103 document.getElementById('mjeError').setAttribute('hidden',true); 104 },5000); 105 return false; 106 } 107 //PETICION AJAX 108 const xhr = new XMLHttpRequest(); 109 xhr.open('POST', 'response.php'); 110 xhr.onreadystatechange = function() { 111 if (xhr.readyState === 4) { 112 if (xhr.status === 200) { 113 const datos_pago = JSON.parse(xhr.responseText); 114 //const datos_pago = []; 115 if(datos_pago.length === 0) { 116 document.getElementById('mjeError').innerHTML = 'Boleta de pago no encontrada'; 117 document.getElementById('mjeError').removeAttribute('hidden'); 118 location.hash = "paso2"; 119 setTimeout( 120 function(){ 121 document.getElementById('mjeError').innerHTML = ''; 122 document.getElementById('mjeError').setAttribute('hidden',true); 123 },5000); 124 return false; 125 } 126 document.getElementById('traID').value = datos_pago[0].traID; 127 //cambio titulo si es solo una boleta de pago 128 // if(datos_pago.length === 1){ 129 // document.getElementById('titulo-boletas').innerHTML = 'Te presentamos la boleta disponible para pago.'; 130 // } 131 document.getElementById('paso3').removeAttribute('hidden'); 132 document.getElementById('paso2').setAttribute('hidden',true); 133 location.hash = "paso3"; 134 let formatter = new Intl.NumberFormat('es-AR', { 135 minimumFractionDigits: 2, // MÃnimo de 2 decimales 136 maximumFractionDigits: 2, // Máximo de 2 decimales 137 }); 138 let card =''; 139 datos_pago.forEach(item =>{ 140 card +=' <div class="col-lg-4 mt-4">' + 141 ' <div class="card">' + 142 ' <div class="card-body p-2 border-radius-10">' + 143 ' <div class="d-flex flex-column justify-content-start">' + 144 ' <div class="text-left mt-6 org-fav d-flex align-items-center">
144'+ 145 ' <img class="flex-shrink-0 me-3" src="/resources/img/payment/organismos/'+orgLogo+'">'+ 146 ' <div class="flex-grow-1">'+ 147 ' <p class="mt-3 blue-dark-color bold" style="font-size: 14px" >'+orgNombre+'</p>'+ 148 ' </div>'+ 149 ' </div>'+ 150 ' </div>' + 151 ' </div>' + 152 ' <div class="card-header bg-sections-light border-top-red border-bottom-left-radius-10 border-bottom-right-radius-10">' + 153 ' <ul class="list-group list-group-flush">' + 154 ' <li class="list-group-item bg-sections-light py-3">' + 155 ' <div class="d-flex justify-content-between">' + 156 ' <p class="mb-0 bold">Boleta</p>' + 157 ' <p class="mb-0">'+item.traID+'</p>' + 158 ' </div>' + 159 ' </li>' + 160 ' <li class="list-group-item bg-sections-light py-3">' + 161 ' <div class="d-flex justify-content-between">' + 162 ' <p class="mb-0 bold">1° vencimiento</p>' + 163 ' <p class="mb-0">'+ convertirFecha(item.tfpFecVencimiento) +'</p>' + 164 ' </div>' + 165 ' </li>'; 166 card +='<li class="list-group-item bg-sections-light py-3">' + 167 ' <div class="d-flex justify-content-between">' + 168 ' <p class="mb-0 bold">Monto</p>' + 169 ' <p class="mb-0">$ '+formatter.format(item.tfpMonto1Ven)+'</p>' + 170 ' </div>' + 171 ' </li>'; 172 if(parseFloat(item.tfpMonto2Ven) > 0 ){ 173 card +='<li class="list-group-item bg-sections-light py-3">' + 174 ' <div class="d-flex justify-content-between">' + 175 ' <p class="mb-0 bold">2° vencimiento</p>' + 176 ' <p class="mb-0">'+ convertirFecha(item.tfpFecVencimiento2) +'</p>' + 177 ' </div>' + 178 ' </li>'; 179 } 180 181 if(parseFloat(item.tfpMonto2Ven) > 0 ){ 182 card +='<li class="list-group-item bg-sections-light py-3">' + 183 ' <div class="d-flex justify-content-between">' + 184 ' <p class="mb-0 bold">Monto (2° vto)</p>' + 185 ' <p class="mb-0">$ '+formatter.format(item.tfpMonto2Ven)+'</p>' + 186 ' </div>' + 187 ' </li>'; 188 } 189 card += '</ul>'; 190 card +='<div class="text-center py-4">' + 191 ' <button onclick="siguientePaso4()" class="btn btn-md btn-primary">Ir a pagar</button>' + 192 ' </div>' + 193 ' </div>' + 194 ' </div>' + 195 ' </div>'; 196 }); 197 document.getElementById('cards-pagar').innerHTML = card ; 198 199 } else { 200 console.error('Error al realizar la petición:', xhr.statusText); 201 } 202 } 203 }; 204 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 205 xhr.send('accion=getBoletas&orgID='+orgID+'&nroPago='+nroPago+'&codBarras='+codBarras); 206} 207function siguientePaso4() { 208 const orgID = document.getElementById('orgID').value; 209 const traID = document.getElementById('traID').value; 210 const xhr = new XMLHttpRequest(); 211 xhr.open('POST', 'response.php'); 212 xhr.onreadystatechange = function () { 213 if (xhr.readyState === 4) { 214 if (xhr.status === 200) { 215 console.log(xhr.responseText); 216 const url_pago = xhr.responseText; 217 document.getElementById('iframe_pago').innerHTML = '<iframe onload="cargaIframe();" src="' + url_pago + '" allowfullscreen ></iframe>'; 218 document.getElementById('paso4').removeAttribute('hidden'); 219 document.getElementById('paso3').setAttribute('hidden', true); 220 location.hash = "paso4"; 221 } 222 } 223 }; 224 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 225 xhr.send('accion=checkout&traID=' + traID + '&orgID=' + orgID); 226} 227
228function convertirFecha(fecha) { 229 const parse_fecha = new Date(fecha); 230 231 const año = parse_fecha.getFullYear(); 232 const mes = parse_fecha.getMonth() + 1; // Los meses en JavaScript comienzan en 0 233 const dia = parse_fecha.getDate() + 1; 234 235 // Formatear la fecha 236 const fechaFormateada = `${dia.toString().padStart(2, '0')}/${mes.toString().padStart(2, '0')}/${año}`; 237 238 return fechaFormateada; 239} 240 241function cargaIframe(){ 242 $("#spinner_").fadeOut(400); 243 setTimeout(function (){ 244 $("#iframe_pago").fadeIn(); 245 $("#btnVolver").fadeIn(); 246 247 },500) 248} 249 250function volver (paso = 1){ 251 switch (paso){ 252 case 1: 253 document.getElementById('paso1').removeAttribute('hidden'); 254 document.getElementById('paso2').setAttribute('hidden',true); 255 location.hash = "paso1"; 256 257 const container = document.getElementById('resultsContainer'); 258 if (container) { 259 container.innerHTML = ''; 260 container.style.display = 'none'; // <-- AGREGà ESTA LÃNEA 261 } 262 263 document.getElementById('searchInput').value = ''; 264 break 265 case 2: 266 document.getElementById('paso2').removeAttribute('hidden'); 267 document.getElementById('paso3').setAttribute('hidden',true); 268 document.getElementById('cod-operacion').value = ''; 269 document.getElementById('cod-barras').value = ''; 270 location.hash = "paso2"; 271 break 272 case 3: 273 document.getElementById('paso3').removeAttribute('hidden'); 274 document.getElementById('paso4').setAttribute('hidden',true); 275 location.hash = "paso3"; 276 break 277 } 278 279}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.