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

78
components/server/Asset.vue
View File

@ -53,8 +53,8 @@
<div class="additional">
<div class="description">
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
<pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
id="description">{{ item.description }}</pre>
<input v-if="!editable" v-model="item.description"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
<input v-if="editable" v-model="item.description"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
</div>
@ -62,8 +62,8 @@
<div class="additional">
<div class="notes">
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
<pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
id="notes">{{ item.notes }}</pre>
<input v-if="!editable" v-model="item.notes"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
<input v-if="editable" v-model="item.notes"
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
</div>
@ -84,11 +84,10 @@ const item = ref({});
// get config item from id
const getItemById = async () => {
// later itemIndex from route params
let itemIndex = 9;
console.log(this.chosenAssetId)
try {
const response = await Axios.get(
`https://${serversideConfig.url}:3000/api/getConfigItem/${itemIndex}`
`https://${serversideConfig.url}:3000/api/getConfigItem/${chosenAssetId}`
);
item.value = response.data;
} 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(() => {
getItemById();
// console.log(editable.value)
@ -109,6 +165,9 @@ export default {
computed: {
editable() {
return this.$store.state.assetEditable
},
chosenAssetId() {
return this.$store.state.chosenAssetId
}
},
}
@ -209,7 +268,7 @@ export default {
.data {
display: flex;
flex-direction: row;
overflow-x: auto;
align-items: flex-start;
padding: 0 0.625rem;
border-radius: 0.3125rem;
@ -231,6 +290,9 @@ export default {
.data#notes,
.data#description {
align-self: stretch;
/* width: 45%; */
scrollbar-width: none;
overflow-x: auto;
}
.asset-data {

30
components/server/AssetSolutionList.vue
View File

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

85
components/server/AssetTable.vue
View File

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

50
components/server/AssetTableNoClient.vue
View File

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

36
components/server/ClientTable.vue
View File

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

9
components/server/HardwareSpecifications.vue
View File

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

64
components/server/InstanceChecklist.vue
View File

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

66
components/server/IssueSlipTable.vue
View File

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

52
components/server/IssueTable.vue
View File

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

65
components/server/IssueVariants.vue
View File

@ -2,36 +2,38 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Variants:</div>
<table class="data-table" id="issue-variants-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th
:class="['Properties', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
Properties</th>
<th
:class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
State</th>
<th
:class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
Amount</th>
<th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode']">Price</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<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="['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="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
<tbody>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th
:class="['Properties', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
Properties</th>
<th
:class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
State</th>
<th
:class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
Amount</th>
<th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode']">Price</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<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="['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="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table>
</div>
</template>
@ -198,4 +200,5 @@ th {
.label-lightmode {
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="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances:</div>
<table class="data-table" name="maintenance-visits-instance-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
ID</th>
<th
:class="['MaintenanceType', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
Maintenance type</th>
<th
:class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
State</th>
<th
:class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
Creation date</th>
<th
:class="['CompletionDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
Completion date</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<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="['MaintenanceType', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
...</td>
<td
:class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
...</td>
<td
:class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
...</td>
<td
:class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
<tbody>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
ID</th>
<th
:class="['MaintenanceType', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
Maintenance type</th>
<th
:class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
State</th>
<th
:class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
Creation date</th>
<th
:class="['CompletionDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
Completion date</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<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="['MaintenanceType', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
...</td>
<td
:class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
...</td>
<td
:class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
...</td>
<td
: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>
</div>
</template>

66
components/server/MaintenanceVisitsTemplateTable.vue
View File

@ -2,35 +2,40 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
<table class="data-table" name="maintenance-visits-template-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
Client</th>
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
</th>
<th
:class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
Type</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr v-for="template in maintenanceVisitTemplates" :key="template.checklistID"
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
:class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
{{ template.customer }}</td>
<td
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
{{ template.name }}</td>
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
{{ template.checklistID }}</td>
<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>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
Client</th>
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th
:class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
ID
</th>
<th
:class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
Type</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr v-for="template in maintenanceVisitTemplates" :key="template.checklistID"
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
:class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
{{ template.customer }}</td>
<td
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
{{ template.name }}</td>
<td
:class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
{{ template.checklistID }}</td>
<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>
</div>
</template>
@ -215,5 +220,4 @@ th {
.label-lightmode {
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="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
<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">
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
</th>
<th
:class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
Type</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
: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']">
...</td>
<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>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th
:class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
ID
</th>
<th
:class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
Type</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
: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']">
...</td>
<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>
</div>
</template>
@ -179,5 +184,4 @@ th {
.label-lightmode {
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="asset-data">
<table class="data-table" id="asset-table-no-client">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Article', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
Article</th>
<th
:class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
Amount</th>
<th
:class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
Price</th>
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<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="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
...</td>
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
<tbody>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Article', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
Article</th>
<th
:class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
Amount</th>
<th
:class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
Price</th>
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<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="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
...</td>
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table>
</div>
</div>

84
components/server/ProductionOrdersInstanceTable.vue
View File

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

54
components/server/ProductionOrdersTemplateTable.vue
View File

@ -2,29 +2,34 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
<table class="data-table" name="production-orders-template-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
Client</th>
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr v-for="template in productionOrderTemplates" :key="template.templateID"
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
:class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
{{ template.customer }}</td>
<td
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
{{ template.name }}</td>
<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>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
Client</th>
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th
:class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
ID
</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr v-for="template in productionOrderTemplates" :key="template.templateID"
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
:class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
{{ template.customer }}</td>
<td
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
{{ template.name }}</td>
<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>
</div>
</template>
@ -196,5 +201,4 @@ th {
.label-lightmode {
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="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
<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">
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
: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']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
<tbody>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th
:class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
ID
</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
: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']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table>
</div>
</template>
@ -160,5 +165,4 @@ th {
.label-lightmode {
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="asset-data">
<table class="data-table" id="asset-table-no-client">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
Software</th>
<th
:class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
Version</th>
<th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
:class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
{{ item.software }}</td>
<td
:class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
{{ item.version }}</td>
<td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ item.license }}</td>
</tr>
<tbody>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
Software</th>
<th
:class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
Version</th>
<th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
:class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
{{ item.software }}</td>
<td
:class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
{{ item.version }}</td>
<td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ item.license }}</td>
</tr>
</tbody>
</table>
</div>
</div>
@ -201,4 +203,5 @@ th {
.License {
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="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
<table class="data-table" id="solution-checkklist">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
Step</th>
<th
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
Asset</th>
<th
:class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
Task</th>
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<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="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
...</td>
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
<tbody>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
Step</th>
<th
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
Asset</th>
<th
:class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
Task</th>
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<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="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
...</td>
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table>
</div>
</template>
@ -180,4 +182,5 @@ th {
.label-lightmode {
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="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
<table class="data-table" id="solution-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
Client</th>
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
Asset</th>
<th
:class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
Type</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr v-for="sol in solutions" :key="sol.primaryID"
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
:class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
{{ sol.customer }}</td>
<td
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
{{ sol.solutionName }}</td>
<td
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
{{ sol.assetName }}</td>
<td
:class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
{{ sol.type }}</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ sol.user }}</td>
</tr>
<tbody>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
Client</th>
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
Asset</th>
<th
:class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
Type</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr v-for="sol in solutions" :key="sol.primaryID"
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
:class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
{{ sol.customer }}</td>
<td
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
{{ sol.solutionName }}</td>
<td
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
{{ sol.assetName }}</td>
<td
:class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
{{ sol.type }}</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ sol.user }}</td>
</tr>
</tbody>
</table>
</div>
</template>

53
components/server/SolutionTableNoClient.vue
View File

@ -2,30 +2,32 @@
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
<table class="data-table" id="solution-table">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
Asset</th>
<th
:class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
Type</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<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="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
<tbody>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
Asset</th>
<th
:class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
Type</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<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="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table>
</div>
</template>
@ -180,4 +182,5 @@ th {
.label-lightmode {
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="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
<table class="data-table" id="template-checkklist">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
Step</th>
<th
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
Asset</th>
<th
:class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
Task</th>
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<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="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
...</td>
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
<tbody>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
Step</th>
<th
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
Asset</th>
<th
:class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
Task</th>
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<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="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
...</td>
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table>
</div>
</template>
@ -180,4 +182,5 @@ th {
.label-lightmode {
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="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Rights:</div>
<table class="data-table" id="user-rights-list">
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['User', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']">
User</th>
<th
:class="['Admin', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']">
Admin</th>
<th
:class="['Edit-Delete', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']">
Edit/Delete</th>
<th
:class="['Create', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
Create</th>
<th :class="['View', darkMode ? 'th-darkmode' : 'th-lightmode']">View</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<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']">
<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']">
<input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
</td>
<td
:class="['Create', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
<input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
</td>
<td :class="['View', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
:class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
</tr>
<tbody>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['User', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']">
User</th>
<th
:class="['Admin', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']">
Admin</th>
<th
:class="['Edit-Delete', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']">
Edit/Delete</th>
<th
:class="['Create', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
Create</th>
<th :class="['View', darkMode ? 'th-darkmode' : 'th-lightmode']">View</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<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']">
<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']">
<input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
</td>
<td
:class="['Create', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
<input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
</td>
<td :class="['View', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
:class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
</tr>
</tbody>
</table>
</div>
</template>