root
158 lines
6.3 KiB
HTML
158 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Xterra Dashboard Simulator</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1>Xterra Dashboard</h1>
|
|
<div id="statusLine">RS-485: -- | WiFi: --</div>
|
|
</header>
|
|
|
|
<section id="dashboard" class="screen active">
|
|
<div class="big-card">
|
|
<h2>Battery</h2>
|
|
<p><span id="dashSoc">--</span>%</p>
|
|
<small><span id="dashRuntime">--</span> hr runtime</small>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div class="card"><h2>Fridge A</h2><p><span id="dashFridge1">--</span>°F</p></div>
|
|
<div class="card"><h2>Fridge B</h2><p><span id="dashFridge2">--</span>°F</p></div>
|
|
<div class="card"><h2>Rear Seat</h2><p><span id="dashRear">--</span>°F</p></div>
|
|
<div class="card"><h2>Outside</h2><p><span id="dashOutside">--</span>°F</p></div>
|
|
</div>
|
|
|
|
<div class="relay-row">
|
|
<div id="dashStarlink" class="relay-pill">Starlink: --</div>
|
|
<div id="dashFridgeRelay" class="relay-pill">Fridge: --</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="battery" class="screen">
|
|
<h2>Battery Detail</h2>
|
|
<div class="detail-list">
|
|
<div>SOC <strong><span id="batSoc">--</span>%</strong></div>
|
|
<div>Voltage <strong><span id="batVoltage">--</span> V</strong></div>
|
|
<div>Current <strong><span id="batCurrent">--</span> A</strong></div>
|
|
<div>Remaining <strong><span id="batRemaining">--</span> Ah</strong></div>
|
|
<div>Runtime <strong><span id="batRuntime">--</span> hr</strong></div>
|
|
<div>Battery Temp <strong><span id="batTemp">--</span>°F</strong></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="temps" class="screen">
|
|
<h2>Temperatures</h2>
|
|
<div class="grid">
|
|
<div class="card"><h2>Fridge Zone 1</h2><p><span id="tempFridge1">--</span>°F</p></div>
|
|
<div class="card"><h2>Fridge Zone 2</h2><p><span id="tempFridge2">--</span>°F</p></div>
|
|
<div class="card"><h2>Rear Seat</h2><p><span id="tempRear">--</span>°F</p></div>
|
|
<div class="card"><h2>Outside</h2><p><span id="tempOutside">--</span>°F</p></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="power" class="screen">
|
|
<h2>Power Control</h2>
|
|
<button onclick="toggleRelay('starlink')" id="starlinkBtn">Starlink</button>
|
|
<button onclick="toggleRelay('fridge')" id="fridgeBtn">Fridge</button>
|
|
</section>
|
|
|
|
<section id="system" class="screen">
|
|
<h2>System</h2>
|
|
<div class="detail-list">
|
|
<div>RS-485 <strong id="sysRs485">--</strong></div>
|
|
<div>WiFi <strong id="sysWifi">--</strong></div>
|
|
<div>WiFi Override <strong id="sysWifiOverride">--</strong></div>
|
|
</div>
|
|
<button onclick="enableWifi()">Enable WiFi 10 min</button>
|
|
</section>
|
|
</main>
|
|
|
|
<nav>
|
|
<button onclick="showScreen('dashboard')">Dashboard</button>
|
|
<button onclick="showScreen('battery')">Battery</button>
|
|
<button onclick="showScreen('temps')">Temps</button>
|
|
<button onclick="showScreen('power')">Power</button>
|
|
<button onclick="showScreen('system')">System</button>
|
|
</nav>
|
|
|
|
<script>
|
|
let relayState = {};
|
|
|
|
function showScreen(id) {
|
|
document.querySelectorAll('.screen').forEach(screen => {
|
|
screen.classList.remove('active');
|
|
});
|
|
document.getElementById(id).classList.add('active');
|
|
}
|
|
|
|
function onOff(value) {
|
|
return value ? 'ON' : 'OFF';
|
|
}
|
|
|
|
async function loadStatus() {
|
|
const res = await fetch('/status');
|
|
const data = await res.json();
|
|
|
|
relayState = data.relays;
|
|
|
|
document.getElementById('statusLine').textContent =
|
|
`RS-485: ${data.network.rs485_connected ? 'Connected' : 'Lost'} | WiFi: ${data.network.wifi_enabled ? 'Enabled' : 'Disabled'}`;
|
|
|
|
document.getElementById('dashSoc').textContent = data.battery.soc;
|
|
document.getElementById('dashRuntime').textContent = data.battery.runtime_hours;
|
|
document.getElementById('dashFridge1').textContent = data.temps.fridge_zone_1;
|
|
document.getElementById('dashFridge2').textContent = data.temps.fridge_zone_2;
|
|
document.getElementById('dashRear').textContent = data.temps.rear_seat;
|
|
document.getElementById('dashOutside').textContent = data.temps.outside;
|
|
document.getElementById('dashStarlink').textContent = `Starlink: ${onOff(data.relays.starlink)}`;
|
|
document.getElementById('dashFridgeRelay').textContent = `Fridge: ${onOff(data.relays.fridge)}`;
|
|
|
|
document.getElementById('batSoc').textContent = data.battery.soc;
|
|
document.getElementById('batVoltage').textContent = data.battery.voltage;
|
|
document.getElementById('batCurrent').textContent = data.battery.current;
|
|
document.getElementById('batRemaining').textContent = data.battery.remaining_ah;
|
|
document.getElementById('batRuntime').textContent = data.battery.runtime_hours;
|
|
document.getElementById('batTemp').textContent = data.battery.temperature_f;
|
|
|
|
document.getElementById('tempFridge1').textContent = data.temps.fridge_zone_1;
|
|
document.getElementById('tempFridge2').textContent = data.temps.fridge_zone_2;
|
|
document.getElementById('tempRear').textContent = data.temps.rear_seat;
|
|
document.getElementById('tempOutside').textContent = data.temps.outside;
|
|
|
|
document.getElementById('starlinkBtn').textContent = `Starlink: ${onOff(data.relays.starlink)}`;
|
|
document.getElementById('fridgeBtn').textContent = `Fridge: ${onOff(data.relays.fridge)}`;
|
|
|
|
document.getElementById('sysRs485').textContent = data.network.rs485_connected ? 'Connected' : 'Disconnected';
|
|
document.getElementById('sysWifi').textContent = data.network.wifi_enabled ? 'Enabled' : 'Disabled';
|
|
document.getElementById('sysWifiOverride').textContent = data.network.wifi_override_active ? 'Active' : 'Inactive';
|
|
}
|
|
|
|
async function toggleRelay(name) {
|
|
await fetch(`/relay/${name}`, {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({state: !relayState[name]})
|
|
});
|
|
|
|
loadStatus();
|
|
}
|
|
|
|
async function enableWifi() {
|
|
await fetch('/network/wifi', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({minutes: 10})
|
|
});
|
|
|
|
loadStatus();
|
|
}
|
|
|
|
loadStatus();
|
|
setInterval(loadStatus, 2000);
|
|
</script>
|
|
</body>
|
|
</html>
|