enviPy-bayer/templates/modals/predict_modal.html

{% load static %}
<div
  class="modal fade bs-modal-lg"
  id="predict_modal"
  tabindex="-1"
  aria-labelledby="predict_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">Predict a Pathway</h4>
      </div>
      <div class="modal-body">
        <form
          id="predict_modal_form"
          accept-charset="UTF-8"
          action="{{ meta.current_package.url }}/pathway"
          data-remote="true"
          method="post"
        >
          {% csrf_token %}
          <div class="row">
            <div class="col-md-6">
              <label for="name">Name</label>
              <input
                id="name"
                class="form-control"
                name="name"
                placeholder="Name"
              />
              <label for="description">Description</label>
              <input
                id="description"
                class="form-control"
                name="description"
                placeholder="Description"
              />
            </div>
            <div class="col-md-6">
              <label for="predict">Predict pathway or build yourself?</label>
              <div class="radio" id="predict">
                <p>
                  <label>
                    <input
                      type="radio"
                      name="predict"
                      id="radioPredict"
                      value="predict"
                      checked
                    />Predict pathway
                  </label>
                </p>
                <p>
                  <label>
                    <input
                      type="radio"
                      name="predict"
                      id="radioIncremental"
                      value="incremental"
                    />Incremental prediction
                  </label>
                </p>
                <p>
                  <label>
                    <input
                      type="radio"
                      name="predict"
                      id="radioBuild"
                      value="build"
                    />Build pathway
                  </label>
                </p>
              </div>
            </div>
          </div>
          <label for="predict-modal-smiles">SMILES</label>
          <input
            type="text"
            class="form-control"
            name="smiles"
            placeholder="SMILES"
            id="predict-modal-smiles"
          />
          <p id="ketcher_container"></p>
          <div>
            <iframe
              id="predict-modal-ketcher"
              src="{% static '/js/ketcher2/ketcher.html' %}"
              width="100%"
              height="510"
            ></iframe>
          </div>

          <label for="prediction-setting">Default Prediction Setting</label>
          <select
            id="prediction-setting"
            name="prediction-setting"
            class="form-control"
            data-width="100%"
          >
            <option disabled>Select a Setting</option>
            {% for s in meta.available_settings %}
              <option
                value="{{ s.url }}"
                {% if s.id == meta.user.default_setting.id %}selected{% endif %}
              >
                {{ s.name|safe }}{% if s.id == meta.user.default_setting.id %}
                  <i>(User default)</i>
                {% endif %}
              </option>
            {% endfor %}
          </select>
        </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="predictButton">
          Predict
        </button>
      </div>
    </div>
  </div>
</div>
<script>
  function predictModalketcherToPredictModalTextInput() {
    $("#predict-modal-smiles").val(this.ketcher.getSmiles());
  }

  $(function () {
    $("#predict-modal-ketcher").on("load", function () {
      const checkKetcherReady = () => {
        win = this.contentWindow;
        if (win.ketcher && "editor" in win.ketcher) {
          win.ketcher.editor.event.change.handlers.push({
            once: false,
            priority: 0,
            f: predictModalketcherToPredictModalTextInput,
            ketcher: win.ketcher,
          });
        } else {
          setTimeout(checkKetcherReady, 100);
        }
      };

      checkKetcherReady();
    });

    $("#predictButton").on("click", function (e) {
      e.preventDefault();
      $(this).prop("disabled", true);

      // loading button

      // validation

      // existing pws...

      // submit form
      $("#predict_modal_form").submit();
    });
  });
</script>