Spaces:

ulduldp
/

logs-test

Sleeping

App Files Files Community

ulduldp commited on 29 days ago

Commit

7b2ef27

verified ·

1 Parent(s): 9fcb962

Update public/index.html

Browse files

Files changed (1) hide show

public/index.html +104 -158

public/index.html CHANGED Viewed

@@ -5,103 +5,71 @@
 <title>Live Logs</title>
 <style>
-  body {
-    margin: 0;
-    background: #0b1020;
-    color: #e2e8f0;
-    font-family: monospace;
-    display: flex;
-    flex-direction: column;
-    height: 90vh;
-  }
-  header {
-    padding: 10px;
-    background: #111827;
-    border-bottom: 1px solid #1f2937;
-  }
-  #logs {
-    flex: 1;
-    overflow-y: auto;
-    padding: 10px;
-    font-size: 13px;
-  }
-  .log {
-    margin-bottom: 6px;
-    word-break: break-word;
-  }
-  .time {
-    color: #64748b;
-    margin-right: 6px;
-  }
-  footer {
-    position: relative;
-    display: flex;
-    padding: 8px;
-    background: #111827;
-    border-top: 1px solid #1f2937;
-  }
-  input {
-    flex: 1;
-    padding: 10px;
-    background: #0b1020;
-    border: none;
-    color: white;
-    border-radius: 6px;
-    outline: none;
-  }
-  button {
-    margin-left: 8px;
-    padding: 10px 14px;
-    background: #2563eb;
-    border: none;
-    color: white;
-    border-radius: 6px;
-  }
-  #suggestions {
-    position: absolute;
-    bottom: 60px;
-    left: 10px;
-    right: 10px;
-    background: #111827;
-    border: 1px solid #1f2937;
-    border-radius: 6px;
-    max-height: 150px;
-    overflow-y: auto;
-    display: none;
-    z-index: 10;
-  }
-  .suggestion-item {
-    padding: 8px;
-    cursor: pointer;
-  }
-  .suggestion-item:hover {
-    background: #1f2937;
-  }
 </style>
 </head>
 <body>
 <header>📡 Live Logs Terminal</header>
 <div id="logs"></div>
 <footer>
-  <input id="cmd" placeholder="Enter command..." autocomplete="off" />
   <button onclick="sendCmd()">Send</button>
-  <!-- Suggestions -->
-  <div id="suggestions"></div>
 </footer>
 <script src="/socket.io/socket.io.js"></script>
@@ -109,8 +77,16 @@
 const socket = io();
 const logsDiv = document.getElementById('logs');
 const input = document.getElementById('cmd');
-const suggestionBox = document.getElementById('suggestions');
 function formatTime(ts) {
   return new Date(ts).toLocaleString('en-IN', {
     timeZone: 'Asia/Kolkata',
@@ -118,119 +94,89 @@ function formatTime(ts) {
   });
 }
-/*function addLog(log) {
-  const div = document.createElement('div');
-  div.className = 'log';
-  div.innerHTML = `
-    <span class="time">[${formatTime(log.timestamp)}]</span>
-    ${log.html}
-  `;
-  logsDiv.appendChild(div);
-  logsDiv.scrollTop = logsDiv.scrollHeight;
-}*/
-function addLog(log) {
   const div = document.createElement('div');
   div.className = 'log';
   div.innerHTML = `
     <span class="time">[${formatTime(log.timestamp)}]</span>
     ${log.html}
   `;
-  // check if user already near bottom
-  const isNearBottom =
-    logsDiv.scrollHeight - logsDiv.scrollTop <= logsDiv.clientHeight + 50;
-  logsDiv.appendChild(div);
-  // only scroll if user was at bottom
-  if (isNearBottom) {
-    logsDiv.scrollTop = logsDiv.scrollHeight;
-  }
-  }
-// ================= HISTORY =================
-function getHistory() {
-  return JSON.parse(localStorage.getItem('cmd_history') || '[]');
-}
-function saveToHistory(cmd) {
-  let history = getHistory();
-  history = history.filter(c => c !== cmd);
-  history.unshift(cmd);
-  if (history.length > 50) history.pop();
-  localStorage.setItem('cmd_history', JSON.stringify(history));
 }
-// ================= SUGGESTIONS =================
-function showSuggestions(value) {
-  const history = getHistory();
-  const filtered = history.filter(cmd =>
-    cmd.toLowerCase().includes(value.toLowerCase())
-  );
-  if (!value || filtered.length === 0) {
-    suggestionBox.style.display = 'none';
-    return;
-  }
-  suggestionBox.innerHTML = '';
-  filtered.slice(0, 5).forEach(cmd => {
-    const div = document.createElement('div');
-    div.className = 'suggestion-item';
-    div.textContent = cmd;
-    div.onclick = () => {
-      input.value = cmd;
-      suggestionBox.style.display = 'none';
-    };
-    suggestionBox.appendChild(div);
-  });
-  suggestionBox.style.display = 'block';
 }
-// ================= EVENTS =================
-input.addEventListener('input', () => {
-  showSuggestions(input.value);
-});
-input.addEventListener('keypress', e => {
-  if (e.key === 'Enter') sendCmd();
 });
-// ================= COMMAND SEND =================
 function sendCmd() {
   const val = input.value.trim();
   if (!val) return;
   socket.emit('command', { command: val });
-  saveToHistory(val);
   input.value = '';
-  suggestionBox.style.display = 'none';
-  if(val === "clear") { return logsDiv.innerHTML = "";};
 }
-// ================= LOAD OLD LOGS =================
-fetch('/api/logs')
-  .then(res => res.json())
-  .then(data => data.forEach(addLog));
-// ================= LIVE LOGS =================
-socket.on('log', addLog);
 </script>
 </body>

 <title>Live Logs</title>
 <style>
+body {
+  margin: 0;
+  background: #0b1020;
+  color: #e2e8f0;
+  font-family: monospace;
+  display: flex;
+  flex-direction: column;
+  height: 90vh;
+}
+header {
+  padding: 10px;
+  background: #111827;
+  border-bottom: 1px solid #1f2937;
+}
+#logs {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+  font-size: 13px;
+}
+.log {
+  margin-bottom: 6px;
+  word-break: break-word;
+}
+.time {
+  color: #64748b;
+  margin-right: 6px;
+}
+footer {
+  display: flex;
+  padding: 8px;
+  background: #111827;
+}
+input {
+  flex: 1;
+  padding: 10px;
+  background: #0b1020;
+  border: none;
+  color: white;
+}
+button {
+  margin-left: 8px;
+  padding: 10px;
+  background: #2563eb;
+  border: none;
+  color: white;
+}
 </style>
 </head>
 <body>
 <header>📡 Live Logs Terminal</header>
 <div id="logs"></div>
 <footer>
+  <input id="cmd" placeholder="Enter command..." />
   <button onclick="sendCmd()">Send</button>
 </footer>
 <script src="/socket.io/socket.io.js"></script>
 const socket = io();
 const logsDiv = document.getElementById('logs');
 const input = document.getElementById('cmd');
+// ===== CONFIG =====
+const LIMIT = 50;
+const MAX_DOM_LOGS = 200;
+let offset = 0;
+let loading = false;
+let hasMore = true;
+// ===== HELPERS =====
 function formatTime(ts) {
   return new Date(ts).toLocaleString('en-IN', {
     timeZone: 'Asia/Kolkata',
   });
 }
+function createLogElement(log) {
   const div = document.createElement('div');
   div.className = 'log';
   div.innerHTML = `
     <span class="time">[${formatTime(log.timestamp)}]</span>
     ${log.html}
   `;
+  return div;
+}
+// ===== LOAD OLD LOGS =====
+async function loadLogs() {
+  if (loading || !hasMore) return;
+  loading = true;
+  const res = await fetch(`/api/logs?limit=${LIMIT}&offset=${offset}`);
+  const data = await res.json();
+  hasMore = data.hasMore;
+  const prevHeight = logsDiv.scrollHeight;
+  data.logs.reverse().forEach(log => {
+    logsDiv.prepend(createLogElement(log));
+  });
+  offset += data.logs.length;
+  logsDiv.scrollTop = logsDiv.scrollHeight - prevHeight;
+  loading = false;
 }
+// ===== LIVE LOGS =====
+function addLog(log) {
+  const div = createLogElement(log);
+  const isNearBottom =
+    logsDiv.scrollHeight - logsDiv.scrollTop <= logsDiv.clientHeight + 50;
+  logsDiv.appendChild(div);
+  // cleanup old DOM
+  if (logsDiv.children.length > MAX_DOM_LOGS) {
+    logsDiv.removeChild(logsDiv.firstChild);
+  }
+  if (isNearBottom) {
+    logsDiv.scrollTop = logsDiv.scrollHeight;
+  }
 }
+socket.on('log', addLog);
+// ===== SCROLL LOAD =====
+logsDiv.addEventListener('scroll', () => {
+  if (logsDiv.scrollTop < 50) {
+    loadLogs();
+  }
 });
+// ===== SEND CMD =====
 function sendCmd() {
   const val = input.value.trim();
   if (!val) return;
   socket.emit('command', { command: val });
+  if (val === "clear") {
+    logsDiv.innerHTML = "";
+    return;
+  }
   input.value = '';
 }
+// enter key
+input.addEventListener('keypress', e => {
+  if (e.key === 'Enter') sendCmd();
+});
+// ===== INIT =====
+loadLogs();
 </script>
 </body>