Genesis
This commit is contained in:
sebseb7
257
public/dashboard.js
Normal file
257
public/dashboard.js
Normal file
@@ -0,0 +1,257 @@
|
||||
const scriptPath = document.currentScript ? document.currentScript.src : window.location.href;
|
||||
const API_BASE = scriptPath.substring(0, scriptPath.lastIndexOf('/') + 1) + 'api/';
|
||||
|
||||
// Store device info globally to simplify reload
|
||||
let filteredDevices = [];
|
||||
// Grouped: { "ControllerName": [ {dev info...}, {dev info...} ] }
|
||||
let groupedDevices = {};
|
||||
let currentRange = 'day';
|
||||
let chartInstances = {};
|
||||
|
||||
async function init() {
|
||||
setupControls();
|
||||
await loadDevices();
|
||||
|
||||
// Auto-refresh data every 60 seconds
|
||||
setInterval(loadData, 60000);
|
||||
}
|
||||
|
||||
function setupControls() {
|
||||
// Range Buttons
|
||||
document.querySelectorAll('.range-btn').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
|
||||
e.target.classList.add('active');
|
||||
currentRange = e.target.dataset.range;
|
||||
loadData();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch and setup device containers (Grouped by Controller)
|
||||
*/
|
||||
async function loadDevices() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}devices`);
|
||||
const rawDevices = await res.json();
|
||||
const container = document.getElementById('devicesContainer');
|
||||
container.innerHTML = '';
|
||||
|
||||
if (rawDevices.length === 0) {
|
||||
container.innerHTML = '<p>No devices found.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Group by Controller Name
|
||||
groupedDevices = rawDevices.reduce((acc, dev) => {
|
||||
if (!acc[dev.dev_name]) acc[dev.dev_name] = [];
|
||||
acc[dev.dev_name].push(dev);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// Create Section per Controller
|
||||
for (const [controllerName, ports] of Object.entries(groupedDevices)) {
|
||||
const safeControllerName = controllerName.replace(/\s+/g, '_');
|
||||
|
||||
const section = document.createElement('div');
|
||||
section.className = 'controller-section';
|
||||
|
||||
// Generate Ports HTML
|
||||
let portsHtml = '';
|
||||
ports.forEach(port => {
|
||||
const safePortId = `${controllerName}_${port.port}`.replace(/\s+/g, '_');
|
||||
|
||||
portsHtml += `
|
||||
<div class="port-card">
|
||||
<h4>${port.port_name || 'Port ' + port.port}</h4>
|
||||
<div class="canvas-container small">
|
||||
<canvas id="level_${safePortId}"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
section.innerHTML = `
|
||||
<div class="controller-header">
|
||||
<h2>${controllerName}</h2>
|
||||
</div>
|
||||
|
||||
<div class="environment-row">
|
||||
<div class="chart-wrapper wide">
|
||||
<h3>Environment (Temp / Humidity)</h3>
|
||||
<div class="canvas-container">
|
||||
<canvas id="env_${safeControllerName}"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ports-grid">
|
||||
${portsHtml}
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(section);
|
||||
}
|
||||
|
||||
// Trigger initial data load
|
||||
loadData();
|
||||
|
||||
} catch (err) {
|
||||
console.error("Failed to load devices", err);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch data and render
|
||||
*/
|
||||
async function loadData() {
|
||||
for (const [controllerName, ports] of Object.entries(groupedDevices)) {
|
||||
const safeControllerName = controllerName.replace(/\s+/g, '_');
|
||||
|
||||
// 1. Fetch Environment Data (Use first port as representative source)
|
||||
if (ports.length > 0) {
|
||||
const firstPort = ports[0];
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}history?devName=${encodeURIComponent(controllerName)}&port=${firstPort.port}&range=${currentRange}`);
|
||||
const data = await res.json();
|
||||
renderEnvChart(safeControllerName, data);
|
||||
} catch (err) {
|
||||
console.error(`Failed to load env data for ${controllerName}`, err);
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Fetch Level Data for EACH port
|
||||
for (const port of ports) {
|
||||
const safePortId = `${controllerName}_${port.port}`.replace(/\s+/g, '_');
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}history?devName=${encodeURIComponent(controllerName)}&port=${port.port}&range=${currentRange}`);
|
||||
const data = await res.json();
|
||||
|
||||
const isLight = port.port_name && port.port_name.toLowerCase().includes('light');
|
||||
renderLevelChart(safePortId, data, isLight);
|
||||
} catch (err) {
|
||||
console.error(`Failed to load level data for ${controllerName}:${port.port}`, err);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function formatDateLabel(timestamp) {
|
||||
const date = new Date(timestamp);
|
||||
if (currentRange === 'day') {
|
||||
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
} else {
|
||||
return date.toLocaleDateString([], { month: 'numeric', day: 'numeric' }) + ' ' +
|
||||
date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
}
|
||||
}
|
||||
|
||||
function renderEnvChart(safeName, data) {
|
||||
const labels = data.map(d => formatDateLabel(d.timestamp));
|
||||
const ctx = document.getElementById(`env_${safeName}`).getContext('2d');
|
||||
|
||||
updateChart(`env_${safeName}`, ctx, labels, [
|
||||
{
|
||||
label: 'Temperature (°C)',
|
||||
data: data.map(d => d.temp_c),
|
||||
borderColor: '#ff6384',
|
||||
yAxisID: 'y'
|
||||
},
|
||||
{
|
||||
label: 'Humidity (%)',
|
||||
data: data.map(d => d.humidity),
|
||||
borderColor: '#36a2eb',
|
||||
yAxisID: 'y1'
|
||||
}
|
||||
], {
|
||||
scales: {
|
||||
y: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'left',
|
||||
suggestedMin: 15,
|
||||
title: { display: true, text: 'Temp (°C)' }
|
||||
},
|
||||
y1: {
|
||||
type: 'linear',
|
||||
display: true,
|
||||
position: 'right',
|
||||
grid: { drawOnChartArea: false },
|
||||
suggestedMin: 30,
|
||||
suggestedMax: 80,
|
||||
title: { display: true, text: 'Humidity (%)' }
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function renderLevelChart(safeId, data, isLight) {
|
||||
const labels = data.map(d => formatDateLabel(d.timestamp));
|
||||
const ctx = document.getElementById(`level_${safeId}`).getContext('2d');
|
||||
const levelLabel = isLight ? 'Brightness' : 'Fan Speed';
|
||||
const levelColor = isLight ? '#ffcd56' : '#9966ff';
|
||||
|
||||
updateChart(`level_${safeId}`, ctx, labels, [{
|
||||
label: levelLabel,
|
||||
data: data.map(d => d.fan_speed),
|
||||
borderColor: levelColor,
|
||||
backgroundColor: levelColor,
|
||||
stepped: true
|
||||
}], {
|
||||
scales: {
|
||||
y: {
|
||||
suggestedMin: 0,
|
||||
suggestedMax: 10,
|
||||
ticks: { stepSize: 1 }
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateChart(id, ctx, labels, datasets, extraOptions = {}) {
|
||||
if (chartInstances[id]) {
|
||||
chartInstances[id].destroy();
|
||||
}
|
||||
|
||||
const defaultOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
plugins: {
|
||||
legend: { position: 'top' }
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
maxRotation: 0,
|
||||
autoSkip: true,
|
||||
maxTicksLimit: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Merge scales specifically
|
||||
const mergedScales = { ...defaultOptions.scales, ...(extraOptions.scales || {}) };
|
||||
|
||||
// Merge options
|
||||
const options = {
|
||||
...defaultOptions,
|
||||
...extraOptions,
|
||||
scales: mergedScales
|
||||
};
|
||||
|
||||
chartInstances[id] = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: datasets.map(ds => ({ ...ds, borderWidth: 2, tension: 0.3, pointRadius: 1 }))
|
||||
},
|
||||
options: options
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
Reference in New Issue
Block a user