refactor: large scale formatting/linting

This commit is contained in:
2025-11-12 15:51:13 +13:00
parent 305fdc41fb
commit 34aed2c7aa
120 changed files with 11389 additions and 7532 deletions

View File

@ -1,31 +1,48 @@
<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">
<h3>How to cite enviPath</h3>
</div>
<div class="modal-body">
<ol class="list-group list-group-numbered">
<li class="list-group-item">
Hafner, J., Lorsbach, T., Schmidt, S. <em>et al.</em>
<cite>Advancements in biotransformation pathway prediction: enhancements, datasets, and novel
functionalities in enviPath.</cite>
<a href="https://doi.org/10.1186/s13321-024-00881-6" target="_blank">J Cheminform 16, 93
(2024)</a>
</li>
<li class="list-group-item">
Wicker, J., Lorsbach, T., Gütlein, M., Schmid, E., Latino, D., Kramer, S., Fenner, K.
<cite>enviPath - The environmental contaminant biotransformation pathway resource</cite>
<a href="https://doi.org/10.1093/nar/gkv1229" target="_blank">
Nucleic Acids Research, Volume 44, Issue D1, 4 January 2016, Pages D502-D508
</a>
</li>
</ol>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<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">
<h3>How to cite enviPath</h3>
</div>
<div class="modal-body">
<ol class="list-group list-group-numbered">
<li class="list-group-item">
Hafner, J., Lorsbach, T., Schmidt, S. <em>et al.</em>
<cite
>Advancements in biotransformation pathway prediction:
enhancements, datasets, and novel functionalities in
enviPath.</cite
>
<a href="https://doi.org/10.1186/s13321-024-00881-6" target="_blank"
>J Cheminform 16, 93 (2024)</a
>
</li>
<li class="list-group-item">
Wicker, J., Lorsbach, T., Gütlein, M., Schmid, E., Latino, D.,
Kramer, S., Fenner, K.
<cite
>enviPath - The environmental contaminant biotransformation
pathway resource</cite
>
<a href="https://doi.org/10.1093/nar/gkv1229" target="_blank">
Nucleic Acids Research, Volume 44, Issue D1, 4 January 2016, Pages
D502-D508
</a>
</li>
</ol>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>

View File

@ -1,42 +1,70 @@
<div class="modal fade" tabindex="-1" id="import_legacy_package_modal" role="dialog"
aria-labelledby="import_legacy_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">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Import Package from legacy System</h4>
</div>
<div class="modal-body">
<p>Create a Package based on the JSON Export of the legacy system.</p>
<form id="import-legacy-package-modal-form" accept-charset="UTF-8" data-remote="true" method="post"
enctype="multipart/form-data">
{% csrf_token %}
<p>
<label class="btn btn-primary" for="legacyJsonFile">
<input id="legacyJsonFile" name="file" type="file" style="display:none;"
onchange="$('#upload-legacy-file-info').html(this.files[0].name)">
Choose JSON File
</label>
<span class="label label-info" id="upload-legacy-file-info"></span>
<input type="hidden" value="import-legacy-package-json" name="hidden" readonly="">
</p>
</form>
</div>
<div class="modal-footer">
<a id="import-legacy-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
class="modal fade"
tabindex="-1"
id="import_legacy_package_modal"
role="dialog"
aria-labelledby="import_legacy_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">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Import Package from legacy System</h4>
</div>
<div class="modal-body">
<p>Create a Package based on the JSON Export of the legacy system.</p>
<form
id="import-legacy-package-modal-form"
accept-charset="UTF-8"
data-remote="true"
method="post"
enctype="multipart/form-data"
>
{% csrf_token %}
<p>
<label class="btn btn-primary" for="legacyJsonFile">
<input
id="legacyJsonFile"
name="file"
type="file"
style="display:none;"
onchange="$('#upload-legacy-file-info').html(this.files[0].name)"
/>
Choose JSON File
</label>
<span class="label label-info" id="upload-legacy-file-info"></span>
<input
type="hidden"
value="import-legacy-package-json"
name="hidden"
readonly=""
/>
</p>
</form>
</div>
<div class="modal-footer">
<a
id="import-legacy-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 () {
$('#import-legacy-package-modal-form-submit').on('click', function (e) {
e.preventDefault();
$('#import-legacy-package-modal-form').submit();
});
$(function () {
$("#import-legacy-package-modal-form-submit").on("click", function (e) {
e.preventDefault();
$("#import-legacy-package-modal-form").submit();
});
});
</script>

View File

@ -1,42 +1,70 @@
<div class="modal fade" tabindex="-1" id="import_package_modal" role="dialog"
aria-labelledby="import_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">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Import Package</h4>
</div>
<div class="modal-body">
<p>Create a Package based on a JSON Export.</p>
<form id="import-package-modal-form" accept-charset="UTF-8" data-remote="true" method="post"
enctype="multipart/form-data">
{% csrf_token %}
<p>
<label class="btn btn-primary" for="jsonFile">
<input id="jsonFile" name="file" type="file" style="display:none;"
onchange="$('#upload-file-info').html(this.files[0].name)">
Choose JSON File
</label>
<span class="label label-info" id="upload-file-info"></span>
<input type="hidden" value="import-package-json" name="hidden" readonly="">
</p>
</form>
</div>
<div class="modal-footer">
<a id="import-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
class="modal fade"
tabindex="-1"
id="import_package_modal"
role="dialog"
aria-labelledby="import_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">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Import Package</h4>
</div>
<div class="modal-body">
<p>Create a Package based on a JSON Export.</p>
<form
id="import-package-modal-form"
accept-charset="UTF-8"
data-remote="true"
method="post"
enctype="multipart/form-data"
>
{% csrf_token %}
<p>
<label class="btn btn-primary" for="jsonFile">
<input
id="jsonFile"
name="file"
type="file"
style="display:none;"
onchange="$('#upload-file-info').html(this.files[0].name)"
/>
Choose JSON File
</label>
<span class="label label-info" id="upload-file-info"></span>
<input
type="hidden"
value="import-package-json"
name="hidden"
readonly=""
/>
</p>
</form>
</div>
<div class="modal-footer">
<a
id="import-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 () {
$('#import-package-modal-form-submit').on('click', function (e) {
e.preventDefault();
$('#import-package-modal-form').submit();
});
$(function () {
$("#import-package-modal-form-submit").on("click", function (e) {
e.preventDefault();
$("#import-package-modal-form").submit();
});
});
</script>

View File

@ -1,78 +1,119 @@
{% 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"/>
<label for="compound-smiles">SMILES</label>
<input type="text" class="form-control" name="compound-smiles" placeholder="SMILES" id="compound-smiles">
<p></p>
<div>
<iframe id="new_compound_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
height="510"></iframe>
</div>
<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
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"
/>
<label for="compound-smiles">SMILES</label>
<input
type="text"
class="form-control"
name="compound-smiles"
placeholder="SMILES"
id="compound-smiles"
/>
<p></p>
<div>
<iframe
id="new_compound_ketcher"
src="{% static '/js/ketcher2/ketcher.html' %}"
width="100%"
height="510"
></iframe>
</div>
<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 newCompoundModalketcherToNewCompoundModalTextInput() {
$("#compound-smiles").val(this.ketcher.getSmiles());
}
function newCompoundModalketcherToNewCompoundModalTextInput() {
$('#compound-smiles').val(this.ketcher.getSmiles());
}
$(function () {
$("#new_compound_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: newCompoundModalketcherToNewCompoundModalTextInput,
ketcher: win.ketcher,
});
} else {
setTimeout(checkKetcherReady, 100);
}
};
$(function() {
$('#new_compound_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: newCompoundModalketcherToNewCompoundModalTextInput,
ketcher: win.ketcher
});
} else {
setTimeout(checkKetcherReady, 100);
}
};
checkKetcherReady();
})
$(function() {
$('#new_compound_modal_form_submit').on('click', function(e) {
e.preventDefault();
$(this).prop("disabled",true);
// submit form
$('#new_compound_modal_form').submit();
});
checkKetcherReady();
});
});
$(function () {
$("#new_compound_modal_form_submit").on("click", function (e) {
e.preventDefault();
$(this).prop("disabled", true);
// submit form
$("#new_compound_modal_form").submit();
});
});
});
</script>

View File

@ -1,45 +1,70 @@
<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">&times;</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
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">&times;</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();
$(function () {
$("#new_group_modal_form_submit").on("click", function () {
$("#new_group_modal_form").submit();
});
});
});
</script>

View File

@ -1,188 +1,270 @@
<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">&times;</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. There are multiple types of models
available. For additional information have a look at our
<a
target="_blank"
href="https://wiki.envipath.org/index.php/relative-reasoning"
role="button"
>wiki &gt;&gt;</a
>
</div>
<!-- Name -->
<label for="model-name">Name</label>
<input
id="model-name"
name="model-name"
class="form-control"
placeholder="Name"
/>
<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">&times;</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. There are multiple types of models available.
For additional information have a look at our
<a target="_blank" href="https://wiki.envipath.org/index.php/relative-reasoning" role="button">wiki
&gt;&gt;</a>
</div>
<!-- Name -->
<label for="model-name">Name</label>
<input id="model-name" name="model-name" class="form-control" placeholder="Name"/>
<!-- Description -->
<label for="model-description">Description</label>
<input
id="model-description"
name="model-description"
class="form-control"
placeholder="Description"
/>
<!-- Description -->
<label for="model-description">Description</label>
<input id="model-description" name="model-description" class="form-control"
placeholder="Description"/>
<!-- Model Type -->
<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>
<!-- Model Type -->
<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>
<!-- Rule Packages -->
<div id="rule-packages" class="ep-model-param mlrr rbrr">
<label for="model-rule-packages">Rule Packages</label>
<select
id="model-rule-packages"
name="model-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|safe }}</option>
{% endif %}
{% endfor %}
<!-- Rule Packages -->
<div id="rule-packages" class="ep-model-param mlrr rbrr">
<label for="model-rule-packages">Rule Packages</label>
<select id="model-rule-packages" name="model-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|safe }}</option>
{% endif %}
{% endfor %}
<option disabled>Unreviewed Packages</option>
{% for obj in meta.readable_packages %}
{% if not obj.reviewed %}
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<option disabled>Unreviewed Packages</option>
{% for obj in meta.readable_packages %}
{% if not obj.reviewed %}
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<!-- Data Packages -->
<div id="data-packages" class="ep-model-param mlrr rbrr enviformer">
<label for="model-data-packages">Data Packages</label>
<select
id="model-data-packages"
name="model-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|safe }}</option>
{% endif %}
{% endfor %}
<!-- Data Packages -->
<div id="data-packages" class="ep-model-param mlrr rbrr enviformer">
<label for="model-data-packages">Data Packages</label>
<select id="model-data-packages" name="model-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|safe }}</option>
{% endif %}
{% endfor %}
<option disabled>Unreviewed Packages</option>
{% for obj in meta.readable_packages %}
{% if not obj.reviewed %}
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<option disabled>Unreviewed Packages</option>
{% for obj in meta.readable_packages %}
{% if not obj.reviewed %}
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<!-- Fingerprinter -->
<div id="fingerprinter" class="ep-model-param mlrr">
<label for="model-fingerprinter">Fingerprinter</label>
<select
id="model-fingerprinter"
name="model-fingerprinter"
data-actions-box="true"
class="form-control"
multiple
data-width="100%"
>
<option value="MACCS" selected>MACCS Fingerprinter</option>
{% if meta.enabled_features.PLUGINS and additional_descriptors %}
<option disabled selected>
Select Additional Fingerprinter / Descriptor
</option>
{% for k, v in additional_descriptors.items %}
<option value="{{ v }}">{{ k }}</option>
{% endfor %}
{% endif %}
</select>
</div>
<!-- Fingerprinter -->
<div id="fingerprinter" class="ep-model-param mlrr">
<label for="model-fingerprinter">Fingerprinter</label>
<select id="model-fingerprinter" name="model-fingerprinter" data-actions-box='true'
class="form-control" multiple data-width='100%'>
<option value="MACCS" selected>MACCS Fingerprinter</option>
{% if meta.enabled_features.PLUGINS and additional_descriptors %}
<option disabled selected>Select Additional Fingerprinter / Descriptor</option>
{% for k, v in additional_descriptors.items %}
<option value="{{ v }}">{{ k }}</option>
{% endfor %}
{% endif %}
</select>
</div>
<!-- Threshold -->
<div id="threshold" class="ep-model-param mlrr enviformer">
<label for="model-threshold">Threshold</label>
<input
type="number"
min="0"
max="1"
step="0.05"
value="0.5"
id="model-threshold"
name="model-threshold"
class="form-control"
/>
</div>
<!-- Threshold -->
<div id="threshold" class="ep-model-param mlrr enviformer">
<label for="model-threshold">Threshold</label>
<input type="number" min="0" max="1" step="0.05" value="0.5" id="model-threshold"
name="model-threshold" class="form-control">
</div>
<div id="appdomain" class="ep-model-param mlrr">
{% if meta.enabled_features.APPLICABILITY_DOMAIN %}
<!-- Build AD? -->
<div class="checkbox">
<label>
<input type="checkbox" id="build-app-domain" name="build-app-domain">Also build an
Applicability Domain?
</label>
</div>
<div id="ad-params" style="display:none">
<!-- Num Neighbors -->
<label for="num-neighbors">Number of Neighbors</label>
<input id="num-neighbors" name="num-neighbors" type="number" class="form-control"
value="5"
step="1" min="0" max="10">
<!-- Local Compatibility -->
<label for="local-compatibility-threshold">Local Compatibility Threshold</label>
<input id="local-compatibility-threshold" name="local-compatibility-threshold"
type="number"
class="form-control" value="0.5" step="0.01" min="0" max="1">
<!-- Reliability -->
<label for="reliability-threshold">Reliability Threshold</label>
<input id="reliability-threshold" name="reliability-threshold" type="number"
class="form-control" value="0.5" step="0.01" min="0" max="1">
</div>
{% endif %}
</div>
</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 id="appdomain" class="ep-model-param mlrr">
{% if meta.enabled_features.APPLICABILITY_DOMAIN %}
<!-- Build AD? -->
<div class="checkbox">
<label>
<input
type="checkbox"
id="build-app-domain"
name="build-app-domain"
/>Also build an Applicability Domain?
</label>
</div>
<div id="ad-params" style="display:none">
<!-- Num Neighbors -->
<label for="num-neighbors">Number of Neighbors</label>
<input
id="num-neighbors"
name="num-neighbors"
type="number"
class="form-control"
value="5"
step="1"
min="0"
max="10"
/>
<!-- Local Compatibility -->
<label for="local-compatibility-threshold"
>Local Compatibility Threshold</label
>
<input
id="local-compatibility-threshold"
name="local-compatibility-threshold"
type="number"
class="form-control"
value="0.5"
step="0.01"
min="0"
max="1"
/>
<!-- Reliability -->
<label for="reliability-threshold">Reliability Threshold</label>
<input
id="reliability-threshold"
name="reliability-threshold"
type="number"
class="form-control"
value="0.5"
step="0.01"
min="0"
max="1"
/>
</div>
{% endif %}
</div>
</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 () {
// Built in Model Types
var nativeModelTypes = [
"mlrr",
"rbrr",
"enviformer",
]
// Initially hide all "specific" forms
$(".ep-model-param").each(function () {
$(this).hide();
});
$('#model-type').selectpicker();
$("#model-fingerprinter").selectpicker();
$("#model-rule-packages").selectpicker();
$("#model-data-packages").selectpicker();
$("#build-app-domain").change(function () {
if ($(this).is(":checked")) {
$('#ad-params').show();
} else {
$('#ad-params').hide();
}
});
// On change hide all and show only selected
$("#model-type").change(function () {
$('.ep-model-param').hide();
var modelType = $('#model-type').val();
if (nativeModelTypes.indexOf(modelType) !== -1) {
$('.' + modelType).show();
} else {
// do nothing
}
});
$('#new_model_modal_form_submit').on('click', function (e) {
e.preventDefault();
$('#new_model_form').submit();
});
$(function () {
// Built in Model Types
var nativeModelTypes = ["mlrr", "rbrr", "enviformer"];
// Initially hide all "specific" forms
$(".ep-model-param").each(function () {
$(this).hide();
});
$("#model-type").selectpicker();
$("#model-fingerprinter").selectpicker();
$("#model-rule-packages").selectpicker();
$("#model-data-packages").selectpicker();
$("#build-app-domain").change(function () {
if ($(this).is(":checked")) {
$("#ad-params").show();
} else {
$("#ad-params").hide();
}
});
// On change hide all and show only selected
$("#model-type").change(function () {
$(".ep-model-param").hide();
var modelType = $("#model-type").val();
if (nativeModelTypes.indexOf(modelType) !== -1) {
$("." + modelType).show();
} else {
// do nothing
}
});
$("#new_model_modal_form_submit").on("click", function (e) {
e.preventDefault();
$("#new_model_form").submit();
});
});
</script>

View File

@ -1,62 +1,68 @@
<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">&times;</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
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">&times;</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();
$(function () {
$("#new_package_modal_form_submit").on("click", function (e) {
e.preventDefault();
$("#new_package_modal_form").submit();
});
});
});
</script>

View File

@ -1,302 +1,376 @@
{% 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">&times;</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|safe }}</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
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">&times;</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|safe }}</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',
);
s = new Setting(
"settingName",
"package_multi_select",
"modelSelect",
"cutoff",
"evalType",
"availableTS",
"forms",
"truncatorTable",
"summaryTable",
);
$(function() {
$(function () {
// hide all forms
$('#forms').children().hide()
$("#forms").children().hide();
$("#render-button").on("click", function() {
syncKetcherAndTextInput('text', "ifKetcher", "smilesinput");
$("#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');
$("#smilesinput").on("input", function () {
syncKetcherAndTextInput("text", "ifKetcher", "smilesinput");
});
// If theres an update in ketcher sync it to textinput
setInterval(function() {
syncKetcherAndTextInput('ketcher', 'ifKetcher', 'smilesinput');
setInterval(function () {
syncKetcherAndTextInput("ketcher", "ifKetcher", "smilesinput");
}, 250);
$("#smilesinput").on("blur", function() {
syncKetcherAndTextInput('text', 'ifKetcher', 'smilesinput');
$("#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,
$("#smilesinput").on("keypress", function (event) {
if (event.keyCode == 13) {
syncKetcherAndTextInput("text", "ifKetcher", "smilesinput");
}
});
$('#modal-form-submit').on('click', function() {
// 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>
});
});
</script>

View File

@ -1,109 +1,185 @@
{% 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">&times;</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 %}
<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">&times;</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-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="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|safe }}</option>
{% endif %}
{% endfor %}
<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|safe }}</option>
{% endif %}
{% endfor %}
<option disabled>Unreviewed Packages</option>
{% for obj in meta.readable_packages %}
{% if not obj.reviewed %}
<option value="{{ obj.url }}">{{ obj.name|safe }}</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|safe }}</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>
<option disabled>Unreviewed Packages</option>
{% for obj in meta.readable_packages %}
{% if not obj.reviewed %}
<option value="{{ obj.url }}">{{ obj.name|safe }}</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|safe }}</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>
<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() {
$(function () {
// Initially hide all "specific" forms
$("div[id$='-specific-form']").each(function () {
$(this).hide();
});
// Initially hide all "specific" forms
$("div[id$='-specific-form']").each( function() {
$(this).hide();
});
$("#rule-based-prediction-setting-packages").selectpicker();
$("#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();
});
// 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();
$('#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();
});
});
})
const formData = $("#new-prediction-setting-modal-form").serialize();
$.post("/setting", formData, function (response) {
location.reload();
});
});
});
</script>

View File

@ -1,50 +1,91 @@
{% 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
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);
$(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());
k = getKetcher("new_reaction_ketcher");
$("#reaction-smirks").val(k.getSmiles());
// submit form
$('#new_reaction_modal_form').submit();
// submit form
$("#new_reaction_modal_form").submit();
});
});
});
</script>

View File

@ -1,72 +1,120 @@
{% 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"/>
<label for="rule-smirks">SMIRKS</label>
<input id="rule-smirks" class="form-control" name="rule-smirks" placeholder="SMIRKS"/>
<p></p>
<div id="rule-smirks-viz"></div>
<input type="hidden" name="rule-type" id="rule-type" value="SimpleAmbitRule">
<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
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"
/>
<label for="rule-smirks">SMIRKS</label>
<input
id="rule-smirks"
class="form-control"
name="rule-smirks"
placeholder="SMIRKS"
/>
<p></p>
<div id="rule-smirks-viz"></div>
<input
type="hidden"
name="rule-type"
id="rule-type"
value="SimpleAmbitRule"
/>
<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() {
$(function () {
$("#rule-smirks").on("input", function (e) {
$("#rule-smirks-viz").empty();
$('#rule-smirks').on('input', function(e) {
$('#rule-smirks-viz').empty()
smirks = $("#rule-smirks").val();
smirks = $('#rule-smirks').val()
const img = new Image();
img.src =
"{% url 'depict' %}?is_query_smirks=true&smirks=" +
encodeURIComponent(smirks);
img.style.width = "100%";
img.style.height = "100%";
img.style.objectFit = "cover";
const img = new Image();
img.src = "{% url 'depict' %}?is_query_smirks=true&smirks=" + encodeURIComponent(smirks);
img.style.width = '100%';
img.style.height = '100%';
img.style.objectFit = 'cover';
img.onload = function () {
$("#rule-smirks-viz").append(img);
};
img.onload = function () {
$('#rule-smirks-viz').append(img);
};
img.onerror = function () {
error_tpl = `
img.onerror = function () {
error_tpl = `
<div class="alert alert-error" role="alert">
<h4 class="alert-heading">Could not render SMIRKS!</h4>
<p>Could not render SMIRKS - Have you entered a valid SMIRKS?</a>
</p>
</div>`
$('#rule-smirks-viz').append(error_tpl);
};
</div>`;
$("#rule-smirks-viz").append(error_tpl);
};
});
$('#new_rule_modal_form_submit').on('click', function(e) {
e.preventDefault();
$(this).prop("disabled",true);
// submit form
$('#new_rule_modal_form').submit();
$("#new_rule_modal_form_submit").on("click", function (e) {
e.preventDefault();
$(this).prop("disabled", true);
// submit form
$("#new_rule_modal_form").submit();
});
});
});
</script>

View File

@ -1,102 +1,153 @@
<div class="modal fade" tabindex="-1" id="new_scenario_modal" role="dialog" aria-labelledby="new_scenario_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">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">New Scenario</h4>
</div>
<div class="modal-body">
<form id="new_scenario_form" accept-charset="UTF-8" action="{{ meta.current_package.url }}/scenario"
data-remote="true" method="post">
{% csrf_token %}
<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.
<a target="_blank" href="https://wiki.envipath.org/index.php/scenario" role="button">wiki
&gt;&gt;</a>
</div>
<label for="scenario-name">Name</label>
<input id="scenario-name" name="scenario-name" class="form-control" placeholder="Name"/>
<label for="scenario-description">Description</label>
<input id="scenario-description" name="scenario-description" class="form-control"
placeholder="Description"/>
<label id="dateField" for="dateYear">Date</label>
<table>
<tr>
<th>
<input type="number" id="dateYear" name="scenario-date-year" class="form-control"
placeholder="YYYY" max="{% now "Y" %}">
</th>
<th>
<input type="number" id="dateMonth" name="scenario-date-month" min="1" max="12"
class="form-control" placeholder="MM" >
</th>
<th>
<input type="number" id="dateDay" name="scenario-date-day" min="1" max="31" class="form-control"
placeholder="DD">
</th>
</tr>
</table>
<label for="scenario-type">Scenario Type</label>
<select id="scenario-type" name="scenario-type" class="form-control" data-width='100%'>
<option value="empty" selected>Empty Scenario</option>
{% for k, v in scenario_types.items %}
<option value="{{ v.name }}">{{ k }}</option>
{% endfor %}
</select>
<div
class="modal fade"
tabindex="-1"
id="new_scenario_modal"
role="dialog"
aria-labelledby="new_scenario_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">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">New Scenario</h4>
</div>
<div class="modal-body">
<form
id="new_scenario_form"
accept-charset="UTF-8"
action="{{ meta.current_package.url }}/scenario"
data-remote="true"
method="post"
>
{% csrf_token %}
<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.
<a
target="_blank"
href="https://wiki.envipath.org/index.php/scenario"
role="button"
>wiki &gt;&gt;</a
>
</div>
<label for="scenario-name">Name</label>
<input
id="scenario-name"
name="scenario-name"
class="form-control"
placeholder="Name"
/>
<label for="scenario-description">Description</label>
<input
id="scenario-description"
name="scenario-description"
class="form-control"
placeholder="Description"
/>
<label id="dateField" for="dateYear">Date</label>
<table>
<tr>
<th>
<input
type="number"
id="dateYear"
name="scenario-date-year"
class="form-control"
placeholder="YYYY"
max="{% now "Y" %}"
/>
</th>
<th>
<input
type="number"
id="dateMonth"
name="scenario-date-month"
min="1"
max="12"
class="form-control"
placeholder="MM"
/>
</th>
<th>
<input
type="number"
id="dateDay"
name="scenario-date-day"
min="1"
max="31"
class="form-control"
placeholder="DD"
/>
</th>
</tr>
</table>
<label for="scenario-type">Scenario Type</label>
<select
id="scenario-type"
name="scenario-type"
class="form-control"
data-width="100%"
>
<option value="empty" selected>Empty Scenario</option>
{% for k, v in scenario_types.items %}
<option value="{{ v.name }}">{{ k }}</option>
{% endfor %}
</select>
{% for type in scenario_types.values %}
<div id="{{ type.name }}-specific-inputs">
{% for widget in type.widgets %}
{{ widget|safe }}
{% endfor %}
</div>
{% endfor %}
</form>
{% for type in scenario_types.values %}
<div id="{{ type.name }}-specific-inputs">
{% for widget in type.widgets %}
{{ widget|safe }}
{% endfor %}
</div>
<div class="modal-footer">
<a id="new_scenario_modal_form_submit" class="btn btn-primary" href="#">Submit</a>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
{% endfor %}
</form>
</div>
<div class="modal-footer">
<a id="new_scenario_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-inputs']").each(function () {
$(this).hide();
});
// On change hide all and show only selected
$("#scenario-type").change(function () {
$("div[id$='-specific-inputs']").each(function () {
$(this).hide();
});
val = $('option:selected', this).val();
$("#" + val + "-specific-inputs").show();
});
$('#new_scenario_modal_form_submit').on('click', function (e) {
e.preventDefault();
$('#new_scenario_form').submit();
});
var dateYear = document.getElementById("dateYear");
dateYear.addEventListener("change", () => {
console.log("Final value after editing:", dateYear.value);
if (dateYear.value.length < 4) {
dateYear.value = {% now "Y" %};
}
});
$(function () {
// Initially hide all "specific" forms
$("div[id$='-specific-inputs']").each(function () {
$(this).hide();
});
</script>
// On change hide all and show only selected
$("#scenario-type").change(function () {
$("div[id$='-specific-inputs']").each(function () {
$(this).hide();
});
val = $("option:selected", this).val();
$("#" + val + "-specific-inputs").show();
});
$("#new_scenario_modal_form_submit").on("click", function (e) {
e.preventDefault();
$("#new_scenario_form").submit();
});
var dateYear = document.getElementById("dateYear");
dateYear.addEventListener("change", () => {
console.log("Final value after editing:", dateYear.value);
if (dateYear.value.length < 4) {
dateYear.value = new Date().getFullYear();
}
});
});
</script>

View File

@ -1,61 +1,92 @@
{% load static %}
<!-- Add Additional Information-->
<div id="add_additional_information_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">&times;</span>
</button>
<h3 class="modal-title">Add Additional Information</h3>
</div>
<div class="modal-body">
<select id="select-additional-information-type" data-actions-box='true' class="form-control" data-width='100%'>
<option selected disabled>Select the type to add</option>
{% for add_inf in available_additional_information %}
<option value="{{ add_inf.name }}">{{ add_inf.display_name }}</option>
{% endfor %}
</select>
{% for add_inf in available_additional_information %}
<div class="aiform {{ add_inf.name }}" style="display: none;">
<form id="add_{{ add_inf.name }}_add-additional-information-modal-form" accept-charset="UTF-8"
action="" data-remote="true" method="post">
{% csrf_token %}
{{ add_inf.widget|safe }}
<input type="hidden" name="hidden" value="add-additional-information">
</form>
</div>
{% endfor %}
</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="add-additional-information-modal-submit">Add
</button>
</div>
</div>
<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">&times;</span>
</button>
<h3 class="modal-title">Add Additional Information</h3>
</div>
<div class="modal-body">
<select
id="select-additional-information-type"
data-actions-box="true"
class="form-control"
data-width="100%"
>
<option selected disabled>Select the type to add</option>
{% for add_inf in available_additional_information %}
<option value="{{ add_inf.name }}">
{{ add_inf.display_name }}
</option>
{% endfor %}
</select>
{% for add_inf in available_additional_information %}
<div class="aiform {{ add_inf.name }}" style="display: none;">
<form
id="add_{{ add_inf.name }}_add-additional-information-modal-form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
{{ add_inf.widget|safe }}
<input
type="hidden"
name="hidden"
value="add-additional-information"
/>
</form>
</div>
{% endfor %}
</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="add-additional-information-modal-submit"
>
Add
</button>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#select-additional-information-type').change(function(e){
var selectedType = $("#select-additional-information-type :selected").val();
$('.aiform').hide();
$('.' + selectedType).show();
})
$('#add-additional-information-modal-submit').click(function(e){
e.preventDefault();
var selectedType = $("#select-additional-information-type :selected").val();
console.log(selectedType);
if (selectedType !== null && selectedType !== undefined && selectedType !== '') {
$('.' + selectedType + ' >form').submit();
}
$(function () {
$("#select-additional-information-type").change(function (e) {
var selectedType = $(
"#select-additional-information-type :selected",
).val();
$(".aiform").hide();
$("." + selectedType).show();
});
});
$("#add-additional-information-modal-submit").click(function (e) {
e.preventDefault();
var selectedType = $(
"#select-additional-information-type :selected",
).val();
console.log(selectedType);
if (
selectedType !== null &&
selectedType !== undefined &&
selectedType !== ""
) {
$("." + selectedType + " >form").submit();
}
});
});
</script>

View File

@ -1,127 +1,174 @@
{% load static %}
<div class="modal fade bs-modal-lg" id="add_pathway_edge_modal" tabindex="-1" aria-labelledby="add_pathway_edge_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">&times;</span>
</button>
<h4 class="modal-title">Add a Reaction</h4>
<div
class="modal fade bs-modal-lg"
id="add_pathway_edge_modal"
tabindex="-1"
aria-labelledby="add_pathway_edge_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">&times;</span>
</button>
<h4 class="modal-title">Add a Reaction</h4>
</div>
<div class="modal-body">
<form
id="add_pathway_edge_modal_form"
accept-charset="UTF-8"
action="{% url 'package pathway edge list' meta.current_package.uuid pathway.uuid %}"
data-remote="true"
method="post"
>
{% csrf_token %}
<label for="edge-name">Name</label>
<input
id="edge-name"
class="form-control"
name="edge-name"
placeholder="Name"
/>
<label for="edge-description">Description</label>
<input
id="edge-description"
class="form-control"
name="edge-description"
placeholder="Description"
/>
<p></p>
<div class="row">
<div class="col-xs-5">
<legend>Substrate(s)</legend>
</div>
<div class="modal-body">
<form id="add_pathway_edge_modal_form" accept-charset="UTF-8"
action="{% url 'package pathway edge list' meta.current_package.uuid pathway.uuid %}"
data-remote="true" method="post">
{% csrf_token %}
<label for="edge-name">Name</label>
<input id="edge-name" class="form-control" name="edge-name" placeholder="Name"/>
<label for="edge-description">Description</label>
<input id="edge-description" class="form-control" name="edge-description" placeholder="Description"/>
<p></p>
<div class="row">
<div class="col-xs-5">
<legend>Substrate(s)</legend>
</div>
<div class="col-xs-2">
</div>
<div class="col-xs-5">
<legend>Product(s)</legend>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<select id="add_pathway_edge_substrates" name="edge-substrates"
data-actions-box='true' class="form-control" multiple data-width='100%'>
{% for n in pathway.nodes %}
<option data-smiles="{{ n.default_node_label.smiles }}" value="{{ n.url }}">{{ n.default_node_label.name|safe }}</option>
{% endfor %}
</select>
</div>
<div class="col-xs-2" style="display: flex; justify-content: center; align-items: center;">
<i class="glyphicon glyphicon-arrow-right"></i>
</div>
<div class="col-xs-5">
<select id="add_pathway_edge_products" name="edge-products"
data-actions-box='true' class="form-control" multiple data-width='100%'>
{% for n in pathway.nodes %}
<option data-smiles="{{ n.default_node_label.smiles }}" value="{{ n.url }}">{{ n.default_node_label.name|safe }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="row">
<p></p>
<div class="col-xs-12" id="reaction_image">
</div>
</div>
</form>
<div class="col-xs-2"></div>
<div class="col-xs-5">
<legend>Product(s)</legend>
</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="add_pathway_edge_modal_form_submit">Submit</button>
</div>
<div class="row">
<div class="col-xs-5">
<select
id="add_pathway_edge_substrates"
name="edge-substrates"
data-actions-box="true"
class="form-control"
multiple
data-width="100%"
>
{% for n in pathway.nodes %}
<option
data-smiles="{{ n.default_node_label.smiles }}"
value="{{ n.url }}"
>
{{ n.default_node_label.name|safe }}
</option>
{% endfor %}
</select>
</div>
</div>
<div
class="col-xs-2"
style="display: flex; justify-content: center; align-items: center;"
>
<i class="glyphicon glyphicon-arrow-right"></i>
</div>
<div class="col-xs-5">
<select
id="add_pathway_edge_products"
name="edge-products"
data-actions-box="true"
class="form-control"
multiple
data-width="100%"
>
{% for n in pathway.nodes %}
<option
data-smiles="{{ n.default_node_label.smiles }}"
value="{{ n.url }}"
>
{{ n.default_node_label.name|safe }}
</option>
{% endfor %}
</select>
</div>
</div>
<div class="row">
<p></p>
<div class="col-xs-12" id="reaction_image"></div>
</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="add_pathway_edge_modal_form_submit"
>
Submit
</button>
</div>
</div>
</div>
</div>
<script>
function reactionImage() {
var substrates = [];
$('#add_pathway_edge_substrates option:selected').each(function () {
var smiles = $(this).data('smiles'); // read data-smiles attribute
substrates.push(smiles);
});
var products = []
$('#add_pathway_edge_products option:selected').each(function () {
var smiles = $(this).data('smiles'); // read data-smiles attribute
products.push(smiles);
});
if (substrates.length > 0 && products.length > 0) {
reaction = substrates.join('.') + ">>" + products.join('.');
$('#reaction_image').empty();
$('#reaction_image').append(
"<img width='100%' src='{% url 'depict' %}?smirks=" + encodeURIComponent(reaction) +"'>"
);
}
}
$(function () {
$("#add_pathway_edge_substrates").selectpicker();
$("#add_pathway_edge_products").selectpicker();
$("#add_pathway_edge_substrates").on('change', function (e) {
reactionImage();
})
$("#add_pathway_edge_products").on('change', function (e) {
reactionImage();
})
$(function () {
$('#add_pathway_edge_modal_form_submit').on('click', function (e) {
e.preventDefault();
$(this).prop("disabled", true);
// submit form
$('#add_pathway_edge_modal_form').submit();
});
});
function reactionImage() {
var substrates = [];
$("#add_pathway_edge_substrates option:selected").each(function () {
var smiles = $(this).data("smiles"); // read data-smiles attribute
substrates.push(smiles);
});
var products = [];
$("#add_pathway_edge_products option:selected").each(function () {
var smiles = $(this).data("smiles"); // read data-smiles attribute
products.push(smiles);
});
if (substrates.length > 0 && products.length > 0) {
reaction = substrates.join(".") + ">>" + products.join(".");
$("#reaction_image").empty();
$("#reaction_image").append(
"<img width='100%' src='{% url 'depict' %}?smirks=" +
encodeURIComponent(reaction) +
"'>",
);
}
}
$(function () {
$("#add_pathway_edge_substrates").selectpicker();
$("#add_pathway_edge_products").selectpicker();
$("#add_pathway_edge_substrates").on("change", function (e) {
reactionImage();
});
$("#add_pathway_edge_products").on("change", function (e) {
reactionImage();
});
$(function () {
$("#add_pathway_edge_modal_form_submit").on("click", function (e) {
e.preventDefault();
$(this).prop("disabled", true);
// submit form
$("#add_pathway_edge_modal_form").submit();
});
});
});
</script>

View File

@ -1,78 +1,119 @@
{% load static %}
<div class="modal fade bs-modal-lg" id="add_pathway_node_modal" tabindex="-1" aria-labelledby="add_pathway_node_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">&times;</span>
</button>
<h4 class="modal-title">Add a Node</h4>
</div>
<div class="modal-body">
<form id="add_pathway_node_modal_form" accept-charset="UTF-8" action="{% url 'package pathway node list' meta.current_package.uuid pathway.uuid %}" data-remote="true" method="post">
{% csrf_token %}
<label for="node-name">Name</label>
<input id="node-name" class="form-control" name="node-name" placeholder="Name"/>
<label for="node-description">Description</label>
<input id="node-description" class="form-control" name="node-description" placeholder="Description"/>
<label for="node-smiles">SMILES</label>
<input type="text" class="form-control" name="node-smiles" placeholder="SMILES" id="node-smiles">
<p></p>
<div>
<iframe id="add_node_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
height="510"></iframe>
</div>
<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="add_pathway_node_modal_form_submit">Submit</button>
</div>
</div>
<div
class="modal fade bs-modal-lg"
id="add_pathway_node_modal"
tabindex="-1"
aria-labelledby="add_pathway_node_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">&times;</span>
</button>
<h4 class="modal-title">Add a Node</h4>
</div>
<div class="modal-body">
<form
id="add_pathway_node_modal_form"
accept-charset="UTF-8"
action="{% url 'package pathway node list' meta.current_package.uuid pathway.uuid %}"
data-remote="true"
method="post"
>
{% csrf_token %}
<label for="node-name">Name</label>
<input
id="node-name"
class="form-control"
name="node-name"
placeholder="Name"
/>
<label for="node-description">Description</label>
<input
id="node-description"
class="form-control"
name="node-description"
placeholder="Description"
/>
<label for="node-smiles">SMILES</label>
<input
type="text"
class="form-control"
name="node-smiles"
placeholder="SMILES"
id="node-smiles"
/>
<p></p>
<div>
<iframe
id="add_node_ketcher"
src="{% static '/js/ketcher2/ketcher.html' %}"
width="100%"
height="510"
></iframe>
</div>
<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="add_pathway_node_modal_form_submit"
>
Submit
</button>
</div>
</div>
</div>
</div>
<script>
function newStructureModalketcherToNewStructureModalTextInput() {
$("#node-smiles").val(this.ketcher.getSmiles());
}
function newStructureModalketcherToNewStructureModalTextInput() {
$('#node-smiles').val(this.ketcher.getSmiles());
}
$(function () {
$("#add_node_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: newStructureModalketcherToNewStructureModalTextInput,
ketcher: win.ketcher,
});
} else {
setTimeout(checkKetcherReady, 100);
}
};
$(function() {
$('#add_node_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: newStructureModalketcherToNewStructureModalTextInput,
ketcher: win.ketcher
});
} else {
setTimeout(checkKetcherReady, 100);
}
};
checkKetcherReady();
})
$(function() {
$('#add_pathway_node_modal_form_submit').on('click', function(e) {
e.preventDefault();
$(this).prop("disabled",true);
// submit form
$('#add_pathway_node_modal_form').submit();
});
checkKetcherReady();
});
});
$(function () {
$("#add_pathway_node_modal_form_submit").on("click", function (e) {
e.preventDefault();
$(this).prop("disabled", true);
// submit form
$("#add_pathway_node_modal_form").submit();
});
});
});
</script>

View File

@ -1,78 +1,119 @@
{% load static %}
<div class="modal fade bs-modal-lg" id="add_structure_modal" tabindex="-1" aria-labelledby="add_structure_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 Structure</h4>
</div>
<div class="modal-body">
<form id="add_structure_modal_form" accept-charset="UTF-8" action="{% url 'package compound structure list' meta.current_package.uuid compound.uuid %}" data-remote="true" method="post">
{% csrf_token %}
<label for="structure-name">Name</label>
<input id="structure-name" class="form-control" name="structure-name" placeholder="Name"/>
<label for="structure-description">Description</label>
<input id="structure-description" class="form-control" name="structure-description" placeholder="Description"/>
<label for="structure-smiles">SMILES</label>
<input type="text" class="form-control" name="structure-smiles" placeholder="SMILES" id="structure-smiles">
<p></p>
<div>
<iframe id="add_structure_ketcher" src="{% static '/js/ketcher2/ketcher.html' %}" width="100%"
height="510"></iframe>
</div>
<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="add_structure_modal_form_submit">Submit</button>
</div>
</div>
<div
class="modal fade bs-modal-lg"
id="add_structure_modal"
tabindex="-1"
aria-labelledby="add_structure_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 Structure</h4>
</div>
<div class="modal-body">
<form
id="add_structure_modal_form"
accept-charset="UTF-8"
action="{% url 'package compound structure list' meta.current_package.uuid compound.uuid %}"
data-remote="true"
method="post"
>
{% csrf_token %}
<label for="structure-name">Name</label>
<input
id="structure-name"
class="form-control"
name="structure-name"
placeholder="Name"
/>
<label for="structure-description">Description</label>
<input
id="structure-description"
class="form-control"
name="structure-description"
placeholder="Description"
/>
<label for="structure-smiles">SMILES</label>
<input
type="text"
class="form-control"
name="structure-smiles"
placeholder="SMILES"
id="structure-smiles"
/>
<p></p>
<div>
<iframe
id="add_structure_ketcher"
src="{% static '/js/ketcher2/ketcher.html' %}"
width="100%"
height="510"
></iframe>
</div>
<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="add_structure_modal_form_submit"
>
Submit
</button>
</div>
</div>
</div>
</div>
<script>
function newStructureModalketcherToNewStructureModalTextInput() {
$("#structure-smiles").val(this.ketcher.getSmiles());
}
function newStructureModalketcherToNewStructureModalTextInput() {
$('#structure-smiles').val(this.ketcher.getSmiles());
}
$(function () {
$("#add_structure_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: newStructureModalketcherToNewStructureModalTextInput,
ketcher: win.ketcher,
});
} else {
setTimeout(checkKetcherReady, 100);
}
};
$(function() {
$('#add_structure_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: newStructureModalketcherToNewStructureModalTextInput,
ketcher: win.ketcher
});
} else {
setTimeout(checkKetcherReady, 100);
}
};
checkKetcherReady();
})
$(function() {
$('#add_structure_modal_form_submit').on('click', function(e) {
e.preventDefault();
$(this).prop("disabled",true);
// submit form
$('#add_structure_modal_form').submit();
});
checkKetcherReady();
});
});
$(function () {
$("#add_structure_modal_form_submit").on("click", function (e) {
e.preventDefault();
$(this).prop("disabled", true);
// submit form
$("#add_structure_modal_form").submit();
});
});
});
</script>

View File

@ -1,66 +1,89 @@
{% load static %}
<!-- Delete Edge -->
<div id="delete_pathway_edge_modal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Delete Edge</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Deletes the Edge. Nodes referenced by this edge will remain.
<p></p>
<form id="delete-pathway-edge-modal-form" accept-charset="UTF-8" action="" data-remote="true"
method="post">
{% csrf_token %}
<select id="delete_pathway_edge_edges" name="edge-url"
data-actions-box='true' class="form-control" data-width='100%'>
<option value="" disabled selected>Select Reaction to delete</option>
{% for e in pathway.edges %}
<option value="{{ e.url }}">{{ e.edge_label.name|safe }}</option>
{% endfor %}
</select>
<input type="hidden" id="hidden" name="hidden" value="delete"/>
</form>
<p></p>
<div id="delete_pathway_edge_image"></div>
</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-pathway-edge-modal-submit">Delete</button>
</div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Delete Edge</h3>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Deletes the Edge. Nodes referenced by this edge will remain.
<p></p>
<form
id="delete-pathway-edge-modal-form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<select
id="delete_pathway_edge_edges"
name="edge-url"
data-actions-box="true"
class="form-control"
data-width="100%"
>
<option value="" disabled selected>
Select Reaction to delete
</option>
{% for e in pathway.edges %}
<option value="{{ e.url }}">{{ e.edge_label.name|safe }}</option>
{% endfor %}
</select>
<input type="hidden" id="hidden" name="hidden" value="delete" />
</form>
<p></p>
<div id="delete_pathway_edge_image"></div>
</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-pathway-edge-modal-submit"
>
Delete
</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
$("#delete_pathway_edge_edges").selectpicker();
$(function () {
$("#delete_pathway_edge_edges").selectpicker();
$("#delete_pathway_edge_edges").on('change', function (e) {
edge_url = $('#delete_pathway_edge_edges option:selected').val()
$("#delete_pathway_edge_edges").on("change", function (e) {
edge_url = $("#delete_pathway_edge_edges option:selected").val();
if (edge_url !== "") {
$('#delete_pathway_edge_image').empty();
$('#delete_pathway_edge_image').append(
"<img width='100%' src='" + edge_url + "?image=svg'>"
);
}
})
if (edge_url !== "") {
$("#delete_pathway_edge_image").empty();
$("#delete_pathway_edge_image").append(
"<img width='100%' src='" + edge_url + "?image=svg'>",
);
}
});
$('#delete-pathway-edge-modal-submit').click(function (e) {
e.preventDefault();
edge_url = $('#delete_pathway_edge_edges option:selected').val()
$("#delete-pathway-edge-modal-submit").click(function (e) {
e.preventDefault();
edge_url = $("#delete_pathway_edge_edges option:selected").val();
if (edge_url === "") {
return;
}
if (edge_url === "") {
return;
}
$('#delete-pathway-edge-modal-form').attr('action', edge_url)
$('#delete-pathway-edge-modal-form').submit();
});
})
$("#delete-pathway-edge-modal-form").attr("action", edge_url);
$("#delete-pathway-edge-modal-form").submit();
});
});
</script>

View File

@ -2,65 +2,92 @@
<!-- Delete Node -->
<div id="delete_pathway_node_modal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Delete Node</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Deletes the Node. Edges having this Node as Substrate or Product will be removed as well.
<p></p>
<form id="delete-pathway-node-modal-form" accept-charset="UTF-8" action="" data-remote="true"
method="post">
{% csrf_token %}
<select id="delete_pathway_node_nodes" name="node-url"
data-actions-box='true' class="form-control" data-width='100%'>
<option value="" disabled selected>Select Compound to delete</option>
{% for n in pathway.nodes %}
<option value="{{ n.url }}">{{ n.default_node_label.name|safe }}</option>
{% endfor %}
</select>
<input type="hidden" id="hidden" name="hidden" value="delete"/>
</form>
<p></p>
<div id="delete_pathway_node_image"></div>
</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-pathway-node-modal-submit">Delete</button>
</div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Delete Node</h3>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Deletes the Node. Edges having this Node as Substrate or Product will be
removed as well.
<p></p>
<form
id="delete-pathway-node-modal-form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<select
id="delete_pathway_node_nodes"
name="node-url"
data-actions-box="true"
class="form-control"
data-width="100%"
>
<option value="" disabled selected>
Select Compound to delete
</option>
{% for n in pathway.nodes %}
<option value="{{ n.url }}">
{{ n.default_node_label.name|safe }}
</option>
{% endfor %}
</select>
<input type="hidden" id="hidden" name="hidden" value="delete" />
</form>
<p></p>
<div id="delete_pathway_node_image"></div>
</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-pathway-node-modal-submit"
>
Delete
</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
$("#delete_pathway_node_nodes").selectpicker();
$(function () {
$("#delete_pathway_node_nodes").selectpicker();
$("#delete_pathway_node_nodes").on('change', function (e) {
node_url = $('#delete_pathway_node_nodes option:selected').val()
$("#delete_pathway_node_nodes").on("change", function (e) {
node_url = $("#delete_pathway_node_nodes option:selected").val();
if (node_url !== "") {
$('#delete_pathway_node_image').empty();
$('#delete_pathway_node_image').append(
"<img width='100%' src='" + node_url + "?image=svg'>"
);
}
})
if (node_url !== "") {
$("#delete_pathway_node_image").empty();
$("#delete_pathway_node_image").append(
"<img width='100%' src='" + node_url + "?image=svg'>",
);
}
});
$('#delete-pathway-node-modal-submit').click(function (e) {
e.preventDefault();
node_url = $('#delete_pathway_node_nodes option:selected').val()
$("#delete-pathway-node-modal-submit").click(function (e) {
e.preventDefault();
node_url = $("#delete_pathway_node_nodes option:selected").val();
if (node_url === "") {
return;
}
if (node_url === "") {
return;
}
$('#delete-pathway-node-modal-form').attr('action', node_url)
$('#delete-pathway-node-modal-form').submit();
});
})
$("#delete-pathway-node-modal-form").attr("action", node_url);
$("#delete-pathway-node-modal-form").submit();
});
});
</script>

View File

@ -1,36 +1,53 @@
{% load static %}
<!-- Download Pathway -->
<div id="download_pathway_csv_modal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Download Pathway as CSV</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
By clicking on Download the Pathway will be converted into a CSV and directly downloaded.
<form id="download-pathway-csv-modal-form" accept-charset="UTF-8" action="{{ pathway.url }}"
data-remote="true" method="GET">
<input type="hidden" name="download" value="true"/>
</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="download-pathway-csv-modal-submit">Download</button>
</div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Download Pathway as CSV</h3>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
By clicking on Download the Pathway will be converted into a CSV and
directly downloaded.
<form
id="download-pathway-csv-modal-form"
accept-charset="UTF-8"
action="{{ pathway.url }}"
data-remote="true"
method="GET"
>
<input type="hidden" name="download" value="true" />
</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="download-pathway-csv-modal-submit"
>
Download
</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#download-pathway-csv-modal-submit').click(function (e) {
e.preventDefault();
$('#download-pathway-csv-modal-form').submit();
$('#download_pathway_csv_modal').modal('hide');
});
})
$(function () {
$("#download-pathway-csv-modal-submit").click(function (e) {
e.preventDefault();
$("#download-pathway-csv-modal-form").submit();
$("#download_pathway_csv_modal").modal("hide");
});
});
</script>

View File

@ -1,32 +1,43 @@
{% load static %}
<!-- Download Pathway -->
<div id="download_pathway_image_modal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Download Pathway as Image</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
By clicking on Download the Pathway will be saved as SVG.
</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="download-pathway-image-modal-submit">Download</button>
</div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Download Pathway as Image</h3>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
By clicking on Download the Pathway will be saved as SVG.
</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="download-pathway-image-modal-submit"
>
Download
</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#download-pathway-image-modal-submit').click(function (e) {
e.preventDefault();
downloadSVG($('#pwsvg')[0], '{{ pathway.name.split|join:"_" }}.svg')
$('#download_pathway_image_modal').modal('hide');
});
})
$(function () {
$("#download-pathway-image-modal-submit").click(function (e) {
e.preventDefault();
downloadSVG($("#pwsvg")[0], '{{ pathway.name.split|join:"_" }}.svg');
$("#download_pathway_image_modal").modal("hide");
});
});
</script>

View File

@ -1,47 +1,70 @@
{% 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">Edit Compound</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Edit 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|safe}}">
</p>
<p>
<label for="compound-description">Description</label>
<input id="compound-description" type="text" class="form-control"
value="{{ compound.description|safe }}"
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">Update</button>
</div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Compound</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Edit 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|safe }}"
/>
</p>
<p>
<label for="compound-description">Description</label>
<input
id="compound-description"
type="text"
class="form-control"
value="{{ compound.description|safe }}"
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"
>
Update
</button>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#edit-compound-modal-submit').click(function(e){
e.preventDefault();
$('#edit-compound-modal-form').submit();
$(function () {
$("#edit-compound-modal-submit").click(function (e) {
e.preventDefault();
$("#edit-compound-modal-form").submit();
});
});
</script>
});
</script>

View File

@ -1,46 +1,70 @@
{% 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">&times;</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="{{ compound_structure.name|safe }}">
</p>
<p>
<label for="compound-structure-description">Description</label>
<input id="compound-structure-description" type="text" class="form-control"
value="{{ compound_structure.description|safe }}" 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 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">&times;</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="{{ compound_structure.name|safe }}"
/>
</p>
<p>
<label for="compound-structure-description">Description</label>
<input
id="compound-structure-description"
type="text"
class="form-control"
value="{{ compound_structure.description|safe }}"
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();
$(function () {
$("#edit-compound-structure-modal-submit").click(function (e) {
e.preventDefault();
$("#edit-compound-structure-modal-form").submit();
});
});
});
</script>

View File

@ -1,121 +1,151 @@
{% load static %}
<!-- Edit Package Permission -->
<div id="edit_group_member_modal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add or Remove Group Member</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>
To add member (either User or entire Groups) to this group select the entity you want to add below
and click the check mark.
<br>
To remove member simply click the <code>X</code> next to the member.
</p>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add or Remove Group Member</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>
To add member (either User or entire Groups) to this group select the
entity you want to add below and click the check mark.
<br />
To remove member simply click the <code>X</code> next to the member.
</p>
<div class="row">
<div class="col-xs-8">
<legend>User or Group</legend>
</div>
<div class="col-xs-4">
<legend>Add/Remove</legend>
</div>
</div>
<div class="row">
<form id="modal-form-group-member" class="form-inline" role="form" accept-charset="UTF-8" action=""
data-remote="true" method="post">
{% csrf_token %}
<div class="col-xs-8">
<select id="select_member" name="member" data-actions-box='true'
class="selPackages" data-width='100%'>
<option disabled selected>User</option>
{% for u in users %}
<option value="{{ u.url }}">{{ u.username }}</option>
{% endfor %}
<option disabled>Groups</option>
{% for g in groups %}
<option value="{{ g.url }}">{{ g.name|safe }}</option>
{% endfor %}
</select>
<input type="hidden" name="action" value="add">
</div>
<div class="col-xs-2">
</div>
<div class="col-xs-2">
<button type="submit" style="width:60%;" class="btn col-xs-2">
<span class="glyphicon glyphicon-ok"></span>
</button>
</div>
</form>
</div>
<p></p>
{% for u in group.user_member.all %}
<div class="row">
<form id="modal-form-group-member_{{ u.uuid }}" class="form-inline" role="form"
accept-charset="UTF-8" action="" data-remote="true" method="post">
{% csrf_token %}
<div class="col-xs-8">
{{ u.username }}
<input type="hidden" name="member" value="{{ u.url }}"/>
<input type="hidden" name="action" value="remove">
</div>
<div class="col-xs-2">
</div>
<div class="col-xs-2">
<button type="submit" style="width:60%;" class="btn col-xs-2">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</form>
</div>
{% endfor %}
<p></p>
{% for g in group.group_member.all %}
<div class="row">
<form id="modal-form-group-member_{{ g.uuid }}" class="form-inline" role="form"
accept-charset="UTF-8" action="" data-remote="true" method="post">
{% csrf_token %}
<div class="col-xs-8">
{{ g.name|safe }}
<input type="hidden" name="member" value="{{ g.url }}"/>
<input type="hidden" name="action" value="remove">
</div>
<div class="col-xs-2">
</div>
<div class="col-xs-2">
<button type="submit" style="width:60%;" class="btn col-xs-2">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</form>
</div>
{% endfor %}
</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 class="row">
<div class="col-xs-8">
<legend>User or Group</legend>
</div>
<div class="col-xs-4">
<legend>Add/Remove</legend>
</div>
</div>
<div class="row">
<form
id="modal-form-group-member"
class="form-inline"
role="form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<div class="col-xs-8">
<select
id="select_member"
name="member"
data-actions-box="true"
class="selPackages"
data-width="100%"
>
<option disabled selected>User</option>
{% for u in users %}
<option value="{{ u.url }}">{{ u.username }}</option>
{% endfor %}
<option disabled>Groups</option>
{% for g in groups %}
<option value="{{ g.url }}">{{ g.name|safe }}</option>
{% endfor %}
</select>
<input type="hidden" name="action" value="add" />
</div>
<div class="col-xs-2"></div>
<div class="col-xs-2">
<button type="submit" style="width:60%;" class="btn col-xs-2">
<span class="glyphicon glyphicon-ok"></span>
</button>
</div>
</form>
</div>
<p></p>
{% for u in group.user_member.all %}
<div class="row">
<form
id="modal-form-group-member_{{ u.uuid }}"
class="form-inline"
role="form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<div class="col-xs-8">
{{ u.username }}
<input type="hidden" name="member" value="{{ u.url }}" />
<input type="hidden" name="action" value="remove" />
</div>
<div class="col-xs-2"></div>
<div class="col-xs-2">
<button type="submit" style="width:60%;" class="btn col-xs-2">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</form>
</div>
{% endfor %}
<p></p>
{% for g in group.group_member.all %}
<div class="row">
<form
id="modal-form-group-member_{{ g.uuid }}"
class="form-inline"
role="form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<div class="col-xs-8">
{{ g.name|safe }}
<input type="hidden" name="member" value="{{ g.url }}" />
<input type="hidden" name="action" value="remove" />
</div>
<div class="col-xs-2"></div>
<div class="col-xs-2">
<button type="submit" style="width:60%;" class="btn col-xs-2">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</form>
</div>
{% endfor %}
</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();
$(function () {
$("#edit-package-modal-submit").click(function (e) {
e.preventDefault();
$("#edit-package-modal-form").submit();
});
$("#select_member").selectpicker();
})
});
</script>

View File

@ -1,45 +1,71 @@
{% load static %}
<!-- Edit Model -->
<div id="edit_model_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">&times;</span>
</button>
<h3 class="modal-title">Update Model</h3>
</div>
<div class="modal-body">
<p>Alter Name and Description of the Model.</p>
<form id="edit-model-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
{% csrf_token %}
<p>
<label for="model-name">Name</label>
<input id="model-name" type="text" class="form-control" name="model-name"
value="{{ model.name|safe }}">
</p>
<p>
<label for="model-description">Description</label>
<input id="model-description" type="text" class="form-control" name="model-description"
value="{{ model.description|safe }}">
</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-model-modal-submit">Update</button>
</div>
</div>
<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">&times;</span>
</button>
<h3 class="modal-title">Update Model</h3>
</div>
<div class="modal-body">
<p>Alter Name and Description of the Model.</p>
<form
id="edit-model-modal-form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<p>
<label for="model-name">Name</label>
<input
id="model-name"
type="text"
class="form-control"
name="model-name"
value="{{ model.name|safe }}"
/>
</p>
<p>
<label for="model-description">Description</label>
<input
id="model-description"
type="text"
class="form-control"
name="model-description"
value="{{ model.description|safe }}"
/>
</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-model-modal-submit"
>
Update
</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#edit-model-modal-submit').click(function (e) {
e.preventDefault();
$('#edit-model-modal-form').submit();
});
})
$(function () {
$("#edit-model-modal-submit").click(function (e) {
e.preventDefault();
$("#edit-model-modal-form").submit();
});
});
</script>

View File

@ -1,47 +1,70 @@
{% load static %}
<!-- Edit Node -->
<div id="edit_node_modal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Node</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Edit Node.</p>
<form id="edit-node-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
{% csrf_token %}
<p>
<label for="node-name">Name</label>
<input id="node-name" class="form-control" name="node-name" value="{{ node.name|safe}}">
</p>
<p>
<label for="node-description">Description</label>
<input id="node-description" type="text" class="form-control"
value="{{ node.description|safe }}"
name="node-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-node-modal-submit">Create</button>
</div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Node</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Edit Node.</p>
<form
id="edit-node-modal-form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<p>
<label for="node-name">Name</label>
<input
id="node-name"
class="form-control"
name="node-name"
value="{{ node.name|safe }}"
/>
</p>
<p>
<label for="node-description">Description</label>
<input
id="node-description"
type="text"
class="form-control"
value="{{ node.description|safe }}"
name="node-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-node-modal-submit"
>
Create
</button>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#edit-node-modal-submit').click(function(e){
e.preventDefault();
$('#edit-node-modal-form').submit();
$(function () {
$("#edit-node-modal-submit").click(function (e) {
e.preventDefault();
$("#edit-node-modal-form").submit();
});
});
</script>
});
</script>

View File

@ -1,45 +1,70 @@
{% 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">Update Package</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</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|safe}}">
</p>
<p>
<label for="package-description">Description</label>
<input id="package-description" type="text" class="form-control"
value="{{ package.description|safe }}"
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 class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Update Package</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</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|safe }}"
/>
</p>
<p>
<label for="package-description">Description</label>
<input
id="package-description"
type="text"
class="form-control"
value="{{ package.description|safe }}"
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();
$(function () {
$("#edit-package-modal-submit").click(function (e) {
e.preventDefault();
$("#edit-package-modal-form").submit();
});
})
});
</script>

View File

@ -1,183 +1,264 @@
{% load static %}
<!-- Edit Package Permission -->
<div id="edit_package_permissions_modal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Grant or Revoke Permissions</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>
Modify permissions for this package. Note that if you give <code>write</code>
permissions to a user or group, <code>read</code> permissions will be granted automatically.
<br>
To allow users to perform destructive actions, such as deleting the package, <code>owner</code>
permissions must be granted.
</p>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Grant or Revoke Permissions</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>
Modify permissions for this package. Note that if you give
<code>write</code> permissions to a user or group,
<code>read</code> permissions will be granted automatically.
<br />
To allow users to perform destructive actions, such as deleting the
package, <code>owner</code>
permissions must be granted.
</p>
<div class="row">
<div class="col-xs-4">
<legend>User or Group</legend>
</div>
<div class="col-xs-2">
<legend>Read</legend>
</div>
<div class="col-xs-2">
<legend>Write</legend>
</div>
<div class="col-xs-2">
<legend>Owner</legend>
</div>
</div>
<div class="row">
<form id="modal-form-permissions" class="form-inline" role="form" accept-charset="UTF-8" action=""
data-remote="true" method="post">
{% csrf_token %}
<div class="col-xs-4">
<select id="select_grantee" name="grantee" data-actions-box='true'
class="selPackages" data-width='100%'>
<option disabled selected>User</option>
{% for u in users %}
<option value="{{ u.url }}">{{ u.username }}</option>
{% endfor %}
<option disabled>Groups</option>
{% for g in groups %}
<option value="{{ g.url }}">{{ g.name|safe }}</option>
{% endfor %}
</select>
</div>
<div class="col-xs-2">
<input type="checkbox" name="read" id="read_new"/>
</div>
<div class="col-xs-2">
<input type="checkbox" name="write" id="write_new"/>
</div>
<div class="col-xs-2">
<input type="checkbox" name="owner" id="owner_new"/>
</div>
<div class="col-xs-2">
<button type="submit" style="width:60%;" class="btn col-xs-2 modify-perm-button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</form>
</div>
<p></p>
{% for up in user_permissions %}
<div class="row">
<form id="modal-form-permissions_{{ up.user.uuid }}" class="form-inline" role="form"
accept-charset="UTF-8" action="" data-remote="true" method="post">
{% csrf_token %}
<div class="col-xs-4">
{{ up.user.username }}
<input type="hidden" name="grantee" value="{{ up.user.url }}"/>
</div>
<div class="col-xs-2">
<input type="checkbox" name="read" id="read_{{ up.user.uuid }}" {% if up.has_read %} checked {% endif %}/>
</div>
<div class="col-xs-2">
<input type="checkbox" name="write" id="write_{{ up.user.uuid }}" {% if up.has_write %} checked {% endif %}/>
</div>
<div class="col-xs-2">
<input type="checkbox" name="owner" id="owner_{{ up.user.uuid }}" {% if up.has_all %} checked {% endif %}/>
</div>
<div class="col-xs-2">
<button type="submit" style="width:60%;" class="btn col-xs-2 modify-perm-button">
<span class="glyphicon glyphicon-ok"></span>
</button>
</div>
</form>
</div>
{% endfor %}
<p></p>
{% for gp in group_permissions %}
<div class="row">
<form id="modal-form-permissions_{{ gp.user.uuid }}" class="form-inline" role="form"
accept-charset="UTF-8" action="" data-remote="true" method="post">
{% csrf_token %}
<div class="col-xs-4">
{{ gp.group.name|safe }}
<input type="hidden" name="grantee" value="{{ gp.group.url }}"/>
</div>
<div class="col-xs-2">
<input type="checkbox" name="read" id="read_{{ gp.group.uuid }}" {% if gp.has_read %} checked {% endif %}/>
</div>
<div class="col-xs-2">
<input type="checkbox" name="write" id="write_{{ gp.group.uuid }}" {% if gp.has_write %} checked {% endif %}/>
</div>
<div class="col-xs-2">
<input type="checkbox" name="owner" id="owner_{{ gp.group.uuid }}" {% if gp.has_all %} checked {% endif %}/>
</div>
<div class="col-xs-2">
<button type="submit" style="width:60%;" class="btn col-xs-2 modify-perm-button">
<span class="glyphicon glyphicon-ok"></span>
</button>
</div>
</form>
</div>
{% endfor %}
</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 class="row">
<div class="col-xs-4">
<legend>User or Group</legend>
</div>
<div class="col-xs-2">
<legend>Read</legend>
</div>
<div class="col-xs-2">
<legend>Write</legend>
</div>
<div class="col-xs-2">
<legend>Owner</legend>
</div>
</div>
<div class="row">
<form
id="modal-form-permissions"
class="form-inline"
role="form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<div class="col-xs-4">
<select
id="select_grantee"
name="grantee"
data-actions-box="true"
class="selPackages"
data-width="100%"
>
<option disabled selected>User</option>
{% for u in users %}
<option value="{{ u.url }}">{{ u.username }}</option>
{% endfor %}
<option disabled>Groups</option>
{% for g in groups %}
<option value="{{ g.url }}">{{ g.name|safe }}</option>
{% endfor %}
</select>
</div>
<div class="col-xs-2">
<input type="checkbox" name="read" id="read_new" />
</div>
<div class="col-xs-2">
<input type="checkbox" name="write" id="write_new" />
</div>
<div class="col-xs-2">
<input type="checkbox" name="owner" id="owner_new" />
</div>
<div class="col-xs-2">
<button
type="submit"
style="width:60%;"
class="btn col-xs-2 modify-perm-button"
>
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</form>
</div>
<p></p>
{% for up in user_permissions %}
<div class="row">
<form
id="modal-form-permissions_{{ up.user.uuid }}"
class="form-inline"
role="form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<div class="col-xs-4">
{{ up.user.username }}
<input type="hidden" name="grantee" value="{{ up.user.url }}" />
</div>
<div class="col-xs-2">
<input
type="checkbox"
name="read"
id="read_{{ up.user.uuid }}"
{% if up.has_read %}checked{% endif %}
/>
</div>
<div class="col-xs-2">
<input
type="checkbox"
name="write"
id="write_{{ up.user.uuid }}"
{% if up.has_write %}checked{% endif %}
/>
</div>
<div class="col-xs-2">
<input
type="checkbox"
name="owner"
id="owner_{{ up.user.uuid }}"
{% if up.has_all %}checked{% endif %}
/>
</div>
<div class="col-xs-2">
<button
type="submit"
style="width:60%;"
class="btn col-xs-2 modify-perm-button"
>
<span class="glyphicon glyphicon-ok"></span>
</button>
</div>
</form>
</div>
{% endfor %}
<p></p>
{% for gp in group_permissions %}
<div class="row">
<form
id="modal-form-permissions_{{ gp.user.uuid }}"
class="form-inline"
role="form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<div class="col-xs-4">
{{ gp.group.name|safe }}
<input
type="hidden"
name="grantee"
value="{{ gp.group.url }}"
/>
</div>
<div class="col-xs-2">
<input
type="checkbox"
name="read"
id="read_{{ gp.group.uuid }}"
{% if gp.has_read %}checked{% endif %}
/>
</div>
<div class="col-xs-2">
<input
type="checkbox"
name="write"
id="write_{{ gp.group.uuid }}"
{% if gp.has_write %}checked{% endif %}
/>
</div>
<div class="col-xs-2">
<input
type="checkbox"
name="owner"
id="owner_{{ gp.group.uuid }}"
{% if gp.has_all %}checked{% endif %}
/>
</div>
<div class="col-xs-2">
<button
type="submit"
style="width:60%;"
class="btn col-xs-2 modify-perm-button"
>
<span class="glyphicon glyphicon-ok"></span>
</button>
</div>
</form>
</div>
{% endfor %}
</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 checkboxClick() {
function checkboxClick() {
// id looks like read_3cadef24-220e-4587-9fa5-0e9a17aca2da
parts = this.id.split('_');
parts = this.id.split("_");
perm = parts[0];
id = parts[1];
readbox = '#read_' + id;
writebox = '#write_' + id;
ownerbox = '#owner_' + id;
readbox = "#read_" + id;
writebox = "#write_" + id;
ownerbox = "#owner_" + id;
if (perm == "read" && !$(readbox).prop("checked")) {
$(writebox).prop("checked", false);
$(ownerbox).prop("checked", false);
}
if (perm == 'read' && !$(readbox).prop("checked")) {
$(writebox).prop("checked", false);
if (perm == "write") {
if ($(writebox).prop("checked")) {
$(readbox).prop("checked", true);
}
if (!$(writebox).prop("checked")) {
$(ownerbox).prop("checked", false);
}
}
if (perm == 'write') {
if ($(writebox).prop("checked")) {
$(readbox).prop("checked", true);
}
if (!$(writebox).prop("checked")) {
$(ownerbox).prop("checked", false);
}
if (perm == "owner") {
if ($(ownerbox).prop("checked")) {
$(readbox).prop("checked", true);
$(writebox).prop("checked", true);
}
}
}
if (perm == 'owner') {
if ($(ownerbox).prop("checked")) {
$(readbox).prop("checked", true);
$(writebox).prop("checked", true);
}
}
}
$(function() {
$('#edit-package-modal-submit').click(function(e){
e.preventDefault();
$('#edit-package-modal-form').submit();
$(function () {
$("#edit-package-modal-submit").click(function (e) {
e.preventDefault();
$("#edit-package-modal-form").submit();
});
$("#select_grantee").selectpicker();
// Add click functions to permission checkboxes
$('[id^="read_"]').on('click', checkboxClick);
$('[id^="write_"]').on('click', checkboxClick);
$('[id^="owner_"]').on('click', checkboxClick);
})
$('[id^="read_"]').on("click", checkboxClick);
$('[id^="write_"]').on("click", checkboxClick);
$('[id^="owner_"]').on("click", checkboxClick);
});
</script>

View File

@ -1,46 +1,82 @@
{% 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">&times;</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 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">&times;</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();
$(function () {
$("#edit-password-modal-submit").click(function (e) {
e.preventDefault();
$("#edit-password-modal-form").submit();
});
})
});
</script>

View File

@ -1,44 +1,72 @@
{% load static %}
<!-- Edit Pathway -->
<div id="edit_pathway_modal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Pathway</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Edit Pathway.</p>
<form id="edit-pathway-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
{% csrf_token %}
<p>
<label for="pathway-name">Name</label>
<input id="pathway-name" class="form-control" name="pathway-name" value="{{ pathway.name|safe }}">
</p>
<p>
<label for="pathway-description">Description</label>
<textarea id="pathway-description" type="text" class="form-control" name="pathway-description"
rows="10">{{ pathway.description|safe }}</textarea>
</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-pathway-modal-submit">Update</button>
</div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Pathway</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Edit Pathway.</p>
<form
id="edit-pathway-modal-form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<p>
<label for="pathway-name">Name</label>
<input
id="pathway-name"
class="form-control"
name="pathway-name"
value="{{ pathway.name|safe }}"
/>
</p>
<p>
<label for="pathway-description">Description</label>
<textarea
id="pathway-description"
type="text"
class="form-control"
name="pathway-description"
rows="10"
>
{{ pathway.description|safe }}</textarea
>
</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-pathway-modal-submit"
>
Update
</button>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#edit-pathway-modal-submit').click(function(e){
e.preventDefault();
$('#edit-pathway-modal-form').submit();
$(function () {
$("#edit-pathway-modal-submit").click(function (e) {
e.preventDefault();
$("#edit-pathway-modal-form").submit();
});
})
});
</script>

View File

@ -1,106 +1,163 @@
{% 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">&times;</span>
</button>
<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">&times;</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 in collapse">
<div class="panel-body list-group-item">
<table class="table-bordered table-hover table">
<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-bordered table-hover table"
>
<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|safe }}
</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 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|safe }}</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>
</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();
});
})
$(function () {
$("#edit-prediction-setting-modal-submit").click(function (e) {
e.preventDefault();
$("#edit-prediction-setting-modal-form").submit();
});
});
</script>

View File

@ -1,45 +1,69 @@
{% 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">&times;</span>
</button>
<h3 class="modal-title">Update Reaction</h3>
</div>
<div class="modal-body">
<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|safe }}">
</p>
<p>
<label for="reaction-description">Description</label>
<input id="reaction-description" type="text" class="form-control"
value="{{ reaction.description|safe }}" 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 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">&times;</span>
</button>
<h3 class="modal-title">Update Reaction</h3>
</div>
<div class="modal-body">
<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|safe }}"
/>
</p>
<p>
<label for="reaction-description">Description</label>
<input
id="reaction-description"
type="text"
class="form-control"
value="{{ reaction.description|safe }}"
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();
$(function () {
$("#edit-reaction-modal-submit").click(function (e) {
e.preventDefault();
$("#edit-reaction-modal-form").submit();
});
});
});
</script>

View File

@ -1,45 +1,69 @@
{% load static %}
<!-- Edit Rule -->
<div id="edit_rule_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">&times;</span>
</button>
<h3 class="modal-title">Update Rule</h3>
</div>
<div class="modal-body">
<form id="edit-rule-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
{% csrf_token %}
<p>
<label for="rule-name">Name</label>
<input id="rule-name" class="form-control" name="rule-name" value="{{ rule.name|safe }}">
</p>
<p>
<label for="rule-description">Description</label>
<input id="rule-description" type="text" class="form-control"
value="{{ rule.description|safe }}" name="rule-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-rule-modal-submit">Update</button>
</div>
</div>
<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">&times;</span>
</button>
<h3 class="modal-title">Update Rule</h3>
</div>
<div class="modal-body">
<form
id="edit-rule-modal-form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<p>
<label for="rule-name">Name</label>
<input
id="rule-name"
class="form-control"
name="rule-name"
value="{{ rule.name|safe }}"
/>
</p>
<p>
<label for="rule-description">Description</label>
<input
id="rule-description"
type="text"
class="form-control"
value="{{ rule.description|safe }}"
name="rule-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-rule-modal-submit"
>
Update
</button>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#edit-rule-modal-submit').click(function(e){
e.preventDefault();
$('#edit-rule-modal-form').submit();
$(function () {
$("#edit-rule-modal-submit").click(function (e) {
e.preventDefault();
$("#edit-rule-modal-form").submit();
});
});
});
</script>

View File

@ -1,62 +1,110 @@
{% 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">&times;</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|safe }}</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|safe }}</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|safe }}</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 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">&times;</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|safe }}
</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|safe }}
</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|safe }}
</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();
$(function () {
$("#edit-user-modal-submit").click(function (e) {
e.preventDefault();
$("#edit-user-modal-form").submit();
});
})
});
</script>

View File

@ -1,73 +1,93 @@
<div
class="modal fade"
tabindex="-1"
id="evaluate_model_modal"
role="dialog"
aria-labelledby="evaluate_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">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Evaluate Model</h4>
</div>
<div class="modal-body">
<form
id="evaluate_model_form"
accept-charset="UTF-8"
action="{{ current_object.url }}"
data-remote="true"
method="post"
>
{% csrf_token %}
<div class="jumbotron">
For evaluation, you need to select the packages you want to use.
While the model is evaluating, you can use the model for
predictions.
</div>
<!-- Evaluation Packages -->
<label for="model-evaluation-packages">Evaluation Packages</label>
<select
id="model-evaluation-packages"
name="model-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|safe }}</option>
{% endif %}
{% endfor %}
<div class="modal fade" tabindex="-1" id="evaluate_model_modal" role="dialog" aria-labelledby="evaluate_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">&times;</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Evaluate Model</h4>
</div>
<div class="modal-body">
<form id="evaluate_model_form" accept-charset="UTF-8" action="{{ current_object.url }}"
data-remote="true" method="post">
{% csrf_token %}
<div class="jumbotron">
For evaluation, you need to select the packages you want to use.
While the model is evaluating, you can use the model for predictions.
</div>
<!-- Evaluation Packages -->
<label for="model-evaluation-packages">Evaluation Packages</label>
<select id="model-evaluation-packages" name="model-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|safe }}</option>
{% endif %}
{% endfor %}
<option disabled>Unreviewed Packages</option>
{% for obj in meta.readable_packages %}
{% if not obj.reviewed %}
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
{% endif %}
{% endfor %}
</select>
<option disabled>Unreviewed Packages</option>
{% for obj in meta.readable_packages %}
{% if not obj.reviewed %}
<option value="{{ obj.url }}">{{ obj.name|safe }}</option>
{% endif %}
{% endfor %}
</select>
<!-- Eval Type -->
<label for="model-evaluation-type">Evaluation Type</label>
<select
id="model-evaluation-type"
name="model-evaluation-type"
class="form-control"
>
<option disabled selected>Select evaluation type</option>
<option value="sg">Single Generation</option>
<option value="mg">Multiple Generations</option>
</select>
<!-- Eval Type -->
<label for="model-evaluation-type">Evaluation Type</label>
<select id="model-evaluation-type" name="model-evaluation-type" class="form-control">
<option disabled selected>Select evaluation type</option>
<option value="sg">Single Generation</option>
<option value="mg">Multiple Generations</option>
</select>
<input type="hidden" name="hidden" value="evaluate">
</form>
</div>
<div class="modal-footer">
<a id="evaluate_model_form_submit" class="btn btn-primary" href="#">Evaluate</a>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
<input type="hidden" name="hidden" value="evaluate" />
</form>
</div>
<div class="modal-footer">
<a id="evaluate_model_form_submit" class="btn btn-primary" href="#"
>Evaluate</a
>
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
$("#model-evaluation-packages").selectpicker();
$(function () {
$("#model-evaluation-packages").selectpicker();
$('#evaluate_model_form_submit').on('click', function (e) {
e.preventDefault();
$('#evaluate_model_form').submit();
});
$("#evaluate_model_form_submit").on("click", function (e) {
e.preventDefault();
$("#evaluate_model_form").submit();
});
});
</script>

View File

@ -1,36 +1,53 @@
{% load static %}
<!-- Export Package -->
<div id="export_package_modal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Export Package as JSON</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
By clicking on Export the Package will be serialized into a JSON and directly downloaded.
<form id="export-package-modal-form" accept-charset="UTF-8" action="{{ package.url }}"
data-remote="true" method="GET">
<input type="hidden" name="export" value="true"/>
</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="export-package-modal-form-submit">Export</button>
</div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Export Package as JSON</h3>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
By clicking on Export the Package will be serialized into a JSON and
directly downloaded.
<form
id="export-package-modal-form"
accept-charset="UTF-8"
action="{{ package.url }}"
data-remote="true"
method="GET"
>
<input type="hidden" name="export" value="true" />
</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="export-package-modal-form-submit"
>
Export
</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#export-package-modal-form-submit').click(function (e) {
e.preventDefault();
$('#export-package-modal-form').submit();
$('#export_package_modal').modal('hide');
});
})
$(function () {
$("#export-package-modal-form-submit").click(function (e) {
e.preventDefault();
$("#export-package-modal-form").submit();
$("#export_package_modal").modal("hide");
});
});
</script>

View File

@ -1,75 +1,109 @@
{% load static %}
<!-- Copy Object -->
<div id="generic_copy_object_modal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Copy {{ object_type|capfirst }}</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form id="generic-copy-object-modal-form" accept-charset="UTF-8" data-remote="true" method="post">
{% csrf_token %}
<label for="target-package">Select the Target Package you want to copy this {{ object_type }}
into</label>
<select id="target-package" name="target-package" data-actions-box='true' class="form-control"
data-width='100%'>
<option disabled selected>Select Target Package</option>
{% for p in meta.writeable_packages %}
<option value="{{ p.url }}">{{ p.name|safe }}</option>`
{% endfor %}
</select>
<input type="hidden" name="hidden" value="copy">
</form>
<div id="copy-object-error-message" class="alert alert-danger" role="alert" style="display: none">
</div>
</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="generic-copy-object-modal-form-submit">
Copy
</button>
</div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Copy {{ object_type|capfirst }}</h3>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form
id="generic-copy-object-modal-form"
accept-charset="UTF-8"
data-remote="true"
method="post"
>
{% csrf_token %}
<label for="target-package"
>Select the Target Package you want to copy this {{ object_type }}
into</label
>
<select
id="target-package"
name="target-package"
data-actions-box="true"
class="form-control"
data-width="100%"
>
<option disabled selected>Select Target Package</option>
{% for p in meta.writeable_packages %}
<option value="{{ p.url }}">{{ p.name|safe }}</option>
`
{% endfor %}
</select>
<input type="hidden" name="hidden" value="copy" />
</form>
<div
id="copy-object-error-message"
class="alert alert-danger"
role="alert"
style="display: none"
></div>
</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="generic-copy-object-modal-form-submit"
>
Copy
</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
$(function () {
$("#generic-copy-object-modal-form-submit").click(function (e) {
e.preventDefault();
$("#copy-object-error-message").hide();
$('#generic-copy-object-modal-form-submit').click(function (e) {
e.preventDefault();
$('#copy-object-error-message').hide()
const packageUrl = $("#target-package").find(":selected").val();
const packageUrl = $('#target-package').find(":selected").val();
if (
packageUrl === "Select Target Package" ||
packageUrl === "" ||
packageUrl === null ||
packageUrl === undefined
) {
return;
}
const formData = {
hidden: "copy",
object_to_copy: "{{ current_object.url }}",
};
if (packageUrl === 'Select Target Package' || packageUrl === '' || packageUrl === null || packageUrl === undefined) {
return;
}
const formData = {
hidden: 'copy',
object_to_copy: '{{ current_object.url }}',
}
$.ajax({
type: 'post',
data: formData,
url: packageUrl,
success: function (data, textStatus) {
window.location.href = data.success;
},
error: function (jqXHR, textStatus, errorThrown) {
if (jqXHR.responseJSON.error.indexOf('to the same package') > -1) {
$('#copy-object-error-message').append('<p>The target Package is the same as the source Package. Please select another target!</p>');
} else {
$('#copy-object-error-message').append('<p>' + jqXHR.responseJSON.error + '</p>');
}
$('#copy-object-error-message').show();
}
});
});
})
$.ajax({
type: "post",
data: formData,
url: packageUrl,
success: function (data, textStatus) {
window.location.href = data.success;
},
error: function (jqXHR, textStatus, errorThrown) {
if (jqXHR.responseJSON.error.indexOf("to the same package") > -1) {
$("#copy-object-error-message").append(
"<p>The target Package is the same as the source Package. Please select another target!</p>",
);
} else {
$("#copy-object-error-message").append(
"<p>" + jqXHR.responseJSON.error + "</p>",
);
}
$("#copy-object-error-message").show();
},
});
});
});
</script>

View File

@ -1,42 +1,58 @@
{% load static %}
<!-- Delete Object -->
<div id="generic_delete_modal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Delete {{ object_type|capfirst }}</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
{% if object_type == 'user' %}
Clicking "Delete" will <strong>permanently</strong> delete the User and associated data.
This action can't be undone!
{% else %}
Deletes the {{ object_type|capfirst }}. Related objects that depend on this {{ object_type|capfirst }}
will be deleted as well.
{% endif %}
<form id="generic-delete-modal-form" accept-charset="UTF-8" action="{{ current_object.url }}"
data-remote="true" method="post">
{% csrf_token %}
<input type="hidden" id="hidden" name="hidden" value="delete"/>
</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="generic-delete-modal-form-submit">Delete</button>
</div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Delete {{ object_type|capfirst }}</h3>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
{% if object_type == 'user' %}
Clicking "Delete" will <strong>permanently</strong> delete the User
and associated data. This action can't be undone!
{% else %}
Deletes the {{ object_type|capfirst }}. Related objects that depend on
this {{ object_type|capfirst }} will be deleted as well.
{% endif %}
<form
id="generic-delete-modal-form"
accept-charset="UTF-8"
action="{{ current_object.url }}"
data-remote="true"
method="post"
>
{% csrf_token %}
<input type="hidden" id="hidden" name="hidden" value="delete" />
</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="generic-delete-modal-form-submit"
>
Delete
</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#generic-delete-modal-form-submit').click(function (e) {
e.preventDefault();
$('#generic-delete-modal-form').submit();
});
})
$(function () {
$("#generic-delete-modal-form-submit").click(function (e) {
e.preventDefault();
$("#generic-delete-modal-form").submit();
});
});
</script>

View File

@ -1,170 +1,213 @@
{% load static %}
<style>
.alias-container {
display: flex;
flex-wrap: wrap;
align-items: center;
border: 1px solid #ccc;
border-radius: 4px;
padding: 4px 6px;
cursor: text;
min-height: 38px;
background-color: #fff;
}
.alias-container {
display: flex;
flex-wrap: wrap;
align-items: center;
border: 1px solid #ccc;
border-radius: 4px;
padding: 4px 6px;
cursor: text;
min-height: 38px;
background-color: #fff;
}
.alias {
display: inline-flex;
align-items: center;
background-color: #5bc0de;
color: white;
padding: 4px 8px;
margin: 3px 3px;
border-radius: 4px;
font-size: 13px;
line-height: 1.4;
}
.alias {
display: inline-flex;
align-items: center;
background-color: #5bc0de;
color: white;
padding: 4px 8px;
margin: 3px 3px;
border-radius: 4px;
font-size: 13px;
line-height: 1.4;
}
.alias .remove {
margin-left: 6px;
cursor: pointer;
font-weight: bold;
line-height: 1;
}
.alias .remove {
margin-left: 6px;
cursor: pointer;
font-weight: bold;
line-height: 1;
}
.alias-input {
flex: 1;
min-width: 120px;
border: none;
outline: none;
margin: 3px 3px;
font-size: 14px;
}
.alias-input {
flex: 1;
min-width: 120px;
border: none;
outline: none;
margin: 3px 3px;
font-size: 14px;
}
.form-control.alias-container {
height: auto;
box-shadow: none;
}
.form-control.alias-container {
height: auto;
box-shadow: none;
}
</style>
<div class="modal fade bs-modal-lg" id="set_aliases_modal" tabindex="-1" aria-labelledby="set_aliases_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">Set Aliases for {{ current_object.name|safe }}</h4>
</div>
<div class="modal-body">
<form id="set_aliases_modal_form" accept-charset="UTF-8" action="{{ current_object.url }}"
data-remote="true" method="post">
{% csrf_token %}
<label for="alias-input">Aliases:</label>
<div class="form-control alias-container" id="alias-box">
{% for alias in current_object.aliases %}
<span class="alias">{{ alias|escape }}<span class="remove">&times;</span></span>
{% endfor %}
<input type="text" id="alias-input" class="alias-input" placeholder="Add Alias...">
</div>
</form>
<div id="add-alias-error-message" class="alert alert-danger" role="alert" style="display: none">
</div>
</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="set_aliases_modal_form_submit">Submit</button>
</div>
</div>
<div
class="modal fade bs-modal-lg"
id="set_aliases_modal"
tabindex="-1"
aria-labelledby="set_aliases_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">
Set Aliases for {{ current_object.name|safe }}
</h4>
</div>
<div class="modal-body">
<form
id="set_aliases_modal_form"
accept-charset="UTF-8"
action="{{ current_object.url }}"
data-remote="true"
method="post"
>
{% csrf_token %}
<label for="alias-input">Aliases:</label>
<div class="form-control alias-container" id="alias-box">
{% for alias in current_object.aliases %}
<span class="alias"
>{{ alias|escape }}<span class="remove">&times;</span></span
>
{% endfor %}
<input
type="text"
id="alias-input"
class="alias-input"
placeholder="Add Alias..."
/>
</div>
</form>
<div
id="add-alias-error-message"
class="alert alert-danger"
role="alert"
style="display: none"
></div>
</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="set_aliases_modal_form_submit"
>
Submit
</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
$(function () {
function addAlias(aliasText) {
aliasText = aliasText.trim();
if (aliasText === "") return;
function addAlias(aliasText) {
aliasText = aliasText.trim();
if (aliasText === '') return;
// Avoid duplicate aliass
var exists = false;
$('#alias-box .alias').each(function () {
if ($(this).text().replace('×', '').trim().toLowerCase() === aliasText.toLowerCase()) {
exists = true;
return false;
}
});
if (!exists) {
var aliasHtml = '<span class="alias">' + $('<div>').text(aliasText).html() +
'<span class="remove">&times;</span></span>';
$(aliasHtml).insertBefore('#alias-input');
}
$('#alias-input').val('');
// Avoid duplicate aliass
var exists = false;
$("#alias-box .alias").each(function () {
if (
$(this).text().replace("×", "").trim().toLowerCase() ===
aliasText.toLowerCase()
) {
exists = true;
return false;
}
});
// Add alias when Enter is pressed
$('#alias-input').on('keypress', function (e) {
if (e.which === 13) {
e.preventDefault();
addAlias($(this).val());
}
});
if (!exists) {
var aliasHtml =
'<span class="alias">' +
$("<div>").text(aliasText).html() +
'<span class="remove">&times;</span></span>';
$(aliasHtml).insertBefore("#alias-input");
}
// Add alias when input loses focus
$('#alias-input').on('blur', function () {
var val = $(this).val();
if (val.trim() !== '') {
addAlias(val);
}
});
// Remove alias when clicking ×
$('#alias-box').on('click', '.remove', function () {
$(this).closest('.alias').remove();
});
// Focus input when clicking the container
$('#alias-box').on('click', function () {
$('#alias-input').focus();
});
$('#set_aliases_modal_form_submit').on('click', function (e) {
e.preventDefault();
let aliases = [];
$('#alias-box .alias').each(function () {
aliases.push($(this).text().replace('×', '').trim())
});
if (aliases.length === 0) {
// Set empty string for deletion of all aliases
// If empty list is sent, its gets removed entirely from post data
aliases = ['']
}
formData = {
'aliases': aliases
}
$.ajax({
type: 'post',
data: formData,
url: '{{ current_object.url }}',
traditional: true,
success: function (data, textStatus) {
window.location.href = data.success;
},
error: function (jqXHR, textStatus, errorThrown) {
$('#add-alias-error-message').append('<p>Setting aliases failed!</p>');
$('#add-alias-error-message').show(); }
});
});
$("#alias-input").val("");
}
// Add alias when Enter is pressed
$("#alias-input").on("keypress", function (e) {
if (e.which === 13) {
e.preventDefault();
addAlias($(this).val());
}
});
// Add alias when input loses focus
$("#alias-input").on("blur", function () {
var val = $(this).val();
if (val.trim() !== "") {
addAlias(val);
}
});
// Remove alias when clicking ×
$("#alias-box").on("click", ".remove", function () {
$(this).closest(".alias").remove();
});
// Focus input when clicking the container
$("#alias-box").on("click", function () {
$("#alias-input").focus();
});
$("#set_aliases_modal_form_submit").on("click", function (e) {
e.preventDefault();
let aliases = [];
$("#alias-box .alias").each(function () {
aliases.push($(this).text().replace("×", "").trim());
});
if (aliases.length === 0) {
// Set empty string for deletion of all aliases
// If empty list is sent, its gets removed entirely from post data
aliases = [""];
}
formData = {
aliases: aliases,
};
$.ajax({
type: "post",
data: formData,
url: "{{ current_object.url }}",
traditional: true,
success: function (data, textStatus) {
window.location.href = data.success;
},
error: function (jqXHR, textStatus, errorThrown) {
$("#add-alias-error-message").append(
"<p>Setting aliases failed!</p>",
);
$("#add-alias-error-message").show();
},
});
});
});
</script>

View File

@ -1,61 +1,97 @@
{% load static %}
<!-- Delete Object -->
<div id="generic_set_external_reference_modal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Add External References</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form id="generic-set-external-reference-modal-form" accept-charset="UTF-8"
action="{{ current_object.url }}"
data-remote="true" method="post">
{% csrf_token %}
<label for="database-select">Select the Database you want to attach an External Reference
for</label>
<select id="database-select" name="selected-database" data-actions-box='true' class="form-control"
data-width='100%'>
<option disabled selected>Select Database</option>
{% for entity, databases in meta.external_databases.items %}
{% if entity == object_type %}
{% for db in databases %}
<option id="db-select-{{ db.database.pk }}" data-input-placeholder="{{ db.placeholder }}"
value="{{ db.database.id }}">{{ db.database.name|safe }}</option>`
{% endfor %}
{% endif %}
{% endfor %}
</select>
<p></p>
<div id="input-div" style="display: none">
<label for="identifier" >The reference</label>
<input type="text" id="identifier" name="identifier" class="form-control" placeholder="">
</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="generic-set-external-reference-modal-form-submit">Submit</button>
</div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Add External References</h3>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form
id="generic-set-external-reference-modal-form"
accept-charset="UTF-8"
action="{{ current_object.url }}"
data-remote="true"
method="post"
>
{% csrf_token %}
<label for="database-select"
>Select the Database you want to attach an External Reference
for</label
>
<select
id="database-select"
name="selected-database"
data-actions-box="true"
class="form-control"
data-width="100%"
>
<option disabled selected>Select Database</option>
{% for entity, databases in meta.external_databases.items %}
{% if entity == object_type %}
{% for db in databases %}
<option
id="db-select-{{ db.database.pk }}"
data-input-placeholder="{{ db.placeholder }}"
value="{{ db.database.id }}"
>
{{ db.database.name|safe }}
</option>
`
{% endfor %}
{% endif %}
{% endfor %}
</select>
<p></p>
<div id="input-div" style="display: none">
<label for="identifier">The reference</label>
<input
type="text"
id="identifier"
name="identifier"
class="form-control"
placeholder=""
/>
</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="generic-set-external-reference-modal-form-submit"
>
Submit
</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
$(function () {
$("#database-select").on("change", function () {
let selected = $(this).val();
$("#identifier").attr(
"placeholder",
$("#db-select-" + selected).data("input-placeholder"),
);
$("#input-div").show();
});
$("#database-select").on("change", function () {
let selected = $(this).val();
$("#identifier").attr("placeholder", $('#db-select-' + selected).data('input-placeholder'));
$("#input-div").show();
});
$('#generic-set-external-reference-modal-form-submit').click(function (e) {
e.preventDefault();
$('#generic-set-external-reference-modal-form').submit();
});
})
$("#generic-set-external-reference-modal-form-submit").click(function (e) {
e.preventDefault();
$("#generic-set-external-reference-modal-form").submit();
});
});
</script>

View File

@ -1,37 +1,71 @@
{% load static %}
<div class="modal fade bs-modal-lg" id="set_scenario_modal" tabindex="-1" aria-labelledby="set_scenario_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">Set Scenarios for {{ current_object.name|safe }}</h4>
</div>
<div class="modal-body">
<div id="loading_scenario_div" class="text-center"></div>
<form id="set_scenario_modal_form" accept-charset="UTF-8" action="{{ current_object.url }}"
data-remote="true" method="post">
{% csrf_token %}
<label for="scenario-select">Scenarios</label>
<select id="scenario-select" name="selected-scenarios" data-actions-box='true' class="form-control"
multiple data-width='100%'>
<option disabled>Select Scenarios</option>
<option value="" hidden></option>
</select>
</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="set_scenario_modal_form_submit">Submit</button>
</div>
</div>
<div
class="modal fade bs-modal-lg"
id="set_scenario_modal"
tabindex="-1"
aria-labelledby="set_scenario_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">
Set Scenarios for {{ current_object.name|safe }}
</h4>
</div>
<div class="modal-body">
<div id="loading_scenario_div" class="text-center"></div>
<form
id="set_scenario_modal_form"
accept-charset="UTF-8"
action="{{ current_object.url }}"
data-remote="true"
method="post"
>
{% csrf_token %}
<label for="scenario-select">Scenarios</label>
<select
id="scenario-select"
name="selected-scenarios"
data-actions-box="true"
class="form-control"
multiple
data-width="100%"
>
<option disabled>Select Scenarios</option>
<option value="" hidden></option>
</select>
</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="set_scenario_modal_form_submit"
>
Submit
</button>
</div>
</div>
</div>
</div>
{# prettier-ignore-start #}
<script>
$(function () {
@ -75,3 +109,4 @@
});
</script>
{# prettier-ignore-end #}

View File

@ -1,54 +1,75 @@
{% load static %}
<!-- Identify Missing Rules -->
<div id="identify_missing_rules_modal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Identify Missing Rules</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
By clicking on Download we'll search the Pathway for Reactions that are not backed by
a Rule or which can be assembled by chaining two rules.
<form id="identify-missing-rules-modal-form" accept-charset="UTF-8" action="{{ pathway.url }}"
data-remote="true" method="GET">
<label for="rule-package">Select the Rule Package</label>
<select id="rule-package" name="rule-package" data-actions-box='true' class="form-control"
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 %}
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Identify Missing Rules</h3>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
By clicking on Download we'll search the Pathway for Reactions that are
not backed by a Rule or which can be assembled by chaining two rules.
<form
id="identify-missing-rules-modal-form"
accept-charset="UTF-8"
action="{{ pathway.url }}"
data-remote="true"
method="GET"
>
<label for="rule-package">Select the Rule Package</label>
<select
id="rule-package"
name="rule-package"
data-actions-box="true"
class="form-control"
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>
<input type="hidden" name="identify-missing-rules" value="true"/>
</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="identify-missing-rules-modal-submit">Download</button>
</div>
</div>
<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>
<input type="hidden" name="identify-missing-rules" value="true" />
</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="identify-missing-rules-modal-submit"
>
Download
</button>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#identify-missing-rules-modal-submit').click(function (e) {
e.preventDefault();
$('#identify-missing-rules-modal-form').submit();
$('#identify_missing_rules_modal').modal('hide');
});
})
$(function () {
$("#identify-missing-rules-modal-submit").click(function (e) {
e.preventDefault();
$("#identify-missing-rules-modal-form").submit();
$("#identify_missing_rules_modal").modal("hide");
});
});
</script>

View File

@ -1,92 +1,118 @@
<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">&times;</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|safe }}" 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
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">&times;</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|safe }}"
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()
$(function () {
$("#new-token").hide();
$('#manage_api_token_form_submit').on('click', function (e) {
e.preventDefault();
$("#manage_api_token_form_submit").on("click", function (e) {
e.preventDefault();
const formData = $('#request_api_token_form').serialize();
$.post('', formData, function(response) {
$('#new-token-pre').text(response.raw_token);
$('#new-token').show();
});
const formData = $("#request_api_token_form").serialize();
$.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();
});
$("[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>

View File

@ -1,35 +1,52 @@
{% load static %}
<!-- Publish a Package -->
<div id="publish_package_modal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Publish Package</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Clicking on Publish will make this Package publicly available!</p>
<form id="publish-package-modal-form" accept-charset="UTF-8" action="{{ current_package.url }}" data-remote="true" method="post">
{% csrf_token %}
<input type="hidden" name="hidden" value="publish-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="publish-package-modal-form-submit">Publish</button>
</div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Publish Package</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Clicking on Publish will make this Package publicly available!</p>
<form
id="publish-package-modal-form"
accept-charset="UTF-8"
action="{{ current_package.url }}"
data-remote="true"
method="post"
>
{% csrf_token %}
<input type="hidden" name="hidden" value="publish-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="publish-package-modal-form-submit"
>
Publish
</button>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#publish-package-modal-form-submit').click(function(e){
e.preventDefault();
$('#publish-package-modal-form').submit();
$(function () {
$("#publish-package-modal-form-submit").click(function (e) {
e.preventDefault();
$("#publish-package-modal-form").submit();
});
})
});
</script>

View File

@ -1,149 +1,198 @@
<div class="modal fade"
tabindex="-1"
id="set_license_modal"
role="dialog"
aria-labelledby="set_license_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">&times;</span>
<span class="sr-only">Close</span>
</button>
<h3 class="modal-title">Set License</h3>
</div>
<div
class="modal fade"
tabindex="-1"
id="set_license_modal"
role="dialog"
aria-labelledby="set_license_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">&times;</span>
<span class="sr-only">Close</span>
</button>
<h3 class="modal-title">Set License</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-9">
<p>
Set the license for all data in this package:
<br> <br>
(For more information please visit our <a target="#"
href="https://wiki.envipath.org/index.php/License">wiki</a>.)
</p>
</div>
<div class="col-md-3">
<div id="ccfig"></div>
</div>
</div>
<form id="set_license_form" accept-charset="UTF-8" action="" data-remote="true" method="post">
{% csrf_token %}
<div class="input-group">
<div class="radio">
<label><input type="radio" name="optlicense" onclick="cc()" id="ccradio">Creative commons license</label>
</div>
<div>
<div class="checkbox">
<label><input type="checkbox" value="" onclick="cc()" id="ccremix" disabled>Allow adaptations of your work to be shared</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" onclick="cc()" id="ccnocom" disabled>Prohibit commercial use</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" onclick="cc()" id="ccalike" disabled>Share only if others share alike</label>
</div>
</div>
<div class="radio">
<label><input type="radio" name="optlicense" onclick="cc()" id="noccradio">No creative commons license, contact package owner for license information</label>
</div>
</div>
<input type="hidden" id="license" name="license">
</form>
</div>
<div class="modal-footer">
<button id="set_license_form_submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-9">
<p>
Set the license for all data in this package:
<br />
<br />
(For more information please visit our
<a target="#" href="https://wiki.envipath.org/index.php/License"
>wiki</a
>.)
</p>
</div>
<div class="col-md-3">
<div id="ccfig"></div>
</div>
</div>
<form
id="set_license_form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
<div class="input-group">
<div class="radio">
<label
><input
type="radio"
name="optlicense"
onclick="cc()"
id="ccradio"
/>Creative commons license</label
>
</div>
<div>
<div class="checkbox">
<label
><input
type="checkbox"
value=""
onclick="cc()"
id="ccremix"
disabled
/>Allow adaptations of your work to be shared</label
>
</div>
<div class="checkbox">
<label
><input
type="checkbox"
value=""
onclick="cc()"
id="ccnocom"
disabled
/>Prohibit commercial use</label
>
</div>
<div class="checkbox">
<label
><input
type="checkbox"
value=""
onclick="cc()"
id="ccalike"
disabled
/>Share only if others share alike</label
>
</div>
</div>
<div class="radio">
<label
><input
type="radio"
name="optlicense"
onclick="cc()"
id="noccradio"
/>No creative commons license, contact package owner for license
information</label
>
</div>
</div>
<input type="hidden" id="license" name="license" />
</form>
</div>
<div class="modal-footer">
<button id="set_license_form_submit" class="btn btn-primary">
Submit
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
</div>
</div>
</div>
</div>
<script>
function ccstring(ccremix, ccnocom, ccalike){
function ccstring(ccremix, ccnocom, ccalike) {
var ccstring = "by";
if(ccnocom){
ccstring +="-nc";
if (ccnocom) {
ccstring += "-nc";
}
if(!ccremix){
ccstring +="-nd";
} else{
if(ccalike){
ccstring +="-sa";
}
if (!ccremix) {
ccstring += "-nd";
} else {
if (ccalike) {
ccstring += "-sa";
}
}
return ccstring;
}
}
function cc() {
var nocc = $('#noccradio').prop('checked')
var iscc = $('#ccradio').prop('checked');
function cc() {
var nocc = $("#noccradio").prop("checked");
var iscc = $("#ccradio").prop("checked");
if(nocc) {
$('#ccradio').prop('checked', false);
$('#ccremix').prop('checked', false);
$('#ccnocom').prop('checked', false);
$('#ccalike').prop('checked', false);
if (nocc) {
$("#ccradio").prop("checked", false);
$("#ccremix").prop("checked", false);
$("#ccnocom").prop("checked", false);
$("#ccalike").prop("checked", false);
$('#ccremix').prop('disabled', true);
$('#ccnocom').prop('disabled', true);
$('#ccalike').prop('disabled', true);
$("#ccremix").prop("disabled", true);
$("#ccnocom").prop("disabled", true);
$("#ccalike").prop("disabled", true);
} else if (iscc) {
$('#ccremix').prop('disabled', false);
$('#ccnocom').prop('disabled', false);
$("#ccremix").prop("disabled", false);
$("#ccnocom").prop("disabled", false);
if ($('#ccremix').prop('checked')) {
$('#ccalike').prop('disabled', false);
} else {
$('#ccalike').prop('disabled', true);
}
if ($("#ccremix").prop("checked")) {
$("#ccalike").prop("disabled", false);
} else {
$("#ccalike").prop("disabled", true);
}
}
var remix = $('#ccremix').prop('checked');
var nocom = $('#ccnocom').prop('checked');
var alike = $('#ccalike').prop('checked');
var remix = $("#ccremix").prop("checked");
var nocom = $("#ccnocom").prop("checked");
var alike = $("#ccalike").prop("checked");
if(nocc) {
$('#set_license_form_submit').prop('disabled', false);
$('#ccfig').empty();
$('#license').val('no-license')
} else if(iscc) {
$('#set_license_form_submit').prop('disabled', false);
$('#ccfig').empty();
var ccstr = ccstring(remix, nocom, alike)
if (nocc) {
$("#set_license_form_submit").prop("disabled", false);
$("#ccfig").empty();
$("#license").val("no-license");
} else if (iscc) {
$("#set_license_form_submit").prop("disabled", false);
$("#ccfig").empty();
var ccstr = ccstring(remix, nocom, alike);
var link = `https://creativecommons.org/licenses/${ccstr}/4.0/`;
var imageLink = `https://licensebuttons.net/l/${ccstr}/4.0/88x31.png`;
var link = `https://creativecommons.org/licenses/${ccstr}/4.0/`;
var imageLink = `https://licensebuttons.net/l/${ccstr}/4.0/88x31.png`;
var img_tpl = `<a href='${link}' target="_blank">
var img_tpl = `<a href='${link}' target="_blank">
<img src='${imageLink}'>
</a>`;
$('#ccfig').append(img_tpl);
$('#license').val(ccstr);
$("#ccfig").append(img_tpl);
$("#license").val(ccstr);
} else {
$('#ccfig').empty();
$('#set_license_form_submit').prop('disabled', true);
$('#license').val('no-license')
$("#ccfig").empty();
$("#set_license_form_submit").prop("disabled", true);
$("#license").val("no-license");
}
}
}
$(function() {
$(function () {
// Disable by default as nothing is selected
cc();
$('#set_license_form_submit').prop('disabled', true);
$("#set_license_form_submit").prop("disabled", true);
$('#set_license_form_submit').on('click', function (e) {
e.preventDefault();
$('#set_license_form').submit();
$("#set_license_form_submit").on("click", function (e) {
e.preventDefault();
$("#set_license_form").submit();
});
});
</script>
});
</script>

View File

@ -1,39 +1,62 @@
{% load static %}
<!-- Update Scenario Additional Information-->
<div id="update_scenario_additional_information_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">&times;</span>
</button>
<h3 class="modal-title">Update Additional Information</h3>
</div>
<div class="modal-body">
<form id="edit-scenario-additional-information-modal-form" accept-charset="UTF-8" action="" data-remote="true" method="post">
{% csrf_token %}
{% for widget in update_widgets %}
{{ widget|safe }}
{% endfor %}
<input type="hidden" name="hidden" value="set-additional-information">
</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-scenario-additional-information-modal-submit">Update</button>
</div>
</div>
<div
id="update_scenario_additional_information_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">&times;</span>
</button>
<h3 class="modal-title">Update Additional Information</h3>
</div>
<div class="modal-body">
<form
id="edit-scenario-additional-information-modal-form"
accept-charset="UTF-8"
action=""
data-remote="true"
method="post"
>
{% csrf_token %}
{% for widget in update_widgets %}
{{ widget|safe }}
{% endfor %}
<input
type="hidden"
name="hidden"
value="set-additional-information"
/>
</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-scenario-additional-information-modal-submit"
>
Update
</button>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#edit-scenario-additional-information-modal-submit').click(function(e){
e.preventDefault();
$('#edit-scenario-additional-information-modal-form').submit();
$(function () {
$("#edit-scenario-additional-information-modal-submit").click(function (e) {
e.preventDefault();
$("#edit-scenario-additional-information-modal-form").submit();
});
});
});
</script>

View File

@ -1,115 +1,178 @@
{% 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
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="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>
<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>
<label for="prediction-setting">Default Prediction Setting</label>
<select id="prediction-setting" name="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|safe }}{% if s.id == meta.user.default_setting.id %} <i>(User default)</i>{% endif %}
</option>
{% endfor %}
</select>
</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>
<label for="prediction-setting">Default Prediction Setting</label>
<select
id="prediction-setting"
name="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|safe }}{% if s.id == meta.user.default_setting.id %}
<i>(User default)</i>
{% endif %}
</option>
{% endfor %}
</select>
</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 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);
}
};
$(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();
checkKetcherReady();
});
});
$("#predictButton").on("click", function (e) {
e.preventDefault();
$(this).prop("disabled", true);
// loading button
// validation
// existing pws...
// submit form
$("#predict_modal_form").submit();
});
});
</script>

File diff suppressed because it is too large Load Diff