JoshBaneyCS/Heat-Tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First Commit

Browse Source
This commit is contained in:
Baney 2025-04-22 00:01:38 -04:00
parent f36cfa8ca0
commit 433b7c4681
11 changed files with 248 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.env
View File

@ -0,0 +1,10 @@
# Server port
PORT=3000
# MariaDB connection
DB_CLIENT=mysql
DB_HOST=localhost
DB_PORT=3306
DB_USER=your_db_user
DB_PASSWORD=your_db_password
DB_NAME=warehouse_heatmap

6
package.json
View File

@ -7,8 +7,8 @@
},
"dependencies": {
"express": "^4.18.2",
"sqlite3": "^5.1.6",
"mysql2": "^3.2.0",
"knex": "^2.4.2",
"body-parser": "^1.20.2"
}
}
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

20
public/heatmap.html
View File

@ -3,24 +3,26 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="styles.css">
<title>Heat Map</title>
<title>Warehouse Heat Map</title>
</head>
<body>
<header class="main-header">
<img src="/images/logo.png" alt="Company Logo" class="logo">
<span class="header-title">Warehouse Heat Map</span>
<button class="nav-btn" onclick="window.location.href='/input.html'">Log Reading</button>
<button class="nav-btn" onclick="window.location.href='/heatmap.html'">Heat Map</button>
<button class="nav-btn" onclick="window.location.href='/trends.html'">Trends</button>
<img src="/image/logo.png" alt="Amazon Logo" class="logo">
<span class="header-title">| Fuego - Heat Tracker</span>
<button class="nav-btn" onclick="location.href='/input.html'">Log Reading</button>
<button class="nav-btn" onclick="location.href='/heatmap.html'">Heat Map</button>
<button class="nav-btn" onclick="location.href='/trends.html'">Trends</button>
</header>
<div class="page-container">
<div id="heatmap-container"></div>
<div class="diagram-container">
<div id="dock-row" class="dock-row"></div>
<div class="warehouse"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.css"/>
<script src="scripts/heatmap.js"></script>
</body>
</html>

BIN
public/image/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

36
public/input.html
View File

@ -3,29 +3,37 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="styles.css">
<title>Log Reading</title>
<title>Log Dual Readings</title>
</head>
<body>
<!-- Header -->
<header class="main-header">
<img src="/images/logo.png" alt="Company Logo" class="logo">
<span class="header-title">Warehouse Heat Logger</span>
<button class="nav-btn" onclick="window.location.href='/input.html'">Log Reading</button>
<button class="nav-btn" onclick="window.location.href='/heatmap.html'">Heat Map</button>
<button class="nav-btn" onclick="window.location.href='/trends.html'">Trends</button>
<img src="/image/logo.png" alt="Amazon Logo" class="logo">
<span class="header-title"> | Fuego - Heat Tracker</span>
<button class="nav-btn" onclick="location.href='/input.html'">Log Reading</button>
<button class="nav-btn" onclick="location.href='/heatmap.html'">Heat Map</button>
<button class="nav-btn" onclick="location.href='/trends.html'">Trends</button>
</header>
<div class="page-container">
<h1>Enter Trailer Reading</h1>
<h1>Enter Inbound & Outbound Readings</h1>
<form id="reading-form">
<input class="form-input" type="number" id="dockDoor" placeholder="Dock Door #" min="106">
<input class="form-input" type="datetime-local" id="timestamp">
<input class="form-input" type="number" id="temperature" step="0.1" placeholder="Temperature (°F)">
<input class="form-input" type="number" id="humidity" step="0.1" placeholder="Humidity (%)">
<button type="submit" class="big-button">Submit</button>
<fieldset>
<legend>Inbound</legend>
<input class="form-input" id="inboundDoor" type="number" placeholder="Dock Door # (124–138,202–209)" required>
<input class="form-input" id="inboundTemp" type="number" step="0.1" placeholder="Temperature (°F)" required>
<input class="form-input" id="inboundHum" type="number" step="0.1" placeholder="Humidity (%)" required>
</fieldset>
<fieldset>
<legend>Outbound</legend>
<input class="form-input" id="outboundDoor" type="number" placeholder="Dock Door # (142–201)" required>
<input class="form-input" id="outboundTemp" type="number" step="0.1" placeholder="Temperature (°F)" required>
<input class="form-input" id="outboundHum" type="number" step="0.1" placeholder="Humidity (%)" required>
</fieldset>
<button type="submit" class="big-button">Submit Both</button>
</form>
</div>
<script src="scripts/input.js"></script>
</body>
</html>
</html>

75
public/scripts/heatmap.js
View File

@ -1,24 +1,51 @@
// Map setup
const map = L.map('heatmap-container').setView([0, 0], 1);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// Dock door coordinates config
const coords = {};
for (let d=106; d<=138; d++) coords[d] = [0, d-122];
for (let d=142; d<=201; d++) coords[d] = [ -1, d-172];
for (let d=202; d<=210; d++) coords[d] = [ 1, d-206];
// Color scale
function getColor(h) {
const pct = (h - 70) / 30;
return `rgba(${255},${Math.round(255*(1-pct))},0,0.7)`;
}
// Render markers & listen SSE
fetch('/api/readings').then(r=>r.json()).then(all => all.forEach(plot));
function plot({dockDoor, heatIndex}) {
const [lat, lon] = coords[dockDoor];
L.rectangle([[lat-0.1, lon-0.1],[lat+0.1, lon+0.1]],{color:getColor(heatIndex)}).addTo(map);
}
new EventSource('/api/stream').addEventListener('new-reading', e => plot(JSON.parse(e.data)));
// door ranges
const doors = [
...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),
];
// NOAA heat‐index formula
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.8)`;
}
function createGrid() {
const row = document.getElementById('dock-row');
doors.forEach(d => {
const sq = document.createElement('div');
sq.className = 'dock-square';
sq.dataset.door = d;
row.appendChild(sq);
});
}
// apply a new reading to its square
function colorize(door, hi) {
const sq = document.querySelector(`.dock-square[data-door="${door}"]`);
if (!sq) return;
sq.style.background = getColorFromHI(hi);
}
async function init() {
createGrid();
// initial fill
const all = await fetch('/api/readings').then(r=>r.json());
// pick latest per door
const latest = {};
all.forEach(r => { latest[r.dockDoor] = r.heatIndex; });
Object.entries(latest).forEach(([door, hi]) => colorize(door, hi));
// subscribe SSE
const es = new EventSource('/api/stream');
es.addEventListener('new-reading', e => {
const { dockDoor, heatIndex } = JSON.parse(e.data);
colorize(dockDoor, heatIndex);
});
}
document.addEventListener('DOMContentLoaded', init);

30
public/scripts/input.js
View File

@ -1,13 +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 data = {
dockDoor: +document.getElementById('dockDoor').value,
timestamp: document.getElementById('timestamp').value,
temperature: +document.getElementById('temperature').value,
humidity: +document.getElementById('humidity').value,
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(data)
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload)
}).then(res => res.json()).then(() => form.reset());
});
});

56
public/styles.css
View File

@ -1,3 +1,5 @@
/* Favicon support (no CSS needed) */
/* BINS Project Header & Buttons */
.main-header {
background-color: #232F3E;
@ -7,37 +9,55 @@
position: fixed; top: 0; left: 0; right: 0;
width: 100%; z-index: 1000;
}
.logo { height: 40px; margin-right: 1rem; }
.header-title { color: #fff; font-size: 1.2rem; font-weight: bold; margin-right: auto; }
.nav-btn {
background-color: #FF9900; color: #111;
border: none; border-radius: 5px;
padding: 0.5rem 1rem; margin-left: 0.5rem;
cursor: pointer; font-weight: bold;
.main-header .logo {
height: 40px;
margin-right: 1rem;
}
.main-header .header-title {
color: #fff;
font-size: 1.2rem;
font-weight: bold;
margin-right: auto;
}
.main-header .nav-btn {
background-color: #FF9900;
color: #111;
border: none;
border-radius: 5px;
padding: 0.5rem 1rem;
margin-left: 0.5rem;
cursor: pointer;
font-weight: bold;
}
.main-header .nav-btn:hover {
background-color: #e48f00;
}
.nav-btn:hover { background-color: #e48f00; }
.page-container {
margin-top: 70px;
width: 95%; margin: 0 auto;
padding: 1rem;
background-color: #fff; border-radius: 6px;
background-color: #fff;
border-radius: 6px;
}
.form-input, .form-textarea {
width: 90%; margin: 0.5rem auto;
display: block; padding: 0.5rem;
border: 1px solid #ccc; border-radius: 6px;
width: 90%; margin: 0.5rem auto; display: block;
padding: 0.5rem; border: 1px solid #ccc; border-radius: 6px;
}
.big-button {
background-color: #28a745; color: white;
padding: 0.75rem 1.5rem;
border: none; border-radius: 6px;
padding: 0.75rem 1.5rem; border: none; border-radius: 6px;
cursor: pointer; font-size: 1rem;
margin: 1rem auto; display: block;
}
.big-button:hover { background-color: #218838; }
.hidden { display: none; }
/* Existing styles */
body { font-family: Arial, sans-serif; margin: 20px; }
#heatmap-container { height: 500px; width: 100%; }
canvas { max-width: 600px; margin: 20px auto; display: block; }
/* Diagram styling */
.diagram-container { width: 95%; margin: 0 auto; text-align: center; }
.dock-row { display: grid; grid-template-columns: repeat(83, 1fr); gap: 4px; margin-bottom: 8px; }
.dock-square { width: 100%; padding-top: 100%; position: relative; background: #ddd; border-radius: 2px; }
.dock-square::after { content: attr(data-door); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.6); color: #333; }
.warehouse { width: 95%; height: 200px; margin: 0 auto; background: #ccc; border-radius: 6px; }
/* Existing element styles */
body { font-family: Arial, sans-serif; margin: 20px; }

13
public/trends.html
View File

@ -3,17 +3,18 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="styles.css">
<title>Trend Graphs</title>
<title>| Fuego - Heat Tracker</title>
</head>
<body>
<header class="main-header">
<img src="/images/logo.png" alt="Company Logo" class="logo">
<span class="header-title">Temperature & Heat Index Trends</span>
<button class="nav-btn" onclick="window.location.href='/input.html'">Log Reading</button>
<button class="nav-btn" onclick="window.location.href='/heatmap.html'">Heat Map</button>
<button class="nav-btn" onclick="window.location.href='/trends.html'">Trends</button>
<img src="/image/logo.png" alt="Amazon Logo" class="logo">
<span class="header-title">| Fuego - Heat Tracker</span>
<button class="nav-btn" onclick="location.href='/input.html'">Log Reading</button>
<button class="nav-btn" onclick="location.href='/heatmap.html'">Heat Map</button>
<button class="nav-btn" onclick="location.href='/trends.html'">Trends</button>
</header>
<div class="page-container">

124
server.js
View File

@ -1,25 +1,40 @@
require('dotenv').config();
const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const bodyParser = require('body-parser');
const path = require('path');
const knex = require('knex');
const axios = require('axios');
// Initialize MariaDB connection via Knex
const db = knex({
client: process.env.DB_CLIENT,
connection: {
host: process.env.DB_HOST,
port: process.env.DB_PORT,
user: process.env.DB_USER,
password: process.env.DB_PASSWORD,
database: process.env.DB_NAME
}
});
const app = express();
const PORT = process.env.PORT || 3000;
const slackWebhook = process.env.SLACK_WEBHOOK_URL;
// Initialize SQLite database
const db = new sqlite3.Database('./readings.db');
db.serialize(() => {
db.run(`
CREATE TABLE IF NOT EXISTS readings (
id INTEGER PRIMARY KEY AUTOINCREMENT,
dockDoor INTEGER,
timestamp TEXT,
temperature REAL,
humidity REAL,
heatIndex REAL
)
`);
});
// Create table if not exists, now with direction
(async () => {
if (!await db.schema.hasTable('readings')) {
await db.schema.createTable('readings', table => {
table.increments('id').primary();
table.integer('dockDoor');
table.string('direction');
table.timestamp('timestamp');
table.float('temperature');
table.float('humidity');
table.float('heatIndex');
});
}
})();
// Compute heat index (NOAA formula)
function computeHeatIndex(T, R) {
@ -30,11 +45,18 @@ function computeHeatIndex(T, R) {
return Math.round(HI * 100) / 100;
}
// Middleware & static
// Determine direction based on door number
function getDirection(door) {
door = Number(door);
if (door >= 124 && door <= 138) return 'Inbound';
if (door >= 142 && door <= 201) return 'Outbound';
if (door >= 202 && door <= 209) return 'Inbound';
return 'Unknown';
}
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'public')));
// SSE clients
let clients = [];
app.get('/api/stream', (req, res) => {
res.set({ 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', Connection: 'keep-alive' });
@ -47,38 +69,58 @@ function broadcast(event, data) {
clients.forEach(res => res.write(payload));
}
// APIs
app.post('/api/readings', (req, res) => {
const { dockDoor, timestamp, temperature, humidity } = req.body;
const heatIndex = computeHeatIndex(temperature, humidity);
db.run(
`INSERT INTO readings (dockDoor, timestamp, temperature, humidity, heatIndex) VALUES (?, ?, ?, ?, ?)`,
[dockDoor, timestamp, temperature, humidity, heatIndex],
function(err) {
if (err) return res.status(500).json({ error: err.message });
const reading = { id: this.lastID, dockDoor, timestamp, temperature, humidity, heatIndex };
broadcast('new-reading', reading);
res.json(reading);
app.post('/api/readings', async (req, res) => {
try {
const { inbound, outbound } = req.body; // each: {dockDoor,temperature,humidity}
const timestamp = new Date();
const entries = [inbound, outbound].map(r => {
const direction = getDirection(r.dockDoor);
const heatIndex = computeHeatIndex(r.temperature, r.humidity);
return { ...r, direction, timestamp, heatIndex };
});
// Insert both
const ids = await db('readings').insert(entries);
const saved = entries.map((e, i) => ({ id: ids[i], ...e }));
// Broadcast and respond
saved.forEach(reading => broadcast('new-reading', reading));
// Slack notification with both
if (slackWebhook) {
const textLines = saved.map(r =>
`Door *${r.dockDoor}* (${r.direction}) – Temp: ${r.temperature}°F, Humidity: ${r.humidity}%, HI: ${r.heatIndex}`
);
await axios.post(slackWebhook, { text: 'New dual readings:\n' + textLines.join('\n') });
}
);
res.json(saved);
} catch (err) {
console.error('Error saving readings or sending Slack:', err);
res.status(500).json({ error: err.message });
}
});
app.get('/api/readings', (req, res) => {
db.all(`SELECT * FROM readings ORDER BY timestamp ASC`, (err, rows) => {
if (err) return res.status(500).json({ error: err.message });
app.get('/api/readings', async (req, res) => {
try {
const rows = await db('readings').orderBy('timestamp', 'asc');
res.json(rows);
});
} catch (err) {
res.status(500).json({ error: err.message });
}
});
app.get('/api/export', (req, res) => {
db.all(`SELECT * FROM readings ORDER BY timestamp ASC`, (err, rows) => {
if (err) return res.status(500).send(err.message);
app.get('/api/export', async (req, res) => {
try {
const rows = await db('readings').orderBy('timestamp', 'asc');
res.setHeader('Content-disposition', 'attachment; filename=readings.csv');
res.set('Content-Type', 'text/csv');
res.write('id,dockDoor,timestamp,temperature,humidity,heatIndex\n');
rows.forEach(r => res.write(`${r.id},${r.dockDoor},${r.timestamp},${r.temperature},${r.humidity},${r.heatIndex}\n`));
res.write('id,dockDoor,direction,timestamp,temperature,humidity,heatIndex\n');
rows.forEach(r =>
res.write(`${r.id},${r.dockDoor},${r.direction},${r.timestamp},${r.temperature},${r.humidity},${r.heatIndex}\n`)
);
res.end();
});
} catch (err) {
res.status(500).send(err.message);
}
});
app.listen(PORT, () => console.log(`Server running on http://localhost:${PORT}`));
app.listen(PORT, () => console.log(`Server running on http://localhost:${PORT}`));