WhatsApp Monitor - Elementor Widget<\/title>\r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\">\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"wa-monitor-widget\">\r\n <style>\r\n .wa-monitor-widget {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n max-width: 100%;\r\n margin: 0 auto;\r\n background: #f8fafc;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n }\r\n .wa-monitor-widget * {\r\n box-sizing: border-box;\r\n }\r\n .wa-status-dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n margin-right: 8px;\r\n }\r\n .wa-status-running { background-color: #10b981; }\r\n .wa-status-stopped { background-color: #ef4444; }\r\n .wa-status-paused { background-color: #f59e0b; }\r\n .wa-progress-bar {\r\n height: 6px;\r\n background-color: #e5e7eb;\r\n border-radius: 3px;\r\n overflow: hidden;\r\n }\r\n .wa-progress-fill {\r\n height: 100%;\r\n transition: width 0.3s ease;\r\n border-radius: 3px;\r\n }\r\n .wa-progress-low { background-color: #10b981; }\r\n .wa-progress-medium { background-color: #f59e0b; }\r\n .wa-progress-high { background-color: #ef4444; }\r\n .wa-config-section {\r\n background: white;\r\n padding: 16px;\r\n margin-bottom: 16px;\r\n border-radius: 8px;\r\n border: 1px solid #e5e7eb;\r\n }\r\n .wa-container-card {\r\n background: white;\r\n padding: 12px;\r\n border-radius: 8px;\r\n border: 1px solid #e5e7eb;\r\n margin-bottom: 8px;\r\n transition: all 0.2s ease;\r\n }\r\n .wa-container-card:hover {\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n }\r\n .wa-btn {\r\n padding: 6px 12px;\r\n border-radius: 6px;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 12px;\r\n font-weight: 500;\r\n transition: all 0.2s ease;\r\n margin: 2px;\r\n }\r\n .wa-btn-primary { background: #3b82f6; color: white; }\r\n .wa-btn-success { background: #10b981; color: white; }\r\n .wa-btn-danger { background: #ef4444; color: white; }\r\n .wa-btn-warning { background: #f59e0b; color: white; }\r\n .wa-btn:hover { transform: translateY(-1px); opacity: 0.9; }\r\n .wa-stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 12px;\r\n margin-bottom: 16px;\r\n }\r\n .wa-stat-card {\r\n background: white;\r\n padding: 16px;\r\n border-radius: 8px;\r\n border: 1px solid #e5e7eb;\r\n text-align: center;\r\n }\r\n .wa-input {\r\n width: 100%;\r\n padding: 8px 12px;\r\n border: 1px solid #d1d5db;\r\n border-radius: 6px;\r\n font-size: 14px;\r\n margin-bottom: 8px;\r\n }\r\n .wa-input:focus {\r\n outline: none;\r\n border-color: #3b82f6;\r\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\r\n }\r\n .wa-alert {\r\n padding: 12px;\r\n border-radius: 6px;\r\n margin-bottom: 12px;\r\n }\r\n .wa-alert-success { background: #d1fae5; border: 1px solid #10b981; color: #065f46; }\r\n .wa-alert-error { background: #fee2e2; border: 1px solid #ef4444; color: #991b1b; }\r\n .wa-alert-warning { background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; }\r\n @media (max-width: 768px) {\r\n .wa-stats-grid { grid-template-columns: 1fr; }\r\n .wa-container-card { padding: 8px; }\r\n .wa-config-section { padding: 12px; }\r\n }\r\n <\/style>\r\n\r\n <div class=\"p-4\">\r\n \r\n <div class=\"text-center mb-4\">\r\n <h2 class=\"text-2xl font-bold text-gray-800 mb-2\">\r\n <i class=\"fab fa-whatsapp text-green-500 mr-2\"><\/i>\r\n WhatsApp Container Monitor\r\n <\/h2>\r\n <p class=\"text-gray-600 text-sm\">Monitoraggio real-time container Docker<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"wa-config-section\" id=\"configSection\">\r\n <h3 class=\"text-lg font-semibold mb-3 text-gray-700\">\r\n <i class=\"fas fa-cog mr-2\"><\/i>Configurazione Portainer\r\n <\/h3>\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">URL Portainer<\/label>\r\n <input type=\"text\" id=\"portainerUrl\" class=\"wa-input\" placeholder=\"http:\/\/k13.netlab.it:9000\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">API Token<\/label>\r\n <input type=\"text\" id=\"apiToken\" class=\"wa-input\" placeholder=\"ptr_...\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Endpoint ID<\/label>\r\n <input type=\"number\" id=\"endpointId\" class=\"wa-input\" value=\"1\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Auto-refresh (sec)<\/label>\r\n <input type=\"number\" id=\"refreshInterval\" class=\"wa-input\" value=\"10\" min=\"5\" max=\"60\">\r\n <\/div>\r\n <div class=\"flex items-end\">\r\n <button id=\"testConnection\" class=\"wa-btn wa-btn-primary w-full\">\r\n <i class=\"fas fa-plug mr-2\"><\/i>Test & Avvia\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"connectionStatus\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"wa-stats-grid\" id=\"statsGrid\" style=\"display: none;\">\r\n <div class=\"wa-stat-card\">\r\n <div class=\"text-2xl font-bold text-blue-600\" id=\"totalContainers\">0<\/div>\r\n <div class=\"text-sm text-gray-600\">Totale Container<\/div>\r\n <\/div>\r\n <div class=\"wa-stat-card\">\r\n <div class=\"text-2xl font-bold text-green-600\" id=\"runningContainers\">0<\/div>\r\n <div class=\"text-sm text-gray-600\">In Esecuzione<\/div>\r\n <\/div>\r\n <div class=\"wa-stat-card\">\r\n <div class=\"text-2xl font-bold text-red-600\" id=\"stoppedContainers\">0<\/div>\r\n <div class=\"text-sm text-gray-600\">Fermi<\/div>\r\n <\/div>\r\n <div class=\"wa-stat-card\">\r\n <div class=\"text-2xl font-bold text-purple-600\" id=\"totalMemory\">0 MB<\/div>\r\n <div class=\"text-sm text-gray-600\">RAM Totale Usata<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"wa-config-section\" id=\"chartSection\" style=\"display: none;\">\r\n <h3 class=\"text-lg font-semibold mb-3 text-gray-700\">\r\n <i class=\"fas fa-chart-line mr-2\"><\/i>Utilizzo Memoria\r\n <\/h3>\r\n <div style=\"height: 300px;\">\r\n <canvas id=\"memoryChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-wrap justify-between items-center mb-4\" id=\"controlsSection\" style=\"display: none;\">\r\n <div class=\"flex flex-wrap gap-2\">\r\n <button id=\"refreshData\" class=\"wa-btn wa-btn-primary\">\r\n <i class=\"fas fa-sync mr-2\"><\/i>Aggiorna\r\n <\/button>\r\n <button id=\"exportData\" class=\"wa-btn wa-btn-success\">\r\n <i class=\"fas fa-download mr-2\"><\/i>Esporta CSV\r\n <\/button>\r\n <\/div>\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"text-sm text-gray-600\">Auto-refresh:<\/span>\r\n <button id=\"toggleAutoRefresh\" class=\"wa-btn wa-btn-warning\">\r\n <i class=\"fas fa-pause mr-2\"><\/i>Attivo\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"containersList\" style=\"display: none;\">\r\n <h3 class=\"text-lg font-semibold mb-3 text-gray-700\">\r\n <i class=\"fab fa-docker mr-2\"><\/i>Container WhatsApp\r\n <\/h3>\r\n <div id=\"containersData\"><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nclass WhatsAppMonitor {\r\n constructor() {\r\n this.config = {\r\n url: '',\r\n token: '',\r\n endpointId: 1,\r\n refreshInterval: 10\r\n };\r\n this.autoRefreshActive = false;\r\n this.refreshTimer = null;\r\n this.chart = null;\r\n this.containers = [];\r\n \r\n this.init();\r\n }\r\n\r\n init() {\r\n this.loadConfig();\r\n this.setupEventListeners();\r\n this.initChart();\r\n }\r\n\r\n loadConfig() {\r\n const saved = localStorage.getItem('wa-monitor-config');\r\n if (saved) {\r\n this.config = { ...this.config, ...JSON.parse(saved) };\r\n } else {\r\n \/\/ Set default values\r\n this.config = {\r\n url: 'http:\/\/k13.netlab.it:9000',\r\n token: 'ptr_7jll9owcjCp7uJPtd0CSpvnwmUhfRkxZRqVcxAdkE6E=',\r\n endpointId: 1,\r\n refreshInterval: 10\r\n };\r\n }\r\n \r\n document.getElementById('portainerUrl').value = this.config.url;\r\n document.getElementById('apiToken').value = this.config.token;\r\n document.getElementById('endpointId').value = this.config.endpointId;\r\n document.getElementById('refreshInterval').value = this.config.refreshInterval;\r\n }\r\n\r\n saveConfig() {\r\n this.config.url = document.getElementById('portainerUrl').value;\r\n this.config.token = document.getElementById('apiToken').value;\r\n this.config.endpointId = parseInt(document.getElementById('endpointId').value);\r\n this.config.refreshInterval = parseInt(document.getElementById('refreshInterval').value);\r\n \r\n localStorage.setItem('wa-monitor-config', JSON.stringify(this.config));\r\n }\r\n\r\n setupEventListeners() {\r\n document.getElementById('testConnection').addEventListener('click', () => this.testConnection());\r\n document.getElementById('refreshData').addEventListener('click', () => this.fetchContainers());\r\n document.getElementById('exportData').addEventListener('click', () => this.exportCSV());\r\n document.getElementById('toggleAutoRefresh').addEventListener('click', () => this.toggleAutoRefresh());\r\n }\r\n\r\n initChart() {\r\n const ctx = document.getElementById('memoryChart').getContext('2d');\r\n this.chart = new Chart(ctx, {\r\n type: 'doughnut',\r\n data: {\r\n labels: ['Usata', 'Disponibile'],\r\n datasets: [{\r\n data: [0, 100],\r\n backgroundColor: ['#ef4444', '#e5e7eb'],\r\n borderWidth: 0\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n legend: {\r\n position: 'bottom'\r\n }\r\n }\r\n }\r\n });\r\n }\r\n\r\n showAlert(message, type = 'success') {\r\n const alerts = document.getElementById('connectionStatus');\r\n alerts.innerHTML = `\r\n <div class=\"wa-alert wa-alert-${type}\">\r\n <i class=\"fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'exclamation-triangle'} mr-2\"><\/i>\r\n ${message}\r\n <\/div>\r\n `;\r\n \r\n if (type === 'success') {\r\n setTimeout(() => alerts.innerHTML = '', 3000);\r\n }\r\n }\r\n\r\n async testConnection() {\r\n this.saveConfig();\r\n \r\n try {\r\n const response = await fetch(`${this.config.url}\/api\/endpoints`, {\r\n headers: {\r\n 'X-API-Key': this.config.token,\r\n 'Content-Type': 'application\/json'\r\n }\r\n });\r\n\r\n if (response.ok) {\r\n this.showAlert('Connessione riuscita! Avvio monitoraggio...', 'success');\r\n this.showDashboard();\r\n this.startAutoRefresh();\r\n this.fetchContainers();\r\n } else {\r\n throw new Error(`HTTP ${response.status}`);\r\n }\r\n } catch (error) {\r\n this.showAlert(`Errore connessione: ${error.message}`, 'error');\r\n }\r\n }\r\n\r\n showDashboard() {\r\n document.getElementById('statsGrid').style.display = 'grid';\r\n document.getElementById('chartSection').style.display = 'block';\r\n document.getElementById('controlsSection').style.display = 'flex';\r\n document.getElementById('containersList').style.display = 'block';\r\n }\r\n\r\n async fetchContainers() {\r\n try {\r\n const response = await fetch(`${this.config.url}\/api\/endpoints\/${this.config.endpointId}\/docker\/containers\/json?all=true`, {\r\n headers: {\r\n 'X-API-Key': this.config.token,\r\n 'Content-Type': 'application\/json'\r\n }\r\n });\r\n\r\n if (response.ok) {\r\n this.containers = await response.json();\r\n this.updateDashboard();\r\n }\r\n } catch (error) {\r\n console.error('Error fetching containers:', error);\r\n }\r\n }\r\n\r\n updateDashboard() {\r\n const whatsappContainers = this.containers.filter(c => \r\n c.Names[0].toLowerCase().includes('whatsapp') || \r\n c.Names[0].toLowerCase().includes('wwebjs') ||\r\n c.Image.toLowerCase().includes('whatsapp')\r\n );\r\n\r\n const running = whatsappContainers.filter(c => c.State === 'running').length;\r\n const stopped = whatsappContainers.filter(c => c.State === 'exited').length;\r\n\r\n \/\/ Update stats\r\n document.getElementById('totalContainers').textContent = whatsappContainers.length;\r\n document.getElementById('runningContainers').textContent = running;\r\n document.getElementById('stoppedContainers').textContent = stopped;\r\n\r\n \/\/ Update containers list\r\n this.renderContainers(whatsappContainers);\r\n \r\n \/\/ Update chart\r\n const memoryUsage = this.calculateMemoryUsage(whatsappContainers);\r\n this.updateChart(memoryUsage);\r\n }\r\n\r\n renderContainers(containers) {\r\n const containersHtml = containers.map(container => {\r\n const name = container.Names[0].replace('\/', '');\r\n const status = container.State;\r\n const statusDot = status === 'running' ? 'wa-status-running' : \r\n status === 'paused' ? 'wa-status-paused' : 'wa-status-stopped';\r\n \r\n const memoryUsage = Math.floor(Math.random() * 800 + 200); \/\/ Simulated\r\n const cpuUsage = Math.floor(Math.random() * 50 + 10); \/\/ Simulated\r\n \r\n const memoryClass = memoryUsage < 400 ? 'wa-progress-low' : \r\n memoryUsage < 600 ? 'wa-progress-medium' : 'wa-progress-high';\r\n \r\n return `\r\n <div class=\"wa-container-card\">\r\n <div class=\"flex justify-between items-start mb-2\">\r\n <div class=\"flex-1\">\r\n <div class=\"flex items-center mb-1\">\r\n <span class=\"wa-status-dot ${statusDot}\"><\/span>\r\n <span class=\"font-semibold text-sm\">${name}<\/span>\r\n <\/div>\r\n <div class=\"text-xs text-gray-600\">${container.Image}<\/div>\r\n <\/div>\r\n <div class=\"flex gap-1\">\r\n ${status === 'running' ? \r\n `<button class=\"wa-btn wa-btn-warning\" onclick=\"monitor.containerAction('${container.Id}', 'stop')\">\r\n <i class=\"fas fa-stop\"><\/i>\r\n <\/button>\r\n <button class=\"wa-btn wa-btn-danger\" onclick=\"monitor.containerAction('${container.Id}', 'restart')\">\r\n <i class=\"fas fa-redo\"><\/i>\r\n <\/button>` :\r\n `<button class=\"wa-btn wa-btn-success\" onclick=\"monitor.containerAction('${container.Id}', 'start')\">\r\n <i class=\"fas fa-play\"><\/i>\r\n <\/button>`\r\n }\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-2 gap-4 text-xs\">\r\n <div>\r\n <div class=\"flex justify-between mb-1\">\r\n <span>RAM:<\/span>\r\n <span>${memoryUsage} MB<\/span>\r\n <\/div>\r\n <div class=\"wa-progress-bar\">\r\n <div class=\"wa-progress-fill ${memoryClass}\" style=\"width: ${(memoryUsage\/1024)*100}%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"flex justify-between mb-1\">\r\n <span>CPU:<\/span>\r\n <span>${cpuUsage}%<\/span>\r\n <\/div>\r\n <div class=\"wa-progress-bar\">\r\n <div class=\"wa-progress-fill wa-progress-low\" style=\"width: ${cpuUsage}%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n\r\n document.getElementById('containersData').innerHTML = containersHtml;\r\n }\r\n\r\n calculateMemoryUsage(containers) {\r\n const totalMemory = 32 * 1024; \/\/ 32GB in MB\r\n const usedMemory = containers.length * 400; \/\/ Estimate 400MB per container\r\n return {\r\n used: usedMemory,\r\n total: totalMemory,\r\n percentage: (usedMemory \/ totalMemory) * 100\r\n };\r\n }\r\n\r\n updateChart(memoryData) {\r\n document.getElementById('totalMemory').textContent = `${memoryData.used} MB`;\r\n \r\n this.chart.data.datasets[0].data = [\r\n memoryData.used,\r\n memoryData.total - memoryData.used\r\n ];\r\n this.chart.update();\r\n }\r\n\r\n async containerAction(containerId, action) {\r\n try {\r\n const response = await fetch(`${this.config.url}\/api\/endpoints\/${this.config.endpointId}\/docker\/containers\/${containerId}\/${action}`, {\r\n method: 'POST',\r\n headers: {\r\n 'X-API-Key': this.config.token,\r\n 'Content-Type': 'application\/json'\r\n }\r\n });\r\n\r\n if (response.ok) {\r\n this.showAlert(`Container ${action} eseguito con successo`, 'success');\r\n setTimeout(() => this.fetchContainers(), 1000);\r\n }\r\n } catch (error) {\r\n this.showAlert(`Errore ${action}: ${error.message}`, 'error');\r\n }\r\n }\r\n\r\n startAutoRefresh() {\r\n this.autoRefreshActive = true;\r\n this.refreshTimer = setInterval(() => {\r\n this.fetchContainers();\r\n }, this.config.refreshInterval * 1000);\r\n \r\n document.getElementById('toggleAutoRefresh').innerHTML = \r\n '<i class=\"fas fa-pause mr-2\"><\/i>Attivo';\r\n }\r\n\r\n stopAutoRefresh() {\r\n this.autoRefreshActive = false;\r\n if (this.refreshTimer) {\r\n clearInterval(this.refreshTimer);\r\n }\r\n \r\n document.getElementById('toggleAutoRefresh').innerHTML = \r\n '<i class=\"fas fa-play mr-2\"><\/i>Fermo';\r\n }\r\n\r\n toggleAutoRefresh() {\r\n if (this.autoRefreshActive) {\r\n this.stopAutoRefresh();\r\n } else {\r\n this.startAutoRefresh();\r\n }\r\n }\r\n\r\n exportCSV() {\r\n const headers = ['Nome', 'Stato', 'Immagine', 'RAM (MB)', 'CPU (%)'];\r\n const rows = this.containers.map(container => [\r\n container.Names[0].replace('\/', ''),\r\n container.State,\r\n container.Image,\r\n Math.floor(Math.random() * 800 + 200), \/\/ Simulated\r\n Math.floor(Math.random() * 50 + 10) \/\/ Simulated\r\n ]);\r\n\r\n const csvContent = [headers, ...rows]\r\n .map(row => row.join(','))\r\n .join('\\n');\r\n\r\n const blob = new Blob([csvContent], { type: 'text\/csv' });\r\n const url = window.URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = `whatsapp_containers_${new Date().toISOString().split('T')[0]}.csv`;\r\n a.click();\r\n window.URL.revokeObjectURL(url);\r\n }\r\n}\r\n\r\n\/\/ Initialize monitor\r\nconst monitor = new WhatsAppMonitor();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>WhatsApp Monitor – Elementor Widget WhatsApp Container Monitor Monitoraggio real-time container Docker Configurazione Portainer URL Portainer API Token Endpoint ID Auto-refresh (sec) Test & Avvia 0 Totale Container 0 In Esecuzione 0 Fermi 0 MB RAM Totale Usata Utilizzo Memoria Aggiorna Esporta CSV Auto-refresh: Attivo Container WhatsApp<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6974","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mail2wa.it\/en\/wp-json\/wp\/v2\/pages\/6974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mail2wa.it\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mail2wa.it\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mail2wa.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mail2wa.it\/en\/wp-json\/wp\/v2\/comments?post=6974"}],"version-history":[{"count":4,"href":"https:\/\/mail2wa.it\/en\/wp-json\/wp\/v2\/pages\/6974\/revisions"}],"predecessor-version":[{"id":6978,"href":"https:\/\/mail2wa.it\/en\/wp-json\/wp\/v2\/pages\/6974\/revisions\/6978"}],"wp:attachment":[{"href":"https:\/\/mail2wa.it\/en\/wp-json\/wp\/v2\/media?parent=6974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n WhatsApp Monitor - Elementor Widget<\/title>\r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\">\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"wa-monitor-widget\">\r\n <style>\r\n .wa-monitor-widget {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n max-width: 100%;\r\n margin: 0 auto;\r\n background: #f8fafc;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n }\r\n .wa-monitor-widget * {\r\n box-sizing: border-box;\r\n }\r\n .wa-status-dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n margin-right: 8px;\r\n }\r\n .wa-status-running { background-color: #10b981; }\r\n .wa-status-stopped { background-color: #ef4444; }\r\n .wa-status-paused { background-color: #f59e0b; }\r\n .wa-progress-bar {\r\n height: 6px;\r\n background-color: #e5e7eb;\r\n border-radius: 3px;\r\n overflow: hidden;\r\n }\r\n .wa-progress-fill {\r\n height: 100%;\r\n transition: width 0.3s ease;\r\n border-radius: 3px;\r\n }\r\n .wa-progress-low { background-color: #10b981; }\r\n .wa-progress-medium { background-color: #f59e0b; }\r\n .wa-progress-high { background-color: #ef4444; }\r\n .wa-config-section {\r\n background: white;\r\n padding: 16px;\r\n margin-bottom: 16px;\r\n border-radius: 8px;\r\n border: 1px solid #e5e7eb;\r\n }\r\n .wa-container-card {\r\n background: white;\r\n padding: 12px;\r\n border-radius: 8px;\r\n border: 1px solid #e5e7eb;\r\n margin-bottom: 8px;\r\n transition: all 0.2s ease;\r\n }\r\n .wa-container-card:hover {\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n }\r\n .wa-btn {\r\n padding: 6px 12px;\r\n border-radius: 6px;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 12px;\r\n font-weight: 500;\r\n transition: all 0.2s ease;\r\n margin: 2px;\r\n }\r\n .wa-btn-primary { background: #3b82f6; color: white; }\r\n .wa-btn-success { background: #10b981; color: white; }\r\n .wa-btn-danger { background: #ef4444; color: white; }\r\n .wa-btn-warning { background: #f59e0b; color: white; }\r\n .wa-btn:hover { transform: translateY(-1px); opacity: 0.9; }\r\n .wa-stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 12px;\r\n margin-bottom: 16px;\r\n }\r\n .wa-stat-card {\r\n background: white;\r\n padding: 16px;\r\n border-radius: 8px;\r\n border: 1px solid #e5e7eb;\r\n text-align: center;\r\n }\r\n .wa-input {\r\n width: 100%;\r\n padding: 8px 12px;\r\n border: 1px solid #d1d5db;\r\n border-radius: 6px;\r\n font-size: 14px;\r\n margin-bottom: 8px;\r\n }\r\n .wa-input:focus {\r\n outline: none;\r\n border-color: #3b82f6;\r\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\r\n }\r\n .wa-alert {\r\n padding: 12px;\r\n border-radius: 6px;\r\n margin-bottom: 12px;\r\n }\r\n .wa-alert-success { background: #d1fae5; border: 1px solid #10b981; color: #065f46; }\r\n .wa-alert-error { background: #fee2e2; border: 1px solid #ef4444; color: #991b1b; }\r\n .wa-alert-warning { background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; }\r\n @media (max-width: 768px) {\r\n .wa-stats-grid { grid-template-columns: 1fr; }\r\n .wa-container-card { padding: 8px; }\r\n .wa-config-section { padding: 12px; }\r\n }\r\n <\/style>\r\n\r\n <div class=\"p-4\">\r\n \r\n <div class=\"text-center mb-4\">\r\n <h2 class=\"text-2xl font-bold text-gray-800 mb-2\">\r\n <i class=\"fab fa-whatsapp text-green-500 mr-2\"><\/i>\r\n WhatsApp Container Monitor\r\n <\/h2>\r\n <p class=\"text-gray-600 text-sm\">Monitoraggio real-time container Docker<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"wa-config-section\" id=\"configSection\">\r\n <h3 class=\"text-lg font-semibold mb-3 text-gray-700\">\r\n <i class=\"fas fa-cog mr-2\"><\/i>Configurazione Portainer\r\n <\/h3>\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">URL Portainer<\/label>\r\n <input type=\"text\" id=\"portainerUrl\" class=\"wa-input\" placeholder=\"http:\/\/k13.netlab.it:9000\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">API Token<\/label>\r\n <input type=\"text\" id=\"apiToken\" class=\"wa-input\" placeholder=\"ptr_...\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-4\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Endpoint ID<\/label>\r\n <input type=\"number\" id=\"endpointId\" class=\"wa-input\" value=\"1\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">Auto-refresh (sec)<\/label>\r\n <input type=\"number\" id=\"refreshInterval\" class=\"wa-input\" value=\"10\" min=\"5\" max=\"60\">\r\n <\/div>\r\n <div class=\"flex items-end\">\r\n <button id=\"testConnection\" class=\"wa-btn wa-btn-primary w-full\">\r\n <i class=\"fas fa-plug mr-2\"><\/i>Test & Avvia\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"connectionStatus\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"wa-stats-grid\" id=\"statsGrid\" style=\"display: none;\">\r\n <div class=\"wa-stat-card\">\r\n <div class=\"text-2xl font-bold text-blue-600\" id=\"totalContainers\">0<\/div>\r\n <div class=\"text-sm text-gray-600\">Totale Container<\/div>\r\n <\/div>\r\n <div class=\"wa-stat-card\">\r\n <div class=\"text-2xl font-bold text-green-600\" id=\"runningContainers\">0<\/div>\r\n <div class=\"text-sm text-gray-600\">In Esecuzione<\/div>\r\n <\/div>\r\n <div class=\"wa-stat-card\">\r\n <div class=\"text-2xl font-bold text-red-600\" id=\"stoppedContainers\">0<\/div>\r\n <div class=\"text-sm text-gray-600\">Fermi<\/div>\r\n <\/div>\r\n <div class=\"wa-stat-card\">\r\n <div class=\"text-2xl font-bold text-purple-600\" id=\"totalMemory\">0 MB<\/div>\r\n <div class=\"text-sm text-gray-600\">RAM Totale Usata<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"wa-config-section\" id=\"chartSection\" style=\"display: none;\">\r\n <h3 class=\"text-lg font-semibold mb-3 text-gray-700\">\r\n <i class=\"fas fa-chart-line mr-2\"><\/i>Utilizzo Memoria\r\n <\/h3>\r\n <div style=\"height: 300px;\">\r\n <canvas id=\"memoryChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex flex-wrap justify-between items-center mb-4\" id=\"controlsSection\" style=\"display: none;\">\r\n <div class=\"flex flex-wrap gap-2\">\r\n <button id=\"refreshData\" class=\"wa-btn wa-btn-primary\">\r\n <i class=\"fas fa-sync mr-2\"><\/i>Aggiorna\r\n <\/button>\r\n <button id=\"exportData\" class=\"wa-btn wa-btn-success\">\r\n <i class=\"fas fa-download mr-2\"><\/i>Esporta CSV\r\n <\/button>\r\n <\/div>\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"text-sm text-gray-600\">Auto-refresh:<\/span>\r\n <button id=\"toggleAutoRefresh\" class=\"wa-btn wa-btn-warning\">\r\n <i class=\"fas fa-pause mr-2\"><\/i>Attivo\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"containersList\" style=\"display: none;\">\r\n <h3 class=\"text-lg font-semibold mb-3 text-gray-700\">\r\n <i class=\"fab fa-docker mr-2\"><\/i>Container WhatsApp\r\n <\/h3>\r\n <div id=\"containersData\"><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nclass WhatsAppMonitor {\r\n constructor() {\r\n this.config = {\r\n url: '',\r\n token: '',\r\n endpointId: 1,\r\n refreshInterval: 10\r\n };\r\n this.autoRefreshActive = false;\r\n this.refreshTimer = null;\r\n this.chart = null;\r\n this.containers = [];\r\n \r\n this.init();\r\n }\r\n\r\n init() {\r\n this.loadConfig();\r\n this.setupEventListeners();\r\n this.initChart();\r\n }\r\n\r\n loadConfig() {\r\n const saved = localStorage.getItem('wa-monitor-config');\r\n if (saved) {\r\n this.config = { ...this.config, ...JSON.parse(saved) };\r\n } else {\r\n \/\/ Set default values\r\n this.config = {\r\n url: 'http:\/\/k13.netlab.it:9000',\r\n token: 'ptr_7jll9owcjCp7uJPtd0CSpvnwmUhfRkxZRqVcxAdkE6E=',\r\n endpointId: 1,\r\n refreshInterval: 10\r\n };\r\n }\r\n \r\n document.getElementById('portainerUrl').value = this.config.url;\r\n document.getElementById('apiToken').value = this.config.token;\r\n document.getElementById('endpointId').value = this.config.endpointId;\r\n document.getElementById('refreshInterval').value = this.config.refreshInterval;\r\n }\r\n\r\n saveConfig() {\r\n this.config.url = document.getElementById('portainerUrl').value;\r\n this.config.token = document.getElementById('apiToken').value;\r\n this.config.endpointId = parseInt(document.getElementById('endpointId').value);\r\n this.config.refreshInterval = parseInt(document.getElementById('refreshInterval').value);\r\n \r\n localStorage.setItem('wa-monitor-config', JSON.stringify(this.config));\r\n }\r\n\r\n setupEventListeners() {\r\n document.getElementById('testConnection').addEventListener('click', () => this.testConnection());\r\n document.getElementById('refreshData').addEventListener('click', () => this.fetchContainers());\r\n document.getElementById('exportData').addEventListener('click', () => this.exportCSV());\r\n document.getElementById('toggleAutoRefresh').addEventListener('click', () => this.toggleAutoRefresh());\r\n }\r\n\r\n initChart() {\r\n const ctx = document.getElementById('memoryChart').getContext('2d');\r\n this.chart = new Chart(ctx, {\r\n type: 'doughnut',\r\n data: {\r\n labels: ['Usata', 'Disponibile'],\r\n datasets: [{\r\n data: [0, 100],\r\n backgroundColor: ['#ef4444', '#e5e7eb'],\r\n borderWidth: 0\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n legend: {\r\n position: 'bottom'\r\n }\r\n }\r\n }\r\n });\r\n }\r\n\r\n showAlert(message, type = 'success') {\r\n const alerts = document.getElementById('connectionStatus');\r\n alerts.innerHTML = `\r\n <div class=\"wa-alert wa-alert-${type}\">\r\n <i class=\"fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'exclamation-triangle'} mr-2\"><\/i>\r\n ${message}\r\n <\/div>\r\n `;\r\n \r\n if (type === 'success') {\r\n setTimeout(() => alerts.innerHTML = '', 3000);\r\n }\r\n }\r\n\r\n async testConnection() {\r\n this.saveConfig();\r\n \r\n try {\r\n const response = await fetch(`${this.config.url}\/api\/endpoints`, {\r\n headers: {\r\n 'X-API-Key': this.config.token,\r\n 'Content-Type': 'application\/json'\r\n }\r\n });\r\n\r\n if (response.ok) {\r\n this.showAlert('Connessione riuscita! Avvio monitoraggio...', 'success');\r\n this.showDashboard();\r\n this.startAutoRefresh();\r\n this.fetchContainers();\r\n } else {\r\n throw new Error(`HTTP ${response.status}`);\r\n }\r\n } catch (error) {\r\n this.showAlert(`Errore connessione: ${error.message}`, 'error');\r\n }\r\n }\r\n\r\n showDashboard() {\r\n document.getElementById('statsGrid').style.display = 'grid';\r\n document.getElementById('chartSection').style.display = 'block';\r\n document.getElementById('controlsSection').style.display = 'flex';\r\n document.getElementById('containersList').style.display = 'block';\r\n }\r\n\r\n async fetchContainers() {\r\n try {\r\n const response = await fetch(`${this.config.url}\/api\/endpoints\/${this.config.endpointId}\/docker\/containers\/json?all=true`, {\r\n headers: {\r\n 'X-API-Key': this.config.token,\r\n 'Content-Type': 'application\/json'\r\n }\r\n });\r\n\r\n if (response.ok) {\r\n this.containers = await response.json();\r\n this.updateDashboard();\r\n }\r\n } catch (error) {\r\n console.error('Error fetching containers:', error);\r\n }\r\n }\r\n\r\n updateDashboard() {\r\n const whatsappContainers = this.containers.filter(c => \r\n c.Names[0].toLowerCase().includes('whatsapp') || \r\n c.Names[0].toLowerCase().includes('wwebjs') ||\r\n c.Image.toLowerCase().includes('whatsapp')\r\n );\r\n\r\n const running = whatsappContainers.filter(c => c.State === 'running').length;\r\n const stopped = whatsappContainers.filter(c => c.State === 'exited').length;\r\n\r\n \/\/ Update stats\r\n document.getElementById('totalContainers').textContent = whatsappContainers.length;\r\n document.getElementById('runningContainers').textContent = running;\r\n document.getElementById('stoppedContainers').textContent = stopped;\r\n\r\n \/\/ Update containers list\r\n this.renderContainers(whatsappContainers);\r\n \r\n \/\/ Update chart\r\n const memoryUsage = this.calculateMemoryUsage(whatsappContainers);\r\n this.updateChart(memoryUsage);\r\n }\r\n\r\n renderContainers(containers) {\r\n const containersHtml = containers.map(container => {\r\n const name = container.Names[0].replace('\/', '');\r\n const status = container.State;\r\n const statusDot = status === 'running' ? 'wa-status-running' : \r\n status === 'paused' ? 'wa-status-paused' : 'wa-status-stopped';\r\n \r\n const memoryUsage = Math.floor(Math.random() * 800 + 200); \/\/ Simulated\r\n const cpuUsage = Math.floor(Math.random() * 50 + 10); \/\/ Simulated\r\n \r\n const memoryClass = memoryUsage < 400 ? 'wa-progress-low' : \r\n memoryUsage < 600 ? 'wa-progress-medium' : 'wa-progress-high';\r\n \r\n return `\r\n <div class=\"wa-container-card\">\r\n <div class=\"flex justify-between items-start mb-2\">\r\n <div class=\"flex-1\">\r\n <div class=\"flex items-center mb-1\">\r\n <span class=\"wa-status-dot ${statusDot}\"><\/span>\r\n <span class=\"font-semibold text-sm\">${name}<\/span>\r\n <\/div>\r\n <div class=\"text-xs text-gray-600\">${container.Image}<\/div>\r\n <\/div>\r\n <div class=\"flex gap-1\">\r\n ${status === 'running' ? \r\n `<button class=\"wa-btn wa-btn-warning\" onclick=\"monitor.containerAction('${container.Id}', 'stop')\">\r\n <i class=\"fas fa-stop\"><\/i>\r\n <\/button>\r\n <button class=\"wa-btn wa-btn-danger\" onclick=\"monitor.containerAction('${container.Id}', 'restart')\">\r\n <i class=\"fas fa-redo\"><\/i>\r\n <\/button>` :\r\n `<button class=\"wa-btn wa-btn-success\" onclick=\"monitor.containerAction('${container.Id}', 'start')\">\r\n <i class=\"fas fa-play\"><\/i>\r\n <\/button>`\r\n }\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-2 gap-4 text-xs\">\r\n <div>\r\n <div class=\"flex justify-between mb-1\">\r\n <span>RAM:<\/span>\r\n <span>${memoryUsage} MB<\/span>\r\n <\/div>\r\n <div class=\"wa-progress-bar\">\r\n <div class=\"wa-progress-fill ${memoryClass}\" style=\"width: ${(memoryUsage\/1024)*100}%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"flex justify-between mb-1\">\r\n <span>CPU:<\/span>\r\n <span>${cpuUsage}%<\/span>\r\n <\/div>\r\n <div class=\"wa-progress-bar\">\r\n <div class=\"wa-progress-fill wa-progress-low\" style=\"width: ${cpuUsage}%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n\r\n document.getElementById('containersData').innerHTML = containersHtml;\r\n }\r\n\r\n calculateMemoryUsage(containers) {\r\n const totalMemory = 32 * 1024; \/\/ 32GB in MB\r\n const usedMemory = containers.length * 400; \/\/ Estimate 400MB per container\r\n return {\r\n used: usedMemory,\r\n total: totalMemory,\r\n percentage: (usedMemory \/ totalMemory) * 100\r\n };\r\n }\r\n\r\n updateChart(memoryData) {\r\n document.getElementById('totalMemory').textContent = `${memoryData.used} MB`;\r\n \r\n this.chart.data.datasets[0].data = [\r\n memoryData.used,\r\n memoryData.total - memoryData.used\r\n ];\r\n this.chart.update();\r\n }\r\n\r\n async containerAction(containerId, action) {\r\n try {\r\n const response = await fetch(`${this.config.url}\/api\/endpoints\/${this.config.endpointId}\/docker\/containers\/${containerId}\/${action}`, {\r\n method: 'POST',\r\n headers: {\r\n 'X-API-Key': this.config.token,\r\n 'Content-Type': 'application\/json'\r\n }\r\n });\r\n\r\n if (response.ok) {\r\n this.showAlert(`Container ${action} eseguito con successo`, 'success');\r\n setTimeout(() => this.fetchContainers(), 1000);\r\n }\r\n } catch (error) {\r\n this.showAlert(`Errore ${action}: ${error.message}`, 'error');\r\n }\r\n }\r\n\r\n startAutoRefresh() {\r\n this.autoRefreshActive = true;\r\n this.refreshTimer = setInterval(() => {\r\n this.fetchContainers();\r\n }, this.config.refreshInterval * 1000);\r\n \r\n document.getElementById('toggleAutoRefresh').innerHTML = \r\n '<i class=\"fas fa-pause mr-2\"><\/i>Attivo';\r\n }\r\n\r\n stopAutoRefresh() {\r\n this.autoRefreshActive = false;\r\n if (this.refreshTimer) {\r\n clearInterval(this.refreshTimer);\r\n }\r\n \r\n document.getElementById('toggleAutoRefresh').innerHTML = \r\n '<i class=\"fas fa-play mr-2\"><\/i>Fermo';\r\n }\r\n\r\n toggleAutoRefresh() {\r\n if (this.autoRefreshActive) {\r\n this.stopAutoRefresh();\r\n } else {\r\n this.startAutoRefresh();\r\n }\r\n }\r\n\r\n exportCSV() {\r\n const headers = ['Nome', 'Stato', 'Immagine', 'RAM (MB)', 'CPU (%)'];\r\n const rows = this.containers.map(container => [\r\n container.Names[0].replace('\/', ''),\r\n container.State,\r\n container.Image,\r\n Math.floor(Math.random() * 800 + 200), \/\/ Simulated\r\n Math.floor(Math.random() * 50 + 10) \/\/ Simulated\r\n ]);\r\n\r\n const csvContent = [headers, ...rows]\r\n .map(row => row.join(','))\r\n .join('\\n');\r\n\r\n const blob = new Blob([csvContent], { type: 'text\/csv' });\r\n const url = window.URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = `whatsapp_containers_${new Date().toISOString().split('T')[0]}.csv`;\r\n a.click();\r\n window.URL.revokeObjectURL(url);\r\n }\r\n}\r\n\r\n\/\/ Initialize monitor\r\nconst monitor = new WhatsAppMonitor();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>WhatsApp Monitor – Elementor Widget WhatsApp Container Monitor Monitoraggio real-time container Docker Configurazione Portainer URL Portainer API Token Endpoint ID Auto-refresh (sec) Test & Avvia 0 Totale Container 0 In Esecuzione 0 Fermi 0 MB RAM Totale Usata Utilizzo Memoria Aggiorna Esporta CSV Auto-refresh: Attivo Container WhatsApp<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6974","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mail2wa.it\/en\/wp-json\/wp\/v2\/pages\/6974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mail2wa.it\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mail2wa.it\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mail2wa.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mail2wa.it\/en\/wp-json\/wp\/v2\/comments?post=6974"}],"version-history":[{"count":4,"href":"https:\/\/mail2wa.it\/en\/wp-json\/wp\/v2\/pages\/6974\/revisions"}],"predecessor-version":[{"id":6978,"href":"https:\/\/mail2wa.it\/en\/wp-json\/wp\/v2\/pages\/6974\/revisions\/6978"}],"wp:attachment":[{"href":"https:\/\/mail2wa.it\/en\/wp-json\/wp\/v2\/media?parent=6974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}