{{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>
{{end}}
{{define "extrajs"}}
<script type="text/javascript">
var lastTimeStamps = {{.lastHorodate}};

var initData = function(series) {
    //loadNewData(series);
    setInterval(function() {
        loadNewData(series);
    }, 30000);
};

var loadNewData = function(series) {
    $.ajax({
        type: "POST",
        data: {
            currentTime: lastTimeStamps
        },
        success: function(json) {
            console.log(json);
            var obj = JSON.parse(json);
            for (var i=0; i<obj.values.length; i++) {
                var arrayVal = [obj.values[i][0], obj.values[i][1]];
                console.log(arrayVal);
                series.addPoint(arrayVal, true, false);

                if (i == obj.values.length-1) {
                    lastTimeStamps = obj.values[i][0] + 1;
                }
            }
        }
    });
};

$(function () {

    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });

    // Create the chart
    Highcharts.StockChart({
    chart: {
        renderTo: "graphe",
        events: {
            load: function () {
                // set up the updating of the chart each second
                var series = this.series[0];
                initData(series);
            }
        }
    },
    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 (VA)'
        }
    },
    xAxis: {
        type: 'datetime'
    },
    scrollbar : {
        enabled : false
    },
    legend : {
        enabled : true,
        layout: 'vertical',
        verticalAlign : 'middle',
        align : 'right'
    },

    series : [ {{.dataPower}} ]
    });
});
</script>
{{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}}