Fix JS

static/script.js

@@ -334,6 +334,13 @@ function createCarousel(carouselTitle, id, cards) {
 
 function categorizeRequirements(max_categories) {
     isRequirements = false;
+    document.getElementById('categorizeReq').setAttribute('disabled', 'true');
+    document.getElementById('downloadZip').setAttribute('disabled', 'true');
+    document.getElementById('searchReq').setAttribute('disabled', 'true');
+    document.getElementById('progressText').classList.remove('hidden');
+    document.getElementById('loadingBar').classList.remove('hidden');
+    document.getElementById('progressText').textContent = "Grouping requirements by their context ...";
+
     fetch("https://game4all-reqroup.hf.space/reqs/categorize_requirements", {
         method: "POST",
         headers: {
@@ -404,7 +411,7 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
     const criticism = item.criticism;
 
     // Récupérer le titre de la catégorie
-    const categoryTitle = document.querySelector(`#category-${index} h2`)?.textContent || `Catégorie ${index + 1}`;
+    const categoryTitle = document.querySelector(`#category-${solution['Category_Id']} h2`)?.textContent || `Catégorie ${solution['Category_Id'] + 1}`;
 
     // Container pour chaque solution
     const solutionCard = document.createElement('div');
@@ -424,7 +431,7 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
                 <h3 class="text-sm font-semibold text-gray-800">${categoryTitle}</h3>
                 <div class="flex items-center space-x-2 bg-white px-3 py-1 rounded-full border">
                     <button class="version-btn-left w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors ${currentVersion === 1 ? 'opacity-50 cursor-not-allowed' : ''}" 
-                            data-solution-index="${index}"
+                            data-solution-index="${solution['Category_Id']}"
                             ${currentVersion === 1 ? 'disabled' : ''}>
                         <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
@@ -432,7 +439,7 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
                     </button>
                     <span class="text-xs font-medium text-gray-600 min-w-[60px] text-center version-indicator">Version ${currentVersion}</span>
                     <button class="version-btn-right w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors ${currentVersion === totalVersions ? 'opacity-50 cursor-not-allowed' : ''}" 
-                            data-solution-index="${index}"
+                            data-solution-index="${solution['Category_Id']}"
                             ${currentVersion === totalVersions ? 'disabled' : ''}>
                         <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
@@ -449,10 +456,10 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
     // Contenu de l'accordéon
     const content = document.createElement('div');
     content.className = `accordion-content px-4 py-3 space-y-3`;
-    content.id = `content-${index}`;
+    content.id = `content-${solution['Category_Id']}`;
 
     // Vérifier l'état d'ouverture précédent
-    const isOpen = accordionStates[index] || false;
+    const isOpen = accordionStates[solution['Category_Id']] || false;
     if (!isOpen) {
         content.classList.add('hidden');
     } else {
@@ -552,11 +559,11 @@ function createSingleAccordionItem(item, index, versionIndex, solutionCriticized
         if (isCurrentlyOpen) {
             content.classList.add('hidden');
             icon.style.transform = 'rotate(0deg)';
-            accordionStates[index] = false;
+            accordionStates[solution['Category_Id']] = false;
         } else {
             content.classList.remove('hidden');
             icon.style.transform = 'rotate(180deg)';
-            accordionStates[index] = true;
+            accordionStates[solution['Category_Id']] = true;
         }
     });