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

Compare commits

base: seb:b743fabc807274e8beb4299befde6246ba3c245e
Branches Tags
seb:main
...
compare: seb:9bf5d93d94f4289f645ef1e32cc1e82e0b0cca7b
Branches Tags
seb:main

2 Commits
b743fabc80 ... 9bf5d93d94

Author SHA1 Message Date
sebseb7
9bf5d93d94 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. 2025-11-24 10:02:35 +01:00
sebseb7
d0b8183738 typo 2025-11-24 09:17:30 +01:00
5 changed files with 241 additions and 123 deletions
Expand all files Collapse all files

3
.env.example
View File

@@ -10,4 +10,5 @@ JTL_SPRACHE_ID=1
JTL_PLATTFORM_ID=1 JTL_PLATTFORM_ID=1
SERVER_PORT=3991 SERVER_PORT=3991
SERVER_HOST=127.0.0.1 SERVER_HOST=127.0.0.1
SYNC_INTERVAL_MS=600000 SYNC_INTERVAL_MS=600000
EXCLUDE_CATEGORY_IDS=

270
index.html
View File

@@ -183,7 +183,7 @@
<body> <body>
<div class="container"> <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 id="tree-container">
<div class="loading">Loading categories...</div> <div class="loading">Loading categories...</div>
</div> </div>
@@ -221,23 +221,89 @@
updateCategoryProducts(id); 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 // Event Listeners
filterInput.addEventListener('input', (e) => { filterInput.addEventListener('input', (e) => {
const value = e.target.value; const value = e.target.value;
state.filter = value; state.filter = value;
if (value.trim()) { if (value.trim()) {
// Reset expansion first debouncedSearch(value);
resetExpansion(state.categories); } else {
// Clear matches
// Get filtered tree to find best match resetMatches(state.categories);
const filtered = filterTree(state.categories, value); render();
autoExpandBestMatch(filtered);
} }
});
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(); 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) { function resetExpansion(nodes) {
nodes.forEach(node => { nodes.forEach(node => {
node.isChildrenExpanded = false; 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 // Initial Load
loadCategories(); loadCategories();
@@ -309,7 +340,7 @@
node.isChildrenExpanded = false; // New state for subcategory expansion node.isChildrenExpanded = false; // New state for subcategory expansion
// Fetch products // Fetch products
fetchProducts(node); // fetchProducts(node); // Lazy load instead
if (node.children) { if (node.children) {
initCategories(node.children); initCategories(node.children);
@@ -350,37 +381,26 @@
function filterTree(nodes, query) { function filterTree(nodes, query) {
if (!query.trim()) return nodes; // Return original structure if no filter if (!query.trim()) return nodes; // Return original structure if no filter
const words = query.toLowerCase().split(/\s+/).filter(w => w);
return nodes.map(node => { return nodes.map(node => {
// Filter products // Only keep if marked as having a match
// If products are loading (null), we treat as no match for now if (node._hasMatch) {
const matchingProducts = node.products // Filter children
? node.products.filter(p => { const matchingChildren = node.children ? filterTree(node.children, query) : [];
const name = p.cName.toLowerCase();
return words.every(w => name.includes(w));
})
: [];
// Filter children // Filter products if loaded
const matchingChildren = node.children ? filterTree(node.children, query) : []; 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 { return {
...node, ...node,
products: matchingProducts, products: matchingProducts,
children: matchingChildren, 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 _original: node
}; };
} }
@@ -420,24 +440,26 @@
const header = document.createElement('div'); const header = document.createElement('div');
header.className = 'category-header'; header.className = 'category-header';
// Toggle for children // Toggle for children or products
if (category.children && category.children.length > 0) { 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'); header.classList.add('has-children');
const toggle = document.createElement('span'); const toggle = document.createElement('span');
toggle.className = 'toggle'; toggle.className = 'toggle';
toggle.textContent = '▶'; // We don't have collapse state for categories in requirements, only products toggle.textContent = realNode.isChildrenExpanded ? '▼' : '▶';
// 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 = '▼';
}
header.appendChild(toggle); header.appendChild(toggle);
header.onclick = (e) => { header.onclick = (e) => {
e.stopPropagation(); e.stopPropagation();
realNode.isChildrenExpanded = !realNode.isChildrenExpanded; realNode.isChildrenExpanded = !realNode.isChildrenExpanded;
// Lazy load products if expanding and not yet loaded
if (realNode.isChildrenExpanded && realNode.products === null) {
fetchProducts(realNode);
}
render(); render();
}; };
} }
@@ -448,6 +470,7 @@
img.className = 'category-image'; img.className = 'category-image';
img.src = `/img/cat/${category.kBild}.avif`; img.src = `/img/cat/${category.kBild}.avif`;
img.alt = category.cName; img.alt = category.cName;
img.loading = 'lazy';
img.onerror = () => img.style.display = 'none'; img.onerror = () => img.style.display = 'none';
header.appendChild(img); header.appendChild(img);
} }
@@ -487,51 +510,61 @@
const productsDiv = document.createElement('div'); const productsDiv = document.createElement('div');
productsDiv.className = 'category-products'; productsDiv.className = 'category-products';
if (category.products === null) { // Only show products if:
productsDiv.innerHTML = '<small>Loading products...</small>'; // 1. Not filtering (show all), OR
productsDiv.style.display = 'block'; // 2. This category is a direct match (not just expanded due to child matches)
} else if (category.products.length > 0) { const shouldShowProducts = !state.filter || realNode._isDirectMatch;
productsDiv.style.display = 'block';
const ul = document.createElement('ul');
ul.style.listStyle = 'none';
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 limit = realNode.isExpanded ? category.products.length : 3;
const li = document.createElement('li');
li.className = 'product-item';
if (p.images && p.images.length > 0) { category.products.slice(0, limit).forEach(p => {
const img = document.createElement('img'); const li = document.createElement('li');
img.className = 'product-image'; li.className = 'product-item';
img.src = `/img/prod/${p.images[0]}.avif`;
img.alt = p.cName; if (p.images && p.images.length > 0) {
img.onerror = () => img.style.display = 'none'; const img = document.createElement('img');
li.appendChild(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'); productsDiv.appendChild(ul);
span.textContent = p.cName; } else {
li.appendChild(span); productsDiv.style.display = 'none';
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 { } else {
productsDiv.style.display = 'none'; productsDiv.style.display = 'none';
} }
@@ -539,12 +572,9 @@
div.appendChild(productsDiv); div.appendChild(productsDiv);
// Children // Children
if (category.children && category.children.length > 0) { if (category.children && category.children.length > 0 && realNode.isChildrenExpanded) {
const childrenUl = document.createElement('ul'); const childrenUl = document.createElement('ul');
childrenUl.className = 'children'; childrenUl.className = 'children';
if (!realNode.isChildrenExpanded) {
childrenUl.classList.add('hidden');
}
category.children.forEach(child => { category.children.forEach(child => {
childrenUl.appendChild(renderCategory(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 // Register socket connection handler
registerConnection(io); registerConnection(io, CACHE_DIR);
// Register routes // Register routes
registerCategories(app, cache); 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) => { io.on('connection', (socket) => {
console.log('🔌 Client connected'); 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', () => { socket.on('disconnect', () => {
console.log('🔌 Client disconnected'); 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);
}