|
<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">ACTIVE</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">OK</dd>
<dt class="col-sm-8 text-truncate">Repeater 1</dt>
<dd class="col-sm-4">OK</dd>
</dl>
<div class="row spacer-sm">
<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> 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">ACTIVE</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" class="btn btn-outline-secondary btn-sm btn-block disabled"><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 " style="float: right; margin-top: 2px;">Turn On</button>
<h3 class="statcard-number">OFF</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('http://localhost:3100/');
var app = new Vue({
el: "#app",
data: {
temperature_external: "--",
},
methods: {
example: function(example_var){
app.example();
}
}
})
socket.on('temperature_external', function (data) {
var temp = Math.round( data.temperature * 10 ) / 10;
app.temperature_external = temp + "ºC";
});
</script>
|