mastered translations

frontend/src/App.svelte

@@ -1,9 +1,21 @@
 <script>
+    import { onMount } from 'svelte';
+    import { loadTranslation } from './translations.svelte.js'
+    let translations_ready = false;
+    onMount(async () => {
+        await loadTranslation('de','Login');
+        translations_ready = true;
+    });
+
     import Homepage from "./Components/Homepage.svelte";
     import Login    from "./Components/Login.svelte";
     import Menu     from "./Components/Menu.svelte";
 </script>
 
+{#if translations_ready}
 <Menu />
 <Homepage />
-<Login />
+<Login />
+{:else}
+    <p>Loading translations...</p>
+{/if}

frontend/src/Components/Login.svelte

@@ -1,11 +1,5 @@
 <script>
-    import { onMount } from 'svelte';
-    import { t, loadTranslation } from './translations.js'
-    let ready = false;
-    onMount(async () => {
-        await loadTranslation('en','Login');
-        ready = true;
-    });
+    import { t } from '../translations.svelte.js';
 </script>
 <style>
     label { display: block; margin: 5px; }
@@ -20,9 +14,8 @@
     }
 </style>
 
-{#if ready}
 <fieldset>
-    <legend>{t('Login','Login')}</legend>
+    <legend>{t('login.Login')}</legend>
     <label>
         <input type="text" />
         <span>Email/Username</span>
@@ -39,6 +32,3 @@
     <button>SRSoftware</button>
     <button>ORC ID</button>
 </fieldset>
-{:else}
-    <p>Loading translations...</p>
-{/if}

frontend/src/Components/translations.js

@@ -1,17 +0,0 @@
-const translations = {}
-
-export async function loadTranslation(lang,page){
-    if (!translations[lang]) translations[lang] = {};
-    if (translations[lang][page]) return;
-    var url = `${location.protocol}//${location.host.replace('5173','8080')}/api/translations/${lang}/${page}`;
-    const resp = await fetch(url);
-    const json = await resp.json();
-    translations[lang][page] = json;
-}
-
-export function t(page,key){
-    const lang = 'en';
-    if (!translations[lang]) return key;
-    if (!translations[lang][page]) return key;
-    return translations[lang][page][key] ? translations[lang][page][key] : key;
-}

frontend/src/translations.svelte.js

@@ -0,0 +1,19 @@
+export const translations = $state({
+    values: {}
+})
+
+export async function loadTranslation(lang){
+    var url = `${location.protocol}//${location.host.replace('5173','8080')}/api/translations/${lang}`;
+    translations.values = await fetch(url).then(resp => resp.json());
+}
+
+export function t(key){
+    var keys = key.split('.');
+    let set = translations.values;
+    for (let key of keys){
+        if (set[key]) {
+            set = set[key];
+        } else return key;
+    }
+    return set;
+}