grain/app/views/importEvents.html

83 lines
2.4 KiB
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>
<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 class="flex items-center justify-center" style="height: 32px">
<!-- Adjust height as needed -->
<button
id="import-button"
class="p-2 m-2 font-bold bg-green-500 rounded-md font-xl"
type="submit"
>
Import Events
</button>
<div id="spinner" class="spinner"></div>
</div>
<div id="result" class="p-2 m-2 text-xl font-bold"></div>
<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>
<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("import-button").style.display = "none";
document.getElementById("spinner").style.display = "block";
});
document.addEventListener("htmx:afterRequest", function () {
document.getElementById("spinner").style.display = "none";
// No need to bring back the import button
});
document.addEventListener("htmx:requestError", function () {
document.getElementById("spinner").style.display = "none";
document.getElementById("import-button").style.display = "block"; // Bring back the button only on error
});
</script>
</main>
{{end}}