{% extends 'base.html'%}
{% block title %}
Single element view
 {% 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 %}]]
   var prev_dates= [[{% for row in prev1 %}'{{row.MeasurementDate}}',{% endfor %}]]
   var prev_values= [[{% for row in prev1 %}{{row.El_A}},{% endfor %}]]
   var dates= [[{% for row in p1 %}'{{row.MeasurementDate}}',{% endfor %}]]
   var predikce_python = [[{% for row in pred1 %}{{row}},{% endfor %}]]
    start_index=dates[0].length;
    if (start_index==0)
    {
      var ts = (new Date()).getTime();
      dat=Date.parse(ts)
      first_date=ts;
    }
    else {
      first_date=Date.parse(dates[0][1]);
       start_point[0]=Date.parse(dates[0][start_index-1])+86400;
     }
     newValues[0] = [];
     newDates[0] = [];
     both[0]=[];
     pred_correct[0]=[];
     try_[0]=[];
     for (i = 0; i < (values[0].length); i++) {
       if((i+3) > (values[0].length))
       {
         var x =(values[0][i+1]-values[0][i]);
         try_[0][i]=x.toFixed(3);
       }
         avg +=values[0][i].toFixed(3);
         j+=1;
         if(j==1)
        {
             avg/=1;
             newValues[0][l]=avg;
             newDates[0][l]=dates[0][i];
             both[0][l]=[Date.parse(dates[0][i]),avg];
             lasts[0]=avg;
             l+=1;
             avg=0;
             j=0;
         }
     }
     if(predikce_python[0].length<52){
     for (m = 0; m < predikce_python[0].length && m < 50; m++) {
       pred_correct[0][m]= [];
       pred_correct[0][m][0]=(start_point[0]+(m*86400000));
       pred_correct[0][m][1]=predikce_python[0][m];
     }
   }
   else{
     for (m = 0; m < predikce_python[0].length; m++) {
       pred_correct[0][m]= [];
       template[m]=[];
       template[m][0]=start_point[0]+(m*86400000);
       template[m][1]=predikce_python[0][m];
       }
     }


   function getChart() {
     var pole = [];
       var val_length=both[0].length; //aktualne
       var pred_length=pred_correct[0].length;
       var prev_length=prev_values[0].length;
       var val=0;
       if((pred_length+val_length)>prev_length){
         if(pred_length>50){
           val=prev_length;
         }else{
           val=(start_point[0]+((pred_length)*86400000))
         }
         pole.push(val);
       }else{
         if(start_index==0){
           var now = (new Date()).getTime();
           start_point[0]=now;
           val=(start_point[0]+((prev_length)*86400000))
           pole.push(val);
           console.log(start_point[0])
         }
         else{
           val=(start_point[0]+((prev_length)*86400000))
           pole.push(val);
         }
         console.log(start_point[0]);
       }
      console.log(prev_values[0]);
       prev_correct=[];
       for(m = 0; m < prev_values[0].length; m++){
         prev_correct[m]=[];
          prev_correct[m][0]=((first_date)+(m*86400000));
          prev_correct[m][1]=prev_values[0][m];
       }
       var myChart = new Highcharts.chart('chart1', {
         title: {
           text: 'MEASURED RESISTANCE IN ZONE '+ [ '']
       },
       xAxis: {
         type: 'datetime',
           plotBands: [{ // vizualize shadow for prediction
           from: start_point[0],
           to: pole[0],
           color: 'rgba(89, 89, 89, .15)'
           }]
       },
       yAxis: {
         min: 0, max: 8,
         title: {
           text: null
         },
         plotBands: [{ // visualize strong red line
         from: 5,
         to: 5.05,
         color: 'rgba(204, 0, 0, .85)'
         },
         { // visualize the red
         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[0],
           zIndex: 1,
           color: '#42A5F5',
           lineWidth: 2,
           dashStyle: 'solid',
           zIndex: 1,
           marker: {
             enabled: false,
             symbol: 'diamond'
           }
         },
         {
           name: 'Measured element',
           data: both[0],
           zIndex: 2,
           color: '#00e600',
           marker: {
             enabled: false,
             symbol: 'circle'
           }
         },
           {
             name: 'Prediction',
             data: pred_correct[0],
             zIndex: 1,
             color: '#ff3333',
             dashStyle: 'dot',
             marker: {
               enabled: false,
               symbol: 'circle'
             }
           }
       ]
     }
     );
     Highcharts.setOptions({
       lang: {
         thousandsSep: ','
       }
    });
 }
 </script>
{% endblock %}
{% block content %}
{% if element.count > 0 %}
  {% for element in element %}
  <h4>MEASURED RESISTANCE IN ZONE {{element.ZoneId.ZoneNumber}}, ON POSITION {{element.Position}}</h4>
    <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='chart1' 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>
          <h6>Element Type: {{ element.TypeId.TypeName }}</h6>
          <p>Element Position: {{ element.Position }}</p>
          <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 %}
{% endblock %}