revision history WIP

2025-06-18 16:31:39 -07:00
parent 5f48c88106
commit fa878985f6
11 changed files with 4408 additions and 4179 deletions
--- a/public/history.html
+++ b/public/history.html
@@ -0,0 +1,90 @@
+<!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>