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

addded single asset

Browse Source
This commit is contained in:
selina.mail
2024-02-16 15:53:27 +01:00
parent e900ff4777
commit e18c605c8c
34 changed files with 972 additions and 1749 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
components/server/Accounting.vue
View File

@ -3,96 +3,98 @@
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="accounting">Accounting: <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="accounting">Accounting:
<div class="asset-data"> <div class="asset-data">
<table class="data-table" id="asset-table-no-client"> <table class="data-table" id="asset-table-no-client">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['Action', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']"> <th
Action</th> :class="['Action', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
<th Action</th>
:class="['Date', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']"> <th
Date</th> :class="['Date', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th> Date</th>
</tr> <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
<tr :class="['table-row', darkMode ? 'first-tr-darkmode' : 'first-tr-lightmode']" id="row-1"> </tr>
<td <tr :class="['table-row', darkMode ? 'first-tr-darkmode' : 'first-tr-lightmode']" id="row-1">
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']"> <td
Supplier request</td> :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
<td Supplier request</td>
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']"> <td
...</td> :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> </tr>
<td <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']"> <td
Supplier offer</td> :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
<td Supplier offer</td>
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']"> <td
...</td> :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> </tr>
<td <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']"> <td
Client offer</td> :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
<td Client offer</td>
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']"> <td
...</td> :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> </tr>
<td <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']"> <td
Client order</td> :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
<td Client order</td>
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']"> <td
...</td> :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> </tr>
<td <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']"> <td
Supplier order</td> :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
<td Supplier order</td>
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']"> <td
...</td> :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> </tr>
<td <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']"> <td
Ingress</td> :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
<td Ingress</td>
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']"> <td
...</td> :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> </tr>
<td <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']"> <td
Egress</td> :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
<td Egress</td>
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']"> <td
...</td> :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
<tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-2"> </tr>
<td <tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-2">
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']"> <td
Ingress bill</td> :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
<td Ingress bill</td>
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']"> <td
...</td> :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
<tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-1"> </tr>
<td <tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-1">
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']"> <td
Egress bill</td> :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
<td Egress bill</td>
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']"> <td
...</td> :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</div> </div>
@ -257,4 +259,5 @@ tr#row-2 {
.Comments { .Comments {
width: 40%; width: 40%;
}</style> }
</style>

78
components/server/Asset.vue
View File

@ -53,8 +53,8 @@
<div class="additional"> <div class="additional">
<div class="description"> <div class="description">
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3> <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
<pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" <input v-if="!editable" v-model="item.description"
id="description">{{ item.description }}</pre> :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
<input v-if="editable" v-model="item.description" <input v-if="editable" v-model="item.description"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description"> :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
</div> </div>
@ -62,8 +62,8 @@
<div class="additional"> <div class="additional">
<div class="notes"> <div class="notes">
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3> <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
<pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" <input v-if="!editable" v-model="item.notes"
id="notes">{{ item.notes }}</pre> :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
<input v-if="editable" v-model="item.notes" <input v-if="editable" v-model="item.notes"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes"> :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
</div> </div>
@ -84,11 +84,10 @@ const item = ref({});
// get config item from id // get config item from id
const getItemById = async () => { const getItemById = async () => {
// later itemIndex from route params console.log(this.chosenAssetId)
let itemIndex = 9;
try { try {
const response = await Axios.get( const response = await Axios.get(
`https://${serversideConfig.url}:3000/api/getConfigItem/${itemIndex}` `https://${serversideConfig.url}:3000/api/getConfigItem/${chosenAssetId}`
); );
item.value = response.data; item.value = response.data;
} catch (err) { } catch (err) {
@ -96,6 +95,63 @@ const getItemById = async () => {
} }
} }
//update data
const updateConfigItem = async () => {
if (item.assetName.trim() === "") {
alert("Please add a config item name!");
return;
} else {
var counter = 0;
//later check if ci already exists
// for (let key in item.value) {
// if (this.configItems[key].assetName === this.item.assetName) {
// counter += 1;
// }
// }
if (counter == 1) {
alert("This asset name already exists. Please choose an unique asset name or modify respectively delete the old one!");
return;
}
try {
await Axios.put(
`https://${serversideConfig.url}:3000/api/updateConfigItem/${itemIndex}`,
{
primaryID: item.primaryID,
assetName: item.assetName,
customerID: item.customerID,
customer: item.customer,
location: item.location,
remoteLocation: item.remoteLocation,
type: item.type,
description: item.description,
notes: item.notes,
state: item.state,
lastView: item.lastView,
user: item.user,
hardwareBool: item.hardwareBool,
model: item.model,
serialnumber: item.serialnumber,
CPU: item.CPU,
RAM: item.RAM,
storageConfiguration: item.storageConfiguration,
miscellaneous: item.miscellaneous,
softwareBool: item.softwareBool,
software: item.software,
version: item.version,
licence: item.licence,
networkBool: item.networkBool,
IPv4: item.IPv4,
IPv6: item.IPv6,
MAC: item.MAC,
subnetmask: item.subnetmask,
}
);
} catch (err) {
console.log(err);
}
}
}
onMounted(() => { onMounted(() => {
getItemById(); getItemById();
// console.log(editable.value) // console.log(editable.value)
@ -109,6 +165,9 @@ export default {
computed: { computed: {
editable() { editable() {
return this.$store.state.assetEditable return this.$store.state.assetEditable
},
chosenAssetId() {
return this.$store.state.chosenAssetId
} }
}, },
} }
@ -209,7 +268,7 @@ export default {
.data { .data {
display: flex; display: flex;
flex-direction: row; overflow-x: auto;
align-items: flex-start; align-items: flex-start;
padding: 0 0.625rem; padding: 0 0.625rem;
border-radius: 0.3125rem; border-radius: 0.3125rem;
@ -231,6 +290,9 @@ export default {
.data#notes, .data#notes,
.data#description { .data#description {
align-self: stretch; align-self: stretch;
/* width: 45%; */
scrollbar-width: none;
overflow-x: auto;
} }
.asset-data { .asset-data {

30
components/server/AssetSolutionList.vue
View File

@ -2,18 +2,21 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
<table class="data-table" id="solution-checkklist"> <table class="data-table" id="solution-checkklist">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['Solution', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']"> <th
Solution</th> :class="['Solution', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']">
<th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode']">Type</th> Solution</th>
</tr> <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode']">Type</th>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> </tr>
<td <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['Solution', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']"> <td
...</td> :class="['Solution', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']">
<td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>
@ -168,4 +171,5 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
}</style> }
</style>

85
components/server/AssetTable.vue
View File

@ -1,42 +1,48 @@
<template> <template>
<div v-if="configItemList.length > 0" :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
<table class="data-table" id="asset-table"> <table class="data-table" id="asset-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']"> <th
Client</th> :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
<th Client</th>
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> <th
Name</th> :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<th Name</th>
:class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']"> <th
Type</th> :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
<th Type</th>
:class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']"> <th
State</th> :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th> State</th>
</tr> <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
<tr v-for="item in configItemList" :key="item.primaryID" </tr>
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"> <tr v-for="item in configItemList" :key="item.primaryID"
<td :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']">
:class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']"> <td
{{ item.customer }} :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
</td> {{ item.customer }}
<td </td>
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> <td
<router-link to="/solutions" class="button" :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']"> {{ <!-- <router-link to="/assets" class="button"
item.assetName }} </router-link> :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" > {{
</td> item.assetName }} </router-link> -->
<td <nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
:class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']"> @click="goToChosenAsset(item.primaryID)">
{{ item.type }}</td> {{ item.assetName }}
<td </nuxt-link>
:class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']"> </td>
{{ item.state }}</td> <td
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ item.user }}</td> :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
</tr> {{ item.type }}</td>
<td
:class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
{{ item.state }}</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ item.user }}</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>
@ -67,6 +73,13 @@ onMounted(async () => {
<script> <script>
export default { export default {
name: "AssetTable", name: "AssetTable",
methods: {
// switch to chosen Asset page
goToChosenAsset(id) {
this.$store.commit('toggleEditableAsset', id)
this.$store.commit('changeToAsset')
}
}
}; };
</script> </script>

50
components/server/AssetTableNoClient.vue
View File

@ -2,30 +2,32 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets:</div>
<table class="data-table" id="asset-table-no-client"> <table class="data-table" id="asset-table-no-client">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> <th
Name</th> :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<th Name</th>
:class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']"> <th
Type</th> :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
<th Type</th>
:class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']"> <th
State</th> :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th> State</th>
</tr> <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> </tr>
<td <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> <td
...</td> :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<td ...</td>
:class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']"> <td
...</td> :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
<td ...</td>
:class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']"> <td
...</td> :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>

36
components/server/ClientTable.vue
View File

@ -1,20 +1,25 @@
<template> <template>
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<table class="data-table" id="client-table"> <table class="data-table" id="client-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
</th> <th
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> ID
Name</th> </th>
</tr> <th
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']"> Name</th>
...</td> </tr>
<td <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> <td
...</td> :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
</tr> ...</td>
<td
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
...</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>
@ -126,5 +131,4 @@ th {
.Name { .Name {
width: 60%; width: 60%;
} }</style>
</style>

9
components/server/HardwareSpecifications.vue
View File

@ -39,8 +39,9 @@
<div class="additional"> <div class="additional">
<div class="storage-configuration"> <div class="storage-configuration">
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Storage configuration:</h3> <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Storage configuration:</h3>
<pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" <input v-if="!editable" v-model="item.storageConfiguration"
id="storage-configuration">{{ item.storageConfiguration }}</pre> :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"
id="storage-configuration">
<input v-if="editable" v-model="item.storageConfiguration" <input v-if="editable" v-model="item.storageConfiguration"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"
id="storage-configuration"> id="storage-configuration">
@ -49,8 +50,8 @@
<div class="additional"> <div class="additional">
<div class="miscellaneous"> <div class="miscellaneous">
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Miscellaneous:</h3> <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Miscellaneous:</h3>
<pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" <input v-if="!editable" v-model="item.miscellaneous"
id="miscellaneous">{{ item.miscellaneous }}</pre> :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">
<input v-if="editable" v-model="item.miscellaneous" <input v-if="editable" v-model="item.miscellaneous"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous"> :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">
</div> </div>

64
components/server/InstanceChecklist.vue
View File

@ -2,37 +2,39 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
<table class="data-table" id="instance-checklist"> <table class="data-table" id="instance-checklist">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']"> <th
Step</th> :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
<th Step</th>
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']"> <th
Asset</th> :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
<th Asset</th>
:class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']"> <th
Task</th> :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
<th Task</th>
:class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']"> <th
Comments</th> :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
<th :class="['Done', darkMode ? 'th-darkmode' : 'th-lightmode']">Done</th> Comments</th>
</tr> <th :class="['Done', darkMode ? 'th-darkmode' : 'th-lightmode']">Done</th>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> </tr>
<td <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']"> <td
...</td> :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
<td ...</td>
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']"> <td
...</td> :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
<td ...</td>
:class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']"> <td
...</td> :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
<td ...</td>
:class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']"> <td
...</td> :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
<td :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox" ...</td>
:class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td> <td :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
</tr> :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>

66
components/server/IssueSlipTable.vue
View File

@ -2,35 +2,40 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
<table class="data-table" id="asset-table"> <table class="data-table" id="asset-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']"> <th
Client</th> :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID Client</th>
</th> <th
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
:class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']"> ID
Ticket No.</th> </th>
<th <th
:class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']"> :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
Creation Date</th> Ticket No.</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th> <th
</tr> :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
<tr v-for="issueSlip in issueSlips" :key="issueSlip.primaryID" Creation Date</th>
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
<td </tr>
:class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']"> <tr v-for="issueSlip in issueSlips" :key="issueSlip.primaryID"
{{ issueSlip.customer }}</td> :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']"> <td
{{ issueSlip.primaryID }}</td> :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
<td {{ issueSlip.customer }}</td>
:class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']"> <td
{{ issueSlip.ticketNo }}</td> :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
<td {{ issueSlip.primaryID }}</td>
:class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']"> <td
{{ issueSlip.creationDate }}</td> :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ issueSlip.user }}</td> {{ issueSlip.ticketNo }}</td>
</tr> <td
:class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
{{ issueSlip.creationDate }}</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ issueSlip.user }}</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>
@ -213,5 +218,4 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
} }</style>
</style>

49
components/server/IssueSlipTableNoClient.vue
View File

@ -2,28 +2,33 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issue slip:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issue slip:</div>
<table class="data-table" id="asset-table"> <table class="data-table" id="asset-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
</th> <th
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
:class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']"> ID
Ticket No.</th> </th>
<th <th
:class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']"> :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
Creation Date</th> Ticket No.</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th> <th
</tr> :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> Creation Date</th>
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']"> <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
...</td> </tr>
<td <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']"> <td
...</td> :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
<td ...</td>
:class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']"> <td
...</td> :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td
:class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>

52
components/server/IssueTable.vue
View File

@ -2,31 +2,33 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issues:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issues:</div>
<table class="data-table" id="asset-table"> <table class="data-table" id="asset-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> <th
Name</th> :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<th Name</th>
:class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']"> <th
Type</th> :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
<th Type</th>
:class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']"> <th
State</th> :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
<th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode']">Amount</th> State</th>
</tr> <th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode']">Amount</th>
<tr v-for="issue in issues" :key="issue.primaryID" </tr>
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <tr v-for="issue in issues" :key="issue.primaryID"
<td :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> <td
{{ issue.name }}</td> :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<td {{ issue.name }}</td>
:class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']"> <td
{{ issue.type }}</td> :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
<td {{ issue.type }}</td>
:class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']"> <td
{{ issue.state }}</td> :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
<td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ issue.amount }}</td> {{ issue.state }}</td>
</tr> <td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ issue.amount }}</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>

65
components/server/IssueVariants.vue
View File

@ -2,36 +2,38 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Variants:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Variants:</div>
<table class="data-table" id="issue-variants-table"> <table class="data-table" id="issue-variants-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> <th
Name</th> :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<th Name</th>
:class="['Properties', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']"> <th
Properties</th> :class="['Properties', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
<th Properties</th>
:class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']"> <th
State</th> :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
<th State</th>
:class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']"> <th
Amount</th> :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
<th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode']">Price</th> Amount</th>
</tr> <th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode']">Price</th>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> </tr>
<td <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> <td
...</td> :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<td ...</td>
:class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']"> <td
...</td> :class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
<td ...</td>
:class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']"> <td
...</td> :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
<td ...</td>
:class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']"> <td
...</td> :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
<td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>
@ -198,4 +200,5 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
}</style> }
</style>

72
components/server/MaintenanceVisitsInstanceTable.vue
View File

@ -2,40 +2,44 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances:</div>
<table class="data-table" name="maintenance-visits-instance-table"> <table class="data-table" name="maintenance-visits-instance-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']"> <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
ID</th> <th
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
:class="['MaintenanceType', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']"> ID</th>
Maintenance type</th> <th
<th :class="['MaintenanceType', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
:class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']"> Maintenance type</th>
State</th> <th
<th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
:class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']"> State</th>
Creation date</th> <th
<th :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
:class="['CompletionDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']"> Creation date</th>
Completion date</th> <th
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th> :class="['CompletionDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
</tr> Completion date</th>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']"> </tr>
...</td> <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td <td
:class="['MaintenanceType', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']"> :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
...</td> ...</td>
<td <td
:class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']"> :class="['MaintenanceType', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
...</td> ...</td>
<td <td
:class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']"> :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
...</td> ...</td>
<td <td
:class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']"> :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
...</td> ...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> <td
</tr> :class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>

66
components/server/MaintenanceVisitsTemplateTable.vue
View File

@ -2,35 +2,40 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
<table class="data-table" name="maintenance-visits-template-table"> <table class="data-table" name="maintenance-visits-template-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']"> <th
Client</th> :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
<th Client</th>
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> <th
Name</th> :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID Name</th>
</th> <th
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
:class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']"> ID
Type</th> </th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th> <th
</tr> :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
<tr v-for="template in maintenanceVisitTemplates" :key="template.checklistID" Type</th>
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
<td </tr>
:class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']"> <tr v-for="template in maintenanceVisitTemplates" :key="template.checklistID"
{{ template.customer }}</td> :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td <td
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
{{ template.name }}</td> {{ template.customer }}</td>
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']"> <td
{{ template.checklistID }}</td> :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<td {{ template.name }}</td>
:class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']"> <td
{{ template.type }}</td> :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ template.user }}</td> {{ template.checklistID }}</td>
</tr> <td
:class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
{{ template.type }}</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ template.user }}</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>
@ -215,5 +220,4 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
} }</style>
</style>

52
components/server/MaintenanceVisitsTemplateTableNoClient.vue
View File

@ -2,28 +2,33 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
<table class="data-table" id="maintenance-visits-templat-table-no-client"> <table class="data-table" id="maintenance-visits-templat-table-no-client">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> <th
Name</th> :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID Name</th>
</th> <th
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
:class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']"> ID
Type</th> </th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th> <th
</tr> :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> Type</th>
<td <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> </tr>
...</td> <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']"> <td
...</td> :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<td ...</td>
:class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']"> <td
...</td> :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td
:class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>
@ -179,5 +184,4 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
} }</style>
</style>

50
components/server/OrderingInformation.vue
View File

@ -3,30 +3,32 @@
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="ordering">Ordering information: <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="ordering">Ordering information:
<div class="asset-data"> <div class="asset-data">
<table class="data-table" id="asset-table-no-client"> <table class="data-table" id="asset-table-no-client">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['Article', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']"> <th
Article</th> :class="['Article', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
<th Article</th>
:class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']"> <th
Amount</th> :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
<th Amount</th>
:class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']"> <th
Price</th> :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th> Price</th>
</tr> <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> </tr>
<td <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']"> <td
...</td> :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
<td ...</td>
:class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']"> <td
...</td> :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
<td ...</td>
:class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']"> <td
...</td> :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</div> </div>

84
components/server/ProductionOrdersInstanceTable.vue
View File

@ -2,46 +2,50 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances:</div>
<table class="data-table" name="production-orders-instance-table"> <table class="data-table" name="production-orders-instance-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']"> <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
ID</th> <th
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
:class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']"> ID</th>
Ticket No.</th> <th
<th :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']"> Ticket No.</th>
Asset</th> <th
<th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
:class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']"> Asset</th>
State</th> <th
<th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
:class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']"> State</th>
Creation date</th> <th
<th :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
:class="['CompletionDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']"> Creation date</th>
Completion date</th> <th
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th> :class="['CompletionDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
</tr> Completion date</th>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']"> </tr>
...</td> <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td <td
:class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']"> :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
...</td> ...</td>
<td <td
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']"> :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
...</td> ...</td>
<td <td
:class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']"> :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
...</td> ...</td>
<td <td
:class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']"> :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
...</td> ...</td>
<td <td
:class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']"> :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
...</td> ...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> <td
</tr> :class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>

54
components/server/ProductionOrdersTemplateTable.vue
View File

@ -2,29 +2,34 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
<table class="data-table" name="production-orders-template-table"> <table class="data-table" name="production-orders-template-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']"> <th
Client</th> :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
<th Client</th>
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> <th
Name</th> :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID Name</th>
</th> <th
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th> :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
</tr> ID
<tr v-for="template in productionOrderTemplates" :key="template.templateID" </th>
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
<td </tr>
:class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']"> <tr v-for="template in productionOrderTemplates" :key="template.templateID"
{{ template.customer }}</td> :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td <td
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
{{ template.name }}</td> {{ template.customer }}</td>
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']"> <td
{{ template.templateID }}</td> :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ template.user }}</td> {{ template.name }}</td>
</tr> <td
:class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
{{ template.templateID }}</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ template.user }}</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>
@ -196,5 +201,4 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
} }</style>
</style>

40
components/server/ProductionOrdersTemplateTableNoClient.vue
View File

@ -2,22 +2,27 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
<table class="data-table" id="production-orders-template-table-no-client"> <table class="data-table" id="production-orders-template-table-no-client">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> <th
Name</th> :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID Name</th>
</th> <th
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th> :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
</tr> ID
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> </th>
<td <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> </tr>
...</td> <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']"> <td
...</td> :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td
:class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>
@ -160,5 +165,4 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
} }</style>
</style>

41
components/server/SoftwareSpecifications.vue
View File

@ -3,24 +3,26 @@
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications: <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications:
<div class="asset-data"> <div class="asset-data">
<table class="data-table" id="asset-table-no-client"> <table class="data-table" id="asset-table-no-client">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']"> <th
Software</th> :class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
<th Software</th>
:class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']"> <th
Version</th> :class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
<th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th> Version</th>
</tr> <th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> </tr>
<td <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']"> <td
{{ item.software }}</td> :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
<td {{ item.software }}</td>
:class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']"> <td
{{ item.version }}</td> :class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
<td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ item.license }}</td> {{ item.version }}</td>
</tr> <td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ item.license }}</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</div> </div>
@ -201,4 +203,5 @@ th {
.License { .License {
width: 25%; width: 25%;
}</style> }
</style>

53
components/server/SolutionChecklist.vue
View File

@ -2,30 +2,32 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
<table class="data-table" id="solution-checkklist"> <table class="data-table" id="solution-checkklist">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']"> <th
Step</th> :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
<th Step</th>
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']"> <th
Asset</th> :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
<th Asset</th>
:class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']"> <th
Task</th> :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th> Task</th>
</tr> <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> </tr>
<td <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']"> <td
...</td> :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
<td ...</td>
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']"> <td
...</td> :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
<td ...</td>
:class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']"> <td
...</td> :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>
@ -180,4 +182,5 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
}</style> }
</style>

64
components/server/SolutionTable.vue
View File

@ -2,37 +2,39 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
<table class="data-table" id="solution-table"> <table class="data-table" id="solution-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']"> <th
Client</th> :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
<th Client</th>
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> <th
Name</th> :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<th Name</th>
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']"> <th
Asset</th> :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
<th Asset</th>
:class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']"> <th
Type</th> :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th> Type</th>
</tr> <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
<tr v-for="sol in solutions" :key="sol.primaryID" </tr>
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <tr v-for="sol in solutions" :key="sol.primaryID"
<td :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']"> <td
{{ sol.customer }}</td> :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
<td {{ sol.customer }}</td>
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> <td
{{ sol.solutionName }}</td> :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<td {{ sol.solutionName }}</td>
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']"> <td
{{ sol.assetName }}</td> :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
<td {{ sol.assetName }}</td>
:class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']"> <td
{{ sol.type }}</td> :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ sol.user }}</td> {{ sol.type }}</td>
</tr> <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ sol.user }}</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>

53
components/server/SolutionTableNoClient.vue
View File

@ -2,30 +2,32 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
<table class="data-table" id="solution-table"> <table class="data-table" id="solution-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> <th
Name</th> :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<th Name</th>
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']"> <th
Asset</th> :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
<th Asset</th>
:class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']"> <th
Type</th> :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th> Type</th>
</tr> <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> </tr>
<td <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']"> <td
...</td> :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<td ...</td>
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']"> <td
...</td> :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
<td ...</td>
:class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']"> <td
...</td> :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>
@ -180,4 +182,5 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
}</style> }
</style>

53
components/server/TemplateChecklist.vue
View File

@ -2,30 +2,32 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
<table class="data-table" id="template-checkklist"> <table class="data-table" id="template-checkklist">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']"> <th
Step</th> :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
<th Step</th>
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']"> <th
Asset</th> :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
<th Asset</th>
:class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']"> <th
Task</th> :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th> Task</th>
</tr> <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> </tr>
<td <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']"> <td
...</td> :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
<td ...</td>
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']"> <td
...</td> :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
<td ...</td>
:class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']"> <td
...</td> :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> ...</td>
</tr> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>
@ -180,4 +182,5 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
}</style> }
</style>

70
components/server/UserRightsList.vue
View File

@ -2,40 +2,42 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']"> <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Rights:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Rights:</div>
<table class="data-table" id="user-rights-list"> <table class="data-table" id="user-rights-list">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head"> <tbody>
<th <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
:class="['User', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']"> <th
User</th> :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']">
<th User</th>
:class="['Admin', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']"> <th
Admin</th> :class="['Admin', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']">
<th Admin</th>
:class="['Edit-Delete', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']"> <th
Edit/Delete</th> :class="['Edit-Delete', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']">
<th Edit/Delete</th>
:class="['Create', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']"> <th
Create</th> :class="['Create', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
<th :class="['View', darkMode ? 'th-darkmode' : 'th-lightmode']">View</th> Create</th>
</tr> <th :class="['View', darkMode ? 'th-darkmode' : 'th-lightmode']">View</th>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> </tr>
<td <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
:class="['User', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']"> <td
...</td> :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']">
<td ...</td>
:class="['Admin', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']"> <td
<input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /> :class="['Admin', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']">
</td> <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
<td </td>
:class="['Edit-Delete', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']"> <td
<input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /> :class="['Edit-Delete', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']">
</td> <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
<td </td>
:class="['Create', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']"> <td
<input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /> :class="['Create', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
</td> <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
<td :class="['View', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox" </td>
:class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td> <td :class="['View', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
</tr> :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>

974
documentation/.$Datenbankmodell.drawio.dtmp
View File

File diff suppressed because one or more lines are too long

6
documentation/Datenbankmodell.drawio
View File

@ -1,6 +1,6 @@
<mxfile host="Electron" modified="2024-02-07T11:30:31.940Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="z1KF05z3GuS1vaAA62Fc" version="22.0.3" type="device" pages="2"> <mxfile host="Electron" modified="2024-02-14T10:28:35.536Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="_zOGEdVgp7g5JHBy-mYE" version="22.0.3" type="device" pages="2">
<diagram name="Seite-1" id="VLuSDTVFFHJCdRpH-1WC"> <diagram name="Seite-1" id="VLuSDTVFFHJCdRpH-1WC">
<mxGraphModel dx="240" dy="2842" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0"> <mxGraphModel dx="393" dy="2849" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
<root> <root>
<mxCell id="0" /> <mxCell id="0" />
<mxCell id="1" parent="0" /> <mxCell id="1" parent="0" />
@ -130,7 +130,7 @@
<mxCell id="DauqCNUrC7Z9yIe88X-r-63" value="version" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1"> <mxCell id="DauqCNUrC7Z9yIe88X-r-63" value="version" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
<mxGeometry y="660" width="140" height="30" as="geometry" /> <mxGeometry y="660" width="140" height="30" as="geometry" />
</mxCell> </mxCell>
<mxCell id="-qW6OXXOOqjT1X6LnSAE-1" value="license" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="DauqCNUrC7Z9yIe88X-r-29"> <mxCell id="-qW6OXXOOqjT1X6LnSAE-1" value="license" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
<mxGeometry y="690" width="140" height="30" as="geometry" /> <mxGeometry y="690" width="140" height="30" as="geometry" />
</mxCell> </mxCell>
<mxCell id="qbUp6gtjYndA0fy5zK6_-1" value="networkBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1"> <mxCell id="qbUp6gtjYndA0fy5zK6_-1" value="networkBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">

2
layouts/Actionbar.vue
View File

@ -4,7 +4,7 @@
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
@click="toggleActionbar"> @click="toggleActionbar">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" /> src="../icons/actionbar-icons/Indicator-Icon-Opened.svg"/>
</div> </div>
<nav class="actions"> <nav class="actions">
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search"> <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search">

12
layouts/Navigationbar.vue
View File

@ -13,14 +13,14 @@
</div> </div>
<div class="menus"> <div class="menus">
<nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']"> <nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
<router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" <nuxt-link to="/home" class="button" @click="defaultAssetPage()"
id="home-button"> :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
<div class="icon" id="home-icon"> <div class="icon" id="home-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Home-Icon.svg" /> src="../icons/navbar-icons/Home-Icon.svg" />
</div> </div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</span> <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</span>
</router-link> </nuxt-link>
</nav> </nav>
<nav id="site-menu"> <nav id="site-menu">
<router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
@ -85,6 +85,12 @@ const ToggleSidebar = () => {
<script> <script>
export default { export default {
name: "Navigationbar", name: "Navigationbar",
methods: {
defaultAssetPage() {
this.$store.commit('resetChosenAsset')
this.$store.commit('changeToAssetlist')
}
}
} }
</script> </script>

41
pages/assets.vue
View File

@ -4,15 +4,15 @@
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1> <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
</div> </div>
<div id="content-body"> <div id="content-body">
<ClientSearch v-if="onAssetlist || onCustomerAssetlist"/> <ClientSearch v-if="onAssetlist || onCustomerAssetlist" />
<AssetTable v-if="onAssetlist"/> <AssetTable v-if="onAssetlist" />
<AssetTableNoClient v-if="onCustomerAssetlist"/> <AssetTableNoClient v-if="onCustomerAssetlist" />
<Asset v-if="onAsset"/> <Asset v-if="onAsset" />
<HardwareSpecifications v-if="onAsset"/> <HardwareSpecifications v-if="onAsset" />
<SoftwareSpecifications v-if="onAsset"/> <SoftwareSpecifications v-if="onAsset" />
<NetworkSpecifications v-if="onAsset"/> <NetworkSpecifications v-if="onAsset" />
<AssetSearch v-if="onSolutionlistAsset"/> <AssetSearch v-if="onSolutionlistAsset" />
<AssetSolutionList v-if="onSolutionlistAsset"/> <AssetSolutionList v-if="onSolutionlistAsset" />
</div> </div>
</section> </section>
</template> </template>
@ -36,20 +36,27 @@ definePageMeta({
}) })
const darkMode = ref(true) const darkMode = ref(true)
// to render the right components
const onAssetlist = ref(true)
const onCustomerAssetlist = ref(false)
const onAsset = ref(true)
const onSolutionlistAsset = ref(false)
</script> </script>
<script> <script>
export default { export default {
name: "AssetPage", name: "AssetPage",
computed: {
onAssetlist() {
return this.$store.state.onAssetlist
},
onCustomerAssetlist() {
return this.$store.state.onCustomerAssetlist
},
onAsset() {
return this.$store.state.onAsset
},
onSolutionlistAsset() {
return this.$store.state.onSolutionlistAsset
}
}
} }
</script> </script>
<style scoped> <style scoped>
* { * {

35
plugins/vuex.js
View File

@ -4,12 +4,47 @@ const store = createStore({
state() { state() {
return { return {
assetEditable: false, assetEditable: false,
onAssetlist: true,
onCustomerAssetlist: false,
onAsset: false,
onSolutionlistAsset: false,
chosenAssetId: -1
}; };
}, },
mutations: { mutations: {
toggleEditableAsset(state) { toggleEditableAsset(state) {
state.assetEditable = !state.assetEditable state.assetEditable = !state.assetEditable
}, },
changeToAssetlist(state) {
state.onAssetlist = true
state.onCustomerAssetlist = false
state.onAsset = false
state.onSolutionlistAsset = false
},
changeToCustomerAssetlist(state) {
state.onAssetlist = false
state.onCustomerAssetlist = true
state.onAsset = false
state.onSolutionlistAsset = false
},
changeToAsset(state) {
state.onAssetlist = false
state.onCustomerAssetlist = false
state.onAsset = true
state.onSolutionlistAsset = false
},
changeToSolutionlistAsset(state) {
state.onAssetlist = false
state.onCustomerAssetlist = false
state.onAsset = false
state.onSolutionlistAsset = true
},
setChosenAsset(state, id) {
state.chosenAssetId = id
},
resetChosenAsset(state) {
state.chosenAssetId = -1
},
}, },
}); });

65
router/index.js Normal file
View File

@ -0,0 +1,65 @@
// import { createRouter, createWebHistory } from 'vue-router';
// import HomePage from '../pages/home.vue';
// import ClientsPage from '../pages/clients.vue';
// import LoginPage from '../pages/login.vue';
// import AssetPage from '../pages/assets.vue';
// import SolutionPage from '../pages/solutions.vue';
// import IssueSlipPage from '../pages/issueSlips.vue';
// import IssuesPages from '../pages/issues.vue';
// import MaintenanceVisitsPage from '../pages/maintenanceVisits.vue';
// import ProductionOrdersPage from '../pages/productionOrders.vue';
// import SettingsPage from '../pages/settings.vue';
// const router = createRouter({
// mode: 'history',
// history: createWebHistory(),
// routes: [
// {
// name: "Asset",
// path: "/asset/:id",
// component: async () => await import('../pages/assets.vue'),
// },
// {
// path: '/login',
// component: LoginPage
// },
// {
// path: '/home',
// component: HomePage
// },
// {
// path: '/productionOrders',
// component: ProductionOrdersPage
// },
// {
// path: '/maintenanceVisits',
// component: MaintenanceVisitsPage
// },
// {
// path: '/assets',
// component: AssetPage
// },
// {
// path: '/solutions',
// component: AssetPage
// },
// {
// path: '/issueSlips',
// component: IssueSlipPage
// },
// {
// path: '/issues',
// component: IssuesPages
// },
// {
// path: '/clients',
// component: ClientsPage
// },
// {
// path: '/settings',
// component: SettingsPage
// },
// ]
// })
// export default router

63
routerFrontend/index.js
View File

@ -1,63 +0,0 @@
import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '../pages/home.vue';
import ClientsPage from '../pages/clients.vue';
import LoginPage from '../pages/login.vue';
import AssetPage from '../pages/assets.vue';
import SolutionPage from '../pages/solutions.vue';
import IssueSlipPage from '../pages/issueSlips.vue';
import IssuesPages from '../pages/issues.vue';
import MaintenanceVisitsPage from '../pages/maintenanceVisits.vue';
import ProductionOrdersPage from '../pages/productionOrders.vue';
import SettingsPage from '../pages/settings.vue';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/asset',
component: AssetPage
},
{
path: '/login',
component: LoginPage
},
{
path: '/home',
component: HomePage
},
{
path: '/productionOrders',
component: ProductionOrdersPage
},
{
path: '/maintenanceVisits',
component: MaintenanceVisitsPage
},
{
path: '/assets',
component: AssetPage
},
{
path: '/solutions',
component: SolutionPage
},
{
path: '/issueSlips',
component: IssueSlipPage
},
{
path: '/issues',
component: IssuesPages
},
{
path: '/clients',
component: ClientsPage
},
{
path: '/settings',
component: SettingsPage
},
]
})
export default router

2
server/api/login.ts
View File

@ -5,7 +5,7 @@ export default defineEventHandler(async (event) => {
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = { const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de', 'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
'Access-Control-Allow-Headers': 'origin, authorization, content-type', 'Access-Control-Allow-Headers': 'authorization, content-type',
'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE', 'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
'Access-Control-Max-Age': '86400', 'Access-Control-Max-Age': '86400',
}; };