added pot todos functionality

app.vue

@@ -16,15 +16,20 @@
 
 <style>
 
-  html, template, body, #__nuxt, #__layout {
+* {
-    height: 100vh;
+  box-sizing: border-box;
-    width: 100vw;
+  margin: 0;
-    height: 100%;
+  padding: 0;
-    width: 100%;
+}
-    margin: 0;
+
-    background-color: #212121;
+html, template, body, #__nuxt, #__layout {
-    font-size: 1rem;
+  min-height: 100vh;
-  }
+  width: 100vw;
+  min-height: 100%;
+  width: 100%;
+  background-color: #212121;
+  font-size: 1rem;
+}
 
 
 </style>

backend/models/configItemsModel.js

@@ -89,7 +89,7 @@ export const insertConfigItem = async (data, result) => {
 //get all selected config items by customer
 export const getSelectedConfigItemsByCustomer = async (selected, result) => {
   try {
-    let sql = `SELECT * FROM changedb WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+    let sql = `SELECT * FROM changedb WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
     const results = await ownConn.execute(sql)
     result(null, results);
   }
@@ -103,7 +103,7 @@ export const getSelectedConfigItemsByCustomer = async (selected, result) => {
 //get all selected config items by asset name
 export const getSelectedConfigItemsByAssetName = async (selected, result) => {
   try {
-    let sql = `SELECT * FROM changedb WHERE assetName LIKE '%${selected}%' ORDER BY assetName ASC`;
+    let sql = `SELECT * FROM changedb WHERE LOWER(assetName) LIKE '%${selected.toLowerCase()}%' ORDER BY assetName ASC`;
     const results = await ownConn.execute(sql)
     result(null, results);
   }

backend/models/customerModel.js

@@ -17,7 +17,7 @@ export const getCustomers = async (result) => {
 //get all selected customers
 export const getSelectedCustomers = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM customers WHERE customername LIKE '%${selected}%' ORDER BY customername ASC`;
+        let sql = `SELECT * FROM customers WHERE LOWER(customername) LIKE '%${selected.toLowerCase()}%' ORDER BY customername ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }

backend/models/issueSlipsModel.js

@@ -31,7 +31,7 @@ export const getSelectedIssueSlipsByTicketnumber = async (selected, result) => {
 //get all selected issue slips by customer
 export const getSelectedIssueSlipsByCustomer = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM issueslips WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM issueslips WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }

backend/models/issueVariantsModel.js

@@ -45,7 +45,7 @@ export const getSelectedIssueVariantsByIssueId = async (selected, result) => {
 //get all selected issue variants by name
 export const getSelectedIssueVariantsByName = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM issuevariants WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
+        let sql = `SELECT * FROM issuevariants WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }

backend/models/maintenanceVisitsModel.js

@@ -17,7 +17,7 @@ export const getMaintenanceVisits = async (result) => {
 //get all selected maintenance visits by checklistname
 export const getSelectedMaintenanceVisitsByChecklistname = async (selected, result) => {
   try {
-    let sql = `SELECT * FROM maintenancevisits WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
+    let sql = `SELECT * FROM maintenancevisits WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
     const results = await ownConn.execute(sql)
     result(null, results);
   }
@@ -31,7 +31,7 @@ export const getSelectedMaintenanceVisitsByChecklistname = async (selected, resu
 //get all selected maintenance visits by customer
 export const getSelectedMaintenanceVisitsByCustomer = async (selected, result) => {
   try {
-    let sql = `SELECT * FROM maintenancevisits WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+    let sql = `SELECT * FROM maintenancevisits WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
     const results = await ownConn.execute(sql)
     result(null, results);
   }
@@ -59,7 +59,7 @@ export const getSelectedMaintenanceVisitsByDate = async (selected, result) => {
 //get all selected maintenance visits by state
 export const getSelectedMaintenanceVisitsByState = async (selected, result) => {
   try {
-    let sql = `SELECT * FROM maintenancevisits WHERE state LIKE '%${selected}%' ORDER BY state ASC`;
+    let sql = `SELECT * FROM maintenancevisits WHERE LOWER(state) LIKE '%${selected.toLowerCase()}%' ORDER BY state ASC`;
     const results = await ownConn.execute(sql)
     result(null, results);
   }

backend/models/masterMaintenanceVisitsModel.js

@@ -17,7 +17,7 @@ export const getMasterMaintenanceVisits = async (result) => {
 //get all selected master maintenance visits by customer
 export const getSelectedMasterMaintenanceVisitsByCustomer = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM mastermaintenancevisits WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM mastermaintenancevisits WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -31,7 +31,7 @@ export const getSelectedMasterMaintenanceVisitsByCustomer = async (selected, res
 //get all selected master maintenance visits by checklistname
 export const getSelectedMasterMaintenanceVisitsByChecklistname = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM mastermaintenancevisits WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
+        let sql = `SELECT * FROM mastermaintenancevisits WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }

backend/models/masterProductionOrderTodosModel.js

@@ -18,8 +18,9 @@ export const getMasterProductionOrderTodoById = async (id, result) => {
 export const updateMasterProductionOrderTodoById = async (data, result) => {
     try {
         const id = data.primaryID;
-        let sql = `UPDATE masterordertodos SET templateID = ?, asset = ? , task = ?, comment = ? WHERE primaryID = ?`;
+        let sql = `UPDATE masterordertodos SET templateID = ?, asset = ? , task = ?, comments = ? WHERE primaryID = ?`;
-        const results = await ownConn.query(sql, [data.templateID, data.asset, data.task, data.comment, id])
+        const results = await ownConn.query(sql, [data.templateID, data.asset, data.task, data.comments, id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -35,6 +36,7 @@ export const deleteMasterProductionOrderTodoById = async (id, result) => {
     try {
         let sql = `DELETE FROM masterordertodos WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -49,6 +51,7 @@ export const deleteMasterProductionOrderTodoByTemplateId = async (id, result) =>
     try {
         let sql = `DELETE FROM masterordertodos WHERE templateID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -79,7 +82,8 @@ export const updateMasterProductionOrderTodos = async (data, result) => {
 //insert master production order todo to databased
 export const insertMasterProductionOrderTodo = async (data, result) => {
     try {
-        const results = await ownConn.query(`INSERT INTO masterordertodos(templateID, rowID, asset, task, comment) VALUES(?, ?, ?, ?, ?)`, [data.templateID, data.rowID, data.asset, data.task, data.comment])
+        const results = await ownConn.query(`INSERT INTO masterordertodos(templateID, rowID, asset, task, comments) VALUES(?, ?, ?, ?, ?)`, [data.templateID, data.rowID, data.asset, data.task, data.comment])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {

backend/models/masterProductionOrdersModel.js

@@ -17,7 +17,7 @@ export const getMasterProductionOrders = async (result) => {
 //get all selected master production orders by customer
 export const getSelectedMasterProductionOrdersByCustomer = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM masterproductionorders WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM masterproductionorders WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -31,7 +31,7 @@ export const getSelectedMasterProductionOrdersByCustomer = async (selected, resu
 //get all selected master production orders by checklistname
 export const getSelectedMasterProductionOrdersByChecklistname = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM masterproductionorders WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
+        let sql = `SELECT * FROM masterproductionorders WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -62,6 +62,7 @@ export const updateMasterProductionOrderById = async (data, result) => {
         const id = data.templateID;
         let sql = `UPDATE masterproductionorders SET name = ?, customerID = ? , customer = ?, lastView = ?, user = ?, description = ?, notes = ? WHERE templateID = ?`;
         const results = await ownConn.query(sql, [data.name, data.customerID, data.customer, data.lastView, data.user, data.description, data.notes, id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -75,6 +76,7 @@ export const updateMasterProductionOrderById = async (data, result) => {
 export const insertMasterProductionOrder = async (data, result) => {
     try {
         const results = await ownConn.query(`INSERT INTO masterproductionorders(name, customerID, customer, lastView, user, description, notes) VALUES(?, ?, ?, ?, ?, ?, ?)`, [data.name, data.customerID, data.customer, data.lastView, data.user, data.description, data.notes])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -89,6 +91,7 @@ export const deleteMasterProductionOrderById = async (id, result) => {
     try {
         let sql = `DELETE FROM masterproductionorders WHERE templateID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {

backend/models/productionOrdersModel.js

@@ -31,7 +31,7 @@ export const getSelectedProductionOrdersByTicketnumber = async (selected, result
 //get all selected production orders by customer
 export const getSelectedProductionOrdersByCustomer = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM productionorders WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM productionorders WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -45,7 +45,7 @@ export const getSelectedProductionOrdersByCustomer = async (selected, result) =>
 //get all selected production orders by state
 export const getSelectedProductionOrdersByState = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM productionorders WHERE state LIKE '%${selected}%' ORDER BY state ASC`;
+        let sql = `SELECT * FROM productionorders WHERE LOWER(state) LIKE '%${selected.toLowerCase()}%' ORDER BY state ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -59,7 +59,7 @@ export const getSelectedProductionOrdersByState = async (selected, result) => {
 //get all selected production orders by checklistname
 export const getSelectedProductionOrdersByChecklistname = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM productionorders WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
+        let sql = `SELECT * FROM productionorders WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -102,6 +102,7 @@ export const deleteProductionOrderById = async (id, result) => {
 export const insertProductionOrder = async (data, result) => {
     try {
         const results = await ownConn.query(`INSERT INTO productionorders(name, templateID, customer, customerID, asset, state, creationDate, completionDate, user, templateDescription, templateNotes, timeSpent, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.name, data.templateID, data.customer, data.customerID, data.asset, data.state, data.creationDate, data.completionDate, data.user, data.templateDescription, data.templateNotes, data.timeSpent, data.notes])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -145,6 +146,7 @@ export const updateProductionOrderStateById = async (data, result) => {
     try {
         let sql = `UPDATE productionorders SET state = ? WHERE ticketNumber = ?`;
         const results = await ownConn.query(sql, [data.state, id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {

backend/models/solutionsModel.js

@@ -73,7 +73,7 @@ export const updateSolutionById = async (data, result) => {
 //get all selected solutions by customer
 export const getSelectedSolutionsByCustomer = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM solutions WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM solutions WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -86,7 +86,7 @@ export const getSelectedSolutionsByCustomer = async (selected, result) => {
 
 //get all selected solutions by solution name
 export const getSelectedSolutionsBySolutionName = async (selected, result) => {
-    let sql = `SELECT * FROM solutions WHERE solutionName LIKE '%${selected}%' ORDER BY solutionName ASC`;
+    let sql = `SELECT * FROM solutions WHERE LOWER(solutionName) LIKE '%${selected.toLowerCase()}%' ORDER BY solutionName ASC`;
     try {
         const results = await ownConn.execute(sql)
         result(null, results);
@@ -101,7 +101,7 @@ export const getSelectedSolutionsBySolutionName = async (selected, result) => {
 //get all selected solutions by asset name
 export const getSelectedSolutionsByAssetName = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM solutions WHERE assetName LIKE '%${selected}%' ORDER BY assetName ASC`;
+        let sql = `SELECT * FROM solutions WHERE LOWER(assetName) LIKE '%${selected.toLowerCase()}%' ORDER BY assetName ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -115,7 +115,7 @@ export const getSelectedSolutionsByAssetName = async (selected, result) => {
 //get all selected solutions by type
 export const getSelectedSolutionsByType = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM solutions WHERE type LIKE '%${selected}%' ORDER BY solutionName ASC`;
+        let sql = `SELECT * FROM solutions WHERE LOWER(type) LIKE '%${selected.toLowerCase()}%' ORDER BY solutionName ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }

backend/routes/routes.js

@@ -264,8 +264,8 @@ router.put("/masterProductionOrderTodos", updateMasterProductionOrderTodo);
 // Delete master production order todo
 router.delete("/masterProductionOrderTodos/:id", deleteMasterProductionOrderTodo);
 
-// Delete master production order todo by customer id
+// Delete master production order todo by template id
-router.delete("/masterProductionOrderTodosByCustomerid/:id", deleteMasterProductionOrderTodoByTemplateIds);
+router.delete("/masterProductionOrderTodosByTemplateid/:id", deleteMasterProductionOrderTodoByTemplateIds);
 
 // Update all master production order todos
 router.put("/allMasterProductionOrderTodos", updateAllProductionOrderTodos)

components/ClientSearch.vue

@@ -13,9 +13,9 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
-const filtered = computed(() => store.state.assetFiltered);
+const filtered = computed(() => store.state.filtered);
-const filteredTerm = computed(() => store.state.filteredAssetbyClient);
+const filteredTerm = computed(() => store.state.filteredByClient);
-const clientFilter = ref(store.state.filteredAssetbyClient);
+const clientFilter = ref(store.state.filteredByClient);
 
 const darkMode = ref(true)
 
@@ -26,7 +26,7 @@ const updateFilterTerm = () => {
 
 // update the filtered term in the store
 const filterConfigItemList = () => {
-  store.commit('updateAssetFilterbyClient', clientFilter.value);
+  store.commit('updateFilterbyClient', clientFilter.value);
 }
 
 watch(filteredTerm, updateFilterTerm)

components/server/Asset.vue

@@ -1,5 +1,5 @@
 <template>
-    <section v-if="!addAssetBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <h2 v-if="!editable" :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
             item.assetName }}</h2>
         <input v-if="editable" v-model="item.assetName" @change="updateConfigItem()"
@@ -77,7 +77,7 @@
             </div>
         </div>
     </section>
-    <section v-if="addAssetBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <input v-model="newAssetName" @change="updateAsset()"
             :class="['data', 'asset-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
         <div class="asset-data">
@@ -153,10 +153,10 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
-const editable = computed(() => store.state.assetEditable);
+const editable = computed(() => store.state.editable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
-const deleteAssetBool = computed(() => store.state.deleteAsset);
+const deleteBool = computed(() => store.state.deleteBool);
-const addAssetBool = computed(() => store.state.newAsset);
+const addBool = computed(() => store.state.new);
 
 const darkMode = ref(true);
 const item = ref({});
@@ -176,7 +176,7 @@ const newState = ref('');
 
 // get config item from id
 const getItemById = async () => {
-    if (!addAssetBool.value) {
+    if (!addBool.value) {
         try {
             const response = await Axios.get(
                 `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
@@ -275,17 +275,17 @@ const getCustomers = async () => {
 }
 
 const confirmDeleteAsset = async () => {
-    if (deleteAssetBool.value === true) {
+    if (deleteBool.value === true) {
         if (confirm("Do you really want to delete this config item? It cannot be undone!")) {
             try {
                 await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteConfigItem/${chosenAssetId.value}`);
-                store.commit('undoDeleteAsset');
+                store.commit('undoDelete');
                 store.commit('changeToAssetlist');
             } catch (err) {
                 console.log(err.response.statusText);
             }
         } else {
-            store.commit('undoDeleteAsset');
+            store.commit('undoDelete');
         }
     }
 }
@@ -330,7 +330,7 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     }, 1500);
 }
 
-watch(deleteAssetBool, confirmDeleteAsset);
+watch(deleteBool, confirmDeleteAsset);
 
 onMounted(() => {
     getItemById();
@@ -400,7 +400,7 @@ export default {
     align-items: center;
     justify-content: flex-start;
     width: 100%;
-    padding: 0 1.875rem;
+    padding: 0.8rem 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;
 }

components/server/AssetTable.vue

@@ -1,5 +1,5 @@
 <template>
-    <section v-if="assetSearchable" :class="['asset-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="searchable" :class="['asset-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Config item</div>
         <input v-model="assetSearchFilter" @change="searchConfigItem()"
             :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
@@ -31,9 +31,6 @@
                     </td>
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        <!-- <router-link to="/assets" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" > {{
-                                item.assetName }} </router-link> -->
                         <nuxt-link to="/assets" id="nuxt-link" class="button"
                             :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
                             @click="goToChosenAsset(item.primaryID)">
@@ -66,8 +63,8 @@ const goToChosenAsset = (id) => {
     store.commit('setChosenAsset', id);
     store.commit('changeToAsset');
 };
-const clientFilter = computed(() => store.state.filteredAssetbyClient);
+const clientFilter = computed(() => store.state.filteredByClient);
-const assetSearchable = computed(() => store.state.assetSearchable);
+const searchable = computed(() => store.state.searchable);
 
 const assetSearchFilter = ref('');
 const darkMode = ref(true)
@@ -118,7 +115,7 @@ const searchConfigItem = async () => {
 }
 
 watch(clientFilter, getConfigItems);
-watch(assetSearchable, updateSearchTerm);
+watch(searchable, updateSearchTerm);
 
 onMounted(async () => {
     await getConfigItems();

components/server/Client.vue

@@ -1,13 +1,13 @@
 <template>
-  <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+  <section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
-    <h2 :class="['client-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Client name</h2>
+    <pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Client name</pre>
     <div class="data-field" id="client-id">
       <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
       <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
     </div>
     <div class="client-data">
       <div class="contact">
-        <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contact:</h3>
+        <pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contact:</pre>
         <div class="data-field" id="contact-person">
           <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Contact person:</pre>
           <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
@@ -22,7 +22,7 @@
         </div>
       </div>
       <div class="address">
-        <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Address:</h3>
+        <pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Address:</pre>
         <div class="street-address">
           <div class="data-field" id="street-name">
             <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Street:</pre>
@@ -44,7 +44,7 @@
       </div>
     </div>
     <div class="notes">
-      <h3  :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+      <pre  :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</pre>
       <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
     </div>
   </section>
@@ -65,138 +65,102 @@ export default {
     
     
 <style scoped>
-.information {
+
+
+section {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  width: 100%;
   padding: 1.25rem 1.875rem;
   border-radius: 0.625rem;
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+  align-items: stretch;
+  justify-content: center;
 } 
-
+.section-darkmode { background-color: #2c2c2c; }
-.section-darkmode {
+.section-lightmode { background-color: #ffffff; }
-    background-color: #2c2c2c;
-}
-
-.section-lightmode {
-    background-color: #fff;
-}
 
 
-.client-name {
+.title {
-  align-self: stretch;
   padding: 1.25rem 0;
-  letter-spacing: 5%;
+  letter-spacing: 0.05rem;
   text-decoration-line: underline;
-  font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+  font: italic 400 1rem/1.875rem Overpass, sans-serif;
-    sans-serif;
 } 
+.title-darkmode { color: #ffffff; } 
+.title-lightmode { color: #000000; }
 
-.h2-darkmode {
-    color: #fff;
-}
-
-.h2-lightmode {
-    color: #000;
-}
 
 .data-field {
   display: flex;
+  flex: auto;
   flex-direction: row;
+  padding: 0 1.875rem;
   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%;
 } 
+.data-field#client-id { padding: 0.625rem 1.875rem; }
+.data-field#street-name { flex: 3; } 
 
 .label {
-  letter-spacing: 5%;
+  letter-spacing: 0.03rem;
   font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-.pre-darkmode {
+pre {
-    color: #fff;
+  margin: 0;
-}
-
-.pre-lightmode {
-    color: #000;
 }
+.pre-darkmode { color: #ffffff; } 
+.pre-lightmode { color: #000000; }
 
 .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;
+  align-items: center;
+  justify-content: flex-start;
   letter-spacing: 5%;
   font: 400 0.75rem/250% Overpass, sans-serif;
 } 
-
 .data-darkmode {
-    background-color: #212121;
+  background-color: #212121;
-    color: #fff;
+  color: #ffffff;
 } 
-
 .data-lightmode {
-    background-color: #EBEBEB;
+  background-color: #ebebeb;
-    color: #000;
+  color: #000000;
 } 
 
-.data#notes {
-  align-self: stretch;
-}
 
 .client-data {
   display: flex;
+  flex: auto;
   flex-direction: row;
+  padding: 1.25rem 1.875rem;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: stretch;
-  align-self: stretch;
+  gap: 0.625rem
-  padding: 0 0.625rem;
 }
 
-.contact,
+.contact, .address {
-.address {
   display: flex;
+  flex: auto;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  line-height: normal;
+  gap: 0.625rem;
-  width: 50%;
-  padding: 1.25rem 0.625rem;
-  border-radius: 0.3125rem;
 }
 
 .area-title {
-  letter-spacing: 5%;
+  letter-spacing: 0.03rem;
   font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-.h3-darkmode {
+.h3-darkmode { color: #ffffff; } 
-    color: #fff;
+.h3-lightmode { color: #000000; }
-}
-
-.h3-lightmode {
-    color: #000;
-}
 
 
 .street-address {
@@ -205,15 +169,17 @@ export default {
   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;
+  padding: 0.625rem 1.875rem;
   align-items: flex-start;
   justify-content: center;
-  align-self: stretch;
+  gap: 0.625rem;
-  padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+}
-}</style>
+#notes { align-self: stretch; }
+
+</style>

components/server/ClientDepartment.vue

@@ -0,0 +1,143 @@
+<template>
+    <section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
+      <pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Department name</pre>
+      <div class="data-group">
+        <div class="data-field" id="id">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+        <div class="data-field" id="client-id">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client ID:</pre>
+            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+        <div class="data-field" id="head">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Head:</pre>
+            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+      </div>
+      <div class="notes">
+            <pre  :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
+            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+      </div>
+    </section>
+</template>
+  
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+name: "ClientDepartment",
+};
+</script>   
+
+
+
+<style scoped>
+
+* { 
+box-sizing: border-box;
+margin: 0; 
+}
+
+
+section {
+display: flex;
+flex-direction: column;
+padding: 1.25rem 1.875rem;
+border-radius: 0.625rem;
+box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+align-items: stretch;
+justify-content: center;
+} 
+.section-darkmode { background-color: #2c2c2c; }
+.section-lightmode { background-color: #ffffff; }
+
+
+.title {
+padding: 1.25rem 0;
+letter-spacing: 0.04rem;
+text-decoration-line: underline;
+font: italic 400 1rem/1.875rem Overpass, sans-serif;
+} 
+.title-darkmode { color: #ffffff; } 
+.title-lightmode { color: #000000; }
+
+
+
+.data-group {
+display: flex;
+flex: auto;
+width: 100%;
+flex-direction: row;
+padding: 0.625rem 0;
+align-items: center;
+justify-content: stretch;
+}
+
+
+.data-field {
+display: flex;
+flex: auto;
+width: 30%;
+flex-direction: row;
+padding: 0.625rem 1.875rem;
+align-items: center;
+justify-content: flex-start;
+gap: 1.25rem;
+} 
+#head { width: 40%; }
+
+.label {
+letter-spacing: 0.02rem;
+font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode { color: #ffffff; } 
+.pre-lightmode { color: #000000; }
+
+.data {
+display: flex;
+flex-direction: row;
+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;
+align-items: center;
+justify-content: flex-start;
+letter-spacing: 0.02rem;
+font: 400 0.75rem/1.875rem Overpass, sans-serif;
+} 
+.data-darkmode {
+background-color: #212121;
+color: #ffffff;
+} 
+.data-lightmode {
+background-color: #ebebeb;
+color: #000000;
+} 
+
+
+.notes {
+display: flex;
+flex: auto;
+flex-direction: column;
+padding: 1.25rem 1.875rem 0.625rem;
+align-items: flex-start;
+justify-content: center;
+gap: 0.625rem;
+}
+
+.area-title {
+letter-spacing: 0.03rem;
+font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+#notes { align-self: stretch; }
+
+</style>

components/server/ClientDepartmentEmployeeList.vue

@@ -0,0 +1,117 @@
+
+<template>
+    <section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employees:</div>
+        <table class="data-table" id="client-employee-table">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
+                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                <th :class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">Job Title</th>
+                <th :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">Pronouns</th>
+            </tr>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
+                <td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                <td :class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">...</td>
+                <td :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">...</td>
+            </tr>
+        </table>
+    </section>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+  name: "ClientDepartmentEmployeeList",
+};
+</script>   
+
+  
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+.section-darkmode { background-color: #2c2c2c; }
+.section-lightmode { background-color: #ffffff; }
+
+
+
+.label {
+    padding: 1.25rem 0;
+    letter-spacing: 0.04rem;
+    text-decoration-line: underline;
+    font: 400 1rem/1.875rem Overpass, sans-serif;
+}
+.label-darkmode { color: #ffffff; }
+.label-lightmode { color: #000000; }
+
+
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+.tr-darkmode { border-top: 0.0625rem solid #000000; }
+.tr-lightmode { border-top: 0.0625rem solid #8e8e8e; }
+
+th, td {
+    height: 1.875rem;
+    width: 35%;
+    padding: 0;
+    text-align: left;
+    border-left: none;
+    letter-spacing: 0.02rem;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+th { font: 700 0.875rem/1.875rem Overpass, sans-serif; }
+.th-darkmode, .td-darkmode { 
+    color: #ffffff;
+    border-right: 0.0625rem solid #000000;
+}
+.th-lightmode, .td-lightmode { 
+    color: #000000;
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.ID { width: 20%; }
+.Pronouns { width: 10%; }
+
+.Pronouns-darkmode { border-right: none; }
+.Pronouns-lightmode { border-right: none; }
+
+
+</style>

components/server/ClientDepartmentList.vue

@@ -0,0 +1,112 @@
+<template>
+    <section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Departments:</div>
+        <table class="data-table" id="client-employee-table">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
+                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                <th :class="['DHead', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'DHead-darkmode' : 'DHead-lightmode']">Head</th>
+            </tr>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
+                <td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                <td :class="['DHead', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'DHead-darkmode' : 'DHead-lightmode']">...</td>
+            </tr>
+        </table>
+    </section>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+  name: "ClientDepartmentList",
+};
+</script>   
+
+  
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+.section-darkmode { background-color: #2c2c2c; }
+.section-lightmode { background-color: #ffffff; }
+
+
+
+.label {
+    padding: 1.25rem 0;
+    letter-spacing: 0.04rem;
+    text-decoration-line: underline;
+    font: 400 1rem/1.875rem Overpass, sans-serif;
+}
+.label-darkmode { color: #ffffff; }
+.label-lightmode { color: #000000; }
+
+
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+.tr-darkmode { border-top: 0.0625rem solid #000000; }
+.tr-lightmode { border-top: 0.0625rem solid #8e8e8e; }
+
+th, td {
+    height: 1.875rem;
+    width: 40%;
+    padding: 0;
+    text-align: left;
+    border-left: none;
+    letter-spacing: 0.02rem;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+th { font: 700 0.875rem/1.875rem Overpass, sans-serif; }
+.th-darkmode, .td-darkmode { 
+    color: #ffffff;
+    border-right: 0.0625rem solid #000000;
+}
+.th-lightmode, .td-lightmode { 
+    color: #000000;
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.ID { width: 20%; }
+
+.DHead { border-right: none; }
+
+
+</style>

components/server/ClientEmployee.vue

@@ -0,0 +1,191 @@
+<template>
+  <section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Employee name</pre>
+    <div class="data-group" id="personal-data">
+      <div class="data-group" id="full-name">
+        <div class="data-field" id="ntitle">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Title/-s:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+        <div class="data-field" id="first-name">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">First Name/-s:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+        <div class="data-field" id="last-name">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Last Name/-s:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+      </div>
+      <div class="data-group" id="other">
+        <div class="data-field" id="id">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+        <div class="data-field" id="pronouns">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Pronouns:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+        <div class="data-field" id="preferred-name">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Preferred Name:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+      </div>
+    </div>
+    <div class="data-group" id="employment-data">
+      <div class="data-field" id="client-id">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client ID:</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+      </div>
+      <div class="data-field" id="department">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Department:</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+      </div>
+      <div class="data-field" id="job-title">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Job Title:</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+      </div>
+    </div>
+    <div class="data-group" id="contact-data">
+      <div class="data-field" id="phone">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phone No.:</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+      </div>
+      <div class="data-field" id="mail">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">E-Mail:</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+      </div>
+    </div>
+    <div class="notes">
+      <pre  :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
+      <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+    </div>
+  </section>
+</template>
+
+
+
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+  name: "ClientEmployee",
+};
+</script>   
+  
+  
+  
+<style scoped>
+
+* { 
+  box-sizing: border-box;
+  margin: 0; 
+}
+
+
+section {
+  display: flex;
+  flex-direction: column;
+  padding: 1.25rem 1.875rem;
+  border-radius: 0.625rem;
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+  align-items: stretch;
+  justify-content: center;
+} 
+.section-darkmode { background-color: #2c2c2c; }
+.section-lightmode { background-color: #ffffff; }
+
+
+.title {
+  padding: 1.25rem 0;
+  letter-spacing: 0.04rem;
+  text-decoration-line: underline;
+  font: italic 400 1rem/1.875rem Overpass, sans-serif;
+} 
+.title-darkmode { color: #ffffff; } 
+.title-lightmode { color: #000000; }
+
+
+
+.data-group {
+  display: flex;
+  flex: auto;
+  width: 100%;
+  flex-direction: row;
+  padding: 1.25rem 0;
+  align-items: center;
+  justify-content: stretch;
+}
+#personal-data {
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: 0.625rem;
+}
+#full-name, #other { padding: 0; }
+
+
+.data-field {
+  display: flex;
+  flex: auto;
+  width: 20%;
+  flex-direction: row;
+  padding: 0 1.875rem;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 1.25rem;
+} 
+#first-name, #last-name, #department, #job-title, #phone { width: 40%; }
+#preferred-name, #mail { width: 60%; }
+
+.label {
+  letter-spacing: 0.02rem;
+  font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode { color: #ffffff; } 
+.pre-lightmode { color: #000000; }
+
+.data {
+  display: flex;
+  flex-direction: row;
+  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;
+  align-items: center;
+  justify-content: flex-start;
+  letter-spacing: 0.02rem;
+  font: 400 0.75rem/1.875rem Overpass, sans-serif;
+} 
+.data-darkmode {
+  background-color: #212121;
+  color: #ffffff;
+} 
+.data-lightmode {
+  background-color: #ebebeb;
+  color: #000000;
+} 
+
+
+.notes {
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  padding: 1.25rem 1.875rem 0.625rem;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 0.625rem;
+}
+
+.area-title {
+  letter-spacing: 0.03rem;
+  font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+#notes { align-self: stretch; }
+
+</style>

components/server/ClientEmployeeList.vue

@@ -0,0 +1,116 @@
+<template>
+    <section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employees:</div>
+        <table class="data-table" id="client-employee-table">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
+                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                <th :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">Department / Job Title</th>
+                <th :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">Pronouns</th>
+            </tr>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
+                <td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                <td :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">...</td>
+                <td :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">...</td>
+            </tr>
+        </table>
+    </section>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+  name: "ClientEmployeeList",
+};
+</script>   
+
+  
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+.section-darkmode { background-color: #2c2c2c; }
+.section-lightmode { background-color: #ffffff; }
+
+
+
+.label {
+    padding: 1.25rem 0;
+    letter-spacing: 0.04rem;
+    text-decoration-line: underline;
+    font: 400 1rem/1.875rem Overpass, sans-serif;
+}
+.label-darkmode { color: #ffffff; }
+.label-lightmode { color: #000000; }
+
+
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+.tr-darkmode { border-top: 0.0625rem solid #000000; }
+.tr-lightmode { border-top: 0.0625rem solid #8e8e8e; }
+
+th, td {
+    height: 1.875rem;
+    width: 35%;
+    padding: 0;
+    text-align: left;
+    border-left: none;
+    letter-spacing: 0.02rem;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+th { font: 700 0.875rem/1.875rem Overpass, sans-serif; }
+.th-darkmode, .td-darkmode { 
+    color: #ffffff;
+    border-right: 0.0625rem solid #000000;
+}
+.th-lightmode, .td-lightmode { 
+    color: #000000;
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.ID { width: 20%; }
+.Pronouns { width: 10%; }
+
+.Pronouns-darkmode { border-right: none; }
+.Pronouns-lightmode { border-right: none; }
+
+
+</style>

components/server/ClientTable.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+    <section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <table class="data-table" id="client-table">
             <tbody>
                 <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
@@ -21,7 +21,7 @@
                 </tr>
             </tbody>
         </table>
-    </div>
+    </section>
 </template>
   
   
@@ -52,12 +52,12 @@ export default {
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
 }
 
-.div-darkmode {
+.section-darkmode {
     background-color: #2c2c2c;
 }
 
-.div-lightmode {
+.section-lightmode {
-    background-color: #fff;
+    background-color: #ffffff;
 }
 
 .data-table {
@@ -94,8 +94,7 @@ export default {
     border-top: 0.0625rem solid #8e8e8e;
 }
 
-th,
+th, td {
-td {
     height: 1.875rem;
     text-align: left;
     padding: 0;
@@ -103,14 +102,12 @@ td {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-.th-darkmode,
+.th-darkmode, .td-darkmode {
-.td-darkmode {
     color: #ffffff;
 }
 
-.th-lightmode,
+.th-lightmode, .td-lightmode {
-.td-lightmode {
+    color: #000000;
-    color: #000;
 }
 
 th {

components/server/HardwareSpecifications.vue

@@ -1,5 +1,5 @@
 <template>
-    <section v-if="hardwareBoolean && !addAssetBool"
+    <section v-if="hardwareBoolean && !addBool"
         :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:</div>
         <div class="asset-data">
@@ -54,7 +54,7 @@
             </div>
         </div>
     </section>
-    <section v-if="addAssetBool" :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="addBool" :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:</div>
         <div class="asset-data">
             <div class="model-CPU">
@@ -111,9 +111,9 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
-const editable = computed(() => store.state.assetEditable);
+const editable = computed(() => store.state.editable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
-const addAssetBool = computed(() => store.state.newAsset);
+const addBool = computed(() => store.state.new);
 
 const newHardwareBool = ref(true);
 const newModel = ref('');
@@ -242,7 +242,7 @@ export default {
     align-items: center;
     justify-content: flex-start;
     width: 100%;
-    padding: 0 1.875rem;
+    padding: 0.8rem 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;
 }

components/server/NetworkSpecifications.vue

@@ -1,5 +1,5 @@
 <template>
-    <section v-if="networkBoolean && !addAssetBool"
+    <section v-if="networkBoolean && !addBool"
         :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="network">Network specifications:</div>
         <div class="asset-data">
@@ -37,7 +37,7 @@
             </div>
         </div>
     </section>
-    <section v-if="addAssetBool" :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="addBool" :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="network">Network specifications:</div>
         <div class="asset-data">
             <div class="IPv4-MAC">
@@ -66,7 +66,7 @@
             </div>
         </div>
     </section>
-    <section v-if="addAssetBool" id="saveNewItem">
+    <section v-if="addBool" id="saveNewItem">
         <button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addItem()">Safe</button>
     </section>
 </template>
@@ -80,9 +80,9 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
-const editable = computed(() => store.state.assetEditable);
+const editable = computed(() => store.state.editable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
-const addAssetBool = computed(() => store.state.newAsset);
+const addBool = computed(() => store.state.new);
 const newAssetName = computed(() => store.state.newAssetName);
 const newCustomerID = computed(() => store.state.newCustomerID);
 const newCustomer = computed(() => store.state.newCustomer);
@@ -120,7 +120,7 @@ const configItems = ref([]);
 
 // get config item from id
 const getItemById = async () => {
-    if (!addAssetBool.value) {
+    if (!addBool.value) {
         try {
             const response = await Axios.get(
                 `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
@@ -332,7 +332,7 @@ const addItem = async () => {
                 MAC: newMAC.value,
                 subnetmask: newSubnetmask.value,
             });
-        store.commit('resetAssetStore');
+        store.commit('resetStore');
         store.commit('changeToAssetlist');
     } catch (err) {
         console.log(err.response.statusText);
@@ -394,7 +394,7 @@ export default {
     align-items: center;
     justify-content: flex-start;
     width: 100%;
-    padding: 0 1.875rem;
+    padding: 0.8rem 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;
 }

components/server/ProductionOrdersTemplate.vue

@@ -1,11 +1,70 @@
 <template>
-    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['production-orders-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Template name</h2>
+        <h2 v-if="!editable" :class="['production-orders-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
+            pot.name }}</h2>
+        <input v-if="editable" v-model="pot.name" @change="updatePOT()"
+            :class="['data', 'pot-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
         <div class="production-orders-template-data">
             <div class="client-ID">
                 <div class="data-field" id="client">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Client:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ pot.customer }}</pre>
+                    <select v-if="editable" id="customersDropDownChosenCI" v-model="pot.customer"
+                        @change="updateCustomerID()" :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                        <option v-for="cust in customers" :key="cust.primaryID">
+                            {{ cust.customername }}
+                        </option>
+                    </select>
+                </div>
+                <div class="data-field" id="ID">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">ID:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ pot.templateID }}</pre>
+                </div>
+            </div>
+            <div class="user">
+                <div class="data-field" id="empty">
+                    &nbsp;
+                </div>
+                <div class="data-field" id="user">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">User:</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ pot.user }}</pre>
+                    <input v-if="editable" v-model="pot.user" @change="updatePOT()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+        </div>
+        <div class="production-orders-template-data">
+            <div class="additional">
+                <div class="description">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
+                    <input v-model="pot.description" :readonly="!editable" @change="updatePOT()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
+                </div>
+            </div>
+            <div class="additional">
+                <div class="notes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <input v-model="pot.notes" :readonly="!editable" @change="updatePOT()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
+                </div>
+            </div>
+        </div>
+    </section>
+    <section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <input v-model="newName" @change="updateProductionOrder()"
+            :class="['data', 'production-orders-template-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
+        <div class="production-orders-template-data">
+            <div class="client-ID">
+                <div class="data-field" id="client">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
+                    <select id="customersDropDownChosenCI" v-model="newCustomer" @change="updateNewCustomerID()"
+                        :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                        <option v-for="cust in customers" :key="cust.primaryID">
+                            {{ cust.customername }}
+                        </option>
+                    </select>
                 </div>
                 <div class="data-field" id="ID">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">ID:</pre>
@@ -18,7 +77,8 @@
                 </div>
                 <div class="data-field" id="user">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">User:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    <input v-model="newUser" @change="updateProductionOrder()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
         </div>
@@ -26,24 +86,196 @@
             <div class="additional">
                 <div class="description">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
+                    <input v-model="newDescription" @change="updateProductionOrder()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
                 </div>
             </div>
             <div class="additional">
                 <div class="notes">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+                    <input v-model="newNotes" @change="updateProductionOrder()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
                 </div>
             </div>
         </div>
     </section>
 </template>
     
-    
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
-const darkMode = ref(true)
+const store = useStore();
+const editable = computed(() => store.state.editable);
+const chosenPOTId = computed(() => store.state.chosenPOTId);
+const deleteBool = computed(() => store.state.deleteBool);
+const addBool = computed(() => store.state.new);
+
+const darkMode = ref(true);
+const pot = ref({});
+const customers = ref([]);
+const customer = ref({});
+const productionOrderTemplates = ref([]);
+
+const newName = ref('');
+const newCustomerID = ref('');
+const newCustomer = ref('');
+const newUser = ref('');
+const newDescription = ref('');
+const newNotes = ref('');
+
+//get all customers
+const getCustomers = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllCustomers`
+        );
+        customers.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+const confirmDeletePOT = async () => {
+    if (deleteBool.value === true) {
+        if (confirm("Do you really want to delete this production order template? It cannot be undone!")) {
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteProductionOrderTemplate/${chosenPOTId.value}`);
+                store.commit('undoDelete');
+                store.commit('changeToTemplatelist');
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteTodosPOT/${chosenPOTId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        } else {
+            store.commit('undoDelete');
+        }
+    }
+}
+
+//get all productionOrder templates todos
+const getProductionOrderTemplates = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
+        productionOrderTemplates.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//update data
+const updatePOT = async () => {
+    if (pot.value.name.trim() === "") {
+        alert("Please add a production order template name!");
+        return;
+    } else {
+        var counter = 0;
+        // check if production order template name already exists
+        productionOrderTemplates.value.forEach(p => {
+            if (p.name === pot.value.name) {
+                counter += 1;
+            }
+        });
+        if (counter == 2) {
+            alert("This production order template name already exists. Please choose an unique production order template name or modify respectively delete the old one!");
+            pot.value.name = '';
+            return;
+        }
+        try {
+            await Axios.put(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateProductionOrderTemplate`,
+                {
+                    templateID: pot.value.templateID,
+                    name: pot.value.name,
+                    customerID: pot.value.customerID,
+                    customer: pot.value.customer,
+                    lastView: pot.value.lastView,
+                    user: pot.value.user,
+                    description: pot.value.description,
+                    notes: pot.value.notes,
+                }
+            )
+            await getPOTById();
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// update customerid if customer was changed
+const updateCustomerID = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${pot.value.customer}`);
+        customer.value = response.data;
+        pot.value.customerID = customer.value.customerID;
+        store.commit('toggleClientChanged');
+        store.commit('toggleClientId', pot.value.customerID);
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+    await updatePOT();
+}
+
+// get production order template from id
+const getPOTById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
+            );
+            pot.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// update customerid if customer was changed
+const updateNewCustomerID = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${newCustomer.value}`);
+        newCustomerID.value = response.data.customerID;
+        store.commit('toggleClientChanged');
+        store.commit('toggleClientId', newCustomerID.value)
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+    updateProductionOrder();
+}
+
+// update production order template fields in the store
+const updateProductionOrder = () => {
+    const productionOrderTemplate = {
+        name: newName.value,
+        customerId: newCustomerID.value,
+        customer: newCustomer.value,
+        user: newUser.value,
+        description: newDescription.value,
+        notes: newNotes.value
+    };
+    store.commit('updateProductionOrderTemplateComponent', productionOrderTemplate);
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
+
+watch(deleteBool, confirmDeletePOT);
+
+onMounted(() => {
+    getPOTById();
+    getProductionOrderTemplates();
+    triggerBackendCallsWithDelay(getCustomers);
+});
 </script>
 
 <script>
@@ -73,7 +305,15 @@ export default {
     background-color: #fff;
 }
 
-
+.pot-name-input {
+    padding: 1rem 0;
+    margin: 1rem;
+    font-size: initial;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
 
 .production-orders-template-name {
     align-self: stretch;
@@ -84,6 +324,16 @@ export default {
         sans-serif;
 }
 
+.production-orders-template-name-input {
+    padding: 1rem 0;
+    margin: 1rem;
+    font-size: initial;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
+
 .h2-darkmode {
     color: #fff;
 }
@@ -98,7 +348,7 @@ export default {
     align-items: center;
     justify-content: flex-start;
     width: 95%;
-    padding: 0 1.875rem;
+    padding: 0.8rem 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;
 }
@@ -137,6 +387,18 @@ export default {
     color: #000;
 }
 
+.h2-input-darkmode {
+    background-color: #212121;
+}
+
+.h2-input-lightmode {
+    background-color: #EBEBEB;
+}
+
+.input {
+    border: none;
+}
+
 .production-orders-template-data {
     display: flex;
     flex-direction: row;
@@ -145,6 +407,22 @@ export default {
     align-self: stretch;
 }
 
+.select-darkmode {
+    border: none;
+    color: white;
+    background: #212121;
+    padding: 0.4rem;
+    border-radius: 0.3125rem;
+}
+
+.select-lightmode {
+    border: none;
+    color: black;
+    background: #EBEBEB;
+    padding: 0.4rem;
+    border-radius: 0.3125rem;
+}
+
 .client-ID,
 .user {
     display: flex;

components/server/ProductionOrdersTemplateTable.vue

@@ -1,4 +1,9 @@
 <template>
+    <section v-if="searchable" :class="['pot-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Config item</div>
+        <input v-model="potSearchFilter" @change="searchPOT()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
         <table class="data-table" name="production-orders-template-table">
@@ -23,7 +28,12 @@
                         {{ template.customer }}</td>
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        {{ template.name }}</td>
+                        <nuxt-link to="/productionOrders" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            @click="goToChosenPOT(template.templateID)">
+                            {{ template.name }}
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
                         {{ template.templateID }}</td>
@@ -36,25 +46,75 @@
   
   
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
-const darkMode = ref(true)
+// get accesss to the store
+const store = useStore()
+const goToChosenPOT = (id) => {
+    store.commit('setChosenPOT', id);
+    store.commit('changeToTemplate');
+};
+
+const clientFilter = computed(() => store.state.filteredByClient);
+const searchable = computed(() => store.state.searchable);
+
+const potSearchFilter = ref('');
+const darkMode = ref(true);
 const productionOrderTemplates = ref([]);
 
 //get all productionOrder templates
 const getProductionOrderTemplates = async () => {
+    if (!(clientFilter.value === '')) {
+        await getFilteredPOTByClient();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
+            productionOrderTemplates.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all productionOrder templates based on the searched pot name
+const searchPOT = async () => {
+    if (potSearchFilter.value === '') {
+        await getProductionOrderTemplates();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOTsByPOT/${potSearchFilter.value}`);
+            productionOrderTemplates.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// update search term
+const updateSearchTerm = async () => {
+    potSearchFilter.value = '';
+    await getProductionOrderTemplates();
+}
+
+//get all productionOrder templates based on the searched client
+const getFilteredPOTByClient = async () => {
     try {
-        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOTsByClient/${clientFilter.value}`);
         productionOrderTemplates.value = response.data;
     } catch (err) {
         console.log(err.response.statusText);
     }
 }
 
-onMounted(() => {
+watch(clientFilter, getProductionOrderTemplates);
-    getProductionOrderTemplates();
+watch(searchable, updateSearchTerm);
+
+onMounted(async () => {
+    await getProductionOrderTemplates();
 });
 </script>
 
@@ -66,6 +126,18 @@ export default {
     
     
 <style scoped>
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.input {
+    border: none;
+}
+
 .data {
     display: flex;
     flex-direction: column;
@@ -79,6 +151,17 @@ export default {
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
 }
 
+.dataInput {
+    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;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
 .div-darkmode {
     background-color: #2c2c2c;
 }
@@ -94,6 +177,11 @@ export default {
     border-collapse: collapse;
 }
 
+#nuxt-link {
+    text-decoration: none;
+    color: white;
+}
+
 .table-row {
     display: flex;
     flex-direction: row;
@@ -108,6 +196,16 @@ export default {
     border-bottom: 0.0625rem solid #000000;
 }
 
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
 .tr-head-lightmode {
     border-top: none;
     border-bottom: 0.0625rem solid #8e8e8e;
@@ -130,6 +228,19 @@ td {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.pot-search {
+    display: flex;
+    align-items: center;
+    padding: 0.625em 1.875em;
+    gap: 1.25em;
+    width: 30.125em;
+    height: 3.125em;
+    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+    border-radius: 0.625em;
+    box-sizing: border-box;
+}
+
+
 .th-darkmode,
 .td-darkmode {
     color: #ffffff;
@@ -201,4 +312,16 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
+}
+
+.clientLabel {
+    width: 5.5625em;
+    height: 1.875em;
+    font-family: "Overpass";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 1.875;
+    letter-spacing: 0.05em;
+}
+</style>

components/server/SoftwareSpecifications.vue

@@ -1,5 +1,5 @@
 <template>
-    <section v-if="softwareBoolean && !addAssetBool"
+    <section v-if="softwareBoolean && !addBool"
         :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications:
             <div class="asset-data">
@@ -44,7 +44,7 @@
             </div>
         </div>
     </section>
-    <section v-if="addAssetBool" :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="addBool" :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications:
             <div class="asset-data">
                 <table class="data-table" id="asset-table-no-client">
@@ -89,9 +89,9 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
-const editable = computed(() => store.state.assetEditable);
+const editable = computed(() => store.state.editable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
-const addAssetBool = computed(() => store.state.newAsset);
+const addBool = computed(() => store.state.new);
 
 const newSoftwareBool = ref(true);
 const newSoftware = ref('');

components/server/TemplateChecklist.vue

@@ -1,5 +1,6 @@
 <template>
-    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+    <section v-if="!addBool"
+        :class="['template-checklist-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
         <table class="data-table" id="template-checkklist">
             <tbody>
@@ -15,28 +16,412 @@
                         Task</th>
                     <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
                 </tr>
-                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <tr v-for="todo in potTodos" :key="todo.primaryID"
+                    :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>
+                        {{ todo.rowID }}
+                    </td>
+                    <td v-if="!editable"
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        {{ todo.asset }}</td>
+                    <td v-if="editable"
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        <select id="customersDropDownChosenCI" v-model="todo.asset" @change="updatePOTTodo(todo)"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="ci in configItemList" :key="ci.primaryID">
+                                {{ ci.assetName }}
+                            </option>
+                        </select>
+                    </td>
+                    <td v-if="!editable"
+                        :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        {{ todo.task }}</td>
+                    <td v-if="editable"
+                        :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        <input type="text" v-model="todo.task" @change="updatePOTTodo(todo)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
+                    <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ todo.comments
+                    }}</td>
+                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
+                            v-model="todo.comments" @change="updatePOTTodo(todo)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
+                            :class="[darkMode ? 'deletePOTTodos-darkmode' : 'deletePOTTodos-lightmode']"
+                            @click="deletePOTTodo(todo.primaryID)">-</button>
+                    </td>
+                </tr>
+                <tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                        {{ newStepTodo }}
+                    </td>
                     <td
                         :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                        ...</td>
+                        <select id="customersDropDownChosenCI" v-model="newAssetTodo"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="ci in configItemList" :key="ci.primaryID">
+                                {{ ci.assetName }}
+                            </option>
+                        </select>
+                    </td>
                     <td
                         :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
-                        ...</td>
+                        <input type="text" v-model="newTaskTodo"
-                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="text"
+                            v-model="newCommentsTodo"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
+                            :class="[darkMode ? 'savePOTTodos-darkmode' : 'savePOTTodos-lightmode']"
+                            @click="addPOTTodo()">Save</button> <button
+                            :class="[darkMode ? 'deleteLastPOTTodos-darkmode' : 'deleteLastPOTTodos-lightmode']"
+                            @click="deleteNewRow()">-</button>
+                    </td>
                 </tr>
             </tbody>
         </table>
-    </div>
+    </section>
+    <section v-if="editable && !addBool" id="editPOTTodos">
+        <button :class="[darkMode ? 'editPOTTodos-darkmode' : 'editPOTTodos-lightmode']"
+            @click="addChecklistRow()">+</button>
+    </section>
+    <section v-if="addBool"
+        :class="['template-checklist-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
+        <table class="data-table" id="template-checkklist">
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                        Step</th>
+                    <th
+                        :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        Asset</th>
+                    <th
+                        :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        Task</th>
+                    <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
+                </tr>
+                <tr v-for="(newT, index) in newTodos" :key="index"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                        {{ newT.rowID }}
+                    </td>
+                    <td
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        <select id="customersDropDownChosenCI" v-model="newT.asset"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="ci in configItemList" :key="ci.primaryID">
+                                {{ ci.assetName }}
+                            </option>
+                        </select>
+                    </td>
+                    <td
+                        :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        <input type="text" v-model="newT.task"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
+                            v-model="newT.comments"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
+                            :class="[darkMode ? 'deletePOTTodos-darkmode' : 'deleteLastPOTTodos-lightmode']"
+                            @click="deletePOTTodoFromNewTodos(index)">-</button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+    <section v-if="addBool" id="editPOTTodos">
+        <button :class="[darkMode ? 'editPOTTodos-darkmode' : 'editPOTTodos-lightmode']"
+            @click="addRowForNewPOT()">+</button>
+    </section>
+    <section v-if="addBool" id="saveNewPOT">
+        <button :class="[darkMode ? 'saveNewPOT-darkmode' : 'saveNewPOT-lightmode']" @click="addPOT()">Safe</button>
+    </section>
 </template>
   
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const addBool = computed(() => store.state.new);
+const editable = computed(() => store.state.editable);
+
+const newNamePOT = computed(() => store.state.newNamePOT);
+const newCustomerIDPOT = computed(() => store.state.newCustomerIDPOT);
+const newCustomerPOT = computed(() => store.state.newCustomerPOT);
+const newLastViewPOT = computed(() => store.state.newLastViewPOT);
+const newUserPOT = computed(() => store.state.newUserPOT);
+const newDescriptionPOT = computed(() => store.state.newDescriptionPOT);
+const newNotesPOT = computed(() => store.state.newNotesPOT);
+const newStepTodo = computed(() => potTodos.value.length);
+const chosenPOTId = computed(() => store.state.chosenPOTId);
+const clientChanged = computed(() => store.state.clientChanged);
+const changedClientId = computed(() => store.state.changedClientId);
 
 const darkMode = ref(true)
+const addRow = ref(false);
+const configItemList = ref([]);
+const productionOrderTemplates = ref([]);
+const potTodos = ref([])
+const pot = ref({})
+const newAssetTodo = ref('');
+const newTaskTodo = ref('');
+const newCommentsTodo = ref('');
+const newTodos = reactive([]);
+const newRowId = computed(() => newTodos.length)
+
+// delete new todo row
+const deleteNewRow = () => {
+    newAssetTodo.value = '';
+    newTaskTodo.value = '';
+    newCommentsTodo.value = '';
+    addRow.value = false;
+}
+
+const deletePOTTodoFromNewTodos = (index) => {
+    newTodos.splice(index, 1);
+    newTodos.forEach((todo, i) => {
+        todo.rowID = i 
+    })
+}
+
+// add new production order template
+const addPOT = async () => {
+    // check if all input data is valid
+    if (newNamePOT.value.trim() === "") {
+        alert("Please add a production order template name!");
+        return;
+    } else {
+        var counter = 0;
+        if (!(productionOrderTemplates.value.length == null)) {
+            // check if production order template name already exists
+            productionOrderTemplates.value.forEach(pot => {
+                if (pot.name === newNamePOT.value) {
+                    counter += 1;
+                }
+            });
+            if (counter == 1) {
+                alert("This production order template name already exists. Please choose an unique production order template name or modify respectively delete the old one!");
+                return;
+            }
+        }
+    }
+    if (newCustomerPOT.value.length === 0) {
+        alert("Please choose a client!");
+        return;
+    }
+    let allFine = true;
+    newTodos.forEach(todo => {
+        if (todo.asset.length === 0) {
+            alert(`Please choose a config item for all todos.`);
+            allFine = false
+        }
+    })
+    if (!allFine) {
+        return
+    }
+    try {
+        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addPOT`,
+            {
+                name: newNamePOT.value,
+                customerID: newCustomerIDPOT.value,
+                customer: newCustomerPOT.value,
+                lastView: newLastViewPOT.value,
+                user: newUserPOT.value,
+                description: newDescriptionPOT.value,
+                notes: newNotesPOT.value,
+            });
+        store.commit('resetStore');
+        store.commit('changeToTemplatelist');
+        newTodos.forEach(async todo => {
+            try {
+                const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoPOT`,
+                    {
+                        templateID: response.data,
+                        rowID: todo.rowID,
+                        asset: todo.asset,
+                        task: todo.task,
+                        comment: todo.comments,
+                    });
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        })
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new row of todo for the new pot
+const addRowForNewPOT = async () => {
+    if (newCustomerPOT.value.length === 0) {
+        alert("Please choose a client first!");
+        return;
+    }
+    await getConfigItemsFromClient();
+    newTodos.push({
+        templateID: chosenPOTId.value,
+        rowID: newRowId.value,
+        asset: '',
+        task: '',
+        comments: ''
+    });
+}
+
+//update data
+const updatePOTTodo = async (todo) => {
+    if (todo.asset.length === 0) {
+        alert(`Please add the missing config item in row ${todo.rowID}!`);
+        return;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updatePOTTodo`,
+            {
+                primaryID: todo.primaryID,
+                templateID: todo.templateID,
+                rowID: todo.rowID,
+                asset: todo.asset,
+                task: todo.task,
+                comments: todo.comments,
+            }
+        );
+        await getPOTById();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new production order template todo
+const addPOTTodo = async () => {
+    // check if all input data is valid
+    if (newAssetTodo.value.length === 0) {
+        alert("Please choose an asset for the new todo!");
+        return;
+    }
+    try {
+        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoPOT`,
+            {
+                templateID: chosenPOTId.value,
+                rowID: newStepTodo.value,
+                asset: newAssetTodo.value,
+                task: newTaskTodo.value,
+                comment: newCommentsTodo.value,
+            });
+        addRow.value = false;
+        await getPOTTodosById();
+        newAssetTodo.value = '';
+        newTaskTodo.value = '';
+        newCommentsTodo.value = '';
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new row for the template checklist
+const addChecklistRow = async () => {
+    await getConfigItemsFromClient();
+    if (addRow.value) {
+        alert('Please confirm the last added row first.')
+        return
+    }
+    addRow.value = true
+}
+
+//get all production order templates
+const getProductionOrderTemplates = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
+        productionOrderTemplates.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1000);
+}
+
+// get production order template todos from id
+const getPOTTodosById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosProductionOrderTemplate/${chosenPOTId.value}`
+            );
+            potTodos.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all config items from the selected client
+const getConfigItemsFromClient = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromClient/${pot.value.customerID}`);
+            configItemList.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromClient/${changedClientId.value}`);
+            configItemList.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    if (clientChanged.value) {
+        store.commit('toggleClientChanged');
+    }
+}
+
+// get production order template from id
+const getPOTById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
+            );
+            pot.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    await getConfigItemsFromClient();
+}
+
+const deletePOTTodo = async (id) => {
+    if (confirm("Do you really want to delete this production order template todo? It cannot be undone!")) {
+        try {
+            await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deletePOTTodo/${id}`);
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } 
+    await getPOTTodosById();
+}
+
+watch(clientChanged, getPOTById);
+
+onMounted(() => {
+    getPOTTodosById();
+    getPOTById();
+    triggerBackendCallsWithDelay(getProductionOrderTemplates);
+});
 </script>
 
 <script>
@@ -49,25 +434,53 @@ export default {
 <style scoped>
 .data {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: flex-start;
-    justify-content: center;
+    padding: 0 0.625rem;
-    align-self: stretch;
+    border-radius: 0.3125rem;
-    width: 100%;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
-    padding: 1.25rem 1.875rem;
+    letter-spacing: 5%;
-    gap: 1.25rem;
+    font: 400 0.75rem/250% Overpass, sans-serif;
-    border-radius: 0.625rem;
-    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
 }
 
-.div-darkmode {
+.section-darkmode {
     background-color: #2c2c2c;
 }
 
-.div-lightmode {
+.section-lightmode {
     background-color: #fff;
 }
 
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.select-darkmode {
+    border: none;
+    color: white;
+    background: #212121;
+    padding: 0.4rem;
+    border-radius: 0.3125rem;
+}
+
+.select-lightmode {
+    border: none;
+    color: black;
+    background: #EBEBEB;
+    padding: 0.4rem;
+    border-radius: 0.3125rem;
+}
+
+.input {
+    border: none;
+}
+
 .data-table {
     width: 100%;
     padding: 0 0.625rem;
@@ -125,6 +538,16 @@ th {
     color: #000;
 }
 
+.template-checklist-information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
 .Step {
     width: 8%;
 }
@@ -163,6 +586,7 @@ th {
 
 .Comments {
     width: 35%;
+    display: flex;
 }
 
 .label {
@@ -183,4 +607,144 @@ th {
 .label-lightmode {
     color: #000;
 }
+
+.editPOTTodos-darkmode {
+    background: #2c2c2c;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 0.825rem 0.7rem;
+    width: 4%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+
+.savePOTTodos-darkmode {
+    background: #212121;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 10rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.saveNewPOT-darkmode {
+    background: #2c2c2c;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 1rem 1.875rem;
+    width: 8%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.deletePOTTodos-darkmode {
+    background: #212121;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 15.8rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.deleteLastPOTTodos-darkmode {
+    background: #212121;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 2rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+
+.editPOTTodos-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    margin-left: 15rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+    border-radius: 0.625rem;
+}
+
+.savePOTTodos-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 10rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.deletePOTTodos-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 15.8rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.deleteLastPOTTodos-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 2rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.saveNewPOT-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 1rem 1.875rem;
+    width: 8%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.deletePOTTodos-darkmode:hover,
+.deleteLastPOTTodos-darkmode:hover,
+
+.savePOTTodos-darkmode:hover,
+.editPOTTodos-darkmode:hover,
+.saveNewPOT-darkmode:hover {
+    background-color: #444444;
+    cursor: pointer;
+}
+
+.deletePOTTodos-lightmode:hover,
+.deleteLastPOTTodos-lightmode:hover,
+
+.savePOTTodos-lightmode:hover,
+.editPOTTodos-lightmode:hover,
+.saveNewPOT-lightmode:hover {
+    background-color: #ACACAC;
+    cursor: pointer;
+}
+
+#saveNewPOT {
+    text-align: center;
+}
+
+#editPOTTodos {
+    text-align: right;
+}
 </style>

documentation/.$Datenbankmodell.drawio.bkp

@@ -1,6 +1,6 @@
-<mxfile host="Electron" modified="2024-02-01T15:29:10.628Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="R4sGFqNy6FSLZX5LoMO_" version="22.0.3" type="device" pages="2">
+<mxfile host="Electron" modified="2024-02-14T10:28:35.536Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="_zOGEdVgp7g5JHBy-mYE" version="22.0.3" type="device" pages="2">
   <diagram name="Seite-1" id="VLuSDTVFFHJCdRpH-1WC">
-    <mxGraphModel dx="246" dy="2876" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+    <mxGraphModel dx="393" dy="2849" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
       <root>
         <mxCell id="0" />
         <mxCell id="1" parent="0" />
@@ -62,7 +62,7 @@
           <mxGeometry y="240" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="DauqCNUrC7Z9yIe88X-r-29" value="changeDB" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
-          <mxGeometry x="75" y="-560" width="140" height="840" as="geometry" />
+          <mxGeometry x="75" y="-560" width="140" height="870" as="geometry" />
         </mxCell>
         <mxCell id="DauqCNUrC7Z9yIe88X-r-67" value="primaryID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="30" width="140" height="30" as="geometry" />
@@ -130,21 +130,24 @@
         <mxCell id="DauqCNUrC7Z9yIe88X-r-63" value="version" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="660" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="qbUp6gtjYndA0fy5zK6_-1" value="networkBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="-qW6OXXOOqjT1X6LnSAE-1" value="license" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="690" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-53" value="IPv4" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="qbUp6gtjYndA0fy5zK6_-1" value="networkBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="720" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-56" value="IPv6" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-53" value="IPv4" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="750" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-54" value="MAC" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-56" value="IPv6" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="780" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-55" value="subnetmask" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-54" value="MAC" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="810" width="140" height="30" as="geometry" />
         </mxCell>
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-55" value="subnetmask" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+          <mxGeometry y="840" width="140" height="30" as="geometry" />
+        </mxCell>
         <mxCell id="DauqCNUrC7Z9yIe88X-r-33" value="productionOrders" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#009900;" parent="1" vertex="1">
           <mxGeometry x="920" y="-85" width="140" height="450" as="geometry" />
         </mxCell>

documentation/Datenbankmodell.drawio

@@ -1,6 +1,6 @@
-<mxfile host="Electron" modified="2024-02-14T10:28:35.536Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="_zOGEdVgp7g5JHBy-mYE" version="22.0.3" type="device" pages="2">
+<mxfile host="Electron" modified="2024-02-27T19:18:30.556Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="pTIMz7977P7LLgTl7RJZ" version="22.0.3" type="device" pages="2">
   <diagram name="Seite-1" id="VLuSDTVFFHJCdRpH-1WC">
-    <mxGraphModel dx="393" dy="2849" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+    <mxGraphModel dx="395" dy="2842" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
       <root>
         <mxCell id="0" />
         <mxCell id="1" parent="0" />
@@ -580,7 +580,7 @@
         <mxCell id="WukdXvazNq34soQIU5Al-108" value="task" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-103" vertex="1">
           <mxGeometry y="150" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-109" value="comment" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-103" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-109" value="comments" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-103" vertex="1">
           <mxGeometry y="180" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-128" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="WukdXvazNq34soQIU5Al-126" target="DauqCNUrC7Z9yIe88X-r-22" edge="1">

layouts/Actionbar.vue

@@ -1,16 +1,12 @@
 <template>
-  <aside
+  <aside :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
-    :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
+    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="toggleActionbar">
-    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
+      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
-      @click="toggleActionbar">
-      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-        src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
     </div>
     <nav class="actions">
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search" @click="toggleSearched">
         <div class="icon" id="search-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Search-Icon.svg" />
-            src="../icons/actionbar-icons/Search-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
@@ -18,8 +14,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter" @click="toggleFiltered">
         <div class="icon" id="filter-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Filter-Icon.svg" />
-            src="../icons/actionbar-icons/Filter-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
@@ -27,8 +22,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
         <div class="icon" id="instances-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Instances-Icon.svg" />
-            src="../icons/actionbar-icons/Instances-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
@@ -36,8 +30,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
         <div class="icon" id="attachments-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Attachments-Icon.svg" />
-            src="../icons/actionbar-icons/Attachments-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
@@ -45,8 +38,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
         <div class="icon" id="sell-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Sell-Icon.svg" />
-            src="../icons/actionbar-icons/Sell-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
@@ -54,17 +46,15 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
         <div class="icon" id="archive-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Archive-Icon.svg" />
-            src="../icons/actionbar-icons/Archive-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="addAsset">
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
         <div class="icon" id="new-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Add-New-Icon.svg" />
-            src="../icons/actionbar-icons/Add-New-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
@@ -72,17 +62,15 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
         <div class="icon" id="edit-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Edit-Icon.svg" />
-            src="../icons/actionbar-icons/Edit-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteAsset">
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteFunc">
         <div class="icon" id="delete-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Delete-Icon.svg" />
-            src="../icons/actionbar-icons/Delete-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
@@ -93,45 +81,40 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
 import { useStore } from 'vuex';
 
+const darkMode = ref(true)
+const isExpanded = ref(true)
+
 // get accesss to the store
 const store = useStore()
 const toggleEditable = () => {
-  store.commit('toggleEditableAsset');
+  store.commit('toggleEditable');
 };
-const deleteAsset = () => {
+const deleteFunc = () => {
-  store.commit('doDeleteAsset');
+  store.commit('doDelete');
+};
+
+const toggleActionbar = () => {
+  isExpanded.value = !isExpanded.value;
 };
 const toggleFiltered = () => {
-  store.commit('toggleFilteredAsset');
+  store.commit('toggleFiltered');
 };
 const toggleSearched = () => {
-  store.commit('toggleAssetSearchable');
+  store.commit('toggleSearchable');
 };
-const addAsset = () => {
+const add = () => {
-  store.commit('addNewAsset');
+  store.commit('add');
 };
 </script>
 
 
 <script>
-
 export default {
   name: "Actionbar",
-  data() {
-    return {
-      darkMode: true,
-      isExpanded: true,
-    };
-  },
-  methods: {
-    toggleActionbar() {
-      this.isExpanded = !this.isExpanded;
-    },
-  },
 }
-
 </script>
 
 
@@ -156,37 +139,30 @@ aside.actionbar {
   justify-content: center;
   padding: 1.875rem 0.625rem;
   gap: 1.25rem;
-  transition: all 10s ease-in-out 0s;
   overflow: clip;
 }
-
 .actionbar-darkmode {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #2C2C2C;
 }
-
 .actionbar-lightmode {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #FFFFFF;
 }
-
 aside.is-expanded {
   animation: expand 0.5s linear both;
 }
-
 aside.is-not-expanded {
   animation: contract 0.5s linear both;
-  width: stretch;
-  inline-size: stretch;
 }
 
 
 .actions {
   display: flex;
   flex-direction: column;
+  padding: 1.25rem 0;
   align-items: flex-start;
   justify-content: center;
-  padding: 1.25rem 0;
   gap: 1.25rem;
   overflow: clip;
 }
@@ -200,34 +176,21 @@ button {
   border-radius: 0.625rem;
   align-items: center;
   justify-content: flex-start;
+  gap: 0.125rem;
   border: none;
   transition: 0.2s ease-in-out;
   overflow: clip;
-  gap: 0.125rem
-}
-
-.button-darkmode {
-  background-color: #2C2C2C;
-}
-
-.button-lightmode {
-  background-color: #FFFFFF;
 }
+.button-darkmode { background-color: #2C2C2C; } 
+.button-lightmode { background-color: #FFFFFF; } 
 
 .button-darkmode:hover, 
-.indicator-darkmode:hover {
+.indicator-darkmode:hover { background-color: #444444; } 
-  background-color: #444444;
-}
 
 .button-lightmode:hover, 
-.indicator-lightmode:hover {
+.indicator-lightmode:hover {  background-color: #ACACAC; } 
-  background-color: #ACACAC;
-}
 
-.is-not-expanded>button {
+.is-not-expanded>button { align-self: center; }
-  align-self: center;
-  gap: 0.5rem;
-}
 
 
 .icon {
@@ -238,7 +201,9 @@ button {
   align-items: center;
   justify-content: center;
   padding: 0 0.5rem;
-  transition: padding 0.5s linear
+}
+.is-not-expanded .icon {
+  align-self: center;
 }
 
 #indicator-icon {
@@ -247,15 +212,8 @@ button {
   border-radius: 0.3125rem;
   transition: 0.2s ease-in-out;
 } 
+.is-not-expanded #indicator-icon { transform: rotate(180deg); }
 
-.is-not-expanded .icon {
-  align-self: center;
-  padding: 0 0.375rem;
-}
-
-.is-not-expanded #indicator-icon {
-  transform: rotate(180deg);
-}
 
 img {
   width: 0.875rem;
@@ -264,44 +222,31 @@ img {
   object-position: center;
   overflow: hidden;
 }
-
+.img-darkmode { filter: invert(100%); } 
-#indicator-icon>img {
+#indicator-icon>img { height: 1.25rem; }
-  height: 1.25rem;
-}
-
-.img-darkmode {
-  filter: invert(100%);
-}
 
 
 .label {
   display: inline-flex;
   min-width: 0;
-  padding: 0rem 0.3125rem 0rem 0rem;
+  padding: 0rem 0.625rem 0rem 0rem;
-  letter-spacing: 5%;
   align-self: center;
+  letter-spacing: 0.02rem;
   white-space: nowrap;
   font: 400 0.875rem/1.25rem Overpass, sans-serif;
 } 
-
+.label-darkmode { color: #FFFFFF; } 
-.label-darkmode {
+.label-lightmode { color: #000000; }
-  color: #FFFFFF;
-}
-
-.label-lightmode {
-  color: #000000;
-}
 
 
-.fade-enter-from,
+
-.fade-leave-to {
+.fade-enter-from, .fade-leave-to {
   opacity: 0;
 }
 
 .fade-enter-to,
 .fade-leave-from {
   opacity: 1;
-  max-width: 0;
 }
 
 .fade-enter-active {
@@ -321,8 +266,8 @@ img {
 
 @keyframes expand {
   from {
-    max-inline-size: 3.25rem;
+    max-inline-size: 3.125rem;
-    max-width: 3.25rem;
+    max-width: 3.125rem;
   }
 
   to {
@@ -338,8 +283,8 @@ img {
   }
 
   to {
-    max-inline-size: 3.25rem;
+    max-inline-size: 3.125rem;
-    max-width: 3.25rem;
+    max-width: 3.125rem;
   }
 }
 

layouts/Navigationbar.vue

@@ -1,67 +1,64 @@
 <template>
-  <aside
+  <aside :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
-    :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
     <div class="toggleNavbar">
       <div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
         <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
       </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" src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
-        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-          src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
       </div>
     </div>
     <div class="menus">
       <nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
-        <router-link to="/home" class="button"
+        <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
-          :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
           <div class="icon" id="home-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Home-Icon.svg" />
-              src="../icons/navbar-icons/Home-Icon.svg" />
           </div>
-          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</span>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</pre>
+          </Transition>
         </router-link>
       </nav>
       <nav id="site-menu">
-        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultProductionOrderPage()" id="checklists-button">
-          id="checklists-button">
           <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>
-          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</pre>
+          </Transition>
         </router-link>
-        <nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"  @click="defaultAssetPage()"
+        <nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"  @click="defaultAssetPage()" id="assets-button">
-          id="assets-button">
           <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>
-          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets</pre>
+          </Transition>
         </nuxt-link>
-        <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+        <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
-          id="solutions-button">
           <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>
-          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
+          </Transition>
         </router-link>
-        <router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+        <router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
-          id="accounting-button">
           <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" />
           </div>
-          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</span>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</pre>
+          </Transition>
         </router-link>
-        <router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+        <router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="clients-button">
-          id="clients-button">
           <div class="icon" id="clients-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Clients-Icon.svg" />
-              src="../icons/navbar-icons/Clients-Icon.svg" />
           </div>
-          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</span>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</pre>
+          </Transition>
         </router-link>
       </nav>
     </div>
@@ -80,10 +77,15 @@ const isExpanded = ref(true)
 // get accesss to the store
 const store = useStore()
 const defaultAssetPage = () => {
-  store.commit('resetAssetStore');
+  store.commit('resetStore');
   store.commit('changeToAssetlist');
 };
 
+const defaultProductionOrderPage = () => {
+  store.commit('resetStore');
+  store.commit('changeToTemplatelist')
+}
+
 const ToggleSidebar = () => {
   isExpanded.value = !isExpanded.value;
 };
@@ -102,47 +104,37 @@ export default {
   box-sizing: border-box;
 }
 
-aside {
+aside.navbar {
   display: flex;
   flex-direction: column;
   position: sticky;
   top: 5rem;
-  width: 3.125rem;
+  height: fit-content;
-  transition: 0.5s ease-in-out;
+  width: fit-content;
+  inline-size: fit-content;
+  border-radius: 0.625rem;
+  flex: 0 0 0;
+  align-items: stretch;
+  justify-content: center;
+  padding: 0.9375rem;
+  gap: 0.625rem;
+  overflow: clip;
+  overflow-clip-margin: 0.625rem;
 } 
-
 aside.is-expanded {
-  width: 12.5rem;
+  animation: expand 0.5s linear both;
 } 
-
+aside.is-not-expanded {
-.is-expanded .label {
+  animation: contract 0.5s linear both;
-  opacity: 1;
-  transition: 0.5s ease-in-out;
 } 
-
 .is-not-expanded #indicator-icon {
   transform: rotate(180deg);
   transition: 0.5s ease-in-out;
 } 
-
-
-.navbar {
-  display: flex;
-  flex-direction: column;
-  height: fit-content;
-  border-radius: 0.625rem;
-  align-items: stretch;
-  justify-content: center;
-  gap: 0.625rem;
-  padding: 0.9375rem;
-  margin: 0;
-}
-
 .navbar-darkmode {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #2C2C2C;
 } 
-
 .navbar-lightmode {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #FFFFFF;
@@ -155,75 +147,67 @@ aside.is-expanded {
   height: 2.5rem;
   align-items: center;
   justify-content: space-between;
+  overflow: clip;
+  overflow-clip-margin: 0.625rem;
 }
 
 
 .menus {
   display: flex;
   flex-direction: column;
-  position: relative;
-  justify-content: flex;
   padding: 1.25rem 0;
+  align-items: flex-start;
+  justify-content: center;
   gap: 1.875rem;
-  transition: 0.5s ease-in-out;
+  overflow: clip;
-  align-items: center;
+  overflow-clip-margin: 0.625rem;
 }
 
 
 nav {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  align-self: stretch;
   padding: 0.9375rem 0;
+  align-items: flex-start;
+  justify-content: center;
   gap: 1.875rem;
-  width: 92%;
+  overflow: clip;
+  overflow-clip-margin: 0.625rem;
 } 
 
-.menu-darkmode {
+.menu-darkmode { border-bottom: 0.0625rem solid #8E8E8E; } 
-  border-bottom: 0.0625rem solid #8E8E8E;
+.menu-lightmode { border-bottom: 0.0625rem solid #BABABA; }
-}
-
-.menu-lightmode {
-  border-bottom: 0.0625rem solid #BABABA;
-}
 
 
-
+.button,
-button,
 a {
   display: flex;
   flex-direction: row;
   align-self: stretch;
   height: 2.1875rem;
-  border-radius: 0.3125rem;
+  border-radius: 0.625rem;
   align-items: center;
   justify-content: flex-start;
-  gap: 0.3125rem;
   border: none;
-  transition: 0.5s ease-in-out;
   text-decoration: none;
-  width: 100%;
+  transition: 0.2s ease-in-out;
-}
+  overflow: clip;
-
+  overflow-clip-margin: 0.625rem;
-.button-darkmode {
-  background-color: #2C2C2C;
-}
-
-.button-lightmode {
-  background-color: #FFFFFF;
 } 
+.button-darkmode { background-color: #2C2C2C; } 
+.button-lightmode { background-color: #FFFFFF; } 
 
 .button-darkmode:hover,
 .indicator-darkmode:hover,
-.back-darkmode:hover {
+.back-darkmode:hover {  background-color: #444444; } 
-  background-color: #444444;
-}
 
 .button-lightmode:hover,
 .indicator-lightmode:hover,
-.back-lightmode:hover {
+.back-lightmode:hover { background-color: #ACACAC; }
-  background-color: #ACACAC;
+
-}
+.is-not-expanded>button { align-self: center; }
+
 
 .icon {
   display: flex;
@@ -232,24 +216,18 @@ a {
   height: 2.1875rem;
   align-items: center;
   justify-content: center;
-  transition: 0.2s ease-in-out;
 } 
-
 #back-icon,
 #indicator-icon {
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0.3125rem;
-  transition-duration: 0.5s;
+  transition: 0.2s ease-in-out;
-  transition: 0.2s ease-out;
 } 
-
 .back-darkmode:hover,
 .back-lightmode:hover,
 .indicator-darkmode:hover,
-.indicator-lightmode:hover {
+.indicator-lightmode:hover { cursor: pointer; }
-  cursor: pointer;
-}
 
 
 img {
@@ -258,28 +236,95 @@ img {
   object-fit: contain;
   object-position: center;
   overflow: hidden;
-  transition: 0.2s ease-out;
 } 
+.img-darkmode { filter: invert(100%); }
 
-.img-darkmode {
-  filter: invert(100%);
-}
 
 .label {
-  letter-spacing: 5%;
+  display: inline-flex;
+  min-width: 0;
+  padding: 0rem 0.625rem 0rem 0.3125rem;
   align-self: center;
+  letter-spacing: 0.03rem;
   white-space: nowrap;
-  margin: auto 0;
   font: 600 0.875rem/1.25rem Overpass, sans-serif;
+} 
+.label-darkmode { color: #FFFFFF; } 
+.label-lightmode { color: #000000; }
+
+
+
+.fade-enter-from,
+.fade-leave-to {
   opacity: 0;
-  transition: opacity 0.5s ease-out;
+  padding: 0;
 }
 
-.label-darkmode {
+.fade-enter-to,
-  color: #FFFFFF;
+.fade-leave-from {
+  opacity: 1;
+  padding: 0rem 0.625rem 0rem 0.3125rem;
 }
 
-.label-lightmode {
+.fade-enter-active {
-  color: #000000;
+  transition: all 0.75s linear;
+  animation: fade-in 0.5s linear forwards;
+}
+
+.fade-leave-active {
+  transition: all 0.75s linear;
+  animation: fade-out 0.5s linear forwards;
+}
+
+.fade-move {
+  transition: transform 5s
+}
+
+@keyframes expand {
+  from {
+    max-inline-size: 4.0625rem;
+    max-width: 4.0625rem;
+  }
+
+  to {
+    max-inline-size: 15rem;
+    max-width: 15rem;
+  }
+}
+
+@keyframes contract {
+  from {
+    max-inline-size: 15rem;
+    max-width: 15rem;
+  }
+
+  to {
+    max-inline-size: 4.0625rem;
+    max-width: 4.0625rem;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    max-width: 0;
+    max-inline-size: 0;
+  }
+
+  to {
+    max-width: 10rem;
+    width: fit-content;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    max-width: 10rem;
+    width: fit-content;
+  }
+
+  to {
+    max-width: 0;
+    max-inline-size: 0;
+  }
 }
 </style>

middleware/auth.js

@@ -1,12 +0,0 @@
-// export default function ({ route, redirect }) {
-//     // Check if user is not authenticated and trying to access a page other than /login
-//     if (!isAuthenticated() && route.path !== '/login') {
-//       return redirect('/login');
-//     }
-//   }
-  
-//   function isAuthenticated() {
-//     // Implement authentication logic 
-//     return false
-//     // Return true if authenticated, false otherwise
-//   }

package-lock.json

@@ -6114,9 +6114,9 @@
       "dev": true
     },
     "node_modules/ip": {
-      "version": "2.0.0",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz",
-      "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
+      "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==",
       "dev": true
     },
     "node_modules/ipaddr.js": {

pages/clients.vue

@@ -7,6 +7,11 @@
       <ClientTable v-if="onCustomerlist"/>
       <Client v-if="onCustomer"/>
       <ClientQuickAccess v-if="onCustomer"/>
+      <ClientEmployeeList v-if="onEmployeelist"/>
+      <ClientEmployee v-if="onEmployee"/>
+      <ClientDepartmentList v-if="onDepartmentlist"/>
+      <ClientDepartment v-if="onDepartment"/>
+      <ClientDepartmentEmployeeList v-if="onDepartment"/>
     </div>
   </section>
 </template>
@@ -18,8 +23,11 @@ import { ref } from 'vue';
 import ClientTable from "../components/server/ClientTable.vue";
 import Client from "../components/server/Client.vue";
 import ClientQuickAccess from "../components/server/ClientQuickAccess.vue";
-//import ClientEmployees from "../components/server/ClientEmployees.vue";
+import ClientEmployeeList from "../components/server/ClientEmployeeList.vue";
-//import ClientEmployee from "../components/server/ClientEmployee.vue";
+import ClientEmployee from "../components/server/ClientEmployee.vue";
+import ClientDepartmentList from '~/components/server/ClientDepartmentList.vue';
+import ClientDepartment from '~/components/server/ClientDepartment.vue';
+import ClientDepartmentEmployeeList from '~/components/server/ClientDepartmentEmployeeList.vue';
 
 definePageMeta({
   layout: 'default'
@@ -30,6 +38,10 @@ const darkMode = ref(true)
 // to render the right components
 const onCustomerlist = ref(true)
 const onCustomer = ref(true)
+const onEmployeelist = ref(true)
+const onEmployee = ref(true)
+const onDepartmentlist = ref(true)
+const onDepartment = ref(true)
 </script>
 
 <script>

pages/productionOrders.vue

@@ -51,19 +51,21 @@ import TemplateSearch from "../components/TemplateSearch.vue";
 import ProductionOrdersInstanceTable from "../components/server/ProductionOrdersInstanceTable.vue";
 import ProductionOrdersInstance from "../components/server/ProductionOrdersInstance.vue";
 import InstanceChecklist from "../components/server/InstanceChecklist.vue";
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const onTemplatelist = computed(() => store.state.onTemplatelist);
+const onCustomerTemplatelist = computed(() => store.state.onCustomerTemplatelist);
+const onTemplate = computed(() => store.state.onTemplate);
+const onInstancelist = computed(() => store.state.onInstancelist);
+const onInstance = computed(() => store.state.onInstance);
 
 definePageMeta({
     layout: 'default'
 })
 
 const darkMode = ref(true)
-
-// to render the right components
-const onTemplatelist = ref(true)
-const onCustomerTemplatelist = ref(false)
-const onTemplate = ref(false)
-const onInstancelist = ref(false)
-const onInstance = ref(false)
 </script>
   
 <script>

plugins/vuex.js

@@ -3,17 +3,20 @@ import { createStore } from "vuex";
 const store = createStore({
     state() {
         return {
-            assetEditable: false,
+            editable: false,
-            assetFiltered: false,
+            filtered: false,
-            assetSearchable: false,
+            searchable: false,
-            deleteAsset: false,
+            deleteBool: false,
+            new: false,
+            clientChanged: false,
+            changedClientId: -1,
+            filteredByClient: '',
+
             onAssetlist: true,
             onCustomerAssetlist: false,
             onAsset: false,
             onSolutionlistAsset: false,
             chosenAssetId: -1,
-            filteredAssetbyClient: '',
-            newAsset: false,
             newAssetName: '',
             newCustomerID: '',
             newCustomer: '',
@@ -36,20 +39,54 @@ const store = createStore({
             newSoftware: '',
             newVersion: '',
             newLicense: '',
+
+            onTemplatelist: true,
+            onCustomerTemplatelist: false,
+            onTemplate: false,
+            onInstancelist: false,
+            onInstance: false,
+            newNamePOT: '',
+            newCustomerIDPOT: '',
+            newCustomerPOT: '',
+            newLastViewPOT: '',
+            newUserPOT: '',
+            newDescriptionPOT: '',
+            newNotesPOT: '',
+            chosenPOTId: -1,
+
         };
     },
     mutations: {
-        toggleEditableAsset(state) {
+        // functions to toggle with the actionbar
-            state.assetEditable = !state.assetEditable
+        toggleEditable(state) {
+            state.editable = !state.editable
         },
-        toggleFilteredAsset(state) {
+        toggleFiltered(state) {
-            if (state.assetFiltered == false) {
+            if (state.filtered == false) {
-                state.assetFiltered = true
+                state.filtered = true
-                state.assetSearchable = false
+                state.searchable = false
             } else {
-                state.assetFiltered = false
+                state.filtered = false
             }
         },
+        toggleSearchable(state) {
+            if (state.searchable == false) {
+                state.searchable = true
+                state.filtered = false
+            } else {
+                state.searchable = false
+            }
+            state.filteredByClient = ''
+        },
+        toggleClientChanged(state) {
+            state.clientChanged = !state.clientChanged 
+        },
+        toggleClientId(state, id) {
+            state.changedClientId = id
+        },
+
+
+        // functions to change the asset pages
         changeToAssetlist(state) {
             state.onAssetlist = true
             state.onCustomerAssetlist = false
@@ -74,68 +111,45 @@ const store = createStore({
             state.onAsset = false
             state.onSolutionlistAsset = true
         },
-        setChosenAsset(state, id) {
+
-            state.chosenAssetId = id
+        // functions to change the production order pages
+        changeToTemplatelist(state) {
+            state.onTemplatelist = true
+            state.onCustomerTemplatelist = false
+            state.onTemplate = false
+            state.onInstancelist = false
+            state.onInstance = false
         },
-        resetAssetStore(state) {
+        changeToCustomerTemplatelist(state) {
-            state.assetEditable = false
+            state.onTemplatelist = false
-            state.assetFiltered = false
+            state.onCustomerTemplatelist = true
-            state.assetSearchable = false
+            state.onTemplate = false
-            state.deleteAsset = false
+            state.onInstancelist = false
-            state.chosenAssetId = -1
+            state.onInstance = false
-            state.filteredAssetbyClient = ''
-            state.newAsset = false
-            state.newAssetName = ''
-            state.newCustomerID = ''
-            state.newCustomer = ''
-            state.newLocation = ''
-            state.newRemoteLocation = ''
-            state.newType = ''
-            state.newDescription = ''
-            state.newNotes = ''
-            state.newState = ''
-            state.newLastView = ''
-            state.newUser = ''
-            state.hardwareBool = false
-            state.newModel = ''
-            state.newSerialnumber = ''
-            state.newCPU = ''
-            state.newRAM = ''
-            state.newStorageConfiguration = ''
-            state.newMiscellaneous = ''
-            state.softwareBool = false
-            state.newSoftware = ''
-            state.newVersion = ''
-            state.newLicense = ''
         },
-        doDeleteAsset(state) {
+        changeToTemplate(state) {
-            state.deleteAsset = true
+            state.onTemplatelist = false
+            state.onCustomerTemplatelist = false
+            state.onTemplate = true
+            state.onInstancelist = false
+            state.onInstance = false
         },
-        undoDeleteAsset(state) {
+        changeToInstancelist(state) {
-            state.deleteAsset = false
+            state.onTemplatelist = false
+            state.onCustomerTemplatelist = false
+            state.onTemplate = false
+            state.onInstancelist = true
+            state.onInstance = false
         },
-        updateAssetFilterbyClient(state, client) {
+        changeToInstance(state) {
-            state.filteredAssetbyClient = client
+            state.onTemplatelist = false
-        },
+            state.onCustomerTemplatelist = false
-        toggleAssetSearchable(state) {
+            state.onTemplate = false
-            if (state.assetSearchable == false) {
+            state.onInstancelist = false
-                state.assetSearchable = true
+            state.onInstance = true
-                state.assetFiltered = false
-            } else {
-                state.assetSearchable = false
-            }
-            state.filteredAssetbyClient = ''
-        },
-        addNewAsset(state) {
-            state.newAsset = true
-            state.assetEditable = false
-            state.assetFiltered = false
-            state.assetSearchable = false
-            state.onAssetlist = false
-            state.onCustomerAssetlist = false
-            state.onAsset = true
-            state.onSolutionlistAsset = false
         },
+
+        // functions to update the asset
         updateAssetComponent(state, asset) {
             state.newAssetName = asset.assetName
             state.newCustomerID = asset.customerId
@@ -161,7 +175,108 @@ const store = createStore({
             state.newSoftware = asset.software
             state.newVersion = asset.version
             state.newLicense = asset.license
-        }
+        },
+
+        // functions to update the production order template
+        updateProductionOrderTemplateComponent(state, pot) {
+            state.newNamePOT = pot.name
+            state.newCustomerIDPOT = pot.customerId
+            state.newCustomerPOT = pot.customer
+            state.newUserPOT = pot.user
+            state.newDescriptionPOT = pot.description
+            state.newNotesPOT = pot.notes
+        },
+
+        // function to set the chosen asset
+        setChosenAsset(state, id) {
+            state.chosenAssetId = id
+        },
+
+        // function to set the chosen production order template
+        setChosenPOT(state, id) {
+            state.chosenPOTId = id
+        },
+
+        // function to reset the pages
+        resetStore(state) {
+            state.editable = false
+            state.filtered = false
+            state.searchable = false
+            state.deleteBool = false
+            state.chosenAssetId = -1
+            state.filteredByClient = ''
+            state.new = false
+            state.clientChanged = false 
+            state.changedClientId = -1
+
+            // reset the asset page variables
+            state.newAssetName = ''
+            state.newCustomerID = ''
+            state.newCustomer = ''
+            state.newLocation = ''
+            state.newRemoteLocation = ''
+            state.newType = ''
+            state.newDescription = ''
+            state.newNotes = ''
+            state.newState = ''
+            state.newLastView = ''
+            state.newUser = ''
+            state.hardwareBool = false
+            state.newModel = ''
+            state.newSerialnumber = ''
+            state.newCPU = ''
+            state.newRAM = ''
+            state.newStorageConfiguration = ''
+            state.newMiscellaneous = ''
+            state.softwareBool = false
+            state.newSoftware = ''
+            state.newVersion = ''
+            state.newLicense = ''
+
+            // reset the production order template page variables
+            state.newNamePOT = ''
+            state.newCustomerIDPOT = ''
+            state.newCustomerPOT = ''
+            state.newUserPOT = false
+            state.newDescriptionPOT = ''
+            state.newNotesPOT = ''
+            state.newLastViewPOT = ''
+        },
+
+        // functions to (undo) delete an asset
+        doDelete(state) {
+            state.deleteBool = true
+        },
+        undoDelete(state) {
+            state.deleteBool = false
+        },
+
+        // function to update the asset filter
+        updateFilterbyClient(state, client) {
+            state.filteredByClient = client
+        },
+
+        // function to get to the add page
+        add(state) {
+            state.new = true
+            state.editable = false
+            state.filtered = false
+            state.searchable = false
+
+            // set the asset variables
+            state.onAssetlist = false
+            state.onCustomerAssetlist = false
+            state.onAsset = true
+            state.onSolutionlistAsset = false
+                        
+            // set the production order variables
+            state.onTemplatelist = false
+            state.onCustomerTemplatelist = false
+            state.onTemplate = true
+            state.onInstancelist = false
+            state.onInstance = false
+        },
+
     },
 });
 

server/api/addPOT.ts

@@ -0,0 +1,22 @@
+import { insertId, errorMsg } from "../middleware/productionOrderTemplates";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return insertId
+})

server/api/addTodoPOT.ts

@@ -0,0 +1,21 @@
+import { errorMsg } from "../middleware/productionOrderTemplates";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+})

server/api/deletePOTTodo/[id].ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../../middleware/productionOrderTemplates";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/deleteProductionOrderTemplate/[id].ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../../middleware/productionOrderTemplates";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/deleteTodosPOT/[id].ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../../middleware/productionOrderTemplates";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/getCIFromClient/[id].ts

@@ -0,0 +1,22 @@
+import { configItemsFromClient, errorMsg } from "../../middleware/configItems";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return configItemsFromClient
+})

server/api/getProductionOrderTemplate/[id].ts

@@ -0,0 +1,22 @@
+import { pot, errorMsg } from "../../middleware/productionOrderTemplates";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return pot
+})

server/api/getSelectedPOTsByClient/[id].ts

@@ -0,0 +1,22 @@
+import { selectedPOTsByClient, errorMsg } from "../../middleware/productionOrderTemplates";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedPOTsByClient
+})

server/api/getSelectedPOTsByPOT/[id].ts

@@ -0,0 +1,22 @@
+import { selectedPOTsByPOT, errorMsg } from "../../middleware/productionOrderTemplates";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedPOTsByPOT
+})

server/api/getTodosProductionOrderTemplate/[id].ts

@@ -0,0 +1,22 @@
+import { potTodosByTemplateId, errorMsg } from "../../middleware/productionOrderTemplates";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return potTodosByTemplateId
+})

server/api/updatePOTTodo.ts

@@ -0,0 +1,13 @@
+import { errorMsg } from "../middleware/productionOrderTemplates";
+
+export default defineEventHandler(async (event) => {
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+})

server/api/updateProductionOrderTemplate.ts

@@ -0,0 +1,13 @@
+import { errorMsg } from "../middleware/productionOrderTemplates";
+
+export default defineEventHandler(async (event) => {
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+})

server/middleware/configItems.ts

@@ -6,6 +6,7 @@ let configItems = [];
 let configItem = {};
 let errorMsg = '';
 let selectedConfigItemsByClient = [];
+let configItemsFromClient = [];
 let selectedConfigItemsByAsset = [];
 
 export default defineEventHandler(async (event) => {
@@ -82,6 +83,38 @@ export default defineEventHandler(async (event) => {
         }
     }
 
+    if (event.path.startsWith("/api/getCIFromClient")) {
+        // get all config items from a client from backend
+        let itemId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        itemId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/configItemByCustomerID/${itemId}`);
+            configItemsFromClient = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
     if (event.path.startsWith("/api/updateConfigItem")) {
         const body = await readBody(event)
         // update the config item in the backend
@@ -235,4 +268,4 @@ export default defineEventHandler(async (event) => {
     }
 })
 
-export { configItems, configItem, selectedConfigItemsByClient, selectedConfigItemsByAsset, errorMsg };
+export { configItems, configItem, selectedConfigItemsByClient, selectedConfigItemsByAsset, configItemsFromClient, errorMsg };

server/middleware/productionOrderTemplates.ts

@@ -3,24 +3,28 @@ import serversideConfig from '../../serversideConfig';
 import https from 'https';
 
 let productionOrderTemplates = [];
+let selectedPOTsByClient = [];
+let selectedPOTsByPOT = [];
+let potTodosByTemplateId = [];
+let pot = [];
+let insertId = -1;
 let errorMsg = '';
 
 export default defineEventHandler(async (event) => {
+    const agent = new https.Agent({
+        rejectUnauthorized: false,
+    });
+
+    const axiosInstance = axios.create({
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: "*",
+        },
+        httpsAgent: agent
+    });
 
     if (event.path.startsWith("/api/getAllProductionOrderTemplates")) {
 
-        const agent = new https.Agent({
-            rejectUnauthorized: false,
-        });
-
-        const axiosInstance = axios.create({
-            headers: {
-                'Content-Type': 'application/json',
-                Accept: "*",
-            },
-            httpsAgent: agent
-        });
-
         // get all production order templates object from backend
         try {
             let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/masterProductionOrders`);
@@ -46,6 +50,343 @@ export default defineEventHandler(async (event) => {
             }
         }
     }
+
+    if (event.path.startsWith("/api/addPOT")) {
+        const body = await readBody(event)
+        // add the pot in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/masterProductionOrders`, body);
+            insertId = res.data.insertId
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getProductionOrderTemplate")) {
+        // get production order template object from backend
+        let itemId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        itemId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/masterProductionOrders/${itemId}`);
+            pot = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/updateProductionOrderTemplate")) {
+        const body = await readBody(event)
+        // update the production order template in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/masterProductionOrders`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedPOTsByClient")) {
+        // get selected production order templates object by client from backend
+        let filteredClient = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredClient = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedMasterProductionOrdersByCustomer/${filteredClient}`);
+            selectedPOTsByClient = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedPOTsByPOT")) {
+        // get selected production order templates object by pot from backend
+        let filteredPOT = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredPOT = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedMasterProductionOrdersByChecklistname/${filteredPOT}`);
+            selectedPOTsByPOT = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/deleteProductionOrderTemplate")) {
+        let potId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        potId = pathSegments[pathSegments.length - 1];
+
+        // delete the pot in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterProductionOrders/${potId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getTodosProductionOrderTemplate")) {
+        // get production order template todos object from backend
+        let itemId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        itemId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/masterProductionOrderTodos/${itemId}`);
+            potTodosByTemplateId = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/addTodoPOT")) {
+        const body = await readBody(event)
+        // add the pot todo in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/masterProductionOrderTodos`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+    
+    if (event.path.startsWith("/api/updatePOTTodo")) {
+        const body = await readBody(event)
+        // update the production order template todo in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/masterProductionOrderTodos`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/deleteTodosPOT")) {
+        let potId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        potId = pathSegments[pathSegments.length - 1];
+
+        // delete the pot in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterProductionOrderTodosByTemplateid/${potId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/deletePOTTodo")) {
+        let potId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        potId = pathSegments[pathSegments.length - 1];
+
+        // delete the pot in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterProductionOrderTodos/${potId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
 })
 
-export { productionOrderTemplates, errorMsg };
+export { productionOrderTemplates, selectedPOTsByClient, selectedPOTsByPOT, pot, potTodosByTemplateId, insertId, errorMsg };