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

95
components/server/UserProfile.vue
View File

@ -1,60 +1,68 @@
<template>
<section :class="['userProfile', darkMode ? 'section-darkmode' : 'section-lightmode']">
<h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">Profile:</h2>
<section :class="['userProfile', loggedInUserDarkModeBoolean ? 'section-darkmode' : 'section-lightmode']">
<h2 :class="['heading', loggedInUserDarkModeBoolean ? 'heading-darkmode' : 'heading-lightmode']">Profile:</h2>
<div class="userData">
<div class="rectangle-container">
<div :class="['rectangle', darkMode ? 'rectangle-darkmode' : 'rectangle-lightmode']"></div>
<div :class="['rectangle', loggedInUserDarkModeBoolean ? 'rectangle-darkmode' : 'rectangle-lightmode']">
</div>
</div>
<div class="fullname-registered-lastLogin">
<div class="data-field" id="fullName">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Full name:</pre>
<pre
:class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Full name:</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserFullName }}</pre>
:class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserFullName }}</pre>
<input v-if="editable" v-model="loggedInUserFullName" @change="updateUser()"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
:class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
</div>
<div class="data-field" id="registered">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Registered:</pre>
<pre
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ loggedInUserRegistered }}</pre>
:class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Registered:</pre>
<pre
:class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']"> {{ loggedInUserRegistered }}</pre>
</div>
<div class="data-field" id="lastLogin">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Last login:</pre>
<pre
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ loggedInUserLastLogin }}</pre>
:class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Last login:</pre>
<pre
:class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']"> {{ loggedInUserLastLogin }}</pre>
</div>
</div>
<div class="info">
<div class="city-phonenumber">
<div class="data-field" id="city">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">City:</pre>
<pre
:class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">City:</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserCity }}</pre>
:class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserCity }}</pre>
<input v-if="editable" v-model="loggedInUserCity" @change="updateUser()"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
:class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
</div>
<div class="data-field" id="phonenumber">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phonenumber:</pre>
<pre
:class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Phonenumber:</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserPhonenumber }}</pre>
:class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserPhonenumber }}</pre>
<input v-if="editable" v-model="loggedInUserPhonenumber" @change="updateUser()"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
:class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
</div>
</div>
<div class="postcode-address">
<div class="data-field" id="postcode">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Postcode:</pre>
<pre
:class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Postcode:</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserPostcode }}</pre>
:class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserPostcode }}</pre>
<input v-if="editable" v-model="loggedInUserPostcode" @change="updateUser()"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
:class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
</div>
<div class="data-field" id="address">
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Address:</pre>
<pre
:class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Address:</pre>
<pre v-if="!editable"
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserAddress }}</pre>
:class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserAddress }}</pre>
<input v-if="editable" v-model="loggedInUserAddress" @change="updateUser()"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
:class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
</div>
</div>
</div>
@ -64,13 +72,15 @@
<script setup>
import { ref } from 'vue';
import { ref, watch, onMounted } from 'vue';
import { useStore } from 'vuex';
import { computed } from 'vue';
import Axios from '../axios.config.js';
import clientsideConfig from '../../clientsideConfig.js';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
const editable = computed(() => store.state.editable);
const loggedInUserId = ref('');
const loggedInUserUsername = ref('');
@ -85,6 +95,8 @@ const loggedInUserPostcode = ref('');
const loggedInUserAdminBool = ref('');
const loggedInUserTechnicianBool = ref('');
const loggedInUserReaderBool = ref('');
const loggedInUserDarkModeBool = ref('');
const loggedInUserDarkModeBoolean = ref('');
function getItem(item) {
if (process.client) {
@ -108,23 +120,27 @@ const getSession = async () => {
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;
}
}
const darkMode = ref(true)
//update data
const updateUser = async () => {
if (loggedInUserFullName.value.length === 0) {
if (loggedInUserFullName.value.length == 0) {
alert("Please add a valid name!");
loggedInUserFullName.value = getItem('logged-in-user-fullName');
return;
}
if (loggedInUserCity.value.length === 0) {
if (loggedInUserCity.value.length == 0) {
alert("Please add a city!");
loggedInUserCity.value = getItem('logged-in-user-city');
return;
}
if (loggedInUserAddress.value.length === 0) {
if (loggedInUserAddress.value.length == 0) {
alert("Please add an address!");
loggedInUserAddress.value = getItem('logged-in-user-address');
return;
@ -139,7 +155,7 @@ const updateUser = async () => {
loggedInUserPostcode.value = getItem('logged-in-user-postcode');
return;
}
if ((loggedInUserPhonenumber.value.length === 0) && (loggedInUserEmail.value.length === 0)) {
if ((loggedInUserPhonenumber.value.length == 0) && (loggedInUserEmail.value.length == 0)) {
alert("Please add a phonenumber or an email!");
loggedInUserPhonenumber.value = getItem('logged-in-user-phonenumber');
loggedInUserEmail.value = getItem('logged-in-user-email')
@ -160,6 +176,7 @@ const updateUser = async () => {
adminBool: loggedInUserAdminBool.value,
technicianBool: loggedInUserTechnicianBool.value,
readerBool: loggedInUserReaderBool.value,
darkModeBool: loggedInUserDarkModeBoolean.value,
}
)
setItem('logged-in-user-username', loggedInUserUsername.value)
@ -169,6 +186,12 @@ const updateUser = async () => {
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();
} catch (err) {
console.log(err.response.statusText);
@ -176,12 +199,12 @@ const updateUser = async () => {
}
function setItem(item, value) {
if (process.client) {
localStorage.setItem(item, value)
return true
} else {
return false
}
if (process.client) {
localStorage.setItem(item, value)
return true
} else {
return false
}
}
// to validate the phonenumber
@ -208,6 +231,8 @@ const validatePostcode = (postcode) => {
return postcodeRegex.test(postcode);
}
watch(modeChanged, getSession)
onMounted(async () => {
await getSession();
});