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>