hestia/www/views/index.html

177 lines
7.4 KiB
HTML
Raw Permalink Normal View History

2022-12-20 20:17:30 +00:00
<!DOCTYPE html>
<html>
<head>
2022-12-21 19:16:29 +00:00
<title>Hestia Web Portal</title>
2023-01-10 18:40:44 +00:00
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
2023-01-10 18:17:06 +00:00
<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>
2023-01-10 18:42:14 +00:00
<link rel="stylesheet" href="/main.css">
2022-12-20 20:17:30 +00:00
</head>
<body onload="refreshData()" class="container">
2023-01-23 03:42:23 +00:00
<script>
// Get the config file
const config = <%- config %>;
console.log(<%- config %>);
</script>
2022-12-20 20:53:25 +00:00
<%- include('trial.html') -%>
<div id="title" class="text-center mb-4">
<a href='./'>Hestia Web Portal</a>
</div>
<div id="status" class="row">
2023-01-07 02:53:54 +00:00
<!--
2023-11-17 15:31:01 +00:00
| Igniter | rows[0].cells[1]
| Exhaust | rows[1].cells[1]
| Auger | rows[2].cells[1]
2023-11-17 15:18:40 +00:00
| Feed Rate | rows[3].cells[1]
2023-01-07 02:53:54 +00:00
-->
<table id="status-table" class="table table-bordered col-sm-12 col-md-6">
2023-01-07 02:53:54 +00:00
<tr>
2023-11-17 15:54:00 +00:00
<td>Igniter</td>
<td></td>
</tr>
<tr>
<td>Exhaust</td>
<td></td>
</tr>
<tr>
2023-01-07 02:53:54 +00:00
<td>Auger</td>
<td></td>
</tr>
<tr>
<td>Feed Rate</td>
<td></td>
</tr>
</table>
</div>
2023-01-07 02:29:28 +00:00
<div class="controls-container">
2022-12-21 02:12:22 +00:00
<form action="/" method="post">
2022-12-20 20:17:30 +00:00
<!-- Start | Shutdown | Reload Settings -->
<div class="button-container d-flex justify-content-between">
2023-11-14 23:06:09 +00:00
<input class="btn btn-outline-secondary" type="submit" id="igniter-off" value="Disable Igniter" name="igniterOff">
2023-11-17 16:00:50 +00:00
<input class="btn btn-outline-secondary" type="submit" id="igniter-on" value="Enable Igniter" name="igniterOn">
2023-11-17 15:31:01 +00:00
</div>
<div class="button-container d-flex justify-content-between">
2023-11-14 23:06:09 +00:00
<input class="btn btn-outline-secondary" type="submit" id="exhaust-off" value="Disable Exhaust" name="exhaustOff">
2023-11-17 16:00:50 +00:00
<input class="btn btn-outline-secondary" type="submit" id="exhaust-on" value="Enable Exhaust" name="exhaustOn">
2022-12-20 20:17:30 +00:00
</div>
2023-11-17 15:31:01 +00:00
<div class="button-container d-flex justify-content-between">
<input class="btn btn-outline-secondary" type="submit" id="auger-off" value="Disable Auger" name="augerOff">
2023-11-17 16:00:50 +00:00
<input class="btn btn-outline-secondary" type="submit" id="auger-on" value="Enable Auger" name="augerOn">
2023-11-17 15:31:01 +00:00
</div>
2022-12-20 20:17:30 +00:00
<!-- Set feed rates -->
<div class="form-group">
<label for="feedRate">Feed Rate: </label>
2023-01-23 03:42:23 +00:00
<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">
2023-01-22 16:27:58 +00:00
<input class="btn btn-outline-secondary" type="submit" id="reload" value="Set Feed Rate" name="reload">
2023-01-07 02:33:12 +00:00
</div>
2022-12-20 20:17:30 +00:00
</form>
</div>
2023-11-15 01:07:48 +00:00
<div class="text-center my-4">
<img src="./dancing_jesus.gif" class="img-fluid">
2023-11-15 01:07:48 +00:00
</div>
2023-01-07 02:29:28 +00:00
<div class="controls-container">
<form action="/" method="POST">
2023-11-14 23:06:09 +00:00
<input class="btn btn-danger" type="submit" id="quit" value="Quit!!" name="quit">
2023-01-07 02:29:28 +00:00
</form>
</div>
2023-01-23 03:42:23 +00:00
<!-- <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');
2023-11-17 15:57:37 +00:00
const igniterStatus = statusTable.rows[0].cells[1];
const exhaustStatus = statusTable.rows[1].cells[1];
const augerStatus = statusTable.rows[2].cells[1];
2023-11-17 15:18:40 +00:00
const feedRate = statusTable.rows[3].cells[1];
2023-01-23 03:42:23 +00:00
const feedRateSelect = document.getElementById('feed-rate-select');
// console.log(config);
2023-11-17 15:18:40 +00:00
igniterStatus.innerHTML = parseStatus(config.status.igniter);
exhaustStatus.innerHTML = parseStatus(config.status.exhaust);
2023-11-17 15:54:00 +00:00
augerStatus.innerHTML = parseStatus(config.status.auger);
2023-01-23 03:42:23 +00:00
switch (config.intervals.augerOn) {
case '500':
2023-01-23 03:42:23 +00:00
feedRate.innerHTML = 'Low';
feedRateSelect.selectedIndex = 0;
break;
case '625':
feedRate.innerHTML = 'Medium-Low';
2023-01-23 03:42:23 +00:00
feedRateSelect.selectedIndex = 1;
break;
case '750':
feedRate.innerHTML = 'Medium';
feedRateSelect.selectedIndex = 2;
break;
case '875':
feedRate.innerHTML = 'Medium-High';
feedRateSelect.selectedIndex = 3;
break;
2023-01-23 03:42:23 +00:00
case '1000':
feedRate.innerHTML = 'High';
feedRateSelect.selectedIndex = 4;
2023-01-23 03:42:23 +00:00
break;
default:
feedRate.innerHTML = 'Unknown';
break;
}
feedRate.value = config.intervals.augerOn;
};
</script>
2022-12-20 20:17:30 +00:00
</body>
</html>