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

105
layouts/Actionbar.vue
View File

@ -1,126 +1,126 @@
<template>
<aside
:class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
:class="['actionbar', loggedInUserDarkModeBoolean ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
<div :class="['icon', loggedInUserDarkModeBoolean ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
@click="toggleActionbar">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Indicator-Icon-Opened.svg" />
</div>
<nav class="actions">
<button v-if="searchIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search"
<button v-if="searchIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="search"
@click="toggleSearched">
<div class="icon" id="search-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Search-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Search</pre>
</Transition>
</button>
<button v-if="filterIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter"
<button v-if="filterIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="filter"
@click="toggleFiltered">
<div class="icon" id="filter-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Filter-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
</Transition>
</button>
<button v-if="instancesIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
<button v-if="instancesIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="instances">
<div class="icon" id="instances-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Instances-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
</Transition>
</button>
<button v-if="solutionIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions"
<button v-if="solutionIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="solutions"
@click="changeToSolutions">
<div class="icon" id="instances-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Instances-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
</Transition>
</button>
<button v-if="attachmentsIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
<button v-if="attachmentsIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="attachments">
<div class="icon" id="attachments-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Attachments-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
</Transition>
</button>
<button v-if="sellIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
<button v-if="sellIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="sell">
<div class="icon" id="sell-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Sell-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
</Transition>
</button>
<button v-if="archiveIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
<button v-if="archiveIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="archive">
<div class="icon" id="archive-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Archive-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
</Transition>
</button>
<button v-if="addIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
<button v-if="addIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
<div class="icon" id="new-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Add-New-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">New</pre>
</Transition>
</button>
<button v-if="addInstanceIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new-instance">
<button v-if="addInstanceIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-instance">
<div class="icon" id="new-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Add-New-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instance</pre>
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Instance</pre>
</Transition>
</button>
<router-link v-if="addSolutionIcon" to="/solutions" class="button"
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new-solution" @click="addSolution">
:class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
<button :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-solution" @click="addSolution">
<div class="icon" id="new-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Add-New-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solution</pre>
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solution</pre>
</Transition>
</button>
</router-link>
<button v-if="editIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit"
<button v-if="editIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="edit"
@click="toggleEditable">
<div class="icon" id="edit-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Edit-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
</Transition>
</button>
<button v-if="deleteIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete"
<button v-if="deleteIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="delete"
@click="deleteFunc">
<div class="icon" id="delete-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
<img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="/icons/actionbar-icons/Delete-Icon.svg" />
</div>
<Transition name="fade">
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
<pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
</Transition>
</button>
</nav>
@ -146,8 +146,9 @@ const archiveIcon = computed(() => store.state.archiveIcon);
const editIcon = computed(() => store.state.editIcon);
const deleteIcon = computed(() => store.state.deleteIcon);
const darkMode = ref(true)
const loggedInUserDarkModeBoolean = ref('');
const isExpanded = ref(true)
const modeChanged = computed(() => store.state.updateDarkMode);
// get accesss to the store
const store = useStore()
@ -189,7 +190,27 @@ const changeToSolutions = () => {
// watch(changeToSet, changeToSettingsPage)
onMounted(() => {
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();
store.commit('changeToAssetlist')
if (changeToSet.value) {
store.commit('toggleChangeToSet');