{% extends "layouts/base.html" %}

{% block title %} Executed Tasks {% endblock %}

<!-- Element injected in the BODY element -->
{% block body_class %} {% endblock body_class %}

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css">
  <!-- jsGrid -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsgrid@1.5.3/dist/jsgrid.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsgrid@1.5.3/dist/jsgrid-theme.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/static/assets/css/adminlte.min.css">

{% endblock stylesheets %}

{% block content %}

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Organizations</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/index">Home</a></li>
              <li class="breadcrumb-item active">Tasks</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Executed tasks:</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <div id="taskGrid"></div>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}

  <!-- jQuery -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
  <!-- Bootstrap 4 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  <!-- jsGrid -->
  <script src="https://cdn.jsdelivr.net/npm/jsgrid@1.5.3/dist/jsgrid.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/moment@2.30.1/moment.min.js"></script>
  <!-- AdminLTE App -->
  <script src="/static/assets/js/adminlte.min.js"></script>

  <!-- page script -->
  <script>
    var DateField = function (config) {
      jsGrid.Field.call(this, config);
    };

    DateField.prototype = new jsGrid.Field({
      sorter: function (date1, date2) {
        return moment(date1) - moment(date2);
      },
      itemTemplate: function (value) {
        return moment(value).locale('en').format('YYYY-MM-DD HH:mm:ss.SSS');
      },
    });

    jsGrid.fields.date = DateField;

    $(function () {
      $("#taskGrid").jsGrid({
          height: "auto",
          width: "100%",

          pageSize: 20,

          filtering: true,
          sorting: true,
          paging: true,
          pageLoading: true,
          autoload: true,

          controller: {
              loadData: function(filter) {
                  var d = $.Deferred();

                  $.ajax({
                      url: "/api/tasks",
                      data: filter,
                      dataType: "json"
                  }).done(function(response) {
                      d.resolve(response);
                  });

                  return d.promise();
              }
          },

          fields: [
              { name: "type", title: "Type", type: "text" },
              { name: "org_id", title: "GitHub Organization", type: "text", width: 70,
                itemTemplate: function(value, item) {
                  return "<a href='https://github.com/" + value + "'>" + value + "</a>";
                }
              },
              { name: "repo_name", title: "Repo name", type: "text", width: 50,
                itemTemplate: function(value, item) {
                  return "<a href='https://github.com/" + item.org_id + "/" + value + "'>" + value + "</a>";
                }
              },
              { name: "pull_request", title: "Pull Request", type: "number", align: "center", width: 50,
                itemTemplate: function(value, item) {
                  if (value > 0) {
                    return "<a href='https://github.com/" + item.org_id + "/" + item.repo_name + "/pull/" + value + "'>#" + value + "</a>";
                  } else {
                    return "N/A";
                  }
                }
              },
              { name: "status", title: "Status", type: "text", align: "center", width: 40,
                itemTemplate: function(value) {
                 return value.toUpperCase();
                }
              },
              { name: "log", title: "Log", type: "text" },
              { name: "cache_stats", title: "Cache Usage", type: "text" },
              { name: "rate_limit_remaining", title: "Remaining Rate Limit", type: "text" },
              { name: "created_at", title: "Creation Time", type: "date", width: 60 },
              { name: "updated_at", title: "Update Time", type: "date", width: 60 }
          ]
      });
    });
  </script>

{% endblock javascripts %}
