{% extends "container-2col.html" %}


{% block body %}
  <section>
      <header>
          <h1>
              {{repository.owner}}/{{repository.name}}<a href="https://github.com/{{repository.owner}}/{{repository.name}}">
                <span class="fa fa-github"></span>
              </a> 
              {% if not repository.has_rights(current_user) %}
                <div class="btn {{repository.active|btn}} btn-xs"><span class="glyphicon glyphicon-off"></span></div>
              {% endif %}
              {% if tests.items %}
              <div>
                  <img alt="Coverage" src="{{ url_for('.repo_badge_coverage', owner=repository.owner, repository=repository.name) }}" />
                  <img alt="Text badges" src="{{ url_for('.repo_texts_count', owner=repository.owner, repository=repository.name) }}" />
                  <img alt="Metadata badges" src="{{ url_for('.repo_metadata_count', owner=repository.owner, repository=repository.name) }}" /><br />
                  {% if repository.last_master_test.words_count|count > 0 %}
                      <img alt="Words badges" src="{{ url_for('.repo_words_count', owner=repository.owner, repository=repository.name) }}" />
                      {% for wc in repository.last_master_test.words_count %}
                          <img alt="{{wc.lang}} badges" src="{{ url_for('.repo_words_count', owner=repository.owner, repository=repository.name, lang=wc.lang) }}" />
                      {% endfor %}
                  {% endif %}
              </div>

              {% endif %}
          </h1>
      </header>
      <div class="row">
          {% if repository.has_rights(current_user) %}
          <div class="col-md-4">
              <h2>
                Settings
              </h2>
              <p><button id="state" class="btn {{repository.active|btn}} btn-xs">
                    <span class="glyphicon glyphicon-off"></span>
                    <span class="fa fa-refresh" style="display: none;"></span>
                  </button>
                  Toggle the repository for Hook &amp; Travis
              </p>
              <p>In order for HookTest to communicate with the current system, you need to set the Environment Variable
                  <em>HOOK_SECRET</em> to :
                  <pre class="travis_env">{{repository.travis_env}}</pre>
                <a href="{{url_for(".api_update_token", owner=repository.owner, repository=repository.name)}}" id="refresh-sha">
                    <span class="btn btn-link"><span class="fa fa-refresh" style="display: none;"></span></span>
                    <small>Click here to refresh</small>
                </a>
              </p>
          </div>
          <div class="col-md-8">
          {% else %}
          <div class="col-md-12">
          {% endif %}
              <h2>History and progression</h2>
              <div id="history"></div>
          </div>
      </div>
      <div class="row">
          <div class="col-md-12">
              <table class="table table-striped">
                  <thead>
                      <tr>
                          <th>Date</th>
                          <th>Build</th>
                          <th>Ref</th>
                          <th>User</th>
                          <th>Coverage</th>
                          <th>More</th>
                      </tr>
                  </thead>
                  <tbody>
                      {% for test in tests.items %}

                          <tr>
                              <td>{{test.run_at}}</td>
                              <td><a href="{{test.travis_uri}}">{{test.travis_build_id}}</a></td>
                              <td>{{test|nice_link_to_source}}</td>
                              <td><img class="user user-20" src="{{test.avatar}}?s=20" alt="{{test.user}}" /></td>
                              <td>{{test.coverage}}</td>
                              <td>
                                  <a class="btn btn-xs btn-info" style="margin:1px;" href="{{url_for('.repository_test', owner=repository.owner, repository=repository.name, uuid=test.uuid)}}" title="Status checking"><span class="glyphicon glyphicon-cog"></span></a>
                                  <a class="btn btn-xs btn-link" style="margin:1px;" href="{{test.comment_uri}}" title="Github Comment"><span class="fa fa-file-text-o"></span></a>

                              </td>
                          </tr>
                      {% endfor %}
                  </tbody>
              </table>
              {% if tests.pages > 1 %}
              <nav aria-label="Page navigation">
                  <ul class="pagination">
                      {% if tests.has_prev %}
                    <li>
                      <a class="first" href="{{url_for('.repository', owner=repository.owner, repository=repository.name, page=1)}}" aria-label="First">
                        <span aria-hidden="true" class=" glyphicon glyphicon-backward"></span>
                      </a>
                    </li>
                    <li>
                      <a class="prev" href="{{url_for('.repository', owner=repository.owner, repository=repository.name, page=tests.prev_num)}}" aria-label="Previous">
                        <span aria-hidden="true" class=" glyphicon glyphicon-chevron-left"></span>
                      </a>
                    </li>
                      {% endif %}
                    <li class="disabled"><a>{{tests.page}}</a></li>
                      {% if tests.has_next %}
                    <li>
                      <a class="next" href="{{url_for('.repository', owner=repository.owner, repository=repository.name, page=tests.next_num)}}" aria-label="Next">
                        <span aria-hidden="true" class=" glyphicon glyphicon-chevron-right"></span>
                      </a>
                    </li>
                    <li>
                      <a class="last" href="{{url_for('.repository', owner=repository.owner, repository=repository.name, page=tests.pages)}}" aria-label="Last">
                        <span aria-hidden="true" class=" glyphicon glyphicon-forward"></span>
                      </a>
                    </li>
                      {% endif %}
                  </ul>
                </nav>
              {% endif %}
          </div>
      </div>
  </section>
{% endblock %}

{% block script %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
$(document).ready(function() {

  {% if repository.has_rights(current_user) %}
  $('#state').on('click', function(event) {
    event.preventDefault();
    var el = $(this),
        spinner = el.find(".fa-refresh"),
        on = el.find(".glyphicon-off");
    el.removeClass("btn-success btn-danger").addClass("btn-default");
    spinner.show().addClass("fa-spin");
    on.hide();

    $.ajax({
      url: '{{url_for(".api_user_repository_switch", owner=repository.owner, repository=repository.name)}}',
      type: 'PUT',
      success: function(data) {
        spinner.removeClass("fa-spin").hide();
        el.removeClass("btn-default")
        on.show();
        if(data.status && data.status == true) {
          el.addClass("btn-success");
          location.reload();
        } else if(data.status === false) {
          el.addClass("btn-danger");
        } else {
          alert("Error during switch of the repository")
        }
      },
      error : function(data) {
        alert("Error during switch of the repository")
      }
    });
  });
  $('#refresh-sha').on('click', function(event) {
    event.preventDefault();
    var el = $(this),
        spinner = el.find(".fa-refresh"),
        on = el.find(".glyphicon-off");
    spinner.show().addClass("fa-spin");

    $.ajax({
      url: el.attr("href"),
      type: 'PATCH',
      success: function(data) {
        location.reload()
      },
      error : function(data) {
        alert("Error during switch of the repository")
      }
    });
  });
    {% endif %}
});
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = parseInt(d3.select("#history").style("width")) - margin.left - margin.right - Math.floor(parseInt(d3.select("#history").style("width"))/10),
    height = parseInt(d3.select("#history").style("width"))/16*9 - margin.top -margin.bottom;

var parseDate = d3.time.format("%a, %d %b %Y %X").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .ticks(4)
    .orient("right")
    .tickFormat(function(d) { return d/100;});

var line = d3.svg.line()
    .x(function(d) { return x(Date.parse(d.run_at)); })
    .y(function(d) { return y(Math.round(d.coverage *100)); });


var svg = d3.select("#history").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("{{ url_for('.api_repo_history', owner=repository.owner, repository=repository.name) }}", function(error, data) {
  if (error) throw error;

  data = data.logs;

  x.domain(d3.extent(data, function(d) { return Date.parse(d.run_at); }));
  y.domain(d3.extent(data, function(d) { return Math.round(d.coverage *100); }));

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Coverage (%)");

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
});

</script>
{% endblock %}