[web] Improve confirm modals

This commit is contained in:
orosmatthew 2024-01-22 21:38:58 -05:00
parent aef88bd90b
commit 9ee581c4e3

View File

@ -8,6 +8,17 @@
export let data: PageData; export let data: PageData;
let confirmModal: ConfirmModal; let confirmModal: ConfirmModal;
function enhanceConfirm(form: HTMLFormElement, text: string) {
enhance(form, async ({ cancel }) => {
if ((await confirmModal.prompt(text)) !== true) {
cancel();
}
return async ({ update }) => {
await update();
};
});
}
</script> </script>
<svelte:head> <svelte:head>
@ -29,25 +40,41 @@
<a href="/admin/contests" class="btn btn-outline-primary">All Contests</a> <a href="/admin/contests" class="btn btn-outline-primary">All Contests</a>
</div> </div>
<div class="col-6 text-end"> <div class="col-6 text-end">
<form {#if data.activeTeams === 0}
method="POST" <form
use:enhance={async ({ cancel }) => { method="POST"
if ((await confirmModal.prompt('Are you sure?')) !== true) { action="?/delete"
cancel(); class="d-inline"
} use:enhanceConfirm={'Are you sure you want to delete the contest? This WILL DELETE ALL DATA AND SUBMISSIONS!!'}
return async ({ update }) => { >
await update(); <button type="submit" class="btn btn-danger">Delete</button>
}; </form>
}} <form
> method="POST"
{#if data.activeTeams === 0} action="?/repo"
<button type="submit" formaction="?/delete" class="btn btn-danger">Delete</button> class="d-inline"
<button type="submit" formaction="?/repo" class="btn btn-warning">Recreate Repos</button> use:enhanceConfirm={'Are you sure you want to recreate repos? This WILL DELETE ALL DATA on the repos currently.'}
<button type="submit" formaction="?/start" class="btn btn-success">Start</button> >
{:else} <button type="submit" class="btn btn-warning">Recreate Repos</button>
<button type="submit" formaction="?/stop" class="btn btn-outline-danger">Stop</button> </form>
{/if} <form
</form> method="POST"
action="?/start"
class="d-inline"
use:enhanceConfirm={'Are you sure you want to start the contest?'}
>
<button type="submit" class="btn btn-success">Start</button>
</form>
{:else}
<form
method="POST"
action="?/stop"
class="d-inline"
use:enhanceConfirm={'Are you sure you want to stop the contest?'}
>
<button type="submit" class="btn btn-outline-danger">Stop</button>
</form>
{/if}
</div> </div>
</div> </div>