enviPy-bayer/templates/modals/objects/add_pathway_edge_modal.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">&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="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>
            <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>