Update keyword search: Add 'Get section' and 'Get document' functions

app.py

@@ -495,6 +495,7 @@ def search_spec(request: KeywordRequest):
 
         if put:
             spec_content = spec
+            spec_content["full_doc"] = doc
             spec_content["contains"] = {chap: doc[chap] for chap in contents}
 
             results.append(spec_content)

static/script.js

@@ -30,6 +30,12 @@ const resultsList = document.getElementById('results-list');
 const resultsStats = document.getElementById('results-stats');
 const errorMessage = document.getElementById('error-message');
 
+const sectionPopup = document.getElementById('sectionPopup');
+const popupTitle = document.getElementById('popupTitle');
+const popupTextareas = document.getElementById('popupTextareas');
+const copyAllBtn = document.getElementById('copyAllBtn');
+const closePopupBtn = document.querySelector('.close-popup');
+
 // Search mode toggle
 singleModeBtn.addEventListener('click', () => {
     dynamicTitle.textContent = "Find 3GPP Documents";
@@ -86,6 +92,14 @@ keywordSearchBtn.addEventListener("click", async ()=>{
     hideError();
 
     try{
+        let body = {
+            keywords,
+            "case_sensitive": caseSensitiveFilter.checked,
+            "mode": modeFilter.value
+        };
+        if (releaseFilter.value != ""){body.release = releaseFilter.value}
+        if (workingGroupFilter.value != ""){body["working_group"] = workingGroupFilter.value}
+        if (specTypeFilter.value != ""){body["spec_type"] = specTypeFilter.value}
         const response = await fetch("/search-spec", {
             method: "POST",
             headers: {
@@ -94,10 +108,7 @@ keywordSearchBtn.addEventListener("click", async ()=>{
             body: JSON.stringify({
                 keywords,
                 "case_sensitive": caseSensitiveFilter.checked,
-                "release": releaseFilter.value != '' ? releaseFilter.value : null,
-                "mode": modeFilter.value,
-                "working_group": workingGroupFilter != '' ? workingGroupFilter.value : null,
-                "spec_type": specTypeFilter.value
+                "mode": modeFilter.value
             })
         });
 
@@ -242,7 +253,8 @@ function displayKeywordResults(data) {
     
     data.results.forEach(spec => {
         const resultItem = document.createElement("div");
-        resultItem.className = "result-item"
+        resultItem.className = "result-item";
+        
         resultItem.innerHTML = `
             <div class="result-header">
                 <div class="result-id">${spec.id}</div>
@@ -257,13 +269,133 @@ function displayKeywordResults(data) {
                 <p>URL: <a target="_blank" href="${spec.url}">${spec.url}</a></p>
                 <p>Scope: ${spec.scope}</p>
             </div>
+            <div class="result-actions">
+                <button class="get-section-btn btn" data-spec-id="${spec.id}">Get section</button>
+                <button class="get-all-text-btn btn" data-spec-id="${spec.id}">Get document content</button>
+            </div>
         `;
+        
+        // Ajouter le bouton au DOM
         resultsList.appendChild(resultItem);
+        
+        // Récupérer le bouton nouvellement créé
+        const button1 = resultItem.querySelector('.get-section-btn');
+        const button2 = resultItem.querySelector('.get-all-text-btn');
+        
+        // Stocker l'objet directement sur l'élément DOM
+        button1._sections = spec.contains;
+        button2._sections = spec.full_doc;
     });
+
+    document.querySelectorAll('.get-section-btn').forEach(button => {
+      button.addEventListener('click', function() {
+        let specId = this.getAttribute("data-spec-id");
+        let sections = this._sections;
+        openSectionPopup(specId, sections);
+      });
+    });
+
+    document.querySelectorAll('.get-all-text-btn').forEach(button => {
+        button.addEventListener('click', function() {
+            let specId = this.getAttribute("data-spec-id");
+            let sections = this._sections;
+            openSectionPopup(specId, sections);
+        })
+    });
+
     resultsStats.textContent = `Found ${data.results.length} in ${data.search_time.toFixed(2)} seconds`
     resultsContainer.style.display = 'block';
 }
 
+function openSectionPopup(specId, sections) {
+  popupTitle.textContent = `Sections of specification ${specId}`;
+  
+  popupTextareas.innerHTML = '';
+  Object.entries(sections).forEach(([section, content], index) => {
+    const container = document.createElement("div");
+    container.className = "textarea-container";
+
+    const textarea = document.createElement("textarea");
+    textarea.id = `section-${index}`;
+    textarea.value = `${section}\n\n${content}`
+    textarea.readOnly = true;
+
+    const copyBtn = document.createElement('button');
+    copyBtn.className = 'copy-btn';
+    copyBtn.textContent = 'Copy';
+    copyBtn.onclick = () => copyTextarea(`section-${index}`);
+
+    container.appendChild(textarea);
+    container.appendChild(copyBtn);
+    popupTextareas.appendChild(container);
+  });
+  
+  sectionPopup.style.display = 'block';
+  document.body.style.overflow = 'hidden';
+}
+
+function copyTextarea(id) {
+  const textarea = document.getElementById(id);
+  textarea.select();
+  document.execCommand("copy");
+  
+  // Effet visuel pour confirmer la copie
+  const btn = textarea.nextElementSibling;
+  const originalText = btn.textContent;
+  btn.textContent = 'Copied !';
+  btn.style.backgroundColor = '#34a853';
+  btn.style.color = 'white';
+  
+  setTimeout(() => {
+    btn.textContent = originalText;
+    btn.style.backgroundColor = '';
+    btn.style.color = '';
+  }, 1500);
+}
+
+// Fonction pour copier tout le contenu
+copyAllBtn.addEventListener('click', () => {
+  const textareas = popupTextareas.querySelectorAll('textarea');
+  let allContent = '';
+  
+  textareas.forEach((textarea, index) => {
+    allContent += textarea.value;
+    if (index < textareas.length - 1) {
+      allContent += '\n\n---\n\n';
+    }
+  });
+  
+  // Créer un textarea temporaire pour copier le contenu
+  const tempTextarea = document.createElement('textarea');
+  tempTextarea.value = allContent;
+  document.body.appendChild(tempTextarea);
+  tempTextarea.select();
+  document.execCommand('copy');
+  document.body.removeChild(tempTextarea);
+  
+  // Effet visuel pour confirmer la copie
+  const originalText = copyAllBtn.textContent;
+  copyAllBtn.textContent = 'Copied all !';
+  
+  setTimeout(() => {
+    copyAllBtn.textContent = originalText;
+  }, 1500);
+});
+
+// Fermer la popup
+closePopupBtn.addEventListener('click', () => {
+  sectionPopup.style.display = 'none';
+  document.body.style.overflow = ''; // Rétablir le défilement du body
+});
+
+// Fermer la popup en cliquant à l'extérieur
+window.addEventListener('click', (event) => {
+  if (event.target === sectionPopup) {
+    sectionPopup.style.display = 'none';
+    document.body.style.overflow = '';
+  }
+});
+
 // Display batch results
 function displayBatchResults(data) {
     resultsList.innerHTML = '';

static/style.css

@@ -10,6 +10,130 @@
     --shadow-color: rgba(0, 0, 0, 0.1);
 }
 
+.section-popup {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  overflow: auto;
+}
+
+.section-popup-content {
+  position: relative;
+  background-color: white;
+  width: 80%;
+  max-width: 800px;
+  margin: 50px auto;
+  padding: 30px;
+  border-radius: 8px;
+  box-shadow: 0 4px 15px var(--shadow-color);
+  animation: popupFadeIn 0.3s;
+}
+
+@keyframes popupFadeIn {
+  from { opacity: 0; transform: translateY(-20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.popup-header h2 {
+  font-size: 22px;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.close-popup {
+  font-size: 28px;
+  font-weight: bold;
+  color: var(--light-text);
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.close-popup:hover {
+  color: var(--primary-color);
+}
+
+.popup-textareas {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  max-height: 60vh;
+  overflow-y: auto;
+  padding-right: 10px;
+}
+
+.textarea-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.textarea-container textarea {
+  width: 100%;
+  height: 100px;
+  padding: 12px 16px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 16px;
+  font-family: 'Roboto', sans-serif;
+  resize: vertical;
+  outline: none;
+}
+
+.textarea-container textarea:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
+}
+
+.copy-btn {
+  align-self: flex-end;
+  background-color: var(--secondary-color);
+  color: var(--primary-color);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.copy-btn:hover {
+  background-color: #e8f0fe;
+}
+
+.copy-all-btn {
+  display: block;
+  width: 100%;
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 12px 24px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  margin-top: 20px;
+}
+
+.copy-all-btn:hover {
+  background-color: var(--accent-color);
+}
+
 .filter-tab-container {
   margin-top: 20px;
   margin-bottom: 15px;

templates/index.html

@@ -73,8 +73,9 @@
                             </select>
 
                             <select name="spec_type" class="filter-select">
-                                <option value="TR">Technical Report</option>
-                                <option value="TS">Technical Specification</option>
+                                <option value="">All types</option>
+                                <option value="TR">Technical Report (TR)</option>
+                                <option value="TS">Technical Specification (TS)</option>
                             </select>
 
                             <select name="working_group" class="filter-select">
@@ -119,6 +120,19 @@
             </div>
             <div class="results-list" id="results-list"></div>
         </div>
+
+        <div id="sectionPopup" class="section-popup">
+            <div class="section-popup-content">
+                <div class="popup-header">
+                <h2 id="popupTitle">Document Sections</h2>
+                <span class="close-popup">&times;</span>
+                </div>
+                <div id="popupTextareas" class="popup-textareas">
+                <!-- Les textareas seront générés ici dynamiquement -->
+                </div>
+                <button id="copyAllBtn" class="copy-all-btn">Copy all</button>
+            </div>
+        </div>
     </div>
 
     <footer>