diff --git a/browser/viewer.html b/browser/viewer.html index ebccd9c..5d00c05 100644 --- a/browser/viewer.html +++ b/browser/viewer.html @@ -1,196 +1,630 @@ - - - - - -
- - Enable Autoscroll
- - - - - - - - - -
TimeStampLevelOutputSource
+ + + + + Log Viewer + + + +
+
+

📊 Log Viewer

+
+
+ +
+
+ + +
-
- - -
- - + formatTimestamp(timestamp) { + try { + const date = new Date(timestamp); + return date.toLocaleString(); + } catch { + return timestamp; + } + } + + escapeHtml(text) { + const div = document.createElement('div'); + div.textContent = text; + return div.innerHTML; + } + + filterLogs() { + const query = this.searchInput.value.toLowerCase().trim(); + + // Clear current display + this.clearLogDisplay(); + + if (!query) { + // Show all logs + this.logs.forEach(log => this.renderLogEntry(log)); + } else { + // Show filtered logs + const filtered = this.logs.filter(log => + this.matchesQuery(log, query) + ); + filtered.forEach(log => this.renderLogEntry(log)); + } + + if (this.logViewer.children.length === 0 || + (this.logViewer.children.length === 1 && this.logViewer.contains(this.emptyState))) { + this.showEmptyState(); + } else { + this.hideEmptyState(); + } + } + + matchesFilter(entry) { + const query = this.searchInput.value.toLowerCase().trim(); + return !query || this.matchesQuery(entry, query); + } + + matchesQuery(entry, query) { + return ( + entry.output.toLowerCase().includes(query) || + entry.level.toLowerCase().includes(query) || + (entry.file && entry.file.toLowerCase().includes(query)) || + entry.timestamp.toLowerCase().includes(query) + ); + } + + clearLogDisplay() { + while (this.logViewer.firstChild && this.logViewer.firstChild !== this.emptyState) { + this.logViewer.removeChild(this.logViewer.firstChild); + } + } + + showEmptyState() { + if (!this.logViewer.contains(this.emptyState)) { + this.logViewer.appendChild(this.emptyState); + } + } + + hideEmptyState() { + if (this.logViewer.contains(this.emptyState)) { + this.logViewer.removeChild(this.emptyState); + } + } + + clearLogs() { + if (!confirm('Are you sure you want to clear all logs?')) return; + + this.logs = []; + this.clearLogDisplay(); + this.showEmptyState(); + this.updateLogCount(); + } + + downloadLogs() { + if (this.logs.length === 0) { + alert('No logs to download'); + return; + } + + const dataStr = JSON.stringify(this.logs, null, 2); + const dataBlob = new Blob([dataStr], { type: 'application/json' }); + + const link = document.createElement('a'); + link.href = URL.createObjectURL(dataBlob); + link.download = `logs-${new Date().toISOString().split('T')[0]}.json`; + + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + + URL.revokeObjectURL(link.href); + } + + updateConnectionStatus(status, connected) { + this.connectionStatus.textContent = status; + this.statusIndicator.classList.toggle('connected', connected); + } + + updateLogCount() { + const count = this.logs.length; + this.logCount.textContent = `${count} log${count !== 1 ? 's' : ''}`; + } + + startAutoScroll() { + const autoScroll = () => { + if (this.scrollCheckbox.checked && this.isConnected) { + this.logViewer.scrollTop = this.logViewer.scrollHeight; + } + requestAnimationFrame(autoScroll); + }; + autoScroll(); + } + + debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; + } + } + + // Initialize the log viewer when the page loads + document.addEventListener('DOMContentLoaded', () => { + new LogViewer(); + }); + + diff --git a/go.mod b/go.mod index d271708..735fd33 100644 --- a/go.mod +++ b/go.mod @@ -1,5 +1,5 @@ module github.com/taigrr/log-socket -go 1.21 +go 1.24.4 require github.com/gorilla/websocket v1.5.3