diff --git a/dashboard/static/app.js b/dashboard/static/app.js index a1be244..c1266d7 100644 --- a/dashboard/static/app.js +++ b/dashboard/static/app.js @@ -771,6 +771,9 @@ async function loadControlPanel() { // Render scrapers grid renderScrapersGrid(state.scrapers); + // Load Chrome Extension status + loadExtensionStatus(); + // Setup event listeners for control panel buttons setupControlPanelListeners(); @@ -783,10 +786,36 @@ async function loadControlPanel() { updateMonitorStatus(newState); renderScrapersGrid(newState.scrapers); } + loadExtensionStatus(); } }, 5000); } +async function loadExtensionStatus() { + const badge = document.getElementById('extensionBadge'); + const productCount = document.getElementById('extProductCount'); + const skuCount = document.getElementById('extSkuCount'); + const lastSync = document.getElementById('extLastSync'); + + const stats = await api('/extension/stats'); + + if (stats && stats.last_sync) { + // Extension has synced data + badge.textContent = 'Connected'; + badge.className = 'extension-badge connected'; + productCount.textContent = stats.total_products || 0; + skuCount.textContent = stats.total_skus || 0; + lastSync.textContent = formatTime(new Date(stats.last_sync)); + } else { + // No sync yet + badge.textContent = 'No Data'; + badge.className = 'extension-badge disconnected'; + productCount.textContent = '-'; + skuCount.textContent = '-'; + lastSync.textContent = 'Never'; + } +} + function updateMonitorStatus(state) { const badge = document.getElementById('monitorBadge'); const statusText = document.getElementById('monitorStatusText'); diff --git a/dashboard/static/style.css b/dashboard/static/style.css index 4084576..5a690f7 100644 --- a/dashboard/static/style.css +++ b/dashboard/static/style.css @@ -1103,6 +1103,57 @@ h3 { grid-column: span 2; } +/* Chrome Extension Card */ +.extension-card { + grid-column: span 2; + border-color: #ffcb05; +} + +.extension-badge { + padding: 4px 12px; + border-radius: 12px; + font-size: 12px; + font-weight: 600; +} + +.extension-badge.connected { + background: rgba(0, 255, 0, 0.2); + color: #00ff00; +} + +.extension-badge.disconnected { + background: rgba(255, 100, 100, 0.2); + color: #ff6464; +} + +.extension-stats { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 15px; + margin-top: 10px; +} + +.extension-stat { + background: var(--bg-primary); + padding: 12px; + border-radius: 8px; + text-align: center; +} + +.extension-stat .stat-label { + display: block; + font-size: 12px; + color: var(--text-secondary); + margin-bottom: 5px; +} + +.extension-stat .stat-value { + display: block; + font-size: 18px; + font-weight: 600; + color: var(--text-primary); +} + .scrapers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); diff --git a/dashboard/templates/index.html b/dashboard/templates/index.html index 2947d87..94f4f88 100644 --- a/dashboard/templates/index.html +++ b/dashboard/templates/index.html @@ -274,6 +274,37 @@ + +
Pokemon Center is monitored via the Chrome Extension, not a Python scraper.
+
+ Open Extension |
+ Install from chrome-extension/ folder
+