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

Compare commits

base: adm_tueit:checklistPage
Branches Tags
adm_tueit:main adm_tueit:clientPages adm_tueit:MVAndPO adm_tueit:userPage adm_tueit:modularActionbar adm_tueit:AccountingPages adm_tueit:authentication adm_tueit:potInstances adm_tueit:productionOrders adm_tueit:addConfigitem adm_tueit:loginFunctionality adm_tueit:backend adm_tueit:settingsPage adm_tueit:switchToCompositionAPI adm_tueit:checklistPage adm_tueit:accounting adm_tueit:lightmode adm_tueit:otherSolutionPages adm_tueit:assetsOtherPages adm_tueit:solutionsPage adm_tueit:assetPage adm_tueit:navbar_lightmode adm_tueit:database_Model
..
compare: adm_tueit:switchToCompositionAPI
Branches Tags
adm_tueit:main adm_tueit:clientPages adm_tueit:MVAndPO adm_tueit:userPage adm_tueit:modularActionbar adm_tueit:AccountingPages adm_tueit:authentication adm_tueit:potInstances adm_tueit:productionOrders adm_tueit:addConfigitem adm_tueit:loginFunctionality adm_tueit:backend adm_tueit:settingsPage adm_tueit:switchToCompositionAPI adm_tueit:checklistPage adm_tueit:accounting adm_tueit:lightmode adm_tueit:otherSolutionPages adm_tueit:assetsOtherPages adm_tueit:solutionsPage adm_tueit:assetPage adm_tueit:navbar_lightmode adm_tueit:database_Model

2 Commits
checklistP ... switchToCo

Author SHA1 Message Date
selina.mail
de6b7e6eaa changed all files to composition API 2023-12-05 11:24:35 +01:00
selina.mail
90a86fb3af Merge pull request 'Checklist Page' (#12) from checklistPage into main 
Reviewed-on: jo.kuehner/TueIT_App#12
 2023-11-28 11:40:25 +00:00
53 changed files with 1244 additions and 1283 deletions
Expand all files Collapse all files

11
components/ClientSearch.vue
View File

@ -5,14 +5,15 @@
</section> </section>
</template> </template>
<script setup>
import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script> <script>
export default { export default {
name: "ClientSearch", name: "ClientSearch",
data() {
return {
darkMode: true,
};
},
}; };
</script> </script>

23
components/Dashboard.vue
View File

@ -14,21 +14,17 @@
</template> </template>
<script setup>
import { ref } from 'vue';
<script> const darkMode = ref(true)
export default {
name: "Dashboard",
data() {
return {
darkMode: true,
};
},
}
</script> </script>
<script>
export default {
name: "Dashboard",
};
</script>
<style scoped> <style scoped>
@ -99,4 +95,5 @@ input {
.input-lightmode { .input-lightmode {
color: #000; color: #000;
background-color: #E4E4E4; background-color: #E4E4E4;
}</style> }
</style>

20
components/LoginForm.vue
View File

@ -27,7 +27,8 @@
</label> </label>
<div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']"> <div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
<input type="text" id="password-input" placeholder="*******"> <input type="text" id="password-input" placeholder="*******">
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle" value="Show"> <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle"
value="Show">
</div> </div>
</div> </div>
</div> </div>
@ -36,20 +37,17 @@
</template> </template>
<script setup>
import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script> <script>
export default { export default {
name: "LoginForm", name: "LoginForm",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
<style scoped> <style scoped>

19
components/QuickAccess.vue
View File

@ -12,20 +12,17 @@
</template> </template>
<script> <script setup>
import { ref } from 'vue';
export default {
name: "QuickAccess",
data() {
return {
darkMode: true,
};
},
}
const darkMode = ref(true)
</script> </script>
<script>
export default {
name: "QuickAccess",
};
</script>
<style scoped> <style scoped>

151
components/TemplateSearch.vue
View File

@ -1,79 +1,82 @@
<template> <template>
<section :class="['template-search', darkMode ? 'section-darkmode' : 'section-lightmode']"> <section :class="['template-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Template:</div> <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Template:</div>
<pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name</pre> <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name</pre>
</section> </section>
</template> </template>
<script>
export default {
name: "TemplateSearch",
data() {
return {
darkMode: true,
};
},
};
</script>
<style scoped> <script setup>
.template-search { import { ref } from 'vue';
display: flex;
align-items: center; const darkMode = ref(true)
padding: 0.625em 1.875em; </script>
gap: 1.25em;
width: 30.125em; <script>
height: 3.125em; export default {
box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25); name: "TemplateSearch",
border-radius: 0.625em; };
} </script>
.section-darkmode { <style scoped>
background-color: #2c2c2c; .template-search {
} display: flex;
align-items: center;
.section-lightmode { padding: 0.625em 1.875em;
background-color: #fff; gap: 1.25em;
} width: 30.125em;
height: 3.125em;
.label { box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
width: 4.188em; border-radius: 0.625em;
height: 1.875em; }
font-family: "Overpass";
font-style: normal; .section-darkmode {
font-weight: 400; background-color: #2c2c2c;
font-size: 0.875em; }
line-height: 1.875;
letter-spacing: 0.05em; .section-lightmode {
} background-color: #fff;
}
.label-darkmode {
color: #FFFFFF; .label {
} width: 4.188em;
height: 1.875em;
.label-lightmode { font-family: "Overpass";
color: #000; font-style: normal;
} font-weight: 400;
font-size: 0.875em;
.data { line-height: 1.875;
display: flex; letter-spacing: 0.05em;
flex-direction: row; }
align-items: flex-start;
padding: 0 0.625rem; .label-darkmode {
border-radius: 0.3125rem; color: #FFFFFF;
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset; }
letter-spacing: 5%;
font: 400 0.75rem/250% Overpass, sans-serif; .label-lightmode {
} color: #000;
}
.pre-darkmode {
background-color: #212121; .data {
color: #fff; display: flex;
} flex-direction: row;
align-items: flex-start;
.pre-lightmode { padding: 0 0.625rem;
background-color: #EBEBEB; border-radius: 0.3125rem;
color: #000; box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
} letter-spacing: 5%;
</style> font: 400 0.75rem/250% Overpass, sans-serif;
}
.pre-darkmode {
background-color: #212121;
color: #fff;
}
.pre-lightmode {
background-color: #EBEBEB;
color: #000;
}
</style>

104
components/server/Accounting.vue
View File

@ -4,53 +4,93 @@
<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"> <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
<th :class="['Date', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">Date</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> <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'first-tr-darkmode' : 'first-tr-lightmode']" id="row-1"> <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
<td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">...</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> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <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
<td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">...</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> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <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
<td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">...</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> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <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
<td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">...</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> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <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
<td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">...</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> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <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
<td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">...</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> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <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
<td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">...</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> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-2"> <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
<td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">...</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> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-1"> <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
<td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">...</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> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
</table> </table>
@ -59,22 +99,17 @@
</section> </section>
</template> </template>
<script setup>
import { ref } from 'vue';
<script>
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "Accounting", name: "Accounting",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
<style scoped> <style scoped>
@ -222,5 +257,4 @@ tr#row-2 {
.Comments { .Comments {
width: 40%; width: 40%;
} }</style>
</style>

32
components/server/Asset.vue
View File

@ -50,22 +50,17 @@
</section> </section>
</template> </template>
<script setup>
import { ref } from 'vue';
<script>
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "Asset", name: "Asset",
data() { };
return {
darkMode: true,
};
},
}
</script> </script>
<style scoped> <style scoped>
@ -150,13 +145,13 @@ export default {
} }
.data-darkmode { .data-darkmode {
background-color: #212121; background-color: #212121;
color: #fff; color: #fff;
} }
.data-lightmode { .data-lightmode {
background-color: #EBEBEB; background-color: #EBEBEB;
color: #000; color: #000;
} }
.data#notes, .data#notes,
@ -207,6 +202,7 @@ export default {
.h3-lightmode { .h3-lightmode {
color: #000; color: #000;
} }
.id-type { .id-type {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -241,10 +237,10 @@ export default {
} }
.rectangle-darkmode { .rectangle-darkmode {
background-color: #212121; background-color: #212121;
} }
.rectangle-lightmode { .rectangle-lightmode {
background-color: #EBEBEB; background-color: #EBEBEB;
} }
</style> </style>

56
components/server/AssetTable.vue
View File

@ -3,39 +3,50 @@
<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"> <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
<th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th> :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
<th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th> Client</th>
<th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</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> <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td> <td
<td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td> :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
<td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td> ...</td>
<td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-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="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
</table> </table>
</div> </div>
</template> </template>
<script setup>
import { ref } from 'vue';
<script>
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "AssetTable", name: "AssetTable",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
<style scoped> <style scoped>
@ -186,5 +197,4 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
} }</style>
</style>

62
components/server/AssetTableNoClient.vue
View File

@ -3,38 +3,44 @@
<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"> <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
<th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th> :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th> 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> <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <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
<td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td> :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td> ...</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> <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
</table> </table>
</div> </div>
</template> </template>
<script setup>
import { ref } from 'vue';
<script>
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "AssetTableNoClient", name: "AssetTableNoClient",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
<style scoped> <style scoped>
.data { .data {
@ -158,14 +164,14 @@ th {
} }
.label { .label {
width: 6.0625em; width: 6.0625em;
height: 1.875em; height: 1.875em;
font-family: 'Overpass'; font-family: 'Overpass';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 1em; font-size: 1em;
line-height: 1.875em; line-height: 1.875em;
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
.label-darkmode { .label-darkmode {

242
components/server/Client.vue
View File

@ -40,7 +40,7 @@
<div class="data-field" id="city"> <div class="data-field" id="city">
<pre class="label">City:</pre> <pre class="label">City:</pre>
<pre class="data">...</pre> <pre class="data">...</pre>
</div> </div>
</div> </div>
</div> </div>
<div class="notes"> <div class="notes">
@ -51,129 +51,129 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
export default {
name: "Client",
}
</script> </script>
<script>
export default {
name: "Client",
};
</script>
<style scoped> <style scoped>
.information {
.information { display: flex;
display: flex; flex-direction: column;
flex-direction: column; align-items: flex-start;
align-items: flex-start; justify-content: center;
justify-content: center; width: 100%;
width: 100%; padding: 1.25rem 1.875rem;
padding: 1.25rem 1.875rem; border-radius: 0.625rem;
border-radius: 0.625rem; box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25); background-color: #2c2c2c;
background-color: #2c2c2c; }
}
.client-name {
align-self: stretch;
padding: 1.25rem 0;
color: #fff;
letter-spacing: 5%;
text-decoration-line: underline;
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
sans-serif;
}
.data-field {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 100%;
padding: 0 1.875rem;
gap: 1.25rem;
border-radius: 0.625rem;
}
.data-field#client-id {
padding: 0.625rem 1.875rem;
}
.data-field#street-name {
width: 70%;
}
.data-field#street-no {
width: 30%;
}
.label {
color: #fff;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
.data {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0 0.625rem;
border-radius: 0.3125rem;
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
background-color: #212121;
color: #fff;
letter-spacing: 5%;
font: 400 0.75rem/250% Overpass, sans-serif;
}
.data#notes {
align-self: stretch;
}
.client-data {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
align-self: stretch;
padding: 0 0.625rem;
}
.contact, .address { .client-name {
display: flex; align-self: stretch;
flex-direction: column; padding: 1.25rem 0;
align-items: flex-start; color: #fff;
justify-content: center; letter-spacing: 5%;
line-height: normal; text-decoration-line: underline;
width: 50%; font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
padding: 1.25rem 0.625rem; sans-serif;
border-radius: 0.3125rem; }
}
.data-field {
.area-title { display: flex;
color: #fff; flex-direction: row;
letter-spacing: 5%; align-items: center;
font: 400 0.875rem/1.875rem Overpass, sans-serif; justify-content: flex-start;
} width: 100%;
padding: 0 1.875rem;
.street-address { gap: 1.25rem;
display: flex; border-radius: 0.625rem;
flex-direction: row; }
align-items: center;
justify-content: space-between; .data-field#client-id {
align-self: stretch; padding: 0.625rem 1.875rem;
padding: 0 1.875rem 0 0; }
gap: 0.625rem;
} .data-field#street-name {
width: 70%;
.notes { }
display: flex;
flex-direction: column; .data-field#street-no {
align-items: flex-start; width: 30%;
justify-content: center; }
align-self: stretch;
padding: 0.625rem 1.875rem 0.625rem 1.25rem; .label {
} color: #fff;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
</style> }
.data {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0 0.625rem;
border-radius: 0.3125rem;
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
background-color: #212121;
color: #fff;
letter-spacing: 5%;
font: 400 0.75rem/250% Overpass, sans-serif;
}
.data#notes {
align-self: stretch;
}
.client-data {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
align-self: stretch;
padding: 0 0.625rem;
}
.contact,
.address {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
line-height: normal;
width: 50%;
padding: 1.25rem 0.625rem;
border-radius: 0.3125rem;
}
.area-title {
color: #fff;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
.street-address {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
align-self: stretch;
padding: 0 1.875rem 0 0;
gap: 0.625rem;
}
.notes {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
align-self: stretch;
padding: 0.625rem 1.875rem 0.625rem 1.25rem;
}</style>

116
components/server/ClientQuickAccess.vue
View File

@ -12,68 +12,62 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
export default {
name: "ClientQuickAccess",
}
</script> </script>
<script>
export default {
name: "Asset",
};
</script>
<style scoped> <style scoped>
.quick-access {
.quick-access { display: flex;
display: flex; flex-direction: column;
flex-direction: column; align-items: flex-start;
align-items: flex-start; justify-content: center;
justify-content: center; align-self: stretch;
align-self: stretch; width: 100%;
width: 100%; padding: 1.875rem 1.875rem 3.125rem;
padding: 1.875rem 1.875rem 3.125rem; gap: 1.25rem;
gap: 1.25rem; border-radius: 0.625rem;
border-radius: 0.625rem; box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25); background-color: #2c2c2c;
background-color: #2c2c2c; }
}
.heading {
.heading { color: #fff;
color: #fff; letter-spacing: 5%;
letter-spacing: 5%; text-decoration-line: underline;
text-decoration-line: underline; font: 400 1rem/2rem Overpass, sans-serif;
font: 400 1rem/2rem Overpass, sans-serif; }
}
.shortcuts {
.shortcuts { display: flex;
display: flex; flex-direction: row;
flex-direction: row; justify-content: space-between;
justify-content: space-between; align-content: center;
align-content: center; padding: 0.625rem 1.875rem;
padding: 0.625rem 1.875rem; gap: 2.5rem;
gap: 2.5rem; }
}
input {
input { display: flex;
display: flex; flex-direction: row;
flex-direction: row; align-items: center;
align-items: center; justify-content: center;
justify-content: center; width: 15rem;
width: 15rem; height: 4rem;
height: 4rem; border-radius: 0.625rem;
border-radius: 0.625rem; padding: 0.9375rem 1.25rem;
padding: 0.9375rem 1.25rem; border: none;
border: none; color: #fff;
color: #fff; text-align: center;
text-align: center; letter-spacing: 5%;
letter-spacing: 5%; font: 400 0.875rem/2rem Overpass, sans-serif;
font: 400 0.875rem/2rem Overpass, sans-serif; background-color: #343434;
background-color: #343434; }
} </style>
</style>

121
components/server/ClientTable.vue
View File

@ -3,7 +3,7 @@
<table class="data-table" id="client-table"> <table class="data-table" id="client-table">
<tr class="table-row" id="table-head"> <tr class="table-row" id="table-head">
<th class="ID">ID</th> <th class="ID">ID</th>
<th class="Name">Name</th> <th class="Name">Name</th>
</tr> </tr>
<tr class="table-row" id="row-1"> <tr class="table-row" id="row-1">
<td class="ID">...</td> <td class="ID">...</td>
@ -18,73 +18,74 @@
</template> </template>
<script setup>
import { ref } from 'vue';
</script>
<script> <script>
export default {
export default {
name: "ClientTable", name: "ClientTable",
};
}
</script> </script>
<style scoped> <style scoped>
.data {
.data { display: flex;
display: flex; flex-direction: column;
flex-direction: column; align-items: flex-start;
align-items: flex-start; justify-content: center;
justify-content: center; align-self: stretch;
align-self: stretch; width: 100%;
width: 100%; padding: 1.25rem 1.875rem;
padding: 1.25rem 1.875rem; gap: 1.25rem;
gap: 1.25rem; border-radius: 0.625rem;
border-radius: 0.625rem; box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25); background-color: #2c2c2c;
background-color: #2c2c2c; }
}
.data-table {
width: 100%;
padding: 0 0.625rem;
table-layout: fixed;
border-collapse: collapse;
}
.table-row { .data-table {
display: flex; width: 100%;
flex-direction: row; padding: 0 0.625rem;
height: 3.125rem; table-layout: fixed;
padding: 0.625rem; border-collapse: collapse;
gap: 0.625rem; }
border-top: 0.0625rem solid #000000;
}
#table-head {
border-top: none;
border-bottom: 0.0625rem solid #000000;
}
th, td { .table-row {
height: 1.875rem; display: flex;
padding: 0; flex-direction: row;
color: #ffffff; height: 3.125rem;
letter-spacing: 5%; padding: 0.625rem;
font: 400 0.875rem/1.875rem Overpass, sans-serif; gap: 0.625rem;
} border-top: 0.0625rem solid #000000;
th { }
font: 700 0.875rem/1.875rem Overpass, sans-serif;
} #table-head {
.ID { border-top: none;
width: 40%; border-bottom: 0.0625rem solid #000000;
border-right: 0.0625rem solid #000000; }
}
.Name { th,
width: 60%; td {
} height: 1.875rem;
padding: 0;
color: #ffffff;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
th {
font: 700 0.875rem/1.875rem Overpass, sans-serif;
}
.ID {
width: 40%;
border-right: 0.0625rem solid #000000;
}
.Name {
width: 60%;
}
</style> </style>

34
components/server/HardwareSpecifications.vue
View File

@ -27,7 +27,8 @@
<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 :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="storage-configuration">...</pre> <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
id="storage-configuration">...</pre>
</div> </div>
</div> </div>
<div class="additional"> <div class="additional">
@ -40,23 +41,19 @@
</section> </section>
</template> </template>
<script>
<script setup>
import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "HardwareSpecifications", name: "HardwareSpecifications",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
<style scoped> <style scoped>
.hardware-information { .hardware-information {
@ -122,13 +119,13 @@ export default {
} }
.data-darkmode { .data-darkmode {
background-color: #212121; background-color: #212121;
color: #fff; color: #fff;
} }
.data-lightmode { .data-lightmode {
background-color: #EBEBEB; background-color: #EBEBEB;
color: #000; color: #000;
} }
.data#miscellaneous, .data#miscellaneous,
@ -182,5 +179,4 @@ export default {
align-self: stretch; align-self: stretch;
padding: 0.625rem 1.875rem 0.625rem 1.25rem; padding: 0.625rem 1.875rem 0.625rem 1.25rem;
} }
</style> </style>

26
components/server/InstanceChecklist.vue
View File

@ -30,27 +30,24 @@
<td <td
:class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']"> :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
...</td> ...</td>
<td :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']"/></td> <td :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
:class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
</tr> </tr>
</table> </table>
</div> </div>
</template> </template>
<script setup>
import { ref } from 'vue';
<script>
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "InstanceChecklist", name: "InstanceChecklist",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
@ -211,4 +208,5 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
}</style> }
</style>

28
components/server/Issue.vue
View File

@ -33,20 +33,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "Issue", name: "Issue",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
@ -133,13 +130,13 @@ export default {
} }
.data-darkmode { .data-darkmode {
background-color: #212121; background-color: #212121;
color: #fff; color: #fff;
} }
.data-lightmode { .data-lightmode {
background-color: #EBEBEB; background-color: #EBEBEB;
color: #000; color: #000;
} }
.issue-data { .issue-data {
@ -209,5 +206,4 @@ export default {
padding: 0.625rem 1.875rem 0.625rem 1.25rem; padding: 0.625rem 1.875rem 0.625rem 1.25rem;
padding-top: 0rem; padding-top: 0rem;
} }
</style> </style>

28
components/server/IssueSlip.vue
View File

@ -33,20 +33,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "IssueSlip", name: "IssueSlip",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
@ -133,13 +130,13 @@ export default {
} }
.data-darkmode { .data-darkmode {
background-color: #212121; background-color: #212121;
color: #fff; color: #fff;
} }
.data-lightmode { .data-lightmode {
background-color: #EBEBEB; background-color: #EBEBEB;
color: #000; color: #000;
} }
.issueSlip-data { .issueSlip-data {
@ -209,5 +206,4 @@ export default {
padding: 0.625rem 1.875rem 0.625rem 1.25rem; padding: 0.625rem 1.875rem 0.625rem 1.25rem;
padding-top: 0rem; padding-top: 0rem;
} }
</style> </style>

50
components/server/IssueSlipTable.vue
View File

@ -3,17 +3,31 @@
<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"> <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
<th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th> :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
<th :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">Ticket No.</th> Client</th>
<th :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">Creation Date</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> <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td> <td
<td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td> :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
<td :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">...</td> ...</td>
<td :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">...</td> <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> <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
</table> </table>
@ -21,20 +35,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "IssueSlipTable", name: "IssueSlipTable",
data() { };
return {
darkMode: true,
};
},
}
</script> </script>
@ -186,5 +197,4 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
} }</style>
</style>

45
components/server/IssueSlipTableNoClient.vue
View File

@ -3,15 +3,25 @@
<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"> <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="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
<th :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">Ticket No.</th> </th>
<th :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">Creation Date</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> <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <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="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
<td :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">...</td> ...</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>
<td
:class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
</table> </table>
@ -19,20 +29,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "IssueSlipTableNoClient", name: "IssueSlipTableNoClient",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
@ -114,6 +121,7 @@ td {
th { th {
font: 700 0.875rem/1.875rem Overpass, sans-serif; font: 700 0.875rem/1.875rem Overpass, sans-serif;
} }
.ID { .ID {
width: 47.5%; width: 47.5%;
} }
@ -171,5 +179,4 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
} }</style>
</style>

47
components/server/IssueTable.vue
View File

@ -3,15 +3,27 @@
<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"> <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
<th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th> :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th> 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> <th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode']">Amount</th>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <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
<td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td> :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td> ...</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="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> <td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
</table> </table>
@ -19,20 +31,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "IssueTable", name: "IssueTable",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
@ -114,6 +123,7 @@ td {
th { th {
font: 700 0.875rem/1.875rem Overpass, sans-serif; font: 700 0.875rem/1.875rem Overpass, sans-serif;
} }
.Name { .Name {
width: 33.3%; width: 33.3%;
} }
@ -171,5 +181,4 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
} }</style>
</style>

28
components/server/IssueVariant.vue
View File

@ -37,20 +37,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "IssueVariant", name: "IssueVariant",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
@ -137,13 +134,13 @@ export default {
} }
.data-darkmode { .data-darkmode {
background-color: #212121; background-color: #212121;
color: #fff; color: #fff;
} }
.data-lightmode { .data-lightmode {
background-color: #EBEBEB; background-color: #EBEBEB;
color: #000; color: #000;
} }
.issue-variant-data { .issue-variant-data {
@ -213,5 +210,4 @@ export default {
padding: 0.625rem 1.875rem 0.625rem 1.25rem; padding: 0.625rem 1.875rem 0.625rem 1.25rem;
padding-top: 0rem; padding-top: 0rem;
} }
</style> </style>

71
components/server/IssueVariants.vue
View File

@ -3,38 +3,50 @@
<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"> <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
<th :class="['Properties', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">Properties</th> :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th> Name</th>
<th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">Amount</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> <th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode']">Price</th>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <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
<td :class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">...</td> :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td> ...</td>
<td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-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> <td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
</table> </table>
</div> </div>
</template> </template>
<script setup>
import { ref } from 'vue';
<script>
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "IssueVariants", name: "IssueVariants",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
@ -170,14 +182,14 @@ th {
} }
.label { .label {
width: 6.0625em; width: 6.0625em;
height: 1.875em; height: 1.875em;
font-family: 'Overpass'; font-family: 'Overpass';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 1em; font-size: 1em;
line-height: 1.875em; line-height: 1.875em;
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
.label-darkmode { .label-darkmode {
@ -186,5 +198,4 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
} }</style>
</style>

20
components/server/MaintenanceVisitsInstance.vue
View File

@ -70,22 +70,18 @@
</section> </section>
</template> </template>
<script>
<script setup>
import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "MaintenanceVisitsInstance", name: "MaintenanceVisitsInstance",
data() { };
return {
darkMode: true,
};
},
}
</script> </script>
<style scoped> <style scoped>

19
components/server/MaintenanceVisitsInstanceTable.vue
View File

@ -41,20 +41,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "MaintenanceVisitsInstanceTable", name: "MaintenanceVisitsInstanceTable",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>

19
components/server/MaintenanceVisitsTemplate.vue
View File

@ -35,20 +35,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "MaintenanceVisitsTemplate", name: "MaintenanceVisitsTemplate",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>

22
components/server/MaintenanceVisitsTemplateTable.vue
View File

@ -35,20 +35,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "MaintenanceVisitsTemplateTable", name: "MaintenanceVisitsTemplateTable",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
@ -200,4 +197,5 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
}</style> }
</style>

20
components/server/MaintenanceVisitsTemplateTableNoClient.vue
View File

@ -29,20 +29,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "MaintenanceVisitsTemplateTableNoClient", name: "MaintenanceVisitsTemplateTableNoClient",
data() { };
return {
darkMode: true,
};
},
}
</script> </script>
@ -182,4 +179,5 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
}</style> }
</style>

30
components/server/NetworkSpecifications.vue
View File

@ -26,22 +26,18 @@
</section> </section>
</template> </template>
<script>
<script setup>
import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "NetworkSpecifications", name: "NetworkSpecifications",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
<style scoped> <style scoped>
@ -105,13 +101,13 @@ export default {
} }
.data-darkmode { .data-darkmode {
background-color: #212121; background-color: #212121;
color: #fff; color: #fff;
} }
.data-lightmode { .data-lightmode {
background-color: #EBEBEB; background-color: #EBEBEB;
color: #000; color: #000;
} }
.asset-data { .asset-data {

41
components/server/OrderingInformation.vue
View File

@ -4,15 +4,27 @@
<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"> <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
<th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">Amount</th> :class="['Article', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
<th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">Price</th> 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> <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <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
<td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">...</td> :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
<td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">...</td> ...</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> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
</table> </table>
@ -22,20 +34,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "OrderingInformation", name: "OrderingInformation",
data() { };
return {
darkMode: true,
};
},
}
</script> </script>

22
components/server/ProductionOrdersInstance.vue
View File

@ -76,22 +76,18 @@
</section> </section>
</template> </template>
<script>
<script setup>
import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "ProductionOrdersInstance", name: "ProductionOrdersInstance",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
<style scoped> <style scoped>

20
components/server/ProductionOrdersInstanceTable.vue
View File

@ -47,21 +47,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "ProductionOrdersInstanceTable", name: "ProductionOrdersInstanceTable",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
<style scoped> <style scoped>

24
components/server/ProductionOrdersTemplate.vue
View File

@ -14,7 +14,7 @@
</div> </div>
<div class="user"> <div class="user">
<div class="data-field" id="empty"> <div class="data-field" id="empty">
&nbsp; &nbsp;
</div> </div>
<div class="data-field" id="user"> <div class="data-field" id="user">
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">User:</pre> <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">User:</pre>
@ -40,21 +40,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
export default {
name: "MaintenanceVisitsTemplate",
data() {
return {
darkMode: true,
};
},
}
const darkMode = ref(true)
</script> </script>
<script>
export default {
name: "ProductionOrdersTemplate",
};
</script>
<style scoped> <style scoped>

23
components/server/ProductionOrdersTemplateTable.vue
View File

@ -29,21 +29,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "ProductionOrdersTemplateTable", name: "ProductionOrdersTemplateTable",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
<style scoped> <style scoped>
@ -182,4 +178,5 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
}</style> }
</style>

23
components/server/ProductionOrdersTemplateTableNoClient.vue
View File

@ -23,21 +23,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "ProductionOrdersTemplateTableNoClient", name: "ProductionOrdersTemplateTableNoClient",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
<style scoped> <style scoped>
@ -164,4 +160,5 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
}</style> }
</style>

40
components/server/SoftwareSpecifications.vue
View File

@ -4,13 +4,21 @@
<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"> <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
<th :class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">Version</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> <th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <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']">...</td> <td
<td :class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">...</td> :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
...</td>
<td
:class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
...</td>
<td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> <td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
</table> </table>
@ -19,22 +27,17 @@
</section> </section>
</template> </template>
<script setup>
import { ref } from 'vue';
<script>
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "SoftwareSpecifications", name: "SoftwareSpecifications",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
<style scoped> <style scoped>
@ -169,5 +172,4 @@ th {
.License { .License {
width: 25%; width: 25%;
} }</style>
</style>

32
components/server/Solution.vue
View File

@ -32,7 +32,8 @@
<div class="solution-data"> <div class="solution-data">
<div class="additional"> <div class="additional">
<div class="description"> <div class="description">
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description of the problem/intended use:</h3> <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description of the
problem/intended use:</h3>
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre> <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
</div> </div>
</div> </div>
@ -49,21 +50,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "Solution", name: "Solution",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
<style scoped> <style scoped>
@ -149,13 +146,13 @@ export default {
} }
.data-darkmode { .data-darkmode {
background-color: #212121; background-color: #212121;
color: #fff; color: #fff;
} }
.data-lightmode { .data-lightmode {
background-color: #EBEBEB; background-color: #EBEBEB;
color: #000; color: #000;
} }
.solution-data { .solution-data {
@ -235,5 +232,4 @@ export default {
padding: 0.625rem 1.875rem 0.625rem 1.25rem; padding: 0.625rem 1.875rem 0.625rem 1.25rem;
padding-top: 0rem; padding-top: 0rem;
} }
</style> </style>

63
components/server/SolutionChecklist.vue
View File

@ -3,15 +3,27 @@
<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"> <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
<th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th> :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
<th :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">Task</th> 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> <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <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
<td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td> :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
<td :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">...</td> ...</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> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
</table> </table>
@ -19,21 +31,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "SolutionChecklist", name: "SolutionChecklist",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
<style scoped> <style scoped>
@ -156,14 +164,14 @@ th {
} }
.label { .label {
width: 6.0625em; width: 6.0625em;
height: 1.875em; height: 1.875em;
font-family: 'Overpass'; font-family: 'Overpass';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 1em; font-size: 1em;
line-height: 1.875em; line-height: 1.875em;
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
.label-darkmode { .label-darkmode {
@ -172,5 +180,4 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
} }</style>
</style>

68
components/server/SolutionTable.vue
View File

@ -3,17 +3,33 @@
<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"> <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
<th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th> :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
<th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th> Client</th>
<th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</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> <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td> <td
<td :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td> :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
<td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td> ...</td>
<td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-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="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td> <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
</table> </table>
@ -21,21 +37,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "SolutionTable", name: "SolutionTable",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
<style scoped> <style scoped>
@ -170,14 +182,14 @@ th {
} }
.label { .label {
width: 6.0625em; width: 6.0625em;
height: 1.875em; height: 1.875em;
font-family: 'Overpass'; font-family: 'Overpass';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 1em; font-size: 1em;
line-height: 1.875em; line-height: 1.875em;
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
.label-darkmode { .label-darkmode {

63
components/server/SolutionTableNoClient.vue
View File

@ -3,15 +3,27 @@
<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"> <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
<th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th> :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">Type</th> 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> <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <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
<td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td> :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
<td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">...</td> ...</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> <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
</table> </table>
@ -19,21 +31,17 @@
</template> </template>
<script setup>
<script> import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "SolutionTableNoClient", name: "SolutionTableNoClient",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
<style scoped> <style scoped>
@ -156,14 +164,14 @@ th {
} }
.label { .label {
width: 6.0625em; width: 6.0625em;
height: 1.875em; height: 1.875em;
font-family: 'Overpass'; font-family: 'Overpass';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 1em; font-size: 1em;
line-height: 1.875em; line-height: 1.875em;
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
.label-darkmode { .label-darkmode {
@ -172,5 +180,4 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
} }</style>
</style>

65
components/server/TemplateChecklist.vue
View File

@ -3,39 +3,47 @@
<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"> <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
<th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th> :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
<th :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">Task</th> 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> <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
</tr> </tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1"> <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
<td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td> :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
<td :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">...</td> ...</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> <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr> </tr>
</table> </table>
</div> </div>
</template> </template>
<script>
<script setup>
import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "TemplateChecklist", name: "TemplateChecklist",
data() { };
return { </script>
darkMode: true,
};
},
}
</script>
<style scoped> <style scoped>
.data { .data {
display: flex; display: flex;
@ -156,14 +164,14 @@ th {
} }
.label { .label {
width: 6.0625em; width: 6.0625em;
height: 1.875em; height: 1.875em;
font-family: 'Overpass'; font-family: 'Overpass';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 1em; font-size: 1em;
line-height: 1.875em; line-height: 1.875em;
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
.label-darkmode { .label-darkmode {
@ -172,5 +180,4 @@ th {
.label-lightmode { .label-lightmode {
color: #000; color: #000;
} }</style>
</style>

41
layouts/Navigationbar.vue
View File

@ -6,7 +6,7 @@
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" /> <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
</div> </div>
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
@click="toggleSidebar"> @click="ToggleSidebar">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" /> src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
</div> </div>
@ -23,28 +23,32 @@
</router-link> </router-link>
</nav> </nav>
<nav id="site-menu"> <nav id="site-menu">
<router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="checklists-button"> <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
id="checklists-button">
<div class="icon" id="checklists-icon"> <div class="icon" id="checklists-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Checklists-Icon.svg" /> src="../icons/navbar-icons/Checklists-Icon.svg" />
</div> </div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span> <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
</router-link> </router-link>
<router-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="assets-button"> <router-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
id="assets-button">
<div class="icon" id="assets-icon"> <div class="icon" id="assets-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Assets-Icon.svg" /> src="../icons/navbar-icons/Assets-Icon.svg" />
</div> </div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span> <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
</router-link> </router-link>
<router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button"> <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
id="solutions-button">
<div class="icon" id="solutions-icon"> <div class="icon" id="solutions-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Solutions-Icon.svg" /> src="../icons/navbar-icons/Solutions-Icon.svg" />
</div> </div>
<span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span> <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
</router-link> </router-link>
<router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button"> <router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
id="accounting-button">
<div class="icon" id="accounting-icon"> <div class="icon" id="accounting-icon">
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
src="../icons/navbar-icons/Accounting-Icon.svg" /> src="../icons/navbar-icons/Accounting-Icon.svg" />
@ -66,22 +70,22 @@
<script setup>
import { ref } from 'vue';
const darkMode = ref(true)
const isExpanded = ref(true)
const ToggleSidebar = () => {
isExpanded.value = !isExpanded.value;
};
</script>
<script> <script>
export default { export default {
name: "Navigationbar", name: "Navigationbar",
data() {
return {
darkMode: true,
isExpanded: true,
};
},
methods: {
toggleSidebar() {
this.isExpanded = !this.isExpanded;
}
}
} }
</script> </script>
@ -263,5 +267,4 @@ img {
.label-lightmode { .label-lightmode {
color: #000000; color: #000000;
} }</style>
</style>

16
layouts/PageHeader.vue
View File

@ -11,17 +11,17 @@
</template> </template>
<script setup>
import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script> <script>
export default { export default {
name: "PageHeader", name: "PageHeader",
data() {
return {
darkMode: true,
};
},
} }
</script> </script>

24
layouts/default.vue
View File

@ -8,28 +8,22 @@
</template> </template>
<script> <script setup>
import { ref } from 'vue';
import PageHeader from "./PageHeader.vue"; import PageHeader from "./PageHeader.vue";
import Navigationbar from "./Navigationbar.vue"; import Navigationbar from "./Navigationbar.vue";
import Actionbar from "./Actionbar.vue"; import Actionbar from "./Actionbar.vue";
export default { const darkMode = ref(true)
name: "Page",
components: {
PageHeader,
Navigationbar,
Actionbar,
},
data() {
return {
darkMode: true,
};
},
}
</script> </script>
<script>
export default {
name: "default",
}
</script>
<style scoped> <style scoped>
* { * {

21
layouts/empty.vue
View File

@ -6,23 +6,18 @@
</template> </template>
<script> <script setup>
import PageHeader from "../layouts/PageHeader.vue"; import PageHeader from "../layouts/PageHeader.vue";
export default { const darkMode = ref(true)
name: "Page",
components: {
PageHeader,
},
data() {
return {
darkMode: true,
};
},
}
</script> </script>
<script>
export default {
name: "empty",
}
</script>
<style scoped> <style scoped>

32
pages/assets.vue
View File

@ -17,12 +17,8 @@
<script setup> <script setup>
definePageMeta({ import { ref } from 'vue';
layout: 'default'
})
</script>
<script>
import ClientSearch from "../components/ClientSearch.vue"; import ClientSearch from "../components/ClientSearch.vue";
import AssetTable from "../components/server/AssetTable.vue"; import AssetTable from "../components/server/AssetTable.vue";
import AssetTableNoClient from "../components/server/AssetTableNoClient.vue"; import AssetTableNoClient from "../components/server/AssetTableNoClient.vue";
@ -31,26 +27,18 @@ import HardwareSpecifications from "../components/server/HardwareSpecifications.
import SoftwareSpecifications from "../components/server/SoftwareSpecifications.vue"; import SoftwareSpecifications from "../components/server/SoftwareSpecifications.vue";
import NetworkSpecifications from "../components/server/NetworkSpecifications.vue"; import NetworkSpecifications from "../components/server/NetworkSpecifications.vue";
definePageMeta({
layout: 'default'
})
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "AssetPage", name: "AssetPage",
components: {
ClientSearch,
AssetTable,
AssetTableNoClient,
Asset,
HardwareSpecifications,
SoftwareSpecifications,
NetworkSpecifications,
},
data() {
return {
darkMode: true,
};
},
} }
</script>
</script>
<style scoped> <style scoped>

26
pages/clients.vue
View File

@ -12,36 +12,28 @@
<script setup> <script setup>
definePageMeta({ import { ref } from 'vue';
layout: 'default'
})
</script>
<script>
import ClientTable from "../components/server/ClientTable.vue"; import ClientTable from "../components/server/ClientTable.vue";
import Client from "../components/server/Client.vue"; import Client from "../components/server/Client.vue";
import ClientQuickAccess from "../components/server/ClientQuickAccess.vue"; import ClientQuickAccess from "../components/server/ClientQuickAccess.vue";
//import ClientEmployees from "../components/server/ClientEmployees.vue"; //import ClientEmployees from "../components/server/ClientEmployees.vue";
//import ClientEmployee from "../components/server/ClientEmployee.vue"; //import ClientEmployee from "../components/server/ClientEmployee.vue";
definePageMeta({
layout: 'default'
})
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "ClientsPage", name: "ClientsPage",
components: {
ClientTable,
Client,
ClientQuickAccess,
},
data() {
return {
darkMode: true,
};
},
} }
</script> </script>
<style scoped> <style scoped>
* { * {
box-sizing: border-box; box-sizing: border-box;

28
pages/home.vue
View File

@ -13,32 +13,24 @@
<script setup> <script setup>
definePageMeta({ import { ref } from 'vue';
layout: 'empty'
})
</script>
<script>
import Navigationbar from "../layouts/Navigationbar.vue"; import Navigationbar from "../layouts/Navigationbar.vue";
import Dashboard from "../components/Dashboard.vue"; import Dashboard from "../components/Dashboard.vue";
import QuickAccess from "../components/QuickAccess.vue"; import QuickAccess from "../components/QuickAccess.vue";
definePageMeta({
layout: 'empty'
})
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "HomePage", name: "HomePage",
components: {
Navigationbar,
Dashboard,
QuickAccess,
},
data() {
return {
darkMode: true,
};
},
} }
</script>
</script>
<style> <style>

12
pages/index.vue
View File

@ -11,23 +11,19 @@
<script setup> <script setup>
import { ref } from 'vue';
definePageMeta({ definePageMeta({
layout: 'default' layout: 'default'
}) })
const darkMode = ref(true)
</script> </script>
<script> <script>
export default { export default {
name: "Testpage", name: "Testpage",
components: {
},
data() {
return {
darkMode: true,
};
},
} }
</script> </script>

30
pages/issueSlips.vue
View File

@ -37,12 +37,8 @@
<script setup> <script setup>
definePageMeta({ import { ref } from 'vue';
layout: 'default'
})
</script>
<script>
import ClientSearch from "../components/ClientSearch.vue"; import ClientSearch from "../components/ClientSearch.vue";
import IssueSlipTable from "../components/server/IssueSlipTable.vue"; import IssueSlipTable from "../components/server/IssueSlipTable.vue";
import IssueSlipTableNoClient from "../components/server/IssueSlipTableNoClient.vue"; import IssueSlipTableNoClient from "../components/server/IssueSlipTableNoClient.vue";
@ -50,23 +46,17 @@ import IssueSlip from "../components/server/IssueSlip.vue";
import OrderingInformation from "../components/server/OrderingInformation.vue"; import OrderingInformation from "../components/server/OrderingInformation.vue";
import Accounting from "../components/server/Accounting.vue"; import Accounting from "../components/server/Accounting.vue";
definePageMeta({
layout: 'default'
})
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "IssueSlipPage", name: "IssueSlipPage",
components: {
ClientSearch,
IssueSlipTable,
IssueSlipTableNoClient,
IssueSlip,
OrderingInformation,
Accounting,
},
data() {
return {
darkMode: true,
};
},
} }
</script> </script>

28
pages/issues.vue
View File

@ -35,32 +35,24 @@
<script setup> <script setup>
definePageMeta({ import { ref } from 'vue';
layout: 'default'
})
</script>
<script>
import IssueTable from "../components/server/IssueTable.vue"; import IssueTable from "../components/server/IssueTable.vue";
import Issue from "../components/server/Issue.vue"; import Issue from "../components/server/Issue.vue";
import IssueVariants from "../components/server/IssueVariants.vue"; import IssueVariants from "../components/server/IssueVariants.vue";
import IssueVariant from "../components/server/IssueVariant.vue"; import IssueVariant from "../components/server/IssueVariant.vue";
definePageMeta({
layout: 'default'
})
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "IssuePage", name: "IssuePage",
components: {
IssueTable,
Issue,
IssueVariants,
IssueVariant,
},
data() {
return {
darkMode: true,
};
},
} }
</script> </script>

17
pages/login.vue
View File

@ -11,26 +11,21 @@
<script setup> <script setup>
import { ref } from 'vue';
import LoginForm from "../components/LoginForm.vue";
definePageMeta({ definePageMeta({
layout: 'empty' layout: 'empty'
}) })
const darkMode = ref(true)
</script> </script>
<script> <script>
import LoginForm from "../components/LoginForm.vue";
export default { export default {
name: "LoginPage", name: "LoginPage",
components: {
LoginForm,
},
data() {
return {
darkMode: true,
};
},
} }
</script> </script>

259
pages/maintenanceVisits.vue
View File

@ -1,143 +1,130 @@
<template> <template>
<section id="content"> <section id="content">
<div id="content-header"> <div id="content-header">
<router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button"> <router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button">
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Maintenance visits</h1> <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Maintenance visits</h1>
</router-link> </router-link>
&nbsp; &nbsp;
&nbsp; &nbsp;
&nbsp; &nbsp;
&nbsp; &nbsp;
&nbsp; &nbsp;
&nbsp; &nbsp;
&nbsp; &nbsp;
&nbsp; &nbsp;
&nbsp; &nbsp;
&nbsp; &nbsp;
&nbsp; &nbsp;
&nbsp; &nbsp;
&nbsp; &nbsp;
&nbsp; &nbsp;
&nbsp; &nbsp;
&nbsp; &nbsp;
<router-link to="/productionOrders" class="button" id="productionOrders-button"> <router-link to="/productionOrders" class="button" id="productionOrders-button">
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Production orders</h1> <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Production orders</h1>
</router-link> </router-link>
</div> </div>
<div id="content-body"> <div id="content-body">
<ClientSearch /> <ClientSearch />
<MaintenanceVisitsTemplateTable /> <MaintenanceVisitsTemplateTable />
<MaintenanceVisitsTemplateTableNoClient /> <MaintenanceVisitsTemplateTableNoClient />
<MaintenanceVisitsTemplate /> <MaintenanceVisitsTemplate />
<TemplateChecklist /> <TemplateChecklist />
<TemplateSearch /> <TemplateSearch />
<MaintenanceVisitsInstanceTable /> <MaintenanceVisitsInstanceTable />
<MaintenanceVisitsInstance /> <MaintenanceVisitsInstance />
<InstanceChecklist /> <InstanceChecklist />
</div> </div>
</section> </section>
</template> </template>
<script setup> <script setup>
definePageMeta({ import { ref } from 'vue';
layout: 'default'
}) import ClientSearch from "../components/ClientSearch.vue";
</script> import MaintenanceVisitsTemplateTable from "../components/server/MaintenanceVisitsTemplateTable.vue";
import MaintenanceVisitsTemplateTableNoClient from "../components/server/MaintenanceVisitsTemplateTableNoClient.vue";
import MaintenanceVisitsTemplate from "../components/server/MaintenanceVisitsTemplate.vue";
import TemplateChecklist from "../components/server/TemplateChecklist.vue";
import TemplateSearch from "../components/TemplateSearch.vue";
import MaintenanceVisitsInstanceTable from "../components/server/MaintenanceVisitsInstanceTable.vue";
import MaintenanceVisitsInstance from "../components/server/MaintenanceVisitsInstance.vue";
import InstanceChecklist from "../components/server/InstanceChecklist.vue";
definePageMeta({
layout: 'default'
})
const darkMode = ref(true)
</script>
<script> <script>
import ClientSearch from "../components/ClientSearch.vue"; export default {
import MaintenanceVisitsTemplateTable from "../components/server/MaintenanceVisitsTemplateTable.vue"; name: "MaintenanceVisitsPage",
import MaintenanceVisitsTemplateTableNoClient from "../components/server/MaintenanceVisitsTemplateTableNoClient.vue"; }
import MaintenanceVisitsTemplate from "../components/server/MaintenanceVisitsTemplate.vue"; </script>
import TemplateChecklist from "../components/server/TemplateChecklist.vue";
import TemplateSearch from "../components/TemplateSearch.vue";
import MaintenanceVisitsInstanceTable from "../components/server/MaintenanceVisitsInstanceTable.vue";
import MaintenanceVisitsInstance from "../components/server/MaintenanceVisitsInstance.vue";
import InstanceChecklist from "../components/server/InstanceChecklist.vue";
export default {
name: "MaintenanceVisitsPage",
components: {
ClientSearch,
MaintenanceVisitsTemplateTable,
MaintenanceVisitsTemplateTableNoClient,
MaintenanceVisitsTemplate,
TemplateChecklist,
TemplateSearch,
MaintenanceVisitsInstanceTable,
MaintenanceVisitsInstance,
InstanceChecklist,
},
data() {
return {
darkMode: true,
};
},
}
</script>
<style scoped> <style scoped>
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
#content { #content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
float: left; float: left;
justify-content: stretch; justify-content: stretch;
align-items: stretch; align-items: stretch;
width: 100%; width: 100%;
flex-grow: 1; flex-grow: 1;
gap: 0.625rem; gap: 0.625rem;
padding: 0 1.25rem; padding: 0 1.25rem;
} }
#content-header { #content-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 3.125rem; height: 3.125rem;
} }
#page-name { #page-name {
letter-spacing: 5%; letter-spacing: 5%;
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
sans-serif; sans-serif;
} }
#active-page-name { #active-page-name {
letter-spacing: 5%; letter-spacing: 5%;
font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
sans-serif; sans-serif;
text-decoration: underline; text-decoration: underline;
} }
.button { .button {
text-decoration: none; text-decoration: none;
} }
.h1-darkmode { .h1-darkmode {
color: #fff; color: #fff;
} }
.h1-lightmode { .h1-lightmode {
color: #000; color: #000;
} }
#content-body { #content-body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
gap: 1.25rem; gap: 1.25rem;
margin-bottom: 0.625rem; margin-bottom: 0.625rem;
border-radius: 0.625rem; border-radius: 0.625rem;
} }
</style> </style>

38
pages/productionOrders.vue
View File

@ -40,12 +40,8 @@
<script setup> <script setup>
definePageMeta({ import { ref } from 'vue';
layout: 'default'
})
</script>
<script>
import ClientSearch from "../components/ClientSearch.vue"; import ClientSearch from "../components/ClientSearch.vue";
import ProductionOrdersTemplateTable from "../components/server/ProductionOrdersTemplateTable.vue"; import ProductionOrdersTemplateTable from "../components/server/ProductionOrdersTemplateTable.vue";
import ProductionOrdersTemplateTableNoClient from "../components/server/ProductionOrdersTemplateTableNoClient.vue"; import ProductionOrdersTemplateTableNoClient from "../components/server/ProductionOrdersTemplateTableNoClient.vue";
@ -56,28 +52,18 @@ import ProductionOrdersInstanceTable from "../components/server/ProductionOrders
import ProductionOrdersInstance from "../components/server/ProductionOrdersInstance.vue"; import ProductionOrdersInstance from "../components/server/ProductionOrdersInstance.vue";
import InstanceChecklist from "../components/server/InstanceChecklist.vue"; import InstanceChecklist from "../components/server/InstanceChecklist.vue";
definePageMeta({
layout: 'default'
})
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "ProductionOrdersPage", name: "ProductionOrdersPage",
components: {
ClientSearch,
ProductionOrdersTemplateTable,
ProductionOrdersTemplateTableNoClient,
ProductionOrdersTemplate,
TemplateChecklist,
TemplateSearch,
ProductionOrdersInstanceTable,
ProductionOrdersInstance,
InstanceChecklist,
},
data() {
return {
darkMode: true,
};
},
} }
</script>
</script>
<style scoped> <style scoped>
@ -121,7 +107,7 @@ export default {
} }
.button { .button {
text-decoration: none; text-decoration: none;
} }
.h1-darkmode { .h1-darkmode {

27
pages/solutions.vue
View File

@ -15,34 +15,25 @@
<script setup> <script setup>
definePageMeta({ import { ref } from 'vue';
layout: 'default'
})
</script>
<script>
import ClientSearch from "../components/ClientSearch.vue"; import ClientSearch from "../components/ClientSearch.vue";
import SolutionTable from "../components/server/SolutionTable.vue"; import SolutionTable from "../components/server/SolutionTable.vue";
import SolutionTableNoClient from "../components/server/SolutionTableNoClient.vue"; import SolutionTableNoClient from "../components/server/SolutionTableNoClient.vue";
import Solution from "../components/server/Solution.vue"; import Solution from "../components/server/Solution.vue";
import SolutionChecklist from "../components/server/SolutionChecklist.vue"; import SolutionChecklist from "../components/server/SolutionChecklist.vue";
definePageMeta({
layout: 'default'
})
const darkMode = ref(true)
</script>
<script>
export default { export default {
name: "AssetPage", name: "AssetPage",
components: {
ClientSearch,
SolutionTable,
SolutionTableNoClient,
Solution,
SolutionChecklist,
},
data() {
return {
darkMode: true,
};
},
} }
</script> </script>