91 lines
3.8 KiB
HTML
91 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<link rel="icon" href="/img/icon.png" type="image/png">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Code-Historie – xXx Sphere</title>
|
||
<link rel="stylesheet" href="/css/variables.css">
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
<style>
|
||
.history-list { display:flex; flex-direction:column; gap:1rem; margin-top:1.25rem; }
|
||
.history-card {
|
||
background:var(--color-secondary); border:1px solid var(--color-secondary);
|
||
border-radius:10px; padding:1rem 1.2rem;
|
||
}
|
||
.history-header { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; margin-bottom:0.6rem; }
|
||
.history-lock-name { font-weight:700; font-size:0.95rem; }
|
||
.history-source {
|
||
font-size:0.75rem; color:var(--color-muted);
|
||
background:var(--color-card); border-radius:6px;
|
||
padding:0.15rem 0.5rem; white-space:nowrap;
|
||
}
|
||
.history-code {
|
||
font-family: monospace; font-size:0.85rem;
|
||
background:var(--color-card); border-radius:6px;
|
||
padding:0.5rem 0.75rem; word-break:break-all; line-height:1.5;
|
||
margin-bottom:0.5rem;
|
||
}
|
||
.history-time { font-size:0.78rem; color:var(--color-muted); }
|
||
.empty-hint { color:var(--color-muted); font-size:0.9rem; margin-top:0.75rem; }
|
||
.page-hint { font-size:0.85rem; color:var(--color-muted); margin:0.25rem 0 0; }
|
||
</style>
|
||
</head>
|
||
<body class="app">
|
||
<div class="main">
|
||
<div class="content">
|
||
<h1 style="margin:0 0 0.25rem;">🔙 Entsperrcode-Historie</h1>
|
||
<p class="page-hint">Die letzten 10 Entsperrcodes, die dir angezeigt wurden.</p>
|
||
<div class="history-list" id="historyList">
|
||
<span class="empty-hint">Wird geladen…</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/js/icons.js"></script>
|
||
<script src="/js/sidebar.js"></script>
|
||
<script>
|
||
const SOURCE_LABELS = {
|
||
GREEN_CARD: 'Grüne Karte',
|
||
HYGIENE_OPEN: 'Hygiene-Öffnung',
|
||
HYGIENE_CLOSE: 'Hygiene-Öffnung (neu)',
|
||
KEYHOLDER_UNLOCK: 'Freigabe durch Keyholder',
|
||
};
|
||
|
||
async function load() {
|
||
const res = await fetch('/keyholder/cardlock/unlock-history');
|
||
const list = document.getElementById('historyList');
|
||
if (!res.ok) { list.innerHTML = '<span class="empty-hint">Fehler beim Laden.</span>'; return; }
|
||
const entries = await res.json();
|
||
if (!entries.length) { list.innerHTML = '<span class="empty-hint">Noch keine Entsperrcodes erhalten.</span>'; return; }
|
||
list.innerHTML = '';
|
||
for (const e of entries) {
|
||
const dt = new Date(e.receivedAt);
|
||
const formatted = dt.toLocaleString('de-DE', {
|
||
day:'2-digit', month:'2-digit', year:'numeric',
|
||
hour:'2-digit', minute:'2-digit'
|
||
});
|
||
const sourceLabel = SOURCE_LABELS[e.source] || e.source;
|
||
const card = document.createElement('div');
|
||
card.className = 'history-card';
|
||
card.innerHTML = `
|
||
<div class="history-header">
|
||
<span class="history-lock-name">${escHtml(e.lockName)}</span>
|
||
<span class="history-source">${escHtml(sourceLabel)}</span>
|
||
</div>
|
||
<div class="history-code">${escHtml(e.unlockCode)}</div>
|
||
<div class="history-time">Erhalten am ${escHtml(formatted)}</div>
|
||
`;
|
||
list.appendChild(card);
|
||
}
|
||
}
|
||
|
||
function escHtml(s) {
|
||
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
||
}
|
||
|
||
load();
|
||
</script>
|
||
</body>
|
||
</html>
|