OceanSlim/grain
1
0
Fork 0
mirror of https://github.com/0ceanSlim/grain.git synced 2024-11-22 08:37:13 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

replace import button with spinner to prevent multiple imports with rapid clicking

Browse Source
This commit is contained in:
0ceanSlim 2024-08-08 08:25:08 -04:00
parent 1cfe7c8e94
commit ea0a29d4b9
1 changed files with 37 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
app/views/importEvents.html
View File

@ -10,35 +10,39 @@
hx-target="#result" hx-target="#result"
hx-indicator="#spinner" hx-indicator="#spinner"
> >
<div class="content-right"> <div>
<div> <label for="pubkey">Pubkey:</label>
<label for="pubkey">Pubkey:</label> <input
<input class="p-2 m-2 text-black rounded-md"
class="p-2 m-2 text-black rounded-md" type="text"
type="text" id="pubkey"
id="pubkey" name="pubkey"
name="pubkey" required
required maxlength="64"
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> </div>
<button <div>
class="p-2 m-2 font-bold bg-green-500 rounded-md font-xl" <label for="relayUrls">Relay URLs (comma separated):</label>
type="submit" <input
> class="p-2 m-2 text-black rounded-md"
Import Events type="text"
</button> 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"> <div class="font-bold text-md">
⚠️ This Feature is Experimental<br /> ⚠️ This Feature is Experimental<br />
If you are whitelisted, this SHOULD capture all of your events<br /> If you are whitelisted, this SHOULD capture all of your events<br />
@ -46,12 +50,7 @@
</div> </div>
</form> </form>
</div> </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 <button
hx-get="/" hx-get="/"
hx-swap="outerHTML" hx-swap="outerHTML"
@ -60,19 +59,23 @@
> >
Return to Dashboard Return to Dashboard
</button> </button>
<script> <script>
document document
.getElementById("import-form") .getElementById("import-form")
.addEventListener("submit", function () { .addEventListener("submit", function () {
document.getElementById("import-button").style.display = "none";
document.getElementById("spinner").style.display = "block"; document.getElementById("spinner").style.display = "block";
}); });
document.addEventListener("htmx:afterRequest", function () { document.addEventListener("htmx:afterRequest", function () {
document.getElementById("spinner").style.display = "none"; document.getElementById("spinner").style.display = "none";
// No need to bring back the import button
}); });
document.addEventListener("htmx:requestError", function () { document.addEventListener("htmx:requestError", function () {
document.getElementById("spinner").style.display = "none"; document.getElementById("spinner").style.display = "none";
document.getElementById("import-button").style.display = "block"; // Bring back the button only on error
}); });
</script> </script>
</main> </main>