417 lines
17 KiB
JavaScript
417 lines
17 KiB
JavaScript
#!/usr/bin/env node
|
||
|
||
/**
|
||
* mozdIT Content Editor Server v2
|
||
* Szerkesztő felület a JSON tartalom fájlokhoz
|
||
* Támogatja: szöveg szerkesztés, tömbelem hozzáadás/törlés
|
||
* Futtatás: node content-editor.js
|
||
* Megnyitás: http://localhost:4001
|
||
*/
|
||
|
||
const http = require('http');
|
||
const fs = require('fs');
|
||
const path = require('path');
|
||
|
||
const PORT = 4001;
|
||
const CONTENT_DIR = path.join(__dirname, 'proto', 'src', 'content');
|
||
|
||
const FILES = {
|
||
common: path.join(CONTENT_DIR, 'common.json'),
|
||
home: path.join(CONTENT_DIR, 'pages', 'home.json'),
|
||
about: path.join(CONTENT_DIR, 'pages', 'about.json'),
|
||
services: path.join(CONTENT_DIR, 'pages', 'services.json'),
|
||
contact: path.join(CONTENT_DIR, 'pages', 'contact.json'),
|
||
adatvedelem: path.join(CONTENT_DIR, 'pages', 'adatvedelem.json'),
|
||
hasznalatiFeltetelek: path.join(CONTENT_DIR, 'pages', 'hasznalati-feltetelek.json'),
|
||
};
|
||
|
||
const FILE_LABELS = {
|
||
common: '⚙️ Közös szövegek',
|
||
home: '🏠 Kezdőlap',
|
||
about: '👥 Rólunk',
|
||
services: '🛠️ Szolgáltatások',
|
||
contact: '📬 Kapcsolat',
|
||
adatvedelem: '🔒 Adatvédelem',
|
||
hasznalatiFeltetelek: '⚖️ ÁSZF',
|
||
};
|
||
|
||
const HTML = (activeFile, jsonData, message) => `<!DOCTYPE html>
|
||
<html lang="hu">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>mozdIT — Tartalom Szerkesztő</title>
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0f1117; color: #e2e8f0; min-height: 100vh; }
|
||
|
||
header { background: linear-gradient(135deg,#1a1f2e,#252d40); border-bottom: 1px solid #2d3748; padding: 14px 32px; display: flex; align-items: center; gap: 12px; }
|
||
header h1 { font-size: 17px; font-weight: 700; background: linear-gradient(135deg,#60a5fa,#a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||
header span { color: #64748b; font-size: 13px; }
|
||
|
||
.tabs { display: flex; gap: 2px; padding: 14px 32px 0; border-bottom: 1px solid #2d3748; background: #13192a; }
|
||
.tab { text-decoration: none; color: #94a3b8; padding: 9px 16px; border-radius: 8px 8px 0 0; font-size: 13px; font-weight: 500; transition: all .2s; border: 1px solid transparent; border-bottom: none; margin-bottom: -1px; }
|
||
.tab:hover { color: #e2e8f0; background: #1e2535; }
|
||
.tab.active { color: #60a5fa; background: #0f1117; border-color: #2d3748; }
|
||
|
||
.page { max-width: 860px; margin: 28px auto 120px; padding: 0 24px; }
|
||
.hint { color: #475569; font-size: 12px; margin-bottom: 20px; }
|
||
|
||
/* Primitive field */
|
||
.field { background: #1a2035; border: 1px solid #2d3748; border-radius: 10px; padding: 14px 16px; transition: border-color .2s; margin-bottom: 10px; }
|
||
.field:focus-within { border-color: #60a5fa; }
|
||
.field label { display: block; font-size: 11px; font-weight: 600; color: #60a5fa; text-transform: uppercase; letter-spacing:.05em; margin-bottom: 7px; font-family: monospace; }
|
||
.field input, .field textarea { width: 100%; background: transparent; border: none; outline: none; color: #e2e8f0; font-size: 14px; line-height: 1.6; resize: vertical; font-family: inherit; }
|
||
.field textarea { min-height: 52px; }
|
||
|
||
/* Array section */
|
||
.array-section { margin-bottom: 20px; }
|
||
.array-label { font-size: 12px; font-weight: 700; color: #a78bfa; text-transform: uppercase; letter-spacing:.06em; font-family: monospace; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
|
||
.array-label::after { content:''; flex: 1; height: 1px; background: #2d3748; }
|
||
|
||
.array-items { display: flex; flex-direction: column; gap: 8px; }
|
||
|
||
/* Simple string array item */
|
||
.str-item { display: flex; gap: 8px; align-items: flex-start; }
|
||
.str-item textarea { flex: 1; background: #1a2035; border: 1px solid #2d3748; border-radius: 8px; padding: 10px 12px; color: #e2e8f0; font-size: 14px; font-family: inherit; outline: none; resize: vertical; min-height: 44px; transition: border-color .2s; }
|
||
.str-item textarea:focus { border-color: #60a5fa; }
|
||
|
||
/* Object array item (card) */
|
||
.obj-card { background: #1a2035; border: 1px solid #2d3748; border-radius: 10px; padding: 14px; position: relative; }
|
||
.obj-card .card-header { font-size: 11px; color: #64748b; font-family: monospace; margin-bottom: 10px; }
|
||
.obj-card .inner-field { margin-bottom: 8px; }
|
||
.obj-card .inner-field:last-child { margin-bottom: 0; }
|
||
.obj-card .inner-label { font-size: 10px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing:.05em; font-family: monospace; margin-bottom: 4px; }
|
||
.obj-card input, .obj-card textarea { width: 100%; background: #0f1420; border: 1px solid #2d3748; border-radius: 6px; padding: 8px 10px; color: #e2e8f0; font-size: 13px; font-family: inherit; outline: none; resize: vertical; transition: border-color .2s; }
|
||
.obj-card input:focus, .obj-card textarea:focus { border-color: #60a5fa; }
|
||
|
||
/* Buttons */
|
||
.btn-del { background: transparent; border: 1px solid #3f1c1c; color: #f87171; border-radius: 7px; padding: 6px 10px; cursor: pointer; font-size: 13px; transition: all .2s; white-space: nowrap; flex-shrink: 0; }
|
||
.btn-del:hover { background: #3f1c1c; }
|
||
.btn-del-card { position: absolute; top: 10px; right: 10px; background: transparent; border: 1px solid #3f1c1c; color: #f87171; border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: 12px; transition: all .2s; }
|
||
.btn-del-card:hover { background: #3f1c1c; }
|
||
|
||
.btn-add { background: transparent; border: 1px dashed #334155; color: #64748b; border-radius: 8px; padding: 9px 16px; cursor: pointer; font-size: 13px; width: 100%; text-align: center; transition: all .2s; margin-top: 6px; }
|
||
.btn-add:hover { border-color: #a78bfa; color: #a78bfa; background: #1a1535; }
|
||
|
||
/* Bottom bar */
|
||
.bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; background: #0f1117; border-top: 1px solid #2d3748; padding: 14px 32px; display: flex; gap: 14px; align-items: center; z-index: 50; }
|
||
.btn-save { background: linear-gradient(135deg,#3b82f6,#6366f1); color: #fff; border: none; padding: 11px 26px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity .2s, transform .1s; }
|
||
.btn-save:hover { opacity: .9; transform: translateY(-1px); }
|
||
.btn-save:active { transform: translateY(0); }
|
||
.preview-link { color: #64748b; font-size: 13px; text-decoration: none; }
|
||
.preview-link:hover { color: #94a3b8; }
|
||
.save-status { font-size: 12px; color: #10b981; display: none; }
|
||
|
||
/* Toast */
|
||
.toast { position: fixed; top: 20px; right: 20px; padding: 13px 18px; border-radius: 9px; font-size: 14px; font-weight: 500; z-index: 200; animation: slideIn .3s ease; }
|
||
.toast.ok { background: #064e3b; border: 1px solid #10b981; color: #6ee7b7; }
|
||
.toast.err { background: #450a0a; border: 1px solid #ef4444; color: #fca5a5; }
|
||
@keyframes slideIn { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform: translateX(0); } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
${message ? `<div class="toast ${message.type === 'ok' ? 'ok' : 'err'}">${message.text}</div>` : ''}
|
||
|
||
<header>
|
||
<h1>mozdIT Tartalom Szerkesztő</h1>
|
||
<span>— JSON fájlok szerkesztése vizuálisan</span>
|
||
</header>
|
||
|
||
<nav class="tabs">
|
||
${Object.entries(FILE_LABELS).map(([k, l]) =>
|
||
`<a href="/?file=${k}" class="tab ${activeFile === k ? 'active' : ''}">${l}</a>`
|
||
).join('')}
|
||
</nav>
|
||
|
||
<div class="page">
|
||
<p class="hint">📝 Szerkeszd a mezőket. Tömbökből elemet törölhetsz (❌) vagy hozzáadhatsz (➕). Mentés gomb menti a fájlt.</p>
|
||
<div id="editor"></div>
|
||
</div>
|
||
|
||
<div class="bottom-bar">
|
||
<button class="btn-save" onclick="save()">💾 Mentés</button>
|
||
<span class="save-status" id="saveStatus">✅ Mentve!</span>
|
||
<a href="http://localhost:3000" target="_blank" class="preview-link">🔗 Előnézet →</a>
|
||
</div>
|
||
|
||
<script id="page-data" type="application/json">${jsonData.replace(/<\//g, '<\\/')}</script>
|
||
<script>
|
||
const DATA = JSON.parse(document.getElementById('page-data').textContent);
|
||
const FILE = "${activeFile}";
|
||
|
||
// ── Render ──────────────────────────────────────────────────────────────────
|
||
|
||
function render(obj, container) {
|
||
container.innerHTML = '';
|
||
renderObject(obj, container, '');
|
||
}
|
||
|
||
function renderObject(obj, container, prefix) {
|
||
for (const [key, val] of Object.entries(obj)) {
|
||
const path = prefix ? prefix + '.' + key : key;
|
||
if (Array.isArray(val)) {
|
||
renderArray(key, val, container, path);
|
||
} else if (typeof val === 'object' && val !== null) {
|
||
renderObject(val, container, path);
|
||
} else {
|
||
renderPrimitive(path, val, container);
|
||
}
|
||
}
|
||
}
|
||
|
||
function renderPrimitive(path, val, container) {
|
||
const isLong = String(val).length > 80 || String(val).includes('<');
|
||
const div = document.createElement('div');
|
||
div.className = 'field';
|
||
div.innerHTML = \`
|
||
<label>\${path}</label>
|
||
\${isLong
|
||
? \`<textarea data-path="\${path}" rows="\${Math.min(8,Math.max(2,Math.ceil(String(val).length/80)))}">\${esc(val)}</textarea>\`
|
||
: \`<input type="text" data-path="\${path}" value="\${esc(val)}">\`}
|
||
\`;
|
||
container.appendChild(div);
|
||
}
|
||
|
||
function renderArray(key, arr, container, path) {
|
||
const section = document.createElement('div');
|
||
section.className = 'array-section';
|
||
section.dataset.arrayPath = path;
|
||
|
||
const label = document.createElement('div');
|
||
label.className = 'array-label';
|
||
label.textContent = path;
|
||
section.appendChild(label);
|
||
|
||
const items = document.createElement('div');
|
||
items.className = 'array-items';
|
||
items.dataset.arrayItems = path;
|
||
section.appendChild(items);
|
||
|
||
arr.forEach((item, i) => {
|
||
if (typeof item === 'object' && item !== null) {
|
||
items.appendChild(makeObjCard(item, i, path));
|
||
} else {
|
||
items.appendChild(makeStrItem(item, i, path));
|
||
}
|
||
});
|
||
|
||
// Template for adding new items
|
||
const sample = arr.length > 0 ? arr[arr.length - 1] : '';
|
||
const isObj = typeof sample === 'object' && sample !== null;
|
||
|
||
const addBtn = document.createElement('button');
|
||
addBtn.className = 'btn-add';
|
||
addBtn.textContent = '➕ Új elem hozzáadása';
|
||
addBtn.onclick = () => {
|
||
const idx = items.children.length;
|
||
if (isObj) {
|
||
const blank = Object.fromEntries(Object.keys(sample).map(k => [k, '']));
|
||
items.appendChild(makeObjCard(blank, idx, path));
|
||
} else {
|
||
items.appendChild(makeStrItem('', idx, path));
|
||
}
|
||
reindexItems(items);
|
||
};
|
||
section.appendChild(addBtn);
|
||
container.appendChild(section);
|
||
}
|
||
|
||
function makeStrItem(val, idx, path) {
|
||
const wrap = document.createElement('div');
|
||
wrap.className = 'str-item';
|
||
const ta = document.createElement('textarea');
|
||
ta.dataset.path = path + '[' + idx + ']';
|
||
ta.value = val;
|
||
ta.rows = Math.min(6, Math.max(2, Math.ceil(String(val).length / 80)));
|
||
const del = document.createElement('button');
|
||
del.className = 'btn-del';
|
||
del.textContent = '❌';
|
||
del.title = 'Törlés';
|
||
del.onclick = () => { wrap.remove(); reindexItems(wrap.closest('.array-items')); };
|
||
wrap.appendChild(ta);
|
||
wrap.appendChild(del);
|
||
return wrap;
|
||
}
|
||
|
||
function makeObjCard(obj, idx, path) {
|
||
const card = document.createElement('div');
|
||
card.className = 'obj-card';
|
||
const hdr = document.createElement('div');
|
||
hdr.className = 'card-header';
|
||
hdr.textContent = path + '[' + idx + ']';
|
||
card.appendChild(hdr);
|
||
|
||
for (const [k, v] of Object.entries(obj)) {
|
||
const fieldPath = path + '[' + idx + '].' + k;
|
||
const isLong = String(v).length > 80 || String(v).includes('<');
|
||
const fd = document.createElement('div');
|
||
fd.className = 'inner-field';
|
||
fd.innerHTML = \`
|
||
<div class="inner-label">\${k}</div>
|
||
\${isLong
|
||
? \`<textarea data-path="\${fieldPath}" rows="\${Math.min(6,Math.max(2,Math.ceil(String(v).length/80)))}">\${esc(v)}</textarea>\`
|
||
: \`<input type="text" data-path="\${fieldPath}" value="\${esc(v)}">\`}
|
||
\`;
|
||
card.appendChild(fd);
|
||
}
|
||
|
||
const del = document.createElement('button');
|
||
del.className = 'btn-del-card';
|
||
del.textContent = '❌ Törlés';
|
||
del.onclick = () => { card.remove(); reindexItems(card.closest('.array-items')); };
|
||
card.appendChild(del);
|
||
return card;
|
||
}
|
||
|
||
function reindexItems(itemsEl) {
|
||
if (!itemsEl) return;
|
||
const path = itemsEl.dataset.arrayItems;
|
||
Array.from(itemsEl.children).forEach((child, i) => {
|
||
// Update all data-path in this child
|
||
child.querySelectorAll('[data-path]').forEach(el => {
|
||
const old = el.dataset.path;
|
||
// Replace the array index part: path[old_i] → path[new_i]
|
||
el.dataset.path = old.replace(/^(.+?)\[(\d+)\]/, (_,p) => p + '[' + i + ']');
|
||
});
|
||
// Update card header
|
||
const hdr = child.querySelector('.card-header');
|
||
if (hdr) hdr.textContent = path + '[' + i + ']';
|
||
// Update str-item textarea
|
||
const ta = child.querySelector('textarea[data-path]');
|
||
if (ta && !ta.closest('.obj-card')) {
|
||
ta.dataset.path = path + '[' + i + ']';
|
||
}
|
||
});
|
||
}
|
||
|
||
// ── Collect & Save ───────────────────────────────────────────────────────────
|
||
|
||
function collect() {
|
||
const result = JSON.parse(JSON.stringify(DATA)); // deep clone as base
|
||
// Wipe all arrays so we rebuild them from DOM
|
||
clearArrays(result);
|
||
|
||
document.querySelectorAll('[data-path]').forEach(el => {
|
||
setPath(result, el.dataset.path, el.value);
|
||
});
|
||
return result;
|
||
}
|
||
|
||
function clearArrays(obj) {
|
||
for (const k of Object.keys(obj)) {
|
||
if (Array.isArray(obj[k])) obj[k] = [];
|
||
else if (typeof obj[k] === 'object' && obj[k] !== null) clearArrays(obj[k]);
|
||
}
|
||
}
|
||
|
||
function setPath(obj, path, value) {
|
||
// Parse "a.b[0].c" into parts
|
||
const parts = path.replace(/\[(\d+)\]/g, '.$1').split('.');
|
||
let cur = obj;
|
||
for (let i = 0; i < parts.length - 1; i++) {
|
||
const p = isNaN(parts[i]) ? parts[i] : +parts[i];
|
||
const next = isNaN(parts[i+1]) ? {} : (cur[p] || []);
|
||
if (cur[p] === undefined || cur[p] === null) cur[p] = next;
|
||
cur = cur[p];
|
||
}
|
||
const last = isNaN(parts[parts.length-1]) ? parts[parts.length-1] : +parts[parts.length-1];
|
||
cur[last] = value;
|
||
}
|
||
|
||
async function save() {
|
||
const data = collect();
|
||
const res = await fetch('/save?file=' + FILE, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(data, null, 2)
|
||
});
|
||
const json = await res.json();
|
||
const status = document.getElementById('saveStatus');
|
||
if (json.ok) {
|
||
status.textContent = '✅ Mentve!';
|
||
status.style.color = '#10b981';
|
||
} else {
|
||
status.textContent = '❌ Hiba: ' + json.error;
|
||
status.style.color = '#f87171';
|
||
}
|
||
status.style.display = 'inline';
|
||
setTimeout(() => status.style.display = 'none', 3000);
|
||
}
|
||
|
||
function esc(v) {
|
||
return String(v).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
||
}
|
||
|
||
// Boot
|
||
render(DATA, document.getElementById('editor'));
|
||
|
||
// Auto-dismiss toast
|
||
const toast = document.querySelector('.toast');
|
||
if (toast) setTimeout(() => toast.remove(), 3500);
|
||
</script>
|
||
</body>
|
||
</html>`;
|
||
|
||
// ── Server ───────────────────────────────────────────────────────────────────
|
||
|
||
const CMS_USER = process.env.CMS_USER || 'admin';
|
||
const CMS_PASS = process.env.CMS_PASS || 'mozdit2026';
|
||
|
||
const server = http.createServer(async (req, res) => {
|
||
// Basic Auth verification
|
||
const b64auth = (req.headers.authorization || '').split(' ')[1] || '';
|
||
const [login, password] = Buffer.from(b64auth, 'base64').toString().split(':');
|
||
|
||
if (login !== CMS_USER || password !== CMS_PASS) {
|
||
res.writeHead(401, { 'WWW-Authenticate': 'Basic realm="mozdIT CMS"' });
|
||
res.end('Access denied');
|
||
return;
|
||
}
|
||
|
||
const u = new URL(req.url, `http://localhost:${PORT}`);
|
||
const fileKey = u.searchParams.get('file') || 'home';
|
||
const activeFile = FILES[fileKey] ? fileKey : 'home';
|
||
|
||
// POST /save — JSON body
|
||
if (req.method === 'POST' && u.pathname === '/save') {
|
||
let body = '';
|
||
req.on('data', c => body += c);
|
||
req.on('end', () => {
|
||
try {
|
||
const data = JSON.parse(body);
|
||
fs.writeFileSync(FILES[activeFile], JSON.stringify(data, null, 2) + '\n', 'utf8');
|
||
res.writeHead(200, { 'Content-Type': 'application/json' });
|
||
res.end(JSON.stringify({ ok: true }));
|
||
} catch (e) {
|
||
res.writeHead(500, { 'Content-Type': 'application/json' });
|
||
res.end(JSON.stringify({ ok: false, error: e.message }));
|
||
}
|
||
});
|
||
return;
|
||
}
|
||
|
||
// GET / — editor UI
|
||
let message = null;
|
||
let jsonData = '{}';
|
||
try {
|
||
jsonData = fs.readFileSync(FILES[activeFile], 'utf8').trim();
|
||
} catch (e) {
|
||
message = { type: 'err', text: 'Fájl olvasási hiba: ' + e.message };
|
||
}
|
||
|
||
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
|
||
res.end(HTML(activeFile, jsonData, message));
|
||
});
|
||
|
||
server.listen(PORT, () => {
|
||
console.log(`\n✅ mozdIT Tartalom Szerkesztő fut: http://localhost:${PORT}\n`);
|
||
console.log(' Szerkeszthető fájlok:');
|
||
Object.entries(FILE_LABELS).forEach(([k, l]) => {
|
||
const rel = k === 'common' ? 'common.json' : `pages/${k}.json`;
|
||
console.log(` • ${l}: proto/src/content/${rel}`);
|
||
});
|
||
console.log('\n Ctrl+C a leállításhoz\n');
|
||
});
|