Viewing file:  smart.php (14.31 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>
.nav-link{
white-space: nowrap;
}
.nav::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.nav {
padding: 10px;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
#leftbox {
float:left;
width:25%;
text-align: center !important;
}
#middlebox{
float:left;
width:50%;
padding-top: 10px;
padding-left: 10px;
}
#rightbox{
float:right;
width:25%;
text-align: center !important;
}
.card{
/* width: 100%; width: 100%; border: 0px; cursor: pointer; background: 0 0; text-align: left; */
margin-bottom: 5px;
}
.tab_main{
margin-bottom: 10px;
padding-top: 30px;
padding-left: 12px;
}
.col-md-12{
padding: 0px 15px;
}
@media only screen and (min-width: 600px) {
.tab_main{
padding-left: 20px;
}
.col-md-12{
padding: 0px 30px;
}
}
a{
text-decoration: none;
}
.footer_row a{
color: black;
}
.footer_row a:active {
color: darkslategray;
}
.tooltip1 {
position: relative !important;
display: inline-block !important;
height: 100%;
}
.tooltip1 .tooltiptext {
visibility: hidden;
width: 120px !important;
background-color: black !important;
color: #fff !important;
text-align: center !important;
border-radius: 6px !important;
padding: 5px 0 !important;
position: absolute !important;
z-index: 1 !important;
max-height:35px;
top: 35% !important;
right: 110% !important;
}
.tooltip1 .tooltiptext::after {
content: "";
position: absolute !important;
top: 50% !important;
left: 100% !important;
margin-top: -5px !important;
border-width: 5px !important;
border-style: solid !important;
border-color: transparent black transparent transparent !important;
}
.tooltip1:hover .tooltiptext {
visibility: visible !important;
}
</style>
</head>
<body style="background-color: #ced4dacc;">
<div class="tab_main bg-light">
<h2>Haigreve Smart Home</h2>
<ul class="nav nav-pills mb-3 " id="pills-tab" role="tablist" style="width:100%; overflow-x: scroll; flex-wrap: nowrap;">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="all-device-tab" data-bs-toggle="pill" data-bs-target="#all-device" type="button" role="tab" aria-controls="all-device" aria-selected="true">All Device</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="living-tab" data-bs-toggle="pill" data-bs-target="#all-device" type="button" role="tab" aria-controls="living" aria-selected="false">Living Room</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="bed-tab" data-bs-toggle="pill" data-bs-target="#all-device" type="button" role="tab" aria-controls="bed" aria-selected="false">Bed Room</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="second_room-tab" data-bs-toggle="pill" data-bs-target="#all-device" type="button" role="tab" aria-controls="second_room" aria-selected="false">Second Room</button>
</li>
</ul>
</div>
<div class="col-md-12" style="min-height: 80%; margin-bottom: 100px;">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="all-device" role="tabpanel" aria-labelledby="all-device-tab" tabindex="0">
<div class="card" >
<div id = "boxes" style="padding: 10px;">
<div id = "leftbox">
<img width="90" height="80" src="https://www.goodknight.in/wp-content/uploads/2017/09/500x500-new-refill-old-machine-.png" alt="">
</div>
<div id = "middlebox">
<h6>Room No. 1</h6>
<span id="sp_text1">Turned Off</span>
<br>
<a class="details" href="#">Details</a>
</div>
<div id = "rightbox">
<button style="background: 0 0; border: 0;">
<span style="font-size: 56px;" class="power_button" id="power_button1"><i class="bi bi-power"></i></span>
</button>
</div>
</div>
</div>
<div class="card data_row" >
<div id = "boxes" style="padding: 10px;">
<div id = "leftbox">
<img width="90" height="80" src="https://www.goodknight.in/wp-content/uploads/2017/09/500x500-new-refill-old-machine-.png" alt="">
</div>
<div id = "middlebox">
<h6>Room No. 2</h6>
<span id="sp_text2">Turned Off</span>
<br>
<a class="details" href="#">Details</a>
</div>
<div id = "rightbox">
<button class="tooltip1" disabled style="background: 0 0; border: 0;">
<span class="tooltip1 tooltiptext">Demo button</span>
<span style="font-size: 56px;" class="power_button" id="power_button2" ><i class="bi bi-power"></i></span>
</button>
</div>
</div>
</div>
<div class="card data_row">
<div id = "boxes" style="padding: 10px;">
<div id = "leftbox">
<img width="90" height="80" src="https://www.goodknight.in/wp-content/uploads/2017/09/500x500-new-refill-old-machine-.png" alt="">
</div>
<div id = "middlebox">
<h6>Room No. 3</h6>
<span id="sp_text3">Turned Off</span>
<br>
<a class="details" href="#">Details</a>
</div>
<div id = "rightbox">
<button class="tooltip1" disabled style="background: 0 0; border: 0;">
<span class="tooltip1 tooltiptext">Demo button</span>
<span style="font-size: 56px;" class="power_button" id="power_button3"><i class="bi bi-power"></i></span>
</button>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="living" role="tabpanel" aria-labelledby="living-tab" tabindex="0">tab 2</div>
<div class="tab-pane fade" id="bed" role="tabpanel" aria-labelledby="bed-tab" tabindex="0">tab 3</div>
<div class="tab-pane fade" id="second_room" role="tabpanel" aria-labelledby="second_room-tab" tabindex="0">tab 4</div>
</div>
</div>
<div class="fixed-bottom bg-light">
<div class="card footer_row">
<div id = "boxes" style="padding: 10px;">
<div style="float: left; width: 33%; text-align: center;">
<a href="http://139.59.127.108:8080/good_knight/home.php" style="background: 0 0; border: 0;">
<span style="font-size: 20px;" ><i class="bi bi-grid-3x3-gap"></i><br>Dashboard</span>
</a>
</div>
<div style="float: left; width: 33%; text-align: center; border-radius:15px; background-color:#0709e7d4;">
<a href="#" style="background: 0 0; border: 0; color:white;">
<span style="font-size: 22px;"><i class="bi bi-house-door"></i><br>My Home</span>
</a>
</div>
<div style="float: left; width: 33%; text-align: center;">
<a href="#" style="background: 0 0; border: 0;">
<span style="font-size: 20px;"><i class="bi bi-person-circle"></i><br>Profile</span>
</a>
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function() {
$.ajax({
type: 'get',
url: 'http://128.199.176.47:3030/good-knight/check',
success: function (data, status, xhr) {
console.log(data.status);
if (data.status=="on") {
$("#sp_text1").text("Turned On");
$("#sp_text2").text("Turned On");
$("#sp_text3").text("Turned On");
$("#power_button1").css("color", "#17d17a");
$("#power_button2").css("color", "#17d17a");
$("#power_button3").css("color", "#17d17a");
}else{
$("#sp_text1").text("Turned Off");
$("#sp_text2").text("Turned Off");
$("#sp_text3").text("Turned Off");
$('#power_button1').css("color", "#000");
$('#power_button2').css("color", "#000");
$('#power_button3').css("color", "#000");
}
}
});
});
$(".card button").click(function(){
console.log("clicked");
var $this = $(this);
var power = $this.find('.power_button');
var power_text = $this.parent().parent().find("#middlebox").find("span");
// console.log(power_text.text());
if (power_text.text()=="Turned On") {
$.ajax({
type: 'post',
url: 'http://128.199.176.47:3030/good-knight/status-update',
data:{
command:"off"
},
success: function (data, status, xhr) {
$("#sp_text1").text("Turned Off");
$("#sp_text2").text("Turned Off");
$("#sp_text3").text("Turned Off");
$('#power_button1').css("color", "#000");
$('#power_button2').css("color", "#000");
$('#power_button3').css("color", "#000");
}
});
}else{
$.ajax({
type: 'post',
url: 'http://128.199.176.47:3030/good-knight/status-update',
data:{
command:"on"
},
success: function (data, status, xhr) {
power_text.text("Turned On");
$(power).css("color", "#17d17a");
// $("#sp_text1").text("Turned On");
// $("#sp_text2").text("Turned On");
// $("#sp_text3").text("Turned On");
// $("#power_button1").css("color", "#17d17a");
// $("#power_button2").css("color", "#17d17a");
// $("#power_button3").css("color", "#17d17a");
}
});
}
});
$(".details").click(function () {
var $this = $(this);
var power_text = $this.parent().find("span");
if (power_text.text()=="Turned On") {
window.location.href = "http://139.59.127.108:8080/good_knight/details.php?status="+'on';
}else{
window.location.href = "http://139.59.127.108:8080/good_knight/details.php?status="+'off';
}
})
</script>
</html>
|