{% extends "layout.html" %}

{% block main %}
    <main role="main" class="container">

      <div class="alert alert-warning" id="warning-alert" style="display:none">
        <button type="button" class="close" data-dismiss="alert">x</button>
        <strong>Warning! </strong>
        <div id="warning-text"></div>
      </div>

      <div class="starter-template">
        <h2>Spirent RF overview</h2>
        {% autoescape false %}
        {{ web_notes }}
        {% endautoescape %}
      </div>

      <form action="/userRequest" method="post">
      <fieldset id="userFieldset">
      <table class="table">
        <thead class="thead-light">
          <tr>
            <th>User</th>
            <th>Description</th>
            <th>Time left</th>
            <th>Set hours left</th>
            <th/>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input name="name" class="form-control" type="text" value="{{ usage.name }}"/></td>
            <td><textarea name="desc" class="form-control" style="min-width:100%" rows="4" cols="80">{{ usage.desc }}</textarea></td>
            <td id="clock_td">
              <div class="panel panel-default" data-toggle="tooltip" data-placement="top">
                <div class="panel-body">
                  <div class="lead" id="clock"></div>
                </div>
              </div>
              <div id="clock_str"></div>
            </td>
            <td><input name="hours" class="form-control" type="text" value="0"/></td>
            <td><button onclick="userRequestClick()" type="button" class="btn btn-primary">Update</button></td>
          </tr>
        </tbody>
      </table>
      </fieldset>
      </form>

      <hr/>
      <table class="table">
        <thead class="thead-light">
          <tr>
            <th>Spirent RF status</th>
            <th>Regression status <a href="regression.html">detail</a></th>
            <th>USB drive</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><div id="SpirentStatus">?</div>
             {% if current_user.is_authenticated %}
              <a href="http://{{spirent_IP}}/" target="_blank">GSS6450 link</a>
             {% endif %}
            </td>
            <td><div id="RegressionStatus"></div>
              <form action="/putRegression" method="post">
                <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>
              </form>
            </td>
            <td id="mount_td">
              <span id="mount_status">?</span>
              <form action="/putMountUsbToggle" method="post">
                <button id="ToggleMountButton" onclick="toggleMountClick()" type="button" class="btn btn-primary" disabled>Toggle</button>
              </form>
            </td>
          </tr>
        </tbody>
      </table>

      <hr/>
      <table class="table">
        <thead class="thead-light">
          <tr>
            <th>Weekly Regression Status</th>
            <th>Enable/Disable</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
             {% if current_user.is_authenticated %}
              <div id="RegressionEnabledStatus">{{weekly_run}}</div>
             {% endif %}
            </td>
            <td><div id="RegressionToggle"></div>
              {% if current_user.is_authenticated %}
              <button id="EnableRegression" onclick="SetRegression('True')" type="button" class="btn btn-primary">Enable Regression</button>
              <button id="DisableRegression" onclick="SetRegression('False')" type="button" class="btn btn-primary">Disable Regression</button>
              {% endif %}
            </td>
          </tr>
        </tbody>
      </table>

      <hr/>
    {% if current_user.is_authenticated %}
      <div id="ReceiverList">
        Feel free to modify/use the following units when the regression system is not running:
        {% for rcvr in receiver.devs %}
          {% if regression.active %}
            <br/>Be careful - regression running:
            {% if rcvr.ag == None %}
              <a href="http://{{rcvr.ip}}" target="_blank">{{rcvr.long_desc}}</a>
            {% else %}
              <a href="/showAgReceiverInfo?ip={{rcvr.ip}}" target="_blank">{{rcvr.long_desc}}</a>
            {% endif %}
          {% else %}
            {% if rcvr.ag == None %}
              <br/><a href="http://{{rcvr.ip}}" target="_blank">{{rcvr.long_desc}}</a>
            {% else %}
              <br/><a href="/showAgReceiverInfo?ip={{rcvr.ip}}" target="_blank">{{rcvr.long_desc}}</a>
            {% endif %}
          {% endif %}
        {% endfor %}
      </div>
    {% endif %}
    </main><!-- /.container -->
{% endblock %}

{% block userscript %}
    <script src="static/js/vendor/jquery.countdown.min.js"></script>
    <script>
      var global_current_user = "{{ usage.name | safe }}" ;

      var global_active = 0 ;
      $("#HomeLink").addClass("active");
      function updateSpirentStatus() {
        $.ajax({
              url: '/getPlaybackStatus',
              type: 'GET',
              success: function(response) {
                  if( response.length > 100 ) {
                    $('#SpirentStatus').text( "Error?" ) ;
                  } else {
                    $('#SpirentStatus').text( response ) ;
                  }
                  setTimeout(updateSpirentStatus, 10000 );
              }
          });
      }
      updateSpirentStatus() ;

      function SetRegression(status) {
        if (status == 'True') {
          $.ajax({
            url: '/enableWeeklyRun',
            success: function(response) {
              console.log(response);
              location.reload();
            }
          })
        } else if (status == 'False') {
          $.ajax({
            url: '/disableWeeklyRun',
            success: function(response) {
              console.log(response);
              location.reload();
            }
          })
        }
      }

      function PutRegressionStatus(status,active) {
        $('#RegressionStatus').text(status);
        global_active = active ;
        if( active == 0 )
        {
          $('#StartButton').show() ;
          $('#KillButton').hide() ;
          $('#ToggleAntButton').prop('disabled',false) ;
        }
        else
        {
          $('#StartButton').hide() ;
          $('#KillButton').show() ;
          $('#ToggleAntButton').prop('disabled',true) ;
        }
        disable_buttons_if_logged_out() ;
      }
      function updateRegressionStatus() {
        $.ajax({
              dataType: "json",
              url: '/getRegressionDetail',
              type: 'GET',
              success: function(response) {
                  if( $('#RegressionStatus').text() != response.status )
                    PutRegressionStatus(response.status, response.active);
                  setTimeout(updateRegressionStatus, 10000 );
              }
          });
      }
      PutRegressionStatus("{{ regression.status }}", "{{ regression.active }}") ;
      setTimeout(updateRegressionStatus, 10000 );

      function updateMountStatus() {
        $.ajax({
              dataType: "json",
              url: "/getMountStatus",
              type: "GET",
              success: function(response) {
                  if( $("#mount_status").text() != response.status )
                    PutMountStatus(response.status);
                  setTimeout(updateMountStatus, 10000 );
              }
          });
      }
      function PutMountStatus(status) {
        $("#mount_status").text(status) ;
        if( global_active == 0 )
          $("#ToggleMountButton").prop('disabled',false) ;
        disable_buttons_if_logged_out() ;

        // Show warning if any drive is Unconnected or Unmounted
        if( status.indexOf("Un")>=0 )
        {
          $("#mount_td").addClass("table-danger");
          if( status.indexOf("Unconnected")>=0 )
            $("#ToggleMountButton").prop('disabled',true) ;
        }
        else
        {
          $("#mount_td").removeClass("table-danger");
        }
      }
      updateMountStatus();

      function formHelper(url,data="") {
        if( data == "" ) { data = $('form').serialize(); }
        $.ajax({
            url: url,
            data: data,
            type: 'POST',
            success: function(response) {
                console.log(response);
                location.reload();
            }
        });
      }

      function userRequestClick() {
        $.ajax({
            url: '/getUserInfo',
            type: 'GET',
            success: function(response) {
              if (response.name != global_current_user) {
                $("#warning-alert").show();
                $("#warning-text").text("Your active User is out of date. Please refresh the page before trying to set the active User. Automatically refreshing in 30 seconds...");
                setTimeout(function () {
                    location.reload();
                }, 30000);
              } else {
                formHelper("/putUserRequest");
              }
            }
        });
      };

      function toggleSwitchClick() {
        formHelper("/putSerialToggle");
      };
      function toggleMountClick() {
        formHelper("/putMountUsbToggle");
      };
      function showAgRxInfoClick() {
        $.ajax({
              url: '/getAgReceiverInfo',
              type: 'GET',
              success: function(response) {
                console.log(response);
              }
          });
      };
      function RegressionClick(action) {
        formHelper("/putRegression","action="+action);
      };

      var $clock = $('#clock');

      $clock.countdown(
        new Date( "{{ usage.end_time }}" ),
        function(event) {
          $(this).html(event.strftime('%D days %H:%M:%S'));
          if( event.offset.totalSeconds == 0 ) {
            $('#clock_td').removeClass("table-info");
            $('#clock_str').html("");
          } else {
            $('#clock_str').html("End time: {{ usage.end_time }}");
            $('#clock_td').addClass("table-info");
          }
        })

      $( 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 %}