sneak/netwatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change update interval to 2000ms and add play/pause button

Browse Source 
- Update interval changed from 250ms to 2000ms (150 history points)
- Add large play/pause toggle button in header
- Show running/paused status indicator
- Pause stops all network requests, resume restarts them
This commit is contained in:
Jeffrey Paul 2026-01-30 22:20:19 -08:00
parent 65cc2014c6
commit 83d9d15b6c
1 changed files with 61 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/main.js
View File

@ -1,11 +1,15 @@
import './styles.css'
// Configuration
const UPDATE_INTERVAL = 250 // ms
const UPDATE_INTERVAL = 2000 // ms
const HISTORY_DURATION = 300 // seconds
const MAX_HISTORY_POINTS = Math.ceil((HISTORY_DURATION * 1000) / UPDATE_INTERVAL) // 1200 points
const MAX_HISTORY_POINTS = Math.ceil((HISTORY_DURATION * 1000) / UPDATE_INTERVAL) // 150 points
const REQUEST_TIMEOUT = 5000 // ms
// Pause state
let isPaused = false
let intervalId = null
// Hosts to monitor (IPv4 preferred endpoints)
const HOSTS = [
{ name: 'Google Cloud Console', url: 'https://console.cloud.google.com', color: '#4285f4' },
@ -201,11 +205,27 @@ function createUI() {
app.innerHTML = `
<div class="max-w-7xl mx-auto px-4 py-8">
<header class="mb-8">
<h1 class="text-3xl font-bold text-white mb-2">NetWatch</h1>
<div class="flex items-center justify-between mb-4">
<h1 class="text-3xl font-bold text-white">NetWatch</h1>
<button
id="pause-btn"
class="flex items-center gap-3 px-6 py-3 bg-gray-800 hover:bg-gray-700 border border-gray-600 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<svg id="pause-icon" class="w-8 h-8 text-yellow-400" fill="currentColor" viewBox="0 0 24 24">
<rect x="6" y="4" width="4" height="16" rx="1" />
<rect x="14" y="4" width="4" height="16" rx="1" />
</svg>
<svg id="play-icon" class="w-8 h-8 text-green-400 hidden" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z" />
</svg>
<span id="pause-text" class="text-lg font-semibold text-white">Pause</span>
</button>
</div>
<p class="text-gray-400 text-sm">
Real-time network latency monitor |
<span class="text-gray-500">Updates every ${UPDATE_INTERVAL}ms</span> |
<span class="text-gray-500">History: ${HISTORY_DURATION}s</span>
<span class="text-gray-500">Updates every ${UPDATE_INTERVAL / 1000}s</span> |
<span class="text-gray-500">History: ${HISTORY_DURATION}s</span> |
<span id="status-indicator" class="text-green-400">Running</span>
</p>
</header>
@ -374,13 +394,48 @@ function handleResize() {
})
}
// Toggle pause state
function togglePause() {
isPaused = !isPaused
const pauseIcon = document.getElementById('pause-icon')
const playIcon = document.getElementById('play-icon')
const pauseText = document.getElementById('pause-text')
const statusIndicator = document.getElementById('status-indicator')
if (isPaused) {
// Stop the interval
if (intervalId) {
clearInterval(intervalId)
intervalId = null
}
pauseIcon.classList.add('hidden')
playIcon.classList.remove('hidden')
pauseText.textContent = 'Resume'
statusIndicator.textContent = 'Paused'
statusIndicator.className = 'text-yellow-400'
} else {
// Resume the interval
measureAll()
intervalId = setInterval(measureAll, UPDATE_INTERVAL)
pauseIcon.classList.remove('hidden')
playIcon.classList.add('hidden')
pauseText.textContent = 'Pause'
statusIndicator.textContent = 'Running'
statusIndicator.className = 'text-green-400'
}
}
// Initialize
function init() {
createUI()
// Wire up pause button
document.getElementById('pause-btn').addEventListener('click', togglePause)
// Start measurement loop
measureAll()
setInterval(measureAll, UPDATE_INTERVAL)
intervalId = setInterval(measureAll, UPDATE_INTERVAL)
// Handle resize
window.addEventListener('resize', handleResize)