http-server-status/template/index.html

86 lines
3.1 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">
<div class="card-header">
Check RAM
</div>
<div class="card-body">
<h5 class="card-title">Check ram</h5>
<p class="card-text">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")
}).always(function(data) {
console.log("ajax always")
handleData(data.responseText)
});
}
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");
}
console.log(keys)
console.log(o.Checks["Disc space"].success)
setTimeout("getData();", 2000);
}
getData();
</script>
</body>
</html>