1 files changed, 131 insertions, 0 deletions
diff --git a/views/task.haml b/views/task.haml
new file mode 100644
index 0000000..f88bdc2
--- /dev/null
+++ b/views/task.haml
@@ -0,0 +1,131 @@
+: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("/")}" + '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).show();
+        $("a#detailsbutton_"+id).show();
+        //pagePredictions(task_id,model_id,id);
+      };
+    });
+  };
+  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){
+    //var compounds = #{@compounds_ids};
+    //console.log(compounds[id]);
+    //var compound = compounds[id];
+    button = document.getElementById("detailsbutton_"+id);
+    span = button.childNodes[1];
+    if (span.className == "glyphicon glyphicon-menu-right"){
+      span.className = "glyphicon glyphicon-menu-down";
+      $('#data-container_'+id).show();
+      $('#pager_'+id).show();
+      $('#pager_'+id).pagination({
+        dataSource: '#{to("/")}' + 'task/?predictions=' + task_id + '&model=' + model_id ,
+        locator: 'predictions',
+        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).height(300);
+        }
+      });
+    } else if (span.className = "glyphicon glyphicon-menu-down"){
+      span.className = "glyphicon glyphicon-menu-right";
+      $('#data-container_'+id).hide();
+      $('#pager_'+id).hide();
+    };
+  };
+  $("a").click(function(event) {
+    event.preventDefault();
+  });
+%div.well
+  %a.btn.btn-warning{:href => to('/predict')}
+    %span.glyphicon.glyphicon-menu-left{:aria=>{:hidden=>"true"}}
+    New Prediction
+
+  / show file name
+  %topline
+    %div.row
+      %div.col-md-4
+        %h3 Batch Prediction Results:
+      %div.col-md-8
+        %h3= @filename
+
+
+  - @models.each_with_index do |model,idx|
+    - m = Model::Validation.find model unless model == "Cramer"
+    - task = @tasks[idx].id
+    - predictions = @tasks[idx].predictions["#{model}"]
+    #result.panel{:id=>idx}
+      %div.row
+        %div.col-md-6
+          %h5= (model == "Cramer") ? "Oral toxicity (Cramer rules)" : (m.endpoint =~ /Mutagenicity/i ? "Consensus mutagenicity" : "#{m.endpoint} (#{m.species})")
+        %div.col-md-6.h5
+          %a.btn.btn-default.btn-xs{:id => "detailsbutton_#{idx}", :data=>{:toggle=>"collapse"}, :href=>"javascript:void(0)", :onclick=>"pagePredictions('#{task}','#{model}','#{idx}')", :style=>"display:none;font-size:small;"}
+            %span.glyphicon.glyphicon-menu-right
+            Details
+          %a.btn.btn-default.btn-xs{:id => "downbutton_#{idx}", :href=>"#{to("/predict/csv/#{task}/#{model}/#{@filename}")}", :title=>"download", :style=>"display:none;font-size:small;"}
+            %span.glyphicon.glyphicon-download-alt
+            CSV
+      %div{:id=>"progress_#{idx}", :style=>"width:100%;height:2px;position:relative;background-color:#ccc;"}
+        %div{:id=>"bar_#{idx}", :style=>"background-color: #4CAF50;width:10px;height:2px;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(){
+          markers[#{idx}] = setInterval(function(){
+            renderTask('#{task}','#{model}',#{idx});
+          }, timer );
+        });
+      #data-container{:id=>idx,:style=>"width:100%;"}
+      #pager{:id=>idx}