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

added settings Page and components

Browse Source
This commit is contained in:
selina.mail
2023-12-06 11:51:42 +01:00
parent 45c651e853
commit 6a4a799c85
21 changed files with 1301 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
pages/assets.vue
View File

@ -4,13 +4,15 @@
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
</div>
<div id="content-body">
<ClientSearch />
<AssetTable />
<AssetTableNoClient />
<Asset />
<HardwareSpecifications />
<SoftwareSpecifications />
<NetworkSpecifications />
<ClientSearch v-if="onAssetlist || onCustomerAssetlist"/>
<AssetTable v-if="onAssetlist"/>
<AssetTableNoClient v-if="onCustomerAssetlist"/>
<Asset v-if="onAsset"/>
<HardwareSpecifications v-if="onAsset"/>
<SoftwareSpecifications v-if="onAsset"/>
<NetworkSpecifications v-if="onAsset"/>
<AssetSearch v-if="onSolutionlistAsset"/>
<AssetSolutionList v-if="onSolutionlistAsset"/>
</div>
</section>
</template>
@ -26,12 +28,20 @@ import Asset from "../components/server/Asset.vue";
import HardwareSpecifications from "../components/server/HardwareSpecifications.vue";
import SoftwareSpecifications from "../components/server/SoftwareSpecifications.vue";
import NetworkSpecifications from "../components/server/NetworkSpecifications.vue";
import AssetSearch from "../components/AssetSearch.vue";
import AssetSolutionList from "../components/server/AssetSolutionList.vue";
definePageMeta({
layout: 'default'
})
const darkMode = ref(true)
// to render the right components
const onAssetlist = ref(true)
const onCustomerAssetlist = ref(false)
const onAsset = ref(false)
const onSolutionlistAsset = ref(false)
</script>
<script>

9
pages/clients.vue
View File

@ -4,8 +4,9 @@
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Clients</h1>
</div>
<div id="content-body">
<Client />
<ClientQuickAccess />
<ClientTable v-if="onCustomerlist"/>
<Client v-if="onCustomer"/>
<ClientQuickAccess v-if="onCustomer"/>
</div>
</section>
</template>
@ -25,6 +26,10 @@ definePageMeta({
})
const darkMode = ref(true)
// to render the right components
const onCustomerlist = ref(true)
const onCustomer = ref(true)
</script>
<script>

18
pages/issueSlips.vue
View File

@ -25,12 +25,12 @@
</router-link>
</div>
<div id="content-body">
<ClientSearch />
<IssueSlipTable />
<IssueSlipTableNoClient />
<IssueSlip />
<OrderingInformation />
<Accounting />
<ClientSearch v-if="onIssueSliplist || onCustomerIssueSliplist"/>
<IssueSlipTable v-if="onIssueSliplist"/>
<IssueSlipTableNoClient v-if="onCustomerIssueSliplist"/>
<IssueSlip v-if="onIssueSlip"/>
<OrderingInformation v-if="onIssueSlip"/>
<Accounting v-if="onIssueSlip"/>
</div>
</section>
</template>
@ -51,6 +51,11 @@ definePageMeta({
})
const darkMode = ref(true)
// to render the right components
const onIssueSliplist = ref(true)
const onCustomerIssueSliplist = ref(false)
const onIssueSlip = ref(false)
</script>
<script>
@ -92,6 +97,7 @@ export default {
letter-spacing: 5%;
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
text-decoration: none;
}
#active-page-name {

16
pages/issues.vue
View File

@ -25,10 +25,10 @@
</router-link>
</div>
<div id="content-body">
<IssueTable />
<Issue />
<IssueVariants />
<IssueVariant />
<IssueTable v-if="onIssueItemList"/>
<Issue v-if="onIssueItem"/>
<IssueVariants v-if="onIssueItem"/>
<IssueVariant v-if="onIssueItemVariant"/>
</div>
</section>
</template>
@ -47,6 +47,11 @@ definePageMeta({
})
const darkMode = ref(true)
// to render the right components
const onIssueItem = ref(false)
const onIssueItemList = ref(true)
const onIssueItemVariant = ref(false)
</script>
<script>
@ -88,6 +93,7 @@ export default {
letter-spacing: 5%;
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
text-decoration: none;
}
#active-page-name {
@ -98,7 +104,7 @@ export default {
}
.button {
text-decoration: none;
text-decoration: none;
}
.h1-darkmode {

25
pages/maintenanceVisits.vue
View File

@ -25,15 +25,15 @@
</router-link>
</div>
<div id="content-body">
<ClientSearch />
<MaintenanceVisitsTemplateTable />
<MaintenanceVisitsTemplateTableNoClient />
<MaintenanceVisitsTemplate />
<TemplateChecklist />
<TemplateSearch />
<MaintenanceVisitsInstanceTable />
<MaintenanceVisitsInstance />
<InstanceChecklist />
<ClientSearch v-if="onTemplatelist || onCustomerTemplatelist"/>
<MaintenanceVisitsTemplateTable v-if="onTemplatelist"/>
<MaintenanceVisitsTemplateTableNoClient v-if="onCustomerTemplatelist"/>
<MaintenanceVisitsTemplate v-if="onTemplate"/>
<TemplateChecklist v-if="onTemplate"/>
<TemplateSearch v-if="onInstancelist"/>
<MaintenanceVisitsInstanceTable v-if="onInstancelist"/>
<MaintenanceVisitsInstance v-if="onInstance"/>
<InstanceChecklist v-if="onInstance"/>
</div>
</section>
</template>
@ -57,6 +57,13 @@ definePageMeta({
})
const darkMode = ref(true)
// to render the right components
const onTemplatelist = ref(true)
const onCustomerTemplatelist = ref(false)
const onTemplate = ref(false)
const onInstancelist = ref(false)
const onInstance = ref(false)
</script>
<script>

25
pages/productionOrders.vue
View File

@ -25,15 +25,15 @@
</router-link>
</div>
<div id="content-body">
<ClientSearch />
<ProductionOrdersTemplateTable />
<ProductionOrdersTemplateTableNoClient />
<ProductionOrdersTemplate />
<TemplateChecklist />
<TemplateSearch />
<ProductionOrdersInstanceTable />
<ProductionOrdersInstance />
<InstanceChecklist />
<ClientSearch v-if="onTemplatelist || onCustomerTemplatelist"/>
<ProductionOrdersTemplateTable v-if="onTemplatelist"/>
<ProductionOrdersTemplateTableNoClient 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"/>
</div>
</section>
</template>
@ -57,6 +57,13 @@ definePageMeta({
})
const darkMode = ref(true)
// to render the right components
const onTemplatelist = ref(true)
const onCustomerTemplatelist = ref(false)
const onTemplate = ref(false)
const onInstancelist = ref(false)
const onInstance = ref(false)
</script>
<script>

175
pages/settings.vue Normal file
View File

@ -0,0 +1,175 @@
<template>
<section id="content">
<div id="content-header">
<pre :class="[darkMode ? '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 && 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">
</div>
<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";
definePageMeta({
layout: 'default'
})
const darkMode = ref(true)
const accountSelected = ref(true)
const appearanceSelected = ref(false)
const usersSelected = ref(false)
// fuctions to change the option button
const ActivateAccount = () => {
accountSelected.value = true;
appearanceSelected.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;
};
</script>
<script>
export default {
name: "SettingsPage",
}
</script>
<style>
* {
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;
}
.pre-darkmode {
color: #fff;
}
.pre-lightmode {
color: #000;
}
#content-body {
display: flex;
flex-direction: column;
width: 100%;
gap: 1.25rem;
margin-bottom: 0.625rem;
border-radius: 0.625rem;
}
.buttonOptions {
display: flex;
flex-direction: row;
align-content: center;
}
input#account,
input#appearance,
input#users {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 12.5rem;
height: 2.5rem;
border-radius: 0.625rem;
border: none;
text-align: center;
letter-spacing: 5%;
font: 400 0.875rem/2rem Overpass, sans-serif;
margin-right: 1.25rem;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
}
.input-darkmode {
color: #fff;
background-color: #2c2c2c;
}
.selected-input-darkmode {
color: #fff;
background-color: #454545;
}
.input-lightmode {
color: #000;
background-color: #E4E4E4;
}
.selected-input-lightmode {
color: #000;
background-color: #D9D9D9;
}
.input-darkmode:hover,
.input-lightmode:hover,
.selected-input-darkmode:hover,
.selected-input-lightmode:hover {
cursor: pointer;
}
</style>

15
pages/solutions.vue
View File

@ -4,11 +4,11 @@
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
</div>
<div id="content-body">
<ClientSearch />
<SolutionTable />
<SolutionTableNoClient />
<Solution />
<SolutionChecklist />
<ClientSearch v-if="onSolutionlist || onCustomerSolutionlist"/>
<SolutionTable v-if="onSolutionlist"/>
<SolutionTableNoClient v-if="onCustomerSolutionlist"/>
<Solution v-if="onSolution"/>
<SolutionChecklist v-if="onSolution"/>
</div>
</section>
</template>
@ -28,6 +28,11 @@ definePageMeta({
})
const darkMode = ref(true)
// to render the right components
const onSolutionlist = ref(true)
const onCustomerSolutionlist = ref(false)
const onSolution = ref(false)
</script>
<script>