Viewing file:  details.php (4.78 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
<style>
#m_image{
width:99%;
height:400px;
}
#overlay {
width: 94%;
text-align: center;
height: 100px;
top: 250px;
position: fixed;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 27px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
@media only screen and (min-width: 600px) {
.image{
text-align: center;
}
#m_image{
width:50%;
height: 400px;
}
#overlay{
width:80%;
}
#text{
font-size: 50px;
}
}
@media only screen and (max-width: 576px) and (min-width: 400px) {
#overlay{
width:94%;
}
}
tr{
height: 30px;
font-weight: 500;
font-size: 26px;
}
.left{
text-align: right;
font-weight: 600;
}
</style>
</head>
<body>
<div class="container">
<h3 style="padding:20px;">Device Details</h3>
<div class="image">
<img id="m_image" src="https://www.goodknight.in/wp-content/uploads/2017/09/500x500-new-refill-old-machine-.png" alt="">
</div>
<div id="overlay" onclick="off()">
<div id="text">25% Remainig</div>
</div>
<div class="card data_row" >
<table style="width:100%; margin-left:5px;">
<tr>
<td class="left" style="width:40%;">Device Status</td>
<td style="width:4%;"> :</td>
<td class="right" style="width:35%;"><span id="status">None</span></td>
</tr>
<tr>
<td class="left" style="width:40%;">Total Used</td>
<td style="width:4%;"> :</td>
<td class="right" style="width:35%;"><span id="total">000 hours</span></td>
</tr>
<tr>
<td class="left" style="width:40%;">Remaining</td>
<td style="width:4%;"> :</td>
<td class="right" style="width:35%;"><span id="remaining"> 000 hours</span></td>
</tr>
</table>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function() {
var url=window.location;
var url_string = new URL(url).searchParams.get("status");
console.log(url_string);
if (url_string=="on") {
$("#status").text("On");
$("#status").css("color", "#17d17a");
}else{
$("#status").text("Off");
$("#status").css("color", "#000");
}
var total=240*60;
$.ajax({
type: 'get',
url: 'http://128.199.176.47:3030/good-knight/total',
success: function (data, status, xhr) {
$("#total").text(timeConvert(data.count));
var rem=total-data.count;
$("#remaining").text(timeConvert(rem));
var per_rem=(rem/14400)*100;
$("#text").text(per_rem.toFixed(2)+"% Remaining");
}
});
function timeConvert(n) {
var num = n;
var hours = (num / 60);
var rhours = Math.floor(hours);
var minutes = (hours - rhours) * 60;
var rminutes = Math.round(minutes);
return rhours + "h:" + rminutes + "m";
}
});
</script>
</html>
|