Mejoras a nivel de index y pagina de resultados

FernandoTWE · Jun 13, 2024 · 184aaef · 184aaef
1 parent c996f3e
commit 184aaef
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 4 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -33,6 +33,14 @@ const consultaId = generateConsultaId();
     .hidden {
       display: none;
     }
+    .select-container {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 16px;
+    }
+    .select-container label {
+      margin-right: 8px;
+    }
   </style>
 </head>
 <body>
@@ -41,9 +49,40 @@ const consultaId = generateConsultaId();
       <div id="input-card" class="text-center max-w-3xl mx-auto bg-white bg-opacity-90 p-16 rounded-3xl shadow-2xl backdrop-filter backdrop-blur-lg">
         <span class="block mb-4 font-medium uppercase tracking-widest text-xs leading-4 text-gray-700">Test de prueba de análisis</span>
         <h2 class="mb-6 font-heading text-5xl md:text-6xl xl:text-7xl leading-tight text-gray-900">Análisis de IP</h2>
+
+        <!-- Mostrar la IP del usuario -->
+        <p id="user-ip" class="mb-4 xl:mb-6 font-sans font-normal text-lg leading-6 text-gray-700"></p>
+
         <p class="mb-4 xl:mb-6 font-sans font-normal text-lg leading-6 text-gray-700">Ingresa tu IP:</p>
         <input type="text" id="ip-address" class="mb-6 xl:mb-8 font-sans font-normal text-lg leading-6 text-gray-700 p-2 border rounded" placeholder="Ingresa tu IP aquí">
+
         <a id="analyze-button" class="inline-block py-5 px-10 text-xl leading-6 text-white font-medium tracking-tighter font-heading bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50 rounded-xl shadow-xl transition transform hover:-translate-y-1 cursor-pointer">Analizar IP</a>
+
+        <!-- Contenedor para los selectores -->
+        <div class="select-container">
+          <!-- Selector de tipo de usuario -->
+          <div>
+            <label for="user-type" class="block mb-2 font-sans font-normal text-lg leading-6 text-gray-700">Tipo de Usuario:</label>
+            <select id="user-type" class="mb-6 xl:mb-8 font-sans font-normal text-lg leading-6 text-gray-700 p-2 border rounded">
+              <option value="Persona" selected>Individual</option>
+              <option value="Persona empresaria">Pyme</option>
+            </select>
+          </div>
+          <!-- Selector de idioma -->
+          <div>
+            <label for="user-language" class="block mb-2 font-sans font-normal text-lg leading-6 text-gray-700">Idioma:</label>
+            <select id="user-language" class="mb-6 xl:mb-8 font-sans font-normal text-lg leading-6 text-gray-700 p-2 border rounded">
+              <option value="es_ES" selected>Español</option>
+              <option value="en_US">English</option>
+              <option value="de_DE">Alemán</option>
+              <option value="fr_FR">Francés</option>
+              <option value="it_IT">Italiano</option>
+              <option value="gl_ES">Gallego</option>
+              <option value="ca_ES">Catalán</option>
+              <option value="eu_ES">Euskera</option>
+            </select>
+          </div>
+        </div>
       </div>
       <div id="loading-message" class="hidden text-center max-w-3xl mx-auto bg-white bg-opacity-90 p-16 rounded-3xl shadow-2xl backdrop-filter backdrop-blur-lg">
         <div class="loading-animation"></div>
@@ -62,16 +101,43 @@ const consultaId = generateConsultaId();
       const consultaId = scriptElement?.getAttribute('data-consulta-id') ?? '';
       console.log('Generated consultaId:', consultaId);
 
-      const sendIPToWebhook = async (ip, consultaId) => {
+      // Obtener la IP del usuario
+      const getUserIP = async () => {
+        try {
+          const response = await fetch('https://api.ipify.org?format=json');
+          const data = await response.json();
+          return data.ip;
+        } catch (error) {
+          console.error('Error fetching IP:', error);
+          return null;
+        }
+      };
+
+      const sendIPToWebhook = async (ip, userType, userLanguage, consultaId) => {
         await fetch("https://webapi.procesio.app/api/webhooks/launch/62e19db0-a379-4877-9fac-e50850900ca4", {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ ip, consulta_id: consultaId })
+          body: JSON.stringify({ ip, userType, userLanguage, consulta_id: consultaId })
         });
       };
 
+      // Mostrar la IP del usuario en el DOM
+      const showUserIP = async () => {
+        const userIP = await getUserIP();
+        if (userIP) {
+          document.getElementById('user-ip').textContent = `Tu IP detectada es ${userIP}, pero puedes usar cualquier otra para la prueba.`;
+          document.getElementById('ip-address').value = userIP;
+        } else {
+          document.getElementById('user-ip').textContent = 'No se pudo detectar tu IP. Ingresa tu IP manualmente.';
+        }
+      };
+
+      showUserIP();
+
       document.getElementById('analyze-button').addEventListener('click', async () => {
         const ip = document.getElementById('ip-address').value;
+        const userType = document.getElementById('user-type').value;
+        const userLanguage = document.getElementById('user-language').value;
         if (!ip) {
           alert("Por favor, introduce una IP.");
           return;
@@ -80,7 +146,7 @@ const consultaId = generateConsultaId();
         document.getElementById('input-card').classList.add('hidden');
         document.getElementById('loading-message').classList.remove('hidden');
 
-        await sendIPToWebhook(ip, consultaId);
+        await sendIPToWebhook(ip, userType, userLanguage, consultaId);
 
         setTimeout(() => {
           document.getElementById('loading-message').classList.add('hidden');

diff --git a/src/pages/resultados.astro b/src/pages/resultados.astro
@@ -109,7 +109,7 @@
 
     const fetchAnalysisResult = async (consultaId) => {
       try {
-        const response = await fetch(`https://e863b.twidget.io/analisisip?consulta_id=${consultaId}`);
+        const response = await fetch(`https://e863b.twidget.io/analisisip/${consultaId}`);
         if (!response.ok) throw new Error('Network response was not ok');
         const data = await response.json();
         console.log('Fetched data:', data);