{% extends "layout.html" %}

{% block hdr %}
<style>
.table-xsm th,
.table-xsm td {
  padding: 0.01em;
}
</style>
{% endblock %}

{% block main %}
    <main role="main" class="container">
      <div class="starter-template">
        <h2>Spirent RF regression details</h2>
      </div>

      <table class="table table-xsm">
        <tbody>
          <tr id="OverallStatus">
            <td>Overall:</td><td><div id="Status" style="display:inline-block">{{ status.status }}</div>
              <button id="StartButton" style="display:none" onclick="RegressionClick('start')" type="button" class="btn btn-primary">Start</button>
              <button id="KillButton" style="display:none" onclick="RegressionClick('kill')" type="button" class="btn btn-primary">Kill</button>
            </td>
          </tr>
          <tr id="TimeLeftRow" style="display:none">
            <td>
              Approx time left:
            </td>
            <td>
              <div class="panel panel-default" data-toggle="tooltip" data-placement="top" style="display:inline-block">
                <div class="panel-body">
                  <div class="lead" id="clock"></div>
                </div>
              </div>
              <div id="clockEnd" style="display:inline-block"></div>
            </td>
          <tr>
            <td># receivers:</td><td><div id="NumReceivers"></div></td>
          </tr>
          <tr>
            <td>Global run #:</td><td><div id="GlobalRunNum"></div></td>
          </tr>
          <tr>
            <td>Test file:</td><td><div id="TestFilename"></div></td>
          </tr>
          <tr>
            <td>Runs:</td><td><div id="runs"></div></td>
          </tr>
        </tbody>
      </table>
      <hr/>
      <pre><textarea id="Diag" rows="10" cols="120"></textarea></pre>
      <a href="RFPlaybackRegression/regression_diag.txt">Current regression diag file</a>
      <br/>
      <a href="RFPlaybackRegression/regression_diag.txt.bak">Previous regression diag file (if present)</a>
      <div id="DetailedLogInfo" style="display:none">
        <p>Detailed log</p>
        <pre><textarea id="DetailedLog" rows="10" cols="120"></textarea></pre>
      </div>
    </main>
{% endblock %}

{% block userscript %}
    <script src="static/js/vendor/jquery.countdown.min.js"></script>
    <script>
      $("#RegressionLink").addClass("active");

      var $clock = undefined;

      disable_buttons_if_logged_out() ;

      function updateStatus() {
        $.ajax({
              dataType: "json",
              url: '/getRegressionDetail',
              type: 'GET',
              success: function(r) {
                  $('#OverallStatus').removeClass("table-warning") ;
                  $('#OverallStatus').removeClass("table-success") ;
                  if( r.active == 1 )
                    $('#OverallStatus').addClass("table-success") ;
                  else
                    $('#OverallStatus').addClass("table-warning") ;

                  if( $clock == undefined && r.ExpectedEndTime ) {
                    var endDate = new Date( r.ExpectedEndTime );
                    $clock = $('#clock') ;
                    $clock.countdown(
                      endDate,
                      function(event) {
                        $(this).html(event.strftime('%D days %H:%M:%S'));
                      })
                    $('#clockEnd').html("(End time: "+endDate.toLocaleString() + ")");
                  }

                  $('#Status').text(r.status) ;
                  if( r.status != "Running" )
                  {
                    $('#StartButton').show() ;
                    $('#KillButton').hide() ;
                    $('#TimeLeftRow').hide() ;
                  }
                  else
                  {
                    $('#StartButton').hide() ;
                    $('#KillButton').show() ;
                    $('#TimeLeftRow').show() ;
                  }
                  $('#NumReceivers').text(r.NumReceivers) ;
                  $('#GlobalRunNum').text(r.GlobalRunNum) ;
                  $('#TestFilename').text(r.TestFilename) ;
                  $('#runs').text(r.runs) ;
                  setTimeout(updateStatus, 5000 );
              }
          });
      }
      updateStatus() ;

      if( localStorage.getItem("diagHeight") != null )
        $("#Diag").height( localStorage.getItem("diagHeight") ) ;
      function updateDiag() {
        $.ajax({
            url: '/getRegressionDiag',
            type: 'GET',
            success: function(r) {
                localStorage.setItem("diagHeight", $("#Diag").height() ) ;

                if( r != $('#Diag').text() ) {
                  $('#Diag').text(r) ;
                  $('#Diag').scrollTop($('#Diag')[0].scrollHeight) ;
                }
                setTimeout(updateDiag, 5000 );
            }
        });
        $.ajax({
            url: '/getDetailedDiag',
            type: 'GET',
            success: function(r) {
                if( r != "" ) {
                    $('#DetailedLogInfo').show() ;
                    if( r != $('#DetailedLog').text() ) {
                        $('#DetailedLog').text(r) ;
                        $('#DetailedLog').scrollTop($('#DetailedLog')[0].scrollHeight) ;
                    }
                }
                
            }
        })
      }
      updateDiag();

      function RegressionClick(action) {
        $.ajax({
            url: "/putRegression",
            data: "action="+action,
            type: 'POST',
            success: function(response) {
                console.log(response);
                location.reload();
            }
        });
      }

      $( document ).ajaxError(function(event,request,settings) {
        console.log("ajax error:");
        console.log(event);
        console.log(request);
        console.log(settings);
        $("#warning-alert").show();
        $("#warning-text").text("URL: " + settings.url);
      });
    </script>
{% endblock %}