1 files changed, 55 insertions, 0 deletions
diff --git a/code/app/src/lib/components/locale-switcher.svelte b/code/app/src/lib/components/locale-switcher.svelte
new file mode 100644
index 0000000..f880bfb
--- /dev/null
+++ b/code/app/src/lib/components/locale-switcher.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+    import pwKey from "$actions/pwKey";
+    import { browser } from "$app/environment";
+    import { page } from "$app/stores";
+    import { CookieNames } from "$lib/configuration";
+    import { setLocale, locale } from "$lib/i18n/i18n-svelte";
+    import type { Locales } from "$lib/i18n/i18n-types";
+    import { locales } from "$lib/i18n/i18n-util";
+    import { loadLocaleAsync } from "$lib/i18n/i18n-util.async";
+    import Cookies from "js-cookie";
+
+    export let _pwKey: string | undefined = undefined;
+
+    async function switch_locale(newLocale: Locales) {
+        if (!newLocale || $locale === newLocale) return;
+        await loadLocaleAsync(newLocale);
+        setLocale(newLocale);
+        document.querySelector("html")?.setAttribute("lang", newLocale);
+        Cookies.set(CookieNames.locale, newLocale, {
+            sameSite: "strict",
+            domain: location.hostname,
+        });
+        console.log("Switched to: " + newLocale);
+    }
+
+    function on_change(event: Event) {
+        const target = event.target as HTMLSelectElement;
+        switch_locale(target.options[target.selectedIndex].value as Locales);
+    }
+
+    $: if (browser) {
+        switch_locale($page.params.lang as Locales);
+    }
+
+    function get_locale_name(iso: string) {
+        switch (iso) {
+            case "nb": {
+                return "Norsk Bokmål";
+            }
+            case "en": {
+                return "English";
+            }
+        }
+    }
+</script>
+
+<select
+    use:pwKey={_pwKey}
+    on:change={on_change}
+    class="mt-1 mr-1 block border-none py-2 pl-3 pr-10 text-base rounded-md right-0 absolute focus:outline-none focus:ring-teal-500 sm:text-sm"
+>
+    {#each locales as aLocale}
+        <option value={aLocale}>{get_locale_name(aLocale)}</option>
+    {/each}
+</select>