Merge branch 'main' of https://git.tueit.de/jo.kuehner/TueIT_App into main

backend/models/checklistSolutionsModel.js

@@ -4,6 +4,7 @@ import ownConn from "../dbConfig.js";
 export const insertChecklistSolutionTodo = async (data, result) => {
     try {
         const results = await ownConn.query(`INSERT INTO checklistsolutions(solutionID, step, asset, task, comments) VALUES(?, ?, ?, ?, ?)`, [data.solutionID, data.step, data.asset, data.task, data.comments]);
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -47,6 +48,7 @@ export const updateChecklistSolutionTodoById = async (data, result) => {
         const id = data.primaryID;
         let sql = `UPDATE checklistsolutions SET step = ?, asset = ?, task = ?, comments = ? WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [data.step, data.asset, data.task, data.comments, id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -61,6 +63,7 @@ export const deleteAllChecklistSolutionTodosSolutionID = async (id, result) => {
     try {
         let sql = `DELETE FROM checklistsolutions WHERE solutionID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -75,6 +78,7 @@ export const deleteChecklistSolutionTodo = async (id, result) => {
     try {
         let sql = `DELETE FROM checklistsolutions WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {

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);
   }
@@ -88,6 +88,7 @@ export const deleteMaintenanceVisitById = async (id, result) => {
 export const insertMaintenanceVisit = async (data, result) => {
   try {
     const results = await ownConn.query(`INSERT INTO maintenancevisits(name, templateID, maintenanceType, state, creationDate, completionDate, user, customer, customerID, templateNotes, type, timeSpent, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.name, data.templateID, data.maintenanceType, data.state, data.creationDate, data.completionDate, data.user, data.customer, data.customerID, data.templateNotes, data.type, data.timeSpent, data.notes])
+    results.insertId = results.insertId.toString();
     result(null, results);
   }
   catch (err) {
@@ -100,7 +101,7 @@ export const insertMaintenanceVisit = async (data, result) => {
 //get single maintenance visit by name
 export const getMaintenanceVisitByName = async (id, result) => {
   try {
-    let sql = `SELECT * FROM maintenancevisits  WHERE name = ?`;
+    let sql = `SELECT * FROM maintenancevisits WHERE name = ?`;
     const results = await ownConn.execute(sql, [id])
     result(null, results[0]);
   }
@@ -114,7 +115,7 @@ export const getMaintenanceVisitByName = async (id, result) => {
 //get single maintenance visit by id
 export const getMaintenanceVisitById = async (id, result) => {
   try {
-    let sql = `SELECT * FROM maintenancevisits  WHERE primaryID = ?`;
+    let sql = `SELECT * FROM maintenancevisits WHERE primaryID = ?`;
     const results = await ownConn.execute(sql, [id])
     result(null, results[0]);
   }
@@ -131,6 +132,7 @@ export const updateMaintenanceVisitStateById = async (data, result) => {
     const id = data.primaryID;
     let sql = `UPDATE maintenancevisits SET state = ? WHERE primaryID = ?`;
     const results = await ownConn.query(sql, [data.state, id])
+    results.insertId = results.insertId.toString();
     result(null, results);
   }
   catch (err) {

backend/models/maintenanceVisitsTodosModel.js

@@ -4,6 +4,7 @@ import ownConn from "../dbConfig.js";
 export const insertMaintenanceVisitTodo = async (data, result) => {
   try {
     const results = await ownConn.query(`INSERT INTO maintenancevisittodos(templateID, step, asset, task, comment, done) VALUES(?, ?, ?, ?, ?, ?)`, [data.templateID, data.step, data.asset, data.task, data.comment, data.done])
+    results.insertId = results.insertId.toString();
     result(null, results);
   }
   catch (err) {
@@ -47,6 +48,7 @@ export const updateMaintenanceVisitTodoById = async (data, result) => {
     const id = data.primaryID;
     let sql = `UPDATE maintenancevisittodos SET step = ?, asset = ?, task = ?, comment = ?, done = ? WHERE primaryID = ?`;
     const results = await ownConn.query(sql, [data.step, data.asset, data.task, data.comment, id])
+    results.insertId = results.insertId.toString();
     result(null, results);
   }
   catch (err) {

backend/models/masterMaintenanceTodosModel.js

@@ -18,8 +18,9 @@ export const getMasterMaintenanceVisitTodoById = async (id, result) => {
 export const updateMasterMaintenanceVisitTodoById = async (data, result) => {
     try {
         const id = data.primaryID;
-        let sql = `UPDATE mastermaintenancetodos SET templateID = ?, asset = ? , task = ?, comments = ? WHERE primaryID = ?`;
+        let sql = `UPDATE mastermaintenancetodos SET templateID = ?, asset = ? , task = ?, commets = ? WHERE primaryID = ?`;
         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 deleteMasterMaintenanceVisitTodoById = async (id, result) => {
     try {
         let sql = `DELETE FROM mastermaintenancetodos 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 deleteMasterMaintenanceVisitTodoByTemplateId = async (id, result) =
     try {
         let sql = `DELETE FROM mastermaintenancetodos 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 updateMasterMaintenanceVisitTodos = async (data, result) => {
 //insert master maintenance visit todo to databased
 export const insertMasterMaintenanceVisitTodo = async (data, result) => {
     try {
-        const results = await ownConn.query(`INSERT INTO mastermaintenancetodos(templateID, rowID, asset, task, comments) VALUES(?, ?, ?, ?, ?)`, [data.templateID, data.rowID, data.asset, data.task, asset.comments])
+        const results = await ownConn.query(`INSERT INTO mastermaintenancetodos(templateID, rowID, asset, task, commets) VALUES(?, ?, ?, ?, ?)`, [data.templateID, data.rowID, data.asset, data.task, data.comment])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {

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);
     }
@@ -62,6 +62,7 @@ export const updateMasterMaintenanceVisitById = async (data, result) => {
         const id = data.checklistID;
         let sql = `UPDATE mastermaintenancevisits SET name = ?, customerID = ? , customer = ?, type = ?, lastView = ?, user = ?, notes = ? WHERE checklistID = ?`;
         const results = await ownConn.query(sql, [data.name, data.customerID, data.customer, data.type, data.lastView, data.user, data.notes, id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -75,6 +76,7 @@ export const updateMasterMaintenanceVisitById = async (data, result) => {
 export const insertMasterMaintenanceVisit = async (data, result) => {
     try {
         const results = await ownConn.query(`INSERT INTO mastermaintenancevisits(name, customerID, customer, type, lastView, user, notes) VALUES(?, ?, ?, ?, ?, ?, ?)`, [data.name, data.customerID, data.customer, data.type, data.lastView, data.user, data.notes])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -89,6 +91,7 @@ export const deleteMasterMaintenanceVisitById = async (id, result) => {
     try {
         let sql = `DELETE FROM mastermaintenancevisits WHERE checklistID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {

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) {
@@ -114,7 +115,7 @@ export const insertProductionOrder = async (data, result) => {
 //get single production order by name
 export const getProductionOrderByName = async (id, result) => {
     try {
-        let sql = `SELECT * FROM productionorders  WHERE name = ?`;
+        let sql = `SELECT * FROM productionorders WHERE name = ?`;
         const results = await ownConn.execute(sql, [id])
         result(null, results[0]);
     }
@@ -128,7 +129,7 @@ export const getProductionOrderByName = async (id, result) => {
 //get single production order by id
 export const getProductionOrderById = async (id, result) => {
     try {
-        let sql = `SELECT * FROM productionorders  WHERE ticketNumber = ?`;
+        let sql = `SELECT * FROM productionorders WHERE ticketNumber = ?`;
         const results = await ownConn.execute(sql, [id])
         result(null, results[0]);
     }
@@ -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

@@ -46,6 +46,7 @@ export const getSolutionByName = async (id, result) => {
 export const insertSolution = async (data, result) => {
     try {
         const results = await ownConn.query(`INSERT INTO solutions(solutionName, assetName, customer, customerID, type, lastView, user, description, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.solutionName, data.assetName, data.customer, data.customerID, data.type, data.lastView, data.user, data.description, data.notes])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -61,6 +62,7 @@ export const updateSolutionById = async (data, result) => {
         const id = data.primaryID;
         let sql = `UPDATE solutions SET solutionName = ?, assetName = ?, customer = ?, customerID = ?, type = ?, lastView = ?, user = ?, description = ?, notes = ? WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [data.solutionName, data.assetName, data.customer, data.customerID, data.type, data.lastView, data.user, data.description, data.notes, id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -73,7 +75,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 +88,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 +103,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 +117,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);
     }
@@ -131,6 +133,7 @@ export const deleteSolutionById = async (id, result) => {
     try {
         let sql = `DELETE FROM solutions WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -138,4 +141,4 @@ export const deleteSolutionById = async (id, result) => {
         console.log("SQL error : ", err);
         result(err, null);
     }
-};
+};

backend/routes/routes.js

@@ -219,8 +219,8 @@ router.put("/masterMaintenanceVisitTodos", updateMasterMaintenanceVisitTodo);
 // Delete master maintenance visit todo
 router.delete("/masterMaintenanceVisitTodos/:id", deleteMasterMaintenanceVisitTodo);
 
-// Delete master maintenance visit todo by customer id
+// Delete master maintenance visit todo by template id
-router.delete("/masterMaintenanceVisitTodosByCustomerid/:id", deleteMasterMaintenanceVisitTodoByTemplateIds);
+router.delete("/masterMaintenanceVisitTodosByTemplateid/:id", deleteMasterMaintenanceVisitTodoByTemplateIds);
 
 // Update all master maintenance visit todos
 router.put("/allMasterMaintenanceVisitTodos", updateAllMasterMaintenanceVisitTodos)
@@ -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/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}`
@@ -200,7 +200,7 @@ const updateAsset = () => {
         description: newDescription.value,
         notes: newNotes.value,
         state: newState.value
-    }; 
+    };
     store.commit('updateAssetComponent', asset);
 }
 
@@ -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,14 +330,13 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     }, 1500);
 }
 
-watch(deleteAssetBool, confirmDeleteAsset);
+watch(deleteBool, confirmDeleteAsset);
 
 onMounted(() => {
     getItemById();
     getConfigItems();
     triggerBackendCallsWithDelay(getCustomers);
 });
-
 </script>
 
 <script>

components/server/AssetTable.vue

@@ -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)">
@@ -139,7 +136,6 @@ export default {
     align-items: flex-start;
     justify-content: center;
     align-self: stretch;
-    /* width: 100%; */
     padding: 1.25rem 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;

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('');

components/server/MaintenanceVisitsTemplate.vue

@@ -1,24 +1,40 @@
 <template>
-    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['maintenance-visits-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Template name</h2>
+        <h2 v-if="!editable" :class="['maintenance-visits-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
+            mvt.name }}</h2>
+        <input v-if="editable" v-model="mvt.name" @change="updateMVT()"
+            :class="['data', 'mvt-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
         <div class="maintenance-visits-template-data">
-            <div class="customer-ID-type-user">
+            <div class="client-ID-type-user">
-                <div class="data-field" id="customer">
+                <div class="data-field" id="client">
                     <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvt.customer }}</pre>
+                    <select v-if="editable" id="customersDropDownChosenCI" v-model="mvt.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="info">
                     <div class="id-type-user" id="ID">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvt.checklistID }}</pre>
                     </div>
                     <div class="id-type-user" id="type">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvt.type }}</pre>
+                        <input v-if="editable" v-model="mvt.type" @change="updateMVT()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                     <div class="id-type-user" id="user">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvt.user }}</pre>
+                        <input v-if="editable" v-model="mvt.user" @change="updateMVT()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                 </div>
             </div>
@@ -27,7 +43,50 @@
             <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="mvt.notes" :readonly="!editable" @change="updateMVT()"
+                        :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="updateMaintenanceVisit()"
+            :class="['data', 'maintenance-visits-template-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
+        <div class="maintenance-visits-template-data">
+            <div class="customer-ID-type-user">
+                <div class="data-field" id="customer">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</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="info">
+                    <div class="id-type-user" id="ID">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    </div>
+                    <div class="id-type-user" id="type">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
+                        <input v-model="newType" @change="updateMaintenanceVisit()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="id-type-user" id="user">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
+                        <input v-model="newUser" @change="updateMaintenanceVisit()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="maintenance-visits-template-data">
+            <div class="additional">
+                <div class="notes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <input v-model="newNotes" @change="updateMaintenanceVisit()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
                 </div>
             </div>
         </div>
@@ -36,9 +95,182 @@
     
     
 <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 editable = computed(() => store.state.editable);
+const chosenMVTId = computed(() => store.state.chosenMVTId);
+const deleteBool = computed(() => store.state.deleteBool);
+const addBool = computed(() => store.state.new);
 
 const darkMode = ref(true)
+const mvt = ref({});
+const customers = ref([]);
+const customer = ref({});
+const maintenanceVisitTemplates = ref([]);
+
+const newName = ref('');
+const newCustomerID = ref('');
+const newCustomer = ref('');
+const newUser = ref('');
+const newType = 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);
+    }
+}
+
+// function to delete a maintenance visit template
+const confirmDeleteMVT = async () => {
+    if (deleteBool.value === true) {
+        if (confirm("Do you really want to delete this maintenance visit template? It cannot be undone!")) {
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteMaintenanceVisitTemplate/${chosenMVTId.value}`);
+                store.commit('undoDelete');
+                store.commit('changeToTemplatelist');
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteTodosMVT/${chosenMVTId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        } else {
+            store.commit('undoDelete');
+        }
+    }
+}
+
+//get all maintenance visit templates
+const getMaintenanceVisitTemplates = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitTemplates`);
+        maintenanceVisitTemplates.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//update data
+const updateMVT = async () => {
+    if (mvt.value.name.trim() === "") {
+        alert("Please add a maintenance visit template name!");
+        return;
+    } else {
+        var counter = 0;
+        // check if maintenance visit template name already exists
+        maintenanceVisitTemplates.value.forEach(m => {
+            if (m.name === mvt.value.name) {
+                counter += 1;
+            }
+        });
+        if (counter == 2) {
+            alert("This maintenance visit template name already exists. Please choose an unique production order template name or modify respectively delete the old one!");
+            mvt.value.name = '';
+            return;
+        }
+        try {
+            await Axios.put(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateMaintenanceVisitTemplate`,
+                {
+                    checklistID: mvt.value.checklistID,
+                    name: mvt.value.name,
+                    customerID: mvt.value.customerID,
+                    customer: mvt.value.customer,
+                    lastView: mvt.value.lastView,
+                    user: mvt.value.user,
+                    type: mvt.value.type,
+                    notes: mvt.value.notes,
+                }
+            )
+            await getMVTById();
+        } 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/${mvt.value.customer}`);
+        customer.value = response.data;
+        mvt.value.customerID = customer.value.customerID;
+        store.commit('toggleClientChanged');
+        store.commit('toggleClientId', mvt.value.customerID);
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+    await updateMVT();
+}
+
+// get maintenance visit template from id
+const getMVTById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${chosenMVTId.value}`
+            );
+            mvt.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);
+    }
+    updateMaintenanceVisit();
+}
+
+// update maintenance visit template fields in the store
+const updateMaintenanceVisit = () => {
+    const maintenanceVisitTemplate = {
+        name: newName.value,
+        customerId: newCustomerID.value,
+        customer: newCustomer.value,
+        user: newUser.value,
+        type: newType.value,
+        notes: newNotes.value
+    };
+    store.commit('updateMaintenanceVisitTemplateComponent', maintenanceVisitTemplate);
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
+
+watch(deleteBool, confirmDeleteMVT);
+
+onMounted(() => {
+    getMVTById();
+    triggerBackendCallsWithDelay(getMaintenanceVisitTemplates);
+    triggerBackendCallsWithDelay(getCustomers);
+});
+
 </script>
 
 <script>
@@ -61,6 +293,17 @@ export default {
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
 }
 
+.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;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
 .section-darkmode {
     background-color: #2c2c2c;
 }
@@ -69,7 +312,21 @@ export default {
     background-color: #fff;
 }
 
+.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;
+}
 
 .maintenance-visits-template-name {
     align-self: stretch;
@@ -80,6 +337,16 @@ export default {
         sans-serif;
 }
 
+.maintenance-visits-template-name-input {
+    padding: 0 0.625rem;
+    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;
 }
@@ -94,11 +361,23 @@ 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;
 }
 
+.h2-input-darkmode {
+    background-color: #212121;
+}
+
+.h2-input-lightmode {
+    background-color: #EBEBEB;
+}
+
+.input {
+    border: none;
+}
+
 .id-type-user {
     display: flex;
     flex-direction: row;
@@ -123,17 +402,6 @@ export default {
     color: #000;
 }
 
-.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;
-    letter-spacing: 5%;
-    font: 400 0.75rem/250% Overpass, sans-serif;
-}
-
 .data-darkmode {
     background-color: #212121;
     color: #fff;
@@ -144,6 +412,16 @@ export default {
     color: #000;
 }
 
+.mvt-name-input {
+    padding: 0 0.625rem;
+    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;
+}
+
 .maintenance-visits-template-data {
     display: flex;
     flex-direction: row;

components/server/MaintenanceVisitsTemplateTable.vue

@@ -1,4 +1,9 @@
 <template>
+    <section v-if="searchable" :class="['mvt-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Template:</div>
+        <input v-model="mvtSearchFilter" @change="searchMVT()"
+            :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="maintenance-visits-template-table">
@@ -26,7 +31,11 @@
                         {{ template.customer }}</td>
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        {{ template.name }}</td>
+                        <nuxt-link to="/maintenanceVisits" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            @click="goToChosenMVT(template.checklistID)">
+                            {{ template.name }}
+                        </nuxt-link></td>
                     <td
                         :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
                         {{ template.checklistID }}</td>
@@ -42,25 +51,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';
+
+// get accesss to the store
+const store = useStore()
+const goToChosenMVT = (id) => {
+    store.commit('setChosenMVT', id);
+    store.commit('changeToTemplate');
+};
+
+const clientFilter = computed(() => store.state.filteredByClient);
+const searchable = computed(() => store.state.searchable);
+const mvtSearchFilter = ref('');
 
 const darkMode = ref(true)
 const maintenanceVisitTemplates = ref([]);
 
 //get all maintenance visit templates
 const getMaintenanceVisitTemplates = async () => {
+    if (!(clientFilter.value === '')) {
+        await getFilteredMVTByClient();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitTemplates`);
+            maintenanceVisitTemplates.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all maintenance visit templates based on the searched mvt name
+const searchMVT = async () => {
+    if (mvtSearchFilter.value === '') {
+        await getMaintenanceVisitTemplates();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVTsByMVT/${mvtSearchFilter.value}`);
+            maintenanceVisitTemplates.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// update search term
+const updateSearchTerm = async () => {
+    mvtSearchFilter.value = '';
+    await getMaintenanceVisitTemplates();
+}
+
+//get all maintenance visit templates based on the searched client
+const getFilteredMVTByClient = async () => {
     try {
-        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitTemplates`);
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVTsByClient/${clientFilter.value}`);
         maintenanceVisitTemplates.value = response.data;
     } catch (err) {
         console.log(err.response.statusText);
     }
 }
 
-onMounted(() => {
+watch(searchable, updateSearchTerm);
-    getMaintenanceVisitTemplates();
+watch(clientFilter, getMaintenanceVisitTemplates);
+
+onMounted(async () => {
+    await getMaintenanceVisitTemplates();
 });
 </script>
 
@@ -79,13 +138,30 @@ export default {
     align-items: flex-start;
     justify-content: center;
     align-self: stretch;
-    width: 100%;
     padding: 1.25rem 1.875rem;
     gap: 1.25rem;
     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: #fff;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
 .div-darkmode {
     background-color: #2c2c2c;
 }
@@ -94,6 +170,37 @@ export default {
     background-color: #fff;
 }
 
+.input {
+    border: none;
+}
+
+#nuxt-link {
+    text-decoration: none;
+    color: white;
+}
+
+.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;
+}
+
+.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;
+}
+
 .data-table {
     width: 100%;
     padding: 0 0.625rem;
@@ -101,6 +208,18 @@ export default {
     border-collapse: collapse;
 }
 
+.mvt-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;
+}
+
 .table-row {
     display: flex;
     flex-direction: row;
@@ -220,4 +339,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
+}
+</style>

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);

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']">Customer:</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="customer-ID">
                 <div class="data-field" id="customer">
-                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Customer:</pre>
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</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
+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,7 +407,39 @@ export default {
     align-self: stretch;
 }
 
-.customer-ID,
+.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;
+}
+
+.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;
+}
+
+.customer-ID, 
 .user {
     display: flex;
     flex-direction: column;

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']">Template:</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-customer">
@@ -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/Solution.vue

@@ -1,15 +1,96 @@
 <template>
-    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['solution-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Solution name</h2>
+        <h2 v-if="!editable" :class="['solution-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ sol.solutionName
+            }}</h2>
+        <input v-if="editable" v-model="sol.solutionName" @change="updateSolution()"
+            :class="['data', 'solution-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
+        <div class="solution-data">
+            <div class="client-asset">
+                <div class="data-field" id="client">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ sol.customer }}</pre>
+                    <select v-if="editable" id="customersDropDownChosenCI" v-model="sol.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="asset">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ sol.assetName }}</pre>
+                    <select v-if="editable" id="customersDropDownChosenCI" v-model="sol.assetName"
+                        @change="updateSolution()" :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                        <option v-for="ci in configItems" :key="ci.primaryID">
+                            {{ ci.assetName }}
+                        </option>
+                    </select>
+                </div>
+            </div>
+            <div class="info">
+                <div class="data-field" id="user">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ sol.user }}</pre>
+                </div>
+                <div class="type-id">
+                    <div class="data-field" id="type">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ sol.type }}</pre>
+                        <input v-if="editable" v-model="sol.type" @change="updateSolution()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="data-field" id="id">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ sol.primaryID }}</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="solution-data">
+            <div class="additional">
+                <div class="description">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description of the
+                        problem/intended use:</h3>
+                    <input v-model="sol.description" :readonly="!editable" @change="updateSolution()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
+                </div>
+            </div>
+        </div>
+        <div class="solution-data">
+            <div class="additional">
+                <div class="notes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <input v-model="sol.notes" :readonly="!editable" @change="updateSolution()"
+                        :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="newSolutionName" @change="updateSol()"
+            :class="['data', 'solution-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
         <div class="solution-data">
             <div class="customer-asset">
                 <div class="data-field" id="customer">
                     <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</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="asset">
                     <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    <select id="customersDropDownChosenCI" v-model="newAssetName" @change="updateSol()"
+                        :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                        <option v-for="ci in configItems" :key="ci.primaryID">
+                            {{ ci.assetName }}
+                        </option>
+                    </select>
                 </div>
             </div>
             <div class="info">
@@ -17,13 +98,14 @@
                     <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
                     <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
-                <div class="type-state">
+                <div class="type-id">
                     <div class="data-field" id="type">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <input v-model="newType" @change="updateSol()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
-                    <div class="data-field" id="state">
+                    <div class="data-field" id="id">
-                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
                         <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                     </div>
                 </div>
@@ -34,7 +116,8 @@
                 <div class="description">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description of the
                         problem/intended use:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
+                    <input v-model="newDescription" @change="updateSol()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
                 </div>
             </div>
         </div>
@@ -42,27 +125,235 @@
             <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="updateSol()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
                 </div>
             </div>
         </div>
     </section>
 </template>
-    
-    
-<script setup>
-import { ref } from 'vue';
 
-const darkMode = ref(true)
+
+<script setup>
+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 editable = computed(() => store.state.editable);
+const chosenSolutionId = computed(() => store.state.chosenSolutionId);
+const deleteBool = computed(() => store.state.deleteBool);
+const addBool = computed(() => store.state.new);
+
+const darkMode = ref(true);
+const sol = ref({});
+const customer = ref({});
+const solutions = ref([]);
+const customers = ref([]);
+const configItems = ref([]);
+
+const newAssetName = ref('');
+const newCustomerID = ref('');
+const newCustomer = ref('');
+const newSolutionName = ref('');
+const newType = ref('');
+const newDescription = ref('');
+const newNotes = ref('');
+const newLastView = ref('');
+const newUser = ref('');
+const changedClientId = computed(() => store.state.changedClientId);
+const clientChanged = computed(() => store.state.clientChanged);
+
+// get solution from id
+const getSolutionById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSolution/${chosenSolutionId.value}`
+            );
+            sol.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    await getConfigItemsFromClient();
+}
+
+//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/${sol.value.customerID}`);
+            configItems.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}`);
+            configItems.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    if (clientChanged.value) {
+        store.commit('toggleClientChanged');
+    }
+}
+
+// update solution fields in the store
+const updateSol = () => {
+    const solution = {
+        solutionName: newSolutionName.value,
+        customerId: newCustomerID.value,
+        customer: newCustomer.value,
+        assetName: newAssetName.value,
+        lastView: newLastView.value,
+        type: newType.value,
+        description: newDescription.value,
+        notes: newNotes.value,
+        user: newUser.value
+    };
+    store.commit('updateSolutionComponent', solution);
+}
+
+//update data
+const updateSolution = async () => {
+    if (sol.value.solutionName.trim() === "") {
+        alert("Please add a solution name!");
+        return;
+    } else {
+        var counter = 0;
+        // check if solution name already exists
+        solutions.value.forEach(s => {
+            if (s.solutionName === sol.value.solutionName) {
+                counter += 1;
+            }
+        });
+        if (counter == 1) {
+            alert("This solution name already exists. Please choose an unique solution name or modify respectively delete the old one!");
+            sol.value.solutionName = '';
+            return;
+        }
+        try {
+            await Axios.put(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateSolution`,
+                {
+                    primaryID: sol.value.primaryID,
+                    solutionName: sol.value.solutionName,
+                    customerID: sol.value.customerID,
+                    customer: sol.value.customer,
+                    assetName: sol.value.assetName,
+                    type: sol.value.type,
+                    description: sol.value.description,
+                    notes: sol.value.notes,
+                    lastView: sol.value.lastView,
+                    user: sol.value.user,
+                }
+            )
+            await getSolutionById();
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//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 confirmDeleteSolution = async () => {
+    if (deleteBool.value === true) {
+        if (confirm("Do you really want to delete this solution? It cannot be undone!")) {
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteSolution/${chosenSolutionId.value}`);
+                store.commit('undoDelete');
+                store.commit('changeToSolutionlist');
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteTodosSolution/${chosenSolutionId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        } else {
+            store.commit('undoDelete');
+        }
+    }
+}
+
+//get all solutions
+const getSolutions = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllSolutions`);
+        solutions.value = response.data;
+    } 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/${sol.value.customer}`);
+        customer.value = response.data;
+        sol.value.customerID = customer.value.customerID;
+        store.commit('toggleClientChanged');
+        store.commit('toggleClientId', sol.value.customerID);
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+    await updateSolution();
+}
+
+// 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);
+    }
+    updateSol();
+    await getConfigItemsFromClient();
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
+
+watch(deleteBool, confirmDeleteSolution);
+watch(clientChanged, getSolutionById);
+
+onMounted(() => {
+    getSolutionById();
+    getSolutions();
+    triggerBackendCallsWithDelay(getCustomers);
+});
 </script>
 
 <script>
 export default {
     name: "Solution",
 };
-</script> 
+</script>
-      
+
-      
+
 <style scoped>
 .information {
     display: flex;
@@ -83,7 +374,15 @@ export default {
     background-color: #fff;
 }
 
-
+.solution-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;
+}
 
 .solution-name {
     align-self: stretch;
@@ -102,17 +401,41 @@ export default {
     color: #000;
 }
 
+.h2-input-darkmode {
+    background-color: #212121;
+}
+
+.h2-input-lightmode {
+    background-color: #EBEBEB;
+}
+
 .data-field {
     display: flex;
     flex-direction: row;
     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;
 }
 
+.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;
+}
+
 .data-field#street-name {
     width: 70%;
 }
@@ -175,6 +498,10 @@ export default {
     border-radius: 0.3125rem;
 }
 
+.input {
+    border: none;
+}
+
 .additional {
     display: flex;
     flex-direction: column;
@@ -199,7 +526,7 @@ export default {
     color: #000;
 }
 
-.type-state {
+.type-id {
     display: flex;
     flex-direction: row;
     align-items: center;

components/server/SolutionChecklist.vue

@@ -1,5 +1,6 @@
 <template>
-    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+    <section v-if="!addBool"
+        :class="['solution-checklist-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
         <table class="data-table" id="solution-checkklist">
             <tbody>
@@ -15,51 +16,530 @@
                         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 solTodos" :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.step }}</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="updateSolTodo(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="updateSolTodo(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="updateSolTodo(todo)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                        <button :class="[darkMode ? 'deleteSolTodos-darkmode' : 'deleteSolTodos-lightmode']"
+                            @click="deleteSolTodo(todo.primaryID)">-</button>
+                    </td>
+                </tr>
+            </tbody>
+            <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']">
+                    <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']">
+                    <input type="text" v-model="newTaskTodo"
+                        :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 ? 'saveSolTodos-darkmode' : 'saveSolTodos-lightmode']"
+                        @click="addSolTodo()">Save</button> <button
+                        :class="[darkMode ? 'deleteLastSolTodos-darkmode' : 'deleteLastSolTodos-lightmode']"
+                        @click="deleteNewRow()">-</button>
+                </td>
+            </tr>
+        </table>
+    </section>
+    <section v-if="editable && !addBool" id="editSolTodos">
+        <button :class="[darkMode ? 'editSolTodos-darkmode' : 'editSolTodos-lightmode']"
+            @click="addChecklistRow()">+</button>
+    </section>
+    <section v-if="addBool"
+        :class="['solution-checklist-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
+        <table class="data-table" id="template-checklist">
+            <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.step }}
+                    </td>
                     <td
                         :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                        ...</td>
+                        <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']">
-                        ...</td>
+                        <input type="text" v-model="newT.task"
-                    <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="newT.comments"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
+                            :class="[darkMode ? 'deleteSolTodos-darkmode' : 'deleteLastSolTodos-lightmode']"
+                            @click="deleteSolTodoFromNewTodos(index)">-</button>
+                    </td>
                 </tr>
             </tbody>
         </table>
-    </div>
+    </section>
+    <section v-if="addBool" id="editSolTodos">
+        <button :class="[darkMode ? 'editSolTodos-darkmode' : 'editSolTodos-lightmode']"
+            @click="addRowForNewSol()">+</button>
+    </section>
+    <section v-if="addBool" id="saveNewSol">
+        <button :class="[darkMode ? 'saveNewSol-darkmode' : 'saveNewSol-lightmode']" @click="addSol()">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 newSolutionNameSol = computed(() => store.state.newSolutionNameSol);
+const newCustomerIDSol = computed(() => store.state.newCustomerIDSol);
+const newCustomerSol = computed(() => store.state.newCustomerSol);
+const newAssetNameSol = computed(() => store.state.newAssetNameSol);
+const newLastViewSol = computed(() => store.state.newLastViewSol);
+const newUserSol = computed(() => store.state.newUserSol);
+const newTypeSol = computed(() => store.state.newTypeSol);
+const newNotesSol = computed(() => store.state.newNotesSol);
+const newDescriptionSol = computed(() => store.state.newDescriptionSol);
+
+const newStepTodo = computed(() => solTodos.value.length);
+const chosenSolId = computed(() => store.state.chosenSolutionId);
+const clientChanged = computed(() => store.state.clientChanged);
+const changedCustomerId = computed(() => store.state.changedCustomerId);
 
 const darkMode = ref(true)
+const addRow = ref(false);
+const configItemList = ref([]);
+const solutions = ref([]);
+const solTodos = ref([])
+const sol = 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 deleteSolTodoFromNewTodos = (index) => {
+    newTodos.splice(index, 1);
+    newTodos.forEach((todo, i) => {
+        todo.step = i
+    })
+}
+
+// add new solution
+const addSol = async () => {
+    // check if all input data is valid
+    if (newSolutionNameSol.value.trim() === "") {
+        alert("Please add a solution name!");
+        return;
+    } else {
+        var counter = 0;
+        if (!(solutions.value.length == null)) {
+            // check if solution name already exists
+            solutions.value.forEach(s => {
+                if (s.solutionName === newSolutionNameSol.value) {
+                    counter += 1;
+                }
+            });
+            if (counter == 1) {
+                alert("This solution name already exists. Please choose an unique solution name or modify respectively delete the old one!");
+                return;
+            }
+        }
+    }
+    if (newCustomerSol.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/addSol`,
+            {
+                solutionName: newSolutionNameSol.value,
+                assetName: newAssetNameSol.value,
+                customerID: newCustomerIDSol.value,
+                customer: newCustomerSol.value,
+                type: newTypeSol.value,
+                lastView: newLastViewSol.value,
+                user: newUserSol.value,
+                description: newDescriptionSol.value,
+                notes: newNotesSol.value,
+            });
+        store.commit('resetStore');
+        store.commit('changeToSolutionlist');
+        newTodos.forEach(async todo => {
+            try {
+                const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoSol`,
+                    {
+                        solutionID: response.data,
+                        step: todo.step,
+                        asset: todo.asset,
+                        task: todo.task,
+                        comments: todo.comments,
+                    });
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        })
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new row of todo for the new solution
+const addRowForNewSol = async () => {
+    if (newCustomerSol.value.length === 0) {
+        alert("Please choose a client first!");
+        return;
+    }
+    await getConfigItemsFromCustomer();
+    newTodos.push({
+        solutionID: chosenSolId.value,
+        step: newRowId.value,
+        asset: '',
+        task: '',
+        comments: ''
+    });
+}
+
+//update data
+const updateSolTodo = async (todo) => {
+    if (todo.asset.length === 0) {
+        alert(`Please add the missing config item in row ${todo.step}!`);
+        return;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateSolTodo`,
+            {
+                primaryID: todo.primaryID,
+                solutionID: todo.solutionIDID,
+                step: todo.step,
+                asset: todo.asset,
+                task: todo.task,
+                comments: todo.comments,
+            }
+        );
+        await getSolutionById();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new solution todo
+const addSolTodo = 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/addTodoSol`,
+            {
+                solutionID: chosenSolId.value,
+                step: newStepTodo.value,
+                asset: newAssetTodo.value,
+                task: newTaskTodo.value,
+                comments: newCommentsTodo.value,
+            });
+        addRow.value = false;
+        await getSolutionTodosById();
+        newAssetTodo.value = '';
+        newTaskTodo.value = '';
+        newCommentsTodo.value = '';
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new row for the template
+const addChecklistRow = async () => {
+    await getConfigItemsFromCustomer();
+    if (addRow.value) {
+        alert('Please confirm the last added row first.')
+        return
+    }
+    addRow.value = true
+}
+
+//get all solutions
+const getAllSolutions = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllSolutions`);
+        solutions.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1000);
+}
+
+// get solution todos from id
+const getSolutionTodosById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosSolution/${chosenSolId.value}`
+            );
+            solTodos.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all config items from the selected client
+const getConfigItemsFromCustomer = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromCustomer/${sol.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/getCIFromCustomer/${changedCustomerId.value}`);
+            configItemList.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    if (clientChanged.value) {
+        store.commit('toggleCustomerChanged');
+    }
+}
+
+// get solution from id
+const getSolutionById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSolution/${chosenSolId.value}`
+            );
+            sol.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    await getConfigItemsFromCustomer();
+}
+
+const deleteSolTodo = async (id) => {
+    if (confirm("Do you really want to delete this solution todo? It cannot be undone!")) {
+        try {
+            await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteSolTodo/${id}`);
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    await getSolutionTodosById();
+}
+
+watch(clientChanged, getSolutionById);
+
+onMounted(() => {
+    getSolutionTodosById();
+    getSolutionById();
+    triggerBackendCallsWithDelay(getAllSolutions);
+});
 </script>
 
 <script>
 export default {
     name: "SolutionChecklist",
 };
-</script> 
+</script>
-    
+
-    
+
 <style scoped>
 .data {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: flex-start;
-    justify-content: center;
     align-self: stretch;
-    width: 100%;
+    padding: 0 0.625rem;
-    padding: 1.25rem 1.875rem;
+    border-radius: 0.3125rem;
-    gap: 1.25rem;
+    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;
+}
+
+.saveSolTodos-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;
+}
+
+.saveSolTodos-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;
+}
+
+.saveNewSol-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);
 }
 
+.saveNewSol-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);
+}
+
+.deleteSolTodos-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;
+}
+
+.deleteLastSolTodos-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;
+}
+
+.deleteSolTodos-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;
+}
+
+.deleteLastSolTodos-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;
+}
+
+.input {
+    border: none;
+}
+
 .div-darkmode {
     background-color: #2c2c2c;
 }
@@ -68,6 +548,16 @@ export default {
     background-color: #fff;
 }
 
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
 .data-table {
     width: 100%;
     padding: 0 0.625rem;
@@ -75,6 +565,24 @@ export default {
     border-collapse: collapse;
 }
 
+.solution-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);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
 .table-row {
     display: flex;
     flex-direction: row;
@@ -84,6 +592,22 @@ export default {
     gap: 0.625rem;
 }
 
+.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;
+}
+
 .tr-head-darkmode {
     border-top: none;
     border-bottom: 0.0625rem solid #000000;
@@ -163,6 +687,7 @@ th {
 
 .Comments {
     width: 35%;
+    display: flex;
 }
 
 .label {
@@ -183,4 +708,54 @@ th {
 .label-lightmode {
     color: #000;
 }
+
+.editSolTodos-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);
+}
+
+.editSolTodos-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;
+}
+
+.deleteSolTodos-darkmode:hover,
+.deleteLastSolTodos-darkmode:hover,
+
+.saveSolTodos-darkmode:hover,
+.editSolTodos-darkmode:hover,
+.saveNewSol-darkmode:hover {
+    background-color: #444444;
+    cursor: pointer;
+}
+
+.deleteSolTodos-lightmode:hover,
+.deleteLastSolTodos-lightmode:hover,
+
+.saveSolTodos-lightmode:hover,
+.editSolTodos-lightmode:hover,
+.saveNewSol-lightmode:hover {
+    background-color: #ACACAC;
+    cursor: pointer;
+}
+
+#saveNewSol {
+    text-align: center;
+}
+
+#editSolTodos {
+    text-align: right;
+}
 </style>

components/server/SolutionTable.vue

@@ -1,4 +1,9 @@
 <template>
+    <section v-if="searchable" :class="['solution-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['customerLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Solution</div>
+        <input v-model="solutionSearchFilter" @change="searchSolution()"
+            :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" id="solution-table">
@@ -25,7 +30,12 @@
                         {{ sol.customer }}</td>
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        {{ sol.solutionName }}</td>
+                        <nuxt-link to="/solutions" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            @click="goToChosenSolution(sol.primaryID)">
+                            {{ sol.solutionName }}
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
                         {{ sol.assetName }}</td>
@@ -38,28 +48,79 @@
         </table>
     </div>
 </template>
-  
+
-  
+
 <script setup>
 import { ref, onMounted } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
+// get accesss to the store
+const store = useStore()
+const goToChosenSolution = (id) => {
+    store.commit('setChosenSolution', id);
+    store.commit('changeToSolution');
+};
+
+const clientFilter = computed(() => store.state.filteredByClient);
+const searchable = computed(() => store.state.searchable);
+
+const solutionSearchFilter = ref('');
 const darkMode = ref(true)
 const solutions = ref([]);
 
+// update search term
+const updateSearchTerm = async () => {
+    solutionSearchFilter.value = '';
+    await getSolutions();
+}
+
 //get all solutions
 const getSolutions = async () => {
+    if (!(clientFilter.value === '')) {
+        await getFilteredSolutionsByClient();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllSolutions`);
+            solutions.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all solutions based on the searched client
+const getFilteredSolutionsByClient = async () => {
     try {
-        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllSolutions`);
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsByClient/${clientFilter.value}`);
         solutions.value = response.data;
     } catch (err) {
         console.log(err.response.statusText);
     }
 }
 
-onMounted(() => {
+//get all solutions based on the searched solution name
-    getSolutions();
+const searchSolution = async () => {
+    if (solutionSearchFilter.value === '') {
+        await getSolutions();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsBySolution/${solutionSearchFilter.value}`);
+            solutions.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+watch(clientFilter, getSolutions);
+watch(searchable, updateSearchTerm);
+
+
+onMounted(async () => {
+    await getSolutions();
 });
 </script>
 
@@ -67,9 +128,9 @@ onMounted(() => {
 export default {
     name: "SolutionTable",
 };
-</script> 
+</script>
-    
+
-    
+
 <style scoped>
 .data {
     display: flex;
@@ -77,7 +138,6 @@ export default {
     align-items: flex-start;
     justify-content: center;
     align-self: stretch;
-    width: 100%;
     padding: 1.25rem 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;
@@ -118,6 +178,32 @@ export default {
     border-bottom: 0.0625rem solid #8e8e8e;
 }
 
+.input {
+    border: none;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.solution-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;
+}
+
 .tr-darkmode {
     border-top: 0.0625rem solid #000000;
 }
@@ -126,6 +212,17 @@ export default {
     border-top: 0.0625rem solid #8e8e8e;
 }
 
+.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;
+}
+
 th,
 td {
     height: 1.875rem;
@@ -135,6 +232,14 @@ td {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
 .th-darkmode,
 .td-darkmode {
     color: #ffffff;
@@ -149,6 +254,22 @@ th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+#nuxt-link {
+    text-decoration: none;
+    color: white;
+}
+
+.customerLabel {
+    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;
+}
+
 .Customer {
     width: 33.3%;
 }

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 changedCustomerId = computed(() => store.state.changedCustomerId);
 
 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 getConfigItemsFromCustomer();
+    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 getConfigItemsFromCustomer();
+    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 getConfigItemsFromCustomer = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromCustomer/${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/getCIFromCustomer/${changedCustomerId.value}`);
+            configItemList.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    if (clientChanged.value) {
+        store.commit('toggleCustomerChanged');
+    }
+}
+
+// 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 getConfigItemsFromCustomer();
+}
+
+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>

components/server/TemplateChecklistMVT.vue

@@ -0,0 +1,750 @@
+<template>
+    <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-checklist">
+            <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="todo in mvtTodos" :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']">
+                        {{ 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="updateMVTTodo(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="updateMVTTodo(todo)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
+                    <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ todo.commets
+                    }}</td>
+                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
+                            v-model="todo.commets" @change="updateMVTTodo(todo)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
+                            :class="[darkMode ? 'deleteMvtTodos-darkmode' : 'deleteMvtTodos-lightmode']"
+                            @click="deleteMVTTodo(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']">
+                        <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']">
+                        <input type="text" v-model="newTaskTodo"
+                            :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 ? 'saveMvtTodos-darkmode' : 'saveMvtTodos-lightmode']"
+                            @click="addMVTTodo()">Save</button> <button
+                            :class="[darkMode ? 'deleteLastMvtTodos-darkmode' : 'deleteLastMvtTodos-lightmode']"
+                            @click="deleteNewRow()">-</button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+    <section v-if="editable && !addBool" id="editMvtTodos">
+        <button :class="[darkMode ? 'editMvtTodos-darkmode' : 'editMvtTodos-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-checklist">
+            <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 ? 'deleteMvtTodos-darkmode' : 'deleteLastMvtTodos-lightmode']"
+                            @click="deleteMVTTodoFromNewTodos(index)">-</button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+    <section v-if="addBool" id="editMvtTodos">
+        <button :class="[darkMode ? 'editMvtTodos-darkmode' : 'editMvtTodos-lightmode']"
+            @click="addRowForNewMVT()">+</button>
+    </section>
+    <section v-if="addBool" id="saveNewMVT">
+        <button :class="[darkMode ? 'saveNewMVT-darkmode' : 'saveNewMVT-lightmode']" @click="addMVT()">Safe</button>
+    </section>
+</template>
+  
+
+<script setup>
+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 newNameMVT = computed(() => store.state.newNameMVT);
+const newCustomerIDMVT = computed(() => store.state.newCustomerIDMVT);
+const newCustomerMVT = computed(() => store.state.newCustomerMVT);
+const newLastViewMVT = computed(() => store.state.newLastViewMVT);
+const newUserMVT = computed(() => store.state.newUserMVT);
+const newTypeMVT = computed(() => store.state.newTypeMVT);
+const newNotesMVT = computed(() => store.state.newNotesMVT);
+const newStepTodo = computed(() => mvtTodos.value.length);
+const chosenMVTId = computed(() => store.state.chosenMVTId);
+const clientChanged = computed(() => store.state.clientChanged);
+const changedCustomerId = computed(() => store.state.changedCustomerId);
+
+const darkMode = ref(true)
+const addRow = ref(false);
+const configItemList = ref([]);
+const maintenanceVisitTemplates = ref([]);
+const mvtTodos = ref([])
+const MVT = 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 deleteMVTTodoFromNewTodos = (index) => {
+    newTodos.splice(index, 1);
+    newTodos.forEach((todo, i) => {
+        todo.rowID = i
+    })
+}
+
+// add new maintenance visit template
+const addMVT = async () => {
+    // check if all input data is valid
+    if (newNameMVT.value.trim() === "") {
+        alert("Please add a maintenance visit template name!");
+        return;
+    } else {
+        var counter = 0;
+        if (!(maintenanceVisitTemplates.value.length == null)) {
+            // check if maintenance visit template name already exists
+            maintenanceVisitTemplates.value.forEach(MVT => {
+                if (MVT.name === newNameMVT.value) {
+                    counter += 1;
+                }
+            });
+            if (counter == 1) {
+                alert("This maintenance visit template name already exists. Please choose an unique maintenance visit template name or modify respectively delete the old one!");
+                return;
+            }
+        }
+    }
+    if (newCustomerMVT.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/addMVT`,
+            {
+                name: newNameMVT.value,
+                customerID: newCustomerIDMVT.value,
+                customer: newCustomerMVT.value,
+                lastView: newLastViewMVT.value,
+                user: newUserMVT.value,
+                type: newTypeMVT.value,
+                notes: newNotesMVT.value,
+            });
+        store.commit('resetStore');
+        store.commit('changeToTemplatelist');
+        newTodos.forEach(async todo => {
+            try {
+                const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoMVT`,
+                    {
+                        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 MVT
+const addRowForNewMVT = async () => {
+    if (newCustomerMVT.value.length === 0) {
+        alert("Please choose a client first!");
+        return;
+    }
+    await getConfigItemsFromCustomer();
+    newTodos.push({
+        templateID: chosenMVTId.value,
+        rowID: newRowId.value,
+        asset: '',
+        task: '',
+        comments: ''
+    });
+}
+
+//update data
+const updateMVTTodo = 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/updateMVTTodo`,
+            {
+                primaryID: todo.primaryID,
+                templateID: todo.templateID,
+                rowID: todo.rowID,
+                asset: todo.asset,
+                task: todo.task,
+                comments: todo.commets,
+            }
+        );
+        await getMVTById();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new maintenance visit template todo
+const addMVTTodo = 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/addTodoMVT`,
+            {
+                templateID: chosenMVTId.value,
+                rowID: newStepTodo.value,
+                asset: newAssetTodo.value,
+                task: newTaskTodo.value,
+                comment: newCommentsTodo.value,
+            });
+        addRow.value = false;
+        await getMvtTodosById();
+        newAssetTodo.value = '';
+        newTaskTodo.value = '';
+        newCommentsTodo.value = '';
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new row for the template checklist
+const addChecklistRow = async () => {
+    await getConfigItemsFromCustomer();
+    if (addRow.value) {
+        alert('Please confirm the last added row first.')
+        return
+    }
+    addRow.value = true
+}
+
+//get all maintenance visit templates
+const getMaintenanceVisitTemplates = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitTemplates`);
+        maintenanceVisitTemplates.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1000);
+}
+
+// get maintenance visit template todos from id
+const getMvtTodosById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosMaintenanceVisitTemplate/${chosenMVTId.value}`
+            );
+            mvtTodos.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all config items from the selected client
+const getConfigItemsFromCustomer = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromCustomer/${MVT.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/getCIFromCustomer/${changedCustomerId.value}`);
+            configItemList.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    if (clientChanged.value) {
+        store.commit('toggleCustomerChanged');
+    }
+}
+
+// get maintenance visit template from id
+const getMVTById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${chosenMVTId.value}`
+            );
+            MVT.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    await getConfigItemsFromCustomer();
+}
+
+const deleteMVTTodo = async (id) => {
+    if (confirm("Do you really want to delete this maintenance visit template todo? It cannot be undone!")) {
+        try {
+            await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteMVTTodo/${id}`);
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    await getMvtTodosById();
+}
+
+watch(clientChanged, getMVTById);
+
+onMounted(() => {
+    getMvtTodosById();
+    getMVTById();
+    triggerBackendCallsWithDelay(getMaintenanceVisitTemplates);
+});
+</script>
+
+<script>
+export default {
+    name: "TemplateChecklist",
+};
+</script> 
+  
+    
+<style scoped>
+.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;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.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;
+    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;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    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;
+}
+
+.th-lightmode,
+.td-lightmode {
+    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%;
+}
+
+.Step-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Step-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Asset {
+    width: 22%;
+}
+
+.Asset-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Task {
+    width: 35%;
+}
+
+.Task-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Task-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Comments {
+    width: 35%;
+    display: flex;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+
+.editMvtTodos-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);
+}
+
+
+.saveMvtTodos-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;
+}
+
+.saveNewMVT-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);
+}
+
+.deleteMvtTodos-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;
+}
+
+.deleteLastMvtTodos-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;
+}
+
+
+.editMvtTodos-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;
+}
+
+.saveMvtTodos-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;
+}
+
+.deleteMvtTodos-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;
+}
+
+.deleteLastMvtTodos-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;
+}
+
+.saveNewMVT-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);
+}
+
+.deleteMvtTodos-darkmode:hover,
+.deleteLastMvtTodos-darkmode:hover,
+
+.saveMvtTodos-darkmode:hover,
+.editMvtTodos-darkmode:hover,
+.saveNewMVT-darkmode:hover {
+    background-color: #444444;
+    cursor: pointer;
+}
+
+.deleteMvtTodos-lightmode:hover,
+.deleteLastMvtTodos-lightmode:hover,
+
+.saveMvtTodos-lightmode:hover,
+.editMvtTodos-lightmode:hover,
+.saveNewMVT-lightmode:hover {
+    background-color: #ACACAC;
+    cursor: pointer;
+}
+
+#saveNewMVT {
+    text-align: center;
+}
+
+#editMvtTodos {
+    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,12 +1,16 @@
 <template>
-  <aside :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
+  <aside
-    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="toggleActionbar">
+    :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
-      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
+    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
+      @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" src="../icons/actionbar-icons/Search-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Search-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
@@ -14,7 +18,8 @@
       </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" src="../icons/actionbar-icons/Filter-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Filter-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
@@ -22,7 +27,8 @@
       </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" src="../icons/actionbar-icons/Instances-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Instances-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
@@ -30,7 +36,8 @@
       </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" src="../icons/actionbar-icons/Attachments-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Attachments-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
@@ -38,7 +45,8 @@
       </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" src="../icons/actionbar-icons/Sell-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Sell-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
@@ -46,15 +54,17 @@
       </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" src="../icons/actionbar-icons/Archive-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            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" src="../icons/actionbar-icons/Add-New-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            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>
@@ -62,15 +72,17 @@
       </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" src="../icons/actionbar-icons/Edit-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            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" src="../icons/actionbar-icons/Delete-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Delete-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
@@ -90,23 +102,23 @@ 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>
 
@@ -141,17 +153,21 @@ aside.actionbar {
   gap: 1.25rem;
   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;
 }
@@ -181,16 +197,30 @@ button {
   transition: 0.2s ease-in-out;
   overflow: clip;
 }
-.button-darkmode { background-color: #2C2C2C; } 
-.button-lightmode { background-color: #FFFFFF; } 
 
-.button-darkmode:hover, 
+.button-darkmode {
-.indicator-darkmode:hover { background-color: #444444; } 
+  background-color: #2C2C2C;
+}
 
-.button-lightmode:hover, 
+.button-lightmode {
-.indicator-lightmode:hover {  background-color: #ACACAC; } 
+  background-color: #FFFFFF;
+}
 
-.is-not-expanded>button { align-self: center; }
+.button-darkmode:hover,
+.indicator-darkmode:hover {
+  background-color: #444444;
+  cursor: pointer;
+}
+
+.button-lightmode:hover,
+.indicator-lightmode:hover {
+  background-color: #ACACAC;
+  cursor: pointer;
+}
+
+.is-not-expanded>button {
+  align-self: center;
+}
 
 
 .icon {
@@ -202,6 +232,7 @@ button {
   justify-content: center;
   padding: 0 0.5rem;
 }
+
 .is-not-expanded .icon {
   align-self: center;
 }
@@ -211,8 +242,11 @@ button {
   height: 1.875rem;
   border-radius: 0.3125rem;
   transition: 0.2s ease-in-out;
-} 
+}
-.is-not-expanded #indicator-icon { transform: rotate(180deg); }
+
+.is-not-expanded #indicator-icon {
+  transform: rotate(180deg);
+}
 
 
 img {
@@ -222,8 +256,14 @@ img {
   object-position: center;
   overflow: hidden;
 }
-.img-darkmode { filter: invert(100%); } 
+
-#indicator-icon>img { height: 1.25rem; }
+.img-darkmode {
+  filter: invert(100%);
+}
+
+#indicator-icon>img {
+  height: 1.25rem;
+}
 
 
 .label {
@@ -234,13 +274,20 @@ img {
   letter-spacing: 0.02rem;
   white-space: nowrap;
   font: 400 0.875rem/1.25rem Overpass, sans-serif;
-} 
+}
-.label-darkmode { color: #FFFFFF; } 
+
-.label-lightmode { color: #000000; }
+.label-darkmode {
+  color: #FFFFFF;
+}
+
+.label-lightmode {
+  color: #000000;
+}
 
 
 
-.fade-enter-from, .fade-leave-to {
+.fade-enter-from,
+.fade-leave-to {
   opacity: 0;
 }
 
@@ -310,5 +357,4 @@ img {
     max-width: 0;
     max-inline-size: 0;
   }
-}
+}</style>
-</style>

layouts/Navigationbar.vue

@@ -20,7 +20,7 @@
         </router-link>
       </nav>
       <nav id="site-menu">
-        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="checklists-button">
+        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultMasterChecklistPage()" id="checklists-button">
           <div class="icon" id="checklists-icon">
             <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Checklists-Icon.svg" />
           </div>
@@ -36,7 +36,7 @@
             <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']" id="solutions-button">
+        <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultSolutionPage()" id="solutions-button">
           <div class="icon" id="solutions-icon">
             <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Solutions-Icon.svg" />
           </div>
@@ -77,10 +77,20 @@ const isExpanded = ref(true)
 // get accesss to the store
 const store = useStore()
 const defaultAssetPage = () => {
-  store.commit('resetAssetStore');
+  store.commit('resetStore');
   store.commit('changeToAssetlist');
 };
 
+const defaultMasterChecklistPage = () => {
+  store.commit('resetStore');
+  store.commit('changeToTemplatelist')
+}
+
+const defaultSolutionPage = () => {
+  store.commit('resetStore');
+  store.commit('changeToSolutionlist')
+}
+
 const ToggleSidebar = () => {
   isExpanded.value = !isExpanded.value;
 };

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
-//   }

pages/assets.vue

@@ -1,7 +1,9 @@
 <template>
   <section id="content">
     <div id="content-header">
-      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
+      <router-link to="/assets" class="button" id="assets-button" @click="defaultAssetPage()">
+        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
+      </router-link>
     </div>
     <div id="content-body">
       <CustomerSearch v-if="onAssetlist || onCustomerAssetlist" />
@@ -16,8 +18,8 @@
     </div>
   </section>
 </template>
-  
+
-  
+
 <script setup>
 import { ref } from 'vue';
 
@@ -43,6 +45,11 @@ definePageMeta({
   layout: 'default'
 })
 
+const defaultAssetPage = () => {
+  store.commit('resetStore');
+  store.commit('changeToAssetlist')
+}
+
 const darkMode = ref(true)
 </script>
 
@@ -51,7 +58,7 @@ export default {
   name: "AssetPage",
 }
 </script>
-    
+
 <style scoped>
 * {
   box-sizing: border-box;
@@ -102,4 +109,8 @@ export default {
   margin-bottom: 0.625rem;
   border-radius: 0.625rem;
 }
+
+.button {
+  text-decoration: none;
+}
 </style>

pages/customers.vue

@@ -16,7 +16,6 @@
   </section>
 </template>
   
-  
 <script setup>
 import { ref } from 'vue';
 

pages/maintenanceVisits.vue

@@ -1,7 +1,8 @@
 <template>
   <section id="content">
     <div id="content-header">
-      <router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button">
+      <router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button"
+        @click="defaultMasterChecklistPage()">
         <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Maintenance visits</h1>
       </router-link>
       &nbsp;
@@ -20,20 +21,21 @@
       &nbsp;
       &nbsp;
       &nbsp;
-      <router-link to="/productionOrders" class="button" id="productionOrders-button">
+      <router-link to="/productionOrders" class="button" id="productionOrders-button"
+        @click="defaultMasterChecklistPage()">
         <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Production orders</h1>
       </router-link>
     </div>
     <div id="content-body">
-      <CustomerSearch v-if="onTemplatelist || onCustomerTemplatelist"/>
+      <CustomerSearch v-if="onTemplatelist || onCustomerTemplatelist" />
-      <MaintenanceVisitsTemplateTable v-if="onTemplatelist"/>
+      <MaintenanceVisitsTemplateTable v-if="onTemplatelist" />
-      <MaintenanceVisitsTemplateTableNoCustomer v-if="onCustomerTemplatelist"/>
+      <MaintenanceVisitsTemplateTableNoCustomer v-if="onCustomerTemplatelist" />
-      <MaintenanceVisitsTemplate v-if="onTemplate"/>
+      <MaintenanceVisitsTemplate v-if="onTemplate" />
-      <TemplateChecklist v-if="onTemplate"/>
+      <TemplateChecklistMVT v-if="onTemplate" />
-      <TemplateSearch v-if="onInstancelist"/>
+      <TemplateSearch v-if="onInstancelist" />
-      <MaintenanceVisitsInstanceTable v-if="onInstancelist"/>
+      <MaintenanceVisitsInstanceTable v-if="onInstancelist" />
-      <MaintenanceVisitsInstance v-if="onInstance"/>
+      <MaintenanceVisitsInstance v-if="onInstance" />
-      <InstanceChecklist v-if="onInstance"/>
+      <InstanceChecklist v-if="onInstance" />
     </div>
   </section>
 </template>
@@ -46,11 +48,20 @@ import CustomerSearch from "../components/CustomerSearch.vue";
 import MaintenanceVisitsTemplateTable from "../components/server/MaintenanceVisitsTemplateTable.vue";
 import MaintenanceVisitsTemplateTableNoCustomer from "../components/server/MaintenanceVisitsTemplateTableNoCustomer.vue";
 import MaintenanceVisitsTemplate from "../components/server/MaintenanceVisitsTemplate.vue";
-import TemplateChecklist from "../components/server/TemplateChecklist.vue";
+import TemplateChecklistMVT from "../components/server/TemplateChecklistMVT.vue";
 import TemplateSearch from "../components/TemplateSearch.vue";
 import MaintenanceVisitsInstanceTable from "../components/server/MaintenanceVisitsInstanceTable.vue";
 import MaintenanceVisitsInstance from "../components/server/MaintenanceVisitsInstance.vue";
 import InstanceChecklist from "../components/server/InstanceChecklist.vue";
+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'
@@ -58,12 +69,10 @@ definePageMeta({
 
 const darkMode = ref(true)
 
-// to render the right components
+const defaultMasterChecklistPage = () => {
-const onTemplatelist = ref(true)
+  store.commit('resetStore');
-const onCustomerTemplatelist = ref(false)
+  store.commit('changeToTemplatelist')
-const onTemplate = ref(false)
+}
-const onInstancelist = ref(false)
-const onInstance = ref(false)
 </script>
     
 <script>

pages/productionOrders.vue

@@ -1,7 +1,8 @@
 <template>
     <section id="content">
         <div id="content-header">
-            <router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button">
+            <router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button"
+                @click="defaultMasterChecklistPage">
                 <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Maintenance visits</h1>
             </router-link>
             &nbsp;
@@ -21,7 +22,8 @@
             &nbsp;
             &nbsp;
             <router-link to="/productionOrders" class="button" id="productionOrders-button">
-                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Production orders</h1>
+                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name"
+                    @click="defaultMasterChecklistPage()">Production orders</h1>
             </router-link>
         </div>
         <div id="content-body">
@@ -51,6 +53,15 @@ 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'
@@ -58,12 +69,10 @@ definePageMeta({
 
 const darkMode = ref(true)
 
-// to render the right components
+const defaultMasterChecklistPage = () => {
-const onTemplatelist = ref(true)
+    store.commit('resetStore');
-const onCustomerTemplatelist = ref(false)
+    store.commit('changeToTemplatelist')
-const onTemplate = ref(false)
+}
-const onInstancelist = ref(false)
-const onInstance = ref(false)
 </script>
   
 <script>

pages/solutions.vue

@@ -1,19 +1,20 @@
 <template>
   <section id="content">
     <div id="content-header">
-      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
+      <router-link to="/solutions" class="button" id="solutions-button" @click="defaultSolutionPage()">
+        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
+      </router-link>
     </div>
     <div id="content-body">
-      <CustomerSearch v-if="onSolutionlist || onCustomerSolutionlist"/>
+      <CustomerSearch v-if="onSolutionlist || onCustomerSolutionlist" />
-      <SolutionTable v-if="onSolutionlist"/>
+      <SolutionTable v-if="onSolutionlist" />
-      <SolutionTableNoCustomer v-if="onCustomerSolutionlist"/>
+      <SolutionTableNoCustomer v-if="onCustomerSolutionlist" />
-      <Solution v-if="onSolution"/>
+      <Solution v-if="onSolution" />
-      <SolutionChecklist v-if="onSolution"/>
+      <SolutionChecklist v-if="onSolution" />
     </div>
   </section>
 </template>
-  
+
-  
 <script setup>
 import { ref } from 'vue';
 
@@ -22,17 +23,24 @@ import SolutionTable from "../components/server/SolutionTable.vue";
 import SolutionTableNoCustomer from "../components/server/SolutionTableNoCustomer.vue";
 import Solution from "../components/server/Solution.vue";
 import SolutionChecklist from "../components/server/SolutionChecklist.vue";
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const onSolutionlist = computed(() => store.state.onSolutionlist);
+const onCustomerSolutionlist = computed(() => store.state.onCustomerSolutionlist);
+const onSolution = computed(() => store.state.onSolution);
 
 definePageMeta({
   layout: 'default'
 })
 
-const darkMode = ref(true)
+const defaultSolutionPage = () => {
+  store.commit('resetStore');
+  store.commit('changeToSolutionlist')
+}
 
-// to render the right components
+const darkMode = ref(true)
-const onSolutionlist = ref(true)
-const onCustomerSolutionlist = ref(false)
-const onSolution = ref(false)
 </script>
 
 <script>
@@ -40,9 +48,9 @@ export default {
   name: "AssetPage",
 }
 </script>
-    
+
-    
+
-    
+
 <style scoped>
 * {
   box-sizing: border-box;
@@ -93,4 +101,8 @@ export default {
   margin-bottom: 0.625rem;
   border-radius: 0.625rem;
 }
+
+.button {
+  text-decoration: none;
+}
 </style>

plugins/vuex.js

@@ -3,10 +3,15 @@ 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,
+            customerChanged: false,
+            changedCustomerId: -1,
+            filteredByCustomer: '',
+
             onAssetlist: true,
             onCustomerAssetlist: false,
             onAsset: false,
@@ -36,20 +41,77 @@ 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,
+
+            newNameMVT: '',
+            newCustomerIDMVT: '',
+            newCustomerMVT: '',
+            newLastViewMVT: '',
+            newUserMVT: '',
+            newTypeMVT: '',
+            newNotesMVT: '',
+            chosenMVTId: -1,
+
+            onSolutionlist: true,
+            onCustomerSolutionlist: false,
+            onSolution: false,
+            chosenSolutionId: -1,
+            newSolutionNameSol: '',
+            newCustomerIDSol: '',
+            newCustomerSol: '',
+            newAssetNameSol: '',
+            newTypeSol: '',
+            newLastViewSol: '',
+            newUserSol: '',
+            newDescriptionSol: '',
+            newNotesSol: '',
         };
     },
     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.filteredByCustomer = ''
+        },
+        toggleCustomerChanged(state) {
+            state.customerChanged = !state.customerChanged
+        },
+        toggleCustomerId(state, id) {
+            state.changedCustomerId = id
+        },
+
+
+        // functions to change the asset pages
         changeToAssetlist(state) {
             state.onAssetlist = true
             state.onCustomerAssetlist = false
@@ -107,6 +169,35 @@ const store = createStore({
             state.newSoftware = ''
             state.newVersion = ''
             state.newLicense = ''
+
+        // functions to change the production order and maintenance visit pages
+        changeToTemplatelist(state) {
+            state.onTemplatelist = true
+            state.onCustomerTemplatelist = false
+            state.onTemplate = false
+            state.onInstancelist = false
+            state.onInstance = false
+        },
+        changeToCustomerTemplatelist(state) {
+            state.onTemplatelist = false
+            state.onCustomerTemplatelist = true
+            state.onTemplate = false
+            state.onInstancelist = false
+            state.onInstance = false
+        },
+        changeToTemplate(state) {
+            state.onTemplatelist = false
+            state.onCustomerTemplatelist = false
+            state.onTemplate = true
+            state.onInstancelist = false
+            state.onInstance = false
+        },
+        changeToInstancelist(state) {
+            state.onTemplatelist = false
+            state.onCustomerTemplatelist = false
+            state.onTemplate = false
+            state.onInstancelist = true
+            state.onInstance = false
         },
         doDeleteAsset(state) {
             state.deleteAsset = true
@@ -136,6 +227,25 @@ const store = createStore({
             state.onAsset = true
             state.onSolutionlistAsset = false
         },
+
+        // functions to change the solution pages
+        changeToSolutionlist(state) {
+            state.onSolutionlist = true
+            state.onCustomerSolutionlist = false
+            state.onSolution = false
+        },
+        changeToCustomerSolutionlist(state) {
+            state.onSolutionlist = false
+            state.onCustomerSolutionlist = true
+            state.onSolution = false
+        },
+        changeToSolution(state) {
+            state.onSolutionlist = false
+            state.onCustomerSolutionlist = false
+            state.onSolution = true
+        },
+
+        // functions to update the asset
         updateAssetComponent(state, asset) {
             state.newAssetName = asset.assetName
             state.newCustomerID = asset.customerId
@@ -161,7 +271,168 @@ 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
+        },
+
+        // functions to update the maintenance visit template
+        updateMaintenanceVisitTemplateComponent(state, mvt) {
+            state.newNameMVT = mvt.name
+            state.newCustomerIDMVT = mvt.customerId
+            state.newCustomerMVT = mvt.customer
+            state.newUserMVT = mvt.user
+            state.newTypeMVT = mvt.type
+            state.newNotesMVT = mvt.notes
+        },
+
+        // functions to update the solution
+        updateSolutionComponent(state, sol) {
+            state.newSolutionNameSol = sol.solutionName
+            state.newCustomerIDSol = sol.customerId
+            state.newCustomerSol = sol.customer
+            state.newAssetNameSol = sol.assetName
+            state.newLastViewSol = sol.lastView
+            state.newTypeSol = sol.type
+            state.newDescriptionSol = sol.description
+            state.newNotesSol = sol.notes
+            state.newUserSol = sol.user
+        },
+
+        // 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 set the chosen maintenance visit template
+        setChosenMVT(state, id) {
+            state.chosenMVTId = id
+        },
+
+         // function to set the chosen solution
+         setChosenSolution(state, id) {
+            state.chosenSolutionId = id
+        },
+
+        // function to reset the pages
+        resetStore(state) {
+            state.editable = false
+            state.filtered = false
+            state.searchable = false
+            state.deleteBool = false
+            state.chosenAssetId = -1
+            state.filteredByCustomer = ''
+            state.new = false
+            state.customerChanged = false
+            state.changedCustomerId = -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 = ''
+            state.newDescriptionPOT = ''
+            state.newNotesPOT = ''
+            state.newLastViewPOT = ''
+            state.chosenPOTId = -1
+
+            // reset the maintenance visit template page variables
+            state.newNameMVT = ''
+            state.newCustomerIDMVT = ''
+            state.newCustomerMVT = ''
+            state.newUserMVT = ''
+            state.newTypeMVT = ''
+            state.newNotesMVT = ''
+            state.newLastViewMVT = ''
+            state.chosenMVTId = -1
+
+            // reset the solution page variables
+            state.newSolutionNameSol = ''
+            state.newCustomerIDSol = ''
+            state.newCustomerSol = ''
+            state.newAssetNameSol = ''
+            state.newLastViewSol = ''
+            state.newTypeSol = ''
+            state.newDescriptionSol = ''
+            state.newNotesSol = ''
+            state.newUserSol = ''
+            state.chosenSolutionId = -1
+        },
+
+        // functions to (undo) delete an asset
+        doDelete(state) {
+            state.deleteBool = true
+        },
+        undoDelete(state) {
+            state.deleteBool = false
+        },
+
+        // function to update the asset filter
+        updateFilterbyCustomer(state, client) {
+            state.filteredByCustomer = 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 and maintenance visit variables
+            state.onTemplatelist = false
+            state.onCustomerTemplatelist = false
+            state.onTemplate = true
+            state.onInstancelist = false
+            state.onInstance = false
+
+            // set the solution variables
+            state.onSolutionlist = false
+            state.onCustomerSolutionlist = false
+            state.onSolution = true
+        },
     },
 });
 

server/api/addMVT.ts

@@ -0,0 +1,22 @@
+import { insertId, errorMsg } from "../middleware/maintenanceVisitTemplates";
+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/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/addSol.ts

@@ -0,0 +1,22 @@
+import { insertId, errorMsg } from "../middleware/solutions";
+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/addTodoMVT.ts

@@ -0,0 +1,21 @@
+import { errorMsg } from "../middleware/maintenanceVisitTemplates";
+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/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/addTodoSol.ts

@@ -0,0 +1,21 @@
+import { errorMsg } from "../middleware/solutions";
+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/deleteMVTTodo/[id].ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../../middleware/maintenanceVisitTemplates";
+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/deleteMaintenanceVisitTemplate/[id].ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../../middleware/maintenanceVisitTemplates";
+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/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/deleteSolTodo/[id].ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../../middleware/solutions";
+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/deleteSolution/[id].ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../../middleware/solutions";
+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/deleteTodosMVT/[id].ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../../middleware/maintenanceVisitTemplates";
+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/deleteTodosSol/[id].ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../../middleware/solutions";
+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/deleteTodosSolution/[id].ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../../middleware/solutions";
+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/getCIFromCustomer/[id].ts

@@ -0,0 +1,22 @@
+import { configItemsFromCustomer, 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 configItemsFromCustomer
+})

server/api/getMaintenanceVisitTemplate/[id].ts

@@ -0,0 +1,22 @@
+import { mvt, errorMsg } from "../../middleware/maintenanceVisitTemplates";
+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 mvt
+})

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/getSelectedMVTsByCustomer/[id].ts

@@ -0,0 +1,22 @@
+import { selectedMVTsByCustomer, errorMsg } from "../../middleware/maintenanceVisitTemplates";
+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 selectedMVTsByCustomer
+})

server/api/getSelectedMVTsByMVT/[id].ts

@@ -0,0 +1,22 @@
+import { selectedMVTsByMVT, errorMsg } from "../../middleware/maintenanceVisitTemplates";
+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 selectedMVTsByMVT
+})

server/api/getSelectedPOTsByCustomer/[id].ts

@@ -0,0 +1,22 @@
+import { selectedPOTsByCustomer, 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 selectedPOTsByCustomer
+})

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/getSelectedSolutionsByCustomer/[id].ts

@@ -0,0 +1,22 @@
+import { selectedSolutionsByCustomer, errorMsg } from "../../middleware/solutions";
+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 selectedSolutionsByCustomer
+})

server/api/getSelectedSolutionsBySolution/[id].ts

@@ -0,0 +1,22 @@
+import { selectedSolutionsBySolution, errorMsg } from "../../middleware/solutions";
+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 selectedSolutionsBySolution
+})

server/api/getSolution/[id].ts

@@ -0,0 +1,22 @@
+import { solution, errorMsg } from "../../middleware/solutions";
+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 solution
+})

server/api/getTodosMaintenanceVisitTemplate/[id].ts

@@ -0,0 +1,22 @@
+import { mvtTodosByTemplateId, errorMsg } from "../../middleware/maintenanceVisitTemplates";
+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 mvtTodosByTemplateId
+})

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/getTodosSolution/[id].ts

@@ -0,0 +1,22 @@
+import { solTodosBySolutionId, errorMsg } from "../../middleware/solutions";
+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 solTodosBySolutionId
+})

server/api/updateMVTTodo.ts

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

server/api/updateMaintenanceVisitTemplate.ts

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

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/api/updateSolTodo.ts

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

server/api/updateSolution.ts

@@ -0,0 +1,13 @@
+import { errorMsg } from "../middleware/solutions";
+
+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 selectedConfigItemsByCustomer = [];
+let configItemsFromCustomer = [];
 let selectedConfigItemsByAsset = [];
 
 export default defineEventHandler(async (event) => {
@@ -82,6 +83,38 @@ export default defineEventHandler(async (event) => {
         }
     }
 
+    if (event.path.startsWith("/api/getCIFromCustomer")) {
+        // get all config items from a customer 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}`);
+            configItemsFromCustomer = 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, selectedConfigItemsByCustomer, selectedConfigItemsByAsset, errorMsg };
+export { configItems, configItem, selectedConfigItemsByCustomer, selectedConfigItemsByAsset, configItemsFromCustomer, errorMsg };

server/middleware/maintenanceVisitTemplates.ts

@@ -3,24 +3,29 @@ import serversideConfig from '../../serversideConfig';
 import https from 'https';
 
 let maintenanceVisitTemplates = [];
+let selectedMVTsByMVT = [];
+let selectedMVTsByCustomer = [];
+let mvtTodosByTemplateId = [];
+let mvt = [];
+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/getAllMaintenanceVisitTemplates")) {
 
-        const agent = new https.Agent({
-            rejectUnauthorized: false,
-        });
-
-        const axiosInstance = axios.create({
-            headers: {
-                'Content-Type': 'application/json',
-                Accept: "*",
-            },
-            httpsAgent: agent
-        });
-
         // get all maintenance visit templates object from backend
         try {
             let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisits`);
@@ -46,6 +51,343 @@ export default defineEventHandler(async (event) => {
             }
         }
     }
+
+    if (event.path.startsWith("/api/addMVT")) {
+        const body = await readBody(event)
+        // add the mvt in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisits`, 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/addTodoMVT")) {
+        const body = await readBody(event)
+        // add the mvt todo in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos`, 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/getSelectedMVTsByMVT")) {
+        // get selected maintenance visit templates object by mvt from backend
+        let filteredMVt = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredMVt = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedMasterMaintenanceVisitsByChecklistname/${filteredMVt}`);
+            selectedMVTsByMVT = 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/getSelectedMVTsByCustomer")) {
+        // get selected maintenance visit templates object by client from backend
+        let filteredCustomer = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredCustomer = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedMasterMaintenanceVisitsByCustomer/${filteredCustomer}`);
+            selectedMVTsByCustomer = 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/deleteMaintenanceVisitTemplate")) {
+        let mvtId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        mvtId = pathSegments[pathSegments.length - 1];
+
+        // delete the mvt in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisits/${mvtId}`);
+        } 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/getTodosMaintenanceVisitTemplate")) {
+        // get maintenance visit 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}/masterMaintenanceVisitTodos/${itemId}`);
+            mvtTodosByTemplateId = 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/deleteTodosMVT")) {
+        let mvtId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        mvtId = pathSegments[pathSegments.length - 1];
+
+        // delete the mvt todos in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodosByTemplateid/${mvtId}`);
+        } 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/updateMaintenanceVisitTemplate")) {
+        const body = await readBody(event)
+        // update the maintenance visit template in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisits`, 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/getMaintenanceVisitTemplate")) {
+        // get maintenance visit template object from backend
+        let mvtId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        mvtId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisit/${mvtId}`);
+            mvt = 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/updateMVTTodo")) {
+        const body = await readBody(event)
+        // update the maintenance visit template todo in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos`, 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/deleteMVTTodo")) {
+        let mvtId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        mvtId = pathSegments[pathSegments.length - 1];
+
+        // delete the mvt in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos/${mvtId}`);
+        } 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 { maintenanceVisitTemplates, errorMsg };
+export { maintenanceVisitTemplates, selectedMVTsByMVT, selectedMVTsByCustomer, mvtTodosByTemplateId, mvt, insertId, errorMsg };

server/middleware/productionOrderTemplates.ts

@@ -3,24 +3,28 @@ import serversideConfig from '../../serversideConfig';
 import https from 'https';
 
 let productionOrderTemplates = [];
+let selectedPOTsByCustomer = [];
+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/getSelectedPOTsByCustomer")) {
+        // get selected production order templates object by client from backend
+        let filteredCustomer = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredCustomer = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedMasterProductionOrdersByCustomer/${filteredCustomer}`);
+            selectedPOTsByCustomer = 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, selectedPOTsByCustomer, selectedPOTsByPOT, pot, potTodosByTemplateId, insertId, errorMsg };

server/middleware/solutions.ts

@@ -3,24 +3,29 @@ import serversideConfig from '../../serversideConfig';
 import https from 'https';
 
 let solutions = [];
+let solution = {};
+let selectedSolutionsByCustomer = [];
+let selectedSolutionsBySolution = [];
+let solTodosBySolutionId = [];
+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/getAllSolutions")) {
 
-        const agent = new https.Agent({
-            rejectUnauthorized: false,
-        });
-
-        const axiosInstance = axios.create({
-            headers: {
-                'Content-Type': 'application/json',
-                Accept: "*",
-            },
-            httpsAgent: agent
-        });
-
         // get all solutions object from backend
         try {
             let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/solutions`);
@@ -46,6 +51,344 @@ export default defineEventHandler(async (event) => {
             }
         }
     }
+
+    if (event.path.startsWith("/api/getSelectedSolutionsByCustomer")) {
+        // get selected solutions object by client from backend
+        let filteredCustomer = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredCustomer = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedSolutionsByCustomer/${filteredCustomer}`);
+            selectedSolutionsByCustomer = 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/getSelectedSolutionsBySolution")) {
+        // get selected solutions object by asset from backend
+        let filteredSolution = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredSolution = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedSolutionsBySolutionName/${filteredSolution}`);
+            selectedSolutionsBySolution = 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/getSolution")) {
+        // get solution object from backend
+        let solutionId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        solutionId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/solutions/${solutionId}`);
+            solution = 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/updateSolution")) {
+        const body = await readBody(event)
+        // update the solution in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/solutions`, 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/addSol")) {
+        const body = await readBody(event)
+        // add the solution in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/solutions`, 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/deleteSolution")) {
+        let solId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        solId = pathSegments[pathSegments.length - 1];
+
+        // delete the solution in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/solutions/${solId}`);
+        } 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/addTodoSol")) {
+        const body = await readBody(event)
+        // add the solution todo in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/checklistSolutionsTodos`, 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/updateSolTodo")) {
+        const body = await readBody(event)
+        // update the solution todo in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/checklistSolutionsTodos`, 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/getTodosSolution")) {
+        // get solution 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}/checklistSolutionsTodos/${itemId}`);
+            solTodosBySolutionId = 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/deleteTodosSol")) {
+        let solId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        solId = pathSegments[pathSegments.length - 1];
+
+        // delete the mvt todos in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/checklistSolutionsTodosBySolutionID/${solId}`);
+        } 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/deleteSolTodo")) {
+        let solId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        solId = pathSegments[pathSegments.length - 1];
+
+        // delete the mvt in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/checklistSolutionsTodos/${solId}`);
+        } 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 { solutions, errorMsg };
+export { solutions, solution, selectedSolutionsByCustomer, selectedSolutionsBySolution, solTodosBySolutionId, insertId, errorMsg };