Spaces:

Almaatla
/

display-board

Sleeping

App Files Files Community

Almaatla commited on Feb 4

Commit

5f5e5d5

verified ·

1 Parent(s): 489b626

Update app/static/index.html

Browse files

Files changed (1) hide show

app/static/index.html +277 -136

app/static/index.html CHANGED Viewed

@@ -2,53 +2,118 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <title>Real-Time Display Board</title>
   <style>
-    body { font-family: sans-serif; margin: 0; padding: 0; background: #111; color: #eee; }
-    header { padding: 10px 16px; background: #222; display: flex; align-items: center; justify-content: space-between; }
     #status { font-size: 0.9em; }
-    #status span { padding: 4px 8px; border-radius: 4px; }
-    .status-connected { background: #154; color: #8f8; }
-    .status-connecting { background: #444; color: #ccc; }
-    .status-disconnected { background: #511; color: #f88; }
-    #controls { padding: 8px 16px; background: #181818; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
     label { font-size: 0.9em; }
-    input, select { padding: 4px 6px; border-radius: 4px; border: 1px solid #444; background: #000; color: #eee; }
-    #messages { padding: 8px 16px 16px; height: calc(100vh - 120px); overflow-y: auto; }
-    .message { border-bottom: 1px solid #333; padding: 6px 0; }
-    .meta { font-size: 0.8em; color: #aaa; margin-bottom: 2px; display: flex; align-items: center; gap: 8px; }
-    .poster { font-weight: bold; color: #8cf; }
     .timestamp { color: #ccc; }
-    .category { font-size: 0.75em; padding: 2px 6px; border-radius: 4px; background: #333; color: #eee; }
     .content { white-space: pre-wrap; }
-    #apiKeyInput { width: 260px; }
   </style>
 </head>
 <body>
-  <header>
-    <div>Real-Time Display Board</div>
-    <div id="status"><span class="status-disconnected">Disconnected</span></div>
-  </header>
-  <div id="controls">
-    <label>Reader API Key:
-      <input id="apiKeyInput" type="password" placeholder="Enter READER_KEY and press Connect" />
-    </label>
-    <button id="connectBtn">Connect</button>
-    <label>Poster filter:
-      <select id="posterFilter">
-        <option value="">All posters</option>
-      </select>
-    </label>
-    <label>Keyword filter:
-      <input id="keywordFilter" type="text" placeholder="Search poster, content, metadata" />
-    </label>
-    <label>
-      <input type="checkbox" id="autoScrollToggle" checked /> Auto-scroll
-    </label>
   </div>
   <div id="messages"></div>
@@ -63,130 +128,185 @@
     const autoScrollToggle = document.getElementById("autoScrollToggle");
     let socket = null;
     let reconnectDelay = 1000;
     const maxReconnectDelay = 30000;
-    let manualDisconnect = false;
     let allMessages = [];
     let autoScrollEnabled = true;
     function setStatus(state, text) {
       const span = document.createElement("span");
       span.textContent = text;
-      span.className = "";
-      if (state === "connected") span.classList.add("status-connected");
-      if (state === "connecting") span.classList.add("status-connecting");
-      if (state === "disconnected") span.classList.add("status-disconnected");
       statusEl.innerHTML = "";
       statusEl.appendChild(span);
     }
     function humanTime(ts) {
       const d = new Date(ts);
       return d.toTimeString().split(" ")[0];
     }
     function updatePosterFilterOptions() {
-      const posters = new Set(allMessages.map(m => m.poster_id));
       const current = posterFilterEl.value;
-      posterFilterEl.innerHTML = '<option value="">All posters</option>';
       posters.forEach(p => {
         const opt = document.createElement("option");
         opt.value = p;
         opt.textContent = p;
-        posterFilterEl.appendChild(opt);
       });
       if ([...posterFilterEl.options].some(o => o.value === current)) {
         posterFilterEl.value = current;
       }
     }
-    function renderMessages() {
       const posterFilter = posterFilterEl.value.trim().toLowerCase();
       const keyword = keywordFilterEl.value.trim().toLowerCase();
-      const filtered = allMessages.filter(m => {
-        if (posterFilter && m.poster_id.toLowerCase() !== posterFilter) return false;
-        if (!keyword) return true;
-        const tokens = [];
-        tokens.push(m.poster_id || "");
-        tokens.push(m.content || "");
-        if (m.category) tokens.push(m.category);
-        if (m.metadata) {
-          Object.values(m.metadata).forEach(v => {
-            try {
-              tokens.push(String(v));
-            } catch {}
-          });
         }
-        const haystack = tokens.join(" ").toLowerCase();
-        return haystack.includes(keyword);
-      });
-      const atBottom = Math.abs(messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight) < 5;
-      messagesEl.innerHTML = "";
-      filtered.forEach(msg => {
-        const div = document.createElement("div");
-        div.className = "message";
-        const meta = document.createElement("div");
-        meta.className = "meta";
-        const poster = document.createElement("span");
-        poster.className = "poster";
-        poster.textContent = msg.poster_id;
-        const ts = document.createElement("span");
-        ts.className = "timestamp";
-        ts.textContent = humanTime(msg.timestamp);
-        meta.appendChild(poster);
-        meta.appendChild(ts);
-        if (msg.category) {
-          const cat = document.createElement("span");
-          cat.className = "category";
-          cat.textContent = msg.category;
-          meta.appendChild(cat);
-        }
-        const content = document.createElement("div");
-        content.className = "content";
-        content.textContent = msg.content;
-        div.appendChild(meta);
-        div.appendChild(content);
-        messagesEl.appendChild(div);
-      });
-      if (autoScrollEnabled && atBottom) {
         messagesEl.scrollTop = messagesEl.scrollHeight;
       }
     }
-    messagesEl.addEventListener("scroll", () => {
-      const atBottom = Math.abs(messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight) < 5;
-      if (!atBottom) {
-        autoScrollEnabled = false;
-        autoScrollToggle.checked = false;
-      } else {
-        if (autoScrollToggle.checked) {
-          autoScrollEnabled = true;
-        }
       }
-    });
-    autoScrollToggle.addEventListener("change", () => {
-      autoScrollEnabled = autoScrollToggle.checked;
-      if (autoScrollEnabled) {
         messagesEl.scrollTop = messagesEl.scrollHeight;
       }
-    });
-    posterFilterEl.addEventListener("change", renderMessages);
-    keywordFilterEl.addEventListener("input", renderMessages);
     function connectSocket() {
       const key = apiKeyInput.value.trim();
@@ -197,61 +317,82 @@
       const loc = window.location;
       const protocol = loc.protocol === "https:" ? "wss:" : "ws:";
-      const wsUrl = `${protocol}//${loc.host}/ws?api_key=${encodeURIComponent(key)}`;
       setStatus("connecting", "Connecting...");
       socket = new WebSocket(wsUrl);
       socket.onopen = () => {
         setStatus("connected", "Connected");
         reconnectDelay = 1000;
       };
       socket.onmessage = (event) => {
-        try {
-          const data = JSON.parse(event.data);
-          if (data.type === "history") {
-            allMessages = data.messages || [];
-            allMessages.sort((a,b) => new Date(a.timestamp) - new Date(b.timestamp));
-            updatePosterFilterOptions();
-            renderMessages();
-          } else if (data.type === "new_post") {
-            if (data.message) {
-              allMessages.push(data.message);
-              allMessages.sort((a,b) => new Date(a.timestamp) - new Date(b.timestamp));
-              updatePosterFilterOptions();
-              renderMessages();
-            }
-          } else if (data.type === "error") {
-            alert(data.error || "Error from server");
           }
-        } catch (e) {
-          console.error("Error handling message", e);
         }
       };
       socket.onclose = () => {
         socket = null;
         setStatus("disconnected", "Disconnected");
         if (!manualDisconnect) {
           setTimeout(() => connectSocket(), reconnectDelay);
           reconnectDelay = Math.min(reconnectDelay * 2, maxReconnectDelay);
-          setStatus("connecting", "Reconnecting...");
         }
       };
-      socket.onerror = (e) => {
-        console.error("WebSocket error", e);
       };
     }
     connectBtn.addEventListener("click", () => {
-      manualDisconnect = false;
       if (socket) {
         socket.close();
-      } else {
-        connectSocket();
       }
     });
   </script>
 </body>
 </html>

 <html lang="en">
 <head>
   <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>Real-Time Display Board</title>
   <style>
+    :root {
+      --bg: #111;
+      --panel: #181818;
+      --header: #222;
+      --border: #333;
+      --muted: #aaa;
+      --text: #eee;
+      --ok-bg: #154;
+      --ok-fg: #8f8;
+      --warn-bg: #444;
+      --warn-fg: #ccc;
+      --bad-bg: #511;
+      --bad-fg: #f88;
+      --accent: #8cf;
+    }
+    * { box-sizing: border-box; }
+    body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--text); }
+    /* Keep top visible */
+    .topbar {
+      position: sticky; /* stays visible while page scrolls */
+      top: 0;
+      z-index: 10;
+      background: var(--header);
+      border-bottom: 1px solid var(--border);
+    }
+    header {
+      padding: 10px 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
     #status { font-size: 0.9em; }
+    #status span { padding: 4px 8px; border-radius: 4px; display: inline-block; }
+    .status-connected { background: var(--ok-bg); color: var(--ok-fg); }
+    .status-connecting { background: var(--warn-bg); color: var(--warn-fg); }
+    .status-disconnected { background: var(--bad-bg); color: var(--bad-fg); }
+    #controls {
+      padding: 8px 16px;
+      background: var(--panel);
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      flex-wrap: wrap;
+      border-top: 1px solid var(--border);
+    }
     label { font-size: 0.9em; }
+    input, select, button {
+      padding: 6px 8px;
+      border-radius: 6px;
+      border: 1px solid #444;
+      background: #000;
+      color: var(--text);
+    }
+    button { cursor: pointer; background: #111; }
+    button:hover { background: #151515; }
+    #apiKeyInput { width: 280px; }
+    /* Messages area */
+    #messages {
+      padding: 8px 16px 16px;
+      height: calc(100vh - 114px); /* approximate height of sticky topbar */
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
+    .message { border-bottom: 1px solid var(--border); padding: 8px 0; }
+    .meta { font-size: 0.82em; color: var(--muted); margin-bottom: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+    .poster { font-weight: 700; color: var(--accent); }
     .timestamp { color: #ccc; }
+    .category { font-size: 0.78em; padding: 2px 7px; border-radius: 999px; background: #333; color: var(--text); }
     .content { white-space: pre-wrap; }
   </style>
 </head>
 <body>
+  <div class="topbar">
+    <header>
+      <div>Real-Time Display Board</div>
+      <div id="status"><span class="status-disconnected">Disconnected</span></div>
+    </header>
+    <div id="controls">
+      <label>Reader API Key:
+        <input id="apiKeyInput" type="password" placeholder="Enter READER_KEY" autocomplete="off" />
+      </label>
+      <button id="connectBtn">Connect</button>
+      <label>Poster filter:
+        <select id="posterFilter">
+          <option value="">All posters</option>
+        </select>
+      </label>
+      <label>Keyword filter:
+        <input id="keywordFilter" type="text" placeholder="Search poster, content, metadata" />
+      </label>
+      <label>
+        <input type="checkbox" id="autoScrollToggle" checked />
+        Auto-scroll
+      </label>
+    </div>
   </div>
   <div id="messages"></div>
     const autoScrollToggle = document.getElementById("autoScrollToggle");
     let socket = null;
+    let manualDisconnect = false;
     let reconnectDelay = 1000;
     const maxReconnectDelay = 30000;
     let allMessages = [];
     let autoScrollEnabled = true;
+    // Track whether user is at bottom without doing heavy work on every scroll tick
+    let userAtBottom = true;
+    let scrollTicking = false;
     function setStatus(state, text) {
       const span = document.createElement("span");
       span.textContent = text;
+      span.className =
+        state === "connected" ? "status-connected" :
+        state === "connecting" ? "status-connecting" :
+        "status-disconnected";
       statusEl.innerHTML = "";
       statusEl.appendChild(span);
     }
     function humanTime(ts) {
       const d = new Date(ts);
+      // If ts is missing/invalid, show placeholder rather than crashing
+      if (Number.isNaN(d.getTime())) return "--:--:--";
       return d.toTimeString().split(" ")[0];
     }
+    function computeAtBottom() {
+      // Only read layout values when scheduled (rAF)
+      return Math.abs(messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight) < 5;
+    }
+    messagesEl.addEventListener("scroll", () => {
+      if (scrollTicking) return;
+      scrollTicking = true;
+      requestAnimationFrame(() => {
+        const atBottom = computeAtBottom();
+        userAtBottom = atBottom;
+        if (!atBottom) {
+          autoScrollEnabled = false;
+          autoScrollToggle.checked = false;
+        } else {
+          if (autoScrollToggle.checked) autoScrollEnabled = true;
+        }
+        scrollTicking = false;
+      });
+    }, { passive: true }); // helps scroll performance by letting browser scroll immediately [web:48]
+    autoScrollToggle.addEventListener("change", () => {
+      autoScrollEnabled = autoScrollToggle.checked;
+      if (autoScrollEnabled) {
+        messagesEl.scrollTop = messagesEl.scrollHeight;
+        userAtBottom = true;
+      }
+    });
+    posterFilterEl.addEventListener("change", () => renderMessages());
+    keywordFilterEl.addEventListener("input", () => renderMessages());
     function updatePosterFilterOptions() {
+      const posters = new Set(allMessages.map(m => m.poster_id).filter(Boolean));
       const current = posterFilterEl.value;
+      // Build options efficiently
+      const frag = document.createDocumentFragment();
+      const optAll = document.createElement("option");
+      optAll.value = "";
+      optAll.textContent = "All posters";
+      frag.appendChild(optAll);
       posters.forEach(p => {
         const opt = document.createElement("option");
         opt.value = p;
         opt.textContent = p;
+        frag.appendChild(opt);
       });
+      posterFilterEl.innerHTML = "";
+      posterFilterEl.appendChild(frag);
       if ([...posterFilterEl.options].some(o => o.value === current)) {
         posterFilterEl.value = current;
       }
     }
+    function messageMatchesFilters(m) {
       const posterFilter = posterFilterEl.value.trim().toLowerCase();
       const keyword = keywordFilterEl.value.trim().toLowerCase();
+      if (posterFilter && (m.poster_id || "").toLowerCase() !== posterFilter) return false;
+      if (!keyword) return true;
+      const tokens = [];
+      tokens.push(m.poster_id || "");
+      tokens.push(m.content || "");
+      if (m.category) tokens.push(m.category);
+      if (m.metadata && typeof m.metadata === "object") {
+        for (const v of Object.values(m.metadata)) {
+          try { tokens.push(String(v)); } catch {}
         }
+      }
+      return tokens.join(" ").toLowerCase().includes(keyword);
+    }
+    function buildMessageNode(msg) {
+      const div = document.createElement("div");
+      div.className = "message";
+      const meta = document.createElement("div");
+      meta.className = "meta";
+      const poster = document.createElement("span");
+      poster.className = "poster";
+      poster.textContent = msg.poster_id || "(unknown)";
+      const ts = document.createElement("span");
+      ts.className = "timestamp";
+      ts.textContent = humanTime(msg.timestamp);
+      meta.appendChild(poster);
+      meta.appendChild(ts);
+      if (msg.category) {
+        const cat = document.createElement("span");
+        cat.className = "category";
+        cat.textContent = msg.category;
+        meta.appendChild(cat);
+      }
+      const content = document.createElement("div");
+      content.className = "content";
+      content.textContent = msg.content || "";
+      div.appendChild(meta);
+      div.appendChild(content);
+      return div;
+    }
+    function renderMessages() {
+      // Keep the current scroll position; only autoscroll if user is already at bottom + enabled
+      const shouldStickToBottom = autoScrollEnabled && userAtBottom;
+      const frag = document.createDocumentFragment();
+      for (const m of allMessages) {
+        if (!messageMatchesFilters(m)) continue;
+        frag.appendChild(buildMessageNode(m));
+      }
+      messagesEl.innerHTML = "";
+      messagesEl.appendChild(frag);
+      if (shouldStickToBottom) {
         messagesEl.scrollTop = messagesEl.scrollHeight;
+        userAtBottom = true;
       }
     }
+    function appendMessageIfVisible(msg) {
+      // Avoid full rerender for every new message: append if it matches current filters
+      const shouldStickToBottom = autoScrollEnabled && userAtBottom;
+      if (messageMatchesFilters(msg)) {
+        messagesEl.appendChild(buildMessageNode(msg));
       }
+      // Keep dropdown up to date (cheap, small list)
+      updatePosterFilterOptions();
+      if (shouldStickToBottom) {
         messagesEl.scrollTop = messagesEl.scrollHeight;
+        userAtBottom = true;
       }
+    }
     function connectSocket() {
       const key = apiKeyInput.value.trim();
       const loc = window.location;
       const protocol = loc.protocol === "https:" ? "wss:" : "ws:";
+      const wsUrl = `${protocol}//${loc.host}/ws?api_key=${encodeURIComponent(key)}`;
       setStatus("connecting", "Connecting...");
       socket = new WebSocket(wsUrl);
       socket.onopen = () => {
         setStatus("connected", "Connected");
         reconnectDelay = 1000;
+        connectBtn.textContent = "Disconnect";
       };
       socket.onmessage = (event) => {
+        let data;
+        try { data = JSON.parse(event.data); } catch { return; }
+        if (data.type === "history") {
+          allMessages = Array.isArray(data.messages) ? data.messages : [];
+          allMessages.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
+          updatePosterFilterOptions();
+          // On fresh history load, always go to bottom if auto-scroll is enabled
+          if (autoScrollToggle.checked) {
+            autoScrollEnabled = true;
+            userAtBottom = true;
           }
+          renderMessages();
+          return;
         }
+        if (data.type === "new_post" && data.message) {
+          allMessages.push(data.message);
+          // Keep only last 50 on client too (server already does, but this keeps UI stable)
+          if (allMessages.length > 50) allMessages = allMessages.slice(allMessages.length - 50);
+          appendMessageIfVisible(data.message);
+          return;
+        }
+        if (data.type === "error") {
+          alert(data.error || "Error from server");
+          return;
+        }
+        // Ignore ping
       };
       socket.onclose = () => {
         socket = null;
+        connectBtn.textContent = "Connect";
         setStatus("disconnected", "Disconnected");
         if (!manualDisconnect) {
+          setStatus("connecting", "Reconnecting...");
           setTimeout(() => connectSocket(), reconnectDelay);
           reconnectDelay = Math.min(reconnectDelay * 2, maxReconnectDelay);
         }
       };
+      socket.onerror = () => {
+        // onclose will handle UI
       };
     }
     connectBtn.addEventListener("click", () => {
       if (socket) {
+        manualDisconnect = true;
         socket.close();
+        socket = null;
+        setStatus("disconnected", "Disconnected");
+        connectBtn.textContent = "Connect";
+        return;
       }
+      manualDisconnect = false;
+      connectSocket();
     });
+    // Initial UI state
+    setStatus("disconnected", "Disconnected");
   </script>
 </body>
 </html>