Keine Beschreibung

index.html 6.5KB

    <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 " 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('http://localhost:3100/'); 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 : "" }, methods: { switchLight01: function(){ var status; if(app.light01_status == true){ status = false; } else { status = true; } http_post("/switch_relay", { code: "L01", status: status}) }, 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"; }); 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', {}); }, 5000); </script>