admin/espid2sensor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pug und CSS angepasst

Browse Source
This commit is contained in:
Reinhard X. Fürst
2025-08-12 13:55:52 +00:00
parent 52fb37517a
commit 7556c0792a
3 changed files with 53 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
public/index.html
View File

@@ -1,118 +0,0 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>ESP-ID + Sensornummer speichern</title>
<style>
body { font-family: system-ui, sans-serif; padding: 20px; max-width:800px; margin:auto; }
input, button { font-size: 1rem; padding: 8px; }
.card { border: 1px solid #ddd; padding: 12px; border-radius: 8px; margin-bottom: 12px; }
table { width:100%; border-collapse: collapse; }
th, td { text-align:left; padding:8px; border-bottom:1px solid #eee; }
</style>
</head>
<body>
<h1>ESP-ID + Sensornummer speichern</h1>
<div class="card">
<label>ESP-ID:</label>
<input id="espId" placeholder="z.B. esp-1234" />
<br><br>
<label>Sensornummer:</label>
<input id="sensorNumber" placeholder="z.B. 42" />
<br><br>
<button id="saveBtn">Speichern</button>
<div id="result" style="margin-top:10px"></div>
</div>
<div class="card">
<h2>Gespeicherte Einträge</h2>
<div style="margin-bottom:8px;">
<button id="refreshBtn">Aktualisieren</button>
Seite: <input id="page" value="1" style="width:50px" />
Limit: <input id="limit" value="25" style="width:50px" />
</div>
<div id="list"></div>
</div>
<script>
const resultEl = document.getElementById('result');
const espIn = document.getElementById('espId');
const sensorIn = document.getElementById('sensorNumber');
document.getElementById('saveBtn').addEventListener('click', async () => {
const espId = espIn.value.trim();
const sensorNumber = sensorIn.value.trim();
if (!espId || !sensorNumber) {
resultEl.innerText = 'Bitte ESP-ID und Sensornummer eingeben.';
return;
}
resultEl.innerText = 'Speichere...';
try {
const r = await fetch('/api/save', {
method: 'POST',
headers: {'Content-Type':'application/json'},
body: JSON.stringify({ espId, sensorNumber })
});
const j = await r.json();
if (j.ok) {
resultEl.innerHTML = `<strong>Gespeichert:</strong> ESP-ID = ${j.entry.espId}, Sensor = ${j.entry.sensorNumber}`;
espIn.value = '';
sensorIn.value = '';
loadList();
} else {
resultEl.innerText = 'Fehler: ' + (j.error || 'Unbekannt');
}
} catch (err) {
resultEl.innerText = 'Netzwerkfehler';
}
});
async function loadList() {
const page = document.getElementById('page').value || 1;
const limit = document.getElementById('limit').value || 25;
const listEl = document.getElementById('list');
listEl.innerText = 'Lade...';
try {
const r = await fetch(`/api/list?page=${encodeURIComponent(page)}&limit=${encodeURIComponent(limit)}`);
const j = await r.json();
if (!j.ok) { listEl.innerText = 'Fehler beim Laden'; return; }
if (j.items.length === 0) { listEl.innerText = 'Keine Einträge'; return;}
let html = `<div>Ergebnis: ${j.items.length} von ${j.total} (Seite ${j.page})</div>`;
html += '<table><thead><tr><th>Datum</th><th>ESP-ID</th><th>Sensor</th><th></th></tr></thead><tbody>';
j.items.forEach(it => {
html += `<tr>
<td>${it.createdAt}</td>
<td>${it.espId}</td>
<td>${it.sensorNumber}</td>
<td><button onclick="deleteEntry('${it._id}')">Löschen</button></td>
</tr>`;
});
html += '</tbody></table>';
listEl.innerHTML = html;
} catch (err) {
listEl.innerText = 'Netzwerkfehler beim Laden';
}
}
async function deleteEntry(id) {
if (!confirm('Diesen Eintrag wirklich löschen?')) return;
try {
const r = await fetch(`/api/entry/${id}`, { method: 'DELETE' });
const j = await r.json();
if (j.ok) {
loadList();
} else {
alert('Fehler beim Löschen');
}
} catch (err) {
alert('Netzwerkfehler');
}
}
document.getElementById('refreshBtn').addEventListener('click', loadList);
loadList();
</script>
</body>
</html>

53
public/styles.css
View File

@@ -1,5 +1,48 @@
body { font-family: system-ui, sans-serif; padding: 20px; max-width:800px; margin:auto; } body {
input, button { font-size: 1rem; padding: 8px; margin: 2px; } font-family: system-ui, sans-serif;
.card { border: 1px solid #ddd; padding: 12px; border-radius: 8px; margin-bottom: 12px; } padding: 20px;
table { width:100%; border-collapse: collapse; } max-width: 800px;
th, td { text-align:left; padding:8px; border-bottom:1px solid #eee; } margin: auto;
}
input, button {
font-size: 1rem;
padding: 8px;
margin: 2px;
}
.card {
border: 1px solid #ddd;
padding: 12px;
border-radius: 8px;
margin-bottom: 12px;
}
#result {
margin-top: 10px;
}
.controls {
margin-bottom: 8px;
}
.controls input {
width: 50px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #eee;
}
.controls input#page,
.controls input#limit {
width: 50px;
margin-left: 10px;
}

10
views/index.pug
View File

@@ -9,7 +9,7 @@ html(lang="de")
h1 ESP-ID + Sensornummer speichern h1 ESP-ID + Sensornummer speichern
.card .card
label(for="espId") ESP-id: label(for="espId") ESP-ID:
input#espId(placeholder="z.B. esp-1234") input#espId(placeholder="z.B. esp-1234")
br br
br br
@@ -18,16 +18,16 @@ html(lang="de")
br br
br br
button#saveBtn Speichern button#saveBtn Speichern
div#result(style="margin-top:10px") div#result
.card .card
h2 Gespeicherte Einträge h2 Gespeicherte Einträge
div(style="margin-bottom:8px;") div.controls
button#refreshBtn Aktualisieren button#refreshBtn Aktualisieren
| Seite: | Seite:
input#page(value="1" style="width:50px") input#page(value="1")
| Limit: | Limit:
input#limit(value="25" style="width:50px") input#limit(value="25")
div#list div#list
script(src="/global.js") script(src="/global.js")