summaryrefslogtreecommitdiff
path: root/views
diff options
context:
space:
mode:
authorgebele <gebele@in-silico.ch>2019-07-11 08:20:10 +0000
committergebele <gebele@in-silico.ch>2019-07-11 08:20:10 +0000
commit5efd8128dc5bdb9ffc0aa4798f8aa303973794e6 (patch)
tree7beac4ecf00fa3ec793f9c78f79dd8bb4c71ef0e /views
parentbcc618026db1ee7a030391853b55bbf6116ab89a (diff)
moved form js functions to lazar-gui.js
Diffstat (limited to 'views')
-rw-r--r--views/predict.haml151
1 files changed, 1 insertions, 150 deletions
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;"}