show confirmation on succesful bot save

This commit is contained in:
Ilion Beyst 2022-05-23 21:13:09 +02:00
parent 4d6a9591d8
commit 6885361204

View file

@ -11,6 +11,8 @@
let availableBots: object[] = []; let availableBots: object[] = [];
let selectedOpponent = undefined; let selectedOpponent = undefined;
let botName: string | undefined = undefined; let botName: string | undefined = undefined;
// whether to show the "save succesful" message
let saveSuccesful = false;
let saveErrors: string[] = []; let saveErrors: string[] = [];
@ -56,6 +58,9 @@
} }
async function saveBot() { async function saveBot() {
saveSuccesful = false;
saveErrors = [];
let response = await fetch("/api/save_bot", { let response = await fetch("/api/save_bot", {
method: "POST", method: "POST",
headers: { headers: {
@ -77,8 +82,7 @@
if (!availableBots.find((bot) => bot["id"] == responseData["id"])) { if (!availableBots.find((bot) => bot["id"] == responseData["id"])) {
availableBots = [...availableBots, responseData]; availableBots = [...availableBots, responseData];
} }
// clear errors saveSuccesful = true;
saveErrors = [];
} else { } else {
const error = responseData["error"]; const error = responseData["error"];
if (error["type"] === "validation_failed") { if (error["type"] === "validation_failed") {
@ -113,7 +117,9 @@
{#if $currentUser} {#if $currentUser}
<div>Add your bot to the opponents list</div> <div>Add your bot to the opponents list</div>
<input type="text" class="bot-name-input" placeholder="bot name" bind:value={botName} /> <input type="text" class="bot-name-input" placeholder="bot name" bind:value={botName} />
{#if saveErrors.length > 0} {#if saveSuccesful}
<div class="success-text">Bot saved succesfully</div>
{:else if saveErrors.length > 0}
<ul> <ul>
{#each saveErrors as errorText} {#each saveErrors as errorText}
<li class="error-text">{errorText}</li> <li class="error-text">{errorText}</li>
@ -151,6 +157,11 @@
color: red; color: red;
} }
.success-text {
color: green;
margin: 0 8px;
}
.submit-button { .submit-button {
padding: 8px 16px; padding: 8px 16px;
border-radius: 8px; border-radius: 8px;