forked from enviPath/enviPy
Current Dev State
This commit is contained in:
Tim Lorsbach
0
templates/modals/batch_predict_modal.html
Normal file
0
templates/modals/batch_predict_modal.html
Normal file
19
templates/modals/cite_modal.html
Normal file
19
templates/modals/cite_modal.html
Normal file
@ -0,0 +1,19 @@
|
||||
<div class="modal fade bs-modal-lg" id="citemodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4>How to cite enviPath</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
enviPath–The environmental contaminant biotransformation pathway resource. J Wicker, T Lorsbach, M
|
||||
Gütlein, E Schmid, D Latino, S Kramer, K Fenner. Nucleic Acids Research, gkv1229
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
50
templates/modals/collections/new_compound_modal.html
Normal file
50
templates/modals/collections/new_compound_modal.html
Normal file
@ -0,0 +1,50 @@
|
||||
{% load static %}
|
||||
<div class="modal fade bs-modal-lg" id="new_compound_modal" tabindex="-1" aria-labelledby="new_compound_modal" aria-modal="true"
|
||||
role="dialog">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Create a new Compound</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="new_compound_modal_form" accept-charset="UTF-8" action="{% url 'package compound list' meta.current_package.uuid %}" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<label for="compound-name">Name</label>
|
||||
<input id="compound-name" class="form-control" name="compound-name" placeholder="Name"/>
|
||||
<label for="compound-description">Description</label>
|
||||
<input id="compound-description" class="form-control" name="compound-description" placeholder="Description"/>
|
||||
<p></p>
|
||||
<div>
|
||||
<iframe id="new_compound_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
|
||||
height="510"></iframe>
|
||||
</div>
|
||||
<input type="hidden" name="compound-smiles" id="compound-smiles">
|
||||
<p></p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" id="new_compound_modal_form_submit">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#new_compound_modal_form_submit').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
$(this).prop("disabled",true);
|
||||
|
||||
k = getKetcher('new_compound_ketcher');
|
||||
$('#compound-smiles').val(k.getSmiles());
|
||||
|
||||
// submit form
|
||||
$('#new_compound_modal_form').submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
45
templates/modals/collections/new_group_modal.html
Normal file
45
templates/modals/collections/new_group_modal.html
Normal file
@ -0,0 +1,45 @@
|
||||
<div class="modal fade" tabindex="-1" id="new_group_modal" role="dialog" aria-labelledby="new_group_modal"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span>
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="modal-title">New Group</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Create new Group. You can assign users to the group once
|
||||
it is created. Description can be changed after creation.</p>
|
||||
<form id="new_group_modal_form" accept-charset="UTF-8" action="{{ SERVER_BASE }}/group"
|
||||
data-remote="true"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" type="text" name="group-name" class="form-control" placeholder="Name"/>
|
||||
</p>
|
||||
<p>
|
||||
<label for="description">Description</label>
|
||||
<input id="description" type="text" class="form-control" placeholder="Description..."
|
||||
name="group-description"/>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="new_group_modal_form_submit" class="btn btn-primary" href="#">Submit</a>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#new_group_modal_form_submit').on('click', function() {
|
||||
$('#new_group_modal_form').submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
201
templates/modals/collections/new_model_modal.html
Normal file
201
templates/modals/collections/new_model_modal.html
Normal file
@ -0,0 +1,201 @@
|
||||
<div class="modal fade" tabindex="-1" id="new_model_modal" role="dialog" aria-labelledby="new_model_modal"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span>
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="modal-title">New Model</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="new_model_form" accept-charset="UTF-8" action="{{ meta.current_package.url }}/model"
|
||||
data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="jumbotron">Create a new Model to
|
||||
limit the number of degradation products in the
|
||||
prediction. You just need to set a name and the packages
|
||||
you want the object to be based on. If you want to use the
|
||||
default options suggested by us, simply click Submit,
|
||||
otherwise click Advanced Options.
|
||||
</div>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" name="model-name" class="form-control" placeholder="Name"/>
|
||||
<label for="description">Description</label>
|
||||
<input id="description" name="model-description" class="form-control"
|
||||
placeholder="Description"/>
|
||||
<label for="model-type">Model Type</label>
|
||||
<select id="model-type" name="model-type" class="form-control" data-width='100%'>
|
||||
<option disabled selected>Select Model Type</option>
|
||||
{% for k, v in model_types.items %}
|
||||
<option value="{{ v }}">{{ k }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<!-- ML Based Form-->
|
||||
<div id="ml-relative-reasoning-specific-form">
|
||||
<!-- Rule Packages -->
|
||||
<label>Rule Packages</label><br>
|
||||
<select id="ml-relative-reasoning-rule-packages" name="ml-relative-reasoning-rule-packages"
|
||||
data-actions-box='true' class="form-control" multiple data-width='100%'>
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
<!-- Data Packages -->
|
||||
<label>Data Packages</label><br>
|
||||
<select id="ml-relative-reasoning-data-packages" name="ml-relative-reasoning-data-packages"
|
||||
data-actions-box='true' class="form-control" multiple data-width='100%'>
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
<!-- Fingerprinter -->
|
||||
<label for="ml-relative-reasoning-fingerprinter">Fingerprinter</label>
|
||||
<select id="ml-relative-reasoning-fingerprinter" name="ml-relative-reasoning-fingerprinter"
|
||||
class="form-control">
|
||||
<option value="MACCS" selected>MACCS Fingerprinter</option>
|
||||
</select>
|
||||
{% if 'plugins' in meta.enabled_features %}
|
||||
<!-- Property Plugins go here -->
|
||||
<label for="ml-relative-reasoning-additional-fingerprinter">Fingerprinter</label>
|
||||
<select id="ml-relative-reasoning-additional-fingerprinter"
|
||||
name="ml-relative-reasoning-additional-fingerprinter"
|
||||
class="form-control">
|
||||
</select>
|
||||
{% endif %}
|
||||
<label for="ml-relative-reasoning-threshold">Threshold</label>
|
||||
<input type="number" min="0" , max="1" step="0.05" value="0.5"
|
||||
id="ml-relative-reasoning-threshold"
|
||||
name="ml-relative-reasoning-threshold" class="form-control">
|
||||
|
||||
<!-- Evaluation -->
|
||||
|
||||
<label>Evaluation Packages</label><br>
|
||||
<select id="ml-relative-reasoning-evaluation-packages" name="ml-relative-reasoning-evaluation-packages"
|
||||
data-actions-box='true' class="form-control" multiple data-width='100%'>
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
</div>
|
||||
<!-- Rule Based Based Form-->
|
||||
<div id="rule-based-relative-reasoning-specific-form">
|
||||
|
||||
</div>
|
||||
<!-- EnviFormer-->
|
||||
<div id="enviformer-specific-form">
|
||||
<label for="enviformer-threshold">Threshold</label>
|
||||
<input type="number" min="0" , max="1" step="0.05" value="0.5" id="enviformer-threshold"
|
||||
name="enviformer-threshold" class="form-control">
|
||||
</div>
|
||||
|
||||
{% if 'applicability_domain' in enabled_features %}
|
||||
<div class="modal-body hide" data-step="3" data-title="Advanced Options II">
|
||||
<div class="jumbotron">Selection of parameter values for the Applicability Domain process.
|
||||
Number of Neighbours refers to a requirement on the minimum number of compounds from the
|
||||
training
|
||||
dataset that has at least one triggered transformation rule that is common with the compound
|
||||
being
|
||||
analyzed.
|
||||
Reliability Threshold is a requirement on the average tanimoto distance to the set number of
|
||||
"nearest neighbours" (Number of neighbours with the smallest tanimoto distances).
|
||||
Local Compatibility Threshold is a requirement on the average F1 score determined from the
|
||||
number of
|
||||
nearest neighbours, using their respective precision and recall values computed from the
|
||||
agreement
|
||||
between their observed and triggered rules.
|
||||
You can learn more about it in our wiki!
|
||||
</div>
|
||||
<!-- Use AD? -->
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="buildAD" name="buildAD">Also build an Applicability Domain?
|
||||
</label>
|
||||
</div>
|
||||
<!-- Num Neighbours -->
|
||||
<label for="adK">Number of Neighbours</label>
|
||||
<input id="adK" name="adK" type="number" class="form-control" value="5" step="1" min="0"
|
||||
max="10">
|
||||
<!-- F1 Threshold -->
|
||||
<label for="localCompatibilityThreshold">Local Compatibility Threshold</label>
|
||||
<input id="localCompatibilityThreshold" name="localCompatibilityThreshold" type="number"
|
||||
class="form-control" value="0.5" step="0.01" min="0" max="1">
|
||||
<!-- Percentile Threshold -->
|
||||
<label for="reliabilityThreshold">Reliability Threshold</label>
|
||||
<input id="reliabilityThreshold" name="reliabilityThreshold" type="number" class="form-control"
|
||||
value="0.5" step="0.01" min="0" max="1">
|
||||
</div>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="new_model_modal_form_submit" class="btn btn-primary" href="#">Submit</a>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
// Initially hide all "specific" forms
|
||||
$("div[id$='-specific-form']").each( function() {
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
$("#ml-relative-reasoning-rule-packages").selectpicker();
|
||||
$("#ml-relative-reasoning-data-packages").selectpicker();
|
||||
$("#ml-relative-reasoning-evaluation-packages").selectpicker();
|
||||
|
||||
// On change hide all and show only selected
|
||||
$("#model-type").change(function() {
|
||||
$("div[id$='-specific-form']").each( function() {
|
||||
$(this).hide();
|
||||
});
|
||||
val = $('option:selected', this).val();
|
||||
$("#" + val + "-specific-form").show();
|
||||
});
|
||||
|
||||
$('#new_model_modal_form_submit').on('click', function(e){
|
||||
e.preventDefault();
|
||||
$('#new_model_form').submit();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
62
templates/modals/collections/new_package_modal.html
Normal file
62
templates/modals/collections/new_package_modal.html
Normal file
@ -0,0 +1,62 @@
|
||||
<div class="modal fade"
|
||||
tabindex="-1"
|
||||
id="new_package_modal"
|
||||
role="dialog"
|
||||
aria-labelledby="new_package_modal"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button"
|
||||
class="close"
|
||||
data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span>
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="modal-title">New Package</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Create new package. Description can be changed later.</p>
|
||||
<form id="new_package_modal_form"
|
||||
accept-charset="UTF-8"
|
||||
action=""
|
||||
data-remote="true"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" class="form-control"
|
||||
name="package-name"
|
||||
placeholder="Name"/>
|
||||
</p>
|
||||
<p>
|
||||
<label for="description">Description</label>
|
||||
<input id="description"
|
||||
type="text"
|
||||
rows="3"
|
||||
class="form-control"
|
||||
placeholder="Description..."
|
||||
name="package-description"/>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="new_package_modal_form_submit"
|
||||
class="btn btn-primary"
|
||||
href="#">Submit</a>
|
||||
<button type="button"
|
||||
class="btn btn-default"
|
||||
data-dismiss="modal">Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#new_package_modal_form_submit').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
$('#new_package_modal_form').submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
301
templates/modals/collections/new_pathway_modal.html
Normal file
301
templates/modals/collections/new_pathway_modal.html
Normal file
@ -0,0 +1,301 @@
|
||||
{% load static %}
|
||||
<div class="modal fade" tabindex="-1" id="new_pathway_modal" role="dialog" aria-labelledby="new_pathway_modal"
|
||||
aria-hidden="true" style="overflow-y: auto;">
|
||||
<!-- FIXME: make width dynamic-->
|
||||
<div class="modal-dialog" id="new_pathway_modal_dialog" style="width:900px">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span> <span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="js-title-step"></h4>
|
||||
</div>
|
||||
<div class="modal-body hide" data-step="1" data-title="New Pathway">
|
||||
<div class="jumbotron">Create a new pathway by entering
|
||||
the root compound and a name. Then select if you want to
|
||||
use the prediction engine to generate a predicted pathway or
|
||||
create an empty pathway that you fill in by yourself. If
|
||||
you choose to predict a pathway, you can modify the
|
||||
settings for the prediction, or use the default settings
|
||||
and just click Submit.
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{% if current_user.name == 'anonymous' %}
|
||||
<div class="alert alert-warning">
|
||||
You are currently logged in as Anonymous. Please note:
|
||||
Pathways entered or predicted as anonymous user will be deleted after 30 days.
|
||||
Please log in to save your results.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label for="name">Name</label>
|
||||
<input id="name" class="form-control" name="name" placeholder="Name"/>
|
||||
<label for="description">Description</label>
|
||||
<input id="description" class="form-control" name="description" placeholder="no description"/>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<label for="predict">Predict pathway or build yourself?</label>
|
||||
<div class="radio" id="predict">
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="predict" id="radioPredict" value="predict" checked/>Predict pathway
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="predict" id="radioIncremental"value="incremental"/>Incremental prediction
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="predict" id="radioBuild" value="build"/>Build pathway
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label for="smilesinput">SMILES</label>
|
||||
<table style="width: 100%">
|
||||
<colgroup>
|
||||
<col span="1" style="width: 90%;">
|
||||
<col span="1" style="width: 10%;">
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td>
|
||||
<input id="smilesinput" class="form-control" name="smilesinput" placeholder="C1CCCCC1"
|
||||
autocapitalize="none"/>
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-default" id="render-button">
|
||||
Render
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p id="ketcher_container"></p>
|
||||
<div>
|
||||
<iframe id="ifKetcher" src="{% static '/js/ketcher/ketcher.html' %}" width="850"
|
||||
height="510"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body hide" data-step="2" data-title="New Pathway - Advanced Settings">
|
||||
<div class="jumbotron">Choose if you want to use an existing
|
||||
setting, or create a new one for this pathway
|
||||
prediction. Then click Submit to use the specified setting,
|
||||
or click next to set the parameters.
|
||||
</div>
|
||||
<div id="settings">
|
||||
<div class="radio" id="settingRadio">
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="existing" id="radioDefault" value="exisiting" checked/>
|
||||
Use Default
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="existing" id="radioExists" value="exisiting"/>
|
||||
Select Existing
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="existing" id="radioNew" value="temporary"/>
|
||||
Create New
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<select id="settingSelect" name="settingSelect" class="form-control">
|
||||
{% for setting in available_settings %}
|
||||
<option value="{{ setting.id }}">{{ setting.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
{% with step_offset=1 %}
|
||||
{% include "templates/modals/collections/new_setting_modal_body.html" %}
|
||||
{% endwith %}
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default js-btn-step pull-left" data-orientation="cancel"
|
||||
onclick="reset()" data-dismiss="modal"></button>
|
||||
<button type="button" class="btn btn-default js-btn-step" data-orientation="previous"
|
||||
id="backbutton"></button>
|
||||
<button type="button" class="btn btn-default js-btn-step" data-orientation="next"
|
||||
id="nextbutton"></button>
|
||||
<a id="modal-form-submit" class="btn btn-primary" href="#">Submit</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
s = new Setting(
|
||||
'settingName',
|
||||
'package_multi_select',
|
||||
'modelSelect',
|
||||
'cutoff',
|
||||
'evalType',
|
||||
'availableTS',
|
||||
'forms',
|
||||
'truncatorTable',
|
||||
'summaryTable',
|
||||
);
|
||||
|
||||
$(function() {
|
||||
// hide all forms
|
||||
$('#forms').children().hide()
|
||||
|
||||
$("#render-button").on("click", function() {
|
||||
syncKetcherAndTextInput('text', "ifKetcher", "smilesinput");
|
||||
});
|
||||
|
||||
// If theres a change in the in '#smilesinput' sync the value to ketcher
|
||||
$('#smilesinput').on('input', function() {
|
||||
syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
|
||||
});
|
||||
|
||||
// If theres an update in ketcher sync it to textinput
|
||||
setInterval(function() {
|
||||
syncKetcherAndTextInput('ketcher', 'ifKetcher', 'smilesinput');
|
||||
}, 250);
|
||||
|
||||
$("#smilesinput").on("blur", function() {
|
||||
syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
|
||||
});
|
||||
|
||||
$("#smilesinput").on("keypress", function(event) {
|
||||
if (event.keyCode == 13) {
|
||||
syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
|
||||
}
|
||||
});
|
||||
|
||||
// Show forms depending on the selected TS
|
||||
$('#availableTS').on('change', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var type = $(this).val();
|
||||
// hide current content
|
||||
$('#forms').children().hide()
|
||||
|
||||
if(type === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
$('#' + type + '_form').show()
|
||||
});
|
||||
|
||||
$("#modelSelect").on("change", function() {
|
||||
setCutoff = function (thresh) {
|
||||
$("#cutoff").val(thresh);
|
||||
}
|
||||
|
||||
var modelUri = $("#modelSelect :selected").val();
|
||||
fillPRCurve(modelUri, setCutoff);
|
||||
});
|
||||
|
||||
// Add a TS to the setting
|
||||
$('#add-ts-button').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
s.addTruncator();
|
||||
});
|
||||
|
||||
$('input[type=radio][name=predict]').change(function() {
|
||||
if (this.id == 'radioBuild') {
|
||||
$("#nextbutton").prop("disabled", true);
|
||||
} else {
|
||||
$("#nextbutton").prop("disabled", false);
|
||||
}
|
||||
});
|
||||
|
||||
$('input[type=radio][name=existing]').change(function() {
|
||||
if (this.id == 'radioDefault' || this.id == 'radioExists') {
|
||||
if(this.id == 'radioDefault') {
|
||||
$("#settingSelect").prop("disabled", true);
|
||||
} else {
|
||||
$("#settingSelect").prop("disabled", false);
|
||||
}
|
||||
$("#nextbutton").prop("disabled", true);
|
||||
} else {
|
||||
// build...
|
||||
$("#settingSelect").prop("disabled", true);
|
||||
$("#nextbutton").prop("disabled", false);
|
||||
}
|
||||
});
|
||||
|
||||
var pwStep1 = function() {
|
||||
console.log("pw step 1");
|
||||
// Make "Next" to "Advanced"
|
||||
$('#nextbutton').val("Advanced");
|
||||
}
|
||||
|
||||
var pwStep2 = function() {
|
||||
console.log("pw step 2");
|
||||
// Make "Advanced" to "Next"
|
||||
$('#nextbutton').val("Next");
|
||||
// As "Use default is preselected" disable "Next" button
|
||||
$("#nextbutton").prop("disabled",true);
|
||||
// Disable setting dropdown as long as the correspndonding radio isnt checked
|
||||
$("#settingSelect").prop("disabled",true);
|
||||
// Show submit button
|
||||
$("#modal-form-submit").show();
|
||||
}
|
||||
|
||||
var settingStep1 = function (){
|
||||
// First step sets name and packages
|
||||
s.extractName();
|
||||
s.extractSelectedPackages();
|
||||
}
|
||||
|
||||
var settingStep2 = function (){
|
||||
// Seconds step gathers relative reasoning params
|
||||
s.extractRelativeReasoning();
|
||||
s.extractCutoff();
|
||||
s.extractEvaluationType();
|
||||
}
|
||||
|
||||
var settingStep3 = function() {
|
||||
s.updateTable();
|
||||
s.updateSummaryTable();
|
||||
// hide duplicate submit...
|
||||
$("#nextbutton").hide();
|
||||
}
|
||||
|
||||
var postPathway = function(){
|
||||
console.log("Complete!");
|
||||
console.log(s.tsParams);
|
||||
console.log("Getting SMILES");
|
||||
}
|
||||
|
||||
function dummy() {
|
||||
console.log("dummy");
|
||||
}
|
||||
|
||||
$('#new_pathway_modal').modalSteps({
|
||||
btnCancelHtml: 'Cancel',
|
||||
btnPreviousHtml: 'Back',
|
||||
btnNextHtml: 'Next',
|
||||
btnLastStepHtml: 'Submit',
|
||||
disableNextButton: false,
|
||||
completeCallback: postPathway,
|
||||
callbacks: {
|
||||
'1': pwStep1,
|
||||
'2' : pwStep2,
|
||||
'3' : dummy,
|
||||
'4' : settingStep1,
|
||||
'5' : settingStep2,
|
||||
'6' : settingStep3,
|
||||
}
|
||||
});
|
||||
|
||||
$('#modal-form-submit').on('click', function() {
|
||||
e.preventDefault();
|
||||
postPathway();
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
108
templates/modals/collections/new_prediction_setting_modal.html
Normal file
108
templates/modals/collections/new_prediction_setting_modal.html
Normal file
@ -0,0 +1,108 @@
|
||||
{% load static %}
|
||||
|
||||
<div id="new_prediction_setting_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Create a Prediction Setting</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>To create a Prediction Setting fill the form below and click "Create"</p>
|
||||
<form id="new-prediction-setting-modal-form" accept-charset="UTF-8" action="" data-remote="true"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
|
||||
<label for="prediction-setting-name">Name</label>
|
||||
<input id="prediction-setting-name" name="prediction-setting-name" class="form-control" placeholder="Name"/>
|
||||
<label for="prediction-setting-description">Description</label>
|
||||
<input id="prediction-setting-description" name="prediction-setting-description" class="form-control"
|
||||
placeholder="Description"/>
|
||||
|
||||
<label for="prediction-setting-max-nodes">Max #Nodes</label>
|
||||
<input id="prediction-setting-max-nodes" type="number" class="form-control" name="prediction-setting-max-nodes" value="30" min="1" max="50" step="1">
|
||||
<label for="prediction-setting-max-depth">Max Depth</label>
|
||||
<input id="prediction-setting-max-depth" type="number" class="form-control" name="prediction-setting-max-depth" value="5" min="1" max="8" step="1">
|
||||
|
||||
<label for="tp-generation-method">TP Generation Method</label>
|
||||
<select id="tp-generation-method" name="tp-generation-method" class="form-control" data-width='100%'>
|
||||
<option disabled selected>Select how TPs are generated</option>
|
||||
<option value="rule-based-prediction-setting">Rule Based</option>
|
||||
<option value="model-based-prediction-setting">Model Based</option>
|
||||
</select>
|
||||
<div id="rule-based-prediction-setting-specific-form">
|
||||
<!-- Rule Packages -->
|
||||
<label>Rule Packages</label><br>
|
||||
<select id="rule-based-prediction-setting-packages" name="rule-based-prediction-setting-packages"
|
||||
data-actions-box='true' class="form-control" multiple data-width='100%'>
|
||||
<option disabled>Reviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<option disabled>Unreviewed Packages</option>
|
||||
{% for obj in meta.readable_packages %}
|
||||
{% if not obj.reviewed %}
|
||||
<option value="{{ obj.url }}">{{ obj.name }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div id="model-based-prediction-setting-specific-form">
|
||||
<label>Select Model</label><br>
|
||||
<select id="model-based-prediction-setting-model" name="model-based-prediction-setting-model" class="form-control" data-width='100%'>
|
||||
<option disabled selected>Select the model</option>
|
||||
{% for m in models %}
|
||||
<option value="{{ m.url }}">{{ m.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<label for="model-based-prediction-setting-threshold">Threshold</label>
|
||||
<input id="model-based-prediction-setting-threshold" name="model-based-prediction-setting-threshold" class="form-control" placeholder="0.25" type="number"/>
|
||||
</div>
|
||||
|
||||
<input class="form-check-input" type="checkbox" value="on" id="prediction-setting-new-default" name="prediction-setting-new-default">
|
||||
<label class="form-check-label" for="prediction-setting-new-default">Set this setting as new default</label>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="new-prediction-setting-modal-submit">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
// Initially hide all "specific" forms
|
||||
$("div[id$='-specific-form']").each( function() {
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
$("#rule-based-prediction-setting-packages").selectpicker();
|
||||
|
||||
// On change hide all and show only selected
|
||||
$("#tp-generation-method").change(function() {
|
||||
$("div[id$='-specific-form']").each( function() {
|
||||
$(this).hide();
|
||||
});
|
||||
val = $('option:selected', this).val();
|
||||
$("#" + val + "-specific-form").show();
|
||||
});
|
||||
|
||||
$('#new-prediction-setting-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
// $('#new-prediction-setting-modal-form').submit();
|
||||
|
||||
const formData = $('#new-prediction-setting-modal-form').serialize();
|
||||
$.post('/setting', formData, function(response) {
|
||||
location.reload();
|
||||
});
|
||||
});
|
||||
})
|
||||
</script>
|
||||
50
templates/modals/collections/new_reaction_modal.html
Normal file
50
templates/modals/collections/new_reaction_modal.html
Normal file
@ -0,0 +1,50 @@
|
||||
{% load static %}
|
||||
<div class="modal fade bs-modal-lg" id="new_reaction_modal" tabindex="-1" aria-labelledby="new_reaction_modal" aria-modal="true"
|
||||
role="dialog">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Create a new Reaction</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="new_reaction_modal_form" accept-charset="UTF-8" action="{% url 'package reaction list' meta.current_package.uuid %}" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<label for="reaction-name">Name</label>
|
||||
<input id="reaction-name" class="form-control" name="reaction-name" placeholder="Name"/>
|
||||
<label for="reaction-description">Description</label>
|
||||
<input id="reaction-description" class="form-control" name="reaction-description" placeholder="Description"/>
|
||||
<p></p>
|
||||
<div>
|
||||
<iframe id="new_reaction_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
|
||||
height="510"></iframe>
|
||||
</div>
|
||||
<input type="hidden" name="reaction-smirks" id="reaction-smirks">
|
||||
<p></p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" id="new_reaction_modal_form_submit">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#new_reaction_modal_form_submit').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
$(this).prop("disabled",true);
|
||||
|
||||
k = getKetcher('new_reaction_ketcher');
|
||||
$('#reaction-smirks').val(k.getSmiles());
|
||||
|
||||
// submit form
|
||||
$('#new_reaction_modal_form').submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
61
templates/modals/collections/new_rule_modal.html
Normal file
61
templates/modals/collections/new_rule_modal.html
Normal file
@ -0,0 +1,61 @@
|
||||
{% load static %}
|
||||
<div class="modal fade bs-modal-lg" id="new_rule_modal" tabindex="-1" aria-labelledby="new_rule_modal" aria-modal="true"
|
||||
role="dialog">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Create a new Rule</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="new_rule_modal_form" accept-charset="UTF-8" action="{% url 'package rule list' meta.current_package.uuid %}" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<label for="rule-name">Name</label>
|
||||
<input id="rule-name" class="form-control" name="rule-name" placeholder="Name"/>
|
||||
<label for="rule-description">Description</label>
|
||||
<input id="rule-description" class="form-control" name="rule-description" placeholder="Description"/>
|
||||
<p></p>
|
||||
<!-- TODO Ruletypes -->
|
||||
<!-- TODO Decide on rules to use?-->
|
||||
<input type="hidden" name="rule-type" id="rule-type" value="SimpleAmbitRule">
|
||||
|
||||
<!-- <select id="rule-type" name="rule-type" class="form-control" data-width='100%'>-->
|
||||
<!-- <option disabled selected>Select Rule Type</option>-->
|
||||
<!-- {% for k, v in rule_types.items %}-->
|
||||
<!-- <option value="{{ v }}">{{ k }}</option>-->
|
||||
<!-- {% endfor %}-->
|
||||
<!-- </select>-->
|
||||
<!-- -->
|
||||
<div>
|
||||
<iframe id="new_rule_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
|
||||
height="510"></iframe>
|
||||
</div>
|
||||
<input type="hidden" name="rule-smirks" id="rule-smirks">
|
||||
<p></p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" id="new_rule_modal_form_submit">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#new_rule_modal_form_submit').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
$(this).prop("disabled",true);
|
||||
|
||||
k = getKetcher('new_rule_ketcher');
|
||||
$('#rule-smirks').val(k.getSmiles());
|
||||
|
||||
// submit form
|
||||
$('#new_rule_modal_form').submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
115
templates/modals/collections/new_scenario_modal.html
Normal file
115
templates/modals/collections/new_scenario_modal.html
Normal file
@ -0,0 +1,115 @@
|
||||
<div class="modal fade" tabindex="-1" id="new_scenario_modal" role="dialog" aria-labelledby="newScenGenMod"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span> <span
|
||||
class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="js-title-step"></h4>
|
||||
</div>
|
||||
<form id="base-scenario-form" accept-charset="UTF-8" action="" data-remote="true" method="POST">
|
||||
<div class="modal-body hide" data-step="1" data-title="New Scenario - Step 1">
|
||||
<div class="jumbotron">Please enter name, description,
|
||||
and date of scenario. Date should be associated to the
|
||||
data, not the current date. For example, this could
|
||||
reflect the publishing date of a study. You can leave
|
||||
all fields but the name empty and fill them in
|
||||
later.
|
||||
</div>
|
||||
<label for="name">Name</label>
|
||||
<input id="name" name="studyname" placeholder="Name" class="form-control"/>
|
||||
<label for="name">Description</label>
|
||||
<input id="description" name="studydescription" placeholder="Description" class="form-control"/>
|
||||
<label id="dateField" for="dateYear">Date</label>
|
||||
<table>
|
||||
<tr>
|
||||
<th>
|
||||
<input type="number" id="dateYear" name="dateYear" class="form-control" placeholder="YYYY">
|
||||
</th>
|
||||
<th>
|
||||
<input type="number" id="dateMonth" name="dateMonth" min="1" max="12"
|
||||
class="form-control" placeholder="MM" align="">
|
||||
</th>
|
||||
<th>
|
||||
<input type="number" id="dateDay" name="dateDay" min="1" max="31" class="form-control"
|
||||
placeholder="DD">
|
||||
</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-body hide" data-step="2" data-title="New Scenario - Step 2">
|
||||
<div class="jumbotron">
|
||||
Do you want to create an empty scenario and fill it
|
||||
with your own set of attributes, or fill in a
|
||||
pre-defined set of attributes for soil, sludge or sediment
|
||||
data?
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="type" id="radioEmpty" checked>Empty Scenario
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="type" id="radioSoil" value="soil" >Soil Data
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="type" id="radioSludge" value="sludge">Sludge Data
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="type" id="radioSediment" value="sediment">Water-Sediment System Data
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body hide" data-step="3" data-title="New Scenario - Step 3">
|
||||
<div class="jumbotron" id="finaljumbo">
|
||||
All done! Click Submit!
|
||||
</div>
|
||||
<div style="float: left"><button
|
||||
id="addColumnButton" type="button"
|
||||
class="btn btn-default">Add
|
||||
another Scenario
|
||||
</button></div>
|
||||
<input type="hidden" name="fullScenario" value="true"/>
|
||||
{% include "tables/scenario.html" %}
|
||||
</div>
|
||||
</form>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default js-btn-step pull-left" data-orientation="cancel" data-dismiss="modal"></button>
|
||||
<button type="button" class="btn btn-default js-btn-step" data-orientation="previous"></button>
|
||||
<button type="button" class="btn btn-default js-btn-step"
|
||||
data-orientation="next" id="nextbutton"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<p></p>
|
||||
<div id="scenariocontent"></div>
|
||||
|
||||
<!--Template index -->
|
||||
<script language="javascript">
|
||||
$(function() {
|
||||
|
||||
// Hide additional columns per default
|
||||
$('.col-2').hide();
|
||||
$('.col-3').hide();
|
||||
|
||||
//TODO just to see modal
|
||||
$('#new_scenario_modal').modalSteps({
|
||||
btnCancelHtml: 'Cancel',
|
||||
btnPreviousHtml: 'Previous',
|
||||
btnNextHtml: 'Next',
|
||||
btnLastStepHtml: 'Submit',
|
||||
disableNextButton: false,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
35
templates/modals/objects/delete_compound_modal.html
Normal file
35
templates/modals/objects/delete_compound_modal.html
Normal file
@ -0,0 +1,35 @@
|
||||
{% load static %}
|
||||
<!-- Delete Compound -->
|
||||
<div id="delete_compound_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">Delete Compound</h3>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Deletes the Compound and associated Structures.
|
||||
<form id="delete-compound-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" id="hidden" name="hidden" value="delete-compound"/>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="delete-compound-modal-submit">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#delete-compound-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#delete-compound-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
36
templates/modals/objects/delete_package_modal.html
Normal file
36
templates/modals/objects/delete_package_modal.html
Normal file
@ -0,0 +1,36 @@
|
||||
{% load static %}
|
||||
<!-- Delete Package -->
|
||||
<div id="delete_package_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">Delete Package</h3>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Deleting a Package deletes the very Package
|
||||
as well as all Objects stored in the Package.
|
||||
<form id="delete-package-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" id="hidden" name="hidden" value="delete-package"/>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="delete-package-modal-submit">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#delete-package-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#delete-package-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
38
templates/modals/objects/delete_user_modal.html
Normal file
38
templates/modals/objects/delete_user_modal.html
Normal file
@ -0,0 +1,38 @@
|
||||
{% load static %}
|
||||
<!-- Delete User -->
|
||||
<div id="delete_user_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">Delete User</h3>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="alert alert-danger">
|
||||
Clicking "Delete" will <strong>permanently</strong> delete the User and associated data.
|
||||
This action can't be undone!
|
||||
</div>
|
||||
<form id="delete-user-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="hidden" value="delete-model">
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-danger" id="delete-user-modal-submit">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#delete-user-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#delete-user-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
46
templates/modals/objects/edit_compound_modal.html
Normal file
46
templates/modals/objects/edit_compound_modal.html
Normal file
@ -0,0 +1,46 @@
|
||||
{% load static %}
|
||||
<!-- Edit Compound -->
|
||||
<div id="edit_compound_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Create a Compound</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Edit a Compound.</p>
|
||||
<form id="edit-compound-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="compound-name">Name</label>
|
||||
<input id="compound-name" class="form-control" name="compound-name" value="{{ compound.name}}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="compound-description">Description</label>
|
||||
<input id="compound-description" type="text" class="form-control"
|
||||
value="{{ compound.description }}"
|
||||
name="compound-description">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="edit-compound-modal-submit">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#edit-compound-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#edit-compound-modal-form').submit();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
45
templates/modals/objects/edit_compound_structure_modal.html
Normal file
45
templates/modals/objects/edit_compound_structure_modal.html
Normal file
@ -0,0 +1,45 @@
|
||||
{% load static %}
|
||||
<!-- Edit Compound -->
|
||||
<div id="edit_compound_structure_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Create a Compound</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Edit a Compound Structure.</p>
|
||||
<form id="edit-compound-structure-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="compound-structure-name">Name</label>
|
||||
<input id="compound-structure-name" class="form-control" name="compound-structure-name" value="{{ structure.name }}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="compound-structure-description">Description</label>
|
||||
<input id="compound-structure-description" type="text" class="form-control"
|
||||
value="{{ structure.description }}" name="compound-structure-description">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="edit-compound-structure-modal-submit">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#edit-compound-structure-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#edit-compound-structure-modal-form').submit();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
0
templates/modals/objects/edit_group_modal.html
Normal file
0
templates/modals/objects/edit_group_modal.html
Normal file
44
templates/modals/objects/edit_package_modal.html
Normal file
44
templates/modals/objects/edit_package_modal.html
Normal file
@ -0,0 +1,44 @@
|
||||
{% load static %}
|
||||
<!-- Edit Package -->
|
||||
<div id="edit_package_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Create a Package</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Edit a Package.</p>
|
||||
<form id="edit-package-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="package-name">Name</label>
|
||||
<input id="package-name" class="form-control" name="package-name" value="{{ package.name}}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="package-description">Description</label>
|
||||
<input id="package-description" type="text" class="form-control"
|
||||
value="{{ package.description }}"
|
||||
name="package-description">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="edit-package-modal-submit">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#edit-package-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#edit-package-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
46
templates/modals/objects/edit_password_modal.html
Normal file
46
templates/modals/objects/edit_password_modal.html
Normal file
@ -0,0 +1,46 @@
|
||||
{% load static %}
|
||||
<!-- Edit Package -->
|
||||
<div id="edit_password_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Update your Password</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>To change your password please fill out the following inputs</p>
|
||||
<form id="edit-password-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="old-password">Old Password</label>
|
||||
<input id="old-password" class="form-control" name="old-password" type="password" autocomplete="current-password">
|
||||
</p>
|
||||
<p>
|
||||
<label for="new-password">New Password</label>
|
||||
<input id="new-password" class="form-control" name="new-password" type="password", autocomplete="new-password">
|
||||
</p>
|
||||
<p>
|
||||
<label for="new-password-repeat">Repeat New Password</label>
|
||||
<input id="new-password-repeat" class="form-control" name="new-password-repeat" type="password" autocomplete="new-password">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="edit-password-modal-submit">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#edit-password-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#edit-password-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
106
templates/modals/objects/edit_prediction_setting_modal.html
Normal file
106
templates/modals/objects/edit_prediction_setting_modal.html
Normal file
@ -0,0 +1,106 @@
|
||||
{% load static %}
|
||||
<!-- Edit Package -->
|
||||
<div id="update_prediction_settings_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Update Prediction Setting</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>To update your prediction setting modify parameters in the form below und click "Update"</p>
|
||||
<form id="edit-prediction-setting-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<div id="prediction-setting" class="panel-collapse collapse in">
|
||||
<div class="panel-body list-group-item">
|
||||
|
||||
<table class="table table-bordered table-hover">
|
||||
<tr style="background-color: rgba(0, 0, 0, 0.08);">
|
||||
<th scope="col" width="20%">Parameter</th>
|
||||
<th scope="col" width="80%">Value</th>
|
||||
</tr>
|
||||
<tbody>
|
||||
{% if 'model' in user.prediction_settings %}
|
||||
<tr>
|
||||
<td width="20%">Model</td>
|
||||
<td width="80%">
|
||||
<table width="100%" class="table table-bordered table-hover">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<select id="model" name="model" class="form-control" data-width='100%'>
|
||||
{% for m in models %}
|
||||
<option value="{{ m.id }}" {% if user.prediction_settings.model.url == m.url %}selected{% endif %}>{{ m.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
{% for k, v in user.prediction_settings.model_parameters.items %}
|
||||
<tr>
|
||||
<th width="20%">Model Parameter</th>
|
||||
<th width="80%">Parameter Value</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="20%">
|
||||
{% if k == 'threshold' %}
|
||||
Threshold
|
||||
{% endif %}
|
||||
</td>
|
||||
<td width="80%">
|
||||
{% if k == 'threshold' %}
|
||||
<input type="number" class="form-control" name="{{k}}" value="{{v}}"
|
||||
min="0" max="1" step="0.05">
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% for k, v in user.prediction_settings.truncator.items %}
|
||||
<tr>
|
||||
<td><p>
|
||||
{% if k == 'max_nodes' %}
|
||||
Max Nodes
|
||||
{% elif k == 'max_depth' %}
|
||||
Max Depth
|
||||
{% endif %}
|
||||
</p></td>
|
||||
<td><p>
|
||||
{% if k == 'max_nodes' %}
|
||||
<input type="number" class="form-control" name="{{k}}" value="{{v}}" min="1"
|
||||
max="50" step="1">
|
||||
{% elif k == 'max_depth' %}
|
||||
<input type="number" class="form-control" name="{{k}}" value="{{v}}" min="1"
|
||||
max="8" step="1">
|
||||
{% endif %}
|
||||
</p></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="edit-prediction-setting-modal-submit">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#edit-prediction-setting-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#edit-prediction-setting-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
45
templates/modals/objects/edit_reaction_modal.html
Normal file
45
templates/modals/objects/edit_reaction_modal.html
Normal file
@ -0,0 +1,45 @@
|
||||
{% load static %}
|
||||
<!-- Edit Reaction -->
|
||||
<div id="edit_reaction_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h3 class="modal-title">Update Reaction</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- <p>Edit a Reaction.</p>-->
|
||||
<form id="edit-reaction-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="reaction-name">Name</label>
|
||||
<input id="reaction-name" class="form-control" name="reaction-name" value="{{ reaction.name }}">
|
||||
</p>
|
||||
<p>
|
||||
<label for="reaction-description">Description</label>
|
||||
<input id="reaction-description" type="text" class="form-control"
|
||||
value="{{ reaction.description }}" name="reaction-description">
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="edit-reaction-modal-submit">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#edit-reaction-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#edit-reaction-modal-form').submit();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
0
templates/modals/objects/edit_rule_modal.html
Normal file
0
templates/modals/objects/edit_rule_modal.html
Normal file
61
templates/modals/objects/edit_user_modal.html
Normal file
61
templates/modals/objects/edit_user_modal.html
Normal file
@ -0,0 +1,61 @@
|
||||
{% load static %}
|
||||
<!-- Edit User -->
|
||||
<div id="edit_user_modal" class="modal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Update User Defaults</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Edit User Defaults.</p>
|
||||
<form id="edit-user-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="default-package">Default Package</label>
|
||||
<select id="default-package" name="default-package" class="form-control" data-width='100%'>
|
||||
<option disabled>Select a Package</option>
|
||||
{% for p in meta.writeable_packages %}
|
||||
<option value="{{ p.url }}" {% if p.id == meta.user.default_package.id %}selected{% endif %}>{{ p.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<label for="default-group">Default Group</label>
|
||||
<select id="default-group" name="default-group" class="form-control" data-width='100%'>
|
||||
<option disabled>Select a Group</option>
|
||||
{% for g in meta.available_groups %}
|
||||
<option value="{{ g.url }}" {% if g.id == meta.user.default_group.id %}selected{% endif %}>{{ g.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<label for="default-prediction-setting">Default Prediction Setting</label>
|
||||
<select id="default-prediction-setting" name="default-prediction-setting" class="form-control" data-width='100%'>
|
||||
<option disabled>Select a Setting</option>
|
||||
{% for s in meta.available_settings %}
|
||||
<option value="{{ s.url }}" {% if s.id == meta.user.default_setting.id %}selected{% endif %}>{{ s.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="edit-user-modal-submit">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('#edit-user-modal-submit').click(function(e){
|
||||
e.preventDefault();
|
||||
$('#edit-user-modal-form').submit();
|
||||
});
|
||||
|
||||
})
|
||||
</script>
|
||||
92
templates/modals/objects/manage_api_token_modal.html
Normal file
92
templates/modals/objects/manage_api_token_modal.html
Normal file
@ -0,0 +1,92 @@
|
||||
<div class="modal fade"
|
||||
tabindex="-1"
|
||||
id="manage_api_token_modal"
|
||||
role="dialog"
|
||||
aria-labelledby="manage_api_token_modal"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button"
|
||||
class="close"
|
||||
data-dismiss="modal">
|
||||
<span aria-hidden="true">×</span>
|
||||
<span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h3 class="modal-title">Manage API Token</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Requesting a Token will invalidate all potential existing tokens. The new token will only be shown once, so ensure to store it in secure place</p>
|
||||
<form id="request_api_token_form"
|
||||
accept-charset="UTF-8"
|
||||
action=""
|
||||
data-remote="true"
|
||||
method="post">
|
||||
{% csrf_token %}
|
||||
<p>
|
||||
<label for="token-name">Name</label>
|
||||
<input type="text" id="token-name" class="form-control" name="name" placeholder="Generic Token for {{ meta.user.username }}"/>
|
||||
<label for="valid-for">Valid for (in days)</label>
|
||||
<input type="number" id="valid-for" class="form-control" name="valid-for" value="90"/>
|
||||
<input type="hidden" name="hidden" value="request-api-token">
|
||||
</p>
|
||||
</form>
|
||||
<div id="new-token">
|
||||
<pre id="new-token-pre"></pre>
|
||||
</div>
|
||||
<div id="existing-tokens">
|
||||
{% for t in tokens %}
|
||||
<form id="delete-token-{{ forloop.counter0 }}" accept-charset="UTF-8" action="{{ meta.user.url }}" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="input-group">
|
||||
<input type="hidden" name="hidden" value="delete">
|
||||
<input type="hidden" name="token-id" value="{{ t.pk }}">
|
||||
<input type="text" class="form-control" value="{{ t.name }}" disabled>
|
||||
<span class="input-group-btn">
|
||||
<button type="submit" class="btn btn-danger">Delete</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="manage_api_token_form_submit"
|
||||
class="btn btn-primary"
|
||||
href="#">Submit</a>
|
||||
<button type="button"
|
||||
class="btn btn-default"
|
||||
data-dismiss="modal">Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#new-token').hide()
|
||||
|
||||
$('#manage_api_token_form_submit').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = $('#request_api_token_form').serialize();
|
||||
console.log(formData)
|
||||
$.post('', formData, function(response) {
|
||||
$('#new-token-pre').text(response.raw_token);
|
||||
$('#new-token').show();
|
||||
});
|
||||
});
|
||||
|
||||
// Select all elements that start with 'delete-token-'
|
||||
$("[id^='delete-token-']").on("submit", function(e) {
|
||||
e.preventDefault();
|
||||
const formData = $(this).serialize();
|
||||
const form = $(this);
|
||||
$.post(this.action, formData, function(response) {
|
||||
console.log(this);
|
||||
form.remove();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
103
templates/modals/predict_modal.html
Normal file
103
templates/modals/predict_modal.html
Normal file
@ -0,0 +1,103 @@
|
||||
{% load static %}
|
||||
<div class="modal fade bs-modal-lg" id="predict_modal" tabindex="-1" aria-labelledby="predict_modal" aria-modal="true"
|
||||
role="dialog">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">Predict a Pathway</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="predict_modal_form" accept-charset="UTF-8" action="{{ meta.current_package.url }}/pathway" data-remote="true" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<label for="name">Name</label>
|
||||
<input id="name" class="form-control" name="name" placeholder="Name"/>
|
||||
<label for="description">Description</label>
|
||||
<input id="description" class="form-control" name="description" placeholder="Description"/>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="predict">Predict pathway or build yourself?</label>
|
||||
<div class="radio" id="predict">
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="predict" id="radioPredict" value="predict" checked/>Predict
|
||||
pathway
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="predict" id="radioIncremental" value="incremental"/>Incremental
|
||||
prediction
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
<input type="radio" name="predict" id="radioBuild" value="build"/>Build pathway
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label for="predict-modal-smiles">SMILES</label>
|
||||
<input type="text" class="form-control" name="smiles" placeholder="SMILES" id="predict-modal-smiles">
|
||||
<p id="ketcher_container"></p>
|
||||
<div>
|
||||
<iframe id="predict-modal-ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
|
||||
height="510"></iframe>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" id="predictButton">Predict</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script>
|
||||
|
||||
function predictModalketcherToPredictModalTextInput() {
|
||||
$('#predict-modal-smiles').val(this.ketcher.getSmiles());
|
||||
}
|
||||
|
||||
$(function() {
|
||||
|
||||
$('#predict-modal-ketcher').on('load', function() {
|
||||
const checkKetcherReady = () => {
|
||||
win = this.contentWindow
|
||||
if (win.ketcher && 'editor' in win.ketcher) {
|
||||
win.ketcher.editor.event.change.handlers.push({
|
||||
once: false,
|
||||
priority: 0,
|
||||
f: predictModalketcherToPredictModalTextInput,
|
||||
ketcher: win.ketcher
|
||||
});
|
||||
} else {
|
||||
setTimeout(checkKetcherReady, 100);
|
||||
}
|
||||
};
|
||||
|
||||
checkKetcherReady();
|
||||
})
|
||||
|
||||
$('#predictButton').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
$(this).prop("disabled", true);
|
||||
|
||||
// loading button
|
||||
|
||||
// validation
|
||||
|
||||
// existing pws...
|
||||
|
||||
// submit form
|
||||
$('#predict_modal_form').submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
110
templates/modals/signup_modal.html
Normal file
110
templates/modals/signup_modal.html
Normal file
@ -0,0 +1,110 @@
|
||||
<div class="modal fade bs-modal-sm" id="signupmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<br>
|
||||
<div class="bs-example bs-example-tabs">
|
||||
<ul id="myTab" class="nav nav-tabs">
|
||||
<li class="active">
|
||||
<a href="#signin" data-toggle="tab">Sign In</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="#signup" data-toggle="tab">Register</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="#why" data-toggle="tab">Why?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="myTabContent" class="tab-content">
|
||||
<div class="tab-pane fade active in" id="signin">
|
||||
<form class="form-horizontal" method="post" action="{{ meta.server_url }}/user">
|
||||
{% csrf_token %}
|
||||
<fieldset>
|
||||
<input type="hidden" name="login" id="login" value="true"/>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="username">Username:</label>
|
||||
<div class="controls">
|
||||
<input required id="username" name="username" type="text" class="form-control"
|
||||
placeholder="username" autocomplete="username">
|
||||
</div>
|
||||
<label class="control-label" for="passwordinput">Password:</label>
|
||||
<div class="controls">
|
||||
<input required id="passwordinput" name="password" class="form-control"
|
||||
type="password" placeholder="********" autocomplete="current-password">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Button -->
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="signin"></label>
|
||||
<div class="controls">
|
||||
<button id="signin" name="signin" class="btn btn-success">Sign In</button>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Why tab -->
|
||||
<div class="tab-pane fade in" id="why">
|
||||
<p>After you register, you have more permissions on
|
||||
this site, e.g., can create your own
|
||||
packages, submit data for review, and set access
|
||||
permissions to your data.</p>
|
||||
<p></p>
|
||||
<p>
|
||||
<br> Please
|
||||
contact <a href="mailto:admin@envipath.org">admin@envipath.org</a>
|
||||
if you have any questions.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Register -->
|
||||
<div class="tab-pane fade"
|
||||
id="signup">
|
||||
<div id="passwordGuideline" class="alert alert-info">
|
||||
The password must contain 8 to 30 characters<br>
|
||||
The following characters are allowed:
|
||||
- Upper and lower case characters<br>
|
||||
- Digits<br>
|
||||
- Special characters _, -, +<br>
|
||||
|
||||
</div>
|
||||
|
||||
<form id="signup-action" class="form-horizontal" action="{{ meta.server_url }}/user" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="register" id="register" value="true"/>
|
||||
|
||||
<label class="control-label" for="userid">Username:</label>
|
||||
<input id="userid" name="username" class="form-control" type="text" placeholder="user" required autocomplete="username">
|
||||
|
||||
<label class="control-label" for="email">Email:</label>
|
||||
<input id="email" name="email" class="form-control" type="email" placeholder="user@envipath.org" required>
|
||||
|
||||
<label class="control-label" for="password">Password:</label>
|
||||
<input id="password" name="password" class="form-control" type="password" placeholder="********" required autocomplete="new-password">
|
||||
|
||||
<label class="control-label" for="rpassword">Repeat Password:</label>
|
||||
<input id="rpassword" name="rpassword" class="form-control" type="password" placeholder="********" required autocomplete="new-password">
|
||||
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="confirmsignup"></label>
|
||||
<div class="controls">
|
||||
<button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<center>
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user