103 lines
3.1 KiB
Smarty
103 lines
3.1 KiB
Smarty
{{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>List 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/bulbOff.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 class="btn btn-lg btn-primary" href="#" role="button">Toggle</a></p>
|
|
<br/>
|
|
<p><img id="{{.relayMac}}" src="/static/img/bulbOff.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 < 2) {
|
|
return;
|
|
}
|
|
var mac = res[0];
|
|
var status = res[1];
|
|
|
|
// 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 {
|
|
$(links[i]).children("img").attr("src", "/static/img/bulbOff.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 {
|
|
$(".jumbotron img").attr("src", "/static/img/bulbOff.png")
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
forEachRelay();
|
|
setInterval(forEachRelay, 5000);
|
|
</script>
|
|
{{end}}
|