{{template "base/base.html" .}}
{{define "meta"}}
<link href="/static/css/jumbotron-narrow.css" rel="stylesheet">
{{end}}
{{define "body"}}
<div class="row">
  <div class="col-sm-3">
    <div class="sidebar-nav">
      <div class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <span class="visible-xs navbar-brand">Sidebar menu</span>
        </div>
        <div class="navbar-collapse collapse sidebar-navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#"><strong>Liste des relays</strong></a></li>
            {{range $key, $val := .relays}}
                <li>
                  <a class="relayLink" id="{{$val.Mac}}" href="/view/relay/{{$val.Mac}}" >
                      {{if eq $val.Description ""}}
                        {{$val.Mac}}
                      {{else}}
                        {{$val.Description}}
                      {{end}}
                    <img class="navbar-right" src="/static/img/bulbNone.png" style="width: 20px; margin-right: 0px;" />
                  </a>
                </li>
            {{end}}
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>
  <div class="col-sm-9">
    {{template "content" .}}
  </div>
</div>
{{end}}


{{define "content"}}
  {{if .isRelaySelected}}
    <div class="jumbotron">
      <h3>{{.relayDescription}}</h3>
      <br/>
      <p><a id="toggleButton" class="btn btn-lg btn-primary" href="#" role="button">Toggle</a></p>
      <br/>
      <p><img id="{{.relayMac}}" src="/static/img/bulbNone.png" style="width: 100px;"/></p>
    </div>
  {{end}}
{{end}}


{{define "extrajs"}}
<script type="application/javascript">
var forEachRelay = function() {
  $(".relayLink").each(function( index ) {
    $.ajax({
      url: "/view/relay/"+$(this).attr("id"),
      method: "POST",
      success: function(result){
        var res = result.split("/");
        if (res.length < 3) {
          return;
        }
        var mac = res[0];
        var status = res[1];
        var relayStats = res[2];

        // Update img of the left list
        var links = $(".relayLink")
        for (var i=0; i<links.length; i++) {
          if ($(links[i]).attr("id") == mac) {
            if (status == "allume") {
              $(links[i]).children("img").attr("src", "/static/img/bulbOn.png")
            } else if (status == "eteint") {
              $(links[i]).children("img").attr("src", "/static/img/bulbOff.png")
            } else {
              $(links[i]).children("img").attr("src", "/static/img/bulbNone.png")
            }
          }
        }

        // update the img of the selected relay
        if ($(".jumbotron img").attr("id") == mac) {
          if (status == "allume") {
            $(".jumbotron img").attr("src", "/static/img/bulbOn.png")
          } else if (status == "eteint") {
            $(".jumbotron img").attr("src", "/static/img/bulbOff.png")
          } else {
            $(".jumbotron img").attr("src", "/static/img/bulbNone.png")
          }
        }

        // update button color of the selected relay
        if ($(".jumbotron img").attr("id") == mac) {
          $("#toggleButton").removeClass("btn-primary");
          $("#toggleButton").removeClass("btn-danger");

          if (relayStats == "down") {
            $("#toggleButton").addClass("btn-primary");
          } else {
            $("#toggleButton").addClass("btn-danger");
          }
        }
      }
    });
  });
}


$("#toggleButton").click(function() {
  $.ajax({
    url: "/command/relay/"+$(".jumbotron img").attr("id"),
    method: "POST",
    timeout: 1000,
  });
});

forEachRelay();
setInterval(forEachRelay, 1500);
</script>
{{end}}