diff --git a/src/lib/Drawer/SettingsButton.svelte b/src/lib/Drawer/SettingsButton.svelte
index 9da13f9b..ab09262f 100644
--- a/src/lib/Drawer/SettingsButton.svelte
+++ b/src/lib/Drawer/SettingsButton.svelte
@@ -3,14 +3,38 @@
import { openModal } from 'svelte-modals';
import Icon from '@iconify/svelte';
import Ripple from 'svelte-ripple';
+ import { base } from '$app/paths';
export let data: any;
+ let languages: {
+ id: string;
+ label: string;
+ }[];
+
/**
* Gets languages and opens modal
*/
async function handleClick() {
- openModal(() => import('$lib/Settings/Index.svelte'), { data });
+ const getIntlName = (code: string, displayLanguage = code) => {
+ const name = new Intl.DisplayNames([displayLanguage], { type: 'language' }).of(code);
+ return (name || code).charAt(0).toUpperCase() + (name || code).slice(1);
+ };
+ try {
+ const response = await fetch(`${base}/_api/list_languages`);
+ const data = await response.json();
+ if (response.ok) {
+ languages = data.map((code: string) => ({
+ id: code,
+ label: getIntlName(code)
+ }));
+ } else {
+ throw new Error(`${response.status}, ${data.message}`);
+ }
+ } catch (error) {
+ console.error(error);
+ }
+ openModal(() => import('$lib/Settings/Index.svelte'), { data, languages });
}
/**
diff --git a/src/lib/Settings/Index.svelte b/src/lib/Settings/Index.svelte
index 7b475f42..5e56a055 100644
--- a/src/lib/Settings/Index.svelte
+++ b/src/lib/Settings/Index.svelte
@@ -14,6 +14,11 @@
export let data: any;
export let isOpen: boolean;
+ export let languages: {
+ id: string;
+ label: string;
+ }[];
+
let formElement: HTMLFormElement;
let timeout: ReturnType{$lang('settings')}