102 lines
No EOL
3.8 KiB
HTML
102 lines
No EOL
3.8 KiB
HTML
<html>
|
|
<head>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h1>HTTP Status Page</h1>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header" id="hddtitle">
|
|
Check HDD
|
|
</div>
|
|
<div class="card-body" id="hddpercent">
|
|
<p class="card-text">
|
|
HDD 1:
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
|
|
</div>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header" id="ramtitle">
|
|
Check RAM
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text" id="rampercent">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function getData() {
|
|
$.ajax({
|
|
url: "/data.json",
|
|
}).done(function(data) {
|
|
console.log("ajax done")
|
|
handleData(data)
|
|
}).always(function(data) {
|
|
if(data.responseText != "") {
|
|
handleData(data)
|
|
}
|
|
});
|
|
}
|
|
|
|
function handleData(data) {
|
|
console.log("PARSE")
|
|
o = JSON.parse(data)
|
|
//Disc space
|
|
console.log(o)
|
|
|
|
let html = ""
|
|
$("#hddpercent").empty()
|
|
keys = Object.keys(o.Checks["Disc space"].data)
|
|
for(var i = 0; i < keys.length; i++) {
|
|
name = keys[i]
|
|
value = o.Checks["Disc space"].data[keys[i]]
|
|
$("#hddpercent").append('<b>'+name+'</b><br><div class="progress"><div class="progress-bar" role="progressbar" style="width: '+value+'%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">' +value+ '%</div></div>');
|
|
}
|
|
if (o.Checks["Disc space"].success) {
|
|
$("#hddtitle").addClass("bg-success");
|
|
$("#hddtitle").removeClass("bg-error");
|
|
} else {
|
|
$("#hddtitle").addClass("bg-danger");
|
|
$("#hddtitle").removeClass("bg-success");
|
|
}
|
|
|
|
//ram
|
|
|
|
if (o.Checks["Memory usage"].success) {
|
|
$("#ramtitle").addClass("bg-success");
|
|
$("#ramtitle").removeClass("bg-error");
|
|
} else {
|
|
$("#ramtitle").addClass("bg-danger");
|
|
$("#ramtitle").removeClass("bg-success");
|
|
}
|
|
|
|
$("#rampercent").empty()
|
|
$("#rampercent").append('<b>Ram</b><br><div class="progress"><div class="progress-bar" role="progressbar" style="width: '+o.Checks["Memory usage"].data["ram"]+'%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">' +o.Checks["Memory usage"].data["ram"]+ '%</div></div>');
|
|
|
|
|
|
console.log(keys)
|
|
console.log(o.Checks["Disc space"].success)
|
|
|
|
|
|
setTimeout("getData();", 10000);
|
|
}
|
|
getData();
|
|
</script>
|
|
</body>
|
|
</html> |