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

feat: Add web server and UI for category tree display, and update picture syncer to use AVIF format.

Browse Source
This commit is contained in:
sebseb7
2025-11-23 10:01:51 +01:00
parent 4c4ef37e40
commit 729d056618
5 changed files with 295 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.example
View File

@@ -7,4 +7,6 @@ CACHE_LOCATION=./cache
ROOT_CATEGORY_ID=0 ROOT_CATEGORY_ID=0
JTL_SHOP_ID=0 JTL_SHOP_ID=0
JTL_SPRACHE_ID=1 JTL_SPRACHE_ID=1
JTL_PLATTFORM_ID=1 JTL_PLATTFORM_ID=1
SERVER_PORT=3991
SERVER_HOST=127.0.0.1

226
index.html Normal file
View File

@@ -0,0 +1,226 @@
<!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;
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;
}
</style>
</head>
<body>
<div class="container">
<h1>📦 Category Tree</h1>
<div id="tree-container">
<div class="loading">Loading categories...</div>
</div>
</div>
<script>
async function loadCategories() {
try {
const response = await fetch('/api/categories');
if (!response.ok) throw new Error('Failed to load categories');
const categories = await response.json();
renderTree(categories);
} catch (err) {
document.getElementById('tree-container').innerHTML =
`<div class="error">❌ ${err.message}</div>`;
}
}
function renderTree(categories) {
const container = document.getElementById('tree-container');
container.innerHTML = '';
const ul = document.createElement('ul');
ul.className = 'tree';
categories.forEach(cat => {
ul.appendChild(renderCategory(cat));
});
container.appendChild(ul);
}
function renderCategory(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) {
const toggle = document.createElement('span');
toggle.className = 'toggle';
toggle.textContent = '▼';
header.appendChild(toggle);
}
// 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';
count.textContent = `${category.articleCount} articles`;
info.appendChild(count);
header.appendChild(info);
div.appendChild(header);
// Children
if (category.children && category.children.length > 0) {
const childrenUl = document.createElement('ul');
childrenUl.className = 'children';
category.children.forEach(child => {
childrenUl.appendChild(renderCategory(child));
});
div.appendChild(childrenUl);
// Toggle functionality
div.addEventListener('click', (e) => {
if (e.target.closest('.children')) return;
e.stopPropagation();
childrenUl.classList.toggle('hidden');
const toggle = div.querySelector('.toggle');
if (toggle) {
toggle.textContent = childrenUl.classList.contains('hidden') ? '▶' : '▼';
}
});
}
li.appendChild(div);
return li;
}
loadCategories();
</script>
</body>
</html>

4
index.js
View File

@@ -1,5 +1,6 @@
import categorySyncer from './category-syncer.js'; import categorySyncer from './category-syncer.js';
import pictureSyncer from './picture-syncer.js'; import pictureSyncer from './picture-syncer.js';
import { startServer } from './server.js';
categorySyncer.on('synced', async ({ tree, unprunedTree, changed }) => { categorySyncer.on('synced', async ({ tree, unprunedTree, changed }) => {
if (changed) { if (changed) {
@@ -44,3 +45,6 @@ if (process.stdout.isTTY) {
process.exit(0); process.exit(0);
}); });
} }
// Start Express server
startServer();

18
picture-syncer.js
View File

@@ -1,5 +1,6 @@
import fs from 'fs/promises'; import fs from 'fs/promises';
import path from 'path'; import path from 'path';
import sharp from 'sharp';
import { createConnection } from './database.js'; import { createConnection } from './database.js';
class PictureSyncer { class PictureSyncer {
@@ -25,18 +26,17 @@ class PictureSyncer {
// Directory might be empty or new // Directory might be empty or new
} }
// Filter for image files (assuming we save as {id}.jpg or similar, but let's check just by ID prefix) // Filter for image files (assuming we save as {id}.avif)
// Actually, let's assume we save as `${id}.jpg`
const existingIds = existingFiles const existingIds = existingFiles
.filter(f => f.endsWith('.jpg')) .filter(f => f.endsWith('.avif'))
.map(f => parseInt(f.replace('.jpg', ''))); .map(f => parseInt(f.replace('.avif', '')));
const validIds = new Set(imageIds.filter(id => id !== null && id !== undefined)); const validIds = new Set(imageIds.filter(id => id !== null && id !== undefined));
// 1. Delete obsolete images // 1. Delete obsolete images
const toDelete = existingIds.filter(id => !validIds.has(id)); const toDelete = existingIds.filter(id => !validIds.has(id));
for (const id of toDelete) { for (const id of toDelete) {
const filePath = path.join(groupDir, `${id}.jpg`); const filePath = path.join(groupDir, `${id}.avif`);
await fs.unlink(filePath); await fs.unlink(filePath);
} }
if (toDelete.length > 0) { if (toDelete.length > 0) {
@@ -73,9 +73,11 @@ class PictureSyncer {
for (const record of result.recordset) { for (const record of result.recordset) {
if (record.bBild) { if (record.bBild) {
const filePath = path.join(dir, `${record.kBild}.jpg`); const filePath = path.join(dir, `${record.kBild}.avif`);
await fs.writeFile(filePath, record.bBild); // Convert to AVIF using sharp
// console.log(`💾 Saved image: ${filePath}`); await sharp(record.bBild)
.avif({ quality: 80 })
.toFile(filePath);
} }
} }
const processed = Math.min(i + chunkSize, ids.length); const processed = Math.min(i + chunkSize, ids.length);

52
server.js Normal file
View File

@@ -0,0 +1,52 @@
import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';
import fs from 'fs/promises';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
export function startServer() {
const app = express();
const PORT = process.env.SERVER_PORT || 3000;
const HOST = process.env.SERVER_HOST || '0.0.0.0';
const CACHE_DIR = process.env.CACHE_LOCATION || './cache';
// Serve category tree JSON
app.get('/api/categories', async (req, res) => {
try {
const treePath = path.join(CACHE_DIR, 'category_tree.json');
const data = await fs.readFile(treePath, 'utf-8');
res.json(JSON.parse(data));
} catch (err) {
res.status(500).json({ error: 'Failed to load category tree' });
}
});
// Serve category images
app.get('/img/cat/:id.avif', (req, res) => {
const { id } = req.params;
const imagePath = path.join(CACHE_DIR, 'img', 'categories', `${id}.avif`);
res.sendFile(path.resolve(imagePath), (err) => {
if (err) {
res.status(404).send('Image not found');
}
});
});
// Serve index.html
app.get('/', (req, res) => {
const htmlPath = path.join(__dirname, 'index.html');
console.log('Attempting to serve:', htmlPath);
res.sendFile(htmlPath, (err) => {
if (err) {
console.error('Error serving index.html:', err);
res.status(500).send('Error loading page');
}
});
});
app.listen(PORT, HOST, () => {
console.log(`🌐 Server running on http://${HOST}:${PORT}`);
});
}