{% extends 'base.html'%}
{% load crispy_forms_tags %}
{% block title %} Kiln details title {% endblock %}
{% block scripts %}
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
window.onload = function() {
  getChart();
}
  var j=0;
  var l=0;
  var m=0;
  var avg=0;
  var prev_avg=0;
  var newValues=[];
  var newDates=[];
  var both =[];
  var prev =[];
  var start_point=[];
  var pred_correct=[];
  var try_=[];
  var lasts=[];
  var template=[];
  var values= [[{% for row in p1 %}{{row.El_A}},{% endfor %}],[{% for row in p2 %}{{row.El_A}},{% endfor %}],[{% for row in p3 %}{{row.El_A}},{% endfor %}],[{% for row in p4 %}{{row.El_A}},{% endfor %}]]
  var prev_dates= [[{% for row in prev1 %}'{{row.MeasurementDate}}',{% endfor %}],[{% for row in prev2 %}'{{row.MeasurementDate}}',{% endfor %}],[{% for row in prev3 %}'{{row.MeasurementDate}}',{% endfor %}],[{% for row in prev4 %}'{{row.MeasurementDate}}',{% endfor %}]]
  var prev_values= [[{% for row in prev1 %}{{row.El_A}},{% endfor %}],[{% for row in prev2 %}{{row.El_A}},{% endfor %}],[{% for row in prev3 %}{{row.El_A}},{% endfor %}],[{% for row in prev4 %}{{row.El_A}},{% endfor %}]]
  var dates= [[{% for row in p1 %}'{{row.MeasurementDate}}',{% endfor %}],[{% for row in p2 %}'{{row.MeasurementDate}}',{% endfor %}],[{% for row in p3 %}'{{row.MeasurementDate}}',{% endfor %}],[{% for row in p4 %}'{{row.MeasurementDate}}',{% endfor %}]]
  var predikce_python = [[{% for row in pred1 %}{{row}},{% endfor %}],[{% for row in pred2 %}{{row}},{% endfor %}],[{% for row in pred3 %}{{row}},{% endfor %}],[{% for row in pred4 %}{{row}},{% endfor %}]]

  var start_index=[]
  var first_date=[]
  for (k = 0; k < 4; k++) {
    start_index[k]=dates[k].length;
    if (start_index[k]==0)
    {
      var ts = (new Date()).getTime();
      dat=Date.parse(ts);
      first_date[k]=ts;
    }
    else {
      first_date[k]=Date.parse(dates[k][1]);
       start_point[k]=Date.parse(dates[k][start_index[k]-1])+86400;
     }
    newValues[k] = [];
    newDates[k] = [];
    both[k]=[];
    pred_correct[k]=[];
    try_[k]=[];

    for (i = 0; i < (values[k].length); i++) {
        if((i+3) > (values[k].length))
        {
          var x =(values[k][i+1]-values[k][i]);
          try_[k][i]=x.toFixed(3);
        }
        avg +=values[k][i].toFixed(3);
        j+=1;
        if(j==1)
          {
            avg/=1;
            newValues[k][l]=avg;
            newDates[k][l]=dates[k][i];
            both[k][l]=[Date.parse(dates[k][i]),avg];
            lasts[k]=avg;
            l+=1;
            avg=0;
          j=0;}
        }
    l=0;
    if(predikce_python[k].length<52){
    for (m = 0; m < predikce_python[k].length && m < 50; m++) {
      pred_correct[k][m]= [];
      pred_correct[k][m][0]=(start_point[k]+(m*86400000));
      pred_correct[k][m][1]=predikce_python[k][m];
    }
  }
    else{
      for (m = 0; m < predikce_python[k].length; m++) {
        pred_correct[k][m]= [];
        template[m]=[];
        template[m][0]=start_point[k]+m;
        template[m][1]=predikce_python[k][m];
      }
    }
  }

  function getChart() {
    var pole = [];
    for (k = 0; k < 4; k++) {
      pole[k] = [];
      var val_length=both[k].length;//aktualne
      var pred_length=pred_correct[k].length;
      var prev_length= prev_values[k].length;
      var val=0;
      if((pred_length+val_length)>prev_length){
        if(pred_length>50){
          val=prev_length;
        }else{
          val=(start_point[k]+((pred_length)*86400000))
        }
        pole[k].push(val);
      }else{
        if(start_index[k]==0){
          var now = (new Date()).getTime();
          start_point[k]=now;
          val=(start_point[k]+((prev_length)*86400000))
          pole[k].push(val);
        }
        else{
          val=(start_point[k]+((prev_length)*86400000))
          pole[k].push(val);
        }
      }

    var prev_correct=[];
    for(m = 0; m < prev_values[k].length; m++){
      prev_correct[m]=[];
      var dat = ((first_date[k])+(m*86400000));
       prev_correct[m][0]=dat;
       prev_correct[m][1]=prev_values[k][m];
    }

    var ctx = ['chart1','chart2','chart3','chart4'];
    var myChart = new Highcharts.chart(ctx[k], {
      title: {
        text: 'MEASURED RESISTANCE ON POSITION '+ [k+1]
      },
      xAxis: {
        type: 'datetime',
          plotBands: [{ // visualize the weekend
          from: start_point[k],
          to: pole[k],
          color: 'rgba(89, 89, 89, .15)'
      }]
      },
      yAxis: {
        min: 0, max: 8,
        title: {
          text: null
        },
        plotBands: [{
        from: 5,
        to: 5.05,
        color: 'rgba(204, 0, 0, .85)'
    },
        {
        from: 5.05,
        to: 10,
        color: 'rgba(255, 92, 51, .15)'
    }]
      },
      tooltip: {
        crosshairs: false,
        shared: true,
        valuePrefix: 'Ω '
      },
      legend: {},
      series: [
      {
          name: 'Previous element',
          data: prev_correct,//prev_values[k],
          zIndex: 1,
          color: '#42A5F5',
          lineWidth: 2,
          dashStyle: 'solid',
          zIndex: 1,
          marker: {
            enabled: false,
            symbol: 'diamond'
          }
        },
        {
          name: 'Measured element',
          data: both[k],
          zIndex: 2,
          color: '#00e600',
          marker: {
            enabled: false,
            symbol: 'circle'
          }
        },
          {
            name: 'Prediction',
            data: pred_correct[k],
            zIndex: 1,
            color: '#ff3333',
            dashStyle: 'dot',
            marker: {
              enabled: false,
              symbol: 'circle'
            }
          }
      ]
    }
    );
    Highcharts.setOptions({
      lang: {
        thousandsSep: ','
      }
    });
  }
}
</script>

{% endblock %}
{% block content %}
<h2>ZONE {{zone.ZoneNumber }} PROPERTIES</h2><hr>
<div class="grid-container-two">
<div class="col-dm-6">
  <p style="text-align:center">CHARTS DISPLAYING THE CONDITION OF HEATING ELEMENTS IN ZONE NUMBER {{ zone.ZoneNumber}}</p>
</div>
<div class="col-dm-6">
</div>
</div>
<hr><br>
{% if element.count > 0 %}
    {% for element in element %}
      <div class="container" style="padding:1px;margin:1px;">
        <div class="row" style="padding:1px;margin:1px;">
          <div class="col-sm" style="background-color: #404040; padding:1px;margin:1px; min-height:50px;">
            <div class="container"><div id='chart{{element.Position}}' width="auto" height="auto"></div></div>
          </div>
          <div class="col-sm" style="background-color: rgba(255, 255, 255, 0.98);max-width:300px;">
            {% if element.Danger %}
            <div class="grid-container-two">
              <div class="col-dm-6">
                <a href="#" >
                  <i class="fas fa-exclamation-circle fa-3x" title="Solve" style="color:red;padding-bottom:15px;padding-top:10px;padding-left:10px"></i>
                </a>
              </div>
              <div class="col-dm-6">
                <p style="color:#990000;padding-bottom:15px;padding-top:20px;padding-left:5px;">WARNING: POSSIBLE DAMAGES</p>
              </div>
            </div>
            {% endif %}
            <h4>Element ID: {{ element.ElementId }}</h4><br>
            <p>Element Type: {{ element.TypeId.TypeName }}</p>
              {% if element.Position == 1 %}
                <p>Element Position: {{ element.Position }} - Left Up</p>
              {% elif element.Position == 2 %}
                <p>Element Position: {{ element.Position }} - Left Down</p>
              {% elif element.Position == 3 %}
                <p>Element Position: {{ element.Position }} - Right Up</p>
              {% elif element.Position == 4 %}
                <p>Element Position: {{ element.Position }} - Right Down</p>
              {% endif %}
            <p>Diameter: {{ element.TypeId.Diameter_mm|floatformat:2 }} mm</p>
            <p>Length: {{ element.TypeId.Length_mm|floatformat:2 }} mm</p>
            <p>Supplier: {{ element.TypeId.SupplierId.SupplierName }}</p>
            <br>
            {% if element.Danger %}
            <a class="nav-link active button_change" style="background:#990000;" aria-current="page" href="{%  url 'Monitoring_App:change_element' element_id=element.ElementId %}">Change Element</a>
            {% else %}
            <a class="nav-link active button_change" aria-current="page" href="{%  url 'Monitoring_App:change_element' element_id=element.ElementId %}">Change Element</a>
            {% endif %}
            <br>
            <a class="nav-link active button_change" aria-current="page" href="{%  url 'Monitoring_App:change_history' zone=element.ZoneId.ZoneId position=element.Position %}">Historical Changes</a></div>
            <br><hr><br>
          </div>
        </div>
    {% endfor %}
    {% else %}
      <div class="row">
        {% for position in backup %}
          {% if position == "Middle" %}
            <div class="col-12">
            <img src="/media/measurement_images/zone.png" style="width:100%;">
            </div>
            {% else %}
            <div class="col-6 center-block text-center" style="padding-left:30px;background:#990000; color:white;"><a href="{%  url 'Monitoring_App:change_element' element_id=0 %}" class="btn button_orange" name="button" style=" color:white; font-size:20px;">Set Element {{ position}}</a></div>
            {% endif %}
          {% endfor %}
      </div>
    {% endif %}
    <hr>
<br><br>
{% endblock %}