From c5ff92f941d74c771626422b5f55fb9aa7a171cf Mon Sep 17 00:00:00 2001 From: Aadhavan Srinivasan Date: Wed, 5 Mar 2025 07:07:40 -0500 Subject: [PATCH] Added JS to fetch romanization from an endpoint and log it; added a CSS class to the loading bar to show while the data is being fetched --- index.html | 2 +- updateTranslations.js | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index fdca09c..2841a7e 100644 --- a/index.html +++ b/index.html @@ -71,7 +71,7 @@ .loading-indicator { display: none; } - .htmx-request.loading-indicator /* While request is being made */ { + .loading, .htmx-request.loading-indicator /* While request is being made */ { display: inline; } diff --git a/updateTranslations.js b/updateTranslations.js index e9779ce..0ae63c7 100644 --- a/updateTranslations.js +++ b/updateTranslations.js @@ -3,4 +3,19 @@ function updateTranslations(response) { document.querySelectorAll(".languageText").forEach(element => { element.textContent = translations[element.id.replace("Text", "")]; }); + + // Send result to romanization sever + // Since this is an asynchronous opreation, there is no indication that + // it's being performed in the backend. So I add the 'loading' class to the progress + // bar used to track translations, and then remove it in the 'resolved' handler. + const elem = document.getElementById("loading-screen") + elem.classList.toggle("loading") + fetch("/romanize", { + method: "POST", + body: response + }).then((newResponse) => newResponse.json()) // It looks like response.json() returns another promise, since the _body_ of the response may not have loaded yet. Do not confuse this json() with the static Response.json() method. Since it returns another promise, I have to call .then() to actually get the result. + .then((data) => { + elem.classList.toggle("loading"); + console.log(data); + }); }