From 7b17cd99fe59a0ef66e68cdfeec6db435e00c205 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adrian=20Z=C3=BCrcher?= Date: Sat, 15 Nov 2025 14:19:45 +0100 Subject: [PATCH] make new localstorage function file --- src/boot/lang.js | 4 +- src/boot/quasar-global.ts | 49 ++++++----------- src/boot/restore-route.js | 5 +- src/localstorage/localStorage.ts | 93 ++++++++++++++++++++++++++++++++ src/pages/LoginPage.vue | 4 +- src/pages/SettingsPage.vue | 13 ++--- src/vueLib/login/LoginMenu.vue | 6 ++- src/vueLib/login/useLogin.ts | 10 ++-- 8 files changed, 128 insertions(+), 56 deletions(-) create mode 100644 src/localstorage/localStorage.ts diff --git a/src/boot/lang.js b/src/boot/lang.js index 76820fe..5583d52 100644 --- a/src/boot/lang.js +++ b/src/boot/lang.js @@ -1,10 +1,10 @@ import { createI18n } from 'vue-i18n'; import yaml from 'js-yaml'; +import { getLocalLanguage } from 'src/localstorage/localStorage'; export const lang = []; const systemLocale = navigator.language || 'en-US'; -const savedLang = localStorage.getItem('lang'); const messages = {}; const modules = import.meta.glob('src/assets/lang/*.yaml', { @@ -39,7 +39,7 @@ function resolveLocale(desiredLocale) { return messages['en'] ? 'en' : Object.keys(messages)[0]; } -const selectedLocale = resolveLocale(savedLang || systemLocale); +const selectedLocale = resolveLocale(getLocalLanguage() || systemLocale); const i18n = createI18n({ legacy: false, // Composition API mode diff --git a/src/boot/quasar-global.ts b/src/boot/quasar-global.ts index b7b2099..6f4ed4e 100644 --- a/src/boot/quasar-global.ts +++ b/src/boot/quasar-global.ts @@ -3,44 +3,29 @@ import { setQuasarInstance } from 'src/vueLib/utils/globalQ'; import { setRouterInstance } from 'src/vueLib/utils/globalRouter'; import { databaseName, logo, appName } from 'src/vueLib/models/settings'; import { Dark } from 'quasar'; +import { getLocalDarkMode, getLocalSettings } from 'src/localstorage/localStorage'; export default boot(({ app, router }) => { setRouterInstance(router); // store router for global access const $q = app.config.globalProperties.$q; setQuasarInstance($q); - Dark.set(localStorage.getItem('mode') === 'true'); + Dark.set(getLocalDarkMode()); - logo.value = localStorage.getItem('icon') ?? logo.value; - appName.value = localStorage.getItem('appName') ?? appName.value; - databaseName.value = localStorage.getItem('databaseName') ?? databaseName.value; - let primaryColor = localStorage.getItem('primaryColor'); - if (primaryColor == null || primaryColor === 'undefined' || primaryColor.trim() === '') { - primaryColor = null; - } - let primaryColorText = localStorage.getItem('primaryColorText'); - if ( - primaryColorText == null || - primaryColorText === 'undefined' || - primaryColorText.trim() === '' - ) { - primaryColorText = null; - } - let secondaryColor = localStorage.getItem('secondaryColor'); - if (secondaryColor == null || secondaryColor === 'undefined' || secondaryColor.trim() === '') { - secondaryColor = null; - } - let secondaryColorText = localStorage.getItem('secondaryColorText'); - if ( - secondaryColorText == null || - secondaryColorText === 'undefined' || - secondaryColorText.trim() === '' - ) { - secondaryColorText = null; - } + const settings = getLocalSettings(); - document.documentElement.style.setProperty('--q-primary', primaryColor ?? '#1976d2'); - document.documentElement.style.setProperty('--q-primary-text', primaryColorText ?? '#ffffff'); - document.documentElement.style.setProperty('--q-secondary', secondaryColor ?? '#26a69a'); - document.documentElement.style.setProperty('--q-secondary-text', secondaryColorText ?? '#ffffff'); + logo.value = settings.icon ?? logo.value; + appName.value = settings.appName ?? appName.value; + databaseName.value = settings.databaseName ?? databaseName.value; + + document.documentElement.style.setProperty('--q-primary', settings.primaryColor ?? '#1976d2'); + document.documentElement.style.setProperty( + '--q-primary-text', + settings.primaryColorText ?? '#ffffff', + ); + document.documentElement.style.setProperty('--q-secondary', settings.secondaryColor ?? '#26a69a'); + document.documentElement.style.setProperty( + '--q-secondary-text', + settings.secondaryColorText ?? '#ffffff', + ); }); diff --git a/src/boot/restore-route.js b/src/boot/restore-route.js index 5635df4..2405cb5 100644 --- a/src/boot/restore-route.js +++ b/src/boot/restore-route.js @@ -1,6 +1,7 @@ import { boot } from 'quasar/wrappers'; import { useUserStore } from 'src/vueLib/login/userStore'; import { appApi } from './axios'; +import { getLocalLastRoute, setLocalLastRoute } from 'src/localstorage/localStorage'; export default boot(async ({ router }) => { const userStore = useUserStore(); @@ -14,7 +15,7 @@ export default boot(async ({ router }) => { // Restore logic after router is ready but before navigation router.isReady().then(() => { - const lastRoute = localStorage.getItem('lastRoute'); + const lastRoute = getLocalLastRoute(); const currentPath = router.currentRoute.value.fullPath; // Restore only if: @@ -34,7 +35,7 @@ export default boot(async ({ router }) => { router.afterEach((to) => { // Don't save login page as "last route" if (to.path !== '/login' && to.path !== '/') { - localStorage.setItem('lastRoute', to.fullPath); + setLocalLastRoute(to.fullPath); } }); }); diff --git a/src/localstorage/localStorage.ts b/src/localstorage/localStorage.ts new file mode 100644 index 0000000..f540d32 --- /dev/null +++ b/src/localstorage/localStorage.ts @@ -0,0 +1,93 @@ +import { Dark } from 'quasar'; +import type { Settings } from 'src/vueLib/models/settings'; +import { updateOrAddObject } from 'src/vueLib/utils/utils'; +import { ref } from 'vue'; + +export function setLocalSettings(settings: Settings) { + localStorage.setItem('icon', settings.icon); + localStorage.setItem('appName', settings.appName); + localStorage.setItem('databaseName', settings.databaseName); + localStorage.setItem('primaryColor', settings.primaryColor); + localStorage.setItem('primaryColorText', settings.primaryColorText); + localStorage.setItem('secondaryColor', settings.secondaryColor); + localStorage.setItem('secondaryColorText', settings.secondaryColorText); +} + +export function getLocalSettings(): Settings { + return { + icon: localStorage.getItem('icon'), + appName: localStorage.getItem('appName'), + databaseName: localStorage.getItem('databaseName'), + primaryColor: localStorage.getItem('primaryColor'), + primaryColorText: localStorage.getItem('primaryColorText'), + secondaryColor: localStorage.getItem('secondaryColor'), + secondaryColorText: localStorage.getItem('secondaryColorText'), + }; +} + +export function clearLocalStorage() { + localStorage.removeItem('icon'); + localStorage.removeItem('appName'); + localStorage.removeItem('databaseName'); + localStorage.removeItem('primaryColor'); + localStorage.removeItem('primaryColorText'); + localStorage.removeItem('secondaryColor'); + localStorage.removeItem('secondaryColorText'); + localStorage.removeItem('lastRoute'); + localStorage.removeItem('mode'); + localStorage.removeItem('lang'); +} + +export function setLocalDarkMode() { + localStorage.setItem('mode', String(Dark.mode)); +} + +export function getLocalDarkMode(): boolean { + return localStorage.getItem('mode') === 'true'; +} + +export function setLocalLastRoute(route: string) { + localStorage.setItem('lastRoute', route); +} + +export function getLocalLastRoute(): string { + return localStorage.getItem('lastRoute') || '/members'; +} + +export function setLocalLanguage(language: string) { + localStorage.setItem('lang', language); +} + +export function getLocalLanguage(): string | null { + return localStorage.getItem('lang'); +} + +type pageDefault = { + page: string; + filteredColumn: string; + filteredValue: string[]; +}; + +type pageDefaults = pageDefault[]; + +const pageDefaults = ref([]); + +export function setLocalPageDefaults( + page: string, + filteredColumn?: string, + filteredValue?: string[], +) { + updateOrAddObject( + pageDefaults.value, + { page: page, filteredColumn: filteredColumn, filteredValue: filteredValue }, + 'page', + ); + localStorage.setItem('pageDefaults', JSON.stringify(pageDefaults.value)); +} + +export function getLocalPageDefaults(page: string): pageDefault | null { + const defaults = localStorage.getItem('pageDefaults'); + if (!defaults) return null; + pageDefaults.value = JSON.parse(defaults); + return pageDefaults.value.find((e) => e.page === page) || null; +} diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue index 84e9aa8..6d26fce 100644 --- a/src/pages/LoginPage.vue +++ b/src/pages/LoginPage.vue @@ -5,6 +5,7 @@ diff --git a/src/pages/SettingsPage.vue b/src/pages/SettingsPage.vue index 092a589..88ecb39 100644 --- a/src/pages/SettingsPage.vue +++ b/src/pages/SettingsPage.vue @@ -1,8 +1,8 @@