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

{% load static %}

<dialog
  id="new_prediction_setting_modal"
  class="modal"
  x-data="{
    isSubmitting: false,
    tpMethod: '',

    reset() {
      this.isSubmitting = false;
      this.tpMethod = '';
    },

    async submit() {
      const form = document.getElementById('new-prediction-setting-modal-form');
      if (!form.checkValidity()) {
        form.reportValidity();
        return;
      }

      this.isSubmitting = true;
      const formData = new FormData(form);

      try {
        const response = await fetch('/setting', {
          method: 'POST',
          body: new URLSearchParams(formData)
        });
        if (response.ok) {
          location.reload();
        }
      } catch (error) {
        console.error('Error creating setting:', error);
      } finally {
        this.isSubmitting = false;
      }
    }
  }"
  @close="reset()"
>
  <div class="modal-box max-w-2xl">
    <!-- Header -->
    <h3 class="text-lg font-bold">Create a Prediction Setting</h3>

    <!-- Close button (X) -->
    <form method="dialog">
      <button
        class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
        :disabled="isSubmitting"
      >
        ✕
      </button>
    </form>

    <!-- Body -->
    <div class="py-4">
      <p class="mb-4">
        To create a Prediction Setting fill the form below and click "Create"
      </p>
      <form
        id="new-prediction-setting-modal-form"
        accept-charset="UTF-8"
        action=""
        method="post"
      >
        {% csrf_token %}

        <div class="form-control mb-3">
          <label class="label" for="prediction-setting-name">
            <span class="label-text">Name</span>
          </label>
          <input
            id="prediction-setting-name"
            name="prediction-setting-name"
            class="input input-bordered w-full"
            placeholder="Name"
            required
          />
        </div>

        <div class="form-control mb-3">
          <label class="label" for="prediction-setting-description">
            <span class="label-text">Description</span>
          </label>
          <input
            id="prediction-setting-description"
            name="prediction-setting-description"
            class="input input-bordered w-full"
            placeholder="Description"
          />
        </div>

        <div class="form-control mb-3">
          <label class="label" for="prediction-setting-max-nodes">
            <span class="label-text">Max #Nodes</span>
          </label>
          <input
            id="prediction-setting-max-nodes"
            type="number"
            class="input input-bordered w-full"
            name="prediction-setting-max-nodes"
            value="30"
            min="1"
            max="50"
            step="1"
          />
        </div>

        <div class="form-control mb-3">
          <label class="label" for="prediction-setting-max-depth">
            <span class="label-text">Max Depth</span>
          </label>
          <input
            id="prediction-setting-max-depth"
            type="number"
            class="input input-bordered w-full"
            name="prediction-setting-max-depth"
            value="5"
            min="1"
            max="8"
            step="1"
          />
        </div>

        <div class="form-control mb-3">
          <label class="label" for="tp-generation-method">
            <span class="label-text">TP Generation Method</span>
          </label>
          <select
            id="tp-generation-method"
            name="tp-generation-method"
            class="select select-bordered w-full"
            x-model="tpMethod"
            required
          >
            <option value="" disabled selected>
              Select how TPs are generated
            </option>
            <option value="rule-based-prediction-setting">Rule Based</option>
            <option value="model-based-prediction-setting">Model Based</option>
          </select>
        </div>

        <!-- Rule Based Settings -->
        <div x-show="tpMethod === 'rule-based-prediction-setting'" x-cloak>
          <div class="form-control mb-3">
            <label class="label">
              <span class="label-text">Rule Packages</span>
            </label>
            <select
              id="rule-based-prediction-setting-packages"
              name="rule-based-prediction-setting-packages"
              class="select select-bordered w-full h-32"
              multiple
            >
              <optgroup label="Reviewed Packages">
                {% for obj in meta.readable_packages %}
                  {% if obj.reviewed %}
                    <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
                  {% endif %}
                {% endfor %}
              </optgroup>
              <optgroup label="Unreviewed Packages">
                {% for obj in meta.readable_packages %}
                  {% if not obj.reviewed %}
                    <option value="{{ obj.url }}">{{ obj.name|safe }}</option>
                  {% endif %}
                {% endfor %}
              </optgroup>
            </select>
            <label class="label">
              <span class="label-text-alt"
                >Hold Ctrl/Cmd to select multiple</span
              >
            </label>
          </div>
        </div>

        <!-- Model Based Settings -->
        <div x-show="tpMethod === 'model-based-prediction-setting'" x-cloak>
          <div class="form-control mb-3">
            <label class="label" for="model-based-prediction-setting-model">
              <span class="label-text">Select Model</span>
            </label>
            <select
              id="model-based-prediction-setting-model"
              name="model-based-prediction-setting-model"
              class="select select-bordered w-full"
            >
              <option value="" disabled selected>Select the model</option>
              {% for m in models %}
                <option value="{{ m.url }}">{{ m.name|safe }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="form-control mb-3">
            <label class="label" for="model-based-prediction-setting-threshold">
              <span class="label-text">Threshold</span>
            </label>
            <input
              id="model-based-prediction-setting-threshold"
              name="model-based-prediction-setting-threshold"
              class="input input-bordered w-full"
              placeholder="0.25"
              type="number"
              min="0"
              max="1"
              step="0.05"
            />
          </div>
        </div>

        <div class="form-control">
          <label class="label cursor-pointer justify-start gap-3">
            <input
              type="checkbox"
              class="checkbox"
              value="on"
              id="prediction-setting-new-default"
              name="prediction-setting-new-default"
            />
            <span class="label-text">Set this setting as new default</span>
          </label>
        </div>
      </form>
    </div>

    <!-- Footer -->
    <div class="modal-action">
      <button
        type="button"
        class="btn"
        onclick="this.closest('dialog').close()"
        :disabled="isSubmitting"
      >
        Close
      </button>
      <button
        type="button"
        class="btn btn-primary"
        @click="submit()"
        :disabled="isSubmitting"
      >
        <span x-show="!isSubmitting">Create</span>
        <span
          x-show="isSubmitting"
          class="loading loading-spinner loading-sm"
        ></span>
        <span x-show="isSubmitting">Creating...</span>
      </button>
    </div>
  </div>

  <!-- Backdrop -->
  <form method="dialog" class="modal-backdrop">
    <button :disabled="isSubmitting">close</button>
  </form>
</dialog>