api calls for the different pages

src/main/resources/static/js/layout/layout.js

+let translations = {};
+let currentLanguage = "english";
+
+/**
+ * Fetch translations for the given language.
+ * @param {string} language - Language code to fetch translations for.
+ */
+async function fetchTranslations(language) {
+    try {
+        const response = await fetch(`/api/translations/language/${language}`);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch translations: ${response.statusText}`);
+        }
+        translations = await response.json();
+        currentLanguage = language;
+        console.log("Translations updated:", translations);
+        document.dispatchEvent(new Event("translations-updated"));
+    } catch (error) {
+        console.error("Error fetching translations:", error);
+    }
+}
+
+// fetch translations on page load
+document.addEventListener("DOMContentLoaded", () => {
+    fetchTranslations(currentLanguage);
+});
+
+// handle language selection
+const languageSelector = document.querySelector(".languageSelector select");
+if (languageSelector) {
+    languageSelector.addEventListener("change", async (event) => {
+        const selectedLanguage = event.target.value;
+        if (selectedLanguage !== currentLanguage) {
+            await fetchTranslations(selectedLanguage);
+        }
+    });
+}

src/main/resources/templates/layout/layout.html

@@ -69,8 +69,6 @@
     </header>
 
     <div class="mainBody">
-
-
         <main layout:fragment="content" class="content"></main>
     </div>
 
@@ -105,7 +103,7 @@
             <p class="footerCompanyName">&copy; LUDEK PCG ltd. All rights reserved.</p>
         </div>
     </footer>
+    <script src="/js/layout/layout.js"></script>
     <script th:replace="~{comments/commentFragment::commentScript}"></script>
-
 </body>
 </html>
\ No newline at end of file