http-server-status/template/index.html

102 lines
3.8 KiB
HTML
Raw Normal View History

2021-09-20 13:45:01 +00:00
<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">
2021-09-20 14:27:05 +00:00
<div class="card-header" id="ramtitle">
2021-09-20 13:45:01 +00:00
Check RAM
</div>
<div class="card-body">
2021-09-20 14:27:05 +00:00
<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>
2021-09-20 13:45:01 +00:00
</div>
</div>
</div>
</div>
</div>
<script>
function getData() {
$.ajax({
url: "/data.json",
}).done(function(data) {
console.log("ajax done")
2021-09-20 14:09:52 +00:00
handleData(data)
2021-09-20 13:45:01 +00:00
}).always(function(data) {
2021-09-20 14:09:52 +00:00
if(data.responseText != "") {
handleData(data)
}
2021-09-20 13:45:01 +00:00
});
}
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");
}
2021-09-20 14:27:05 +00:00
//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>');
2021-09-20 13:45:01 +00:00
console.log(keys)
console.log(o.Checks["Disc space"].success)
2021-09-20 14:27:05 +00:00
setTimeout("getData();", 10000);
2021-09-20 13:45:01 +00:00
}
getData();
</script>
</body>
</html>