implemented authentication with sidebase/nuxt-auth

app.vue

@@ -7,9 +7,21 @@
 
 
 <script setup>
+//import { createPinia } from "pinia";
+//import piniaPluginPersistedState from "pinia-plugin-persistedstate"
+
 
 //const layout = "empty";
+//const route = useRoute();
+//const pinia = createPinia();
+//pinia.use(piniaPluginPersistedState);
 
+
+useHead({
+  //title: `Tüit ERP - ${route.meta.title}`,
+  title: `Tüit ERP`,
+  link: [{ rel: "icon", type: "image/png", href: "/favicon-gelb-rot-32x32.png" }]
+})
 </script>
 
 

axios.config.js

@@ -1,14 +1,30 @@
-import axios from 'axios';
+import axios, {AxiosError} from 'axios';
+import clientsideConfig from './clientsideConfig'
 
 //create axios instance
 const Axios = axios.create({
-  // baseURL: `https://${serversideConfig.url}:${serversideConfig.port}`,
+  //baseURL: `https://${serversideConfig.url}:${serversideConfig.port}/`,
+  baseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
   headers: {
     // 'Accept': 'application/json', 
     'Content-Type': 'application/json',
     //Authorization: `Bearer`,
     Accept: "*",
   },
+  withCredentials: true,
+  credentials: true,
 })
 
+
+Axios.interceptors.response.use((response) => response, (error) => {
+
+  if (error instanceof AxiosError) {
+    console.error('Status: ', error.response?.status, '\nHeaders: '. error.response?.headers, '\nMessage: '. error.response?.data.message)
+  } else { console.error('Error: ', error); };
+
+  if (error.response?.status === 403) { window.location.href = '/login'; };
+
+  return Promise.reject(error);
+});
+
 export default Axios;

backend/controller/users.js

@@ -93,7 +93,15 @@ export const login = async (req, res, next) => {
                 }
                 if (bResult) {
                     // password match
-                    const token = jwt.sign(
+                    const authtoken = jwt.sign(
+                        {
+                            username: result[0].username,
+                            userId: result[0].id,
+                        },
+                        'SECRETTUEITKEY',
+                        { expiresIn: '300s' } // 5min
+                    );
+                    const refreshtoken = jwt.sign(
                         {
                             username: result[0].username,
                             userId: result[0].id,
@@ -115,7 +123,7 @@ export const login = async (req, res, next) => {
                     const results = await ownConn.query(sql1, [dateTimeString, result[0].id]);
                     return res.status(200).send({
                         message: 'Logged in!',
-                        token,
+                        token: { authToken: authtoken, refreshToken: refreshtoken },
                         user: result[0],
                     });
                 }

backend/models/checklistSolutionsModel.js

@@ -4,7 +4,6 @@ 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) {
@@ -48,7 +47,6 @@ 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) {
@@ -63,7 +61,6 @@ 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) {
@@ -78,7 +75,6 @@ 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 LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
+    let sql = `SELECT * FROM changedb WHERE customer LIKE '%${selected}%' 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 LOWER(assetName) LIKE '%${selected.toLowerCase()}%' ORDER BY assetName ASC`;
+    let sql = `SELECT * FROM changedb WHERE assetName LIKE '%${selected}%' 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 LOWER(customername) LIKE '%${selected.toLowerCase()}%' ORDER BY customername ASC`;
+        let sql = `SELECT * FROM customers WHERE customername LIKE '%${selected}%' 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 LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM issueslips WHERE customer LIKE '%${selected}%' 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 LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
+        let sql = `SELECT * FROM issuevariants WHERE name LIKE '%${selected}%' 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 LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
+    let sql = `SELECT * FROM maintenancevisits WHERE name LIKE '%${selected}%' 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 LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
+    let sql = `SELECT * FROM maintenancevisits WHERE customer LIKE '%${selected}%' 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 LOWER(state) LIKE '%${selected.toLowerCase()}%' ORDER BY state ASC`;
+    let sql = `SELECT * FROM maintenancevisits WHERE state LIKE '%${selected}%' ORDER BY state ASC`;
     const results = await ownConn.execute(sql)
     result(null, results);
   }
@@ -88,7 +88,6 @@ 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) {
@@ -132,7 +131,6 @@ 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,7 +4,6 @@ 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) {
@@ -48,7 +47,6 @@ 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,9 +18,8 @@ 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 = ?, commets = ? WHERE primaryID = ?`;
+        let sql = `UPDATE mastermaintenancetodos SET templateID = ?, asset = ? , task = ?, comments = ? 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) {
@@ -36,7 +35,6 @@ 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) {
@@ -51,7 +49,6 @@ 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) {
@@ -82,8 +79,7 @@ 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, commets) VALUES(?, ?, ?, ?, ?)`, [data.templateID, data.rowID, data.asset, data.task, data.comment])
+        const results = await ownConn.query(`INSERT INTO mastermaintenancetodos(templateID, rowID, asset, task, comments) VALUES(?, ?, ?, ?, ?)`, [data.templateID, data.rowID, data.asset, data.task, asset.comments])
-        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 LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM mastermaintenancevisits WHERE customer LIKE '%${selected}%' 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 LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
+        let sql = `SELECT * FROM mastermaintenancevisits WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -62,7 +62,6 @@ 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) {
@@ -76,7 +75,6 @@ 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) {
@@ -91,7 +89,6 @@ 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,9 +18,8 @@ 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 = ?, comments = ? WHERE primaryID = ?`;
+        let sql = `UPDATE masterordertodos SET templateID = ?, asset = ? , task = ?, comment = ? WHERE primaryID = ?`;
-        const results = await ownConn.query(sql, [data.templateID, data.asset, data.task, data.comments, id])
+        const results = await ownConn.query(sql, [data.templateID, data.asset, data.task, data.comment, id])
-        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -36,7 +35,6 @@ 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) {
@@ -51,7 +49,6 @@ 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) {
@@ -82,8 +79,7 @@ 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, comments) VALUES(?, ?, ?, ?, ?)`, [data.templateID, data.rowID, data.asset, data.task, data.comment])
+        const results = await ownConn.query(`INSERT INTO masterordertodos(templateID, rowID, asset, task, comment) 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 LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM masterproductionorders WHERE customer LIKE '%${selected}%' 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 LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
+        let sql = `SELECT * FROM masterproductionorders WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -62,7 +62,6 @@ 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) {
@@ -76,7 +75,6 @@ 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) {
@@ -91,7 +89,6 @@ 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 LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM productionorders WHERE customer LIKE '%${selected}%' 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 LOWER(state) LIKE '%${selected.toLowerCase()}%' ORDER BY state ASC`;
+        let sql = `SELECT * FROM productionorders WHERE state LIKE '%${selected}%' 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 LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
+        let sql = `SELECT * FROM productionorders WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -102,7 +102,6 @@ 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) {
@@ -146,7 +145,6 @@ 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,7 +46,6 @@ 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) {
@@ -62,7 +61,6 @@ 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) {
@@ -75,7 +73,7 @@ export const updateSolutionById = async (data, result) => {
 //get all selected solutions by customer
 export const getSelectedSolutionsByCustomer = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM solutions WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM solutions WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -88,7 +86,7 @@ export const getSelectedSolutionsByCustomer = async (selected, result) => {
 
 //get all selected solutions by solution name
 export const getSelectedSolutionsBySolutionName = async (selected, result) => {
-    let sql = `SELECT * FROM solutions WHERE LOWER(solutionName) LIKE '%${selected.toLowerCase()}%' ORDER BY solutionName ASC`;
+    let sql = `SELECT * FROM solutions WHERE solutionName LIKE '%${selected}%' ORDER BY solutionName ASC`;
     try {
         const results = await ownConn.execute(sql)
         result(null, results);
@@ -103,7 +101,7 @@ export const getSelectedSolutionsBySolutionName = async (selected, result) => {
 //get all selected solutions by asset name
 export const getSelectedSolutionsByAssetName = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM solutions WHERE LOWER(assetName) LIKE '%${selected.toLowerCase()}%' ORDER BY assetName ASC`;
+        let sql = `SELECT * FROM solutions WHERE assetName LIKE '%${selected}%' ORDER BY assetName ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -117,7 +115,7 @@ export const getSelectedSolutionsByAssetName = async (selected, result) => {
 //get all selected solutions by type
 export const getSelectedSolutionsByType = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM solutions WHERE LOWER(type) LIKE '%${selected.toLowerCase()}%' ORDER BY solutionName ASC`;
+        let sql = `SELECT * FROM solutions WHERE type LIKE '%${selected}%' ORDER BY solutionName ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -133,7 +131,6 @@ 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) {

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 template id
+// Delete master maintenance visit todo by customer id
-router.delete("/masterMaintenanceVisitTodosByTemplateid/:id", deleteMasterMaintenanceVisitTodoByTemplateIds);
+router.delete("/masterMaintenanceVisitTodosByCustomerid/: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 template id
+// Delete master production order todo by customer id
-router.delete("/masterProductionOrderTodosByTemplateid/:id", deleteMasterProductionOrderTodoByTemplateIds);
+router.delete("/masterProductionOrderTodosByCustomerid/:id", deleteMasterProductionOrderTodoByTemplateIds);
 
 // Update all master production order todos
 router.put("/allMasterProductionOrderTodos", updateAllProductionOrderTodos)

components/ClientSearch.vue

@@ -1,9 +1,9 @@
 <template>
   <section :class="['client-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
-    <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Customer</div>
+    <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Client</div>
     <pre v-if="!filtered" :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ clientFilter }}</pre>
     <input v-if="filtered" v-model="clientFilter" @change="filterConfigItemList()"
-      :class="['data', 'input-customer', darkMode ? 'data-darkmode' : 'data-lightmode']">
+      :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
   </section>
 </template>
 
@@ -13,9 +13,9 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
-const filtered = computed(() => store.state.filtered);
+const filtered = computed(() => store.state.assetFiltered);
-const filteredTerm = computed(() => store.state.filteredByClient);
+const filteredTerm = computed(() => store.state.filteredAssetbyClient);
-const clientFilter = ref(store.state.filteredByClient);
+const clientFilter = ref(store.state.filteredAssetbyClient);
 
 const darkMode = ref(true)
 
@@ -26,7 +26,7 @@ const updateFilterTerm = () => {
 
 // update the filtered term in the store
 const filterConfigItemList = () => {
-  store.commit('updateFilterbyClient', clientFilter.value);
+  store.commit('updateAssetFilterbyClient', clientFilter.value);
 }
 
 watch(filteredTerm, updateFilterTerm)
@@ -98,9 +98,8 @@ export default {
   color: #000;
 }
 
-.input-customer {
+.input {
   border: none;
-  margin-left: 1rem;
 }
 
 .data-darkmode {

components/LoginForm.vue

@@ -4,13 +4,13 @@
       <span class="title-icon" id="logo-icon">
         <img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
       </span>
-      <pre :class="['title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Login</pre>
+      <pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Login</pre>
     </div>
     <div class="login-field">
       <div class="form-field" id="username-field">
         <label for="username-input" id="username-label">
           <span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="username-icon">
-            <img loading="lazy" src="../icons/Mail-Icon.svg" />
+            <img loading="lazy" src="/icons/Mail-Icon.svg" />
           </span>
           <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Username:</div>
         </label>
@@ -21,14 +21,13 @@
       <div class="form-field" id="password-field">
         <label for="password-input" id="password-label">
           <span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="password-icon">
-            <img loading="lazy" src="../icons/Lock-Icon.svg" />
+            <img loading="lazy" src="/icons/Lock-Icon.svg" />
           </span>
           <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Password:</div>
         </label>
         <div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
           <input type="text" id="password-input" placeholder="*******">
-          <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle"
+          <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle" value="Show">
-            value="Show">
         </div>
       </div>
     </div>
@@ -37,10 +36,10 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']"> {{ errorMsg }} </div>
       </label>
     </div>
-    <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login"
+    <div class="buttons">
-      @click="handleLogin">
+      <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login" @click="handleLogin">
-    <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Signup"
+      <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="signup-button" value="Signup" @click="testFunctionSignup">
-      @click="testFunctionSignup">
+    </div>
   </form>
 </template>
 
@@ -51,6 +50,7 @@ import { ref } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../clientsideConfig.js';
 
+const { signIn } = useAuth()
 const router = useRouter();
 const darkMode = ref(true);
 const isError = ref(false);
@@ -63,19 +63,29 @@ const handleLogin = async () => {
   const username = document.getElementById('username-input').value;
   const password = document.getElementById('password-input').value;
 
-  const requestBody = {
+  //const requestBody = {
+  const credentials = {
     username: username,
     password: password,
   }
 
   try {
-    let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`, requestBody);
+    /*let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`, requestBody);
 
+    const sessionToken = useCookie('token', {maxAge: 604800, sameSite: true});
+    sessionToken.value = res.data.token;
+    Axios.defaults.headers.common['Authorization'] = `${username}`;
+    const userToken = useCookie('user', {maxAge: 604800, sameSite: true});
+    userToken.value = username;
     // something to do with the res?
-    console.log(res.data)
+    console.log(sessionToken)
+    console.log(res.data.message)
 
     // sucessfully logged in
-    router.push('/')
+    router.push('/home')*/
+    let res = await signIn( credentials, { callbackUrl: '/home' })
+    console.log("res", res)
+
   } catch (err) {
     // handle the error 
     console.log(err.response.statusText)
@@ -162,22 +172,22 @@ export default {
   align-items: center;
   justify-content: center;
   width: 31.25rem;
-  height: 33rem;
+  min-height: 33rem;
+  height: fit-content;
   border-radius: 0.625rem;
   padding: 2.5rem 1.875rem;
   gap: 1.875rem;
 }
-
 .form-darkmode {
   border: 0.0625rem solid #000;
   background-color: #2c2c2c;
 }
-
 .form-lightmode {
   border: 0.0625rem solid #8e8e8e;
   background-color: #fff;
 }
 
+
 .title-field {
   display: flex;
   flex-direction: column;
@@ -192,7 +202,6 @@ export default {
   width: 3.125rem;
   height: 3.125rem;
 }
-
 .title-icon>img {
   width: 3.125rem;
   height: 3.125rem;
@@ -203,20 +212,14 @@ export default {
 
 .title {
   margin: 0;
-  letter-spacing: 5%;
+  letter-spacing: 0.05rem;
   white-space: nowrap;
   font: 400 1.875rem/1.875rem Overpass, sans-serif;
 }
+.title-darkmode { color: #ffffff; }
+.title-lightmode {  color: #000000; }
 
-.pre-darkmode,
-.title-darkmode {
-  color: #fff;
-}
 
-.pre-lightmode,
-.title-lightmode {
-  color: #000;
-}
 
 .login-field {
   display: flex;
@@ -227,6 +230,7 @@ export default {
   gap: 1.25rem;
 }
 
+
 .form-field {
   display: flex;
   flex-direction: column;
@@ -238,16 +242,6 @@ export default {
   gap: 0.625rem;
 }
 
-.form-field-error-msg {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  width: 25rem;
-  height: 3rem;
-  gap: 0.4rem;
-}
-
 label {
   display: flex;
   flex-direction: row;
@@ -265,43 +259,28 @@ label {
   width: 1.875rem;
   height: 1.875rem;
 }
-
 .icon>img {
   object-fit: contain;
   object-position: center;
   overflow: hidden;
 }
-
-.icon-darkmode>img {
-  filter: invert(100%);
-}
-
-.icon-lightmode>img {
-  filter: invert(0%);
-}
-
 #username-icon>img {
   width: auto;
   height: 0.9375rem;
 } 
-
 #password-icon>img {
   width: 0.9375rem;
   height: auto;
 }
+.icon-darkmode>img { filter: invert(100%); } 
+.icon-lightmode>img { filter: invert(0%); } 
 
 .label {
-  letter-spacing: 2%;
+  letter-spacing: 0.02rem;
   font: 400 0.9375rem/1.875rem Overpass, sans-serif;
 }
-
+.label-darkmode { color: #ffffff; } 
-.label-darkmode {
+.label-lightmode { color: #000000; }
-  color: #fff;
-}
-
-.label-lightmode {
-  color: #000;
-}
 
 .input-field {
   display: flex;
@@ -315,14 +294,8 @@ label {
   padding: 0.1875rem 0.625rem;
   box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
 } 
-
+.input-darkmode { background-color: #212121; } 
-.input-darkmode {
+.input-lightmode { background-color: #EBEBEB; }
-  background-color: #212121;
-}
-
-.input-lightmode {
-  background-color: #EBEBEB;
-}
 
 input[type=text] {
   width: 100%;
@@ -330,40 +303,63 @@ input[type=text] {
   background-color: #00000000;
   border: none;
   color: #8e8e8e;
-  letter-spacing: 5%;
+  letter-spacing: 0.01rem;
   white-space: nowrap;
   font: 100 0.75rem/1.25rem Overpass, sans-serif;
 }
 
-input[type=button] {
+#show-password-toggle {
   width: fit-content;
+  height: auto;
   align-self: flex-end;
+  padding: 0;
+  border-radius: 0;
   background-color: #00000000;
+  background: none;
   border: none;
-  letter-spacing: 5%;
+  letter-spacing: 0.01rem;
   white-space: nowrap;
   font: 300 0.75rem/1.25rem Overpass, sans-serif;
 }
 
-.button-darkmode {
+
-  color: #fff;
+
+.form-field-error-msg {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  width: 25rem;
+  height: 3rem;
+  gap: 0.4rem;
 }
 
-.button-lightmode {
+
-  color: #000;
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  height: fit-content;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 0.625rem 0.625rem 0;
+  gap: 2.5rem;
 }
 
-#login-button {
+
-  width: 13.75rem;
+input[type=button] {
-  height: 4.375rem;
+  width: 9.375rem;
+  height: 3.125rem;
   padding: 0.625rem;
   border-radius: 0.625rem;
   align-self: center;
   border: none;
-  color: #000;
   background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
-  letter-spacing: 2%;
+  letter-spacing: 0.02rem;
   white-space: nowrap;
-  font: 600 1.25rem/1.875rem Overpass, sans-serif;
+  font: 600 1.125rem/1.875rem Overpass, sans-serif;
 }
+.button-darkmode { color: #ffffff; } 
+.button-lightmode { color: #000000; }
 </style>

components/server/Accounting.vue

@@ -34,7 +34,7 @@
                         <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                             <td
                                 :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
-                                Customer offer</td>
+                                Client offer</td>
                             <td
                                 :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
                                 ...</td>
@@ -43,7 +43,7 @@
                         <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                             <td
                                 :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
-                                Customer order</td>
+                                Client order</td>
                             <td
                                 :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
                                 ...</td>

components/server/Asset.vue

@@ -1,5 +1,5 @@
 <template>
-    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="!addAssetBool" :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()"
@@ -7,7 +7,7 @@
         <div class="asset-data">
             <div class="client-location">
                 <div class="data-field" id="client">
-                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
                     <pre v-if="!editable"
                         :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.customer }}</pre>
                     <select v-if="editable" id="customersDropDownChosenCI" v-model="item.customer"
@@ -77,13 +77,13 @@
             </div>
         </div>
     </section>
-    <section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="addAssetBool" :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">
             <div class="client-location">
                 <div class="data-field" id="client">
-                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
                     <select id="customersDropDownChosenCI" v-model="newCustomer" @change="updateNewCustomerID()"
                         :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
                         <option v-for="cust in customers" :key="cust.primaryID">
@@ -153,10 +153,10 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
-const editable = computed(() => store.state.editable);
+const editable = computed(() => store.state.assetEditable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
-const deleteBool = computed(() => store.state.deleteBool);
+const deleteAssetBool = computed(() => store.state.deleteAsset);
-const addBool = computed(() => store.state.new);
+const addAssetBool = computed(() => store.state.newAsset);
 
 const darkMode = ref(true);
 const item = ref({});
@@ -176,7 +176,7 @@ const newState = ref('');
 
 // get config item from id
 const getItemById = async () => {
-    if (!addBool.value) {
+    if (!addAssetBool.value) {
         try {
             const response = await Axios.get(
                 `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
@@ -275,17 +275,17 @@ const getCustomers = async () => {
 }
 
 const confirmDeleteAsset = async () => {
-    if (deleteBool.value === true) {
+    if (deleteAssetBool.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('undoDelete');
+                store.commit('undoDeleteAsset');
                 store.commit('changeToAssetlist');
             } catch (err) {
                 console.log(err.response.statusText);
             }
         } else {
-            store.commit('undoDelete');
+            store.commit('undoDeleteAsset');
         }
     }
 }
@@ -330,13 +330,14 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     }, 1500);
 }
 
-watch(deleteBool, confirmDeleteAsset);
+watch(deleteAssetBool, confirmDeleteAsset);
 
 onMounted(() => {
     getItemById();
     getConfigItems();
     triggerBackendCallsWithDelay(getCustomers);
 });
+
 </script>
 
 <script>

components/server/AssetTable.vue

@@ -1,5 +1,5 @@
 <template>
-    <section v-if="searchable" :class="['asset-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="assetSearchable" :class="['asset-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Config item</div>
         <input v-model="assetSearchFilter" @change="searchConfigItem()"
             :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
@@ -11,7 +11,7 @@
                 <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
                     <th
                         :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                        Customer</th>
+                        Client</th>
                     <th
                         :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         Name</th>
@@ -31,6 +31,9 @@
                     </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)">
@@ -63,8 +66,8 @@ const goToChosenAsset = (id) => {
     store.commit('setChosenAsset', id);
     store.commit('changeToAsset');
 };
-const clientFilter = computed(() => store.state.filteredByClient);
+const clientFilter = computed(() => store.state.filteredAssetbyClient);
-const searchable = computed(() => store.state.searchable);
+const assetSearchable = computed(() => store.state.assetSearchable);
 
 const assetSearchFilter = ref('');
 const darkMode = ref(true)
@@ -115,7 +118,7 @@ const searchConfigItem = async () => {
 }
 
 watch(clientFilter, getConfigItems);
-watch(searchable, updateSearchTerm);
+watch(assetSearchable, updateSearchTerm);
 
 onMounted(async () => {
     await getConfigItems();
@@ -136,6 +139,7 @@ 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/Client.vue

@@ -1,6 +1,6 @@
 <template>
   <section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
-    <pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Customer name</pre>
+    <pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Client name</pre>
     <div class="data-field" id="client-id">
       <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
       <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>

components/server/ClientDepartment.vue

@@ -7,7 +7,7 @@
             <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
         </div>
         <div class="data-field" id="client-id">
-            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer ID:</pre>
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client ID:</pre>
             <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
         </div>
         <div class="data-field" id="head">

components/server/ClientEmployee.vue

@@ -33,7 +33,7 @@
     </div>
     <div class="data-group" id="employment-data">
       <div class="data-field" id="client-id">
-        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer ID:</pre>
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client ID:</pre>
         <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
       </div>
       <div class="data-field" id="department">

components/server/HardwareSpecifications.vue

@@ -1,5 +1,5 @@
 <template>
-    <section v-if="hardwareBoolean && !addBool"
+    <section v-if="hardwareBoolean && !addAssetBool"
         :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="addBool" :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="addAssetBool" :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.editable);
+const editable = computed(() => store.state.assetEditable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
-const addBool = computed(() => store.state.new);
+const addAssetBool = computed(() => store.state.newAsset);
 
 const newHardwareBool = ref(true);
 const newModel = ref('');

components/server/IssueSlip.vue

@@ -4,7 +4,7 @@
         <div class="issueSlip-data">
             <div class="client">
                 <div class="data-field" id="client">
-                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
                     <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
             </div>

components/server/IssueSlipTable.vue

@@ -6,7 +6,7 @@
                 <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
                     <th
                         :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                        Customer</th>
+                        Client</th>
                     <th
                         :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
                         ID

components/server/MaintenanceVisitsInstance.vue

@@ -9,7 +9,7 @@
                         <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                     </div>
                     <div class="templateId-client-type" id="client">
-                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
                         <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                     </div>
                     <div class="templateId-client-type" id="type">

components/server/MaintenanceVisitsTemplate.vue

@@ -1,67 +1,11 @@
 <template>
-    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 v-if="!editable" :class="['maintenance-visits-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
+        <h2 :class="['maintenance-visits-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Template name</h2>
-            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="client-ID-type-user">
                 <div class="data-field" id="client">
-                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
-                    <pre v-if="!editable"
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
-                        :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']">{{ mvt.checklistID }}</pre>
-                    </div>
-                    <div class="id-type-user" id="type">
-                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</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 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>
-        </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="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="client-ID-type-user">
-                <div class="data-field" id="client">
-                    <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">
@@ -70,13 +14,11 @@
                     </div>
                     <div class="id-type-user" id="type">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
-                        <input v-model="newType" @change="updateMaintenanceVisit()"
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
-                            :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()"
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                 </div>
             </div>
@@ -85,8 +27,7 @@
             <div class="additional">
                 <div class="notes">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
-                    <input v-model="newNotes" @change="updateMaintenanceVisit()"
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
                 </div>
             </div>
         </div>
@@ -95,182 +36,9 @@
     
     
 <script setup>
-import { ref, onMounted, watch } from 'vue';
+import { ref } 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>
@@ -293,17 +61,6 @@ 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;
 }
@@ -312,21 +69,7 @@ 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;
@@ -337,16 +80,6 @@ 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;
 }
@@ -361,23 +94,11 @@ export default {
     align-items: center;
     justify-content: flex-start;
     width: 95%;
-    padding: 0.8rem 1.875rem;
+    padding: 0 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;
@@ -402,6 +123,17 @@ 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;
@@ -412,16 +144,6 @@ 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,9 +1,4 @@
 <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">
@@ -11,7 +6,7 @@
                 <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
                     <th
                         :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                        Customer</th>
+                        Client</th>
                     <th
                         :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         Name</th>
@@ -31,11 +26,7 @@
                         {{ template.customer }}</td>
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        <nuxt-link to="/maintenanceVisits" id="nuxt-link" class="button"
+                        {{ template.name }}</td>
-                            :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>
@@ -51,31 +42,15 @@
   
   
 <script setup>
-import { ref, onMounted, watch } from 'vue';
+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 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;
@@ -83,43 +58,9 @@ const getMaintenanceVisitTemplates = async () => {
         console.log(err.response.statusText);
     }
 }
-}
 
-//get all maintenance visit templates based on the searched mvt name
+onMounted(() => {
-const searchMVT = async () => {
+    getMaintenanceVisitTemplates();
-    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/getSelectedMVTsByClient/${clientFilter.value}`);
-        maintenanceVisitTemplates.value = response.data;
-    } catch (err) {
-        console.log(err.response.statusText);
-    }
-}
-
-watch(searchable, updateSearchTerm);
-watch(clientFilter, getMaintenanceVisitTemplates);
-
-onMounted(async () => {
-    await getMaintenanceVisitTemplates();
 });
 </script>
 
@@ -138,30 +79,13 @@ 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;
 }
@@ -170,37 +94,6 @@ 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;
@@ -208,18 +101,6 @@ 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;
@@ -339,5 +220,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
+}</style>
-</style>

components/server/NetworkSpecifications.vue

@@ -1,5 +1,5 @@
 <template>
-    <section v-if="networkBoolean && !addBool"
+    <section v-if="networkBoolean && !addAssetBool"
         :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="addBool" :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="addAssetBool" :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="addBool" id="saveNewItem">
+    <section v-if="addAssetBool" 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.editable);
+const editable = computed(() => store.state.assetEditable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
-const addBool = computed(() => store.state.new);
+const addAssetBool = computed(() => store.state.newAsset);
 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 (!addBool.value) {
+    if (!addAssetBool.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('resetStore');
+        store.commit('resetAssetStore');
         store.commit('changeToAssetlist');
     } catch (err) {
         console.log(err.response.statusText);

components/server/ProductionOrdersInstance.vue

@@ -9,7 +9,7 @@
                         <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                     </div>
                     <div class="templateId-client" id="client">
-                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
                         <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                     </div>
                 </div>

components/server/ProductionOrdersTemplate.vue

@@ -1,70 +1,11 @@
 <template>
-    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 v-if="!editable" :class="['production-orders-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
+        <h2 :class="['production-orders-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Template name</h2>
-            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 :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Client:</pre>
-                    <pre v-if="!editable"
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
-                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ pot.customer }}</pre>
-                    <select v-if="editable" id="customersDropDownChosenCI" v-model="pot.customer"
-                        @change="updateCustomerID()" :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
-                        <option v-for="cust in customers" :key="cust.primaryID">
-                            {{ cust.customername }}
-                        </option>
-                    </select>
-                </div>
-                <div class="data-field" id="ID">
-                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">ID:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ pot.templateID }}</pre>
-                </div>
-            </div>
-            <div class="user">
-                <div class="data-field" id="empty">
-                    &nbsp;
-                </div>
-                <div class="data-field" id="user">
-                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">User:</pre>
-                    <pre v-if="!editable"
-                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ pot.user }}</pre>
-                    <input v-if="editable" v-model="pot.user" @change="updatePOT()"
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
-                </div>
-            </div>
-        </div>
-        <div class="production-orders-template-data">
-            <div class="additional">
-                <div class="description">
-                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
-                    <input v-model="pot.description" :readonly="!editable" @change="updatePOT()"
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
-                </div>
-            </div>
-            <div class="additional">
-                <div class="notes">
-                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
-                    <input v-model="pot.notes" :readonly="!editable" @change="updatePOT()"
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
-                </div>
-            </div>
-        </div>
-    </section>
-    <section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <input v-model="newName" @change="updateProductionOrder()"
-            :class="['data', 'production-orders-template-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
-        <div class="production-orders-template-data">
-            <div class="client-ID">
-                <div class="data-field" id="client">
-                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">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="ID">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">ID:</pre>
@@ -77,8 +18,7 @@
                 </div>
                 <div class="data-field" id="user">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">User:</pre>
-                    <input v-model="newUser" @change="updateProductionOrder()"
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
         </div>
@@ -86,196 +26,24 @@
             <div class="additional">
                 <div class="description">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
-                    <input v-model="newDescription" @change="updateProductionOrder()"
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
-                        :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="newNotes" @change="updateProductionOrder()"
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
                 </div>
             </div>
         </div>
     </section>
 </template>
     
+    
 <script setup>
-import { ref, onMounted, watch } from 'vue';
+import { ref } 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 darkMode = ref(true)
-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>
@@ -305,15 +73,7 @@ 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;
@@ -324,16 +84,6 @@ 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;
 }
@@ -348,7 +98,7 @@ export default {
     align-items: center;
     justify-content: flex-start;
     width: 95%;
-    padding: 0.8rem 1.875rem;
+    padding: 0 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;
 }
@@ -387,18 +137,6 @@ 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;
@@ -407,22 +145,6 @@ export default {
     align-self: stretch;
 }
 
-.select-darkmode {
-    border: none;
-    color: white;
-    background: #212121;
-    padding: 0.4rem;
-    border-radius: 0.3125rem;
-}
-
-.select-lightmode {
-    border: none;
-    color: black;
-    background: #EBEBEB;
-    padding: 0.4rem;
-    border-radius: 0.3125rem;
-}
-
 .client-ID,
 .user {
     display: flex;

components/server/ProductionOrdersTemplateTable.vue

@@ -1,9 +1,4 @@
 <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">
@@ -11,7 +6,7 @@
                 <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
                     <th
                         :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                        Customer</th>
+                        Client</th>
                     <th
                         :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         Name</th>
@@ -28,12 +23,7 @@
                         {{ template.customer }}</td>
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        <nuxt-link to="/productionOrders" id="nuxt-link" class="button"
+                        {{ template.name }}</td>
-                            :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>
@@ -46,31 +36,15 @@
   
   
 <script setup>
-import { ref, onMounted, watch } from 'vue';
+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 darkMode = ref(true)
-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;
@@ -78,43 +52,9 @@ const getProductionOrderTemplates = async () => {
         console.log(err.response.statusText);
     }
 }
-}
 
-//get all productionOrder templates based on the searched pot name
+onMounted(() => {
-const searchPOT = async () => {
+    getProductionOrderTemplates();
-    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/getSelectedPOTsByClient/${clientFilter.value}`);
-        productionOrderTemplates.value = response.data;
-    } catch (err) {
-        console.log(err.response.statusText);
-    }
-}
-
-watch(clientFilter, getProductionOrderTemplates);
-watch(searchable, updateSearchTerm);
-
-onMounted(async () => {
-    await getProductionOrderTemplates();
 });
 </script>
 
@@ -126,18 +66,6 @@ export default {
     
     
 <style scoped>
-.section-darkmode {
-    background-color: #2c2c2c;
-}
-
-.section-lightmode {
-    background-color: #fff;
-}
-
-.input {
-    border: none;
-}
-
 .data {
     display: flex;
     flex-direction: column;
@@ -151,17 +79,6 @@ 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;
 }
@@ -177,11 +94,6 @@ export default {
     border-collapse: collapse;
 }
 
-#nuxt-link {
-    text-decoration: none;
-    color: white;
-}
-
 .table-row {
     display: flex;
     flex-direction: row;
@@ -196,16 +108,6 @@ 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;
@@ -228,19 +130,6 @@ 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;
@@ -312,16 +201,4 @@ 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 && !addBool"
+    <section v-if="softwareBoolean && !addAssetBool"
         :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="addBool" :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="addAssetBool" :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications:
             <div class="asset-data">
                 <table class="data-table" id="asset-table-no-client">
@@ -89,9 +89,9 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
-const editable = computed(() => store.state.editable);
+const editable = computed(() => store.state.assetEditable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
-const addBool = computed(() => store.state.new);
+const addAssetBool = computed(() => store.state.newAsset);
 
 const newSoftwareBool = ref(true);
 const newSoftware = ref('');

components/server/Solution.vue

@@ -1,96 +1,15 @@
 <template>
-    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 v-if="!editable" :class="['solution-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ sol.solutionName
+        <h2 :class="['solution-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Solution name</h2>
-            }}</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 :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
-                    <pre v-if="!editable"
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
-                        :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"
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
-                        :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="client-asset">
-                <div class="data-field" id="client">
-                    <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="asset">
-                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</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">
@@ -98,14 +17,13 @@
                     <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
                     <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                 </div>
-                <div class="type-id">
+                <div class="type-state">
                     <div class="data-field" id="type">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
-                        <input v-model="newType" @change="updateSol()"
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
-                    <div class="data-field" id="id">
+                    <div class="data-field" id="state">
-                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
                         <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                     </div>
                 </div>
@@ -116,8 +34,7 @@
                 <div class="description">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description of the
                         problem/intended use:</h3>
-                    <input v-model="newDescription" @change="updateSol()"
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
                 </div>
             </div>
         </div>
@@ -125,8 +42,7 @@
             <div class="additional">
                 <div class="notes">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
-                    <input v-model="newNotes" @change="updateSol()"
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
                 </div>
             </div>
         </div>
@@ -135,216 +51,9 @@
     
     
 <script setup>
-import { ref, onMounted, watch } from 'vue';
+import { ref } 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 darkMode = ref(true)
-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>
@@ -374,15 +83,7 @@ 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;
@@ -401,41 +102,17 @@ 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.8rem 1.875rem;
+    padding: 0 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%;
 }
@@ -498,10 +175,6 @@ export default {
     border-radius: 0.3125rem;
 }
 
-.input {
-    border: none;
-}
-
 .additional {
     display: flex;
     flex-direction: column;
@@ -526,7 +199,7 @@ export default {
     color: #000;
 }
 
-.type-id {
+.type-state {
     display: flex;
     flex-direction: row;
     align-items: center;

components/server/SolutionChecklist.vue

@@ -1,6 +1,5 @@
 <template>
-    <section v-if="!addBool"
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
-        :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>
@@ -16,416 +15,28 @@
                         Task</th>
                     <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
                 </tr>
-                <tr v-for="todo in solTodos" :key="todo.primaryID"
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                    :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.step }}</td>
+                        ...</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"
+                        ...</td>
-                        :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"
+                        ...</td>
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-                </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']">
-                        <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 ? 'deleteSolTodos-darkmode' : 'deleteLastSolTodos-lightmode']"
-                            @click="deleteSolTodoFromNewTodos(index)">-</button>
-                    </td>
                 </tr>
             </tbody>
         </table>
-    </section>
+    </div>
-    <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, onMounted, watch } from 'vue';
+import { ref } 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 changedClientId = computed(() => store.state.changedClientId);
 
 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 getConfigItemsFromClient();
-    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 getConfigItemsFromClient();
-    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 getConfigItemsFromClient = async () => {
-    if (!addBool.value) {
-        try {
-            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromClient/${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/getCIFromClient/${changedClientId.value}`);
-            configItemList.value = response.data;
-        } catch (err) {
-            console.log(err.response.statusText);
-        }
-    }
-    if (clientChanged.value) {
-        store.commit('toggleClientChanged');
-    }
-}
-
-// 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 getConfigItemsFromClient();
-}
-
-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>
@@ -438,108 +49,17 @@ export default {
 <style scoped>
 .data {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     align-items: flex-start;
+    justify-content: center;
     align-self: stretch;
-    padding: 0 0.625rem;
+    width: 100%;
-    border-radius: 0.3125rem;
+    padding: 1.25rem 1.875rem;
-    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    gap: 1.25rem;
-    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;
 }
@@ -548,16 +68,6 @@ 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;
@@ -565,24 +75,6 @@ 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;
@@ -592,22 +84,6 @@ 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;
@@ -687,7 +163,6 @@ th {
 
 .Comments {
     width: 35%;
-    display: flex;
 }
 
 .label {
@@ -708,54 +183,4 @@ 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,9 +1,4 @@
 <template>
-    <section v-if="searchable" :class="['solution-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <div :class="['clientLabel', 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">
@@ -11,7 +6,7 @@
                 <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
                     <th
                         :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                        Customer</th>
+                        Client</th>
                     <th
                         :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         Name</th>
@@ -30,12 +25,7 @@
                         {{ sol.customer }}</td>
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        <nuxt-link to="/solutions" id="nuxt-link" class="button"
+                        {{ sol.solutionName }}</td>
-                            :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>
@@ -54,34 +44,12 @@
 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;
@@ -89,38 +57,9 @@ const getSolutions = async () => {
         console.log(err.response.statusText);
     }
 }
-}
 
-//get all solutions based on the searched client
+onMounted(() => {
-const getFilteredSolutionsByClient = async () => {
+    getSolutions();
-    try {
-        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);
-    }
-}
-
-//get all solutions based on the searched solution name
-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>
 
@@ -138,6 +77,7 @@ 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;
@@ -178,32 +118,6 @@ 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;
 }
@@ -212,17 +126,6 @@ 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;
@@ -232,14 +135,6 @@ 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;
@@ -254,22 +149,6 @@ th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-#nuxt-link {
-    text-decoration: none;
-    color: white;
-}
-
-.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;
-}
-
 .Client {
     width: 33.3%;
 }

components/server/TemplateChecklist.vue

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

@@ -1,750 +0,0 @@
-<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 changedClientId = computed(() => store.state.changedClientId);
-
-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 getConfigItemsFromClient();
-    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 getConfigItemsFromClient();
-    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 getConfigItemsFromClient = async () => {
-    if (!addBool.value) {
-        try {
-            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromClient/${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/getCIFromClient/${changedClientId.value}`);
-            configItemList.value = response.data;
-        } catch (err) {
-            console.log(err.response.statusText);
-        }
-    }
-    if (clientChanged.value) {
-        store.commit('toggleClientChanged');
-    }
-}
-
-// 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 getConfigItemsFromClient();
-}
-
-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>

composables/UserObject.ts

@@ -0,0 +1,39 @@
+export var UserObjectDefinition: {
+    id: string;
+    username: string;
+    password: string;
+    registered: string;
+    lastLogin: string;
+    fullName: string;
+    email: string;
+    phonenumber: string;
+    address: string;
+    city: string;
+    postcode: string;
+    adminBool: boolean;
+    technician1Bool: boolean;
+    technician2Bool: boolean;
+    technicianMonitoringBool: boolean;
+    merchantBool: boolean;
+    internBool: boolean;
+}
+
+export interface UserObject {
+    id: string;
+    username: string;
+    password: string;
+    registered: string;
+    lastLogin: string;
+    fullName: string;
+    email: string;
+    phonenumber: string;
+    address: string;
+    city: string;
+    postcode: string;
+    adminBool: boolean;
+    technician1Bool: boolean;
+    technician2Bool: boolean;
+    technicianMonitoringBool: boolean;
+    merchantBool: boolean;
+    internBool: boolean;
+}

documentation/.$Datenbankmodell.drawio.bkp

@@ -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-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">
   <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="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">
       <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="870" as="geometry" />
+          <mxGeometry x="75" y="-560" width="140" height="840" 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,23 +130,20 @@
         <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="-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">
+        <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="690" 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="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="720" 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="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="750" 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-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="780" 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">
-          <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" />
+          <mxGeometry y="810" 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" />

documentation/Datenbankmodell.drawio

@@ -1,6 +1,6 @@
-<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">
+<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="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">
+    <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" />
@@ -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="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">
+        <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">
           <mxGeometry y="180" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-128" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="WukdXvazNq34soQIU5Al-126" target="DauqCNUrC7Z9yIe88X-r-22" edge="1">

layouts/Actionbar.vue

@@ -1,16 +1,12 @@
 <template>
-  <aside
+  <aside :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
-    :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
+    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="toggleActionbar">
-    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
+      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Indicator-Icon-Opened.svg" />
-      @click="toggleActionbar">
-      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-        src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
     </div>
     <nav class="actions">
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search" @click="toggleSearched">
         <div class="icon" id="search-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Search-Icon.svg" />
-            src="../icons/actionbar-icons/Search-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
@@ -18,8 +14,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter" @click="toggleFiltered">
         <div class="icon" id="filter-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Filter-Icon.svg" />
-            src="../icons/actionbar-icons/Filter-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
@@ -27,8 +22,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
         <div class="icon" id="instances-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Instances-Icon.svg" />
-            src="../icons/actionbar-icons/Instances-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
@@ -36,8 +30,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
         <div class="icon" id="attachments-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Attachments-Icon.svg" />
-            src="../icons/actionbar-icons/Attachments-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
@@ -45,8 +38,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
         <div class="icon" id="sell-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Sell-Icon.svg" />
-            src="../icons/actionbar-icons/Sell-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
@@ -54,17 +46,15 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
         <div class="icon" id="archive-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Archive-Icon.svg" />
-            src="../icons/actionbar-icons/Archive-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="addAsset">
         <div class="icon" id="new-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Add-New-Icon.svg" />
-            src="../icons/actionbar-icons/Add-New-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
@@ -72,17 +62,15 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
         <div class="icon" id="edit-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Edit-Icon.svg" />
-            src="../icons/actionbar-icons/Edit-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteFunc">
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteAsset">
         <div class="icon" id="delete-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Delete-Icon.svg" />
-            src="../icons/actionbar-icons/Delete-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
@@ -102,23 +90,23 @@ const isExpanded = ref(true)
 // get accesss to the store
 const store = useStore()
 const toggleEditable = () => {
-  store.commit('toggleEditable');
+  store.commit('toggleEditableAsset');
 };
-const deleteFunc = () => {
+const deleteAsset = () => {
-  store.commit('doDelete');
+  store.commit('doDeleteAsset');
 };
 
 const toggleActionbar = () => {
   isExpanded.value = !isExpanded.value;
 };
 const toggleFiltered = () => {
-  store.commit('toggleFiltered');
+  store.commit('toggleFilteredAsset');
 };
 const toggleSearched = () => {
-  store.commit('toggleSearchable');
+  store.commit('toggleAssetSearchable');
 };
-const add = () => {
+const addAsset = () => {
-  store.commit('add');
+  store.commit('addNewAsset');
 };
 </script>
 
@@ -141,7 +129,7 @@ aside.actionbar {
   display: flex;
   flex-direction: column;
   position: sticky;
-  top: 5rem;
+  top: 3.75rem;
   height: fit-content;
   width: fit-content;
   inline-size: fit-content;
@@ -153,21 +141,17 @@ 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;
 }
@@ -197,30 +181,16 @@ button {
   transition: 0.2s ease-in-out;
   overflow: clip;
 }
-
+.button-darkmode { background-color: #2C2C2C; } 
-.button-darkmode {
+.button-lightmode { background-color: #FFFFFF; } 
-  background-color: #2C2C2C;
-}
-
-.button-lightmode {
-  background-color: #FFFFFF;
-}
 
 .button-darkmode:hover, 
-.indicator-darkmode:hover {
+.indicator-darkmode:hover { background-color: #444444; } 
-  background-color: #444444;
-  cursor: pointer;
-}
 
 .button-lightmode:hover, 
-.indicator-lightmode:hover {
+.indicator-lightmode:hover {  background-color: #ACACAC; } 
-  background-color: #ACACAC;
-  cursor: pointer;
-}
 
-.is-not-expanded>button {
+.is-not-expanded>button { align-self: center; }
-  align-self: center;
-}
 
 
 .icon {
@@ -232,7 +202,6 @@ button {
   justify-content: center;
   padding: 0 0.5rem;
 }
-
 .is-not-expanded .icon {
   align-self: center;
 }
@@ -243,10 +212,7 @@ button {
   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 {
@@ -256,14 +222,8 @@ img {
   object-position: center;
   overflow: hidden;
 }
-
+.img-darkmode { filter: invert(100%); } 
-.img-darkmode {
+#indicator-icon>img { height: 1.25rem; }
-  filter: invert(100%);
-}
-
-#indicator-icon>img {
-  height: 1.25rem;
-}
 
 
 .label {
@@ -275,19 +235,12 @@ img {
   white-space: nowrap;
   font: 400 0.875rem/1.25rem Overpass, sans-serif;
 } 
-
+.label-darkmode { color: #FFFFFF; } 
-.label-darkmode {
+.label-lightmode { color: #000000; }
-  color: #FFFFFF;
-}
-
-.label-lightmode {
-  color: #000000;
-}
 
 
 
-.fade-enter-from,
+.fade-enter-from, .fade-leave-to {
-.fade-leave-to {
   opacity: 0;
 }
 
@@ -357,4 +310,5 @@ img {
     max-width: 0;
     max-inline-size: 0;
   }
-}</style>
+}
+</style>

layouts/Navigationbar.vue

@@ -2,17 +2,17 @@
   <aside :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
     <div class="toggleNavbar">
       <div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
-        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
+        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/Back-Icon.svg" />
       </div>
       <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="ToggleSidebar">
-        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
+        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
       </div>
     </div>
     <div class="menus">
       <nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
         <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
           <div class="icon" id="home-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Home-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Home-Icon.svg" />
           </div>
           <Transition name="fade">
             <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</pre>
@@ -20,9 +20,9 @@
         </router-link>
       </nav>
       <nav id="site-menu">
-        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultMasterChecklistPage()" id="checklists-button">
+        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" 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" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Checklists-Icon.svg" />
           </div>
           <Transition name="fade">
             <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</pre>
@@ -30,15 +30,15 @@
         </router-link>
         <nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"  @click="defaultAssetPage()" id="assets-button">
           <div class="icon" id="assets-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Assets-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Assets-Icon.svg" />
           </div>
           <Transition name="fade">
             <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets</pre>
           </Transition>
         </nuxt-link>
-        <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultSolutionPage()" id="solutions-button">
+        <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" 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" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Solutions-Icon.svg" />
           </div>
           <Transition name="fade">
             <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
@@ -46,7 +46,7 @@
         </router-link>
         <router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
           <div class="icon" id="accounting-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Accounting-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Accounting-Icon.svg" />
           </div>
           <Transition name="fade">
             <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</pre>
@@ -54,10 +54,10 @@
         </router-link>
         <router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="clients-button">
           <div class="icon" id="clients-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Clients-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Clients-Icon.svg" />
           </div>
           <Transition name="fade">
-            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Customers</pre>
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</pre>
           </Transition>
         </router-link>
       </nav>
@@ -77,20 +77,10 @@ const isExpanded = ref(true)
 // get accesss to the store
 const store = useStore()
 const defaultAssetPage = () => {
-  store.commit('resetStore');
+  store.commit('resetAssetStore');
   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;
 };
@@ -113,7 +103,7 @@ aside.navbar {
   display: flex;
   flex-direction: column;
   position: sticky;
-  top: 5rem;
+  top: 3.75rem;
   height: fit-content;
   width: fit-content;
   inline-size: fit-content;

layouts/PageHeader.vue

@@ -1,8 +1,8 @@
 <template>
     <header :class="[darkMode ? 'header-darkmode' : 'header-lightmode']">
-        <img id="header-logo" loading="lazy" src="../tüit-logo.svg.png" />
+        <img id="header-logo" loading="lazy" src="/tüit-logo.svg.png" />
         <div class="profile">
-            <div :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']">username</div>
+            <pre :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']" id='uname'></pre>
             <div :class="['picture', darkMode ? 'picture-darkmode' : 'picture-lightmode']">
                 <img id="picture" loading="lazy" src="" />
             </div>
@@ -12,19 +12,59 @@
 
 
 <script setup>
+import { useAuthStore } from '~/store/auth';
 import { ref } from 'vue';
 
 const darkMode = ref(true)
 
+//const auth = ref();
+const username = ref('username');
+
+onMounted(() => {
+    //auth.value = useAuthStore();
+    //username.value = auth.value.username;
+    try {
+        username.value = useAuthStore().username;
+    } finally {
+        document.getElementById('uname').innerHTML = username;
+    }
+});
+
+onUpdated(() => {
+    try {
+        username.value = useAuthStore().username;
+    } finally {
+        document.getElementById('uname').innerHTML = username;
+    }
+})
+
 </script>
 
+
 <script>
+import { useAuthStore } from '~/store/auth';
+
 export default {
   name: "PageHeader",
+  /*mounted() {
+    try {
+        const auth = useAuthStore();
+        const username = auth.username;
+        document.getElementById('uname').innerHTML = username;
+    } catch {
+        document.getElementById('uname').innerHTML = 'username'
+    }
+  },
+  updated() {
+    const auth = useAuthStore();
+    const username = auth.username;
+    document.getElementById('uname').innerHTML = username;
+  },*/
 }
 </script>
 
 
+
 <style scoped>
 * {
     box-sizing: border-box;
@@ -36,28 +76,28 @@ header {
     position: sticky;
     top: 0;
     width: 100%;
-    height: 4.375rem;
+    height: 3.125rem;
     align-self: stretch;
     justify-content: space-between;
     align-items: center;
-    padding: 0.625rem 1.25rem;
+    padding: 0.375rem 1.875rem;
 }
 
 .header-darkmode {
     background-color: #212121;
-    border-bottom: 0.125em solid #000;
+    border-bottom: 0.125em solid #000000;
 }
 
 .header-lightmode {
-    background-color: #EBEBEB;
+    background-color: #ebebeb;
-    border-bottom: 0.125em solid #8e8e8e61;
+    border-bottom: 0.125em solid #8e8e8e;
 }
 
 #header-logo {
     object-fit: contain;
     object-position: center;
-    width: 5rem;
+    width: 4rem;
-    height: 2.5rem;
+    height: 2rem;
     justify-content: center;
     align-items: center;
     overflow: hidden;
@@ -68,37 +108,36 @@ header {
     flex-direction: row;
     align-items: flex-end;
     gap: 0.625rem;
-    padding: 0 0.625rem;
+    padding: 0 0.375rem;
 }
 
 .username {
     align-self: center;
-    margin: auto 0;
     text-align: right;
-    font: 200 0.875rem Overpass, sans-serif;
+    font: 200 0.75rem/1.25rem Overpass, sans-serif;
-    letter-spacing: 5%;
+    letter-spacing: 0.01rem;
 }
 
 .username-darkmode {
-    color: #fff;
+    color: #ffffff;
 }
 
 .username-lightmode {
-    color: #000;
+    color: #000000;
 }
 
 .picture {
     display: flex;
-    width: 2.5rem;
+    width: 1.875rem;
-    height: 2.5rem;
+    height: 1.875rem;
     border-radius: 50%;
 }
 
 .picture-darkmode {
-    background-color: #fff;
+    background-color: #ffffff;
 }
 
 .picture-lightmode {
-    background-color: #000;
+    background-color: #000000;
 }
 </style>

nuxt-app/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

nuxt-app/README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

nuxt-app/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtWelcome />
+  </div>
+</template>

nuxt-app/nuxt.config.ts

@@ -0,0 +1,4 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true }
+})

nuxt-app/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "nuxt": "^3.10.3",
+    "vue": "^3.4.19",
+    "vue-router": "^4.3.0"
+  }
+}

nuxt-app/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

nuxt-app/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

nuxt.config.ts

@@ -1,10 +1,54 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
-import type {
+import type { NuxtPage } from 'nuxt/schema'
-  NuxtPage
+import clientsideConfig from './clientsideConfig'
-} from 'nuxt/schema'
+import { UserObjectDefinition } from './composables/UserObject'
 
 export default defineNuxtConfig({
   devtools: { enabled: true },
+  modules: [
+    '@pinia/nuxt',
+    '@sidebase/nuxt-auth',
+  ],
+  auth: {
+    //baseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/.output/server/chunks/routes/api/auth`,
+    computed: {
+      origin: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
+      //pathname: '/server/chunks/routes/api/auth/',
+      //fullBaseUrl: `https://${clientsideConfig.url}:${clientsideConfig.port}/server/chunks/routes/api/auth/`,
+    },
+    //baseUrl: `https://${clientsideConfig.url}:${clientsideConfig.port}/server/chunks/routes/api/auth/`,
+    provider: {
+      type: 'refresh',
+      endpoints: { 
+        signIn: { path: '/login', method: 'post' },
+        signout: false,
+        signUp: { path: '/signup', method: 'post' },
+        getSession: { path: '/session', method: 'get' },
+        refresh: { path: '/refresh', method: 'post' } 
+      },
+      token: { 
+        signInResponseTokenPointer: '/token/authToken', 
+        maxAgeInSeconds: 300, // 5 min
+        sameSiteAttribute: 'lax'
+      },
+      refreshToken: { 
+        signInResponseRefreshTokenPointer: '/token/refreshToken',
+        maxAgeInSeconds: 604800, // 7 days
+        sameSiteAttribute: 'lax' 
+      },
+      // TODO: define UserObject
+      //sessionDataType:  UserObjectDefinition,
+    },
+    session: {
+      enableRefreshPeriodically: false,
+      enableRefreshOnWindowFocus: true,
+    },
+    globalAppMiddleware: true,
+  },
+  /*buildModules: [
+    //'@nuxtjs/composition-api/module',
+    ['@pinia/nuxt', { disableVuex: false }],
+  ],*/
   devServer: {
     https: {
       key: './certs/privkey.pem',
@@ -19,6 +63,19 @@ export default defineNuxtConfig({
       },
     }
   },
+  runtimeConfig: {
+    public: {
+      apiBase: `https://${clientsideConfig.url}:${clientsideConfig.port}/server/chunks/routes/api`,
+      axios: {
+        browserBaseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
+      },
+    },
+    private: {
+      axios: {
+        baseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
+      }
+    }
+  },
   // hooks: {
   //   'pages:extend'(pages) {
   //     function setMiddleware(pages: NuxtPage[]) {

package.json

@@ -7,25 +7,37 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "prepare": "nuxt prepare",
+    "cleanup": "nuxt cleanup"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
-    "nuxt": "^3.8.0",
+    "@pinia/nuxt": "^0.5.1",
+    "@sidebase/nuxt-auth": "^0.6.7",
+    "nuxt": "^3.10.3",
+    "pinia": "^2.1.7",
     "vue": "^3.3.7",
     "vue-router": "^4.2.5"
   },
   "dependencies": {
+    "@nuxt/module-builder": "^0.5.5",
+    "@types/jsonwebtoken": "^9.0.6",
+    "@types/node": "^20.11.24",
     "@vueform/toggle": "^2.1.4",
     "axios": "^1.6.7",
     "bcryptjs": "^2.4.3",
     "cors": "^2.8.5",
     "express": "^4.18.2",
+    "h3": "^1.11.1",
     "jsonwebtoken": "^9.0.2",
     "leading-trim": "^1.0.2",
     "mariadb": "^3.2.3",
+    "nuxi": "^3.10.1",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "typescript": "^5.3.3",
     "uuid": "^9.0.1",
     "vite": "^5.1.0",
+    "vue-tsc": "^2.0.5",
     "vuex": "^4.1.0"
   }
 }

pages/assets.vue

@@ -1,9 +1,7 @@
 <template>
   <section id="content">
     <div id="content-header">
-      <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">
       <ClientSearch v-if="onAssetlist || onCustomerAssetlist" />
@@ -42,14 +40,10 @@ const onAsset = computed(() => store.state.onAsset);
 const onSolutionlistAsset = computed(() => store.state.onSolutionlistAsset);
 
 definePageMeta({
-  layout: 'default'
+  layout: 'default',
+  title: 'Assets'
 })
 
-const defaultAssetPage = () => {
-  store.commit('resetStore');
-  store.commit('changeToAssetlist')
-}
-
 const darkMode = ref(true)
 </script>
 
@@ -109,8 +103,4 @@ export default {
   margin-bottom: 0.625rem;
   border-radius: 0.625rem;
 }
-
-.button {
-  text-decoration: none;
-}
 </style>

pages/clients.vue

@@ -16,6 +16,7 @@
   </section>
 </template>
   
+  
 <script setup>
 import { ref } from 'vue';
 
@@ -29,18 +30,19 @@ import ClientDepartment from '~/components/server/ClientDepartment.vue';
 import ClientDepartmentEmployeeList from '~/components/server/ClientDepartmentEmployeeList.vue';
 
 definePageMeta({
-  layout: 'default'
+  layout: 'default',
+  title: 'Clients'
 })
 
 const darkMode = ref(true)
 
 // to render the right components
 const onCustomerlist = ref(true)
-const onCustomer = ref(true)
+const onCustomer = ref(false)
-const onEmployeelist = ref(true)
+const onEmployeelist = ref(false)
-const onEmployee = ref(true)
+const onEmployee = ref(false)
-const onDepartmentlist = ref(true)
+const onDepartmentlist = ref(false)
-const onDepartment = ref(true)
+const onDepartment = ref(false)
 </script>
 
 <script>

pages/home.vue

@@ -20,7 +20,8 @@ import Dashboard from "../components/Dashboard.vue";
 import QuickAccess from "../components/QuickAccess.vue";
 
 definePageMeta({
-  layout: 'empty'
+  layout: 'empty',
+  title: 'Home'
 })
 
 const darkMode = ref(true)

pages/index.vue

@@ -14,7 +14,8 @@
 import { ref } from 'vue';
 
 definePageMeta({
-  layout: 'default'
+  layout: 'default',
+  title: 'Test'
 })
 
 const darkMode = ref(true)

pages/issueItems.vue

@@ -20,8 +20,8 @@
              
              
              
-            <router-link to="/issues" class="button" id="issues-button">
+            <router-link to="/issueItems" class="button" id="issues-button">
-                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issues</h1>
+                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issue Items</h1>
             </router-link>
         </div>
         <div id="content-body">
@@ -43,7 +43,8 @@ import IssueVariants from "../components/server/IssueVariants.vue";
 import IssueVariant from "../components/server/IssueVariant.vue";
 
 definePageMeta({
-    layout: 'default'
+    layout: 'default',
+    title: 'Issue Items'
 })
 
 const darkMode = ref(true)
@@ -56,7 +57,7 @@ const onIssueItemVariant = ref(false)
   
 <script>
 export default {
-    name: "IssuePage",
+    name: "IssueItemsPage",
 }
 </script>
       

pages/issueSlips.vue

@@ -20,8 +20,8 @@
        
        
        
-      <router-link to="/issues" class="button" id="issues-button">
+      <router-link to="/issueItems" class="button" id="issues-button">
-        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issues</h1>
+        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issue Items</h1>
       </router-link>
     </div>
     <div id="content-body">
@@ -47,7 +47,8 @@ import OrderingInformation from "../components/server/OrderingInformation.vue";
 import Accounting from "../components/server/Accounting.vue";
 
 definePageMeta({
-  layout: 'default'
+  layout: 'default',
+  title: 'Issue Slips'
 })
 
 const darkMode = ref(true)

pages/login.vue

@@ -16,7 +16,9 @@ import { ref } from 'vue';
 import LoginForm from "../components/LoginForm.vue";
 
 definePageMeta({
-  layout: 'empty'
+  layout: 'empty',
+  title: 'Login',
+  auth: false,
 })
 
 const darkMode = ref(true)

pages/maintenanceVisits.vue

@@ -1,8 +1,7 @@
 <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;
@@ -21,8 +20,7 @@
       &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>
@@ -31,7 +29,7 @@
       <MaintenanceVisitsTemplateTable v-if="onTemplatelist"/>
       <MaintenanceVisitsTemplateTableNoClient v-if="onCustomerTemplatelist"/>
       <MaintenanceVisitsTemplate v-if="onTemplate"/>
-      <TemplateChecklistMVT v-if="onTemplate" />
+      <TemplateChecklist v-if="onTemplate"/>
       <TemplateSearch v-if="onInstancelist"/>
       <MaintenanceVisitsInstanceTable v-if="onInstancelist"/>
       <MaintenanceVisitsInstance v-if="onInstance"/>
@@ -48,31 +46,25 @@ import ClientSearch from "../components/ClientSearch.vue";
 import MaintenanceVisitsTemplateTable from "../components/server/MaintenanceVisitsTemplateTable.vue";
 import MaintenanceVisitsTemplateTableNoClient from "../components/server/MaintenanceVisitsTemplateTableNoClient.vue";
 import MaintenanceVisitsTemplate from "../components/server/MaintenanceVisitsTemplate.vue";
-import TemplateChecklistMVT from "../components/server/TemplateChecklistMVT.vue";
+import TemplateChecklist from "../components/server/TemplateChecklist.vue";
 import TemplateSearch from "../components/TemplateSearch.vue";
 import MaintenanceVisitsInstanceTable from "../components/server/MaintenanceVisitsInstanceTable.vue";
 import MaintenanceVisitsInstance from "../components/server/MaintenanceVisitsInstance.vue";
 import InstanceChecklist from "../components/server/InstanceChecklist.vue";
-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'
+  layout: 'default',
+  title: 'Maintenance Visits'
 })
 
 const darkMode = ref(true)
 
-const defaultMasterChecklistPage = () => {
+// to render the right components
-  store.commit('resetStore');
+const onTemplatelist = ref(true)
-  store.commit('changeToTemplatelist')
+const onCustomerTemplatelist = ref(false)
-}
+const onTemplate = ref(false)
+const onInstancelist = ref(false)
+const onInstance = ref(false)
 </script>
     
 <script>

pages/productionOrders.vue

@@ -1,8 +1,7 @@
 <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;
@@ -22,8 +21,7 @@
             &nbsp;
             &nbsp;
             <router-link to="/productionOrders" class="button" id="productionOrders-button">
-                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name"
+                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Production orders</h1>
-                    @click="defaultMasterChecklistPage()">Production orders</h1>
             </router-link>
         </div>
         <div id="content-body">
@@ -53,26 +51,20 @@ 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'
+    layout: 'default',
+    title: 'Production Orders'
 })
 
 const darkMode = ref(true)
 
-const defaultMasterChecklistPage = () => {
+// to render the right components
-    store.commit('resetStore');
+const onTemplatelist = ref(true)
-    store.commit('changeToTemplatelist')
+const onCustomerTemplatelist = ref(false)
-}
+const onTemplate = ref(false)
+const onInstancelist = ref(false)
+const onInstance = ref(false)
 </script>
   
 <script>

pages/settings.vue

@@ -39,7 +39,8 @@ import UserAppearance from "../components/server/UserAppearance.vue";
 import UserRightsList from "../components/server/UserRightsList.vue";
 
 definePageMeta({
-    layout: 'default'
+    layout: 'default',
+    title: 'Settings'
 })
 
 const darkMode = ref(true)

pages/solutions.vue

@@ -1,9 +1,7 @@
 <template>
   <section id="content">
     <div id="content-header">
-      <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">
       <ClientSearch v-if="onSolutionlist || onCustomerSolutionlist"/>
@@ -15,6 +13,7 @@
   </section>
 </template>
   
+  
 <script setup>
 import { ref } from 'vue';
 
@@ -23,24 +22,18 @@ import SolutionTable from "../components/server/SolutionTable.vue";
 import SolutionTableNoClient from "../components/server/SolutionTableNoClient.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'
+  layout: 'default',
+  title: 'Solutions'
 })
 
-const defaultSolutionPage = () => {
-  store.commit('resetStore');
-  store.commit('changeToSolutionlist')
-}
-
 const darkMode = ref(true)
+
+// to render the right components
+const onSolutionlist = ref(true)
+const onCustomerSolutionlist = ref(false)
+const onSolution = ref(false)
 </script>
 
 <script>
@@ -101,8 +94,4 @@ export default {
   margin-bottom: 0.625rem;
   border-radius: 0.625rem;
 }
-
-.button {
-  text-decoration: none;
-}
 </style>

plugins/vuex.js

@@ -3,20 +3,17 @@ import { createStore } from "vuex";
 const store = createStore({
     state() {
         return {
-            editable: false,
+            assetEditable: false,
-            filtered: false,
+            assetFiltered: false,
-            searchable: false,
+            assetSearchable: false,
-            deleteBool: false,
+            deleteAsset: false,
-            new: false,
-            clientChanged: false,
-            changedClientId: -1,
-            filteredByClient: '',
-
             onAssetlist: true,
             onCustomerAssetlist: false,
             onAsset: false,
             onSolutionlistAsset: false,
             chosenAssetId: -1,
+            filteredAssetbyClient: '',
+            newAsset: false,
             newAssetName: '',
             newCustomerID: '',
             newCustomer: '',
@@ -39,77 +36,20 @@ 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: {
-        // functions to toggle with the actionbar
+        toggleEditableAsset(state) {
-        toggleEditable(state) {
+            state.assetEditable = !state.assetEditable
-            state.editable = !state.editable
         },
-        toggleFiltered(state) {
+        toggleFilteredAsset(state) {
-            if (state.filtered == false) {
+            if (state.assetFiltered == false) {
-                state.filtered = true
+                state.assetFiltered = true
-                state.searchable = false
+                state.assetSearchable = false
             } else {
-                state.filtered = false
+                state.assetFiltered = false
             }
         },
-        toggleSearchable(state) {
-            if (state.searchable == false) {
-                state.searchable = true
-                state.filtered = false
-            } else {
-                state.searchable = false
-            }
-            state.filteredByClient = ''
-        },
-        toggleClientChanged(state) {
-            state.clientChanged = !state.clientChanged
-        },
-        toggleClientId(state, id) {
-            state.changedClientId = id
-        },
-
-
-        // functions to change the asset pages
         changeToAssetlist(state) {
             state.onAssetlist = true
             state.onCustomerAssetlist = false
@@ -134,6 +74,40 @@ const store = createStore({
             state.onAsset = false
             state.onSolutionlistAsset = true
         },
+        setChosenAsset(state, id) {
+            state.chosenAssetId = id
+        },
+        resetAssetStore(state) {
+            state.assetEditable = false
+            state.assetFiltered = false
+            state.assetSearchable = false
+            state.deleteAsset = false
+            state.chosenAssetId = -1
+            state.filteredAssetbyClient = ''
+            state.newAsset = false
+            state.newAssetName = ''
+            state.newCustomerID = ''
+            state.newCustomer = ''
+            state.newLocation = ''
+            state.newRemoteLocation = ''
+            state.newType = ''
+            state.newDescription = ''
+            state.newNotes = ''
+            state.newState = ''
+            state.newLastView = ''
+            state.newUser = ''
+            state.hardwareBool = false
+            state.newModel = ''
+            state.newSerialnumber = ''
+            state.newCPU = ''
+            state.newRAM = ''
+            state.newStorageConfiguration = ''
+            state.newMiscellaneous = ''
+            state.softwareBool = false
+            state.newSoftware = ''
+            state.newVersion = ''
+            state.newLicense = ''
+        },
 
         // functions to change the production order and maintenance visit pages
         changeToTemplatelist(state) {
@@ -164,32 +138,34 @@ const store = createStore({
             state.onInstancelist = true
             state.onInstance = false
         },
-        changeToInstance(state) {
+        doDeleteAsset(state) {
-            state.onTemplatelist = false
+            state.deleteAsset = true
-            state.onCustomerTemplatelist = false
-            state.onTemplate = false
-            state.onInstancelist = false
-            state.onInstance = true
         },
-
+        undoDeleteAsset(state) {
-        // functions to change the solution pages
+            state.deleteAsset = false
-        changeToSolutionlist(state) {
-            state.onSolutionlist = true
-            state.onCustomerSolutionlist = false
-            state.onSolution = false
         },
-        changeToCustomerSolutionlist(state) {
+        updateAssetFilterbyClient(state, client) {
-            state.onSolutionlist = false
+            state.filteredAssetbyClient = client
-            state.onCustomerSolutionlist = true
-            state.onSolution = false
         },
-        changeToSolution(state) {
+        toggleAssetSearchable(state) {
-            state.onSolutionlist = false
+            if (state.assetSearchable == false) {
-            state.onCustomerSolutionlist = false
+                state.assetSearchable = true
-            state.onSolution = true
+                state.assetFiltered = false
+            } else {
+                state.assetSearchable = false
+            }
+            state.filteredAssetbyClient = ''
+        },
+        addNewAsset(state) {
+            state.newAsset = true
+            state.assetEditable = false
+            state.assetFiltered = false
+            state.assetSearchable = false
+            state.onAssetlist = false
+            state.onCustomerAssetlist = false
+            state.onAsset = true
+            state.onSolutionlistAsset = false
         },
-
-        // functions to update the asset
         updateAssetComponent(state, asset) {
             state.newAssetName = asset.assetName
             state.newCustomerID = asset.customerId
@@ -215,168 +191,7 @@ 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.filteredByClient = ''
-            state.new = false
-            state.clientChanged = false
-            state.changedClientId = -1
-
-            // reset the asset page variables
-            state.newAssetName = ''
-            state.newCustomerID = ''
-            state.newCustomer = ''
-            state.newLocation = ''
-            state.newRemoteLocation = ''
-            state.newType = ''
-            state.newDescription = ''
-            state.newNotes = ''
-            state.newState = ''
-            state.newLastView = ''
-            state.newUser = ''
-            state.hardwareBool = false
-            state.newModel = ''
-            state.newSerialnumber = ''
-            state.newCPU = ''
-            state.newRAM = ''
-            state.newStorageConfiguration = ''
-            state.newMiscellaneous = ''
-            state.softwareBool = false
-            state.newSoftware = ''
-            state.newVersion = ''
-            state.newLicense = ''
-
-            // reset the production order template page variables
-            state.newNamePOT = ''
-            state.newCustomerIDPOT = ''
-            state.newCustomerPOT = ''
-            state.newUserPOT = ''
-            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
-        updateFilterbyClient(state, client) {
-            state.filteredByClient = client
-        },
-
-        // function to get to the add page
-        add(state) {
-            state.new = true
-            state.editable = false
-            state.filtered = false
-            state.searchable = false
-
-            // set the asset variables
-            state.onAssetlist = false
-            state.onCustomerAssetlist = false
-            state.onAsset = true
-            state.onSolutionlistAsset = false
-
-            // set the production order 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
-        },
     },
 });
 

public/icons/actionbar-icons/Attachment-Icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m11 5.5-4.8 4.6a4 4 0 0 1-1.9.9c-.9 0-1.6-.1-2.3-.6C1.4 9.8 1 9 1 8c.1-.7.6-1.5 1.2-2l4.7-4.5c.4-.4 1-.6 1.5-.6.6 0 1.2.2 1.6.6.4.3.6.8.6 1.4 0 .5-.2 1.2-.6 1.5L5.2 9.1c-.2.1-.7.5-1 .5-.4 0-1 0-1.3-.3-.4-.4-.5-.7-.4-1.2 0-.5.4-.9.6-1L7 3.4"/>
+</svg>

public/icons/actionbar-icons/Departments-Icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="11" fill="none" viewBox="0 0 12 11">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5 7v2c0 .6-.4 1-1 1H2a1 1 0 0 1-1-1V7c0-.6.4-1 1-1h2c.6 0 1 .4 1 1Zm3-5v2c0 .6-.4 1-1 1H5a1 1 0 0 1-1-1V2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1Zm3 5v2c0 .6-.4 1-1 1H8a1 1 0 0 1-1-1V7c0-.6.4-1 1-1h2c.6 0 1 .4 1 1Zm-8 .5V6m3-3.5V1m3 6.5V6"/>
+</svg>

public/icons/actionbar-icons/Employees-Icon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="11" fill="none" viewBox="0 0 12 11">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75" d="M7.5 5.5v-.3a1.7 1.7 0 1 1 3.5 0v.3"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75" d="M9.3 3.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM6 2.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-5 3v-.3a1.7 1.7 0 1 1 3.5 0v.3"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75" d="M2.8 3.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3 9.9v-.5a3 3 0 1 1 6 0v.5"/>
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 6.4A1.7 1.7 0 1 0 6 3a1.7 1.7 0 0 0 0 3.4Z"/>
+</svg>

server/api/addMVT.ts

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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/auth/login.ts

@@ -0,0 +1,95 @@
+import axios, { AxiosError } from 'axios';
+import serversideConfig from '../../../serversideConfig';
+import https from 'https';
+
+let errorMsg = 'error';
+//const { data } = useAuthState()
+
+
+export default eventHandler(async (event) => {
+
+    const agent = new https.Agent({
+        rejectUnauthorized: false,
+    });
+    const axiosInstance = axios.create({
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: "*",
+        },
+        httpsAgent: agent
+    });
+
+
+    const body = await readBody(event)
+
+    // get user object from backend
+    try {
+        let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/login`, {
+            username: body.username,
+            password: body.password,
+        });
+        const sessionToken = res.data.token;
+        const user = res.data.user;
+
+        console.log('sessionToken: ', sessionToken);
+        console.log('user: ', user);
+
+        setResponseStatus(event, 200);
+        const resBody = {
+            token: sessionToken,
+            message: 'Login successful'
+        };
+        console.log('resBody: ', resBody);
+
+        return resBody;
+    } 
+    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);
+        }
+    }
+    throw createError({
+        statusCode: 400,
+        statusMessage: errorMsg,
+    })
+
+
+})
+
+
+
+/*import { loginSuccessful, sessionToken, errorMsg } from "../../middleware/login";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    if (!loginSuccessful) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200);
+    //setResponseHeader(event, "Set-Cookie", sessionToken);
+    const resBody = {
+        token: sessionToken,
+        message: 'Login successful'
+    };
+    return resBody;
+})*/

server/api/auth/refresh.ts

@@ -0,0 +1,50 @@
+import { createError, eventHandler, readBody, sendRedirect } from 'h3';
+import jwt from 'jsonwebtoken';
+
+const SECRET = 'SECRETTUEITKEY'
+
+interface User {
+  username: string;
+  id: string;
+}
+
+interface JwtPayload extends User {
+  exp: number;
+}
+
+export default eventHandler(async (event) => {
+  const body = await readBody<{ refreshToken: string }>(event);
+
+  if (!body.refreshToken) {
+    throw createError({
+      statusCode: 403,
+      statusMessage: 'Unauthorized, no refreshToken in payload'
+    });
+  };
+
+  const decoded = jwt.verify(body.refreshToken, SECRET) as JwtPayload | undefined;
+
+  if (!decoded) {
+    throw createError({
+      statusCode: 403,
+      statusMessage: 'Unauthorized, refreshToken can`t be verified'
+    });
+  };
+
+
+  // decoded.userId exists on JwtPayload, TS falsely wants decoded.id
+  const user: User = {
+    username: decoded.username,
+    id: decoded.userId,
+  };
+
+  const authToken = jwt.sign( user, SECRET, { expiresIn: 60 * 5 }); // expires in 5 min
+  const refreshToken = jwt.sign( user, SECRET, {  expiresIn: 60 * 60 * 24 * 7 }); // expires in 7 days
+
+  return {
+    token: {
+      authToken,
+      refreshToken
+    }
+  };
+})

server/api/auth/session.ts

@@ -0,0 +1,36 @@
+import { createError, eventHandler, getRequestHeader, H3Event } from 'h3'
+import jwt from 'jsonwebtoken';
+
+const TOKEN_TYPE = 'Bearer'
+
+const extractToken = (authHeaderValue: string) => {
+  const [, token] = authHeaderValue.split(`${TOKEN_TYPE} `)
+  return token
+}
+
+const ensureAuth = (event: H3Event) => {
+  const authHeaderValue = getRequestHeader(event, 'authorization')
+  if (typeof authHeaderValue === 'undefined') {
+    throw createError({
+      statusCode: 403,
+      statusMessage:
+        'Need to pass valid Bearer-authorization header to access this endpoint'
+    })
+  }
+
+  const extractedToken = extractToken(authHeaderValue)
+  try {
+    return jwt.verify(extractedToken, 'SECRETTUEITKEY')
+  } catch (error) {
+    console.error("Login failed. Here's the raw error:", error)
+    throw createError({
+      statusCode: 403,
+      statusMessage: 'You must be logged in to access this page'
+    })
+  }
+}
+
+export default eventHandler((event) => {
+  const user = ensureAuth(event)
+  return user
+})

server/api/auth/signup.ts

@@ -1,4 +1,4 @@
-import { errorMsg } from "../middleware/signUp.js";
+import { errorMsg } from "../../middleware/signUp.js";
 
 export default defineEventHandler(async (event) => {
 

server/api/deleteMVTTodo/[id].ts

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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/getCIFromClient/[id].ts

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

server/api/getMaintenanceVisitTemplate/[id].ts

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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/getSelectedMVTsByClient/[id].ts

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

server/api/getSelectedMVTsByMVT/[id].ts

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