Implement DatabaseBackend, Verschiedenes
This commit is contained in:
Carsten Graf
164
data/rfid.html
164
data/rfid.html
@@ -11,6 +11,11 @@
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||||
<button onclick="window.location.href='/settings'" class="back-btn" style="background: #6c757d; color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 5px;">
|
||||
← Zurück zu Einstellungen
|
||||
</button>
|
||||
</div>
|
||||
<h1>🏷️ RFID Daten Eingabe</h1>
|
||||
<p>Erfassen Sie RFID-Tag Informationen</p>
|
||||
</div>
|
||||
@@ -51,19 +56,10 @@
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="data-table">
|
||||
<h3>📋 Gespeicherte Einträge</h3>
|
||||
<div class="counter">
|
||||
<span id="entryCounter">0 Einträge gespeichert</span>
|
||||
</div>
|
||||
<div id="dataEntries"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// API Base URL - anpassen an Ihre Backend-URL
|
||||
const API_BASE_URL = 'http://localhost:3000/api';
|
||||
|
||||
|
||||
// Globale Variablen
|
||||
let rfidData = [];
|
||||
let isLoading = false;
|
||||
@@ -91,7 +87,7 @@
|
||||
|
||||
try {
|
||||
// API Aufruf zum Erstellen des Benutzers
|
||||
const response = await fetch(`${API_BASE_URL}/users`, {
|
||||
const response = await fetch(`/api/users`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
@@ -132,25 +128,7 @@
|
||||
setLoadingState(false);
|
||||
}
|
||||
});
|
||||
|
||||
// Benutzer laden
|
||||
async function loadUserData() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/users?limit=50`);
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
rfidData = result.data;
|
||||
updateDataTable();
|
||||
} else {
|
||||
console.error('Fehler beim Laden der Daten:', result.error);
|
||||
showErrorMessage('Fehler beim Laden der Daten');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Daten:', error);
|
||||
showErrorMessage('Verbindungsfehler beim Laden der Daten');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function showSuccessMessage(message = 'Daten erfolgreich gespeichert!') {
|
||||
const successMsg = document.getElementById('successMessage');
|
||||
@@ -185,7 +163,7 @@
|
||||
errorDiv.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
errorDiv.style.display = 'none';
|
||||
}, 5000);
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
function setLoadingState(loading) {
|
||||
@@ -209,99 +187,6 @@
|
||||
document.getElementById('uid').focus();
|
||||
}
|
||||
|
||||
function updateDataTable() {
|
||||
const container = document.getElementById('dataEntries');
|
||||
const counter = document.getElementById('entryCounter');
|
||||
|
||||
// Counter aktualisieren
|
||||
counter.textContent = `${rfidData.length} Einträge gespeichert`;
|
||||
|
||||
// Tabelle leeren
|
||||
container.innerHTML = '';
|
||||
|
||||
// Einträge anzeigen (neueste zuerst)
|
||||
rfidData.forEach((entry, index) => {
|
||||
const entryDiv = document.createElement('div');
|
||||
entryDiv.className = 'data-entry';
|
||||
|
||||
// Datum formatieren
|
||||
const createdAt = new Date(entry.created_at).toLocaleString('de-DE', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
|
||||
entryDiv.innerHTML = `
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
|
||||
<div style="flex: 1;">
|
||||
<div><strong>UID:</strong> <span>${entry.uid}</span></div>
|
||||
<div><strong>Name:</strong> <span>${entry.vorname} ${entry.nachname}</span></div>
|
||||
<div><strong>Alter:</strong> <span>${entry.alter} Jahre</span></div>
|
||||
<div><strong>Erfasst:</strong> <span>${createdAt}</span></div>
|
||||
</div>
|
||||
<div style="margin-left: 10px;">
|
||||
<button onclick="deleteUser('${entry.uid}')"
|
||||
style="background: #dc3545; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; font-size: 12px;"
|
||||
title="Benutzer löschen">
|
||||
🗑️
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(entryDiv);
|
||||
});
|
||||
|
||||
if (rfidData.length === 0) {
|
||||
container.innerHTML = '<div style="text-align: center; color: #999; padding: 20px;">Noch keine Daten erfasst</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// Benutzer löschen
|
||||
async function deleteUser(uid) {
|
||||
if (!confirm(`Möchten Sie den Benutzer mit UID "${uid}" wirklich löschen?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/users/${encodeURIComponent(uid)}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
showSuccessMessage('Benutzer erfolgreich gelöscht!');
|
||||
await loadUserData();
|
||||
} else {
|
||||
showErrorMessage(result.error || 'Fehler beim Löschen des Benutzers');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Löschen:', error);
|
||||
showErrorMessage('Verbindungsfehler beim Löschen des Benutzers');
|
||||
}
|
||||
}
|
||||
|
||||
// Server Status prüfen
|
||||
async function checkServerStatus() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/health`);
|
||||
const result = await response.json();
|
||||
|
||||
if (result.status === 'OK') {
|
||||
console.log('✅ Server ist erreichbar');
|
||||
// Daten laden
|
||||
await loadUserData();
|
||||
} else {
|
||||
throw new Error('Server nicht verfügbar');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ Server nicht erreichbar:', error);
|
||||
showErrorMessage('Server nicht erreichbar. Bitte stellen Sie sicher, dass das Backend läuft.');
|
||||
}
|
||||
}
|
||||
|
||||
// Beim Laden der Seite
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('uid').focus();
|
||||
@@ -336,7 +221,7 @@
|
||||
|
||||
try {
|
||||
// API Aufruf zum RFID Reader
|
||||
const response = await fetch(`${API_BASE_URL}/rfid/read`, {
|
||||
const response = await fetch(`/api/rfid/read`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
@@ -372,7 +257,7 @@
|
||||
uidInput.style.borderColor = '#dc3545';
|
||||
setTimeout(() => {
|
||||
uidInput.style.borderColor = '#e1e5e9';
|
||||
}, 3000);
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
@@ -392,15 +277,24 @@
|
||||
readBtn.innerHTML = '📡 Read UID';
|
||||
}
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const refreshBtn = document.createElement('button');
|
||||
refreshBtn.innerHTML = '🔄 Aktualisieren';
|
||||
refreshBtn.className = 'btn btn-secondary';
|
||||
refreshBtn.style.cssText = 'margin-top: 10px; width: 100%;';
|
||||
refreshBtn.onclick = loadUserData;
|
||||
|
||||
document.querySelector('.data-table').appendChild(refreshBtn);
|
||||
});
|
||||
|
||||
async function checkServerStatus() {
|
||||
try {
|
||||
const response = await fetch('/api/health');
|
||||
const data = await response.json();
|
||||
|
||||
if (!data.status || data.status !== 'connected') {
|
||||
showErrorMessage('Server nicht verbunden. Einige Funktionen könnten eingeschränkt sein.');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Server Status Check fehlgeschlagen:', error);
|
||||
showErrorMessage('Verbindung zum Server nicht möglich.');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user