grain/app/views/importEvents.html

{{define "view"}}
<main class="flex flex-col items-center justify-center p-8">
  <div class="mb-4">{{.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 class="content-right">
        <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>
      </div>
      <button
        class="p-2 m-2 font-bold bg-green-500 rounded-md font-xl"
        type="submit"
      >
        Import Events
      </button>
      <div class="font-bold text-md">
        ⚠️ This Feature is Experimental<br />
        If you are whitelisted, this SHOULD capture all of your events<br />
        Please Be Patient. Imports can take quite some time due to Rate Limits
      </div>
    </form>
  </div>
  <div
    id="spinner"
    class="m-4 text-lg font-bold text-center spinner"
    style="display: none"
  ></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.addEventListener("htmx:afterRequest", function () {
      document.getElementById("spinner").style.display = "none";
    });

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