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

implemented settings and user page (darkmode is still missing)

Browse Source
This commit is contained in:
selina.mail
2024-03-24 21:02:56 +01:00
parent acb7bb7cb6
commit 45a4b58f26
36 changed files with 2283 additions and 1313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pages/employees.vue
View File

@ -8,7 +8,8 @@
<div id="content-body">
<EmployeeSearch v-if="onEmployeelist" />
<Employeetable v-if="onEmployeelist" />
<Asset v-if="onEmployee" />
<Employee v-if="onEmployee" />
<EmployeeGroups v-if="onEmployee" />
</div>
</section>
</template>
@ -19,7 +20,8 @@
import EmployeeSearch from "../components/EmployeeSearch.vue";
import Employeetable from "../components/server/EmployeeTable.vue";
import Asset from "../components/server/Asset.vue";
import Employee from "../components/server/Employee.vue";
import EmployeeGroups from "../components/server/EmployeeGroups.vue";
import { useStore } from 'vuex';
import { computed } from 'vue';

12
pages/home.vue
View File

@ -10,8 +10,8 @@
</div>
</section>
</template>
<script setup>
import { ref } from 'vue';
@ -24,16 +24,16 @@ definePageMeta({
title: 'Home'
})
const darkMode = ref(true)
const darkMode = ref(true);
</script>
<script>
export default {
name: "HomePage",
}
</script>
</script>
<style>
* {
box-sizing: border-box;

5
pages/login.vue
View File

@ -1,7 +1,7 @@
<template>
<section id="content">
<div id="content-header">
<pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name"> </pre>
<pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name-login"></pre>
</div>
<div id="content-body">
<LoginForm />
@ -59,7 +59,8 @@ export default {
height: 3.125rem;
}
#page-name {
#page-name-login {
text-decoration: none;
letter-spacing: 5%;
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
}

13
pages/maintenanceVisits.vue
View File

@ -39,8 +39,8 @@
</div>
</section>
</template>
<script setup>
import { ref } from 'vue';
@ -75,15 +75,15 @@ const defaultMasterChecklistPage = () => {
store.commit('changeToTemplatelist')
}
</script>
<script>
export default {
name: "MaintenanceVisitsPage",
}
</script>
<style scoped>
* {
box-sizing: border-box;
@ -115,6 +115,7 @@ export default {
letter-spacing: 5%;
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
text-decoration: none;
}
#active-page-name {

29
pages/productionOrders.vue
View File

@ -27,20 +27,20 @@
</router-link>
</div>
<div id="content-body">
<CustomerSearch v-if="onTemplatelist"/>
<ProductionOrdersTemplateTable v-if="onTemplatelist"/>
<CustomerSearch v-if="onTemplatelist" />
<ProductionOrdersTemplateTable v-if="onTemplatelist" />
<!-- <ProductionOrdersTemplateTableNoCustomer v-if="onCustomerTemplatelist"/> -->
<ProductionOrdersTemplate v-if="onTemplate"/>
<TemplateChecklist v-if="onTemplate"/>
<TemplateSearch v-if="onInstancelist"/>
<ProductionOrdersInstanceTable v-if="onInstancelist"/>
<ProductionOrdersInstance v-if="onInstance"/>
<InstanceChecklist v-if="onInstance"/>
<ProductionOrdersTemplate v-if="onTemplate" />
<TemplateChecklist v-if="onTemplate" />
<TemplateSearch v-if="onInstancelist" />
<ProductionOrdersInstanceTable v-if="onInstancelist" />
<ProductionOrdersInstance v-if="onInstance" />
<InstanceChecklist v-if="onInstance" />
</div>
</section>
</template>
<script setup>
import { ref } from 'vue';
@ -75,14 +75,14 @@ const defaultMasterChecklistPage = () => {
store.commit('changeToTemplatelist')
}
</script>
<script>
export default {
name: "ProductionOrdersPage",
}
</script>
</script>
<style scoped>
* {
box-sizing: border-box;
@ -114,6 +114,7 @@ export default {
letter-spacing: 5%;
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
text-decoration: none;
}
#active-page-name {

89
pages/settings.vue
View File

@ -6,37 +6,39 @@
<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"
(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"
(darkMode && !appearanceSelected) ? 'input-darkmode' : '',
(!darkMode && appearanceSelected) ? 'selected-input-lightmode' : '',
(!darkMode && !appearanceSelected) ? 'input-lightmode' : '',]" type="button" id="appearance"
value="Appearance" @click="ActivateAppearance">
<input :class="[(darkMode && usersSelected) ? 'selected-input-darkmode' : '',
(darkMode && !usersSelected) ? 'input-darkmode' : '',
(!darkMode && usersSelected) ? 'selected-input-lightmode' : '',
(!darkMode && !usersSelected) ? 'input-lightmode' : '',]" type="button" id="users" value="Users"
@click="ActivateUsers">
<input :class="[(darkMode) ? 'input-darkmode' : '',
(!darkMode) ? 'input-lightmode' : '',]" type="button" id="logout" value="Logout" @click="handleLogout">
</div>
<UserProfile v-if="accountSelected"/>
<UserAccount v-if="accountSelected"/>
<UserAppearance v-if="appearanceSelected"/>
<UserRightsList v-if="usersSelected"/>
<UserProfile v-if="accountSelected" />
<UserAccount v-if="accountSelected" />
<UserAppearance v-if="appearanceSelected" />
<!-- <UserRightsList v-if="usersSelected"/> -->
</div>
</section>
</template>
<script setup>
import { ref } 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 UserRightsList from "../components/server/UserRightsList.vue";
import { useStore } from "vuex";
const store = useStore();
const { signOut } = useAuth()
definePageMeta({
layout: 'default',
@ -47,33 +49,54 @@ const darkMode = ref(true)
const accountSelected = ref(true)
const appearanceSelected = ref(false)
const usersSelected = ref(false)
const handleLogout = async () => {
localStorage.setItem('logged-in-bool', false);
localStorage.removeItem('logged-in-user-id');
localStorage.removeItem('logged-in-user-username');
localStorage.removeItem('logged-in-user-registered');
localStorage.removeItem('logged-in-user-lastLogin');
localStorage.removeItem('logged-in-user-fullName');
localStorage.removeItem('logged-in-user-email');
localStorage.removeItem('logged-in-user-phonenumber');
localStorage.removeItem('logged-in-user-address');
localStorage.removeItem('logged-in-user-city');
localStorage.removeItem('logged-in-user-postcode');
localStorage.removeItem('logged-in-user-adminBool');
localStorage.removeItem('logged-in-user-technicianBool');
localStorage.removeItem('logged-in-user-readerBool');
store.commit('resetChangeToSet');
store.commit('setLocalStorageChanged');
let res = await signOut({ callbackUrl: '/login' })
store.commit('resetStore');
store.commit('logout');
}
// fuctions to change the option button
const ActivateAccount = () => {
accountSelected.value = true;
appearanceSelected.value = false;
usersSelected.value = false;
// usersSelected.value = false;
};
const ActivateAppearance = () => {
accountSelected.value = false;
appearanceSelected.value = true;
usersSelected.value = false;
};
const ActivateUsers = () => {
accountSelected.value = false;
appearanceSelected.value = false;
usersSelected.value = true;
// usersSelected.value = false;
};
// const ActivateUsers = () => {
// accountSelected.value = false;
// appearanceSelected.value = false;
// usersSelected.value = true;
// };
</script>
<script>
export default {
name: "SettingsPage",
}
</script>
</script>
<style>
* {
box-sizing: border-box;
@ -131,7 +154,7 @@ export default {
input#account,
input#appearance,
input#users {
input#logout {
display: flex;
flex-direction: row;
align-items: center;
@ -157,6 +180,10 @@ input#users {
background-color: #454545;
}
input#logout:hover {
background-color: #454545;
}
.input-lightmode {
color: #000;
background-color: #E4E4E4;