78 lines
3.2 KiB
HTML
78 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<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 Dual Readings</title>
|
||
</head>
|
||
<body>
|
||
<header class="main-header">
|
||
<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 Inbound & Outbound Readings</h1>
|
||
<form id="reading-form">
|
||
<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>
|
||
<script>
|
||
// make sure this runs *after* your form is in the DOM
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const form = document.getElementById('readingForm');
|
||
form.addEventListener('submit', async e => {
|
||
e.preventDefault();
|
||
// grab your values
|
||
const inbound_dockDoor = +document.querySelector('input[name="inbound_dockDoor"]').value;
|
||
const inbound_temperature = +document.querySelector('input[name="inbound_temperature"]').value;
|
||
const inbound_humidity = +document.querySelector('input[name="inbound_humidity"]').value;
|
||
const outbound_dockDoor = +document.querySelector('input[name="outbound_dockDoor"]').value;
|
||
const outbound_temperature = +document.querySelector('input[name="outbound_temperature"]').value;
|
||
const outbound_humidity = +document.querySelector('input[name="outbound_humidity"]').value;
|
||
|
||
const payload = {
|
||
inbound_dockDoor,
|
||
inbound_temperature,
|
||
inbound_humidity,
|
||
outbound_dockDoor,
|
||
outbound_temperature,
|
||
outbound_humidity
|
||
};
|
||
console.log('👉 Sending payload:', payload);
|
||
|
||
try {
|
||
const resp = await fetch('/api/readings', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload)
|
||
});
|
||
const data = await resp.json();
|
||
console.log('✅ Server response:', data);
|
||
} catch (err) {
|
||
console.error('❌ Fetch error:', err);
|
||
}
|
||
});
|
||
});
|
||
</script>
|