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

33
pages/assets.vue
View File

@ -2,13 +2,12 @@
<section id="content">
<div id="content-header">
<router-link to="/assets" class="button" id="assets-button" @click="defaultAssetPage()">
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
<h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
</router-link>
</div>
<div id="content-body">
<CustomerSearch v-if="onAssetlist" />
<AssetTable v-if="onAssetlist" />
<!-- <AssetTableNoCustomer v-if="onCustomerAssetlist" /> -->
<Asset v-if="onAsset" />
<HardwareSpecifications v-if="onAsset" />
<SoftwareSpecifications v-if="onAsset" />
@ -21,11 +20,9 @@
<script setup>
import { ref } from 'vue';
import { ref, onMounted, watch } from 'vue';
import CustomerSearch from "../components/CustomerSearch.vue";
import AssetTable from "../components/server/AssetTable.vue";
// import AssetTableNoCustomer from "../components/server/AssetTableNoCustomer.vue";
import Asset from "../components/server/Asset.vue";
import HardwareSpecifications from "../components/server/HardwareSpecifications.vue";
import SoftwareSpecifications from "../components/server/SoftwareSpecifications.vue";
@ -37,9 +34,10 @@ import { computed } from 'vue';
const store = useStore();
const onAssetlist = computed(() => store.state.onAssetlist);
// const onCustomerAssetlist = computed(() => store.state.onCustomerAssetlist);
const onAsset = computed(() => store.state.onAsset);
const onSolutionlistAsset = computed(() => store.state.onSolutionlistAsset);
const modeChanged = computed(() => store.state.updateDarkMode);
const loggedInUserDarkModeBoolean = ref('');
definePageMeta({
layout: 'default',
@ -51,7 +49,28 @@ const defaultAssetPage = () => {
store.commit('changeToAssetlist')
}
const darkMode = ref(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>

56
pages/customers.vue
View File

@ -1,23 +1,23 @@
<template>
<section id="content">
<div id="content-header">
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Customers</h1>
<h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Customers</h1>
</div>
<div id="content-body">
<CustomerTable v-if="onCustomerlist"/>
<Customer v-if="onCustomer"/>
<CustomerQuickAccess v-if="onCustomer"/>
<CustomerEmployeeList v-if="onEmployeelist"/>
<CustomerEmployee v-if="onEmployee"/>
<CustomerDepartmentList v-if="onDepartmentlist"/>
<CustomerDepartment v-if="onDepartment"/>
<CustomerDepartmentEmployeeList v-if="onDepartment"/>
<CustomerTable v-if="onCustomerlist" />
<Customer v-if="onCustomer" />
<CustomerQuickAccess v-if="onCustomer" />
<CustomerEmployeeList v-if="onEmployeelist" />
<CustomerEmployee v-if="onEmployee" />
<CustomerDepartmentList v-if="onDepartmentlist" />
<CustomerDepartment v-if="onDepartment" />
<CustomerDepartmentEmployeeList v-if="onDepartment" />
</div>
</section>
</template>
<script setup>
import { ref } from 'vue';
import { ref, onMounted, watch } from 'vue';
import CustomerTable from "../components/server/CustomerTable.vue";
import Customer from "../components/server/Customer.vue";
@ -27,13 +27,18 @@ import CustomerEmployee from "../components/server/CustomerEmployee.vue";
import CustomerDepartmentList from '~/components/server/CustomerDepartmentList.vue';
import CustomerDepartment from '~/components/server/CustomerDepartment.vue';
import CustomerDepartmentEmployeeList from '~/components/server/CustomerDepartmentEmployeeList.vue';
import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
definePageMeta({
layout: 'default',
title: 'Customers'
})
const darkMode = ref(true)
const loggedInUserDarkModeBoolean = ref('');
// to render the right components
const onCustomerlist = ref(true)
@ -42,6 +47,29 @@ const onEmployeelist = ref(true)
const onEmployee = ref(true)
const onDepartmentlist = ref(true)
const onDepartment = ref(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>
@ -49,8 +77,8 @@ export default {
name: "CustomersPage",
}
</script>
<style scoped>
* {
box-sizing: border-box;

227
pages/employees.vue
View File

@ -1,105 +1,128 @@
<template>
<section id="content">
<div id="content-header">
<router-link to="/employees" class="button" id="employees-button" @click="defaultEmployeePage()">
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Employees</h1>
</router-link>
</div>
<div id="content-body">
<EmployeeSearch v-if="onEmployeelist" />
<Employeetable v-if="onEmployeelist" />
<Employee v-if="onEmployee" />
<EmployeeGroups v-if="onEmployee" />
</div>
</section>
</template>
<script setup>
import { ref } from 'vue';
import EmployeeSearch from "../components/EmployeeSearch.vue";
import Employeetable from "../components/server/EmployeeTable.vue";
import Employee from "../components/server/Employee.vue";
import EmployeeGroups from "../components/server/EmployeeGroups.vue";
import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const onEmployeelist = computed(() => store.state.onEmployeelist);
const onEmployee = computed(() => store.state.onEmployee);
definePageMeta({
layout: 'default',
title: 'Employees'
})
const defaultEmployeePage = () => {
store.commit('resetStore');
store.commit('changeToEmployeelist')
<section id="content">
<div id="content-header">
<router-link to="/employees" class="button" id="employees-button" @click="defaultEmployeePage()">
<h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Employees</h1>
</router-link>
</div>
<div id="content-body">
<EmployeeSearch v-if="onEmployeelist" />
<Employeetable v-if="onEmployeelist" />
<Employee v-if="onEmployee" />
<EmployeeGroups v-if="onEmployee" />
</div>
</section>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import EmployeeSearch from "../components/EmployeeSearch.vue";
import Employeetable from "../components/server/EmployeeTable.vue";
import Employee from "../components/server/Employee.vue";
import EmployeeGroups from "../components/server/EmployeeGroups.vue";
import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const onEmployeelist = computed(() => store.state.onEmployeelist);
const onEmployee = computed(() => store.state.onEmployee);
const loggedInUserDarkModeBoolean = ref('');
const modeChanged = computed(() => store.state.updateDarkMode);
definePageMeta({
layout: 'default',
title: 'Employees'
})
const defaultEmployeePage = () => {
store.commit('resetStore');
store.commit('changeToEmployeelist')
}
const getSession = async () => {
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
if (loggedInUserDarkModeBool == 1) {
loggedInUserDarkModeBoolean.value = true;
} else {
loggedInUserDarkModeBoolean.value = false;
}
const darkMode = ref(true)
</script>
<script>
export default {
name: "EmployeePage",
}
function getItem(item) {
if (process.client) {
return localStorage.getItem(item)
} else {
return undefined
}
</script>
<style scoped>
* {
box-sizing: border-box;
}
#content {
display: flex;
flex-direction: column;
float: left;
justify-content: stretch;
align-items: stretch;
width: 100%;
flex-grow: 1;
gap: 0.625rem;
padding: 0 1.25rem;
}
#content-header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 3.125rem;
}
#page-name {
letter-spacing: 5%;
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
text-decoration: underline;
}
.h1-darkmode {
color: #fff;
}
.h1-lightmode {
color: #000;
}
#content-body {
display: flex;
flex-direction: column;
width: 100%;
gap: 1.25rem;
margin-bottom: 0.625rem;
border-radius: 0.625rem;
}
.button {
text-decoration: none;
}
</style>
}
watch(modeChanged, getSession)
onMounted(async () => {
await getSession();
});
</script>
<script>
export default {
name: "EmployeePage",
}
</script>
<style scoped>
* {
box-sizing: border-box;
}
#content {
display: flex;
flex-direction: column;
float: left;
justify-content: stretch;
align-items: stretch;
width: 100%;
flex-grow: 1;
gap: 0.625rem;
padding: 0 1.25rem;
}
#content-header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
height: 3.125rem;
}
#page-name {
letter-spacing: 5%;
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
text-decoration: underline;
}
.h1-darkmode {
color: #fff;
}
.h1-lightmode {
color: #000;
}
#content-body {
display: flex;
flex-direction: column;
width: 100%;
gap: 1.25rem;
margin-bottom: 0.625rem;
border-radius: 0.625rem;
}
.button {
text-decoration: none;
}
</style>

34
pages/home.vue
View File

@ -2,7 +2,7 @@
<Navigationbar />
<section id="content">
<div id="content-header">
<pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name">Home</pre>
<pre :class="[loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']" id="page-name">Home</pre>
</div>
<div id="content-body">
<Dashboard />
@ -13,18 +13,46 @@
<script setup>
import { ref } from 'vue';
import { ref, onMounted, watch } from 'vue';
import Navigationbar from "../layouts/Navigationbar.vue";
import Dashboard from "../components/Dashboard.vue";
import QuickAccess from "../components/QuickAccess.vue";
import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
definePageMeta({
layout: 'empty',
title: 'Home'
})
const darkMode = ref(true);
const loggedInUserDarkModeBoolean = ref('');
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>

46
pages/index.vue
View File

@ -1,24 +1,52 @@
<template>
<section id="content">
<div id="content-header">
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Pagename</h1>
<h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Pagename</h1>
</div>
<div id="content-body">
<section :class="[darkMode ? 'stuff-darkmode' : 'stuff-lightmode']" id="stuff"></section>
<section :class="[loggedInUserDarkModeBoolean ? 'stuff-darkmode' : 'stuff-lightmode']" id="stuff"></section>
</div>
</section>
</template>
<script setup>
import { ref } from 'vue';
import { ref, onMounted, watch } from 'vue';
import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
definePageMeta({
layout: 'default',
title: 'Test'
})
const darkMode = ref(true)
const loggedInUserDarkModeBoolean = ref('');
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>
@ -26,9 +54,9 @@ export default {
name: "Testpage",
}
</script>
<style scoped>
* {
box-sizing: border-box;

63
pages/issueItems.vue
View File

@ -2,7 +2,8 @@
<section id="content">
<div id="content-header">
<router-link to="/issueSlips" class="button" id="issueSlips-button" @click="defaultIssueSlipPage()">
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issue slips</h1>
<h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issue slips
</h1>
</router-link>
&nbsp;
&nbsp;
@ -21,23 +22,23 @@
&nbsp;
&nbsp;
<router-link to="/issueItems" class="button" id="issues-button" @click="defaultIssuePage()">
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issues</h1>
<h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issues
</h1>
</router-link>
</div>
<div id="content-body">
<IssueStateSearch v-if="onIssueItemList" />
<IssueTable v-if="onIssueItemList"/>
<Issue v-if="onIssueItem"/>
<IssueVariants v-if="onIssueItem"/>
<IssueVariant v-if="onIssueItemVariant"/>
<IssueTable v-if="onIssueItemList" />
<Issue v-if="onIssueItem" />
<IssueVariants v-if="onIssueItem" />
<IssueVariant v-if="onIssueItemVariant" />
</div>
</section>
</template>
<script setup>
import { ref } from 'vue';
<script setup>
import { ref, onMounted, watch } from 'vue';
import IssueStateSearch from "../components/IssueStateSearch.vue";
import IssueTable from "../components/server/IssueTable.vue";
import Issue from "../components/server/Issue.vue";
@ -47,6 +48,7 @@ import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
const onIssueItemList = computed(() => store.state.onIssueItemList);
const onIssueItem = computed(() => store.state.onIssueItem);
const onIssueItemVariant = computed(() => store.state.onIssueItemVariant);
@ -56,27 +58,50 @@ definePageMeta({
title: 'Issue Items'
})
const darkMode = ref(true)
const loggedInUserDarkModeBoolean = ref('');
const defaultIssueSlipPage = () => {
store.commit('resetStore');
store.commit('changeToIssueSliplist')
store.commit('resetStore');
store.commit('changeToIssueSliplist')
}
const defaultIssuePage = () => {
store.commit('resetStore');
store.commit('changeToIssueItemList')
store.commit('resetStore');
store.commit('changeToIssueItemList')
}
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>
export default {
name: "IssueItemsPage",
}
</script>
<style scoped>
* {
box-sizing: border-box;

38
pages/issueSlips.vue
View File

@ -2,7 +2,8 @@
<section id="content">
<div id="content-header">
<router-link to="/issueSlips" class="button" id="issueSlips-button" @click="defaultIssueSlipPage()">
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issue slips</h1>
<h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issue slips
</h1>
</router-link>
&nbsp;
&nbsp;
@ -21,13 +22,12 @@
&nbsp;
&nbsp;
<router-link to="/issueItems" class="button" id="issues-button" @click="defaultIssuePage()">
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issues</h1>
<h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issues</h1>
</router-link>
</div>
<div id="content-body">
<CustomerSearch v-if="onIssueSliplist" />
<IssueSlipTable v-if="onIssueSliplist" />
<!-- <IssueSlipTableNoCustomer v-if="onCustomerIssueSliplist" /> -->
<IssueSlip v-if="onIssueSlip" />
<OrderingInformation v-if="onIssueSlip" />
<Accounting v-if="onIssueSlip" />
@ -37,11 +37,9 @@
<script setup>
import { ref } from 'vue';
import { ref, onMounted, watch } from 'vue';
import CustomerSearch from "../components/CustomerSearch.vue";
import IssueSlipTable from "../components/server/IssueSlipTable.vue";
// import IssueSlipTableNoCustomer from "../components/server/IssueSlipTableNoCustomer.vue";
import IssueSlip from "../components/server/IssueSlip.vue";
import OrderingInformation from "../components/server/OrderingInformation.vue";
import Accounting from "../components/server/Accounting.vue";
@ -49,17 +47,16 @@ import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
const onIssueSliplist = computed(() => store.state.onIssueSliplist);
// const onCustomerIssueSliplist = computed(() => store.state.onCustomerIssueSliplist);
const onIssueSlip = computed(() => store.state.onIssueSlip);
const loggedInUserDarkModeBoolean = ref('');
definePageMeta({
layout: 'default',
title: 'Issue Slips'
})
const darkMode = ref(true)
const defaultIssueSlipPage = () => {
store.commit('resetStore');
store.commit('changeToIssueSliplist')
@ -69,6 +66,29 @@ const defaultIssuePage = () => {
store.commit('resetStore');
store.commit('changeToIssueItemList')
}
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>

31
pages/login.vue
View File

@ -11,7 +11,7 @@
<script setup>
import { ref } from 'vue';
import { ref, onMounted } from 'vue';
import LoginForm from "../components/LoginForm.vue";
@ -21,7 +21,28 @@ definePageMeta({
auth: false,
})
const darkMode = ref(true)
const darkMode = ref('');
const getSession = async () => {
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
if (loggedInUserDarkModeBool == 1) {
darkMode.value = true;
} else {
darkMode.value = false;
}
}
function getItem(item) {
if (process.client) {
return localStorage.getItem(item)
} else {
return undefined
}
}
onMounted(async () => {
await getSession();
});
</script>
<script>
@ -29,9 +50,9 @@ export default {
name: "LoginPage",
}
</script>
<style scoped>
* {
box-sizing: border-box;

38
pages/maintenanceVisits.vue
View File

@ -3,7 +3,8 @@
<div id="content-header">
<router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button"
@click="defaultMasterChecklistPage()">
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Maintenance visits</h1>
<h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Maintenance
visits</h1>
</router-link>
&nbsp;
&nbsp;
@ -23,7 +24,8 @@
&nbsp;
<router-link to="/productionOrders" class="button" id="productionOrders-button"
@click="defaultMasterChecklistPage()">
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Production orders</h1>
<h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Production orders
</h1>
</router-link>
</div>
<div id="content-body">
@ -42,11 +44,9 @@
<script setup>
import { ref } from 'vue';
import { ref, onMounted, watch } from 'vue';
import CustomerSearch from "../components/CustomerSearch.vue";
import MaintenanceVisitsTemplateTable from "../components/server/MaintenanceVisitsTemplateTable.vue";
// import MaintenanceVisitsTemplateTableNoCustomer from "../components/server/MaintenanceVisitsTemplateTableNoCustomer.vue";
import MaintenanceVisitsTemplate from "../components/server/MaintenanceVisitsTemplate.vue";
import TemplateChecklistMVT from "../components/server/TemplateChecklistMVT.vue";
import TemplateSearch from "../components/TemplateSearch.vue";
@ -57,23 +57,45 @@ import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
const onTemplatelist = computed(() => store.state.onTemplatelist);
// const onCustomerTemplatelist = computed(() => store.state.onCustomerTemplatelist);
const onTemplate = computed(() => store.state.onTemplate);
const onInstancelist = computed(() => store.state.onInstancelist);
const onInstance = computed(() => store.state.onInstance);
const loggedInUserDarkModeBoolean = ref('');
definePageMeta({
layout: 'default',
title: 'Maintenance Visits'
})
const darkMode = ref(true)
const defaultMasterChecklistPage = () => {
store.commit('resetStore');
store.commit('changeToTemplatelist')
}
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>

37
pages/productionOrders.vue
View File

@ -3,7 +3,7 @@
<div id="content-header">
<router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button"
@click="defaultMasterChecklistPage">
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Maintenance visits</h1>
<h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Maintenance visits</h1>
</router-link>
&nbsp;
&nbsp;
@ -22,14 +22,13 @@
&nbsp;
&nbsp;
<router-link to="/productionOrders" class="button" id="productionOrders-button">
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name"
<h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name"
@click="defaultMasterChecklistPage()">Production orders</h1>
</router-link>
</div>
<div id="content-body">
<CustomerSearch v-if="onTemplatelist" />
<ProductionOrdersTemplateTable v-if="onTemplatelist" />
<!-- <ProductionOrdersTemplateTableNoCustomer v-if="onCustomerTemplatelist"/> -->
<ProductionOrdersTemplate v-if="onTemplate" />
<TemplateChecklist v-if="onTemplate" />
<TemplateSearch v-if="onInstancelist" />
@ -42,11 +41,9 @@
<script setup>
import { ref } from 'vue';
import { ref, onMounted, watch } from 'vue';
import CustomerSearch from "../components/CustomerSearch.vue";
import ProductionOrdersTemplateTable from "../components/server/ProductionOrdersTemplateTable.vue";
// import ProductionOrdersTemplateTableNoCustomer from "../components/server/ProductionOrdersTemplateTableNoCustomer.vue";
import ProductionOrdersTemplate from "../components/server/ProductionOrdersTemplate.vue";
import TemplateChecklist from "../components/server/TemplateChecklist.vue";
import TemplateSearch from "../components/TemplateSearch.vue";
@ -57,23 +54,45 @@ import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
const onTemplatelist = computed(() => store.state.onTemplatelist);
// const onCustomerTemplatelist = computed(() => store.state.onCustomerTemplatelist);
const onTemplate = computed(() => store.state.onTemplate);
const onInstancelist = computed(() => store.state.onInstancelist);
const onInstance = computed(() => store.state.onInstance);
const loggedInUserDarkModeBoolean = ref('');
definePageMeta({
layout: 'default',
title: 'Production Orders'
})
const darkMode = ref(true)
const defaultMasterChecklistPage = () => {
store.commit('resetStore');
store.commit('changeToTemplatelist')
}
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>

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>

33
pages/solutions.vue
View File

@ -2,13 +2,12 @@
<section id="content">
<div id="content-header">
<router-link to="/solutions" class="button" id="solutions-button" @click="defaultSolutionPage()">
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
<h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
</router-link>
</div>
<div id="content-body">
<CustomerSearch v-if="onSolutionlist" />
<SolutionTable v-if="onSolutionlist" />
<!-- <SolutionTableNoCustomer v-if="onCustomerSolutionlist" /> -->
<Solution v-if="onSolution" />
<SolutionChecklist v-if="onSolution" />
</div>
@ -16,20 +15,19 @@
</template>
<script setup>
import { ref } from 'vue';
import { ref, onMounted, watch } from 'vue';
import CustomerSearch from "../components/CustomerSearch.vue";
import SolutionTable from "../components/server/SolutionTable.vue";
// import SolutionTableNoCustomer from "../components/server/SolutionTableNoCustomer.vue";
import Solution from "../components/server/Solution.vue";
import SolutionChecklist from "../components/server/SolutionChecklist.vue";
import { useStore } from 'vuex';
import { computed } from 'vue';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
const onSolutionlist = computed(() => store.state.onSolutionlist);
// const onCustomerSolutionlist = computed(() => store.state.onCustomerSolutionlist);
const onSolution = computed(() => store.state.onSolution);
const loggedInUserDarkModeBoolean = ref('');
definePageMeta({
layout: 'default',
@ -41,7 +39,28 @@ const defaultSolutionPage = () => {
store.commit('changeToSolutionlist')
}
const darkMode = ref(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>