Introduce dataLanguages

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port 8080",
     "build": "vite build",
     "easydb": "node ./src/generate.js",
     "preview": "vite preview",

src/App.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Button, Heading, Label, Input, Select } from "flowbite-svelte";
+  import { Button, Heading, Input, Label, MultiSelect, Select } from "flowbite-svelte";
   import EasyDbDetailView from "./components/EasyDBDetailView.svelte";
 
   let uuid = "859e2318-32f6-4013-8468-ef8cec0b581b";
@@ -10,6 +10,7 @@
     { value: 'en-US', name: 'English'},
   ];
   let selected_app_language = 'de-DE';
+  let selected_data_languages = ['de-DE', 'en-US'];
 </script>
 
 <main class="container mx-auto">
@@ -57,9 +58,15 @@
         </Label>
         <Select class="w-full" items={languages} bind:value={selected_app_language} />
       </div>
+      <div class="space-y-2 p-4">
+        <Label>
+          Data Languages:
+        </Label>
+        <MultiSelect items={languages} bind:value={selected_data_languages} />
+      </div>
     </div>
     <div class="w-1/2 p-4 border border-gray-300">
-      <EasyDbDetailView uuid={uuid} appLanguage={selected_app_language} easydb_instance={instance} />
+      <EasyDbDetailView uuid={uuid} appLanguage={selected_app_language} dataLanguages={selected_data_languages} easydbInstance={instance} />
     </div>
   </div>
 </main>

src/components/EasyDBDetailView.svelte

@@ -3,18 +3,21 @@
   import { pregen_instance } from "../lib/easydbPregen";
   import { maskObj } from "../lib/easydbHelpers";
   import { setContext } from "svelte";
-  import { appLanguageStore, easydbInstanceStore, easydbDataPromiseStore } from "../lib/stores";
+  import { appLanguageStore, dataLanguagesStore, easydbInstanceStore, easydbDataPromiseStore } from "../lib/stores";
 
   import RecursiveEasyDbDetailView from "./RecursiveEasyDBDetailView.svelte";
 
   export let uuid = "";
   export let appLanguage = "de-DE";
-  export let easydb_instance = pregen_instance;
+  export let dataLanguages = ["de-DE", "en-US"];
+  export let easydbInstance = pregen_instance;
 
   $: appLanguageStore.set(appLanguage);
-  $: easydbInstanceStore.set(easydb_instance);
+  $: dataLanguagesStore.set(dataLanguages);
+  $: easydbInstanceStore.set(easydbInstance);
 
   setContext("appLanguage", appLanguageStore);
+  setContext("dataLanguages", dataLanguagesStore);
 </script>
 
 {#await $easydbDataPromiseStore }

src/components/L10nTextField.svelte

@@ -7,7 +7,7 @@
   export let field;
   export let table;
 
-  const lang = getContext("appLanguage");
+  const lang = getContext("dataLanguages")[0];
 </script>
 
 <span class="easydb-l10n-text-field">{bestLanguage(fieldData(data, table, field), $lang)}</span>

src/components/Link.svelte

@@ -9,7 +9,7 @@
   export let data;
   export let table;
 
-  const lang = getContext("appLanguage");
+  const lang = getContext("dataLanguages")[0];
   const fdata = fieldData(data, table, field);
 </script>
 

src/components/OnelineL10nTextField.svelte

@@ -7,7 +7,7 @@
   export let field;
   export let table;
 
-  const lang = getContext("appLanguage");
+  const lang = getContext("dataLanguages")[0];
 </script>
 
 <span class="easydb-oneline-l10n-text-field">{bestLanguage(fieldData(data, table, field), $lang)}</span>

src/lib/stores.js

@@ -21,9 +21,12 @@ async function pregenDefaults() {
   };
 }
 
-// This manages the global state of the current language
+// This manages the global state of the current app language
 export const appLanguageStore = writable(null);
 
+// This manages the global state of the current data language
+export const dataLanguagesStore = writable(null);
+
 // This manages the global state of the EasyDB instance we are talking to
 export const easydbInstanceStore = writable(null);