grain/app/views/importEvents.html

{{define "view"}}
<main class="flex flex-col items-center justify-center p-8">
  <div class="mb-4">You are now viewing the {{.Title}}</div>
  <div
    class="container flex justify-center p-4 border-2 border-gray-600 border-solid rounded-md w-fit"
  >
    <form
      id="import-form"
      hx-post="/import-results"
      hx-target="#result"
      hx-indicator="#spinner"
    >
      <div>
        <label for="pubkey">Pubkey:</label>
        <input
          class="p-2 m-2 text-black rounded-md"
          type="text"
          id="pubkey"
          name="pubkey"
          required
          maxlength="64"
        />
      </div>
      <div>
        <label for="relayUrls">Relay URLs (comma separated):</label>
        <input
          class="p-2 m-2 text-black rounded-md"
          type="text"
          id="relayUrls"
          name="relayUrls"
          required
        />
      </div>
      <button
        class="p-2 m-2 font-bold bg-green-500 rounded-md font-xl"
        type="submit"
      >
        Import Events
      </button>
    </form>
  </div>
  <div id="spinner" class="spinner"></div>
  <div id="result" class="p-2 m-2 text-xl font-bold"></div>
  <button
    hx-get="/"
    hx-swap="outerHTML"
    hx-target="body"
    class="p-2 m-2 text-white bg-blue-400 rounded-md"
  >
    Return to Dashboard
  </button>
  <script>
    document
      .getElementById("import-form")
      .addEventListener("submit", function () {
        document.getElementById("spinner").style.display = "block";
      });

    document
      .getElementById("result")
      .addEventListener("htmx:afterRequest", function () {
        document.getElementById("spinner").style.display = "none";
      });
  </script>
</main>
{{end}}