|
<main id="app" class="bd-masthead" id="content" role="main">
<div class="container navbar-shift spacer-md">
<div class="dashhead">
<div class="dashhead-titles">
<h6 class="dashhead-subtitle">Automation System</h6>
<h3 class="dashhead-title">Overview </i></h3>
</div>
<div class="dashhead-toolbar">
</div>
</div>
<hr class="dashhead-line">
<div class="row spacer-sm">
<div class="col-sm-4">
<div class="statcard statcard-divided">
<div class="statcard-header">
<i class="fa fa-microchip icon-header" aria-hidden="true"></i>
<h3 class="statcard-number">ACTIVE</h3>
<span class="statcard-title">Automation Server</span>
</div>
<div class="statcard-content">
<dl class="row">
<dt class="col-sm-4">CPU</dt>
<dd class="col-sm-8">{{rpi_status.current_load}}</dd>
<dt class="col-sm-4">RAM</dt>
<dd class="col-sm-8">{{rpi_status.memory_usage}}</dd>
<dt class="col-sm-4 text-truncate">Uptime</dt>
<dd class="col-sm-8">{{rpi_status.uptime}}</dd>
</dl>
<div class="row spacer-sm">
<div class="col-12">
<button type="button" class="btn btn-outline-secondary btn-sm btn-block disabled"><i class="fa fa-refresh" aria-hidden="true"></i> Reboot Server</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="statcard statcard-divided">
<div class="statcard-header">
<i class="fa fa-wifi icon-header" aria-hidden="true"></i>
<h3 class="statcard-number" style="text-transform: uppercase;">{{wifi_routers_status.global}}</h3>
<span class="statcard-title">Wifi Routers</span>
</div>
<div class="statcard-content">
<dl class="row">
<dt class="col-sm-8">Number of devices</dt>
<dd class="col-sm-4">2</dd>
<dt class="col-sm-8">Router Main</dt>
<dd class="col-sm-4">{{wifi_routers_status.main_router}}</dd>
<dt class="col-sm-8 text-truncate">Repeater 1</dt>
<dd class="col-sm-4">{{wifi_routers_status.repeater_1}}</dd>
</dl>
<div class="row spacer-sm">
<div class="col-6">
<button type="button" v-on:click="restartRouter02()" class="btn btn-outline-secondary btn-sm btn-block"><i class="fa fa-refresh" aria-hidden="true"></i> Main Router</button>
</div>
<div class="col-6">
<button type="button" class="btn btn-outline-secondary btn-sm btn-block disabled"><i class="fa fa-refresh" aria-hidden="true"></i> Repeater 1</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="statcard statcard-divided">
<div class="statcard-header">
<i class="fa fa-wifi icon-header" aria-hidden="true"></i>
<h3 class="statcard-number" style="text-transform: uppercase;">{{wifi_routers_status.satelite}}</h3>
<span class="statcard-title">Sattelite Connection</span>
</div>
<div class="statcard-content">
<dl class="row">
<dt class="col-sm-8">Connection Status</dt>
<dd class="col-sm-4">Operacional</dd>
<dt class="col-sm-8">Bandwith (day)</dt>
<dd class="col-sm-4">0%</dd>
<dt class="col-sm-8 text-truncate">Bandwith (night)</dt>
<dd class="col-sm-4">15%</dd>
</dl>
<div class="row spacer-sm">
<div class="col-12">
<button type="button" v-on:click="restartRouter01()" class="btn btn-outline-secondary btn-sm btn-block"><i class="fa fa-refresh" aria-hidden="true"></i> Reconect</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row spacer-sm">
<div class="col-sm-4">
<div class="statcard">
<i class="fa fa-lightbulb-o icon-header" aria-hidden="true"></i>
<button type="button" class="btn btn-outline-secondary " v-on:click="switchLight01(false)" style="float: right; margin-top: 2px;">{{light01_btn}}</button>
<h3 class="statcard-number">{{light01}}</h3>
<span class="statcard-title">Light</span>
</div>
</div>
<div class="col-sm-4">
<div class="statcard">
<i class="fa fa-thermometer-quarter icon-header" aria-hidden="true"></i>
<h3 class="statcard-number">{{temperature_external}}</h3>
<span class="statcard-title">External Temperature</span>
</div>
</div>
<!-- <div class="col-sm-4">
<div class="statcard ">
<i class="fa fa-thermometer-half icon-header" aria-hidden="true"></i>
<h3 class="statcard-number">24ºC</h3>
<span class="statcard-title">Internal Temp.</span>
</div>
</div>
<div class="col-sm-4">
<div class="statcard ">
<i class="fa fa-tint icon-header" aria-hidden="true"></i>
<h3 class="statcard-number">60%</h3>
<span class="statcard-title">Humidity</span>
</div>
</div> -->
</div>
</div>
</main>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('/');
var http_post = function(url, data){
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(data));
}
var app = new Vue({
el: "#app",
data: {
temperature_external: "--",
light01 : "--",
light01_status : undefined,
light01_btn : "",
wifi_routers_status : {
global : "Unkown",
main_router : "--",
repeater_1 : "--",
satelite: "Unkown"
},
rpi_status : {
current_load : "--",
ram_used : "--",
ram_total : "--",
memory_usage : "--",
uptime : "--"
}
},
methods: {
switchLight01: function(){
var status;
if(app.light01_status == true){
status = false;
} else {
status = true;
}
http_post("/switch_relay", { code: "L01", status: status})
},
restartRouter01: function(){
http_post("/switch_relay", { code: "R01", status: true})
},
restartRouter02: function(){
http_post("/switch_relay", { code: "R02", status: true})
}
}
})
socket.on('temperature_external', function (data) {
var temp = Math.round( data.temperature * 10 ) / 10;
app.temperature_external = temp + "ºC";
});
socket.on('wifi_routers', function (data) {
console.log(data);
app.wifi_routers_status.satelite = data[0].status;
app.wifi_routers_status.main_router = data[1].status;
app.wifi_routers_status.repeater_1 = data[2].status;
if(data[1].status == "Unkown" || data[2].status == "Unkown") {
app.wifi_routers_status.global = "Unkown"
} else if(data[1].status == "Inactive" && data[2].status == "Inactive") {
app.wifi_routers_status.global = "Offline"
} else if(data[1].status == "Inactive" || data[2].status == "Inactive") {
app.wifi_routers_status.global = "Degraded"
} else if(data[1].status == "Restarting" || data[2].status == "Restarting") {
app.wifi_routers_status.global = "Degraded"
} else {
app.wifi_routers_status.global = "Active"
}
});
socket.on('rpi_status', function (data) {
console.log(data);
app.rpi_status.current_load = (Math.round( data.currentLoad.currentload * 10 ) / 10) + "%";
app.rpi_status.ram_used = bytesToSize(data.mem.used);
app.rpi_status.ram_total = bytesToSize(data.mem.total);
app.rpi_status.memory_usage = app.rpi_status.ram_used + " of " + app.rpi_status.ram_total
app.rpi_status.uptime = secondsToString(data.time.uptime);
});
socket.on('relay_switch', function (data) {
console.log(data)
var status = "ON";
var btn = "Turn Off"
if(data.status == false){
status = "OFF"
btn = "Turn On"
}
switch (data.code) {
case "L01":
app.light01 = status;
app.light01_status = data.status
app.light01_btn = btn
break;
}
});
socket.emit('relay_switch_update', {});
setInterval(function () {
socket.emit('relay_switch_update', {});
}, 3000000);
socket.emit('wifi_routers_update', {});
setInterval(function () {
socket.emit('wifi_routers_update', {});
}, 30000);
socket.emit('rpi_status_update', {});
setInterval(function () {
socket.emit('rpi_status_update', {});
}, 5000);
function bytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes == 0) return '0 Byte';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
};
function secondsToString(seconds) {
var numyears = Math.floor(seconds / 31536000);
var numdays = Math.floor((seconds % 31536000) / 86400);
var numhours = Math.floor(((seconds % 31536000) % 86400) / 3600);
var numminutes = Math.floor((((seconds % 31536000) % 86400) % 3600) / 60);
var numseconds = (((seconds % 31536000) % 86400) % 3600) % 60;
if(numyears != 0){
return numyears + " years " + numdays + " days ";
}
if(numdays != 0){
return numdays + " days " + numhours + " hours ";
}
if(numhours != 0){
return numhours + " hours " + numminutes + " minutes "
}
if(numminutes != 0) {
return numminutes + " minutes ";
}
return numseconds + " seconds"
}
</script>
|
