seb/shopApiNg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement server-side category and product search via WebSockets, replacing client-side filtering with debounced input and dynamic tree expansion based on server results.

Browse Source
This commit is contained in:
sebseb7
2025-11-24 10:02:35 +01:00
parent d0b8183738
commit 9bf5d93d94
4 changed files with 239 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
index.html
View File

@@ -183,7 +183,7 @@
<body>
<div class="container">
<input type="text" id="filter-input" placeholder="🔍 Filter articles (e.g. 'red shoe')..." autocomplete="off">
<input type="text" id="filter-input" placeholder="🔍" autocomplete="off">
<div id="tree-container">
<div class="loading">Loading categories...</div>
</div>
@@ -221,23 +221,89 @@
updateCategoryProducts(id);
});
// Debounce function
function debounce(func, wait) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
const debouncedSearch = debounce((value) => {
socket.emit('search', value);
}, 300);
// Event Listeners
filterInput.addEventListener('input', (e) => {
const value = e.target.value;
state.filter = value;
if (value.trim()) {
// Reset expansion first
resetExpansion(state.categories);
// Get filtered tree to find best match
const filtered = filterTree(state.categories, value);
autoExpandBestMatch(filtered);
debouncedSearch(value);
} else {
// Clear matches
resetMatches(state.categories);
render();
}
});
socket.on('searchResults', ({ query, matches }) => {
if (query !== state.filter) return;
const matchSet = new Set(matches);
// Reset expansion and matches
resetExpansion(state.categories);
// Mark matches and expand
markMatches(state.categories, matchSet);
render();
});
function resetMatches(nodes) {
nodes.forEach(node => {
node._hasMatch = false;
if (node.children) resetMatches(node.children);
});
}
function markMatches(nodes, matchSet) {
let anyMatch = false;
nodes.forEach(node => {
const isDirectMatch = matchSet.has(node.kKategorie);
let childMatch = false;
if (node.children) {
childMatch = markMatches(node.children, matchSet);
}
if (isDirectMatch || childMatch) {
node._hasMatch = true;
node._isDirectMatch = isDirectMatch; // Track if this node itself matches
anyMatch = true;
// Expand if children have matches
if (childMatch) {
node.isChildrenExpanded = true;
}
// Expand if direct match (to show products)
if (isDirectMatch) {
node.isChildrenExpanded = true;
node.isExpanded = true;
// Trigger load if needed
if (node.products === null) fetchProducts(node);
}
} else {
node._hasMatch = false;
node._isDirectMatch = false;
}
});
return anyMatch;
}
function resetExpansion(nodes) {
nodes.forEach(node => {
node.isChildrenExpanded = false;
@@ -246,42 +312,7 @@
});
}
function autoExpandBestMatch(nodes) {
let maxCount = -1;
let bestNode = null;
let bestPath = [];
const traverse = (currentNodes, path) => {
currentNodes.forEach(node => {
// Count direct matches
const count = node.products ? node.products.length : 0;
if (count > maxCount) {
maxCount = count;
bestNode = node;
bestPath = [...path];
}
if (node.children) {
traverse(node.children, [...path, node]);
}
});
};
traverse(nodes, []);
if (bestNode) {
// Expand ancestors
bestPath.forEach(n => {
const real = n._original || n;
real.isChildrenExpanded = true;
});
// Expand the node itself
const realBest = bestNode._original || bestNode;
realBest.isChildrenExpanded = true;
realBest.isExpanded = true;
}
}
// Initial Load
loadCategories();
@@ -309,7 +340,7 @@
node.isChildrenExpanded = false; // New state for subcategory expansion
// Fetch products
fetchProducts(node);
// fetchProducts(node); // Lazy load instead
if (node.children) {
initCategories(node.children);
@@ -350,37 +381,26 @@
function filterTree(nodes, query) {
if (!query.trim()) return nodes; // Return original structure if no filter
const words = query.toLowerCase().split(/\s+/).filter(w => w);
return nodes.map(node => {
// Filter products
// If products are loading (null), we treat as no match for now
const matchingProducts = node.products
? node.products.filter(p => {
const name = p.cName.toLowerCase();
return words.every(w => name.includes(w));
})
: [];
// Only keep if marked as having a match
if (node._hasMatch) {
// Filter children
const matchingChildren = node.children ? filterTree(node.children, query) : [];
// Filter children
const matchingChildren = node.children ? filterTree(node.children, query) : [];
// Filter products if loaded
let matchingProducts = node.products;
if (matchingProducts) {
const words = query.toLowerCase().split(/\s+/).filter(w => w);
matchingProducts = matchingProducts.filter(p => {
const name = p.cName.toLowerCase();
return words.every(w => name.includes(w));
});
}
// Keep node if it has matching products OR matching children
if (matchingProducts.length > 0 || matchingChildren.length > 0) {
// Return a shallow copy with filtered data
// We preserve the original reference for updates, but render the copy
return {
...node,
products: matchingProducts,
children: matchingChildren,
// Preserve expansion state from original node?
// Actually we are copying properties, so isExpanded is copied.
// But if we modify isExpanded on the copy, it won't affect original.
// We need to handle interactions carefully.
// For this implementation, we'll let the render function modify the ORIGINAL node
// by looking it up or passing it through.
// Simpler: The filtered tree is just for rendering.
// Interaction handlers should target the ID and update the global state.
_original: node
};
}
@@ -420,24 +440,26 @@
const header = document.createElement('div');
header.className = 'category-header';
// Toggle for children
if (category.children && category.children.length > 0) {
// Toggle for children or products
const hasChildren = category.children && category.children.length > 0;
const hasProducts = category.articleCount > 0 || (category.products && category.products.length > 0);
if (hasChildren || hasProducts) {
header.classList.add('has-children');
const toggle = document.createElement('span');
toggle.className = 'toggle';
toggle.textContent = '▶'; // We don't have collapse state for categories in requirements, only products
// Wait, the original code had collapse for subcategories!
// "childrenUl.classList.toggle('hidden')"
// I should preserve this.
// Let's add isChildrenExpanded to state.
if (realNode.isChildrenExpanded) {
toggle.textContent = '▼';
}
toggle.textContent = realNode.isChildrenExpanded ? '▼' : '▶';
header.appendChild(toggle);
header.onclick = (e) => {
e.stopPropagation();
realNode.isChildrenExpanded = !realNode.isChildrenExpanded;
// Lazy load products if expanding and not yet loaded
if (realNode.isChildrenExpanded && realNode.products === null) {
fetchProducts(realNode);
}
render();
};
}
@@ -448,6 +470,7 @@
img.className = 'category-image';
img.src = `/img/cat/${category.kBild}.avif`;
img.alt = category.cName;
img.loading = 'lazy';
img.onerror = () => img.style.display = 'none';
header.appendChild(img);
}
@@ -487,51 +510,61 @@
const productsDiv = document.createElement('div');
productsDiv.className = 'category-products';
if (category.products === null) {
productsDiv.innerHTML = '<small>Loading products...</small>';
productsDiv.style.display = 'block';
} else if (category.products.length > 0) {
productsDiv.style.display = 'block';
const ul = document.createElement('ul');
ul.style.listStyle = 'none';
// Only show products if:
// 1. Not filtering (show all), OR
// 2. This category is a direct match (not just expanded due to child matches)
const shouldShowProducts = !state.filter || realNode._isDirectMatch;
const limit = realNode.isExpanded ? category.products.length : 3;
if (realNode.isChildrenExpanded && shouldShowProducts) {
if (category.products === null) {
productsDiv.innerHTML = '<small>Loading products...</small>';
productsDiv.style.display = 'block';
} else if (category.products.length > 0) {
productsDiv.style.display = 'block';
const ul = document.createElement('ul');
ul.style.listStyle = 'none';
category.products.slice(0, limit).forEach(p => {
const li = document.createElement('li');
li.className = 'product-item';
const limit = realNode.isExpanded ? category.products.length : 3;
if (p.images && p.images.length > 0) {
const img = document.createElement('img');
img.className = 'product-image';
img.src = `/img/prod/${p.images[0]}.avif`;
img.alt = p.cName;
img.onerror = () => img.style.display = 'none';
li.appendChild(img);
category.products.slice(0, limit).forEach(p => {
const li = document.createElement('li');
li.className = 'product-item';
if (p.images && p.images.length > 0) {
const img = document.createElement('img');
img.className = 'product-image';
img.src = `/img/prod/${p.images[0]}.avif`;
img.alt = p.cName;
img.loading = 'lazy';
img.onerror = () => img.style.display = 'none';
li.appendChild(img);
}
const span = document.createElement('span');
span.textContent = p.cName;
li.appendChild(span);
ul.appendChild(li);
});
if (!realNode.isExpanded && category.products.length > 3) {
const more = document.createElement('li');
more.className = 'product-item more';
more.style.fontStyle = 'italic';
more.textContent = `...and ${category.products.length - 3} more`;
more.onclick = (e) => {
e.stopPropagation();
// Collapse others
collapseAllProducts(state.categories);
realNode.isExpanded = true;
render();
};
ul.appendChild(more);
}
const span = document.createElement('span');
span.textContent = p.cName;
li.appendChild(span);
ul.appendChild(li);
});
if (!realNode.isExpanded && category.products.length > 3) {
const more = document.createElement('li');
more.className = 'product-item more';
more.style.fontStyle = 'italic';
more.textContent = `...and ${category.products.length - 3} more`;
more.onclick = (e) => {
e.stopPropagation();
// Collapse others
collapseAllProducts(state.categories);
realNode.isExpanded = true;
render();
};
ul.appendChild(more);
productsDiv.appendChild(ul);
} else {
productsDiv.style.display = 'none';
}
productsDiv.appendChild(ul);
} else {
productsDiv.style.display = 'none';
}
@@ -539,12 +572,9 @@
div.appendChild(productsDiv);
// Children
if (category.children && category.children.length > 0) {
if (category.children && category.children.length > 0 && realNode.isChildrenExpanded) {
const childrenUl = document.createElement('ul');
childrenUl.className = 'children';
if (!realNode.isChildrenExpanded) {
childrenUl.classList.add('hidden');
}
category.children.forEach(child => {
childrenUl.appendChild(renderCategory(child));

2
src/server/server.js
View File

@@ -99,7 +99,7 @@ export function startServer(categorySyncer, categoryProductsSyncer) {
}
// Register socket connection handler
registerConnection(io);
registerConnection(io, CACHE_DIR);
// Register routes
registerCategories(app, cache);

16
src/server/socket/connection.js
View File

@@ -1,6 +1,20 @@
export function registerConnection(io) {
import { findMatches } from '../utils/search-helper.js';
export function registerConnection(io, cacheDir) {
io.on('connection', (socket) => {
console.log('🔌 Client connected');
socket.on('search', async (query) => {
// console.log(`🔍 Search request: "${query}"`);
try {
const matches = await findMatches(query, cacheDir);
socket.emit('searchResults', { query, matches });
} catch (err) {
console.error('Search error:', err);
socket.emit('searchResults', { query, matches: [] });
}
});
socket.on('disconnect', () => {
console.log('🔌 Client disconnected');
});

73
src/server/utils/search-helper.js Normal file
View File

@@ -0,0 +1,73 @@
import fs from 'fs/promises';
import path from 'path';
export async function findMatches(query, cacheDir) {
if (!query || !query.trim()) return [];
const terms = query.toLowerCase().split(/\s+/).filter(t => t);
// Load category tree
const treePath = path.join(cacheDir, 'category_tree.json');
let tree = [];
try {
const treeData = await fs.readFile(treePath, 'utf-8');
tree = JSON.parse(treeData);
} catch (e) {
console.error("Failed to load category tree for search", e);
return [];
}
const matchingCategoryIds = new Set();
// Helper to check text match
const isMatch = (text) => {
if (!text) return false;
const lower = text.toLowerCase();
return terms.every(t => lower.includes(t));
};
// Flatten tree to linear list for easier iteration
const queue = [...tree];
const nodes = [];
while (queue.length > 0) {
const node = queue.shift();
nodes.push(node);
if (node.children) {
queue.push(...node.children);
}
}
// Process in chunks to avoid too many open files
const CHUNK_SIZE = 50;
for (let i = 0; i < nodes.length; i += CHUNK_SIZE) {
const chunk = nodes.slice(i, i + CHUNK_SIZE);
await Promise.all(chunk.map(async (node) => {
let nodeMatches = false;
// Check category name
if (isMatch(node.cName)) {
nodeMatches = true;
} else {
// Check products
try {
const prodPath = path.join(cacheDir, 'products', `category_${node.kKategorie}.json`);
// Check if file exists before reading to avoid throwing too many errors
// Actually readFile throws ENOENT which is fine
const prodData = await fs.readFile(prodPath, 'utf-8');
const products = JSON.parse(prodData);
if (products.some(p => isMatch(p.cName))) {
nodeMatches = true;
}
} catch (e) {
// Ignore missing files
}
}
if (nodeMatches) {
matchingCategoryIds.add(node.kKategorie);
}
}));
}
return Array.from(matchingCategoryIds);
}