Started adding advanced search

app/blueprints/products.py

@@ -17,6 +17,18 @@ def product_finder():
     """Serve the product finder quiz page"""
     return render_template('product_finder.html')
 
+@products_bp.route('/index')
+@login_required
+def quiz_index():
+    """Alternative route for product finder"""
+    return render_template('product_finder.html')
+
+@products_bp.route('/advanced-search')
+@login_required
+def advanced_search():
+    """Serve the advanced search page"""
+    return render_template('advanced_search.html')
+
 @products_bp.route('/css/<path:filename>')
 def serve_css(filename):
     """Serve CSS files"""

app/static/css/styles.css

@@ -732,3 +732,166 @@ body {
     margin: 5px 0;
     color: #666;
 }
+
+/* Search Bar Component */
+.search-container {
+    padding: 20px 30px;
+    background-color: #ffffff;
+    border-bottom: 2px solid #e0e0e0;
+}
+
+.search-wrapper {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.search-input-wrapper {
+    position: relative;
+    margin-bottom: 15px;
+}
+
+.search-input {
+    width: 100%;
+    padding: 12px 16px;
+    font-size: 16px;
+    border: 2px solid #333;
+    border-radius: 8px;
+    outline: none;
+    transition: all 0.3s ease;
+    background-color: white;
+}
+
+.search-input:focus {
+    border-color: #6a4c93;
+    box-shadow: 0 0 0 3px rgba(106, 76, 147, 0.1);
+}
+
+.search-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: white;
+    border: 2px solid #333;
+    border-top: none;
+    border-radius: 0 0 8px 8px;
+    max-height: 300px;
+    overflow-y: auto;
+    display: none;
+    z-index: 1000;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.search-dropdown-item {
+    padding: 12px 16px;
+    cursor: pointer;
+    border-bottom: 1px solid #e0e0e0;
+    transition: background-color 0.2s ease;
+}
+
+.search-dropdown-item:last-child {
+    border-bottom: none;
+}
+
+.search-dropdown-item:hover {
+    background-color: #f5f5f5;
+}
+
+.search-dropdown-item.selected {
+    background-color: #e8e0f0;
+    font-weight: bold;
+}
+
+.search-dropdown-item-title {
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 4px;
+}
+
+.search-dropdown-item-code {
+    font-size: 12px;
+    color: #666;
+}
+
+.search-buttons {
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+}
+
+.search-btn {
+    padding: 10px 20px;
+    font-size: 14px;
+    font-weight: bold;
+    border: 2px solid #333;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background-color: white;
+    color: #333;
+}
+
+.search-btn:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.search-btn:active:not(:disabled) {
+    transform: translateY(0);
+}
+
+.search-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.view-btn {
+    background-color: #6a4c93;
+    color: white;
+    border-color: #6a4c93;
+}
+
+.view-btn:hover:not(:disabled) {
+    background-color: #563d7a;
+    border-color: #563d7a;
+}
+
+.search-btn-action {
+    background-color: #4CAF50;
+    color: white;
+    border-color: #4CAF50;
+}
+
+.search-btn-action:hover:not(:disabled) {
+    background-color: #45a049;
+    border-color: #45a049;
+}
+
+.advanced-btn {
+    background-color: #2196F3;
+    color: white;
+    border-color: #2196F3;
+}
+
+.advanced-btn:hover:not(:disabled) {
+    background-color: #0b7dda;
+    border-color: #0b7dda;
+}
+
+/* Dropdown scrollbar */
+.search-dropdown::-webkit-scrollbar {
+    width: 8px;
+}
+
+.search-dropdown::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+.search-dropdown::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+}
+
+.search-dropdown::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}

app/static/js/script.js

@@ -1445,3 +1445,321 @@ function navigateToHistory(index) {
 
 // Start the quiz when page loads
 window.addEventListener('DOMContentLoaded', init);
+
+// ===== SEARCH BAR FUNCTIONALITY =====
+
+// Search state variables
+let searchMatches = [];
+let selectedSearchIndex = -1;
+
+// Toggle search bar visibility based on current screen
+function toggleSearchBar() {
+    const searchContainer = document.getElementById('searchContainer');
+    const currentKey = history.length > 0 ? history[history.length - 1] : 'start';
+    
+    if (currentKey === 'start') {
+        searchContainer.style.display = 'block';
+    } else {
+        searchContainer.style.display = 'none';
+        // Clear search when hiding
+        clearSearch();
+    }
+}
+
+// Clear search state
+function clearSearch() {
+    const searchInput = document.getElementById('searchInput');
+    const searchDropdown = document.getElementById('searchDropdown');
+    const viewBtn = document.getElementById('viewBtn');
+    
+    if (searchInput) searchInput.value = '';
+    if (searchDropdown) {
+        searchDropdown.style.display = 'none';
+        searchDropdown.innerHTML = '';
+    }
+    if (viewBtn) viewBtn.disabled = true;
+    
+    searchMatches = [];
+    selectedSearchIndex = -1;
+}
+
+// Filter products by search term
+function filterProductsBySearch(searchTerm) {
+    if (!searchTerm || searchTerm.trim().length < 2) {
+        return [];
+    }
+    
+    const term = searchTerm.toLowerCase().trim();
+    
+    return productData.filter(product => {
+        const description = (product.description || '').toLowerCase();
+        const productCode = (product.productCode || '').toLowerCase();
+        const category = (product.category || '').toLowerCase();
+        const baseType = (product.baseType || '').toLowerCase();
+        const subTypeWindow = (product.subType?.window || '').toLowerCase();
+        const subTypeDoor = (product.subType?.door || '').toLowerCase();
+        
+        return description.includes(term) ||
+               productCode.includes(term) ||
+               category.includes(term) ||
+               baseType.includes(term) ||
+               subTypeWindow.includes(term) ||
+               subTypeDoor.includes(term);
+    });
+}
+
+// Update search dropdown with matches
+function updateSearchDropdown(matches) {
+    const dropdown = document.getElementById('searchDropdown');
+    const viewBtn = document.getElementById('viewBtn');
+    
+    if (!matches || matches.length === 0) {
+        dropdown.style.display = 'none';
+        dropdown.innerHTML = '';
+        viewBtn.disabled = true;
+        selectedSearchIndex = -1;
+        return;
+    }
+    
+    // Show only first 10 matches
+    const displayMatches = matches.slice(0, 10);
+    
+    dropdown.innerHTML = displayMatches.map((product, index) => {
+        const prodCode = product.productCode || product.id;
+        const desc = product.description || 'No description';
+        const isSelected = index === selectedSearchIndex ? 'selected' : '';
+        
+        return `
+            <div class="search-dropdown-item ${isSelected}" 
+                 data-index="${index}" 
+                 data-product-code="${prodCode}"
+                 onclick="selectSearchItem(${index})">
+                <div class="search-dropdown-item-title">${desc}</div>
+                <div class="search-dropdown-item-code">${prodCode}</div>
+            </div>
+        `;
+    }).join('');
+    
+    if (matches.length > 10) {
+        dropdown.innerHTML += `
+            <div class="search-dropdown-item" style="font-style: italic; color: #999; cursor: pointer;"
+                 onclick="handleSearchResults()">
+                + ${matches.length - 10} more results... (click to view all)
+            </div>
+        `;
+    }
+    
+    dropdown.style.display = 'block';
+}
+
+// Select a search item
+function selectSearchItem(index, closeDropdown = true) {
+    selectedSearchIndex = index;
+    const viewBtn = document.getElementById('viewBtn');
+    const searchInput = document.getElementById('searchInput');
+    const searchDropdown = document.getElementById('searchDropdown');
+    
+    viewBtn.disabled = false;
+    
+    // Update search input with selected product description
+    if (searchMatches[index]) {
+        const selectedProduct = searchMatches[index];
+        const desc = selectedProduct.description || selectedProduct.DESCRIPTION || 'No description';
+        searchInput.value = desc;
+    }
+    
+    // Hide dropdown after selection (unless using keyboard navigation)
+    if (closeDropdown) {
+        searchDropdown.style.display = 'none';
+    }
+    
+    // Update visual selection
+    const items = document.querySelectorAll('.search-dropdown-item');
+    items.forEach((item, i) => {
+        if (i === index) {
+            item.classList.add('selected');
+        } else {
+            item.classList.remove('selected');
+        }
+    });
+}
+
+// Handle View button click
+function handleViewProduct() {
+    if (selectedSearchIndex >= 0 && selectedSearchIndex < searchMatches.length) {
+        const product = searchMatches[selectedSearchIndex];
+        const prodCode = product.productCode || product.id;
+        
+        // Clear search and hide dropdown
+        clearSearch();
+        
+        // Navigate to product
+        showProductByCode(prodCode);
+    }
+}
+
+// Handle Search button click (show results grid)
+function handleSearchResults() {
+    const searchInput = document.getElementById('searchInput');
+    const searchTerm = searchInput.value.trim();
+    
+    if (!searchTerm || searchTerm.length < 2) {
+        alert('Please enter at least 2 characters to search.');
+        return;
+    }
+    
+    const matches = filterProductsBySearch(searchTerm);
+    
+    if (matches.length === 0) {
+        alert('No products found matching "' + searchTerm + '".');
+        return;
+    }
+    
+    // Store search results temporarily
+    searchMatches = matches;
+    
+    // Clear search UI
+    clearSearch();
+    
+    // Display results in grid format (similar to showFilteredProducts)
+    showSearchResultsGrid(matches, searchTerm);
+}
+
+// Show search results in a grid
+function showSearchResultsGrid(matches, searchTerm) {
+    const contentDiv = document.getElementById('content');
+    
+    let html = `
+        <div class="result-container">
+            <div class="result-title">Found ${matches.length} Product${matches.length > 1 ? 's' : ''}</div>
+            <div class="result-details">
+                <p style="margin-bottom: 20px;">Search results for: <strong>"${searchTerm}"</strong></p>
+            </div>
+            <div class="products-grid">
+    `;
+    
+    matches.forEach(product => {
+        const prodCode = product.productCode || product.id;
+        const desc = product.description || product.DESCRIPTION || 'No description';
+        const materials = product.materials ? product.materials.join(', ') : 'N/A';
+        const colors = product.colors ? product.colors.join(', ') : 'N/A';
+        const baseType = product.baseType || 'N/A';
+        const subType = product.subType?.window || product.subType?.door || 'N/A';
+        
+        html += `
+            <div class="product-card" onclick="showProductByCode('${prodCode}')">
+                <h3>${desc}</h3>
+                <p style="color: #999; font-size: 0.95em; margin-top: 5px;">${prodCode}</p>
+                <div style="font-size: 0.9em; color: #666; margin-top: 10px;">
+                    <strong>Type:</strong> ${baseType}${subType !== 'N/A' ? ' - ' + subType : ''}<br>
+                    <strong>Materials:</strong> ${materials}<br>
+                    <strong>Colors:</strong> ${colors}
+                </div>
+            </div>
+        `;
+    });
+    
+    html += `
+            </div>
+            <div class="result-actions">
+                <button class="back-button" onclick="startOver()">← Back to Start</button>
+                <button class="back-button" onclick="shareCurrentPage()">🔗 Share</button>
+            </div>
+        </div>
+    `;
+    
+    contentDiv.innerHTML = html;
+    
+    // Update history to track search results
+    history.push('search-results');
+    updateBreadcrumb();
+}
+
+// Handle Advanced Search button click
+function handleAdvancedSearch() {
+    // Navigate to advanced search page
+    window.location.href = '/quiz/advanced-search';
+}
+
+// Set up search input event listeners
+function initSearchBar() {
+    const searchInput = document.getElementById('searchInput');
+    const searchDropdown = document.getElementById('searchDropdown');
+    
+    if (!searchInput) return;
+    
+    // Input event for real-time filtering
+    searchInput.addEventListener('input', function(e) {
+        const searchTerm = e.target.value.trim();
+        
+        if (searchTerm.length < 2) {
+            searchMatches = [];
+            updateSearchDropdown([]);
+            return;
+        }
+        
+        searchMatches = filterProductsBySearch(searchTerm);
+        updateSearchDropdown(searchMatches);
+        
+        // Reset selection
+        selectedSearchIndex = -1;
+        document.getElementById('viewBtn').disabled = true;
+    });
+    
+    // Keyboard navigation (arrow keys and enter)
+    searchInput.addEventListener('keydown', function(e) {
+        if (searchMatches.length === 0) return;
+        
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            selectedSearchIndex = Math.min(selectedSearchIndex + 1, searchMatches.length - 1);
+            updateSearchDropdown(searchMatches);
+            selectSearchItem(selectedSearchIndex, false); // Keep dropdown open
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            selectedSearchIndex = Math.max(selectedSearchIndex - 1, -1);
+            if (selectedSearchIndex >= 0) {
+                updateSearchDropdown(searchMatches);
+                selectSearchItem(selectedSearchIndex, false); // Keep dropdown open
+            } else {
+                document.getElementById('viewBtn').disabled = true;
+            }
+        } else if (e.key === 'Enter') {
+            e.preventDefault();
+            if (selectedSearchIndex >= 0) {
+                handleViewProduct();
+            } else {
+                handleSearchResults();
+            }
+        } else if (e.key === 'Escape') {
+            clearSearch();
+        }
+    });
+    
+    // Click outside to close dropdown
+    document.addEventListener('click', function(e) {
+        if (!searchInput.contains(e.target) && !searchDropdown.contains(e.target)) {
+            searchDropdown.style.display = 'none';
+        }
+    });
+}
+
+// Override loadContent to toggle search bar
+const originalLoadContent = loadContent;
+loadContent = function(key) {
+    originalLoadContent(key);
+    toggleSearchBar();
+};
+
+// Override startOver to show search bar
+const originalStartOver = startOver;
+startOver = function() {
+    originalStartOver();
+    toggleSearchBar();
+};
+
+// Initialize search bar when page loads
+window.addEventListener('DOMContentLoaded', function() {
+    initSearchBar();
+    toggleSearchBar();
+});

app/templates/advanced_search.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>Advanced Search - Product Finder</title>
+    <link rel="stylesheet" href="{{ url_for('products.serve_css', filename='styles.css') }}">
+    <style>
+        .wip-container {
+            text-align: center;
+            padding: 60px 40px;
+        }
+        
+        .wip-icon {
+            font-size: 80px;
+            margin-bottom: 20px;
+        }
+        
+        .wip-title {
+            font-size: 32px;
+            font-weight: bold;
+            color: #333;
+            margin-bottom: 15px;
+        }
+        
+        .wip-subtitle {
+            font-size: 18px;
+            color: #666;
+            margin-bottom: 30px;
+        }
+        
+        .wip-details {
+            max-width: 600px;
+            margin: 0 auto 40px;
+            padding: 20px;
+            background-color: #f9f9f9;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            text-align: left;
+        }
+        
+        .wip-details h3 {
+            color: #333;
+            margin-bottom: 15px;
+        }
+        
+        .wip-details ul {
+            list-style-position: inside;
+            color: #666;
+            line-height: 1.8;
+        }
+        
+        .wip-details ul li {
+            margin-bottom: 8px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>Advanced Search</h1>
+        </div>
+        
+        <div class="user-info-bar" id="userInfoBar">
+            <span id="userLocationInfo"></span>
+            <a href="{{ url_for('auth.logout') }}" class="logout-btn" title="Logout" 
+               onclick="return confirm('Are you sure you want to log out?');" 
+               style="background: none; border: none; cursor: pointer; font-size: 16px; text-decoration: none; display: inline-block; padding: 8px 12px;">🚪</a>
+        </div>
+        
+        <div class="breadcrumb">
+            Start › Advanced Search
+        </div>
+
+        <div id="content">
+            <div class="wip-container">
+                <div class="wip-icon">🚧</div>
+                <div class="wip-title">Work in Progress</div>
+                <div class="wip-subtitle">Advanced Search Features Coming Soon</div>
+                
+                <div class="wip-details">
+                    <h3>Planned Features:</h3>
+                    <ul>
+                        <li>Multi-criteria filtering (type, material, color, size)</li>
+                        <li>Price range filters</li>
+                        <li>Availability by location</li>
+                        <li>Advanced product specifications search</li>
+                        <li>Compatibility matching</li>
+                        <li>Save and share custom searches</li>
+                    </ul>
+                </div>
+                
+                <div class="result-actions">
+                    <button class="back-button" onclick="goBack()">← Go Back</button>
+                    <button class="back-button" onclick="goToFinder()" style="margin-left: 10px;">🏠 Back to Product Finder</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Load user session info
+        async function loadUserInfo() {
+            try {
+                const response = await fetch('/api/session');
+                const data = await response.json();
+                
+                if (data.status === 'success') {
+                    const locationNames = {
+                        'LINDS': 'Lindsborg',
+                        'IOLA': 'Iola',
+                        'KC': 'Kansas City',
+                        'BMD': 'BMD'
+                    };
+                    
+                    const currentLoc = locationNames[data.currentLocation] || data.currentLocation;
+                    const canChangeLocation = data.accessibleLocations && data.accessibleLocations.length > 1;
+                    
+                    let locationDisplay;
+                    if (canChangeLocation) {
+                        locationDisplay = `<a href="{{ url_for('auth.select_location_page') }}" style="color: #6a4c93; text-decoration: none; font-weight: 500; cursor: pointer;" 
+                                              onmouseover="this.style.textDecoration='underline'" 
+                                              onmouseout="this.style.textDecoration='none'"
+                                              title="Click to change location">📍 ${currentLoc}</a>`;
+                    } else {
+                        locationDisplay = `📍 ${currentLoc}`;
+                    }
+                    
+                    document.getElementById('userLocationInfo').innerHTML = 
+                        `👤 ${data.username} | ${locationDisplay}`;
+                }
+            } catch (error) {
+                console.error('Error loading user info:', error);
+            }
+        }
+
+        // Navigation functions
+        function goBack() {
+            window.history.back();
+        }
+        
+        function goToFinder() {
+            window.location.href = '{{ url_for("products.quiz_index") }}';
+        }
+
+        // Load user info when page loads
+        loadUserInfo();
+    </script>
+</body>
+</html>

app/templates/product_finder.html

@@ -26,6 +26,25 @@
             Start
         </div>
 
+        <!-- Search Bar Component -->
+        <div class="search-container" id="searchContainer" style="display: none;">
+            <div class="search-wrapper">
+                <div class="search-input-wrapper">
+                    <input type="text" 
+                           id="searchInput" 
+                           class="search-input" 
+                           placeholder="Search for products... (e.g., Storm Window)"
+                           autocomplete="off">
+                    <div class="search-dropdown" id="searchDropdown"></div>
+                </div>
+                <div class="search-buttons">
+                    <button class="search-btn view-btn" id="viewBtn" onclick="handleViewProduct()" disabled>View</button>
+                    <button class="search-btn search-btn-action" onclick="handleSearchResults()">Search</button>
+                    <button class="search-btn advanced-btn" onclick="handleAdvancedSearch()">Advanced Search...</button>
+                </div>
+            </div>
+        </div>
+
         <div id="content">
             <!-- Content will be dynamically loaded here -->
         </div>