enviPy-bayer/templates/modals/collections/new_rule_modal.html

{% 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>
</div>
<script>
  $(function () {
    $("#rule-smirks").on("input", function (e) {
      $("#rule-smirks-viz").empty();

      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";

      img.onload = function () {
        $("#rule-smirks-viz").append(img);
      };

      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);
      };
    });

    $("#new_rule_modal_form_submit").on("click", function (e) {
      e.preventDefault();
      $(this).prop("disabled", true);
      // submit form
      $("#new_rule_modal_form").submit();
    });
  });
</script>