forked from enviPath/enviPy
127 lines
5.1 KiB
HTML
127 lines
5.1 KiB
HTML
{% 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>
|
|
|
|
|
|
|
|
|
|
|