Jason
854 lines
34 KiB
HTML
854 lines
34 KiB
HTML
<!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>
|
||
.search-container {
|
||
padding: 30px 40px;
|
||
}
|
||
|
||
.search-header {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.search-input-container {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.products-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.product-card {
|
||
background: white;
|
||
border: 2px solid #e0e0e0;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.product-card:hover {
|
||
border-color: #6a4c93;
|
||
box-shadow: 0 4px 12px rgba(106, 76, 147, 0.15);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.product-card h3 {
|
||
color: #333;
|
||
font-size: 1.1em;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.no-results {
|
||
text-align: center;
|
||
padding: 40px;
|
||
color: #666;
|
||
}
|
||
|
||
.search-stats {
|
||
text-align: center;
|
||
padding: 15px;
|
||
background: #f5f5f5;
|
||
border-radius: 8px;
|
||
margin-bottom: 20px;
|
||
color: #666;
|
||
}
|
||
|
||
/* Filter Sections */
|
||
.filters-container {
|
||
max-width: 800px;
|
||
margin: 20px auto;
|
||
}
|
||
|
||
.filter-section {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.filter-toggle {
|
||
width: 100%;
|
||
background-color: #f8f9fa;
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 6px;
|
||
padding: 12px 16px;
|
||
font-size: 14px;
|
||
color: #495057;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
transition: all 0.2s ease;
|
||
text-align: left;
|
||
}
|
||
|
||
.filter-toggle:hover {
|
||
background-color: #e9ecef;
|
||
border-color: #ced4da;
|
||
}
|
||
|
||
.filter-icon {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.filter-label {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 5px;
|
||
}
|
||
|
||
.filter-title {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.filter-values {
|
||
color: #6a4c93;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.filter-arrow {
|
||
font-size: 12px;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.filter-content {
|
||
margin-top: 5px;
|
||
padding: 16px;
|
||
background-color: #fff;
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.filter-options {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||
gap: 10px;
|
||
}
|
||
|
||
.filter-checkbox {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
padding: 6px;
|
||
border-radius: 4px;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.filter-checkbox:hover {
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.filter-checkbox input[type="checkbox"] {
|
||
width: 18px;
|
||
height: 18px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.filter-checkbox span {
|
||
user-select: none;
|
||
}
|
||
</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="search-container">
|
||
<div class="search-header">
|
||
<h2 style="margin-bottom: 15px;">🔍 Search Products</h2>
|
||
<p style="color: #666; margin-bottom: 20px;">
|
||
Search by product code, description, color, material, or any combination.
|
||
Try: "c1800", "storm door white", "bronze aluminum"
|
||
</p>
|
||
</div>
|
||
|
||
<div class="search-input-container">
|
||
<input
|
||
type="text"
|
||
id="searchInput"
|
||
placeholder="Enter search terms..."
|
||
style="width: 100%; padding: 15px 20px; font-size: 16px; border: 2px solid #ddd; border-radius: 8px; box-sizing: border-box;"
|
||
onkeyup="handleSearch(event)"
|
||
>
|
||
<!-- Hidden field stores the cleaned search text after filter keywords are removed -->
|
||
<input type="hidden" id="remainingSearchText" value="">
|
||
|
||
<!-- Filter Sections (dynamically generated from filter_config.json) -->
|
||
<div id="filtersContainer" class="filters-container" style="margin-top: 20px;">
|
||
<!-- Filters will be generated here by JavaScript -->
|
||
</div>
|
||
|
||
<button
|
||
onclick="performSearch()"
|
||
style="margin-top: 15px; padding: 15px 30px; font-size: 16px; background-color: #6a4c93; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;"
|
||
>
|
||
Search
|
||
</button>
|
||
<button
|
||
onclick="clearSearch()"
|
||
style="margin-top: 15px; margin-left: 10px; padding: 15px 30px; font-size: 16px; background-color: #ccc; color: #333; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;"
|
||
>
|
||
Clear
|
||
</button>
|
||
</div>
|
||
|
||
<div id="searchResults" style="margin-top: 30px;"></div>
|
||
|
||
<div class="result-actions" style="margin-top: 30px;">
|
||
<button class="back-button" onclick="goToFinder()">🏠 Back to Product Finder</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Global data
|
||
let productData = [];
|
||
let filterConfig = null;
|
||
let searchFieldDirty = false; // Track if user has manually edited search after initial load
|
||
|
||
// Load filter configuration
|
||
async function loadFilterConfig() {
|
||
try {
|
||
const response = await fetch('/quiz/data/filter_config.json');
|
||
filterConfig = await response.json();
|
||
console.log('Loaded filter config:', filterConfig);
|
||
return filterConfig;
|
||
} catch (error) {
|
||
console.error('Error loading filter config:', error);
|
||
return null;
|
||
}
|
||
}
|
||
|
||
// Generate filter UI from configuration
|
||
function generateFiltersUI() {
|
||
if (!filterConfig) return;
|
||
|
||
const container = document.getElementById('filtersContainer');
|
||
let html = '';
|
||
|
||
// Sort filter groups by order
|
||
const sortedGroups = [...filterConfig.filterGroups].sort((a, b) => a.order - b.order);
|
||
|
||
sortedGroups.forEach(group => {
|
||
const filterId = `${group.id}Filter`;
|
||
const valuesId = `${group.id}FilterValues`;
|
||
|
||
html += `
|
||
<div class="filter-section">
|
||
<button class="filter-toggle" onclick="toggleFilter('${filterId}')" type="button">
|
||
<span class="filter-icon">${group.icon}</span>
|
||
<span class="filter-label">
|
||
<span class="filter-title">${group.label}:</span>
|
||
<span class="filter-values" id="${valuesId}">None selected</span>
|
||
</span>
|
||
<span class="filter-arrow" id="${filterId}-arrow">▼</span>
|
||
</button>
|
||
<div class="filter-content" id="${filterId}" style="display: none;">
|
||
<div class="filter-options">
|
||
`;
|
||
|
||
group.options.forEach(option => {
|
||
html += `
|
||
<label class="filter-checkbox">
|
||
<input type="checkbox"
|
||
name="${group.id}"
|
||
value="${option.value}"
|
||
data-option-id="${option.id}">
|
||
<span>${option.label}</span>
|
||
</label>
|
||
`;
|
||
});
|
||
|
||
html += `
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
container.innerHTML = html;
|
||
}
|
||
|
||
// Toggle filter visibility
|
||
function toggleFilter(filterId) {
|
||
const filterContent = document.getElementById(filterId);
|
||
const arrow = document.getElementById(filterId + '-arrow');
|
||
|
||
if (filterContent.style.display === 'none') {
|
||
filterContent.style.display = 'block';
|
||
arrow.textContent = '▲';
|
||
} else {
|
||
filterContent.style.display = 'none';
|
||
arrow.textContent = '▼';
|
||
}
|
||
}
|
||
|
||
// Get all checked filter values organized by group
|
||
function getCheckedFilters() {
|
||
const filters = {};
|
||
|
||
filterConfig.filterGroups.forEach(group => {
|
||
filters[group.id] = [];
|
||
document.querySelectorAll(`input[name="${group.id}"]:checked`).forEach(checkbox => {
|
||
const optionId = checkbox.dataset.optionId;
|
||
const option = group.options.find(opt => opt.id === optionId);
|
||
if (option) {
|
||
filters[group.id].push(option);
|
||
}
|
||
});
|
||
});
|
||
|
||
return filters;
|
||
}
|
||
|
||
// Update filter display to show selected values
|
||
function updateFilterDisplays() {
|
||
if (!filterConfig) return;
|
||
|
||
filterConfig.filterGroups.forEach(group => {
|
||
const valuesId = `${group.id}FilterValues`;
|
||
const display = document.getElementById(valuesId);
|
||
if (!display) return;
|
||
|
||
const checked = document.querySelectorAll(`input[name="${group.id}"]:checked`);
|
||
|
||
if (checked.length > 0) {
|
||
const labels = Array.from(checked).map(cb => cb.value);
|
||
display.textContent = labels.join(', ');
|
||
display.style.color = '#6a4c93';
|
||
} else {
|
||
display.textContent = 'None selected';
|
||
display.style.color = '#999';
|
||
}
|
||
});
|
||
}
|
||
|
||
// Add event listeners to all checkboxes
|
||
function initializeFilterListeners() {
|
||
document.querySelectorAll('.filter-checkbox input[type="checkbox"]').forEach(checkbox => {
|
||
checkbox.addEventListener('change', updateFilterDisplays);
|
||
});
|
||
}
|
||
|
||
// Check if keywords appear sequentially in search string
|
||
function checkSequentialMatch(searchString, keywords) {
|
||
if (keywords.length === 0) return false;
|
||
if (keywords.length === 1) return searchString.includes(keywords[0]);
|
||
|
||
let lastIndex = -1;
|
||
for (const keyword of keywords) {
|
||
const index = searchString.indexOf(keyword, lastIndex + 1);
|
||
if (index === -1 || index <= lastIndex) {
|
||
return false;
|
||
}
|
||
lastIndex = index;
|
||
}
|
||
return true;
|
||
}
|
||
|
||
// Remove only the specific keywords from search string, not text between them
|
||
function removeKeywordsFromSearch(searchString, keywords) {
|
||
if (keywords.length === 0) return searchString;
|
||
|
||
let result = searchString;
|
||
|
||
// Remove each keyword individually
|
||
keywords.forEach(keyword => {
|
||
// Use word boundary to remove only complete words
|
||
const regex = new RegExp(`\\b${keyword}\\b`, 'gi');
|
||
result = result.replace(regex, '').trim();
|
||
});
|
||
|
||
// Clean up multiple spaces
|
||
result = result.replace(/\s+/g, ' ').trim();
|
||
|
||
return result;
|
||
}
|
||
|
||
// Auto-check filters based on search query using sequential matching
|
||
function autoCheckFiltersFromQuery(searchQuery) {
|
||
if (!searchQuery || !filterConfig) return;
|
||
|
||
let remainingSearch = searchQuery.toLowerCase().trim();
|
||
|
||
// Remove ignored words
|
||
const ignoreWords = filterConfig.searchBehavior.ignoreWords || [];
|
||
ignoreWords.forEach(word => {
|
||
const regex = new RegExp(`\\b${word}\\b`, 'gi');
|
||
remainingSearch = remainingSearch.replace(regex, ' ').replace(/\s+/g, ' ').trim();
|
||
});
|
||
|
||
console.log('Processing search:', remainingSearch);
|
||
|
||
// Process filter groups in configured order
|
||
const processOrder = filterConfig.searchBehavior.processOrder || [];
|
||
|
||
processOrder.forEach(groupId => {
|
||
const group = filterConfig.filterGroups.find(g => g.id === groupId);
|
||
if (!group || !group.autoCheckBehavior.enabled) return;
|
||
|
||
group.options.forEach(option => {
|
||
// Normalize keywords
|
||
const normalizedKeywords = option.keywords.map(kw => kw.toLowerCase());
|
||
|
||
// Check if minimum specificity is met
|
||
const minSpec = group.autoCheckBehavior.minSpecificity || 1;
|
||
if (normalizedKeywords.length < minSpec) return;
|
||
|
||
// Check if all keywords are present
|
||
const allPresent = normalizedKeywords.every(kw =>
|
||
remainingSearch.includes(kw)
|
||
);
|
||
|
||
if (!allPresent) return;
|
||
|
||
// If sequential is required, check that
|
||
if (group.autoCheckBehavior.requireSequential && normalizedKeywords.length > 1) {
|
||
if (!checkSequentialMatch(remainingSearch, normalizedKeywords)) {
|
||
return;
|
||
}
|
||
}
|
||
|
||
// Check the checkbox
|
||
const checkbox = document.querySelector(
|
||
`input[name="${group.id}"][data-option-id="${option.id}"]`
|
||
);
|
||
if (checkbox) {
|
||
checkbox.checked = true;
|
||
console.log(`Auto-checked: ${option.label}`);
|
||
|
||
// Remove keywords from search if configured
|
||
if (filterConfig.searchBehavior.removeMatchedFromSearch) {
|
||
remainingSearch = removeKeywordsFromSearch(remainingSearch, normalizedKeywords);
|
||
console.log('Remaining search:', remainingSearch);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// Update displays after auto-checking
|
||
updateFilterDisplays();
|
||
|
||
console.log('Final remaining search:', remainingSearch);
|
||
|
||
// Store the cleaned search text in hidden field
|
||
document.getElementById('remainingSearchText').value = remainingSearch;
|
||
}
|
||
|
||
// Load product data on page load
|
||
async function loadProductData() {
|
||
try {
|
||
const response = await fetch('/quiz/data/products.json');
|
||
productData = await response.json();
|
||
console.log('Loaded', productData.length, 'products');
|
||
} catch (error) {
|
||
console.error('Error loading product data:', error);
|
||
document.getElementById('searchResults').innerHTML = `
|
||
<div class="no-results">
|
||
<p style="color: #d32f2f;">⚠️ Error loading product data. Please refresh the page.</p>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
// Normalize text for matching (remove spaces, hyphens, special chars, lowercase)
|
||
function normalizeText(text) {
|
||
if (!text) return '';
|
||
return text.toString().toLowerCase()
|
||
.replace(/[-\s_]/g, '') // Remove hyphens, spaces, underscores
|
||
.replace(/[^a-z0-9]/g, ''); // Remove other special characters
|
||
}
|
||
|
||
// Check if a value matches a search term (partial match)
|
||
function matchesTerm(value, term) {
|
||
if (!value) return false;
|
||
|
||
// For arrays (like colors, materials)
|
||
if (Array.isArray(value)) {
|
||
return value.some(item => normalizeText(item).includes(term));
|
||
}
|
||
|
||
// For objects (like subType)
|
||
if (typeof value === 'object' && value !== null) {
|
||
return Object.values(value).some(v =>
|
||
v && normalizeText(v).includes(term)
|
||
);
|
||
}
|
||
|
||
// For strings and numbers
|
||
return normalizeText(value).includes(term);
|
||
}
|
||
|
||
// Match product against filter option
|
||
function matchesFilterOption(product, option) {
|
||
const association = option.associations;
|
||
const field = association.productField;
|
||
const normalizedValue = association.normalizedValue;
|
||
const matchMethod = association.matchMethod;
|
||
|
||
// Get the product field value
|
||
let productValue;
|
||
if (field.includes('.')) {
|
||
const parts = field.split('.');
|
||
productValue = product[parts[0]]?.[parts[1]];
|
||
} else {
|
||
productValue = product[field];
|
||
}
|
||
|
||
if (!productValue) return false;
|
||
|
||
// Apply match method
|
||
switch (matchMethod) {
|
||
case 'exact':
|
||
return normalizeText(productValue) === normalizedValue;
|
||
case 'array_includes':
|
||
if (Array.isArray(productValue)) {
|
||
return productValue.some(v => normalizeText(v) === normalizedValue);
|
||
}
|
||
return normalizeText(productValue) === normalizedValue;
|
||
case 'contains':
|
||
return normalizeText(productValue).includes(normalizedValue);
|
||
default:
|
||
return normalizeText(productValue).includes(normalizedValue);
|
||
}
|
||
}
|
||
|
||
// Search products with new filter-based logic
|
||
function searchProducts(searchQuery, checkedFilters) {
|
||
if (!filterConfig) return [];
|
||
|
||
// Filter products
|
||
const results = productData.filter(product => {
|
||
// Step 1: Check filters (AND between groups, OR within group)
|
||
for (const groupId in checkedFilters) {
|
||
const selectedOptions = checkedFilters[groupId];
|
||
|
||
if (selectedOptions.length > 0) {
|
||
// Check if product matches ANY of the selected options (OR logic)
|
||
const matchesGroup = selectedOptions.some(option =>
|
||
matchesFilterOption(product, option)
|
||
);
|
||
|
||
if (!matchesGroup) return false; // AND logic between groups
|
||
}
|
||
}
|
||
|
||
// Step 2: Check search terms (AND logic)
|
||
if (searchQuery && searchQuery.trim()) {
|
||
const searchTerms = searchQuery.toLowerCase()
|
||
.split(/\s+/)
|
||
.filter(term => term.length > 0)
|
||
.map(term => normalizeText(term));
|
||
|
||
// Product must match ALL search terms
|
||
const matchesSearch = searchTerms.every(term => {
|
||
return (
|
||
matchesTerm(product.productCode, term) ||
|
||
matchesTerm(product.id, term) ||
|
||
matchesTerm(product.description, term) ||
|
||
matchesTerm(product.category, term) ||
|
||
matchesTerm(product.baseType, term) ||
|
||
matchesTerm(product.subType, term) ||
|
||
matchesTerm(product.materials, term) ||
|
||
matchesTerm(product.colors, term) ||
|
||
matchesTerm(product.location, term)
|
||
);
|
||
});
|
||
|
||
if (!matchesSearch) return false;
|
||
}
|
||
|
||
return true;
|
||
});
|
||
|
||
return results;
|
||
}
|
||
|
||
// Display search results
|
||
function displayResults(results, searchQuery) {
|
||
const resultsDiv = document.getElementById('searchResults');
|
||
|
||
if (results.length === 0) {
|
||
resultsDiv.innerHTML = `
|
||
<div class="no-results">
|
||
<h3 style="color: #333; margin-bottom: 10px;">No products found</h3>
|
||
<p>No products match "${searchQuery}"</p>
|
||
<p style="margin-top: 15px; font-size: 0.9em;">Try:</p>
|
||
<ul style="text-align: left; max-width: 400px; margin: 10px auto;">
|
||
<li>Fewer or more general terms</li>
|
||
<li>Different spellings (c1800, c-1800, c 1800)</li>
|
||
<li>Product categories (storm door, window, slider)</li>
|
||
<li>Materials (aluminum, vinyl) or colors (white, bronze)</li>
|
||
</ul>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
let html = `
|
||
<div class="search-stats">
|
||
Found <strong>${results.length}</strong> product${results.length !== 1 ? 's' : ''} matching "<strong>${searchQuery}</strong>"
|
||
</div>
|
||
<div class="products-grid">
|
||
`;
|
||
|
||
results.forEach(product => {
|
||
const prodCode = product.productCode || product.id;
|
||
const desc = product.description || 'No description';
|
||
const materials = product.materials && product.materials.length > 0
|
||
? product.materials.join(', ')
|
||
: 'N/A';
|
||
const colors = product.colors && product.colors.length > 0
|
||
? product.colors.join(', ')
|
||
: 'N/A';
|
||
const location = product.location || 'N/A';
|
||
const discontinued = product.discontinued ? ' <span style="color: #d32f2f;">(Discontinued)</span>' : '';
|
||
|
||
// Get subtype string
|
||
let subtypeStr = '';
|
||
if (product.subType) {
|
||
const doorType = product.subType.door;
|
||
const windowType = product.subType.window;
|
||
if (doorType) subtypeStr = doorType;
|
||
else if (windowType) subtypeStr = windowType;
|
||
}
|
||
|
||
html += `
|
||
<div class="product-card" onclick="viewProductDetail('${prodCode}')">
|
||
<h3>${desc}${discontinued}</h3>
|
||
<p style="color: #999; font-size: 0.95em; margin-top: 5px;"><strong>${prodCode}</strong></p>
|
||
<div style="font-size: 0.9em; color: #666; margin-top: 10px;">
|
||
${product.baseType ? `<strong>Type:</strong> ${product.baseType}<br>` : ''}
|
||
${subtypeStr ? `<strong>Subtype:</strong> ${subtypeStr}<br>` : ''}
|
||
<strong>Materials:</strong> ${materials}<br>
|
||
<strong>Colors:</strong> ${colors}<br>
|
||
<strong>Location:</strong> ${location}
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
html += '</div>';
|
||
resultsDiv.innerHTML = html;
|
||
}
|
||
|
||
// Perform search with new filter-based logic
|
||
function performSearch() {
|
||
const searchInput = document.getElementById('searchInput');
|
||
let searchQuery = searchInput.value.trim();
|
||
let remainingSearch;
|
||
|
||
// If search field has been manually modified, re-process everything
|
||
if (searchFieldDirty) {
|
||
console.log('=== Search field modified, re-processing ===');
|
||
|
||
// Clear all filters
|
||
document.querySelectorAll('.filter-option input[type="checkbox"]').forEach(cb => {
|
||
cb.checked = false;
|
||
});
|
||
|
||
// Re-run auto-check from the new search text
|
||
if (searchQuery) {
|
||
autoCheckFiltersFromQuery(searchQuery);
|
||
}
|
||
|
||
// Use the cleaned search from hidden field
|
||
remainingSearch = document.getElementById('remainingSearchText').value.trim();
|
||
|
||
// Reset the dirty flag
|
||
searchFieldDirty = false;
|
||
} else {
|
||
// Use the pre-calculated remaining search from hidden field
|
||
remainingSearch = document.getElementById('remainingSearchText').value.trim().toLowerCase();
|
||
console.log('=== Using stored remaining search ===');
|
||
}
|
||
|
||
// Get checked filters
|
||
const checkedFilters = getCheckedFilters();
|
||
|
||
// Check if we have any search criteria
|
||
const hasRemainingSearch = remainingSearch && remainingSearch.trim().length > 0;
|
||
const hasFilters = Object.values(checkedFilters).some(arr => arr.length > 0);
|
||
|
||
if (!hasRemainingSearch && !hasFilters) {
|
||
document.getElementById('searchResults').innerHTML = `
|
||
<div class="no-results">
|
||
<p>Please enter a search term or select filters</p>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
console.log('Remaining search terms:', remainingSearch);
|
||
console.log('Checked filters:', checkedFilters);
|
||
|
||
// Perform search
|
||
const results = searchProducts(remainingSearch, checkedFilters);
|
||
|
||
// Build display query string
|
||
const filterParts = [];
|
||
filterConfig.filterGroups.forEach(group => {
|
||
const checkedOptions = checkedFilters[group.id] || [];
|
||
if (checkedOptions.length > 0) {
|
||
const labels = checkedOptions.map(opt => opt.label).join(', ');
|
||
filterParts.push(`${group.label}: ${labels}`);
|
||
}
|
||
});
|
||
|
||
let displayQuery = remainingSearch || '';
|
||
if (filterParts.length > 0) {
|
||
if (displayQuery) {
|
||
displayQuery += ' | ' + filterParts.join(' | ');
|
||
} else {
|
||
displayQuery = filterParts.join(' | ');
|
||
}
|
||
}
|
||
|
||
displayResults(results, displayQuery || 'all filters');
|
||
}
|
||
|
||
// Handle Enter key in search input
|
||
function handleSearch(event) {
|
||
if (event.key === 'Enter') {
|
||
performSearch();
|
||
}
|
||
}
|
||
|
||
// Clear search
|
||
function clearSearch() {
|
||
document.getElementById('searchInput').value = '';
|
||
document.getElementById('searchResults').innerHTML = '';
|
||
|
||
// Uncheck all filters
|
||
document.querySelectorAll('.filter-checkbox input[type="checkbox"]').forEach(checkbox => {
|
||
checkbox.checked = false;
|
||
});
|
||
|
||
// Update filter displays
|
||
updateFilterDisplays();
|
||
|
||
document.getElementById('searchInput').focus();
|
||
}
|
||
|
||
// View product detail (redirect to product finder with product code)
|
||
function viewProductDetail(productCode) {
|
||
window.location.href = `/quiz/?p=${productCode}`;
|
||
}
|
||
|
||
// 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") }}';
|
||
}
|
||
|
||
// Initialize page
|
||
async function init() {
|
||
await loadUserInfo();
|
||
await loadProductData();
|
||
await loadFilterConfig();
|
||
|
||
// Generate filter UI from config
|
||
if (filterConfig) {
|
||
generateFiltersUI();
|
||
initializeFilterListeners();
|
||
}
|
||
|
||
// Mark search field as dirty when user manually types
|
||
document.getElementById('searchInput').addEventListener('input', () => {
|
||
searchFieldDirty = true;
|
||
console.log('Search field marked as dirty');
|
||
});
|
||
|
||
// Check if there's a search query in URL
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const queryParam = urlParams.get('q');
|
||
|
||
if (queryParam) {
|
||
// Populate search input with the query
|
||
const searchInput = document.getElementById('searchInput');
|
||
searchInput.value = queryParam;
|
||
|
||
// Auto-check filters that match the search query
|
||
autoCheckFiltersFromQuery(queryParam);
|
||
|
||
// Automatically perform the search
|
||
performSearch();
|
||
}
|
||
|
||
// Focus on search input
|
||
document.getElementById('searchInput').focus();
|
||
}
|
||
|
||
// Load when page loads
|
||
init();
|
||
</script>
|
||
</body>
|
||
</html>
|