:javascript

  function progress(value,id) {
    var percent = Math.round(value);
    var bar = document.getElementById("bar_"+id);
    var prog = document.getElementById("progress_"+id);
    bar.style.width = value + '%';
    if (percent == 100){
      prog.style.display = "none";
    };
  };

  var HttpClient = function() {
    this.get = function(aUrl, aCallback) {
    var anHttpRequest = new XMLHttpRequest();
    anHttpRequest.onreadystatechange = function() {
    if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
      aCallback(anHttpRequest.responseText);
    }
      anHttpRequest.open( "GET", aUrl, true );
      anHttpRequest.send( null );
    }
  };  

  var markers = [];

  function renderTask(task_id,model_id,id) {
    var uri = "#{to("/prediction/task/?turi=")}" + task_id;
    var aClient = new HttpClient();
    aClient.get(uri, function(res) {
      var response = JSON.parse(res);
      progress(response['percent'],id);
      if (response['percent'] == 100){
        window.clearInterval(markers[id]);
        $("a#downbutton_"+id).removeClass("disabled");
        $("a#detailsbutton_"+id).removeClass("disabled");
        $("a#downbutton_"+id).removeClass("btn-outline-info");
        $("a#detailsbutton_"+id).removeClass("btn-outline-info");
        $("a#downbutton_"+id).addClass("btn-info");
        $("a#detailsbutton_"+id).addClass("btn-info");
      };
    });
  };
  function simpleTemplating(data) {
    var html = '<ul class=pagination>';
    $.each(data, function(index, item){
      html += '<li>'+ item +'</li>'+'</br>';
    });
    html += '</ul>';
    return html;
  };
  function pagePredictions(task_id,model_id,id){
    button = document.getElementById("detailsbutton_"+id);
    span = button.childNodes[1];
    if (span.className == "fa fa-caret-right"){
      span.className = "fa fa-caret-down";
      $('#data-container_'+id).removeClass("d-none");
      $('#data-container_'+id).show();
      $('#pager_'+id).show();
      $('#pager_'+id).pagination({
        dataSource: '#{to("/prediction/task/?predictions=")}' + task_id + '&model=' + model_id ,
        locator: 'prediction',
        totalNumber: #{@compounds.size},
        pageSize: 1,
        showPageNumbers: true,
        showGoInput: true,
        formatGoInput: 'go to <%= input %>',
        formatAjaxError: function(jqXHR, textStatus, errorThrown) {
          $('#data-container_'+id).html(errorThrown);
        },
        /*ajax: {
          beforeSend: function() {
            $('#data-container_'+id).html('Loading content ...');
          }
        },*/
        callback: function(data, pagination) {
          var html = simpleTemplating(data);
          $('#data-container_'+id).html(html);
          //$('#data-container_'+id).css("min-height", $(window).height() + "px" );
        }
      });
    } else if (span.className = "fa fa-caret-down"){
      span.className = "fa fa-caret-right";
      $('#data-container_'+id).hide();
      $('#pager_'+id).hide();
    };
  };
%div.card
  %a.btn.btn-warning{:href => to("/predict?tpid=#{@pid}")}
    %span.fa.fa-caret-left{:aria=>{:hidden=>"true"}}
    New Prediction
%div.card.bg-light
  %div.card-body
    %h3.card-title="Batch prediction results for:  #{@filename}"

    - @models.each_with_index do |model,idx|
      - m = Model::Validation.find model
      - task = @tasks[idx].id
      #result.caret.bg-light{:id=>idx}
        %div.card-body
          %div.row
            %div.col-6
              %h5.card-title="#{m.endpoint} (#{m.species})"
              #pager{:id=>idx}
            %div.col-6
              %a.btn.btn-outline-info.btn-sm.disabled{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('#{task}','#{model}','#{idx}')"}
                %span.fa.fa-caret-right
                Details
              %a.btn.btn-outline-info.btn-sm.disabled{:id => "downbutton_#{idx}", :href=>"#{to("/predict/csv/#{task}/#{model}/#{@filename}")}", :title=>"download"}
                %span.fa.fa-download
                CSV
          %div{:id=>"progress_#{idx}", :style=>"width:100%;height:3px;position:relative;background-color:#ccc;"}
            %div{:id=>"bar_#{idx}", :style=>"background-color: #4CAF50;width:10px;height:3px;position:absolute;"}
          - # increase interval timer for large datasets 
          - ctimer = ((@compounds.size/1000) == 0 ? 1000 : ((@compounds.size/1000)*1000))
          :javascript
            var timer = #{ctimer};
            $(document).ready(function(){
              // check button class before execute a task
              if (#{idx} > 0){
                markers[#{idx}] = setInterval(function(){
                  var button = document.getElementById("detailsbutton_#{idx-1}");
                  if(!button.classList.contains('disabled')){
                    renderTask('#{task}','#{model}',#{idx});
                  }
                }, timer );
              }else{
                markers[#{idx}] = setInterval(function(){
                  renderTask('#{task}','#{model}',#{idx});
                }, timer );
              };
            });
          #data-container.card.d-none{:id=>idx}