123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224 |
- <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-3">CPU</dt>
- <dd class="col-sm-9">45%</dd>
- <dt class="col-sm-3">RAM</dt>
- <dd class="col-sm-9">560M of 1024M</dd>
- <dt class="col-sm-3 text-truncate">Disk</dt>
- <dd class="col-sm-9">13.5Gb of 100Gb</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="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"
- }
- },
- 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('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);
- </script>
|