Initial commit

This commit is contained in:
Trevor Merritt 2025-10-27 07:57:59 -04:00
commit 0e7cff2621
5 changed files with 292 additions and 0 deletions

38
api.js Normal file
View File

@ -0,0 +1,38 @@
var api = {
init: function (base_url) {
this.endpoint = base_url;
// console.log("API Init with base_url = " + base_url);
},
load_workers: function () {
console.log("load workers");
this.load_from_api("/1/workers", function (data, textStatus, jqXHR) {
console.log("Workers");
console.log(data);
});
},
load_status: function () {
console.log("load status");
this.load_from_api("/api.json", function (data, textStatus, jqXHR) {
console.log("Status");
console.log(data);
});
},
load_from_api: function (endpoint, callback) {
var headers = {};
headers.Authorization = "Bearer " + app_state.api_token;
const url = this.endpoint + endpoint;
$.ajax({
method: "get",
url: url,
headers: headers,
})
.done(function (data, textStatus, jqXHR) {
console.log("Endpoint " + endpoint + " result " + jqXHR.status);
callback(data, textStatus, jqXHR);
})
.fail(function (jqXHR, textStatus) {
console.log("Failed -> " + jqXHR.status + "/" + textStatus);
});
},
endpoint: null,
};

27
app.js Normal file
View File

@ -0,0 +1,27 @@
var app = {
init: function () {
console.log("Init App");
app_state.init();
ui.init();
api.init(app_state.api_endpoint);
this.refresh();
},
refresh: function () {
console.log("refresh " + Date.now());
api.load_status();
this.poll_timer = setInterval(this.refresh, 5000);
},
poll_toggle: function () {
console.log("POLL TIMER = " + this.poll_timer);
if (this.poll_timer == null) {
console.log("poll_toggle triggered " + Date.now());
this.poll_timer = setInterval(this.refresh, 5000);
app_state.should_poll = true;
} else {
console.log("disabling timer");
this.poll_timer = null;
app_state.should_poll = false;
}
},
poll_timer: null,
};

19
app_state.js Normal file
View File

@ -0,0 +1,19 @@
var app_state = {
api_endpoint: "http://198.46.176.136:44444",
api_token: "thisisthetoken",
should_poll: false,
show_config_form: false,
init: function () {
this.load_state();
},
load_state: function () {
console.log("Loading state");
this.api_endpoint = localStorage.getItem("endpoint");
this.api_token = localStorage.getItem("token");
},
save_state: function () {
console.log("Saving state");
localStorage.setItem("endpoint", this.api_endpoint);
localStorage.setItem("token", this.api_token);
},
};

175
index.html Normal file
View File

@ -0,0 +1,175 @@
<!DOCTYPE html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
crossorigin="anonymous"></script>
<script src="api.js"></script>
<script src="ui.js"></script>
<script src="app_state.js"></script>
<script src="app.js"></script>
<style>
/*
* Custom CSS
*/
:root {
--bs-body-bg: var(--bs-gray-100);
}
</style>
</head>
<body>
<div class="container">
<div class="container" >
<input type="button" value="config" onclick="ui.toggle_configuration_form()"></div>
<!-- Configuration Form -->
<form style="margin-top: 12px;" id="configuration_form">
<div class="form-group">
<label for="address">API address</label>
<input type="text" class="form-control" id="api_endpoint_field" required="" value=""
onchange="ui.address_changed_handler()">
</div>
<div class="form-group">
<label for="api_token_field">Access Token</label>
<input type="password" class="form-control" id="api_token_field" onchange="ui.token_changed_handler()">
</div>
<div class="form-group">
<label for="poll_toggle_field">Toggle Polling</label>
<input type="checkbox" id="poll_toggle_field" onchange="ui.poll_changed_handler()" checked="false">
</div>
</form>
<!-- summary -->
<div class="container">
<label for="memory_progress_bar">Memory: </label>
<span id="memory_text_view"></span >
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" id="memory_progress_bar" style="width: 0%"></div>
</div>
<label for="proxy_version">Proxy Version: </label>
<span id="proxy_version"></span>
</div>
<div>
<label for="proxy_restricted">Restricted Mode:</label>
<input type="checkbox" id="proxy_restricted">
</div>
<!-- Hash Rates -->
<div id="hash_rates">
<span id="hash_rates_1min"></span> |
<span id="hash_rates_10min"></span> |
<span id="hash_rates_60min"></span> |
<span id="hash_rates_12h"></span> |
<span id="hash_rates_24h"></span> |
</div>
<!-- Workers -->
<div>
<table id="workers" class="table table-striped">
<thead>
<tr>
<td scope="col">Name</td>
<td scope="col">CX</td>
<td scope="col">Shares</td>
<td scope="col">Hash Rate</td>
</tr>
</thead>
<tbody id="workers_body">
</tbody>
</table>
</div>
</div>
<script>
// Utility Functions
function truncateString(str, maxLength) {
if (str.length <= maxLength) {
return str; // Return original string if it's already within the limit
} else {
// Truncate the string and add an ellipsis
return str.slice(0, maxLength - 3) + "...";
}
}
function update_stored_token() {
console.log("Storing updated token.");
localStorage.setItem('token', $('#token').val());
}
function load_status() {
var headers = {};
const token = $('#token').val();
headers.Authorization = 'Bearer ' + token;
$('#endpoint').val("/2/summary");
$.ajax({
method: 'get',
url: $('#address').val() + $('#endpoint').val(),
headers: headers
})
.done(function(data, textStatus, jqXHR) {
const parsed = $.parseJSON(jqXHR.responseText);
// console.log(parsed);
let memory_percent = parsed.resources.memory.free / parsed.resources.memory.total;
let memory_string = parsed.resources.memory.free + "/" + parsed.resources.memory.total;
$('#memory_progress_bar').css("width", memory_percent + "%");
$('#memory_text_view').text(memory_string);
$('#proxy_version').text(parsed.version);
$('#proxy_restricted').val(parsed.restricted);
})
}
function load_workers() {
var headers = {};
const token = $('#token').val();
headers.Authorization = 'Bearer ' + token;
$("#endpoint").val("/1/workers");
$.ajax({
method: 'get',
url: $('#address').val() + $('#endpoint').val(),
headers: headers
})
.done(function (data, textStatus, jqXHR) {
$('#workers_body').innerHTML = "";
$('#result').text(jqXHR.responseText);
const parsed = $.parseJSON(jqXHR.responseText);
// console.log(parsed);
$('#hash_rates_1min').text(parsed.hashrate.total[0]);
$('#hash_rates_10min').text(parsed.hashrate.total[1]);
$('#hash_rates_60min').text(parsed.hashrate.total[2]);
$('#hash_rates_12h').text(parsed.hashrate.total[3]);
$('#hash_rates_24h').text(parsed.hashrate.total[4]);
parsed.workers.forEach(element => {
var builder = "<tr>";
// name
builder += "<td>" + truncateString(element[0], 20) + "</td>";
builder += "<td>" + element[2] + "</td>";
builder += "<td>" + element[3] + "/" + element[4] + "</td>";
builder += "<td>" + element[9] + "</td>";
builder += "</tr>";
$("#workers tbody").append(builder);
});
})
.fail(function (jqXHR, textStatus) {
console.log("failed -> " + jqXHR.status + " / " + textStatus);
})
}
$(function () {
console.log("Global Init Started...");
app.init();
console.log("...Global Init Completed.");
// api.init("http://198.46.176.136:44444");
// console.log("token = " + app_state.api_token);
// console.log("endpoint = " + app_state.api_endpoint);
api.load_workers();
})
</script>
</body>
</html>

33
ui.js Normal file
View File

@ -0,0 +1,33 @@
var ui = {
init: function () {
console.log("Init UI");
$("#api_endpoint_field").val(app_state.api_endpoint);
$("#api_token_field").val(app_state.api_token);
},
address_changed_handler: function () {
app_state.api_endpoint = $("#api_endpoint_field").val();
app_state.save_state();
console.log("Address changed -> " + app_state.api_endpoint);
},
token_changed_handler: function () {
app_state.api_token = $("#api_token_field").val();
app_state.save_state();
console.log("Token Changed -> " + app_state.api_token);
},
poll_changed_handler: function () {
console.log("toggle of poll changed." + Date.now());
app.poll_toggle();
},
toggle_configuration_form: function () {
if (app_state.show_config_form) {
console.log("hide the form");
app_state.show_config_form = false;
$("#configuration_form").css('display", "none');
} else {
console.log("display the form");
app_state.show_config_form = true;
$("#configuration_form").css("display", "inline");
}
console.log("toggle configuration form" + app_state.show_config_form);
},
};