91 lines
3.8 KiB
HTML
91 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
|
<title>Cuberoo History</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<style>
|
|
html, body { height: 100%; margin: 0; padding: 0; background: #181818; color: white; overflow: auto !important; }
|
|
body { min-height: 100vh; }
|
|
.history-list { max-width: 600px; margin: 40px auto; background: #181818; border-radius: 10px; box-shadow: 0 4px 32px #000b; padding: 24px; }
|
|
.history-item { padding: 14px 0; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; }
|
|
.history-item:last-child { border-bottom: none; }
|
|
.history-action { color: #d103f9; font-weight: bold; }
|
|
.history-timestamp { color: #aaa; font-size: 0.95em; margin-right: 18px; }
|
|
.revert-btn { background: #d103f9; color: white; border: none; border-radius: 6px; padding: 6px 18px; font-size: 1em; cursor: pointer; transition: background 0.15s; }
|
|
.revert-btn:hover { background: #a002b6; }
|
|
.history-header { text-align: center; color: #d103f9; font-size: 2em; margin-bottom: 24px; }
|
|
.back-link { color: #d103f9; text-decoration: none; font-size: 1.1em; display: block; margin-bottom: 18px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="history-list">
|
|
<a href="index.html" class="back-link">← Back to Cuberoo</a>
|
|
<div class="history-header">Revision History</div>
|
|
<div id="historyContainer">Loading...</div>
|
|
</div>
|
|
<script>
|
|
async function loadHistory() {
|
|
const res = await fetch('/api/history');
|
|
const history = await res.json();
|
|
const container = document.getElementById('historyContainer');
|
|
if (!Array.isArray(history) || history.length === 0) {
|
|
container.innerHTML = '<div style="color:#aaa;">No history yet.</div>';
|
|
return;
|
|
}
|
|
container.innerHTML = '';
|
|
history.forEach((item, idx) => {
|
|
const div = document.createElement('div');
|
|
div.className = 'history-item';
|
|
div.innerHTML = `
|
|
<span class="history-timestamp">${new Date(item.timestamp).toLocaleString()}</span>
|
|
<span class="history-action">${item.action}</span>
|
|
<button class="revert-btn" data-idx="${idx}">Revert</button>
|
|
`;
|
|
container.appendChild(div);
|
|
});
|
|
// Add click handlers for revert
|
|
document.querySelectorAll('.revert-btn').forEach(btn => {
|
|
btn.addEventListener('click', async (e) => {
|
|
const idx = parseInt(btn.getAttribute('data-idx'));
|
|
// Revert to the next revision (state before this one)
|
|
let revertId = null;
|
|
if (idx + 1 < history.length) {
|
|
revertId = history[idx + 1].id;
|
|
}
|
|
if (!confirm('Revert to the state BEFORE this change? This will overwrite the current board.')) return;
|
|
if (revertId) {
|
|
const res = await fetch('/api/revert', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id: revertId })
|
|
});
|
|
if (res.ok) {
|
|
alert('Reverted!');
|
|
window.location.href = 'index.html';
|
|
} else {
|
|
alert('Failed to revert.');
|
|
}
|
|
} else {
|
|
// No earlier revision, clear board
|
|
const res = await fetch('/api/revert', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id: null })
|
|
});
|
|
if (res.ok) {
|
|
alert('Reverted to empty board!');
|
|
window.location.href = 'index.html';
|
|
} else {
|
|
alert('Failed to revert.');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
loadHistory();
|
|
</script>
|
|
</body>
|
|
</html>
|