jws-frontend/src/utils/ui.ts
2024-12-18 09:15:06 +07:00

78 lines
1.9 KiB
TypeScript

import { Dark } from 'quasar';
import { setLocale as setDateTimeLocale } from './datetime';
import { i18n } from 'src/boot/i18n';
export enum Theme {
Light = 'light',
Dark = 'dark',
Auto = 'auto',
}
/**
* This is used to detect current theme that set before entering app.
*
* **Warning:** This must be used after initialize vue and quasar as it use quasar api.
*/
export function initTheme(): Theme {
const current = localStorage.getItem('currentTheme') as Theme | null;
if (!current) return setTheme(Theme.Auto);
return setTheme(current);
}
/**
* This is used to set quasar theme through quasar api.
*
* **Warning:** Must be called after initialize vue and quasar.
*/
export function setTheme(theme: Theme): Theme {
localStorage.setItem('currentTheme', theme);
if (theme !== Theme.Auto) {
Dark.set(theme === Theme.Dark);
}
if (theme === Theme.Auto) {
Dark.set(window.matchMedia('(prefers-color-scheme: dark)').matches);
}
return theme;
}
export enum Lang {
English = 'eng',
Thai = 'tha',
}
/**
* This is used to get remembered language and use it.
*
* **Warning:** Must be used after initialize vue and vue-i18n
*/
export function initLang(): Lang {
const { locale } = i18n.global;
const current = localStorage.getItem('currentLanguage') as Lang | null;
if (current !== Lang.English && current !== Lang.Thai) {
return setLang(Lang.Thai);
}
if (!current) return setLang(locale.value as Lang);
return setLang(current);
}
/**
* This is used to set language and also remember the language set.
*
* **Warning:** Must be used after initialize vue and vue-i18n
*/
export function setLang(lang: Lang): Lang {
const { locale } = i18n.global;
locale.value = lang;
localStorage.setItem('currentLanguage', lang);
// TODO: Make date time get locale from i18n instead of telling it to use specific lang.
setDateTimeLocale(lang === Lang.English ? 'en' : 'th');
return lang;
}