<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>