Show status in Save, Reinitialize button of config page on web app

- Show non-transient error message in status element if action fails
- On success, just show temporary success message within button
This commit is contained in:
Debanjum Singh Solanky 2023-11-11 01:46:06 -08:00
parent f17d9da36c
commit f044a89d50

View file

@ -110,7 +110,7 @@
<div class="section finalize-actions general-settings"> <div class="section finalize-actions general-settings">
<div class="section-cards"> <div class="section-cards">
<div class="finalize-buttons"> <div class="finalize-buttons">
<button id="configure" type="submit" title="Update index with the latest changes">⚙️ Configure</button> <button id="configure" type="submit" title="Update index with the latest changes">💾 Save All</button>
</div> </div>
<div class="finalize-buttons"> <div class="finalize-buttons">
<button id="reinitialize" type="submit" title="Regenerate index from scratch">🔄 Reinitialize</button> <button id="reinitialize" type="submit" title="Regenerate index from scratch">🔄 Reinitialize</button>
@ -326,11 +326,11 @@
event.preventDefault(); event.preventDefault();
updateIndex( updateIndex(
force=false, force=false,
successText="Configured successfully!", successText="Saved!",
errorText="Unable to configure. Raise issue on Khoj <a href='https://github.com/khoj-ai/khoj/issues'>Github</a> or <a href='https://discord.gg/BDgyabRM6e'>Discord</a>.", errorText="Unable to configure. Raise issue on Khoj <a href='https://github.com/khoj-ai/khoj/issues'>Github</a> or <a href='https://discord.gg/BDgyabRM6e'>Discord</a>.",
button=configure, button=configure,
loadingText="Configuring...", loadingText="Saving...",
emoji="⚙️"); emoji="💾");
}); });
var reinitialize = document.getElementById("reinitialize"); var reinitialize = document.getElementById("reinitialize");
@ -338,7 +338,7 @@
event.preventDefault(); event.preventDefault();
updateIndex( updateIndex(
force=true, force=true,
successText="Reinitialized successfully!", successText="Reinitialized!",
errorText="Unable to reinitialize. Raise issue on Khoj <a href='https://github.com/khoj-ai/khoj/issues'>Github</a> or <a href='https://discord.gg/BDgyabRM6e'>Discord</a>.", errorText="Unable to reinitialize. Raise issue on Khoj <a href='https://github.com/khoj-ai/khoj/issues'>Github</a> or <a href='https://discord.gg/BDgyabRM6e'>Discord</a>.",
button=reinitialize, button=reinitialize,
loadingText="Reinitializing...", loadingText="Reinitializing...",
@ -347,6 +347,7 @@
function updateIndex(force, successText, errorText, button, loadingText, emoji) { function updateIndex(force, successText, errorText, button, loadingText, emoji) {
const csrfToken = document.cookie.split('; ').find(row => row.startsWith('csrftoken'))?.split('=')[1]; const csrfToken = document.cookie.split('; ').find(row => row.startsWith('csrftoken'))?.split('=')[1];
const original_html = button.innerHTML;
button.disabled = true; button.disabled = true;
button.innerHTML = emoji + " " + loadingText; button.innerHTML = emoji + " " + loadingText;
fetch('/api/update?&client=web&force=' + force, { fetch('/api/update?&client=web&force=' + force, {
@ -363,10 +364,13 @@
throw new Error(data.detail); throw new Error(data.detail);
} }
document.getElementById("status").innerHTML = emoji + " " + successText; document.getElementById("status").style.display = "none";
document.getElementById("status").style.display = "block";
button.disabled = false; button.disabled = false;
button.innerHTML = '✅ Done!'; button.innerHTML = `✅ ${successText}`;
setTimeout(function() {
button.innerHTML = original_html;
}, 2000);
}) })
.catch((error) => { .catch((error) => {
console.error('Error:', error); console.error('Error:', error);
@ -374,6 +378,9 @@
document.getElementById("status").style.display = "block"; document.getElementById("status").style.display = "block";
button.disabled = false; button.disabled = false;
button.innerHTML = '⚠️ Unsuccessful'; button.innerHTML = '⚠️ Unsuccessful';
setTimeout(function() {
button.innerHTML = original_html;
}, 2000);
}); });
content_sources = ["computer", "github", "notion"]; content_sources = ["computer", "github", "notion"];