adm_tueit/TueIT_App
2
0
Fork 0
Code Issues 3 Pull Requests 3 Packages Projects Releases Wiki Activity

implemented mode change

Browse Source
This commit is contained in:
selina.mail
2024-03-25 23:23:37 +01:00
parent 45a4b58f26
commit 3f88f6b821
71 changed files with 3020 additions and 1006 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
pages/settings.vue
View File

@ -1,22 +1,23 @@
<template>
<section id="content">
<div id="content-header">
<pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name">Settings</pre>
<pre :class="[loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']" id="page-name">Settings</pre>
</div>
<div id="content-body">
<div class="buttonOptions">
<input :class="[(darkMode && accountSelected) ? 'selected-input-darkmode' : '',
(darkMode && !accountSelected) ? 'input-darkmode' : '',
(!darkMode && accountSelected) ? 'selected-input-lightmode' : '',
(!darkMode && !accountSelected) ? 'input-lightmode' : '',]" type="button" id="account" value="Account"
@click="ActivateAccount">
<input :class="[(darkMode && appearanceSelected) ? 'selected-input-darkmode' : '',
(darkMode && !appearanceSelected) ? 'input-darkmode' : '',
(!darkMode && appearanceSelected) ? 'selected-input-lightmode' : '',
(!darkMode && !appearanceSelected) ? 'input-lightmode' : '',]" type="button" id="appearance"
value="Appearance" @click="ActivateAppearance">
<input :class="[(darkMode) ? 'input-darkmode' : '',
(!darkMode) ? 'input-lightmode' : '',]" type="button" id="logout" value="Logout" @click="handleLogout">
<input :class="[(loggedInUserDarkModeBoolean && accountSelected) ? 'selected-input-darkmode' : '',
(loggedInUserDarkModeBoolean && !accountSelected) ? 'input-darkmode' : '',
(!loggedInUserDarkModeBoolean && accountSelected) ? 'selected-input-lightmode' : '',
(!loggedInUserDarkModeBoolean && !accountSelected) ? 'input-lightmode' : '',]" type="button" id="account"
value="Account" @click="ActivateAccount">
<input :class="[(loggedInUserDarkModeBoolean && appearanceSelected) ? 'selected-input-darkmode' : '',
(loggedInUserDarkModeBoolean && !appearanceSelected) ? 'input-darkmode' : '',
(!loggedInUserDarkModeBoolean && appearanceSelected) ? 'selected-input-lightmode' : '',
(!loggedInUserDarkModeBoolean && !appearanceSelected) ? 'input-lightmode' : '',]" type="button"
id="appearance" value="Appearance" @click="ActivateAppearance">
<input :class="[(loggedInUserDarkModeBoolean) ? 'input-darkmode' : '',
(!loggedInUserDarkModeBoolean) ? 'input-lightmode' : '',]" type="button" id="logout" value="Logout"
@click="handleLogout">
</div>
<UserProfile v-if="accountSelected" />
<UserAccount v-if="accountSelected" />
@ -28,15 +29,16 @@
<script setup>
import { ref } from 'vue';
import { ref, onMounted, watch } from 'vue';
import UserProfile from "../components/server/UserProfile.vue";
import UserAccount from "../components/server/UserAccount.vue";
import UserAppearance from "../components/server/UserAppearance.vue";
// import UserRightsList from "../components/server/UserRightsList.vue";
import { useStore } from "vuex";
import { computed } from 'vue';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
const { signOut } = useAuth()
@ -45,8 +47,7 @@ definePageMeta({
title: 'Settings'
})
const darkMode = ref(true)
const loggedInUserDarkModeBoolean = ref('');
const accountSelected = ref(true)
const appearanceSelected = ref(false)
@ -65,6 +66,7 @@ const handleLogout = async () => {
localStorage.removeItem('logged-in-user-adminBool');
localStorage.removeItem('logged-in-user-technicianBool');
localStorage.removeItem('logged-in-user-readerBool');
localStorage.removeItem('logged-in-user-darkMode');
store.commit('resetChangeToSet');
store.commit('setLocalStorageChanged');
let res = await signOut({ callbackUrl: '/login' })
@ -81,13 +83,30 @@ const ActivateAccount = () => {
const ActivateAppearance = () => {
accountSelected.value = false;
appearanceSelected.value = true;
// usersSelected.value = false;
};
// const ActivateUsers = () => {
// accountSelected.value = false;
// appearanceSelected.value = false;
// usersSelected.value = true;
// };
const getSession = async () => {
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
if (loggedInUserDarkModeBool == 1) {
loggedInUserDarkModeBoolean.value = true;
} else {
loggedInUserDarkModeBoolean.value = false;
}
}
function getItem(item) {
if (process.client) {
return localStorage.getItem(item)
} else {
return undefined
}
}
watch(modeChanged, getSession)
onMounted(async () => {
await getSession();
});
</script>
<script>