GameSentenceMiner 2.18.15__py3-none-any.whl → 2.18.16__py3-none-any.whl

GameSentenceMiner/web/static/js/search.js

@@ -1,6 +1,3 @@
-// Search Page JavaScript
-// Dependencies: shared.js (provides utility functions like escapeHtml, escapeRegex)
-
 class SentenceSearchApp {
     constructor() {
         this.searchInput = document.getElementById('searchInput');
@@ -14,6 +11,9 @@ class SentenceSearchApp {
         this.searchStats = document.getElementById('searchStats');
         this.searchTime = document.getElementById('searchTime');
         this.regexCheckbox = document.getElementById('regexCheckbox');
+        this.deleteLinesBtn = document.getElementById('deleteLinesBtn');
+        this.selectAllBtn = document.getElementById('selectAllBtn');
+        this.pageSizeFilter = document.getElementById('pageSizeFilter');
         
         this.currentPage = 1;
         this.pageSize = 20;
@@ -21,30 +21,31 @@ class SentenceSearchApp {
         this.currentQuery = '';
         this.totalResults = 0;
         this.currentUseRegex = false;
-
-        // Move initialization logic to async method
         this.initialize();
     }
 
     async initialize() {
-        // Check for ?q= parameter and pre-fill input
         const urlParams = new URLSearchParams(window.location.search);
         const qParam = urlParams.get('q');
         if (qParam) {
             this.searchInput.value = qParam;
         }
 
+        if (this.pageSizeFilter) {
+            this.pageSizeFilter.value = this.pageSize.toString();
+        } else {
+            console.error('Page size filter element not found!');
+        }
+
         this.initializeEventListeners();
         await this.loadGamesList();
 
-        // Trigger search after games list loads if q param is present
         if (qParam) {
             this.performSearch();
         }
     }
     
     initializeEventListeners() {
-        // Debounced search input
         this.searchInput.addEventListener('input', (e) => {
             clearTimeout(this.searchTimeout);
             this.searchTimeout = setTimeout(() => {
@@ -52,11 +53,17 @@ class SentenceSearchApp {
             }, 300);
         });
         
-        // Filter changes
         this.gameFilter.addEventListener('change', () => this.performSearch());
         this.sortFilter.addEventListener('change', () => this.performSearch());
         
-        // Pagination
+        if (this.pageSizeFilter) {
+            this.pageSizeFilter.addEventListener('change', () => {
+                this.pageSize = parseInt(this.pageSizeFilter.value);
+                this.currentPage = 1;
+                this.performSearch();
+            });
+        }
+        
         document.getElementById('prevPage').addEventListener('click', () => {
             if (this.currentPage > 1) {
                 this.currentPage--;
@@ -69,12 +76,23 @@ class SentenceSearchApp {
             this.performSearch();
         });
 
-        // Regex checkbox toggle triggers search
         if (this.regexCheckbox) {
             this.regexCheckbox.addEventListener('change', () => {
                 this.performSearch();
             });
         }
+
+        if (this.deleteLinesBtn) {
+            this.deleteLinesBtn.addEventListener('click', () => {
+                this.showDeleteConfirmation();
+            });
+        }
+
+        if (this.selectAllBtn) {
+            this.selectAllBtn.addEventListener('click', () => {
+                this.toggleSelectAll();
+            });
+        }
     }
     
     async loadGamesList() {
@@ -84,7 +102,6 @@ class SentenceSearchApp {
             
             if (response.ok && data.games) {
                 const gameSelect = this.gameFilter;
-                // Clear existing options except "All Games"
                 gameSelect.innerHTML = '<option value="">All Games</option>';
                 
                 data.games.forEach(game => {
@@ -105,14 +122,12 @@ class SentenceSearchApp {
         const sortBy = this.sortFilter.value;
         const useRegex = this.regexCheckbox && this.regexCheckbox.checked;
 
-        // Reset to first page for new searches or regex toggle
         if (query !== this.currentQuery || useRegex !== this.currentUseRegex) {
             this.currentPage = 1;
         }
         this.currentQuery = query;
         this.currentUseRegex = useRegex;
 
-        // Show appropriate state
         if (!query) {
             this.showEmptyState();
             return;
@@ -156,7 +171,6 @@ class SentenceSearchApp {
         this.hideAllStates();
         this.totalResults = data.total;
         
-        // Update stats
         const resultText = data.total === 1 ? 'result' : 'results';
         this.searchStats.textContent = `${data.total.toLocaleString()} ${resultText} found`;
         this.searchTime.textContent = `Search completed in ${searchTime}ms`;
@@ -165,8 +179,7 @@ class SentenceSearchApp {
             this.showNoResultsState();
             return;
         }
-        
-        // Render results
+
         this.searchResults.innerHTML = '';
         data.results.forEach(result => {
             const resultElement = this.createResultElement(result);
@@ -175,20 +188,39 @@ class SentenceSearchApp {
         
         this.updatePagination(data);
         this.searchResults.style.display = 'block';
+        this.updateDeleteButtonState();
     }
     
     createResultElement(result) {
         const div = document.createElement('div');
         div.className = 'search-result';
+        div.style.display = 'flex';
+        div.style.alignItems = 'flex-start';
+        div.style.gap = '12px';
+        
+        const checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.className = 'line-checkbox';
+        checkbox.dataset.lineId = result.id;
+        checkbox.checked = false;
+        
+        checkbox.addEventListener('change', () => {
+            this.updateDeleteButtonState();
+        });
+
+        if (typeof result.sentence !== 'string') {
+            console.warn('Unexpected sentence format:', result.sentence);
+            result.sentence = JSON.stringify(result.sentence);
+        }
         
-        // Highlight search terms
         const highlightedText = this.highlightSearchTerms(result.sentence, this.currentQuery);
         
-        // Format timestamp to ISO format
         const date = new Date(result.timestamp * 1000);
         const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${date.toTimeString().split(' ')[0]}`;
         
-        div.innerHTML = `
+        const contentDiv = document.createElement('div');
+        contentDiv.style.flex = '1';
+        contentDiv.innerHTML = `
             <div class="result-sentence">${highlightedText}</div>
             <div class="result-metadata">
                 <div class="metadata-item">
@@ -207,6 +239,9 @@ class SentenceSearchApp {
             </div>
         `;
         
+        div.appendChild(checkbox);
+        div.appendChild(contentDiv);
+        
         return div;
     }
     
@@ -221,7 +256,6 @@ class SentenceSearchApp {
                 const pattern = new RegExp(query, 'gi');
                 return escapedText.replace(pattern, '<span class="search-highlight">$&</span>');
             } catch (e) {
-                // If invalid regex, just return escaped text
                 return escapedText;
             }
         } else {
@@ -288,10 +322,143 @@ class SentenceSearchApp {
         this.errorMessage.style.display = 'none';
         this.searchResults.style.display = 'none';
         document.getElementById('pagination').style.display = 'none';
+        
+        if (this.selectAllBtn) {
+            this.selectAllBtn.disabled = true;
+            this.selectAllBtn.textContent = 'Select All';
+        }
+    }
+
+    updateDeleteButtonState() {
+        const selectedCount = this.getSelectedCount();
+        
+        if (this.deleteLinesBtn) {
+            this.deleteLinesBtn.disabled = selectedCount === 0;
+            this.deleteLinesBtn.textContent = selectedCount > 0
+                ? `Delete Selected (${selectedCount})`
+                : 'Delete Selected';
+        }
+
+        if (this.selectAllBtn) {
+            const totalVisible = document.querySelectorAll('.line-checkbox').length;
+            
+            if (totalVisible === 0) {
+                this.selectAllBtn.disabled = true;
+                this.selectAllBtn.textContent = 'Select All';
+            } else {
+                this.selectAllBtn.disabled = false;
+                if (this.areAllVisibleSelected()) {
+                    this.selectAllBtn.textContent = 'Deselect All';
+                } else {
+                    this.selectAllBtn.textContent = 'Select All';
+                }
+            }
+        }
+    }
+
+    getSelectedLineIds() {
+        const selectedIds = [];
+        const checkboxes = document.querySelectorAll('.line-checkbox:checked');
+        
+        checkboxes.forEach(checkbox => {
+            const lineId = checkbox.dataset.lineId;
+            selectedIds.push(lineId);
+        });
+        
+        return selectedIds;
+    }
+
+    getSelectedCount() {
+        return document.querySelectorAll('.line-checkbox:checked').length;
+    }
+
+    areAllVisibleSelected() {
+        const allCheckboxes = document.querySelectorAll('.line-checkbox');
+        const selectedCheckboxes = document.querySelectorAll('.line-checkbox:checked');
+        return allCheckboxes.length > 0 && allCheckboxes.length === selectedCheckboxes.length;
+    }
+
+    toggleSelectAll() {
+        const visibleCheckboxes = document.querySelectorAll('.line-checkbox');
+        const shouldSelect = !this.areAllVisibleSelected();
+        
+        visibleCheckboxes.forEach(checkbox => {
+            checkbox.checked = shouldSelect;
+        });
+        
+        this.updateDeleteButtonState();
+    }
+
+    showDeleteConfirmation() {
+        const count = this.getSelectedCount();
+        if (count === 0) return;
+
+        const message = `Are you sure you want to delete ${count} selected sentence${count > 1 ? 's' : ''}? This action cannot be undone.`;
+        
+        document.getElementById('deleteConfirmationMessage').textContent = message;
+        openModal('deleteConfirmationModal');
+    }
+
+    async deleteSelectedLines() {
+        const lineIds = this.getSelectedLineIds();
+        
+        if (lineIds.length === 0) {
+            return;
+        }
+        
+        try {
+            this.showLoadingState();
+            
+            const response = await fetch('/api/delete-sentence-lines', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ line_ids: lineIds })
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(data.error || 'Failed to delete sentences');
+            }
+
+            document.querySelectorAll('.line-checkbox:checked').forEach(cb => cb.checked = false);
+            this.updateDeleteButtonState();
+
+            await this.performSearch();
+
+            this.showMessage('Success', `Successfully deleted ${data.deleted_count} sentence${data.deleted_count > 1 ? 's' : ''}`);
+
+        } catch (error) {
+            this.showErrorState(`Failed to delete sentences: ${error.message}`);
+            console.error('Delete error:', error);
+        }
+    }
+
+    showMessage(title, message) {
+        document.getElementById('messageModalTitle').textContent = title;
+        document.getElementById('messageModalText').textContent = message;
+        openModal('messageModal');
     }
 }
 
-// Initialize the app when DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
-    new SentenceSearchApp();
+    const app = new SentenceSearchApp();
+    
+    const closeButtons = document.querySelectorAll('[data-action="closeModal"]');
+    closeButtons.forEach(btn => {
+        const modalId = btn.getAttribute('data-modal');
+        if (modalId) {
+            btn.addEventListener('click', () => closeModal(modalId));
+        }
+    });
+    
+    const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
+    if (confirmDeleteBtn) {
+        confirmDeleteBtn.addEventListener('click', () => {
+            closeModal('deleteConfirmationModal');
+            app.deleteSelectedLines();
+        });
+    }
 });