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

142
components/server/UserAppearance.vue
View File

@ -1,36 +1,142 @@
<template>
<section :class="['userAppearance', darkMode ? 'section-darkmode' : 'section-lightmode']">
<section :class="['userAppearance', loggedInUserDarkModeBoolean ? 'section-darkmode' : 'section-lightmode']">
<div class="userData">
<div class="data-field" id="mode">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Mode:</pre>
<pre :class="['smallLabel', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Lightmode</pre>
<Toggle v-model="darkMode" id="toggleAppearance" />
<pre :class="['smallLabel', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Darkmode</pre>
<pre :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Mode:</pre>
<pre
:class="['smallLabel', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Lightmode</pre>
<Toggle v-model="loggedInUserDarkModeBoolean" id="toggleAppearance" />
<pre
:class="['smallLabel', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Darkmode</pre>
</div>
<div class="data-field" id="language">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Language:</pre>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
<pre :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Language:</pre>
<pre :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">...</pre>
</div>
</div>
</section>
</template>
<script setup>
import { ref } from 'vue';
import Toggle from '@vueform/toggle'
const darkMode = ref(true)
<script setup>
import { ref, onMounted, watch } from 'vue';
import Toggle from '@vueform/toggle';
import { useStore } from 'vuex';
import Axios from '../axios.config.js';
import clientsideConfig from '../../clientsideConfig.js'
const store = useStore();
const loggedInUserId = ref('');
const loggedInUserUsername = ref('');
const loggedInUserRegistered = ref('');
const loggedInUserLastLogin = ref('');
const loggedInUserFullName = ref('');
const loggedInUserEmail = ref('');
const loggedInUserPhonenumber = ref('');
const loggedInUserAddress = ref('');
const loggedInUserCity = ref('');
const loggedInUserPostcode = ref('');
const loggedInUserAdminBool = ref('');
const loggedInUserTechnicianBool = ref('');
const loggedInUserReaderBool = ref('');
const loggedInUserDarkModeBool = ref('');
const loggedInUserDarkModeBoolean = ref(true);
function setItem(item, value) {
if (process.client) {
localStorage.setItem(item, value)
return true
} else {
return false
}
}
function getItem(item) {
if (process.client) {
return localStorage.getItem(item)
} else {
return undefined
}
}
//update data
const updateUser = async () => {
try {
await Axios.put(
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateEmployee`,
{
id: loggedInUserId.value,
username: loggedInUserUsername.value,
fullName: loggedInUserFullName.value,
email: loggedInUserEmail.value,
phonenumber: loggedInUserPhonenumber.value,
address: loggedInUserAddress.value,
city: loggedInUserCity.value,
postcode: loggedInUserPostcode.value,
adminBool: loggedInUserAdminBool.value,
technicianBool: loggedInUserTechnicianBool.value,
readerBool: loggedInUserReaderBool.value,
darkModeBool: loggedInUserDarkModeBoolean.value,
}
)
setItem('logged-in-user-username', loggedInUserUsername.value)
setItem('logged-in-user-fullName', loggedInUserFullName.value)
setItem('logged-in-user-email', loggedInUserEmail.value)
setItem('logged-in-user-phonenumber', loggedInUserPhonenumber.value)
setItem('logged-in-user-address', loggedInUserAddress.value)
setItem('logged-in-user-city', loggedInUserCity.value)
setItem('logged-in-user-postcode', loggedInUserPostcode.value)
if (loggedInUserDarkModeBoolean.value) {
loggedInUserDarkModeBool.value = 1;
} else {
loggedInUserDarkModeBool.value = 0;
}
setItem('logged-in-user-darkMode', loggedInUserDarkModeBool.value)
getSession();
store.commit('setLocalStorageChanged');
store.commit('toggleUpdateDarkMode');
} catch (err) {
console.log(err.response.statusText);
}
}
const getSession = async () => {
loggedInUserId.value = getItem('logged-in-user-id');
loggedInUserUsername.value = getItem('logged-in-user-username');
loggedInUserRegistered.value = getItem('logged-in-user-registered');
loggedInUserLastLogin.value = getItem('logged-in-user-lastLogin');
loggedInUserFullName.value = getItem('logged-in-user-fullName');
loggedInUserEmail.value = getItem('logged-in-user-email');
loggedInUserPhonenumber.value = getItem('logged-in-user-phonenumber');
loggedInUserAddress.value = getItem('logged-in-user-address');
loggedInUserCity.value = getItem('logged-in-user-city');
loggedInUserPostcode.value = getItem('logged-in-user-postcode');
loggedInUserAdminBool.value = getItem('logged-in-user-adminBool');
loggedInUserTechnicianBool.value = getItem('logged-in-user-technicianBool');
loggedInUserReaderBool.value = getItem('logged-in-user-readerBool');
loggedInUserDarkModeBool.value = getItem('logged-in-user-darkMode');
if (loggedInUserDarkModeBool.value == 1) {
loggedInUserDarkModeBoolean.value = true;
} else {
loggedInUserDarkModeBoolean.value = false;
}
}
watch(loggedInUserDarkModeBoolean, updateUser)
onMounted(async () => {
await getSession();
});
</script>
<script>
export default {
name: "UserAppearance",
};
</script>
<style src="@vueform/toggle/themes/default.css"></style>
</script>
<style src="@vueform/toggle/themes/default.css"></style>
<style scoped>
.userAppearance {
display: flex;