{% extends "common.html" %}
{% block title %}{{title}}{% endblock %}
{% block head %}
  {{ super() }}
{% endblock %}
{% block page %}{{title}}{% endblock %}
{% block content %}

<script type="text/javascript">
$(function(){
  $('.Request').click(function () {
      var action = "";
      var request_id = $(this).attr('id');
      var loader_alert = $('#statusAlert');

      $('.loader').show();
      loader_alert.removeClass('alert-danger').addClass('alert-info');
      loader_alert.html('Ваш запрос обрабатывается');

      $('.Request #' + request_id).css('color', 'black');
      if ($(this).hasClass('approveRequest')) {
          action = 'approve';
      } else if ($(this).hasClass('unApproveRequest')) {
          action = 'cancel_approve';
      } else if ($(this).hasClass('startRequest')) {
          action = 'start';
      } else if ($(this).hasClass('stopRequest')) {
          action = 'stop';
      } else if ($(this).hasClass('discardRequest')) {
          action = 'discard';
      }

      $.ajax({
          url: '/change_request',
          data: JSON.stringify({request_id: request_id, action: action }),
          type: 'POST',
          success: function (response) {
              var answer = JSON.parse(response);
              if (action == 'discard') {
                  $('#' + request_id + '-tab a').addClass('disabled');
                  $('li#' + request_id + 'tab').prop('title', 'Заявка была удалена. Обновите страницу');
                  $('#typeSelector li:eq(0) a').tab('show');
              }
              if (!jQuery.isEmptyObject(answer.error)) {
                  loader_alert.addClass('alert-danger').removeClass('alert-info');
                  loader_alert.html("<strong>" + answer.error + "</strong>");
              } else {
                  loader_alert.addClass('alert-success').removeClass('alert-info').removeClass('alert-danger');
                  loader_alert.html('Заявка: ' + request_id + ' Действие: ' + action + ' успешно');
              }
              updateStatus();
          },
          error: function (error) {
              console.log('error!');
              console.log(error);
          }
      });
  });
  $('.form-horizontal').submit(function () {
      var serviceLevel;
      var formFields = $(this).serializeArray();
      var request_id = $(this).parent().parent().parent()[0].getAttribute('id');
      var loader_alert = $('#statusAlert');

      $('.loader').show();
      loader_alert.html('Ваш запрос обрабатывается');

      if ($(this).hasClass('namespace-form')) {
          serviceLevel = 'namespace';
      } else if ($(this).hasClass('prestable-form')) {
          serviceLevel = 'prestable';
      } else if ($(this).hasClass('testing-form')) {
          serviceLevel = 'testing';
      }
      else {
          serviceLevel = 'production';
      }

      $.ajax({
          url: '/update_request',
          data: 'request_id=' + request_id +'&request_type=' + serviceLevel + '&' + $(this).serialize(),
          type: 'POST',
          timeout: 6000000,
          beforeSend: function() {
              loader_alert.removeClass('alert-danger').removeClass('alert-success').addClass('alert-info');
              loader_alert.show();
              $.each(formFields, function(index, value) {
                  if (value.name != csrf_token) {
                      $('.' + serviceLevel + '-form .' + value.name).removeClass('has-danger');
                      $('.' + serviceLevel + '-form .' + value.name + ' .textError').empty();
                  }
            });
          },
          success: function(response) {
              var answer = JSON.parse(response);
              console.log(answer);
              if (!jQuery.isEmptyObject(answer.form_errors)) {
                  loader_alert.addClass('alert-danger').removeClass('alert-info');
                  loader_alert.html("Во время проверки формы произошли ошибки. Исправьте их и попробуйте снова");
                  $.each(answer.form_errors, function (class_id, text) {
                      $('.' + serviceLevel + '-form .' + class_id).addClass('has-danger').removeClass('has-success');
                      $('.' + serviceLevel + '-form .' + class_id + ' .textError').html(
                          "<div class='col-form-label text-danger'>" + text + "</div>");
                  });
              } else if (!jQuery.isEmptyObject(answer.error)) {
                  loader_alert.addClass('alert-danger').removeClass('alert-info');
                  loader_alert.html("<strong>" + answer.error + "</strong>");
              } else {
                  loader_alert.addClass('alert-success').removeClass('alert-info');
                  loader_alert.html('Параметры заявки успешно изменены');
              }
              updateStatus();
          },
          error: function (error) {
              console.log('error!');
              console.log(error);
          }
      });
      return false
  });
  $('[data-toggle="tooltip"]').tooltip();
});
function updateStatus() {
    var request_id = $('.active.tab-pane')[0].getAttribute('id');
    var status_area = $('#' + request_id + '-status');
    $.ajax({
        'url': '/get_request_status',
        'data': JSON.stringify({request_id: request_id}),
        'type': 'POST',
        success: function(response) {
            var answer = JSON.parse(response);
            fillStatus(status_area, answer);
        },
        error: function (error) {
              console.log('error!');
              console.log(error);
        }
    })
}
function fillStatus(status_area, answer) {
    status_area.find('.job_status').html(answer.job_status.job);
    status_area.find('.job_service_status').html(answer.job_status.service);
    status_area.find('.job_delivery_status').html(answer.job_status.delivery);
}
setInterval(updateStatus, 60000);
</script>
    {% if not admin_mode %}
        <div class="d-flex align-self-center"><h2>У тебя нет доступа к этой странице</h2></div>
    {% else %}
        <p class="text-center">Внимание! Доступ к данной странице только у пользователей с ролью "Системный администратор" сервиса SaaS</p>
        <div class="loader alert alert-info" style="display: none" id="statusAlert">
            <p>Запрос обрабатывается, ожидайте. Если сообщение висит слишком долго, значит что-то пошло не так.</p>
        </div>
        {% if not requests %}
            <h2 class="text-center">В данный момент отсутствуют активные заявки</h2>
        {% else %}
            <ul id="typeSelector" class="nav nav-tabs">
                {% for request in requests %}
                    <li class="nav-item" id="{{ request }}-tab">
                    {% if request == requests | first %}
                        <a class="nav-link active" data-toggle="tab" href="#{{ request | replace(':', '\:')}}" >{{ request }}</a>
                    {% else %}
                        <a class="nav-link" data-toggle="tab" href="#{{ request | replace(':', '\:')}}" >{{ request }}</a>
                    {% endif %}
                    </li>
                {% endfor %}
            </ul>
            <div class="tab-content">
              {% for request in requests %}
                  {% if request == requests | first %}
                      <div class="tab-pane fade show active" id="{{ request }}">
                  {% else %}
                      <div class="tab-pane fade" id="{{ request }}">
                  {% endif %}
                  <div class="row">
                        <div class="col-8">
                            <h3 style="padding-left: 15px">Параметры заявки</h3>
                            <label class="col-form-label" data-placement="right" style="padding-left: 15px">Тикет в трекере</label>
                            <a href="https://st.yandex-team.ru/{{ requests[request]['job_ticket'] }}" target="_blank">{{ requests[request]['job_ticket']}}</a>
                            {% if requests[request]['job_info']['job_type'] == 'namespace' %}
                                {{ macro.render_namespace_form(requests[request]['job_form']) }}
                            {% elif 'prestable' in requests[request]['job_info']['service_ctype'] %}
                                {{ macro.render_prestable_form(requests[request]['job_form']) }}
                            {% elif requests[request]['job_info']['service_ctype'] == 'testing' %}
                                {{ macro.render_testing_form(requests[request]['job_form']) }}
                            {% else %}
                                {{ macro.render_production_form(requests[request]['job_form']) }}
                            {% endif %}
                        </div>
                        <div class="col-4">
                            <div class="col-xs-6 form-group">
                            <h3>Действия</h3>
                                <a href="#" role="button" id="{{ request }}" class="Request approveRequest btn btn-light btn-sm">Подтвердить</a>
                                <a href="#" role="button" id="{{ request }}" class="Request unApproveRequest btn btn-light btn-sm">Снять подтверждение</a>
                                <a href="#" role="button" id="{{ request }}" class="Request startRequest btn btn-light btn-sm">Запуск</a>
                                <a href="#" role="button" id="{{ request }}" class="Request stopRequest btn btn-light btn-sm">Остановка</a>
                                <a href="#" role="button" id="{{ request }}" class="Request discardRequest btn btn-light btn-sm">Удалить</a>
                            </div>
                            <div class="col-xs-6 form-group">
                                <h3>Статус</h3>
                                <table class="table table-sm" id="{{ request }}-status" style="max-width: 10%;">
                                    <tr>
                                        <td class="col-xs-1">
                                            <label class="control-label">Заявка</label>
                                        </td>
                                        <td class="col-xs-1">
                                            <span class="badge badge-light job_status">{{ requests[request]['job_status']['job'] }}</span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                      </div>
                      </div>
              {% endfor %}
            </div>
        {% endif %}
    {% endif %}
{% endblock %}
