forked from enviPath/enviPy
Basic System (#31)
Co-authored-by: Tim Lorsbach <tim@lorsba.ch> Reviewed-on: enviPath/enviPy#31
This commit is contained in:
126
templates/modals/objects/add_pathway_edge_modal.html
Normal file
126
templates/modals/objects/add_pathway_edge_modal.html
Normal file
@ -0,0 +1,126 @@
|
||||
{% 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">×</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="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 }}</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 }}</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();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user