fix(ui): correctly insert new websocket activity feed items at the top and include day/month in timestamps
This commit is contained in:
1 parent
ecfb0ebcd5
commit
495304f3fa
1 file changed
+7
-6
@@ -977,10 +977,10 @@
|
|||||||
const history = await response.json();
|
const history = await response.json();
|
||||||
const feed = document.getElementById('activity-feed');
|
const feed = document.getElementById('activity-feed');
|
||||||
feed.innerHTML = '';
|
feed.innerHTML = '';
|
||||||
history.forEach(item => {
|
[...history].reverse().forEach(item => {
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
div.className = 'feed-entry';
|
div.className = 'feed-entry';
|
||||||
const timeStr = new Date(item.time).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', second:'2-digit'});
|
const timeStr = new Date(item.time).toLocaleString([], {month: '2-digit', day: '2-digit', hour: '2-digit', minute:'2-digit', second:'2-digit'});
|
||||||
div.innerHTML = `<span class="time">[${timeStr}]</span> ${item.message || item.data}`;
|
div.innerHTML = `<span class="time">[${timeStr}]</span> ${item.message || item.data}`;
|
||||||
feed.appendChild(div);
|
feed.appendChild(div);
|
||||||
});
|
});
|
||||||
@@ -1000,17 +1000,17 @@
|
|||||||
const data = JSON.parse(event.data);
|
const data = JSON.parse(event.data);
|
||||||
if (data.type === 'activity') {
|
if (data.type === 'activity') {
|
||||||
// Check scroll state before appending
|
// Check scroll state before appending
|
||||||
const isScrolledToBottom = feed.scrollHeight - feed.clientHeight <= feed.scrollTop + 20;
|
const isScrolledToTop = feed.scrollTop <= 20;
|
||||||
|
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
div.className = 'feed-entry';
|
div.className = 'feed-entry';
|
||||||
const timeStr = new Date(data.data.time).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', second:'2-digit'});
|
const timeStr = new Date(data.data.time).toLocaleString([], {month: '2-digit', day: '2-digit', hour: '2-digit', minute:'2-digit', second:'2-digit'});
|
||||||
div.innerHTML = `<span class="time">[${timeStr}]</span> ${data.data.message || data.data.data || data.data}`;
|
div.innerHTML = `<span class="time">[${timeStr}]</span> ${data.data.message || data.data.data || data.data}`;
|
||||||
feed.appendChild(div);
|
feed.prepend(div);
|
||||||
|
|
||||||
// Enforce max history
|
// Enforce max history
|
||||||
while (feed.children.length > MAX_ACTIVITY_HISTORY) {
|
while (feed.children.length > MAX_ACTIVITY_HISTORY) {
|
||||||
feed.removeChild(feed.firstChild);
|
feed.removeChild(feed.lastChild);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Auto-scroll logic
|
// Auto-scroll logic
|
||||||
@@ -1169,3 +1169,4 @@
|
|||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
Reference in new issue
Block a user