hestia/www/views/index.html

177 lines
7.4 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Hestia Web Portal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/main.css">
</head>
<body onload="refreshData()" class="container">
<script>
// Get the config file
const config = <%- config %>;
console.log(<%- config %>);
</script>
<%- include('trial.html') -%>
<div id="title" class="text-center mb-4">
<a href='./'>Hestia Web Portal</a>
</div>
<div id="status" class="row">
<!--
| Igniter | rows[0].cells[1]
| Exhaust | rows[1].cells[1]
| Auger | rows[2].cells[1]
| Feed Rate | rows[3].cells[1]
-->
<table id="status-table" class="table table-bordered col-sm-12 col-md-6">
<tr>
<td>Igniter</td>
<td></td>
</tr>
<tr>
<td>Exhaust</td>
<td></td>
</tr>
<tr>
<td>Auger</td>
<td></td>
</tr>
<tr>
<td>Feed Rate</td>
<td></td>
</tr>
</table>
</div>
<div class="controls-container">
<form action="/" method="post">
<!-- Start | Shutdown | Reload Settings -->
<div class="button-container d-flex justify-content-between">
<input class="btn btn-outline-secondary" type="submit" id="igniter-on" value="Enable Igniter" name="igniterOn">
<input class="btn btn-outline-secondary" type="submit" id="igniter-off" value="Disable Igniter" name="igniterOff">
</div>
<div class="button-container d-flex justify-content-between">
<input class="btn btn-outline-secondary" type="submit" id="exhaust-on" value="Enable Exhaust" name="exhaustOn">
<input class="btn btn-outline-secondary" type="submit" id="exhaust-off" value="Disable Exhaust" name="exhaustOff">
</div>
<div class="button-container d-flex justify-content-between">
<input class="btn btn-outline-secondary" type="submit" id="auger-on" value="Enable Auger" name="augerOn">
<input class="btn btn-outline-secondary" type="submit" id="auger-off" value="Disable Auger" name="augerOff">
</div>
<!-- Set feed rates -->
<div class="form-group">
<label for="feedRate">Feed Rate: </label>
<select name="feedRate" class="form-control" id="feed-rate-select">
<option value="500">Low</option>
<option value="625">Medium-Low</option>
<option value="750">Medium</option>
<option value="875">Medium-High</option>
<option value="1000">High</option>
</select>
</div>
<div class="button-container d-flex justify-content-end">
<input class="btn btn-outline-secondary" type="submit" id="reload" value="Set Feed Rate" name="reload">
</div>
</form>
</div>
<div class="text-center my-4">
<img src="./dancing_jesus.gif" class="img-fluid">
</div>
<div class="controls-container">
<form action="/" method="POST">
<input class="btn btn-danger" type="submit" id="quit" value="Quit!!" name="quit">
</form>
</div>
<!-- <script src="./main.js"></script> -->
<script>
function sleep(ms) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, ms);
});
}
function readJSON(path) {
var request = new XMLHttpRequest();
request.open("GET", path, false);
request.send(null)
var JSONObj = JSON.parse(request.responseText);
return JSONObj;
}
function parseStatus(data) {
switch (data) {
case "0":
return "Off";
break;
case "1":
return "On";
break
default:
return "Error: " + data;
break;
}
}
function refreshData() {
// const log = document.getElementById('log-area');
// log.contentWindow.location.reload();
// sleep(100).then(() => {
// document.getElementById('log-area').contentWindow.scrollTo(0, 9999999999);
// });
// Get the elements we need to update
const statusTable = document.getElementById('status-table');
const igniterStatus = statusTable.rows[0].cells[1];
const exhaustStatus = statusTable.rows[1].cells[1];
const augerStatus = statusTable.rows[2].cells[1];
const feedRate = statusTable.rows[3].cells[1];
const feedRateSelect = document.getElementById('feed-rate-select');
// console.log(config);
igniterStatus.innerHTML = parseStatus(config.status.igniter);
exhaustStatus.innerHTML = parseStatus(config.status.exhaust);
augerStatus.innerHTML = parseStatus(config.status.auger);
switch (config.intervals.augerOn) {
case '500':
feedRate.innerHTML = 'Low';
feedRateSelect.selectedIndex = 0;
break;
case '625':
feedRate.innerHTML = 'Medium-Low';
feedRateSelect.selectedIndex = 1;
break;
case '750':
feedRate.innerHTML = 'Medium';
feedRateSelect.selectedIndex = 2;
break;
case '875':
feedRate.innerHTML = 'Medium-High';
feedRateSelect.selectedIndex = 3;
break;
case '1000':
feedRate.innerHTML = 'High';
feedRateSelect.selectedIndex = 4;
break;
default:
feedRate.innerHTML = 'Unknown';
break;
}
feedRate.value = config.intervals.augerOn;
};
</script>
</body>
</html>