568 lines
18 KiB
HTML
568 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Category Tree Viewer</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border-radius: 16px;
|
|
padding: 2rem;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
h1 {
|
|
color: #667eea;
|
|
margin-bottom: 2rem;
|
|
font-size: 2.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
|
|
.tree {
|
|
list-style: none;
|
|
}
|
|
|
|
.tree ul {
|
|
list-style: none;
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
.category {
|
|
margin: 0.5rem 0;
|
|
padding: 0.75rem;
|
|
background: white;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #667eea;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.category-header.has-children {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.category:hover {
|
|
transform: translateX(4px);
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
|
}
|
|
|
|
.category-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.category-image {
|
|
width: 48px;
|
|
height: 48px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.category-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.category-name {
|
|
font-weight: 600;
|
|
color: #333;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.category-count {
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.toggle {
|
|
color: #667eea;
|
|
font-weight: bold;
|
|
margin-right: 0.5rem;
|
|
user-select: none;
|
|
}
|
|
|
|
.children {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.children.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 3rem;
|
|
color: #667eea;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.error {
|
|
background: #fee;
|
|
color: #c33;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.category-products {
|
|
margin-top: 0.5rem;
|
|
padding-left: 4rem;
|
|
font-size: 0.9rem;
|
|
color: #555;
|
|
}
|
|
|
|
.product-item {
|
|
padding: 0.25rem 0;
|
|
border-bottom: 1px solid #eee;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.product-image {
|
|
width: 32px;
|
|
height: 32px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.product-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.product-item.more {
|
|
cursor: pointer;
|
|
color: #667eea;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.product-item.more:hover {
|
|
color: #764ba2;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#filter-input {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
margin-bottom: 1.5rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
#filter-input:focus {
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
|
|
outline: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<input type="text" id="filter-input" placeholder="🔍 Filter articles (e.g. 'red shoe')..." autocomplete="off">
|
|
<div id="tree-container">
|
|
<div class="loading">Loading categories...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script>
|
|
const socket = io({
|
|
transports: ['websocket']
|
|
});
|
|
|
|
// State management
|
|
const state = {
|
|
categories: [],
|
|
filter: '',
|
|
// We store expansion state directly on category objects
|
|
};
|
|
|
|
// DOM Elements
|
|
const container = document.getElementById('tree-container');
|
|
const filterInput = document.getElementById('filter-input');
|
|
|
|
// Socket Events
|
|
socket.on('connect', () => {
|
|
console.log('🔌 Connected to server via WebSocket');
|
|
});
|
|
|
|
socket.on('categoriesUpdated', () => {
|
|
console.log('🔄 Categories updated, reloading tree...');
|
|
loadCategories();
|
|
});
|
|
|
|
socket.on('categoryProductsUpdated', ({ id }) => {
|
|
console.log(`🔄 Products for category ${id} updated, reloading...`);
|
|
updateCategoryProducts(id);
|
|
});
|
|
|
|
// 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);
|
|
}
|
|
|
|
render();
|
|
});
|
|
|
|
function resetExpansion(nodes) {
|
|
nodes.forEach(node => {
|
|
node.isChildrenExpanded = false;
|
|
node.isExpanded = false;
|
|
if (node.children) resetExpansion(node.children);
|
|
});
|
|
}
|
|
|
|
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();
|
|
|
|
async function loadCategories() {
|
|
try {
|
|
const response = await fetch('/api/categories');
|
|
if (!response.ok) throw new Error('Failed to load categories');
|
|
state.categories = await response.json();
|
|
|
|
// Initialize and fetch products for all categories
|
|
initCategories(state.categories);
|
|
|
|
render();
|
|
} catch (err) {
|
|
container.innerHTML = `<div class="error">❌ ${err.message}</div>`;
|
|
}
|
|
}
|
|
|
|
function initCategories(nodes) {
|
|
nodes.forEach(node => {
|
|
// Initialize state properties
|
|
node.products = null; // null means loading
|
|
node.isExpanded = false;
|
|
node.isChildrenExpanded = false; // New state for subcategory expansion
|
|
|
|
// Fetch products
|
|
fetchProducts(node);
|
|
|
|
if (node.children) {
|
|
initCategories(node.children);
|
|
}
|
|
});
|
|
}
|
|
|
|
function fetchProducts(node) {
|
|
fetch(`/api/categories/${node.kKategorie}/products`)
|
|
.then(res => res.ok ? res.json() : [])
|
|
.then(products => {
|
|
node.products = products;
|
|
render(); // Re-render on data arrival
|
|
})
|
|
.catch(() => {
|
|
node.products = [];
|
|
render();
|
|
});
|
|
}
|
|
|
|
function updateCategoryProducts(id) {
|
|
const findAndReload = (nodes) => {
|
|
for (const node of nodes) {
|
|
if (node.kKategorie === id) {
|
|
node.products = null; // Set to loading
|
|
render();
|
|
fetchProducts(node);
|
|
return true;
|
|
}
|
|
if (node.children && findAndReload(node.children)) return true;
|
|
}
|
|
return false;
|
|
};
|
|
findAndReload(state.categories);
|
|
}
|
|
|
|
// Filtering Logic
|
|
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));
|
|
})
|
|
: [];
|
|
|
|
// Filter children
|
|
const matchingChildren = node.children ? filterTree(node.children, query) : [];
|
|
|
|
// 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
|
|
};
|
|
}
|
|
return null;
|
|
}).filter(n => n !== null);
|
|
}
|
|
|
|
// Rendering
|
|
function render() {
|
|
const filteredCategories = filterTree(state.categories, state.filter);
|
|
|
|
container.innerHTML = '';
|
|
|
|
if (state.filter && filteredCategories.length === 0) {
|
|
container.innerHTML = '<div class="loading" style="color: #666">No matching articles found.</div>';
|
|
return;
|
|
}
|
|
|
|
const ul = document.createElement('ul');
|
|
ul.className = 'tree';
|
|
filteredCategories.forEach(cat => {
|
|
ul.appendChild(renderCategory(cat));
|
|
});
|
|
container.appendChild(ul);
|
|
}
|
|
|
|
function renderCategory(category) {
|
|
// category might be a filtered copy or original.
|
|
// If it's a copy, it has _original pointing to the real state node.
|
|
const realNode = category._original || category;
|
|
|
|
const li = document.createElement('li');
|
|
|
|
const div = document.createElement('div');
|
|
div.className = 'category';
|
|
|
|
const header = document.createElement('div');
|
|
header.className = 'category-header';
|
|
|
|
// Toggle for children
|
|
if (category.children && category.children.length > 0) {
|
|
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 = '▼';
|
|
}
|
|
header.appendChild(toggle);
|
|
|
|
header.onclick = (e) => {
|
|
e.stopPropagation();
|
|
realNode.isChildrenExpanded = !realNode.isChildrenExpanded;
|
|
render();
|
|
};
|
|
}
|
|
|
|
// Image
|
|
if (category.kBild) {
|
|
const img = document.createElement('img');
|
|
img.className = 'category-image';
|
|
img.src = `/img/cat/${category.kBild}.avif`;
|
|
img.alt = category.cName;
|
|
img.onerror = () => img.style.display = 'none';
|
|
header.appendChild(img);
|
|
}
|
|
|
|
// Info
|
|
const info = document.createElement('div');
|
|
info.className = 'category-info';
|
|
|
|
const name = document.createElement('div');
|
|
name.className = 'category-name';
|
|
name.textContent = category.cName;
|
|
info.appendChild(name);
|
|
|
|
const count = document.createElement('div');
|
|
count.className = 'category-count';
|
|
// Use original counts or filtered counts?
|
|
// "remove all articles ... with no match"
|
|
// If filtered, we should probably show the count of MATCHING articles?
|
|
// User didn't specify, but it makes sense to show matching count if filtered.
|
|
// But articleCount comes from API.
|
|
// We can calculate it from products array if loaded.
|
|
const productCount = category.products ? category.products.length : category.articleCount;
|
|
let countText = `${productCount} articles`;
|
|
|
|
// Always show subcategory count if children exist (User requirement)
|
|
// Use filtered children length
|
|
if (category.children && category.children.length > 0) {
|
|
countText += `, ${category.children.length} subcategories`;
|
|
}
|
|
count.textContent = countText;
|
|
info.appendChild(count);
|
|
|
|
header.appendChild(info);
|
|
div.appendChild(header);
|
|
|
|
// Products
|
|
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';
|
|
|
|
const limit = realNode.isExpanded ? category.products.length : 3;
|
|
|
|
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.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);
|
|
}
|
|
|
|
productsDiv.appendChild(ul);
|
|
} else {
|
|
productsDiv.style.display = 'none';
|
|
}
|
|
|
|
div.appendChild(productsDiv);
|
|
|
|
// Children
|
|
if (category.children && category.children.length > 0) {
|
|
const childrenUl = document.createElement('ul');
|
|
childrenUl.className = 'children';
|
|
if (!realNode.isChildrenExpanded) {
|
|
childrenUl.classList.add('hidden');
|
|
}
|
|
|
|
category.children.forEach(child => {
|
|
childrenUl.appendChild(renderCategory(child));
|
|
});
|
|
div.appendChild(childrenUl);
|
|
}
|
|
|
|
li.appendChild(div);
|
|
return li;
|
|
}
|
|
|
|
function collapseAllProducts(nodes) {
|
|
nodes.forEach(node => {
|
|
node.isExpanded = false;
|
|
if (node.children) collapseAllProducts(node.children);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |