Upload files to "public/scripts"
This commit is contained in:
parent
69b3699d66
commit
9e25a38a29
199
public/scripts/heatmap.js
Normal file
199
public/scripts/heatmap.js
Normal file
@ -0,0 +1,199 @@
|
||||
// public/scripts/heatmap.js
|
||||
|
||||
// ==== Configuration ====
|
||||
const dockDoors = [
|
||||
...Array.from({length: 138 - 124 + 1}, (_, i) => 124 + i),
|
||||
...Array.from({length: 201 - 142 + 1}, (_, i) => 142 + i),
|
||||
...Array.from({length: 209 - 202 + 1}, (_, i) => 202 + i),
|
||||
];
|
||||
|
||||
// Map region names → element IDs
|
||||
const regionEls = {
|
||||
'A-Mod': document.getElementById('region-amod'),
|
||||
'Outbound Pre-Slam':document.getElementById('region-preslam'),
|
||||
'B-Mod': document.getElementById('region-bmod'),
|
||||
};
|
||||
|
||||
// ==== State Stores ====
|
||||
const doorData = {}; // dockDoor → array of readings
|
||||
const regionData = {}; // regionName → array of readings
|
||||
|
||||
// Initialize data arrays
|
||||
dockDoors.forEach(d => doorData[d] = []);
|
||||
Object.keys(regionEls).forEach(r => regionData[r] = []);
|
||||
|
||||
// ==== Color Helper ====
|
||||
function getColorFromHI(H) {
|
||||
const pct = Math.min(Math.max((H - 70) / 30, 0), 1);
|
||||
const r = 255;
|
||||
const g = Math.round(255 * (1 - pct));
|
||||
return `rgba(${r},${g},0,0.7)`;
|
||||
}
|
||||
|
||||
// ==== Stats Helper ====
|
||||
function computeStats(arr) {
|
||||
if (!arr.length) return null;
|
||||
let sum = 0, max = arr[0], min = arr[0];
|
||||
arr.forEach(r => {
|
||||
sum += r.heatIndex;
|
||||
if (r.heatIndex > max.heatIndex) max = r;
|
||||
if (r.heatIndex < min.heatIndex) min = r;
|
||||
});
|
||||
const avg = (sum / arr.length).toFixed(2);
|
||||
const latest = arr[arr.length - 1];
|
||||
return { latest, max, min, avg };
|
||||
}
|
||||
|
||||
// ==== Grid Creation ====
|
||||
function createGrid() {
|
||||
const row = document.getElementById('dock-row');
|
||||
dockDoors.forEach(d => {
|
||||
const sq = document.createElement('div');
|
||||
sq.className = 'dock-square';
|
||||
sq.dataset.door = d;
|
||||
sq.textContent = d;
|
||||
row.appendChild(sq);
|
||||
});
|
||||
}
|
||||
|
||||
// ==== Initial Load ====
|
||||
async function loadInitial() {
|
||||
const all = await fetch('/api/readings').then(r=>r.json());
|
||||
all.forEach(r => {
|
||||
if (r.dockDoor != null) {
|
||||
doorData[r.dockDoor].push(r);
|
||||
} else if (r.region) {
|
||||
regionData[r.region].push(r);
|
||||
}
|
||||
});
|
||||
// Color each dock
|
||||
Object.entries(doorData).forEach(([d, arr]) => {
|
||||
const stats = computeStats(arr);
|
||||
if (stats) {
|
||||
const el = document.querySelector(`.dock-square[data-door="${d}"]`);
|
||||
el.style.background = getColorFromHI(stats.latest.heatIndex);
|
||||
}
|
||||
});
|
||||
// Color each region
|
||||
Object.entries(regionEls).forEach(([r, el]) => {
|
||||
const stats = computeStats(regionData[r]);
|
||||
if (stats) el.style.background = getColorFromHI(stats.latest.heatIndex);
|
||||
});
|
||||
}
|
||||
|
||||
// ==== SSE Subscriptions ====
|
||||
function subscribeRealtime() {
|
||||
const es = new EventSource('/api/stream');
|
||||
|
||||
es.addEventListener('new-reading', e => {
|
||||
const r = JSON.parse(e.data);
|
||||
if (doorData[r.dockDoor]) {
|
||||
doorData[r.dockDoor].push(r);
|
||||
const el = document.querySelector(`.dock-square[data-door="${r.dockDoor}"]`);
|
||||
el.style.background = getColorFromHI(r.heatIndex);
|
||||
}
|
||||
});
|
||||
|
||||
es.addEventListener('new-area-reading', e => {
|
||||
const r = JSON.parse(e.data);
|
||||
if (regionData[r.region]) {
|
||||
regionData[r.region].push(r);
|
||||
const el = regionEls[r.region];
|
||||
el.style.background = getColorFromHI(r.heatIndex);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ==== Tooltip Setup ====
|
||||
function setupTooltips() {
|
||||
const tooltip = document.getElementById('tooltip');
|
||||
|
||||
// Common hover handlers
|
||||
function showTip(e, infoHtml) {
|
||||
tooltip.innerHTML = infoHtml;
|
||||
tooltip.style.display = 'block';
|
||||
}
|
||||
function moveTip(e) {
|
||||
tooltip.style.top = `${e.clientY + 10}px`;
|
||||
tooltip.style.left = `${e.clientX + 10}px`;
|
||||
}
|
||||
function hideTip() {
|
||||
tooltip.style.display = 'none';
|
||||
}
|
||||
|
||||
// Dock squares
|
||||
document.querySelectorAll('.dock-square').forEach(sq => {
|
||||
sq.addEventListener('mouseenter', e => {
|
||||
const d = Number(sq.dataset.door);
|
||||
const stats = computeStats(doorData[d]);
|
||||
if (!stats) return;
|
||||
const lt = new Date(stats.latest.timestamp).toLocaleString();
|
||||
const ht = new Date(stats.max.timestamp).toLocaleString();
|
||||
const lt2= new Date(stats.min.timestamp).toLocaleString();
|
||||
const html = `
|
||||
<strong>Door ${d}</strong><br>
|
||||
Latest: HI ${stats.latest.heatIndex}, T ${stats.latest.temperature}°F, H ${stats.latest.humidity}%<br>
|
||||
Time: ${lt}<br>
|
||||
Max: HI ${stats.max.heatIndex} at ${ht}<br>
|
||||
Min: HI ${stats.min.heatIndex} at ${lt2}<br>
|
||||
Avg HI: ${stats.avg}
|
||||
`;
|
||||
showTip(e, html);
|
||||
});
|
||||
sq.addEventListener('mousemove', moveTip);
|
||||
sq.addEventListener('mouseleave', hideTip);
|
||||
});
|
||||
|
||||
// Regions
|
||||
Object.entries(regionEls).forEach(([r, el]) => {
|
||||
el.addEventListener('mouseenter', e => {
|
||||
const stats = computeStats(regionData[r]);
|
||||
if (!stats) return;
|
||||
const lr = stats.latest;
|
||||
const html = `
|
||||
<strong>${r}</strong><br>
|
||||
Latest Station: ${lr.stationCode}<br>
|
||||
HI ${lr.heatIndex}, T ${lr.temperature}°F, H ${lr.humidity}%<br>
|
||||
Time: ${new Date(lr.timestamp).toLocaleString()}<br>
|
||||
Max HI: ${stats.max.heatIndex}, Min HI: ${stats.min.heatIndex}<br>
|
||||
Avg HI: ${stats.avg}
|
||||
`;
|
||||
showTip(e, html);
|
||||
});
|
||||
el.addEventListener('mousemove', moveTip);
|
||||
el.addEventListener('mouseleave', hideTip);
|
||||
});
|
||||
}
|
||||
|
||||
// ==== Zoom & Pan via CSS Vars ====
|
||||
function setupZoom() {
|
||||
const root = document.documentElement.style;
|
||||
let scale = 1;
|
||||
const init = {
|
||||
size: 60,
|
||||
gap: 8,
|
||||
vgap: 24,
|
||||
wh: 200
|
||||
};
|
||||
const wrapper = document.querySelector('.heatmap-wrapper');
|
||||
wrapper.addEventListener('wheel', e => {
|
||||
if (e.ctrlKey) {
|
||||
e.preventDefault();
|
||||
scale += e.deltaY * -0.001;
|
||||
scale = Math.min(Math.max(scale, 0.5), 3);
|
||||
root.setProperty('--square-size', `${init.size * scale}px`);
|
||||
root.setProperty('--gap', `${init.gap * scale}px`);
|
||||
root.setProperty('--v-gap', `${init.vgap * scale}px`);
|
||||
root.setProperty('--warehouse-height',`${init.wh * scale}px`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ==== Init ====
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
createGrid();
|
||||
loadInitial();
|
||||
subscribeRealtime();
|
||||
setupTooltips();
|
||||
setupZoom();
|
||||
});
|
||||
40
public/scripts/input-area.js
Normal file
40
public/scripts/input-area.js
Normal file
@ -0,0 +1,40 @@
|
||||
// public/scripts/input-area.js
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const form = document.getElementById('area-form');
|
||||
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Gather form values
|
||||
const area = document.getElementById('area').value;
|
||||
const stationCode = document.getElementById('stationCode').value;
|
||||
const temperature = parseFloat(document.getElementById('temperature').value);
|
||||
const humidity = parseFloat(document.getElementById('humidity').value);
|
||||
|
||||
// Build payload
|
||||
const payload = { area, stationCode, temperature, humidity };
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/area-readings', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const { error } = await res.json();
|
||||
alert(`Error: ${error}`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Success: reset form and optionally notify user
|
||||
form.reset();
|
||||
alert('Area reading submitted successfully!');
|
||||
} catch (err) {
|
||||
console.error('Network error submitting area reading:', err);
|
||||
alert('Network error – please try again.');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
29
public/scripts/input.js
Normal file
29
public/scripts/input.js
Normal file
@ -0,0 +1,29 @@
|
||||
const form = document.getElementById('reading-form');
|
||||
const inDoor = document.getElementById('inboundDoor');
|
||||
const outDoor = document.getElementById('outboundDoor');
|
||||
const inTemp = document.getElementById('inboundTemp');
|
||||
const outTemp = document.getElementById('outboundTemp');
|
||||
const inHum = document.getElementById('inboundHum');
|
||||
const outHum = document.getElementById('outboundHum');
|
||||
|
||||
// Auto-set direction fields (readonly) if you want display
|
||||
// omitted here since direction hidden in dual-input
|
||||
|
||||
form.addEventListener('submit', e => {
|
||||
e.preventDefault();
|
||||
const payload = {
|
||||
inbound: {
|
||||
dockDoor: +inDoor.value,
|
||||
temperature: +inTemp.value,
|
||||
humidity: +inHum.value
|
||||
},
|
||||
outbound: {
|
||||
dockDoor: +outDoor.value,
|
||||
temperature: +outTemp.value,
|
||||
humidity: +outHum.value
|
||||
}
|
||||
};
|
||||
fetch('/api/readings', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload)
|
||||
}).then(res => res.json()).then(() => form.reset());
|
||||
});
|
||||
161
public/scripts/trends.js
Normal file
161
public/scripts/trends.js
Normal file
@ -0,0 +1,161 @@
|
||||
// average helper
|
||||
function average(arr) {
|
||||
return arr.reduce((a, b) => a + b, 0) / arr.length;
|
||||
}
|
||||
|
||||
// interval mappings
|
||||
const periodKeys = ['hourly','daily','weekly','monthly','yearly'];
|
||||
const periodLabels = ['Hourly','Daily','Weekly','Monthly','Yearly'];
|
||||
|
||||
// bucket definitions
|
||||
const periodConfig = {
|
||||
hourly: { keyFn: r => r.timestamp.slice(0,13), labelFn: k => k.replace('T',' ') },
|
||||
daily: { keyFn: r => r.timestamp.slice(0,10), labelFn: k => k },
|
||||
weekly: { keyFn: r => {
|
||||
const d = new Date(r.timestamp), y = d.getFullYear();
|
||||
const w = Math.ceil((((d - new Date(y,0,1))/864e5) + new Date(y,0,1).getDay()+1)/7);
|
||||
return `${y}-W${w}`;
|
||||
}, labelFn: k => k },
|
||||
monthly: { keyFn: r => r.timestamp.slice(0,7), labelFn: k => k },
|
||||
yearly: { keyFn: r => r.timestamp.slice(0,4), labelFn: k => k }
|
||||
};
|
||||
|
||||
// global Chart.js instance
|
||||
let trendChart, dataTable;
|
||||
|
||||
// fetch readings from server
|
||||
async function fetchReadings() {
|
||||
const res = await fetch('/api/readings');
|
||||
return res.ok ? res.json() : [];
|
||||
}
|
||||
|
||||
// determine direction based on dock door #
|
||||
function getDirection(dock) {
|
||||
return ( (dock>=124 && dock<=138) || (dock>=202 && dock<=209) )
|
||||
? 'Inbound'
|
||||
: 'Outbound';
|
||||
}
|
||||
|
||||
// render DataTable
|
||||
function renderTable(allReadings) {
|
||||
const tbody = $('#trendTable tbody').empty();
|
||||
allReadings.forEach(r => {
|
||||
const ts = new Date(r.timestamp).toLocaleString('en-US', { timeZone:'Europe/London' });
|
||||
const dir = getDirection(r.dockDoor);
|
||||
tbody.append(`
|
||||
<tr>
|
||||
<td>${ts}</td>
|
||||
<td>${r.temperature.toFixed(1)}</td>
|
||||
<td>${r.humidity.toFixed(1)}</td>
|
||||
<td>${r.heatIndex.toFixed(1)}</td>
|
||||
<td>${r.dockDoor}</td>
|
||||
<td>${dir}</td>
|
||||
</tr>
|
||||
`);
|
||||
});
|
||||
|
||||
// initialize or redraw DataTable
|
||||
if ($.fn.DataTable.isDataTable('#trendTable')) {
|
||||
dataTable.clear().rows.add($('#trendTable tbody tr')).draw();
|
||||
} else {
|
||||
dataTable = $('#trendTable').DataTable({
|
||||
paging: true,
|
||||
pageLength: 25,
|
||||
ordering: true,
|
||||
order: [[0,'desc']],
|
||||
autoWidth: false,
|
||||
scrollX: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// draw or update chart
|
||||
async function drawTrend() {
|
||||
const all = await fetchReadings();
|
||||
const slider = document.getElementById('periodSlider');
|
||||
const periodKey = periodKeys[slider.value];
|
||||
const cfg = periodConfig[periodKey];
|
||||
|
||||
// group & stats
|
||||
const groups = {};
|
||||
all.forEach(r => {
|
||||
const key = cfg.keyFn(r);
|
||||
groups[key] = groups[key] || { temps:[], hums:[], his:[] };
|
||||
groups[key].temps.push(r.temperature);
|
||||
groups[key].hums.push(r.humidity);
|
||||
groups[key].his.push(r.heatIndex);
|
||||
});
|
||||
|
||||
const labels = Object.keys(groups).sort();
|
||||
const stats = labels.map(k => {
|
||||
const g = groups[k];
|
||||
return {
|
||||
temp: { avg: average(g.temps).toFixed(2), min: Math.min(...g.temps), max: Math.max(...g.temps) },
|
||||
hum: { avg: average(g.hums).toFixed(2), min: Math.min(...g.hums), max: Math.max(...g.hums) },
|
||||
hi: { avg: average(g.his).toFixed(2), min: Math.min(...g.his), max: Math.max(...g.his) }
|
||||
};
|
||||
});
|
||||
|
||||
// selected toggles
|
||||
const checks = Array.from(document.querySelectorAll('#metricToggles input:checked'));
|
||||
const datasets = checks.map(chk => {
|
||||
const m = chk.dataset.metric, s = chk.dataset.stat;
|
||||
return {
|
||||
label: `${m.toUpperCase()} ${s.toUpperCase()}`,
|
||||
data: stats.map(x => x[m][s]),
|
||||
fill: false,
|
||||
tension: 0.1
|
||||
};
|
||||
});
|
||||
|
||||
const ctx = document.getElementById('trendChart').getContext('2d');
|
||||
if (trendChart) {
|
||||
trendChart.data.labels = labels.map(cfg.labelFn);
|
||||
trendChart.data.datasets = datasets;
|
||||
trendChart.update();
|
||||
} else {
|
||||
trendChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels.map(cfg.labelFn),
|
||||
datasets
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { display: true },
|
||||
tooltip: { mode:'index', intersect:false },
|
||||
zoom: {
|
||||
pan: { enabled:true, mode:'x', modifierKey:'ctrl' },
|
||||
zoom: { wheel:{enabled:true}, pinch:{enabled:true}, mode:'x' }
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: { display:true },
|
||||
y: { display:true }
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// always update table below
|
||||
renderTable(all);
|
||||
}
|
||||
|
||||
// wire up controls
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// initial draw
|
||||
drawTrend();
|
||||
|
||||
// slider
|
||||
document.getElementById('periodSlider')
|
||||
.addEventListener('input', e => {
|
||||
document.getElementById('periodLabel').textContent = periodLabels[e.target.value];
|
||||
drawTrend();
|
||||
});
|
||||
|
||||
// toggles
|
||||
document.querySelectorAll('#metricToggles input')
|
||||
.forEach(chk => chk.addEventListener('change', drawTrend));
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user