From 00db4777e5cfde0fa0b4ca2612337720417cc484 Mon Sep 17 00:00:00 2001
From: echevarriafernando <4274294+echevarriafernando@users.noreply.github.com>
Date: Fri, 1 Dec 2023 20:05:16 +0100
Subject: [PATCH] Update bin_table.html

Implemented filterTable and resetTable functions to dynamically filter table rows based on difficulty level and to reset the view.
---
 _includes/bin_table.html | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/_includes/bin_table.html b/_includes/bin_table.html
index f1883f7..f398180 100644
--- a/_includes/bin_table.html
+++ b/_includes/bin_table.html
@@ -4,19 +4,19 @@
       <ul class="vm-stats">
         <li class="total-vms">
           <span id="total-vms"></span>
-          <span>Total VMs</span>
+          <span onclick="resetTable()">Total VMs</span>
         </li>
         <li>
           <span id="easy-vms"></span>
-          <span class="badge badge-easy">Easy</span>
+          <span class="badge badge-easy" onclick="filterTable('easy')">Easy</span>
         </li>
         <li>
           <span id="medium-vms"></span>
-          <span class="badge badge-medium">Medium</span>
+          <span class="badge badge-medium" onclick="filterTable('medium')">Medium</span>
         </li>
         <li>
           <span id="hard-vms"></span>
-          <span class="badge badge-hard">Hard</span>
+          <span class="badge badge-hard" onclick="filterTable('hard')">Hard</span>
         </li>
       </ul>
       <div id="bin-search-wrapper">
@@ -243,6 +243,26 @@ <h1 class="card-title">${name}</h1>
     }, 2000);
   }
 
+   function filterTable(difficulty) {
+      var rows = document.getElementById('bin-table').getElementsByTagName('tr');
+      for (var i = 1; i < rows.length; i++) { // Comienza desde 1 para omitir el encabezado de la tabla
+          var row = rows[i];
+          var levelButton = row.querySelector('.level-btn'); // Encuentra el botón de nivel en la fila
+
+          if (levelButton && levelButton.classList.contains(difficulty)) {
+              row.style.display = ''; // Muestra la fila si coincide con la dificultad
+          } else {
+              row.style.display = 'none'; // Oculta la fila si no coincide
+          }
+      }
+  }
+
+  function resetTable() {
+    var rows = document.getElementById('bin-table').getElementsByTagName('tr');
+    for (var i = 1; i < rows.length; i++) {
+        rows[i].style.display = ''; // Muestra todas las filas
+    }
+  }
   
   function showWriteups(name) {
     document.querySelector('body').style.overflow = 'hidden';
@@ -347,4 +367,4 @@ <h1 class="card-title">${name}</h1>
 
   setStats();
   setup();
-</script>
\ No newline at end of file
+</script>