From 5efd8128dc5bdb9ffc0aa4798f8aa303973794e6 Mon Sep 17 00:00:00 2001
From: gebele <gebele@in-silico.ch>
Date: Thu, 11 Jul 2019 08:20:10 +0000
Subject: moved form js functions to lazar-gui.js

---
 application.rb                  |   1 +
 public/javascripts/lazar-gui.js | 136 ++++++++++++++++++++++++++++++++++++
 views/predict.haml              | 151 +---------------------------------------
 3 files changed, 138 insertions(+), 150 deletions(-)

diff --git a/application.rb b/application.rb
index 7cebb2b..4ed4a31 100644
--- a/application.rb
+++ b/application.rb
@@ -96,6 +96,7 @@ get '/predict/modeldetails/:model' do
   data_entries = training_dataset.data_entries
   crossvalidations = model.crossvalidations
 
+  response['Content-Type'] = "text/html"
   return haml :model_details, :layout=> false, :locals => {:model => model, 
                                                            :crossvalidations => crossvalidations, 
                                                            :training_dataset => training_dataset,
diff --git a/public/javascripts/lazar-gui.js b/public/javascripts/lazar-gui.js
index 3b85f78..e87b0fa 100644
--- a/public/javascripts/lazar-gui.js
+++ b/public/javascripts/lazar-gui.js
@@ -37,6 +37,142 @@ var HttpClient = function() {
 
 // functions used in predict.haml
 
+// GET request
+/*$(function() {
+  $('a[data-toggle="tab"]').on('click', function (e) {
+    localStorage.setItem('lastTab', $(e.target).attr('href'));
+  });
+  var lastTab = localStorage.getItem('lastTab');
+  if (lastTab) {
+    $('a[href="'+lastTab+'"]').click();
+  }
+});*/
+
+// get and check input
+function getInput(){
+  identifier = document.getElementById("identifier").value.trim();
+  fileselect = document.getElementById("fileselect").value;
+  if (fileselect != ""){
+    return 1;
+  };
+  if (identifier != ""){
+    return 2;
+  };
+  return 0;
+};
+
+// display wait animation
+function showcircle() {
+  switch (getInput()){
+    case 0:
+      alert("Please draw or insert a chemical structure.");
+      return false;
+      break;
+    case 1:
+      if (checkfile() && checkboxes()){
+        button = document.getElementById("submit");
+        image = document.getElementById("circle");
+        button.parentNode.replaceChild(image, button);
+        $("img.circle").show();
+        return true;
+      };
+      return false;
+      break;
+    case 2:
+      if (checksmiles() && checkboxes()){
+        button = document.getElementById("submit");
+        image = document.getElementById("circle");
+        button.parentNode.replaceChild(image, button);
+        $("img.circle").show();
+        return true;
+      };
+      return false;
+      break;
+    default: false;
+  };
+  return false;
+};
+
+// check if a file was selected for upload
+function checkfile() {
+  var fileinput = document.getElementById("fileselect");
+  if(fileinput.value != "") {
+    //TODO check file type is csv
+    return true;
+  };
+  alert("Please select a file (csv).");
+  return false;
+};
+
+// check if a smiles string was entered
+function checksmiles () {
+  getsmiles();
+  if (document.form.identifier.value == "") {
+    alert("Please draw or insert a chemical structure.");
+    document.form.identifier.focus();
+    $("img.circle").hide();
+    return false;
+  };
+  return true;
+};
+
+// check if a model was selected
+function checkboxes () {
+  var checked = false;
+  $('input[type="checkbox"]').each(function() {
+    if ($(this).is(":checked")) {
+      checked = true;
+    };
+  });
+  if (checked == false){
+    alert("Please select an endpoint.");
+    $("img.circle").hide();
+    return false;
+  };
+  return true;
+};
+
+// display jsme editor with option
+function jsmeOnLoad() {
+  jsmeApplet = new JSApplet.JSME("appletContainer", "380px", "340px", {
+    //optional parameters
+    "options" : "polarnitro"
+  });
+document.JME = jsmeApplet;
+};
+
+// get and take smiles from jsme editor for input field
+function getsmiles() {
+  if (document.JME.smiles() != '') {
+    document.form.identifier.value = document.JME.smiles() ;
+  };
+};
+
+// show model details
+function loadDetails(id, model_url) {
+  button = document.getElementById("link"+id);
+  span = button.childNodes[1];
+  if (span.className == "fa fa-caret-right"){
+    span.className = "fa fa-caret-down";
+  } else if (span.className = "fa fa-caret-down"){
+    span.className = "fa fa-caret-right";
+  };
+  image = document.getElementById("circle"+id);
+  if ($('modeldetails'+id).length == 0) {
+    $(button).hide();
+    $(image).show();
+    aClient = new HttpClient();
+    aClient.get(model_url, function(response) {
+      var details = document.createElement("modeldetails"+id);
+      details.innerHTML = response;
+      document.getElementById("details"+id).appendChild(details);
+      $(button).show();
+      $(image).hide();
+      addExternalLinks();
+    });
+  }
+}
+
 
 // functions used in batch.haml
 
diff --git a/views/predict.haml b/views/predict.haml
index 1fbcf2f..cca2147 100644
--- a/views/predict.haml
+++ b/views/predict.haml
@@ -1,154 +1,5 @@
 %link{ :href=>"/jsme/jsa.css", :rel=>"stylesheet", :property=>"stylesheet"}
 %script{:src=>"/jsme/jsme.nocache.js"}
-:javascript
-  // GET request
-  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 );
-    }
-  };
-
-  /*$(function() { 
-    $('a[data-toggle="tab"]').on('click', function (e) {
-      localStorage.setItem('lastTab', $(e.target).attr('href'));
-    });
-    var lastTab = localStorage.getItem('lastTab');
-    if (lastTab) {
-      $('a[href="'+lastTab+'"]').click();
-    }
-  });*/  
-  
-  // get and check input
-  function getInput(){
-    identifier = document.getElementById("identifier").value.trim();
-    fileselect = document.getElementById("fileselect").value;
-    if (fileselect != ""){
-      return 1;
-    };
-    if (identifier != ""){
-      return 2;
-    };
-    return 0;
-  };
-
-  // display wait animation
-  function showcircle() {
-    switch (getInput()){
-      case 0:
-        alert("Please draw or insert a chemical structure.");
-        return false;
-        break;
-      case 1:
-        if (checkfile() && checkboxes()){
-          button = document.getElementById("submit");
-          image = document.getElementById("circle");
-          button.parentNode.replaceChild(image, button);
-          $("img.circle").show();
-          return true;
-        };
-        return false;
-        break;
-      case 2:
-        if (checksmiles() && checkboxes()){
-          button = document.getElementById("submit");
-          image = document.getElementById("circle");
-          button.parentNode.replaceChild(image, button);
-          $("img.circle").show();
-          return true;
-        };
-        return false;
-        break;
-      default: false;
-    };
-    return false;
-  };
-
-  // check if a file was selected for upload
-  function checkfile() {
-    var fileinput = document.getElementById("fileselect");
-    if(fileinput.value != "") {
-      //TODO check file type is csv
-      return true;
-    };
-    alert("Please select a file (csv).");
-    return false;
-  };
-
-  // check if a smiles string was entered
-  function checksmiles () {
-    getsmiles();
-    if (document.form.identifier.value == "") {
-      alert("Please draw or insert a chemical structure.");
-      document.form.identifier.focus();
-      $("img.circle").hide();
-      return false;
-    };
-    return true;
-  };
-
-  // check if a model was selected
-  function checkboxes () {
-    var checked = false;
-    $('input[type="checkbox"]').each(function() {
-      if ($(this).is(":checked")) {
-        checked = true;
-      };
-    });
-    if (checked == false){
-      alert("Please select an endpoint.");
-      $("img.circle").hide();
-      return false;
-    };
-    return true;
-  };
-
-  // display jsme editor with option
-  function jsmeOnLoad() {
-    jsmeApplet = new JSApplet.JSME("appletContainer", "380px", "340px", {
-      //optional parameters
-      "options" : "polarnitro"
-    });
-  document.JME = jsmeApplet;
-  };
-
-  // get and take smiles from jsme editor for input field
-  function getsmiles() {
-    if (document.JME.smiles() != '') {
-      document.form.identifier.value = document.JME.smiles() ;
-    };
-  };
-
-  // show model details
-  function loadDetails(id) {
-    button = document.getElementById("link"+id);
-    span = button.childNodes[1];
-    if (span.className == "fa fa-caret-right"){
-      span.className = "fa fa-caret-down";
-    } else if (span.className = "fa fa-caret-down"){
-      span.className = "fa fa-caret-right";
-    };
-    image = document.getElementById("circle"+id);
-    if ($('modeldetails'+id).length == 0) {
-      $(button).hide();
-      $(image).show();
-      aClient = new HttpClient();
-      aClient.get("#{to("/predict/modeldetails/")}"+id, function(response) {
-        var details = document.createElement("modeldetails"+id);
-        details.innerHTML = response;
-        document.getElementById("details"+id).appendChild(details);
-        $(button).show();
-        $(image).hide();
-        addExternalLinks();
-      });
-    }
-  }
-
 // whole site content needs to be in one form. Input and checkboxes are proofed by js functions. 
 %form{:name => "form", :action => to('/predict'), :method => "post", :enctype => "multipart/form-data", :onsubmit => "return !!(showcircle())" }
   %fieldset#top.card.bg-light
@@ -186,7 +37,7 @@
                   %label{:for => "selection[#{model.species.gsub(/\s+/, "_")}]"}
                     = model.species
                 %span.col-6
-                  %a.btn.btn-outline-info{:role=>"button", :data=>{:toggle=>"collapse"}, :href=>"#details#{model.id}", :aria=>{:expanded=>"false", :controls=>"details#{model.id}"}, :onclick=>"loadDetails('#{model.id}')", :id => "link#{model.id}", :style=>"font-size:small;"}
+                  %a.btn.btn-outline-info{:role=>"button", :data=>{:toggle=>"collapse"}, :href=>"#details#{model.id}", :aria=>{:expanded=>"false", :controls=>"details#{model.id}"}, :onclick=>"loadDetails('#{model.id}','#{to("/predict/modeldetails/#{model.id}")}')", :id => "link#{model.id}", :style=>"font-size:small;"}
                     %span.fa.fa-caret-right
                     Details | Validation
                   %img.h2{:src=>"/images/wait30trans.gif", :id=>"circle#{model.id}", :class=>"circle#{model.id}", :alt=>"wait", :style=>"display:none;"}
-- 
cgit v1.2.3