150 lines
4.0 KiB
Smarty
150 lines
4.0 KiB
Smarty
{{template "base/base.html" .}}
|
||
{{define "meta"}}
|
||
<script type="text/javascript" src="/static/js/jquery-1.10.2.min.js"></script>
|
||
<script type="text/javascript" src="/static/highstock/js/highstock.js"></script>
|
||
<script type="text/javascript" src="/static/highstock/js/themes/grid.js"></script>
|
||
<script type="text/javascript" src="/static/highstock/js/modules/exporting.js"></script>
|
||
<script src="http://code.highcharts.com/highcharts.js"></script>
|
||
<script type="text/javascript">
|
||
$(function () {
|
||
chart1 = new Highcharts.StockChart({
|
||
chart: {
|
||
renderTo : 'graphe',
|
||
load : function () {
|
||
// set up the updating of the chart each second
|
||
var series = this.series[0];
|
||
setInterval(function () {
|
||
var x = (new Date()).getTime(), // current time
|
||
y = Math.round(Math.random() * 100);
|
||
series.addPoint([x, y], true, true);
|
||
}, 1000);
|
||
}
|
||
},
|
||
rangeSelector: {
|
||
buttons: [{
|
||
count: 3,
|
||
type: 'hour',
|
||
text: '3h'
|
||
},{
|
||
count: 6,
|
||
type: 'hour',
|
||
text: '6h'
|
||
},{
|
||
count: 12,
|
||
type: 'hour',
|
||
text: '12h'
|
||
}, {
|
||
count: 1,
|
||
type: 'day',
|
||
text: '1j'
|
||
}, {
|
||
count: 2,
|
||
type: 'day',
|
||
text: '2j'
|
||
}, {
|
||
count: 3,
|
||
type: 'day',
|
||
text: '3j',
|
||
}, {
|
||
count: 5,
|
||
type: 'day',
|
||
text: '5j'
|
||
}, {
|
||
count: 7,
|
||
type: 'day',
|
||
text: '7j'
|
||
}, {
|
||
count: 1,
|
||
type: 'month',
|
||
text: '1m'
|
||
}, {
|
||
type: 'all',
|
||
text: 'All'
|
||
}],
|
||
selected: 5
|
||
},
|
||
yAxis: {
|
||
title: {
|
||
text: 'Puissance (W)'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'datetime'
|
||
},
|
||
scrollbar : {
|
||
enabled : false
|
||
},
|
||
legend : {
|
||
enabled : true,
|
||
layout: 'vertical',
|
||
verticalAlign : 'middle',
|
||
align : 'right'
|
||
},
|
||
series : [ {{.dataPower}} ]
|
||
});
|
||
});
|
||
Highcharts.setOptions({
|
||
global: {
|
||
useUTC: false
|
||
}
|
||
});
|
||
</script>
|
||
{{end}}
|
||
{{define "extrajs"}}
|
||
{{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 compteurs</strong></a></li>
|
||
{{range $key, $val := .compteurs}}
|
||
<li>
|
||
<a class="relayLink" id="{{$val.AdresseCompteur}}" href="/view/teleinfo/{{$val.AdresseCompteur}}" >
|
||
{{if eq $val.Description ""}}
|
||
{{$val.AdresseCompteur}}
|
||
{{else}}
|
||
{{$val.Description}}
|
||
{{end}}
|
||
</a>
|
||
</li>
|
||
{{end}}
|
||
</ul>
|
||
</div><!--/.nav-collapse -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-9">
|
||
{{template "content" .}}
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
|
||
|
||
{{define "content"}}
|
||
{{if .isCompteurSelected}}
|
||
<div class="jumbotron">
|
||
<center><h3><strong>{{.compteurDescription}}</strong></h3></center>
|
||
<hr/>
|
||
|
||
<h4>N° Compteur : <small>{{.dataCompteur.AdresseCompteur}}</small></h4>
|
||
<h4>Option tarifaire : <small>{{.dataCompteur.OptionTarifaire}}</small></p>
|
||
<h4>Option base : <small>{{.dataCompteur.OptionBase}} Wh</small></h4>
|
||
<h4>Intensité souscrite : <small>{{.dataCompteur.IntensiteSouscrite}} A</small></h4>
|
||
|
||
<div style="margin-top: 30px;" id="graphe"></div>
|
||
</div>
|
||
{{end}}
|
||
{{end}}
|