341 lines
14 KiB
JavaScript
341 lines
14 KiB
JavaScript
|
const http = require('http');
|
||
|
|
const fs = require('fs');
|
||
|
|
const path = require('path');
|
||
|
|
|
||
|
|
const DATA_FILE = path.join(__dirname, 'data/mac_nerds.json');
|
||
|
|
const CATS_FILE = path.join(__dirname, 'data/mac_nerds_cats.json');
|
||
|
|
const PORT = 3001;
|
||
|
|
const RISKS = ['safe', 'warning', 'danger'];
|
||
|
|
|
||
|
|
function readData() { return JSON.parse(fs.readFileSync(DATA_FILE, 'utf8')); }
|
||
|
|
function writeData(d) { fs.writeFileSync(DATA_FILE, JSON.stringify(d, null, 4), 'utf8'); }
|
||
|
|
function readCats() { return JSON.parse(fs.readFileSync(CATS_FILE, 'utf8')); }
|
||
|
|
function writeCats(c) { fs.writeFileSync(CATS_FILE, JSON.stringify(c, null, 2), 'utf8'); }
|
||
|
|
|
||
|
|
function esc(s) {
|
||
|
|
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
||
|
|
}
|
||
|
|
|
||
|
|
function html(data, cats) {
|
||
|
|
const catOptions = cats.map(c => `<option value="${c}">${c}</option>`).join('');
|
||
|
|
const catBadges = cats.map(c => `
|
||
|
|
<div class="cat-badge">
|
||
|
|
<span>${esc(c)}</span>
|
||
|
|
<button class="cat-del" onclick="deleteCat('${esc(c)}')" title="Löschen">✕</button>
|
||
|
|
</div>`).join('');
|
||
|
|
|
||
|
|
const rows = data.map((cmd, i) => `
|
||
|
|
<tr>
|
||
|
|
<td><span class="cat">${esc(cmd.cat)}</span></td>
|
||
|
|
<td>${esc(cmd.title)}</td>
|
||
|
|
<td><code>${esc(cmd.cmd)}</code></td>
|
||
|
|
<td class="desc-cell">${esc(cmd.desc)}</td>
|
||
|
|
<td><span class="risk risk-${cmd.risk}">${cmd.risk}</span></td>
|
||
|
|
<td class="actions">
|
||
|
|
<button onclick="editRow(${i})">✏</button>
|
||
|
|
<button class="del" onclick="delRow(${i})">✕</button>
|
||
|
|
</td>
|
||
|
|
</tr>`).join('');
|
||
|
|
|
||
|
|
const json = JSON.stringify(data).replace(/</g,'\\u003c');
|
||
|
|
const catsJson = JSON.stringify(cats).replace(/</g,'\\u003c');
|
||
|
|
|
||
|
|
return `<!DOCTYPE html>
|
||
|
|
<html lang="de">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>MAC NERDS // ADMIN</title>
|
||
|
|
<style>
|
||
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
|
body { background: #0a0a0a; color: #d4af37; font-family: 'Courier New', monospace; padding: 30px 20px; }
|
||
|
|
h1 { color: #ff4500; letter-spacing: 8px; font-size: 1.6rem; margin-bottom: 6px; }
|
||
|
|
p.sub { color: rgba(212,175,55,0.4); font-size: 0.7rem; letter-spacing: 3px; margin-bottom: 30px; }
|
||
|
|
|
||
|
|
.box { background: #111; border: 1px solid rgba(184,115,51,0.3); padding: 24px; margin-bottom: 24px; }
|
||
|
|
.box h2 { font-size: 0.85rem; letter-spacing: 4px; color: #b87333; margin-bottom: 18px; }
|
||
|
|
|
||
|
|
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||
|
|
.form-grid .full { grid-column: 1 / -1; }
|
||
|
|
label { display: block; font-size: 0.65rem; letter-spacing: 2px; color: rgba(212,175,55,0.5); margin-bottom: 4px; }
|
||
|
|
input, textarea, select {
|
||
|
|
width: 100%; background: #000; border: 1px solid rgba(184,115,51,0.25);
|
||
|
|
color: #d4af37; font-family: 'Courier New', monospace; font-size: 0.8rem;
|
||
|
|
padding: 8px 10px; outline: none; transition: border-color 0.2s;
|
||
|
|
}
|
||
|
|
input:focus, textarea:focus, select:focus { border-color: #d4af37; }
|
||
|
|
textarea { resize: vertical; min-height: 60px; }
|
||
|
|
select option { background: #111; }
|
||
|
|
|
||
|
|
.btn-row { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
|
||
|
|
button {
|
||
|
|
background: transparent; border: 1px solid rgba(212,175,55,0.4);
|
||
|
|
color: #d4af37; font-family: 'Courier New', monospace; font-size: 0.75rem;
|
||
|
|
letter-spacing: 2px; padding: 8px 20px; cursor: pointer; transition: all 0.2s;
|
||
|
|
}
|
||
|
|
button:hover { background: rgba(212,175,55,0.1); border-color: #d4af37; }
|
||
|
|
button.primary { border-color: #ff4500; color: #ff4500; }
|
||
|
|
button.primary:hover { background: rgba(255,69,0,0.1); }
|
||
|
|
button.del { border-color: rgba(255,69,0,0.3); color: rgba(255,69,0,0.6); padding: 4px 10px; }
|
||
|
|
button.del:hover { background: rgba(255,69,0,0.1); border-color: #ff4500; color: #ff4500; }
|
||
|
|
button.reset-btn { border-color: rgba(212,175,55,0.2); color: rgba(212,175,55,0.4); }
|
||
|
|
button.green { border-color: rgba(76,175,80,0.5); color: #4caf50; }
|
||
|
|
button.green:hover { background: rgba(76,175,80,0.1); }
|
||
|
|
|
||
|
|
/* KATEGORIEN */
|
||
|
|
.cats-wrap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
|
||
|
|
.cat-badge {
|
||
|
|
display: flex; align-items: center; gap: 6px;
|
||
|
|
background: rgba(184,115,51,0.1); border: 1px solid rgba(184,115,51,0.3);
|
||
|
|
padding: 4px 10px; font-size: 0.75rem; color: #b87333;
|
||
|
|
}
|
||
|
|
.cat-del {
|
||
|
|
background: transparent; border: none; color: rgba(255,69,0,0.5);
|
||
|
|
cursor: pointer; font-size: 0.7rem; padding: 0 2px; letter-spacing: 0;
|
||
|
|
}
|
||
|
|
.cat-del:hover { color: #ff4500; background: transparent; }
|
||
|
|
.cat-add-row { display: flex; gap: 10px; align-items: flex-end; margin-top: 16px; }
|
||
|
|
.cat-add-row input { max-width: 200px; }
|
||
|
|
|
||
|
|
/* TABELLE */
|
||
|
|
.table-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
||
|
|
.count { font-size: 0.65rem; color: rgba(212,175,55,0.4); letter-spacing: 2px; }
|
||
|
|
table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
|
||
|
|
th { text-align: left; color: rgba(212,175,55,0.4); font-size: 0.6rem; letter-spacing: 3px;
|
||
|
|
border-bottom: 1px solid rgba(184,115,51,0.2); padding: 6px 10px; }
|
||
|
|
td { padding: 10px; border-bottom: 1px solid rgba(184,115,51,0.1); vertical-align: top; }
|
||
|
|
td.desc-cell { font-size: 0.7rem; color: rgba(212,175,55,0.5); max-width: 220px; }
|
||
|
|
tr:hover td { background: rgba(212,175,55,0.03); }
|
||
|
|
code { color: #7ec8a4; font-size: 0.72rem; word-break: break-all; }
|
||
|
|
td.actions { white-space: nowrap; }
|
||
|
|
td.actions button { padding: 4px 10px; margin-right: 4px; }
|
||
|
|
.cat { font-size: 0.6rem; letter-spacing: 2px; padding: 2px 7px; border: 1px solid rgba(184,115,51,0.4); color: #b87333; }
|
||
|
|
.risk { font-size: 0.6rem; letter-spacing: 2px; padding: 2px 7px; border: 1px solid; white-space: nowrap; }
|
||
|
|
.risk-safe { color: #4caf50; border-color: rgba(76,175,80,0.4); }
|
||
|
|
.risk-warning { color: #ff9800; border-color: rgba(255,152,0,0.4); }
|
||
|
|
.risk-danger { color: #ff4500; border-color: rgba(255,69,0,0.4); }
|
||
|
|
|
||
|
|
.toast { position: fixed; bottom: 30px; right: 30px; background: #111;
|
||
|
|
border: 1px solid #4caf50; color: #4caf50; padding: 10px 20px;
|
||
|
|
font-size: 0.75rem; letter-spacing: 2px; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
|
||
|
|
.toast.err { border-color: #ff4500; color: #ff4500; }
|
||
|
|
.toast.show { opacity: 1; }
|
||
|
|
|
||
|
|
@media (max-width: 700px) {
|
||
|
|
.form-grid { grid-template-columns: 1fr; }
|
||
|
|
table { font-size: 0.68rem; }
|
||
|
|
td.desc-cell { display: none; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h1>MAC NERDS</h1>
|
||
|
|
<p class="sub">// LOKALES ADMIN-PANEL · localhost:${PORT}</p>
|
||
|
|
|
||
|
|
<!-- KATEGORIEN -->
|
||
|
|
<div class="box">
|
||
|
|
<h2>KATEGORIEN</h2>
|
||
|
|
<div class="cats-wrap" id="cats-wrap">${catBadges}</div>
|
||
|
|
<div class="cat-add-row">
|
||
|
|
<div>
|
||
|
|
<label>NEUE KATEGORIE</label>
|
||
|
|
<input type="text" id="new-cat" placeholder="z.B. sicherheit" maxlength="30"
|
||
|
|
onkeydown="if(event.key==='Enter') addCat()">
|
||
|
|
</div>
|
||
|
|
<button class="green" onclick="addCat()">[ + HINZUFÜGEN ]</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- BEFEHL FORMULAR -->
|
||
|
|
<div class="box">
|
||
|
|
<h2 id="form-title">+ NEUER BEFEHL</h2>
|
||
|
|
<form id="cmd-form">
|
||
|
|
<input type="hidden" id="edit-index" value="-1">
|
||
|
|
<div class="form-grid">
|
||
|
|
<div>
|
||
|
|
<label>KATEGORIE</label>
|
||
|
|
<select id="f-cat">${catOptions}</select>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label>RISIKO</label>
|
||
|
|
<select id="f-risk">${RISKS.map(r=>`<option value="${r}">${r}</option>`).join('')}</select>
|
||
|
|
</div>
|
||
|
|
<div class="full">
|
||
|
|
<label>TITEL</label>
|
||
|
|
<input type="text" id="f-title" placeholder="z.B. Netzwerkqualität testen" required>
|
||
|
|
</div>
|
||
|
|
<div class="full">
|
||
|
|
<label>BEFEHL</label>
|
||
|
|
<input type="text" id="f-cmd" placeholder="z.B. networkQuality" required>
|
||
|
|
</div>
|
||
|
|
<div class="full">
|
||
|
|
<label>BESCHREIBUNG</label>
|
||
|
|
<textarea id="f-desc" placeholder="Was macht der Befehl?"></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="btn-row">
|
||
|
|
<button type="submit" class="primary" id="submit-btn">[ SPEICHERN ]</button>
|
||
|
|
<button type="button" class="reset-btn" onclick="resetForm()">[ ABBRECHEN ]</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- TABELLE -->
|
||
|
|
<div class="box">
|
||
|
|
<div class="table-header">
|
||
|
|
<h2>BEFEHLE</h2>
|
||
|
|
<span class="count" id="count-label">${data.length} EINTRÄGE</span>
|
||
|
|
</div>
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr><th>CAT</th><th>TITEL</th><th>BEFEHL</th><th>BESCHREIBUNG</th><th>RISIKO</th><th></th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="cmd-table">${rows}</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="toast" id="toast"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let DATA = ${json};
|
||
|
|
let CATS = ${catsJson};
|
||
|
|
|
||
|
|
function toast(msg, err) {
|
||
|
|
const t = document.getElementById('toast');
|
||
|
|
t.textContent = msg;
|
||
|
|
t.className = 'toast' + (err ? ' err' : '') + ' show';
|
||
|
|
setTimeout(() => t.classList.remove('show'), 2000);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── KATEGORIEN ──────────────────────────────
|
||
|
|
function renderCats() {
|
||
|
|
document.getElementById('cats-wrap').innerHTML = CATS.map(c => \`
|
||
|
|
<div class="cat-badge">
|
||
|
|
<span>\${c}</span>
|
||
|
|
<button class="cat-del" onclick="deleteCat('\${c}')" title="Löschen">✕</button>
|
||
|
|
</div>\`).join('');
|
||
|
|
const sel = document.getElementById('f-cat');
|
||
|
|
const cur = sel.value;
|
||
|
|
sel.innerHTML = CATS.map(c => \`<option value="\${c}">\${c}</option>\`).join('');
|
||
|
|
if (CATS.includes(cur)) sel.value = cur;
|
||
|
|
}
|
||
|
|
|
||
|
|
function addCat() {
|
||
|
|
const inp = document.getElementById('new-cat');
|
||
|
|
const val = inp.value.trim().toLowerCase().replace(/[^a-z0-9äöü-]/g, '');
|
||
|
|
if (!val) return;
|
||
|
|
if (CATS.includes(val)) { toast('Kategorie existiert bereits', true); return; }
|
||
|
|
CATS.push(val);
|
||
|
|
CATS.sort();
|
||
|
|
saveCats(() => { inp.value = ''; renderCats(); toast('✓ KATEGORIE GESPEICHERT'); });
|
||
|
|
}
|
||
|
|
|
||
|
|
function deleteCat(cat) {
|
||
|
|
const inUse = DATA.some(d => d.cat === cat);
|
||
|
|
if (inUse && !confirm(\`Kategorie "\${cat}" wird noch von Befehlen verwendet. Trotzdem löschen?\`)) return;
|
||
|
|
CATS = CATS.filter(c => c !== cat);
|
||
|
|
saveCats(() => { renderCats(); toast('✓ GELÖSCHT'); });
|
||
|
|
}
|
||
|
|
|
||
|
|
function saveCats(cb) {
|
||
|
|
fetch('/save-cats', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify(CATS)
|
||
|
|
}).then(r => r.json()).then(r => { if (r.ok) cb(); else toast('Fehler: ' + r.error, true); });
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── BEFEHLE ──────────────────────────────────
|
||
|
|
function editRow(i) {
|
||
|
|
const c = DATA[i];
|
||
|
|
document.getElementById('edit-index').value = i;
|
||
|
|
document.getElementById('f-cat').value = c.cat;
|
||
|
|
document.getElementById('f-risk').value = c.risk;
|
||
|
|
document.getElementById('f-title').value = c.title;
|
||
|
|
document.getElementById('f-cmd').value = c.cmd;
|
||
|
|
document.getElementById('f-desc').value = c.desc;
|
||
|
|
document.getElementById('form-title').textContent = '✏ BEFEHL BEARBEITEN';
|
||
|
|
document.getElementById('submit-btn').textContent = '[ AKTUALISIEREN ]';
|
||
|
|
document.querySelector('.box:nth-child(2)').scrollIntoView({ behavior: 'smooth' });
|
||
|
|
}
|
||
|
|
|
||
|
|
function resetForm() {
|
||
|
|
document.getElementById('cmd-form').reset();
|
||
|
|
document.getElementById('edit-index').value = -1;
|
||
|
|
document.getElementById('form-title').textContent = '+ NEUER BEFEHL';
|
||
|
|
document.getElementById('submit-btn').textContent = '[ SPEICHERN ]';
|
||
|
|
}
|
||
|
|
|
||
|
|
function delRow(i) {
|
||
|
|
if (!confirm('Befehl löschen?')) return;
|
||
|
|
DATA.splice(i, 1);
|
||
|
|
saveData();
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById('cmd-form').addEventListener('submit', e => {
|
||
|
|
e.preventDefault();
|
||
|
|
const entry = {
|
||
|
|
cat: document.getElementById('f-cat').value,
|
||
|
|
title: document.getElementById('f-title').value.trim(),
|
||
|
|
cmd: document.getElementById('f-cmd').value.trim(),
|
||
|
|
desc: document.getElementById('f-desc').value.trim(),
|
||
|
|
risk: document.getElementById('f-risk').value,
|
||
|
|
};
|
||
|
|
const idx = parseInt(document.getElementById('edit-index').value);
|
||
|
|
if (idx >= 0) DATA[idx] = entry; else DATA.push(entry);
|
||
|
|
saveData();
|
||
|
|
resetForm();
|
||
|
|
});
|
||
|
|
|
||
|
|
function saveData() {
|
||
|
|
fetch('/save', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify(DATA)
|
||
|
|
}).then(r => r.json()).then(r => {
|
||
|
|
if (r.ok) { toast('✓ GESPEICHERT'); setTimeout(() => location.reload(), 500); }
|
||
|
|
else toast('Fehler: ' + r.error, true);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>`;
|
||
|
|
}
|
||
|
|
|
||
|
|
const server = http.createServer((req, res) => {
|
||
|
|
const json = (status, obj) => {
|
||
|
|
res.writeHead(status, { 'Content-Type': 'application/json' });
|
||
|
|
res.end(JSON.stringify(obj));
|
||
|
|
};
|
||
|
|
const body = (cb) => {
|
||
|
|
let b = '';
|
||
|
|
req.on('data', c => b += c);
|
||
|
|
req.on('end', () => cb(b));
|
||
|
|
};
|
||
|
|
|
||
|
|
if (req.method === 'GET' && req.url === '/') {
|
||
|
|
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
|
||
|
|
res.end(html(readData(), readCats()));
|
||
|
|
|
||
|
|
} else if (req.method === 'POST' && req.url === '/save') {
|
||
|
|
body(b => {
|
||
|
|
try { writeData(JSON.parse(b)); json(200, { ok: true }); }
|
||
|
|
catch(e) { json(400, { ok: false, error: e.message }); }
|
||
|
|
});
|
||
|
|
|
||
|
|
} else if (req.method === 'POST' && req.url === '/save-cats') {
|
||
|
|
body(b => {
|
||
|
|
try { writeCats(JSON.parse(b)); json(200, { ok: true }); }
|
||
|
|
catch(e) { json(400, { ok: false, error: e.message }); }
|
||
|
|
});
|
||
|
|
|
||
|
|
} else {
|
||
|
|
res.writeHead(404); res.end('Not found');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
server.listen(PORT, '127.0.0.1', () => {
|
||
|
|
console.log(`\n MAC NERDS ADMIN → http://localhost:${PORT}\n`);
|
||
|
|
});
|