{{ block title }}

{{ endblock }}
{{ block content }}

<link href="{{ static 'automl/custom.css' }}" rel="stylesheet">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

  <!-- Tab Navigation -->
<ul class="nav nav-tabs fixed-top navbar-light bg-light justify-content-center " id="myTab" role="tablist">


<li class="nav-item" >
<a class="nav-link active" id="part1-tab" data-toggle="tab" href="#part1" role="tab" aria-controls="part1" onclick="topFunction()"> Tab 1
</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="part2-tab" data-toggle="tab" href="#part2" role="tab" aria-controls="part2" onclick="topFunction()">Tab 2</a>
  </li>


<li class="nav-item">
    <a class="nav-link" id="part3-tab" data-toggle="tab" href="#part3" role="tab" aria-controls="part3" onclick="topFunction()">Tab 3</a>
  </li>
<li class="nav-item">
    <a class="nav-link" id="part4-tab" data-toggle="tab" href="#part4" role="tab" aria-controls="part4" onclick="topFunction()">Tab 4</a>
</li>
</ul>
<br>
<br>


<!-- Tab content -->
<div class="tab-content" id="myTabContent">

  <div class="tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab">


<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold"> Phase 2: <br> Festlegen des Akzeptanzbereichs für die Temperatur (1/3) </h3>
  </div>
      <p id="info">
    Bitte legen Sie auf Grundlage der unten angegebenen Datenpunkte Ihren Akzeptanzbereich für die <b>Temperatur</b> fest. Klicken Sie anschließend auf <i>Weiter</i>. <br>
</p>
<p>
   <b> Ihr Akzeptanzbereich [<label id="min_temp" ></label>, <label id="max_temp" ></label>]</b>
</p>
    <div id="amount-inside_temp" style="visibility: hidden">
 <b>   Anzahl von Punkten ohne Störung im Akzeptanzbereich: <label id="positives_in_temp">""</label> /<label id="positives_all_temp">""</label> (<label id="positive_percentage_temp"></label>%) <br>
    Anzahl von Punkten mit Störung im Akzeptanzbereich: <label id="negatives_in_temp">""</label> /<label id="negatives_all_temp">""</label> (<label id="negative_percentage_temp"></label>%)</b><br>
</div>
<figure class="highcharts-figure">
    <div id="temp"></div>
</figure>
<p>
<b>Zur Bedienung:</b>
 <li>Indem sie mit der linken Maustaste auf den Diagrammbereich klicken, können sie die erste Grenze Ihres eigenen Akzeptanzbereichs festlegen (grüner Strich).</li>
<li>Mit einem zweiten Klick legen Sie dann die zweite Grenze fest (grüner Strich) und haben so den Akzeptanzbereich (Bereich zwischen den beiden grünen Strichen) bestimmt. </li>
<li>Wenn Sie die Grenzen verschieben möchten, klicken Sie einfach auf den Bereich, der die neue Grenze werden soll.</li>
<li><b>Beachten Sie:</b> Wenn Sie bereits ein Akzeptanzbereich mit zwei Klicks festgelegt haben und die Grenzen verschieben möchten, wird bei einem erneuten Klick immer die Grenze verschoben, die näher an der neuen Grenze ist.</li>
<li>Gegebenenfalls hilft es Ihnen, wenn Sie den Akzeptanzbereich erst wieder ganz groß machen (im Diagramm ganz links und ganz rechts klicken), um die Grenzen dann erneut zu verschieben.</li>
<li>Wenn Sie Probleme haben, melden Sie sich bitte per Handzeichen und ein/e Experimentator/in wird Ihnen helfen. </li>
</p>

<button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Weiter</button>
  </div>











  <div class="tab-pane" id="part2" role="tabpanel" aria-labelledby="part2-tab">


<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold"> Phase 2: <br> Festlegen des Akzeptanzbereichs für die Geschwindigkeit (2/3) </h3>
  </div>
<br>
<p id="info_speed">
        Bitte legen Sie auf Grundlage der unten angegebenen Datenpunkte Ihren Akzeptanzbereich für die <b>Geschwindigkeit</b> fest. Klicken Sie anschließend auf <i>Weiter</i>. <br>
   <b> Ihr Akzeptanzbereich [<label id="min_speed" ></label>, <label id="max_speed" ></label>] </b>
</p>
    <div id="amount-inside_speed" style="visibility: hidden">
    <b>Anzahl von Punkten ohne Störung im Akzeptanzbereich: <label id="positives_in_speed">""</label> /<label id="positives_all_speed">""</label> (<label id="positive_percentage_speed"></label>%) <br>
    Anzahl von Punkten mit Störung im Akzeptanzbereich: <label id="negatives_in_speed">""</label> /<label id="negatives_all_speed">""</label> (<label id="negative_percentage_speed"></label>%)</b><br>
</div>
<figure class="highcharts-figure">
    <div id="speed"></div>
</figure>

<p>
<b>Zur Bedienung:</b>
 <li>Indem sie mit der linken Maustaste auf den Diagrammbereich klicken, können sie die erste Grenze Ihres eigenen Akzeptanzbereichs festlegen (grüner Strich).</li>
<li>Mit einem zweiten Klick legen Sie dann die zweite Grenze fest (grüner Strich) und haben so den Akzeptanzbereich (Bereich zwischen den beiden grünen Strichen) bestimmt. </li>
<li>Wenn Sie die Grenzen verschieben möchten, klicken Sie einfach auf den Bereich, der die neue Grenze werden soll.</li>
<li><b>Beachten Sie:</b> Wenn Sie bereits ein Akzeptanzbereich mit zwei Klicks festgelegt haben und die Grenzen verschieben möchten, wird bei einem erneuten Klick immer die Grenze verschoben, die näher an der neuen Grenze ist.</li>
<li>Gegebenenfalls hilft es Ihnen, wenn Sie den Akzeptanzbereich erst wieder ganz groß machen (im Diagramm ganz links und ganz rechts klicken), um die Grenzen dann erneut zu verschieben.</li>
<li>Wenn Sie Probleme haben, melden Sie sich bitte per Handzeichen und ein/e Experimentator/in wird Ihnen helfen. </li>
</p>
    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Zurück</button>
<button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Weiter</button>
  </div>





  <div class="tab-pane" id="part3" role="tabpanel" aria-labelledby="part3-tab">


<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold">Phase 2: <br> Festlegen des Akzeptanzbereichs für die Auslastung (3/3) </h3>
  </div>
<br>

  <p id="info_volt">
      Bitte legen Sie auf Grundlage der unten angegebenen Datenpunkte Ihren Akzeptanzbereich für die <b>Auslastung</b> fest. Klicken Sie anschließend auf <i>Weiter</i>. <br>
      <b>Ihr Akzeptanzbereich [<label id="min_volt" ></label>, <label id="max_volt" ></label>] </b>
</p>
    <div id="amount-inside_volt" style="visibility: hidden">
    <b>Anzahl von Punkten ohne Störung im Akzeptanzbereich: <label id="positives_in_volt">""</label> /<label id="positives_all_volt">""</label> (<label id="positive_percentage_volt"></label>%) <br>
        Anzahl von Punkten mit Störung im Akzeptanzbereich: <label id="negatives_in_volt">""</label> /<label id="negatives_all_volt">""</label> (<label id="negative_percentage_volt"></label>%)</b><br>
</div>
<figure class="highcharts-figure">
    <div id="volt"></div>
</figure>
<p>
<b>Zur Bedienung:</b>
 <li>Indem sie mit der linken Maustaste auf den Diagrammbereich klicken, können sie die erste Grenze Ihres eigenen Akzeptanzbereichs festlegen (grüner Strich).</li>
<li>Mit einem zweiten Klick legen Sie dann die zweite Grenze fest (grüner Strich) und haben so den Akzeptanzbereich (Bereich zwischen den beiden grünen Strichen) bestimmt. </li>
<li>Wenn Sie die Grenzen verschieben möchten, klicken Sie einfach auf den Bereich, der die neue Grenze werden soll.</li>
<li><b>Beachten Sie:</b> Wenn Sie bereits ein Akzeptanzbereich mit zwei Klicks festgelegt haben und die Grenzen verschieben möchten, wird bei einem erneuten Klick immer die Grenze verschoben, die näher an der neuen Grenze ist.</li>
<li>Gegebenenfalls hilft es Ihnen, wenn Sie den Akzeptanzbereich erst wieder ganz groß machen (im Diagramm ganz links und ganz rechts klicken), um die Grenzen dann erneut zu verschieben.</li>
<li>Wenn Sie Probleme haben, melden Sie sich bitte per Handzeichen und ein/e Experimentator/in wird Ihnen helfen. </li>
</p>


<button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Zurück</button>
<button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Weiter</button>

  </div>
 <div class="tab-pane" id="part4" role="tabpanel" aria-labelledby="part4-tab">


<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold">Phase 2: <br> Zusammenfassung der festgelegten Akzeptanzbereiche</h3>
  </div>
<br>
<br>

<div class="input-group" >
</div>


{{ include C.X_RANGE_CHART_TEMPLATE}}


      <p>Bitte überprüfen Sie nochmals Ihre gewählten Akzeptanzbereiche. Diese sind sehr wichtig, da sie die Grundlage für alle späteren Entscheidungen im Experiment darstellen.</p>
      <p>Falls Sie ihre Akzeptanzbereiche ändern möchten, klicken Sie auf "Zurück".</p>
      <p>Falls Sie ihre Akzeptanzbereiche beibehalten möchten, klicken Sie auf "Nächste Seite". Dadurch wird Ihre Auswahl bestätigt.</p>

     <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Zurück</button>
<!--<button onclick="topFunction()" type="button" class="firstPage btn-primary btn back">Zurück zum Anfang</button>-->
<button class="nexttab btn-primary btn next">Nächste Seite</button>
  </div>


</div>

</body>

<script> <!-- draw charts -->

     function round(num) {
       var m = Number((Math.abs(num) * 100).toPrecision(15));
        return Math.round(m) / 100 * Math.sign(num);
        }
    min_ = -1;
    max_ = -1;
    min_temp = -1;
    min_volt = -1;
    min_speed = -1;
    max_temp = -1;
    max_volt = -1;
    max_speed = -1;
    color_plotlines = '#800080'; // add color here for
    function drawChart(series, min,max, chart_title, x_title, y_title, container){
        //fall unterscheidung
        data_0 = -1;
        console.log(container);
            if(container === "temp"){
                            data_0 = 1;
                            min_temp = min;
                            max_temp = max;

                        }
                        if(container === "speed"){
                            data_0 = 2;
                            min_speed = min;
                            max_speed = max;
                        }

                        if(container === "volt"){
                            data_0 = 3;
                            min_volt = min;
                            max_volt = max;
                        }

        min_ = min;
        max_ = max;

    Highcharts.chart(container, {
        chart: {
            type: 'scatter',
            events: {

            click: function(event) {
                      console.log("selection: ", event.xAxis[0].value);
                       if(container === "temp"){
                            data_0 = 1;
                            min_temp = min;
                            max_temp = max;

                        }
                        if(container === "speed"){
                            data_0 = 2;
                            min_speed = min;
                            max_speed = max;
                        }

                        if(container === "volt"){
                            data_0 = 3;
                            min_volt = min;
                            max_volt = max;
                        }
                      if(min_==-1){
                          min_ = round(event.xAxis[0].value);

                          liveSend([data_0,min_, -1]);
                      }
                      else if(max_==-1){
                          tmp = event.xAxis[0].value;
                          if (tmp < min_){
                              tmp = min_;
                              min_ = event.xAxis[0].value;
                          }
                          max_ = round(tmp); //
                          liveSend([data_0,min_,max_])
                          // document.getElementById("next-button").style.visibility= "visible";
                      }
                      else{

                          x_ = event.xAxis[0].value;
                          if(x_ < min_){
                              min_ = x_;
                          }
                          else if(x_ > max_){
                              max_ = x_;
                          }
                          else{ // im in the middle , geht the smaller dif
                              difference_min = x_ - min_;
                              difference_max = max_ - x_;
                              //console.log(difference_max,difference_min);
                              if (difference_min <= difference_max) {
                                min_ = x_;
                              }
                              else{
                                  max_ = x_;
                              }
                          }
                          min_ = round(min_);
                          max_ = round(max_);

                          liveSend([data_0,min_,max_]);
                          //Set Plotlines


                      }
                            var min_stuff = "min_"+ container;
                            var max_stuff = "max_"+container;
                         // document.getElementById('reset-button').style.visibility = "visible";
                          document.getElementById(min_stuff).innerHTML = min_==-1?"nicht gesetzt":min_;
                          document.getElementById(max_stuff).innerHTML = max_==-1?"nicht gesetzt":max_;
                          addPlotlines(this,min_,max_);
                          countDataPointsInterval(this,min_,max_,container);
            }
        },
            zoomType: false// 'x'
        },
        title: {
            text: chart_title
        },
        /*subtitle: {
            text: 'Source: Dirk van Straaten - 2022'
        }, */
        xAxis: {
            title: {
                enabled: true,
                text: x_title
            },
            min: -5,
            max: 105,
            plotLines: [{
            color: '#00FF00', // violet = 800080
            width: min_==-1?0:2,
            value: min_, // Position, you'll have to translate this to the values on your x axis
          label: {
        text: "",
      },
            },
             {
                color: '#00FF00', // violet = 800080
                width: max_==-1?0:2,
                value: max_, // Position, you'll have to translate this to the values on your x axis
                  label: {
        text: "",
      },
            },],
           /*  plotBands: [{
                color: 'grey', // Color value
                from: min_, // Start of the plot band
                to: max_, // End of the plot band
                opacity:0.5
            }],*/
            startOnTick: true,
            endOnTick: true,
            showLastLabel: true
        },
        yAxis: {
            title: {
                //text: y_title
            },
            labels: {
                enabled: false
            }
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 100,
            y: 70,
            floating: true,
            backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
            borderWidth: 1
        },
        plotOptions: {
            scatter: {
                marker: {
                    radius: 5,
                    states: {
                        hover: {
                            enabled: true,
                            lineColor: 'rgb(100,100,100)'
                        }
                    }
                },
                states: {
                    hover: {
                        marker: {
                            enabled: false
                        }
                    }
                },
                tooltip: {
                    headerFormat: '<b>{series.name}</b><br>',
                    pointFormat: '{point.x} '//, {point.y}'
                }
            }
        },
        series:  series  // aufbau {        name: 'Female',color: 'rgba(223, 83, 83, .5)',data: [ [datapoints] ] },{}
        });
    }

    function countDataPointsInterval(chart,min,max, id){
        document.getElementById('amount-inside_'+id).style.visibility = 'visible';
        console.log(chart.series[0].data);
        //todo. count in intervall min,max green/red
        // todo fill field with %
        count_positives_all = chart.series[0].data.length;
        count_negatives_all = chart.series[1].data.length;
        count_positives_inside = 0;
        count_negatives_inside = 0;
        for( let i = 0 ; i < chart.series[0].data.length; i++){
            // count positives
            if (chart.series[0].data[i].x <= max && chart.series[0].data[i].x >= min){
                count_positives_inside += 1;
            }
        }
        for( let i = 0 ; i < chart.series[1].data.length; i++){
            // count positives
            if (chart.series[1].data[i].x <= max && chart.series[1].data[i].x >= min){
                count_negatives_inside += 1;
            }
        }
        //set fields
        document.getElementById('positives_in'.concat("_",id)).innerText = count_positives_inside;
        // positives_in_temp = hinten
        document.getElementById('positives_all'.concat("_",id)).innerText = count_positives_all;
        document.getElementById('negatives_in'.concat("_",id)).innerText = count_negatives_inside;
        document.getElementById('negatives_all'.concat("_",id)).innerText = count_negatives_all;
        document.getElementById('positive_percentage'.concat("_",id)).innerText = Math.round(100*(count_positives_inside/count_positives_all));
        document.getElementById('negative_percentage'.concat("_",id)).innerText = Math.round(100*(count_negatives_inside/count_negatives_all));
    }
    function addPlotlines(chart,min,max){
        for(var i = 0; i < chart.xAxis[0].plotLinesAndBands.length; i++){
            chart.xAxis[0].removePlotLine(i);
        }

        if (min!=-1) chart.xAxis[0].addPlotLine({
                        id:0,
                          value: min,
                          color: '#00FF00',
                          width: 2,
                          label: {
                            text: "minimum",
                          },
                        })
        if (max!=-1) chart.xAxis[0].addPlotLine({
                    id:1,
                  value: max,
                  color: '#00FF00',
                  width: 2,
                  label: {
                    text: "maximum",
                  },
                })
    }
</script>
<script>
    // Source: https://www.jqueryscript.net/other/bootstrap-tabs-carousel.html



function bootstrapTabControl(){
  var i, items = $('.nav-link'), pane = $('.tab-pane');
  // next
  $('.nexttab').on('click', function(){
      //console.log('nexttab');
      for(i = 0; i < items.length; i++){
          if($(items[i]).hasClass('active') == true){
              break;
          }
      }
      if(i < items.length - 1){
          // for tab
          $(items[i]).removeClass('active');
          $(items[i+1]).addClass('active');
          // for pane
          $(pane[i]).removeClass('show active');
          $(pane[i+1]).addClass('show active');
      }
      if (i == items.length -2){
          // letzte seite
          // baue min und maxes
          var min_temp = Number($('#min_temp').text());
          var max_temp = Number($('#max_temp').text());
          var min_speed = Number($('#min_speed').text());
          var max_speed = Number($('#max_speed').text());
          var min_volt = Number($('#min_volt').text());
          var max_volt = Number($('#max_volt').text());
          $(drawXChart(min_temp, max_temp, min_speed, max_speed, min_volt, max_volt, js_vars.temp, js_vars.speed, js_vars.volt));
      }

  });
  // Prev
  $('.prevtab').on('click', function(){
      for(i = 0; i < items.length; i++){
          if($(items[i]).hasClass('active') == true){
              break;
          }
      }
      if(i != 0){
          // for tab
          $(items[i]).removeClass('active');
          $(items[i-1]).addClass('active');
          // for pane
          $(pane[i]).removeClass('show active');
          $(pane[i-1]).addClass('show active');
      }
  });
  /*
  // complete back
    $('.firstPage').on('click', function(){
      for(i = 0; i < items.length; i++){
          if($(items[i]).hasClass('active') == true){
              break;
          }
      }
      if(i != 0){
          // for tab
          $(items[i]).removeClass('active');
          $(items[0]).addClass('active');
          // for pane
          $(pane[i]).removeClass('show active');
          $(pane[0]).addClass('show active');
      }
  });*/
}
bootstrapTabControl();


function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}


</script> <!-- invisible tabs-->

<script>
        //drawXChart(js_vars.min_temp, js_vars.max_temp, js_vars.min_speed, js_vars.max_speed, js_vars.min_volt, js_vars.max_volt, js_vars.temp, js_vars.speed, js_vars.volt)
        //todo drawcharts mit series
        drawChart(js_vars.series_temp, js_vars.min_temp,js_vars.max_temp, js_vars.chart_title_temp, js_vars.x_title_temp, js_vars.y_title_temp, "temp");
        drawChart(js_vars.series_speed, js_vars.min_speed,js_vars.max_speed, js_vars.chart_title_speed, js_vars.x_title_speed, js_vars.y_title_speed, "speed");
        drawChart(js_vars.series_volt, js_vars.min_volt,js_vars.max_volt, js_vars.chart_title_volt, js_vars.x_title_volt, js_vars.y_title_volt, "volt");





</script>
{{ endblock }}