Change language in options

Levminer · Jun 10, 2024 · e2b1b97 · e2b1b97
1 parent f2ab6a3
commit e2b1b97
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 14 deletions.
diff --git a/interface/components/select.svelte b/interface/components/select.svelte
@@ -4,6 +4,10 @@
 		active = event.detail
 
 		$settings.settings[setting] = options.indexOf(active)
+
+		if (setting === "language") {
+			location.reload()
+		}
 	}}
 >
 	<div class="relative">
@@ -14,7 +18,7 @@
 		</span>
 
 		<Transition enter="transition duration-100 ease-out" enterFrom="transform scale-95 opacity-0" enterTo="transform scale-100 opacity-100" leave="transition duration-75 ease-out" leaveFrom="transform scale-100 opacity-100" leaveTo="transform scale-95 opacity-0">
-			<div class="absolute z-10 mt-1 w-full rounded-xl bg-white shadow-lg ">
+			<div class="absolute z-10 mt-1 w-full rounded-xl bg-white shadow-lg">
 				<ListboxOptions class="max-h-60 overflow-auto p-2 text-base leading-6 shadow-xl focus:outline-none sm:text-sm sm:leading-5">
 					{#each options as name (name)}
 						<ListboxOption

diff --git a/interface/stores/settings.ts b/interface/stores/settings.ts
@@ -17,6 +17,7 @@ const defaultSettings: LibSettings = {
 	},
 
 	settings: {
+		language: 0,
 		launchOnStartup: true,
 		minimizeToTray: true,
 		optionalAnalytics: true,
@@ -54,6 +55,10 @@ export const settings = writable<LibSettings>(localStorage.settings ? JSON.parse
 settings.subscribe((data) => {
 	console.log("Settings changed: ", data)
 
+	if (data.settings.language === undefined) {
+		data.settings.language = 0
+	}
+
 	localStorage.setItem("settings", JSON.stringify(data))
 })
 

diff --git a/interface/utils/language/index.ts b/interface/utils/language/index.ts
@@ -4,22 +4,29 @@ import { localeES } from "@utils/language/es"
 import { localeFR } from "@utils/language/fr"
 import { localeRU } from "@utils/language/ru"
 import { localeDE } from "@utils/language/de"
-
+import { getSettings } from "@stores/settings"
 
 export const getLanguage = () => {
 	const language = navigator.language
+	const settings = getSettings()
 
-	if (language.startsWith("es")) {
-		return localeES
-	} else if (language.startsWith("hu")) {
-		return localeHU
-	} else if (language.startsWith("fr")) {
-		return localeFR
-	} else if (language.startsWith("ru")) {
-		return localeRU
-	} else if (language.startsWith("de")) {
-		return localeDE
+	if (settings.settings.language === 0) {
+		if (language.startsWith("hu")) {
+			return localeHU
+		} else if (language.startsWith("es")) {
+			return localeES
+		} else if (language.startsWith("fr")) {
+			return localeFR
+		} else if (language.startsWith("ru")) {
+			return localeRU
+		} else if (language.startsWith("de")) {
+			return localeDE
+		} else {
+			return localeEN
+		}
 	} else {
-		return localeEN
+		const languages = [localeEN, localeHU, localeES, localeFR, localeRU, localeDE]
+
+		return languages[settings.settings.language - 1]
 	}
 }
diff --git a/interface/utils/types.d.ts b/interface/utils/types.d.ts
@@ -55,6 +55,7 @@ declare global {
 		}
 
 		settings: {
+			language: number
 			launchOnStartup: boolean
 			minimizeToTray: boolean
 			optionalAnalytics: boolean

diff --git a/interface/windows/settings/settings.svelte b/interface/windows/settings/settings.svelte
@@ -42,6 +42,16 @@
 			</div>
 		</div>
 
+		<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
+			<div>
+				<h2>Language</h2>
+				<h3>Select your preferred language. By default it will be the system language</h3>
+			</div>
+			<div class="ml-20 flex gap-3">
+				<Select options={["Default", "English", "Hungarian", "Spanish", "French", "Russian", "German"]} setting={"language"} />
+			</div>
+		</div>
+
 		<div class="transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left">
 			<div>
 				<h2>{language.settings.clearData}</h2>
@@ -117,7 +127,7 @@
 				</div>
 				<div class="ml-10 flex flex-wrap gap-3 sm:ml-0 sm:mt-10 sm:w-full">
 					<button on:click={() => editShortcut(i)} id="editShortcut{i}" class="button">
-						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
+						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" /><path d="m15 5 4 4" /></svg>
 						{language.settings.shortcutsEditButton}
 					</button>
 					<button on:click={() => resetShortcut(i)} id="resetShortcut{i}" class="button">