1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
%link{ :href=>"/jsme/jsa.css", :rel=>"stylesheet"}
%script{:src=>"/jsme/jsme.nocache.js"}
:javascript
function showcircle() {
if (checksmiles() && checkboxes()){
button = document.getElementById("submit");
image = document.getElementById("circle");
button.parentNode.replaceChild(image, button);
$("img.circle").show();
return true;
};
return false;
};
function checksmiles () {
if (document.form.identifier.value == "") {
alert("Please draw or insert a chemical structure.");
document.form.identifier.focus();
//$('.progress-bar').hide();
$("img.circle").hide();
return false;
};
return true;
};
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;
};
function jsmeOnLoad() {
jsmeApplet = new JSApplet.JSME("appletContainer", "380px", "340px", {
//optional parameters
"options" : "polarnitro"
});
document.JME = jsmeApplet;
};
function getsmiles() {
if (document.JME.smiles() != '') {
document.form.identifier.value = document.JME.smiles() ;
};
};
// init task for progress
// 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.well
%h2 1. Draw a chemical structure
:javascript
$("a#linkInsert").click(function () {
$("#insert").toggle();
document.location = document.location + "#" + "insert";
});
#insert
%p
%label
#appletContainer
%br
%label{:for => 'identifier'}
or enter the
%a{:href => "http://en.wikipedia.org/wiki/Simplified_molecular_input_line_entry_specification", :rel => "external"} SMILES
string:
%br
%input{:type => 'text', :name => 'identifier', :id => 'identifier', :size => '60'}
%fieldset#middle.well
%h2 2. Select one or more endpoints
:javascript
$("a#linkModels").click(function () {
$("#models").toggle();
document.location = document.location + "#" + "models";
});
#models
- @endpoints.each do |endpoint|
%div
%b= endpoint
- @models.select{|m| m.endpoint == endpoint}.each do |model|
%div{:id => model.id}
%input{:type => "checkbox", :name => "selection[#{model.id}]", :id => "selection[#{model.id}]", :value => true, :disabled => false}
%label{:for => "selection[#{model.id}]"}
= model.species
%p
%fieldset#bottom.well
%div.row
%div.col-md-2
%h2
3. Predict
%div.col-md-10
%input.btn.btn-warning.h2{ :type => "submit", :id => "submit", :value=>">>", :onclick => "getsmiles()"}
%img.h2{:src=>"/images/wait30trans.gif", :id=>"circle", :class=>"circle", :style=>"display:none;"}
|
