u
This commit is contained in:
sebseb7
189
public/dashboard.js
Normal file
189
public/dashboard.js
Normal file
@@ -0,0 +1,189 @@
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
|
||||
// State
|
||||
let currentRange = 'day';
|
||||
let chartInstances = {};
|
||||
|
||||
// Determine API Base URL from script location (robust for subpaths)
|
||||
const scriptPath = document.currentScript ? document.currentScript.src : window.location.href;
|
||||
const API_BASE = scriptPath.substring(0, scriptPath.lastIndexOf('/') + 1) + 'api/';
|
||||
|
||||
async function init() {
|
||||
setupControls();
|
||||
await loadDevices();
|
||||
}
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
// Device Select
|
||||
document.getElementById('deviceSelect').addEventListener('change', loadData);
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch and populate device list
|
||||
*/
|
||||
async function loadDevices() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}devices`);
|
||||
const devices = await res.json();
|
||||
|
||||
const select = document.getElementById('deviceSelect');
|
||||
select.innerHTML = '';
|
||||
|
||||
if (devices.length === 0) {
|
||||
const opt = document.createElement('option');
|
||||
opt.text = "No devices found";
|
||||
select.add(opt);
|
||||
return;
|
||||
}
|
||||
|
||||
devices.forEach((dev, index) => {
|
||||
const opt = document.createElement('option');
|
||||
const label = `${dev.dev_name} - ${dev.port_name || 'Port ' + dev.port}`;
|
||||
opt.text = label;
|
||||
opt.value = JSON.stringify({ devName: dev.dev_name, port: dev.port, portName: dev.port_name });
|
||||
select.add(opt);
|
||||
|
||||
// Auto-select first device
|
||||
if (index === 0) {
|
||||
select.value = opt.value;
|
||||
}
|
||||
});
|
||||
|
||||
// Trigger initial load
|
||||
if (select.value) {
|
||||
loadData();
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error("Failed to load devices", err);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch data and render charts
|
||||
*/
|
||||
async function loadData() {
|
||||
const select = document.getElementById('deviceSelect');
|
||||
if (!select.value) return;
|
||||
|
||||
const { devName, port, portName } = JSON.parse(select.value);
|
||||
|
||||
// Update Titles based on type
|
||||
const isLight = portName && portName.toLowerCase().includes('light');
|
||||
document.getElementById('levelFanTitle').innerText = isLight ? 'Brightness Levels' : 'Fan Speed Levels';
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}history?devName=${encodeURIComponent(devName)}&port=${port}&range=${currentRange}`);
|
||||
const data = await res.json();
|
||||
renderCharts(data, isLight);
|
||||
} catch (err) {
|
||||
console.error("Failed to load history", err);
|
||||
}
|
||||
}
|
||||
|
||||
function renderCharts(data, isLight) {
|
||||
const labels = data.map(d => new Date(d.timestamp).toLocaleString());
|
||||
|
||||
// 1. Temp & Humidity
|
||||
const tempCtx = document.getElementById('tempHumChart').getContext('2d');
|
||||
updateChart('tempHum', tempCtx, 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 (%)' }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 2. VPD
|
||||
const vpdCtx = document.getElementById('vpdChart').getContext('2d');
|
||||
updateChart('vpd', vpdCtx, labels, [{
|
||||
label: 'VPD (kPa)',
|
||||
data: data.map(d => d.vpd),
|
||||
borderColor: '#4bc0c0',
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
fill: true
|
||||
}]);
|
||||
|
||||
// 3. Levels (Fan/Light)
|
||||
const levelCtx = document.getElementById('levelChart').getContext('2d');
|
||||
const levelLabel = isLight ? 'Brightness' : 'Fan Speed';
|
||||
const levelColor = isLight ? '#ffcd56' : '#9966ff'; // Yellow for light, Purple for fan
|
||||
|
||||
updateChart('level', levelCtx, labels, [{
|
||||
label: levelLabel,
|
||||
data: data.map(d => d.fan_speed), // fan_speed used for generic level in DB
|
||||
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();
|
||||
}
|
||||
|
||||
chartInstances[id] = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: datasets.map(ds => ({ ...ds, borderWidth: 2, tension: 0.3, pointRadius: 1 }))
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
},
|
||||
plugins: {
|
||||
legend: { position: 'top' }
|
||||
},
|
||||
...extraOptions
|
||||
}
|
||||
});
|
||||
}
|
||||
52
public/index.html
Normal file
52
public/index.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AC Inf</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>AC Inf</h1>
|
||||
</header>
|
||||
|
||||
<div class="controls">
|
||||
<div class="selector">
|
||||
<label for="deviceSelect">Device / Port:</label>
|
||||
<select id="deviceSelect">
|
||||
<option value="" disabled selected>Loading...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="time-range">
|
||||
<button class="range-btn active" data-range="day">24 Hours</button>
|
||||
<button class="range-btn" data-range="week">7 Days</button>
|
||||
<button class="range-btn" data-range="month">30 Days</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="charts-container">
|
||||
<div class="chart-wrapper">
|
||||
<h3>Temperature & Humidity</h3>
|
||||
<canvas id="tempHumChart"></canvas>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
<h3>VPD</h3>
|
||||
<canvas id="vpdChart"></canvas>
|
||||
</div>
|
||||
<div class="chart-wrapper">
|
||||
<h3 id="levelFanTitle">Levels</h3>
|
||||
<canvas id="levelChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="dashboard.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
90
public/style.css
Normal file
90
public/style.css
Normal file
@@ -0,0 +1,90 @@
|
||||
:root {
|
||||
--bg-color: #f4f4f9;
|
||||
--card-bg: #ffffff;
|
||||
--text-color: #333;
|
||||
--accent-color: #2c974b;
|
||||
--border-color: #ddd;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--card-bg);
|
||||
padding: 15px 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 8px 12px;
|
||||
font-size: 16px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.time-range {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.range-btn {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--accent-color);
|
||||
background: transparent;
|
||||
color: var(--accent-color);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.range-btn.active, .range-btn:hover {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.charts-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
background: var(--card-bg);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.1em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
canvas {
|
||||
width: 100% !important;
|
||||
height: 300px !important;
|
||||
}
|
||||
Reference in New Issue
Block a user