131 lines
5.2 KiB
HTML
131 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>IoT Dashboard — Умный дом</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; }
|
|
.header { background: #1e293b; padding: 20px 30px; border-bottom: 1px solid #334155; }
|
|
.header h1 { font-size: 24px; color: #38bdf8; }
|
|
.header span { color: #94a3b8; font-size: 14px; }
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; padding: 20px; }
|
|
.card { background: #1e293b; border-radius: 12px; padding: 20px; border: 1px solid #334155; }
|
|
.card h2 { font-size: 16px; color: #94a3b8; margin-bottom: 15px; }
|
|
.chart-wrap { position: relative; height: 250px; }
|
|
.table-wrap { max-height: 300px; overflow-y: auto; }
|
|
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #334155; }
|
|
th { color: #64748b; font-weight: 600; }
|
|
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; }
|
|
.badge-temp { background: #f97316; color: #fff; }
|
|
.badge-hum { background: #06b6d4; color: #fff; }
|
|
.badge-power { background: #eab308; color: #000; }
|
|
.refresh { text-align: right; font-size: 12px; color: #64748b; margin-bottom: 10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>🏠 IoT Dashboard — Умный дом</h1>
|
|
<span>Kafka → Redis → MongoDB | Автообновление каждые 3 сек</span>
|
|
</div>
|
|
<div class="grid">
|
|
<div class="card">
|
|
<h2>📊 Последние значения датчиков</h2>
|
|
<div class="chart-wrap"><canvas id="latestChart"></canvas></div>
|
|
</div>
|
|
<div class="card">
|
|
<h2>📈 Счётчики по типам устройств</h2>
|
|
<div class="chart-wrap"><canvas id="countersChart"></canvas></div>
|
|
</div>
|
|
<div class="card">
|
|
<h2>📋 Последние события</h2>
|
|
<div class="table-wrap">
|
|
<table id="recentTable">
|
|
<thead><tr><th>Время</th><th>Датчик</th><th>Значение</th><th>Локация</th></tr></thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let latestChart, countersChart;
|
|
|
|
function getBadge(type) {
|
|
if (type === 'temperature') return 'badge-temp';
|
|
if (type === 'humidity') return 'badge-hum';
|
|
return 'badge-power';
|
|
}
|
|
|
|
async function refresh() {
|
|
try {
|
|
// Latest values
|
|
const latest = await fetch('/api/latest').then(r => r.json());
|
|
const labels = latest.map(d => d.sensor_id);
|
|
const values = latest.map(d => d.value);
|
|
const colors = latest.map(d => {
|
|
if (d.unit === '°C') return '#f97316';
|
|
if (d.unit === '%') return '#06b6d4';
|
|
return '#eab308';
|
|
});
|
|
|
|
if (!latestChart) {
|
|
latestChart = new Chart(document.getElementById('latestChart'), {
|
|
type: 'bar',
|
|
data: { labels, datasets: [{ label: 'Значение', data: values, backgroundColor: colors }] },
|
|
options: { responsive: true, maintainAspectRatio: false,
|
|
scales: { y: { ticks: { color: '#94a3b8' } }, x: { ticks: { color: '#94a3b8' } } },
|
|
plugins: { legend: { display: false } }
|
|
}
|
|
});
|
|
} else {
|
|
latestChart.data.labels = labels;
|
|
latestChart.data.datasets[0].data = values;
|
|
latestChart.data.datasets[0].backgroundColor = colors;
|
|
latestChart.update();
|
|
}
|
|
|
|
// Counters
|
|
const counters = await fetch('/api/counters').then(r => r.json());
|
|
const cLabels = Object.keys(counters);
|
|
const cValues = Object.values(counters).map(Number);
|
|
|
|
if (!countersChart) {
|
|
countersChart = new Chart(document.getElementById('countersChart'), {
|
|
type: 'doughnut',
|
|
data: { labels: cLabels, datasets: [{ data: cValues, backgroundColor: ['#f97316','#06b6d4','#eab308'] }] },
|
|
options: { responsive: true, maintainAspectRatio: false,
|
|
plugins: { legend: { labels: { color: '#94a3b8' } } }
|
|
}
|
|
});
|
|
} else {
|
|
countersChart.data.labels = cLabels;
|
|
countersChart.data.datasets[0].data = cValues;
|
|
countersChart.update();
|
|
}
|
|
|
|
// Recent events
|
|
const recent = await fetch('/api/recent').then(r => r.json());
|
|
const tbody = document.querySelector('#recentTable tbody');
|
|
tbody.innerHTML = recent.slice(0, 15).map(e => `
|
|
<tr>
|
|
<td>${new Date(e.timestamp).toLocaleTimeString()}</td>
|
|
<td>${e.sensor_id}</td>
|
|
<td><span class="badge ${getBadge(e.device_type)}">${e.value} ${e.unit}</span></td>
|
|
<td>${e.location}</td>
|
|
</tr>
|
|
`).join('');
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
refresh();
|
|
setInterval(refresh, 3000);
|
|
</script>
|
|
</body>
|
|
</html>
|