Merge pull request 'instances' (#25) from MVAndPO into main

Reviewed-on: jo.kuehner/TueIT_App#25

backend/controller/maintenanceVisitTodos.js

@@ -5,6 +5,8 @@ import {
   getMaintenanceVisitTodosByAsset,
   updateMaintenanceVisitTodoById,
   deleteMaintenanceVisitTodosByPrimaryID,
+  deleteMaintenanceVisitTodosByTemplateID,
+  getMaintenanceVisitTodosByTemplate,
 } from "../models/maintenanceVisitsTodosModel.js";
 
 //create new maintenance visit todo
@@ -41,6 +43,17 @@ export const showMaintenanceVisitTodosByAsset = (req, res) => {
   });
 };
 
+//get maintenance visit todos by assetname
+export const showMaintenanceVisitTodosByTemplateId = (req, res) => {
+  getMaintenanceVisitTodosByTemplate(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
 // Update maintenance visit todo
 export const updateMaintenanceVisitTodo = (req, res) => {
   const data = req.body;
@@ -63,4 +76,16 @@ export const deleteMaintenanceVisitTodos = (req, res) => {
       res.json(results);
     }
   });
+};
+
+// Delete maintenance visit todos by template id
+export const deleteMaintenanceVisitTodosBytemplateId = (req, res) => {
+  const id = req.params.id;
+  deleteMaintenanceVisitTodosByTemplateID(id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
 };

backend/controller/maintenanceVisits.js

@@ -9,7 +9,9 @@ import {
   insertMaintenanceVisit,
   getMaintenanceVisitByName,
   getMaintenanceVisitById,
-  updateMaintenanceVisitStateById,
+  updateMaintenanceVisitById,
+  getSelectedMaintenanceVisitsByUser,
+  getSelectedMaintenanceVisitsByTemplate,
 } from "../models/maintenanceVisitsModel.js";
 
 //get all maintenance visits
@@ -34,6 +36,28 @@ export const showSelectedMaintenanceVisitsByChecklistname = (req, res) => {
   });
 };
 
+//get all selected maintenance visits by user
+export const showSelectedMaintenanceVisitsByUser = (req, res) => {
+  getSelectedMaintenanceVisitsByUser(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
+//get all selected maintenance visits by template
+export const showSelectedMaintenanceVisitsByTemplate = (req, res) => {
+  getSelectedMaintenanceVisitsByTemplate(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
 //get all selected maintenance visits by customer
 export const showSelectedMaintenanceVisitsByCustomer = (req, res) => {
   getSelectedMaintenanceVisitsByCustomer(req.params.id, (err, results) => {
@@ -114,9 +138,9 @@ export const showMaintenanceVisitById = (req, res) => {
 };
 
 // Update maintenance visit
-export const updateMaintenanceVisitState = (req, res) => {
+export const updateMaintenanceVisit = (req, res) => {
   const data = req.body;
-  updateMaintenanceVisitStateById(data, (err, results) => {
+  updateMaintenanceVisitById(data, (err, results) => {
     if (err) {
       res.send(err);
     } else {

backend/controller/productionOrderTodos.js

@@ -5,6 +5,7 @@ import {
     getProductionOrderTodosByAsset,
     updateProductionOrderTodoById,
     deleteProductionOrderTodosChecklistID,
+    getProductionOrderTodosByTemplate,
 } from "../models/productionOrdersTodosModel.js";
 
 //create new production order todo
@@ -41,6 +42,18 @@ export const showProductionOrderTodosByAsset = (req, res) => {
     });
 };
 
+
+//get production order todos by template
+export const showProductionOrderTodosByTemplate = (req, res) => {
+    getProductionOrderTodosByTemplate(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
 // Update production order todo
 export const updateProductionOrderTodo = (req, res) => {
     const data = req.body;

backend/controller/productionOrders.js

@@ -10,7 +10,9 @@ import {
     getProductionOrderByName,
     deleteProductionOrderById,
     getProductionOrderById,
-    updateProductionOrderStateById,
+    updateProductionOrderById,
+    getSelectedProductionOrdersByTemplate,
+    getSelectedProductionOrdersByUser,
 } from "../models/productionOrdersModel.js";
 
 //get all production orders
@@ -46,6 +48,28 @@ export const showSelectedProductionOrdersByCustomer = (req, res) => {
     });
 };
 
+//get all selected production orders by user
+export const showSelectedProductionOrdersByUser = (req, res) => {
+    getSelectedProductionOrdersByUser(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+//get all selected production orders by template
+export const showSelectedProductionOrdersByTemplate = (req, res) => {
+    getSelectedProductionOrdersByTemplate(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
 //get all selected production orders by ticketnumber
 export const showSelectedProductionOrdersByTicketnumber = (req, res) => {
     getSelectedProductionOrdersByTicketnumber(req.params.id, (err, results) => {
@@ -126,9 +150,9 @@ export const showProductionOrderById = (req, res) => {
 };
 
 // Update production order
-export const updateProductionOrderState = (req, res) => {
+export const updateProductionOrder = (req, res) => {
     const data = req.body;
-    updateProductionOrderStateById(data, (err, results) => {
+    updateProductionOrderById(data, (err, results) => {
         if (err) {
             res.send(err);
         } else {

backend/models/maintenanceVisitsModel.js

@@ -28,6 +28,34 @@ export const getSelectedMaintenanceVisitsByChecklistname = async (selected, resu
   }
 };
 
+//get all selected maintenance visits by template
+export const getSelectedMaintenanceVisitsByTemplate = async (selected, result) => {
+  try {
+    let sql = `SELECT * FROM maintenancevisits WHERE templateID = ? ORDER BY name ASC`;
+    const results = await ownConn.execute(sql, [selected])
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+//get all selected maintenance visits by user
+export const getSelectedMaintenanceVisitsByUser = async (selected, result) => {
+  try {
+    let sql = `SELECT * FROM maintenancevisits WHERE LOWER(user) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
+    const results = await ownConn.execute(sql)
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
 //get all selected maintenance visits by customer
 export const getSelectedMaintenanceVisitsByCustomer = async (selected, result) => {
   try {
@@ -75,6 +103,7 @@ export const deleteMaintenanceVisitById = async (id, result) => {
   try {
     let sql = `DELETE FROM maintenancevisits WHERE primaryID = ?`;
     const results = await ownConn.query(sql, [id])
+    results.insertId = results.insertId.toString();
     result(null, results);
   }
   catch (err) {
@@ -127,11 +156,11 @@ export const getMaintenanceVisitById = async (id, result) => {
 };
 
 // Update maintenance visit state to Database
-export const updateMaintenanceVisitStateById = async (data, result) => {
+export const updateMaintenanceVisitById = async (data, result) => {
   try {
     const id = data.primaryID;
-    let sql = `UPDATE maintenancevisits SET state = ? WHERE primaryID = ?`;
-    const results = await ownConn.query(sql, [data.state, id])
+    let sql = `UPDATE maintenancevisits SET primaryID = ?, name = ?, templateID = ?, maintenanceType = ?, state = ?, creationDate = ?, completionDate = ?, user = ?, customer = ?, customerID = ?, templateNotes = ?, type = ?, timeSpent = ?, notes = ? WHERE primaryID = ?`;
+    const results = await ownConn.query(sql, [data.primaryID, 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, id])
     results.insertId = results.insertId.toString();
     result(null, results);
   }

backend/models/maintenanceVisitsTodosModel.js

@@ -42,12 +42,26 @@ export const getMaintenanceVisitTodosByAsset = async (id, result) => {
   }
 };
 
+//get maintenance visit todo by template
+export const getMaintenanceVisitTodosByTemplate = async (id, result) => {
+  try {
+    let sql = `SELECT * FROM maintenancevisittodos WHERE templateID = ? ORDER BY primaryID ASC`;
+    const results = await ownConn.execute(sql, [id])
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
 // Update maintenance visit todo to Database
 export const updateMaintenanceVisitTodoById = async (data, result) => {
   try {
     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])
+    const results = await ownConn.query(sql, [data.step, data.asset, data.task, data.comment, data.done, id])
     results.insertId = results.insertId.toString();
     result(null, results);
   }
@@ -63,6 +77,22 @@ export const deleteMaintenanceVisitTodosByPrimaryID = async (id, result) => {
   try {
     let sql = `DELETE FROM maintenancevisittodos WHERE primaryID = ?`;
     const results = await ownConn.query(sql, [id])
+    results.insertId = results.insertId.toString();
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+// Delete maintenance visit todos by template to Database
+export const deleteMaintenanceVisitTodosByTemplateID = async (id, result) => {
+  try {
+    let sql = `DELETE FROM maintenancevisittodos WHERE templateID = ?`;
+    const results = await ownConn.query(sql, [id])
+    results.insertId = results.insertId.toString();
     result(null, results);
   }
   catch (err) {

backend/models/productionOrdersModel.js

@@ -3,7 +3,7 @@ import ownConn from "../dbConfig.js";
 //get all production orders
 export const getProductionOrders = async (result) => {
     try {
-        let sql = `SELECT * FROM productionorders ORDER BY name ASC`;
+        let sql = `SELECT * FROM productionorders ORDER BY ticketNumber ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -17,7 +17,7 @@ export const getProductionOrders = async (result) => {
 //get all selected production orders by ticketnumber
 export const getSelectedProductionOrdersByTicketnumber = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM productionorders WHERE ticketNumber LIKE '%${selected}%' ORDER BY ticketNumber ASC`;
+        let sql = `SELECT * FROM productionorders WHERE ticketNumber = ? ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -42,6 +42,34 @@ export const getSelectedProductionOrdersByCustomer = async (selected, result) =>
     }
 };
 
+//get all selected production orders by user
+export const getSelectedProductionOrdersByUser = async (selected, result) => {
+    try {
+        let sql = `SELECT * FROM productionorders WHERE LOWER(user) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
+        const results = await ownConn.execute(sql)
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
+//get all selected production orders by template
+export const getSelectedProductionOrdersByTemplate = async (selected, result) => {
+    try {
+        let sql = `SELECT * FROM productionorders WHERE templateID = ? ORDER BY name ASC`;
+        const results = await ownConn.execute(sql, [selected])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
 //get all selected production orders by state
 export const getSelectedProductionOrdersByState = async (selected, result) => {
     try {
@@ -89,6 +117,7 @@ export const deleteProductionOrderById = async (id, result) => {
     try {
         let sql = `DELETE FROM productionorders WHERE ticketNumber = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -141,11 +170,11 @@ export const getProductionOrderById = async (id, result) => {
 };
 
 // Update production order state to Database
-export const updateProductionOrderStateById = async (data, result) => {
+export const updateProductionOrderById = async (data, result) => {
     const id = data.ticketNumber;
     try {
-        let sql = `UPDATE productionorders SET state = ? WHERE ticketNumber = ?`;
-        const results = await ownConn.query(sql, [data.state, id])
+        let sql = `UPDATE productionorders SET name = ?, templateID = ?, customer = ?, customerID = ?, asset = ?, state = ?, creationDate = ?, completionDate = ?, user = ?, templateDescription = ?, templateNotes = ?, timeSpent = ?, notes = ? WHERE ticketNumber = ?`;
+        const results = await ownConn.query(sql, [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, id])
         results.insertId = results.insertId.toString();
         result(null, results);
     }

backend/models/productionOrdersTodosModel.js

@@ -4,6 +4,7 @@ import ownConn from "../dbConfig.js";
 export const insertProductionOrderTodo = async (data, result) => {
     try {
         const results = await ownConn.query(`INSERT INTO productionordertodos(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) {
@@ -27,7 +28,7 @@ export const getProductionOrderTodosById = async (id, result) => {
     }
 };
 
-//get single production order todo by asset
+//get production order todo by asset
 export const getProductionOrderTodosByAsset = async (id, result) => {
     try {
         let sql = `SELECT * FROM productionordertodos WHERE asset = ? ORDER BY primaryID ASC`;
@@ -41,12 +42,27 @@ export const getProductionOrderTodosByAsset = async (id, result) => {
     }
 };
 
+//get production order todo by template
+export const getProductionOrderTodosByTemplate = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM productionordertodos WHERE templateID = ? ORDER BY primaryID ASC`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
 // Update production order todo to Database
 export const updateProductionOrderTodoById = async (data, result) => {
     try {
         const id = data.primaryID;
         let sql = `UPDATE productionordertodos SET step = ?, asset = ?, task = ?, comment = ?, done = ? WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [data.step, data.asset, data.task, data.comment, data.done, id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -61,6 +77,7 @@ export const deleteProductionOrderTodosChecklistID = async (id, result) => {
     try {
         let sql = `DELETE FROM productionordertodos WHERE templateID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {

backend/routes/routes.js

@@ -19,11 +19,13 @@ import {
     showSelectedMaintenanceVisitsByCustomer,
     showSelectedMaintenanceVisitsByState,
     showSelectedMaintenanceVisitsByDate,
+    showSelectedMaintenanceVisitsByTemplate,
+    showSelectedMaintenanceVisitsByUser,
     deleteMaintenanceVisit,
     createMaintenanceVisit,
     showMaintenanceVisitByName,
     showMaintenanceVisitById,
-    updateMaintenanceVisitState,
+    updateMaintenanceVisit,
 } from "../controller/maintenanceVisits.js"
 
 import {
@@ -32,6 +34,8 @@ import {
     showMaintenanceVisitTodosByAsset,
     updateMaintenanceVisitTodo,
     deleteMaintenanceVisitTodos,
+    deleteMaintenanceVisitTodosBytemplateId,
+    showMaintenanceVisitTodosByTemplateId,
 } from "../controller/maintenanceVisitTodos.js"
 
 import {
@@ -60,17 +64,20 @@ import {
     showSelectedProductionOrdersByTicketnumber,
     showSelectedProductionOrdersByDate,
     showSelectedProductionOrdersByState,
+    showSelectedProductionOrdersByTemplate,
+    showSelectedProductionOrdersByUser,
     deleteProductionOrder,
     createProductionOrder,
     showProductionOrderByName,
     showProductionOrderById,
-    updateProductionOrderState,
+    updateProductionOrder,
 } from "../controller/productionOrders.js";
 
 import {
     createProductionOrderTodos,
     showProductionOrderTodosById,
     showProductionOrderTodosByAsset,
+    showProductionOrderTodosByTemplate,
     updateProductionOrderTodo,
     deleteProductionOrderTodos,
 } from "../controller/productionOrderTodos.js";
@@ -409,6 +416,12 @@ router.get("/selectedProductionOrdersByCustomer/:id", showSelectedProductionOrde
 //get all production orders by selected state
 router.get("/selectedProductionOrdersByState/:id", showSelectedProductionOrdersByState)
 
+//get all production orders by selected template
+router.get("/selectedProductionOrdersByTemplate/:id", showSelectedProductionOrdersByTemplate)
+
+//get all production orders by selected user
+router.get("/selectedProductionOrdersByUser/:id", showSelectedProductionOrdersByUser)
+
 //get all production orders by selected date
 router.get("/selectedProductionOrdersByDate/:id", showSelectedProductionOrdersByDate)
 
@@ -424,9 +437,8 @@ router.get("/productionOrderByName/:id", showProductionOrderByName);
 //get single production order by ticketNumber
 router.get("/productionOrder/:id", showProductionOrderById);
 
-// Update production order state
-router.put("/productionOrderState", updateProductionOrderState);
-
+// Update production order
+router.put("/productionOrder", updateProductionOrder);
 
 
 // routes with production order todos:
@@ -439,10 +451,13 @@ router.get("/productionOrderTodos/:id", showProductionOrderTodosById);
 //get all production order todos by assetname
 router.get("/productionOrderTodosByAsset/:id", showProductionOrderTodosByAsset);
 
+//get all production order todos by template id
+router.get("/productionOrderTodosByTemplateID/:id", showProductionOrderTodosByTemplate);
+
 // Update production order todo
 router.put("/productionOrderTodos", updateProductionOrderTodo);
 
-// Delete production order todos
+// Delete production order todo
 router.delete("/productionOrderTodos/:id", deleteProductionOrderTodos);
 
 
@@ -460,6 +475,12 @@ router.get("/selectedMaintenanceVisitsByDate/:id", showSelectedMaintenanceVisits
 //get all maintenance visits by selected customer
 router.get("/selectedMaintenanceVisitsByCustomer/:id", showSelectedMaintenanceVisitsByCustomer)
 
+//get all maintenance visits by selected user
+router.get("/selectedMaintenanceVisitsByUser/:id", showSelectedMaintenanceVisitsByUser)
+
+//get all maintenance visits by selected template
+router.get("/selectedMaintenanceVisitsByTemplate/:id", showSelectedMaintenanceVisitsByTemplate)
+
 //get all maintenance visits by selected state
 router.get("/selectedMaintenanceVisitsByState/:id", showSelectedMaintenanceVisitsByState)
 
@@ -475,8 +496,8 @@ router.get("/maintenanceVisitByName/:id", showMaintenanceVisitByName);
 //get single maintenance visit by primaryId
 router.get("/maintenanceVisit/:id", showMaintenanceVisitById);
 
-// Update maintenance visit state
-router.put("/maintenanceVisitState", updateMaintenanceVisitState);
+// Update maintenance visit
+router.put("/maintenanceVisit", updateMaintenanceVisit);
 
 
 
@@ -490,12 +511,18 @@ router.get("/maintenanceVisitTodos/:id", showMaintenanceVisitTodosById);
 //get all maintenance visit todos by assetname
 router.get("/maintenanceVisitTodosByAsset/:id", showMaintenanceVisitTodosByAsset);
 
+//get all maintenance visit todos by template id
+router.get("/maintenanceVisitTodosByTemplateId/:id", showMaintenanceVisitTodosByTemplateId);
+
 // Update maintenance visit todo
 router.put("/maintenanceVisitTodos", updateMaintenanceVisitTodo);
 
 // Delete maintenance visit todos
 router.delete("/maintenanceVisitTodos/:id", deleteMaintenanceVisitTodos);
 
+// Delete maintenance visit todos by template id
+router.delete("/maintenanceVisitTodosByTemplateID/:id", deleteMaintenanceVisitTodosBytemplateId);
+
 
 
 // routes with issue slips:

components/Dashboard.vue

@@ -2,14 +2,22 @@
   <section :class="['dashboard', darkMode ? 'section-darkmode' : 'section-lightmode']">
     <h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">My tasks</h2>
     <div class="shortcuts">
-      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="maintenance-visits"
-        value="My Maintenance Visits">
-      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders"
-        value="My Production Orders">
-      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="solutions"
+      <nuxt-link to="/maintenanceVisits" id="nuxt-link" class="button"
+        :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+        @click="goToMVIList()">
+        <button :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="maintenance-visits">My
+          Maintenance Visits</button>
+      </nuxt-link>
+      <nuxt-link to="/productionOrders" id="nuxt-link" class="button"
+        :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+        @click="goToPOIList()">
+        <button :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders">My
+          Production Orders</button>
+      </nuxt-link>
+      <!-- <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="solutions"
         value="My Solutions">
       <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips"
-        value="My Issue Slips">
+        value="My Issue Slips"> -->
     </div>
   </section>
 </template>
@@ -24,6 +32,7 @@ const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 const modeChangedLocalstorage = computed(() => store.state.modeDashboard);
 const darkMode = ref('');
+const loggedInUsername = ref('');
 
 const getSession = async () => {
   if (modeChangedLocalstorage.value) {
@@ -37,6 +46,18 @@ const getSession = async () => {
   }
 }
 
+const goToMVIList = () => {
+  store.commit('activateFilteredUserTerm');
+  store.commit('activateFiltered');
+  store.commit('changeToInstancelist');
+};
+
+const goToPOIList = () => {
+  store.commit('activateFilteredUserTerm');
+  store.commit('activateFiltered'); 
+  store.commit('changeToInstancelist');
+};
+
 function getItem(item) {
   if (process.client) {
     return localStorage.getItem(item)
@@ -105,7 +126,8 @@ export default {
   gap: 2.5rem;
 }
 
-input {
+input,
+button {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -120,6 +142,10 @@ input {
   font: 400 0.875rem/2rem Overpass, sans-serif;
 }
 
+button:hover {
+  cursor: pointer;
+}
+
 .input-darkmode {
   color: #fff;
   background-color: #343434;

components/TemplateSearch.vue

@@ -1,7 +1,7 @@
 <template>
-  <section :class="['template-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+  <section v-if="notAllInstancesIcon" :class="['template-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
     <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Template:</div>
-    <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name</pre>
+    <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ template.name }}</pre>
   </section>
 </template>
 
@@ -10,10 +10,19 @@
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
+const route = useRoute()
+const id = computed(() => route)
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
+const template = ref({});
+const chosenMVTId = computed(() => store.state.chosenMVTId);
+const chosenPOTId = computed(() => store.state.chosenPOTId);
+const notAllInstancesIcon = computed(() => store.state.notAllInstancesIcon);
+
 const darkMode = ref('');
 
 const getSession = async () => {
@@ -25,6 +34,31 @@ const getSession = async () => {
   }
 }
 
+// get maintenance visit template from id
+const getTById = async () => {
+  if (notAllInstancesIcon.value) {
+    if (id.value.fullPath == '/maintenanceVisits') {
+      try {
+        const response = await Axios.get(
+          `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${chosenMVTId.value}`
+        );
+        template.value = response.data;
+      } catch (err) {
+        console.log(err.response.statusText);
+      }
+    } else if (id.value.fullPath == '/productionOrders') {
+      try {
+        const response = await Axios.get(
+          `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
+        );
+        template.value = response.data;
+      } catch (err) {
+        console.log(err.response.statusText);
+      }
+    }
+  }
+}
+
 function getItem(item) {
   if (process.client) {
     return localStorage.getItem(item)
@@ -36,7 +70,8 @@ function getItem(item) {
 watch(modeChanged, getSession)
 
 onMounted(async () => {
-  await getSession();
+  getSession();
+  await getTById();
 });
 </script>
 

components/server/Accounting.vue

@@ -487,12 +487,14 @@ const addIssueSlip = async () => {
     const time = today.getHours() + ":" + today.getMinutes();
     const dateTime = date + ' ' + time;
     let allFine = true;
-    newOIs.value.forEach(oi => {
-        if (oi.article.length === 0 && oi.amount.length === 0 && oi.price.length === 0 && oi.comment.length === 0) {
-            alert(`Please add data for all ordering info.`);
-            allFine = false
-        }
-    })
+    if (newOIs.value.length != 0) {
+        newOIs.value.forEach(oi => {
+            if (oi.article.length === 0 && oi.amount.length === 0 && oi.price.length === 0 && oi.comment.length === 0) {
+                alert(`Please add data for all ordering info.`);
+                allFine = false
+            }
+        })
+    }
     if (!allFine) {
         return
     }
@@ -526,22 +528,24 @@ const addIssueSlip = async () => {
                 egressBillDate: newEgressBillDate.value,
                 egressBill: newEgressBill.value,
             });
-        newOIs.value.forEach(async oi => {
-            try {
-                const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addOrderingInfo`,
-                    {
-                        issueSlipID: response.data,
-                        article: oi.article,
-                        amount: oi.amount,
-                        price: oi.price,
-                        comment: oi.comment,
-                    });
-            } catch (err) {
-                console.log(err);
-            }
-            store.commit('resetStore');
-            store.commit('changeToIssueSliplist');
-        })
+        if (newOIs.value.length != 0) {
+            newOIs.value.forEach(async oi => {
+                try {
+                    const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addOrderingInfo`,
+                        {
+                            issueSlipID: response.data,
+                            article: oi.article,
+                            amount: oi.amount,
+                            price: oi.price,
+                            comment: oi.comment,
+                        });
+                } catch (err) {
+                    console.log(err);
+                }
+            })
+        }
+        store.commit('resetStore');
+        store.commit('changeToIssueSliplist');
     } catch (err) {
         console.log(err.response.statusText);
     }

components/server/Asset.vue

@@ -331,7 +331,14 @@ const updateNewCustomerID = async () => {
 const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     setTimeout(() => {
         fetchDataFunc();
-    }, 1500);
+    }, 2000);
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithSmallDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 500);
 }
 
 const getSession = async () => {
@@ -356,7 +363,7 @@ watch(modeChanged, getSession)
 
 onMounted(async () => {
     await getSession();
-    await getItemById();
+    triggerBackendCallsWithSmallDelay(getItemById);
     triggerBackendCallsWithDelay(getConfigItems);
     triggerBackendCallsWithDelay(getCustomers);
 });

components/server/AssetSolutionList.vue

@@ -159,7 +159,7 @@ watch(modeChanged, getSession)
 
 onMounted(async () => {
     await getSession();
-    getItemById();
+    await getItemById();
 });
 </script>
 

components/server/InstanceChecklist.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+    <section :class="['instance-checklist-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
         <table class="data-table" id="instance-checklist">
             <tbody>
@@ -14,40 +14,70 @@
                         :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
                         Task</th>
                     <th
-                        :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
+                        :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode && !addBool ? 'Comments-darkmode' : '',  !darkMode && !addBool ? 'Comments-lightmode' : '']">
                         Comments</th>
-                    <th :class="['Done', darkMode ? 'th-darkmode' : 'th-lightmode']">Done</th>
+                    <th v-if="!addBool" :class="['Done', darkMode ? 'th-darkmode' : 'th-lightmode']">Done</th>
                 </tr>
-                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <tr v-for="todo in poiTodos" :key="todo.primaryID"
+                    :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
-                        ...</td>
+                        {{ todo.rowID }}</td>
                     <td
                         :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                        ...</td>
+                        {{ todo.asset }}</td>
                     <td
                         :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
-                        ...</td>
+                        {{ todo.task }}</td>
                     <td
-                        :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
-                        ...</td>
-                    <td :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
+                        :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode && !addBool ? 'Comments-darkmode' : '',  !darkMode && !addBool ? 'Comments-lightmode' : '']">
+                        <textarea type="text" v-model="todo.comments" :readonly="!editable" @change="updatePOITodo(todo)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
+                    </td>
+                    <td v-if="!addBool" :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input
+                            @change="toggleTodo(todo)" type="checkbox" v-model="todo.done"
                             :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
                 </tr>
             </tbody>
         </table>
-    </div>
+    </section>
+    <section v-if="addBool" id="saveNewPOI">
+        <button :class="[darkMode ? 'saveNewPOI-darkmode' : 'saveNewPOI-lightmode']" @click="addPOI()">Save</button>
+    </section>
 </template>
 
 <script setup>
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 import { computed } from 'vue';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
-const darkMode = ref('')
+const chosenPOTId = computed(() => store.state.chosenPOTId);
+const chosenPOIId = computed(() => store.state.chosenPOIId);
+
+const addBool = computed(() => store.state.new);
+const newNamePOI = computed(() => store.state.newNamePOI);
+const newTemplateIDPOI = computed(() => store.state.newTemplateIDPOI);
+const newCustomerIDPOI = computed(() => store.state.newCustomerIDPOI);
+const newCustomerPOI = computed(() => store.state.newCustomerPOI);
+const newAssetPOI = computed(() => store.state.newAssetPOI);
+const newStatePOI = computed(() => store.state.newStatePOI);
+const newCreationDatePOI = computed(() => store.state.newCreationDatePOI);
+const newCompletionDatePOI = computed(() => store.state.newCompletionDatePOI);
+const newUserPOI = computed(() => store.state.newUserPOI);
+const newTemplateDescriptionPOI = computed(() => store.state.newTemplateDescriptionPOI);
+const newTemplateNotesPOI = computed(() => store.state.newTemplateNotesPOI);
+const newTimeSpentPOI = computed(() => store.state.newTimeSpentPOI);
+const newNotesPOI = computed(() => store.state.newNotes);
+const editable = computed(() => store.state.editable);
+
+const darkMode = ref('');
+const poiTodos = ref([]);
+const productionOrderInstances = ref([]);
 
 const getSession = async () => {
     const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -58,6 +88,81 @@ const getSession = async () => {
     }
 }
 
+// get production order template todos from id
+const getPOITodosById = async () => {
+    if (chosenPOTId.value != -1 && addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosProductionOrderTemplate/${chosenPOTId.value}`
+            );
+            poiTodos.value = response.data;
+            store.commit('updateProductionOrderInstanceTemplateID', chosenPOTId.value)
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else if (addBool.value && !(newTemplateIDPOI.value == '')) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosProductionOrderTemplate/${newTemplateIDPOI.value}`
+            );
+            poiTodos.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosProductionOrderInstance/${chosenPOIId.value}`
+            );
+            const poiTodosComment = response.data;
+            // change the comment und step field name to comments and rowID
+            poiTodos.value = poiTodosComment.map(obj => {
+                const { step: rowID, comment: comments, ...rest } = obj;
+                return { ...rest, rowID, comments };
+            });
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    poiTodos.value = poiTodos.value.map(obj => ({
+        // convert 'done' to boolean
+        ...obj,
+        done: obj.done === "1"
+    }));
+}
+
+const toggleTodo = (todo) => {
+    let doneInput = false;
+    doneInput = todo.done;
+    updatePOITodo(todo, true, doneInput);
+}
+
+//update data
+const updatePOITodo = async (todo, doneChanged = false, doneInput = false) => {
+    if (doneChanged) {
+        todo.done = doneInput;
+    }
+    if (todo.done) {
+        todo.done = 1;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updatePOITodo`,
+            {
+                primaryID: todo.primaryID,
+                step: todo.rowID,
+                asset: todo.asset,
+                task: todo.task,
+                comment: todo.comments,
+                done: todo.done,
+            }
+        );
+        await getPOITodosById();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
 function getItem(item) {
     if (process.client) {
         return localStorage.getItem(item)
@@ -66,10 +171,101 @@ function getItem(item) {
     }
 }
 
+//get all productionOrder instances
+const getProductionOrderInstances = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderInstances`);
+        productionOrderInstances.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new production order instance
+const addPOI = async () => {
+    // check if all input data is valid
+    if (newNamePOI.value.trim() === "") {
+        alert("Please add a production order instance name!");
+        return;
+    } else {
+        var counter = 0;
+        if (!(productionOrderInstances.value.length == null)) {
+            // check if production order instance name already exists
+            productionOrderInstances.value.forEach(p => {
+                if (p.name === newNamePOI.value) {
+                    counter += 1;
+                }
+            });
+            if (counter == 1) {
+                alert("This production order instance name already exists. Please choose an unique production order instance name or modify respectively delete the old one!");
+                return;
+            }
+        }
+    }
+    if (newCustomerPOI.value.length === 0) {
+        alert("Please choose a customer!");
+        return;
+    }
+    // get the time and date
+    const today = new Date();
+    const date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
+    const time = today.getHours() + ":" + today.getMinutes();
+    const dateTime = date + ' ' + time;
+    try {
+        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addPOI`,
+            {
+                name: newNamePOI.value,
+                templateID: newTemplateIDPOI.value,
+                customerID: newCustomerIDPOI.value,
+                customer: newCustomerPOI.value,
+                asset: newAssetPOI.value,
+                state: newStatePOI.value,
+                creationDate: dateTime,
+                completionDate: newCompletionDatePOI.value,
+                user: newUserPOI.value,
+                templateDescription: newTemplateDescriptionPOI.value,
+                templateNotes: newTemplateNotesPOI.value,
+                timeSpent: newTimeSpentPOI.value,
+                notes: newNotesPOI.value,
+            });
+        store.commit('resetStore');
+        store.commit('deactivateSearch');
+        store.commit('changeToInstancelist');
+        store.commit('seeAllIcon');
+        poiTodos.value.forEach(async todo => {
+            try {
+                const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoPOI`,
+                    {
+                        templateID: response.data,
+                        step: todo.rowID,
+                        asset: todo.asset,
+                        task: todo.task,
+                        comment: todo.comments,
+                        done: false,
+                    });
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        })
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
+
 watch(modeChanged, getSession)
+watch(newTemplateIDPOI, getPOITodosById)
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getPOITodosById();
+    triggerBackendCallsWithDelay(getProductionOrderInstances);
 });
 </script>
 
@@ -84,15 +280,13 @@ export default {
 <style scoped>
 .data {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     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);
+    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 {
@@ -110,6 +304,20 @@ export default {
     border-collapse: collapse;
 }
 
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.input {
+    border: none;
+}
+
 .table-row {
     display: flex;
     flex-direction: row;
@@ -119,6 +327,50 @@ export default {
     gap: 0.625rem;
 }
 
+.table-row-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.saveNewPOI-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);
+}
+
+.saveNewPOI-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);
+}
+
+.saveNewPOI-darkmode:hover {
+    background-color: #444444;
+    cursor: pointer;
+}
+
+.saveNewPOI-lightmode:hover {
+    background-color: #ACACAC;
+    cursor: pointer;
+}
+
+#saveNewPOI {
+    text-align: center;
+}
+
 .tr-head-darkmode {
     border-top: none;
     border-bottom: 0.0625rem solid #000000;
@@ -146,6 +398,10 @@ td {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+td {
+    height: 5rem;
+}
+
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
@@ -164,11 +420,28 @@ th {
     filter: invert(100%);
 }
 
-
 .checkbox-lightmode {
     filter: invert(0%);
 }
 
+.instance-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;
+}
+
 .Step {
     width: 7%;
 }
@@ -239,4 +512,10 @@ th {
 .label-lightmode {
     color: #000;
 }
+
+textarea {
+    resize: none;
+    width: 20rem;
+    height: 5rem;
+}
 </style>

components/server/InstanceChecklistMVI.vue

@@ -0,0 +1,532 @@
+<template>
+    <section :class="['instance-checklist-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
+        <table class="data-table" id="instance-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', darkMode && !addBool ? 'Comments-darkmode' : '', !darkMode && !addBool ? 'Comments-lightmode' : '']">
+                        Comments</th>
+                    <th v-if="!addBool" :class="['Done', darkMode ? 'th-darkmode' : 'th-lightmode']">Done</th>
+                </tr>
+                <tr v-for="todo in mviTodos" :key="todo.primaryID"
+                    :class="['table-row-data', 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
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        {{ todo.asset }}</td>
+                    <td
+                        :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        {{ todo.task }}</td>
+                    <td
+                        :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode && !addBool ? 'Comments-darkmode' : '',  !darkMode && !addBool ? 'Comments-lightmode' : '']">
+                        <textarea type="text" v-model="todo.comments" :readonly="!editable"
+                            @change="updateMVITodo(todo)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
+                    </td>
+                    <td v-if="!addBool" :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input
+                            @change="toggleTodo(todo)" type="checkbox" v-model="todo.done"
+                            :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+    <section v-if="addBool" id="saveNewMVI">
+        <button :class="[darkMode ? 'saveNewMVI-darkmode' : 'saveNewMVI-lightmode']" @click="addMVI()">Save</button>
+    </section>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const chosenMVIId = computed(() => store.state.chosenMITId);
+const chosenMVTId = computed(() => store.state.chosenMVTId);
+
+const addBool = computed(() => store.state.new);
+const newNameMVI = computed(() => store.state.newNameMVI);
+const newTemplateIDMVI = computed(() => store.state.newTemplateIDMVI);
+const newMaintenanceTypeMVI = computed(() => store.state.newMaintenanceTypeMVI);
+const newStateMVI = computed(() => store.state.newStateMVI);
+const newCreationDateMVI = computed(() => store.state.newCreationDateMVI);
+const newCompletionDateMVI = computed(() => store.state.newCompletionDateMVI);
+const newUserMVI = computed(() => store.state.newUserMVI);
+const newCustomerIDMVI = computed(() => store.state.newCustomerIDMVI);
+const newCustomerMVI = computed(() => store.state.newCustomerMVI);
+const newTemplateNotesMVI = computed(() => store.state.newTemplateNotesMVI);
+const newTypeMVI = computed(() => store.state.newTypeMVI);
+const newTimeSpentMVI = computed(() => store.state.newTimeSpentMVI);
+const newNotesMVI = computed(() => store.state.newNotesMVI);
+const editable = computed(() => store.state.editable);
+
+const darkMode = ref('');
+const mviTodos = ref([]);
+const maintenanceVisitInstances = ref([]);
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+// get maintenance visit template todos from id
+const getMVITodosById = async () => {
+    if (chosenMVTId.value != -1 && addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosMaintenanceVisitTemplate/${chosenMVTId.value}`
+            );
+            const mviTodosComment = response.data;
+            // change the commets to comments
+            mviTodos.value = mviTodosComment.map(obj => {
+                const { commets: comments, ...rest } = obj;
+                return { ...rest, comments };
+            });
+            store.commit('updateMaintenanceVisitInstanceTemplateID', chosenMVTId.value)
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else if (addBool.value && !(newTemplateIDMVI.value == '')) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosMaintenanceVisitTemplate/${newTemplateIDMVI.value}`
+            );
+            const mviTodosComment = response.data;
+            // change the commets to comments
+            mviTodos.value = mviTodosComment.map(obj => {
+                const { commets: comments, ...rest } = obj;
+                return { ...rest, comments };
+            });
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosMaintenanceVisitInstance/${chosenMVIId.value}`
+            );
+            const mviTodosComment = response.data;
+            // change the comment and step field name to comments and rowID
+            mviTodos.value = mviTodosComment.map(obj => {
+                const { step: rowID, comment: comments, ...rest } = obj;
+                return { ...rest, rowID, comments };
+            });
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    mviTodos.value = mviTodos.value.map(obj => ({
+        // convert 'done' to boolean
+        ...obj,
+        done: obj.done === "1"
+    }));
+}
+
+const toggleTodo = (todo) => {
+    let doneInput = false;
+    doneInput = todo.done;
+    updateMVITodo(todo, true, doneInput);
+}
+
+//update data
+const updateMVITodo = async (todo, doneChanged = false, doneInput = false) => {
+    if (doneChanged) {
+        todo.done = doneInput;
+    }
+    if (todo.done) {
+        todo.done = 1;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateMVITodo`,
+            {
+                primaryID: todo.primaryID,
+                step: todo.rowID,
+                asset: todo.asset,
+                task: todo.task,
+                comment: todo.comments,
+                done: todo.done,
+            }
+        );
+        await getMVITodosById();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+//get all maintenance visit instances
+const getMaintenanceVisitInstances = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitInstances`);
+        maintenanceVisitInstances.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new maintenance visit instance
+const addMVI = async () => {
+    // check if all input data is valid
+    if (newNameMVI.value.trim() === "") {
+        alert("Please add a maintenance visit instance name!");
+        return;
+    } else {
+        var counter = 0;
+        if (!(maintenanceVisitInstances.value.length == null)) {
+            // check if maintenance visit instance name already exists
+            maintenanceVisitInstances.value.forEach(m => {
+                if (m.name === newNameMVI.value) {
+                    counter += 1;
+                }
+            });
+            if (counter == 1) {
+                alert("This maintenance visit instance name already exists. Please choose an unique maintenance visit instance name or modify respectively delete the old one!");
+                return;
+            }
+        }
+    }
+    if (newCustomerMVI.value.length === 0) {
+        alert("Please choose a customer!");
+        return;
+    }
+    // get the time and date
+    const today = new Date();
+    const date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
+    const time = today.getHours() + ":" + today.getMinutes();
+    const dateTime = date + ' ' + time;
+    try {
+        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addMVI`,
+            {
+                name: newNameMVI.value,
+                templateID: newTemplateIDMVI.value,
+                maintenanceType: newMaintenanceTypeMVI.value,
+                state: newStateMVI.value,
+                creationDate: dateTime,
+                completionDate: newCompletionDateMVI.value,
+                user: newUserMVI.value,
+                customerID: newCustomerIDMVI.value,
+                customer: newCustomerMVI.value,
+                templateNotes: newTemplateNotesMVI.value,
+                type: newTypeMVI.value,
+                timeSpent: newTimeSpentMVI.value,
+                notes: newNotesMVI.value,
+            });
+        store.commit('resetStore');
+        store.commit('deactivateSearch');
+        store.commit('changeToInstancelist');
+        store.commit('seeAllIcon');
+        mviTodos.value.forEach(async todo => {
+            try {
+                const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoMVI`,
+                    {
+                        templateID: response.data,
+                        step: todo.rowID,
+                        asset: todo.asset,
+                        task: todo.task,
+                        comment: todo.comments,
+                        done: false,
+                    });
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        })
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
+
+watch(modeChanged, getSession)
+watch(newTemplateIDMVI, getMVITodosById)
+
+onMounted(async () => {
+    getSession();
+    await getMVITodosById();
+    triggerBackendCallsWithDelay(getMaintenanceVisitInstances);
+});
+</script>
+
+<script>
+export default {
+    name: "InstanceChecklistMVI",
+};
+</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;
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.input {
+    border: none;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.table-row-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.saveNewMVI-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);
+}
+
+.saveNewMVI-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);
+}
+
+.saveNewMVI-darkmode:hover {
+    background-color: #444444;
+    cursor: pointer;
+}
+
+.saveNewMVI-lightmode:hover {
+    background-color: #ACACAC;
+    cursor: pointer;
+}
+
+#saveNewMVI {
+    text-align: center;
+}
+
+.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;
+}
+
+td {
+    height: 5rem;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+.checkbox-darkmode {
+    filter: invert(100%);
+}
+
+.checkbox-lightmode {
+    filter: invert(0%);
+}
+
+.instance-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;
+}
+
+.Step {
+    width: 7%;
+}
+
+.Step-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Step-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Asset {
+    width: 28%;
+}
+
+.Asset-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Task {
+    width: 30%;
+}
+
+.Task-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Task-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Comments {
+    width: 30%;
+}
+
+.Comments-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Comments-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Done {
+    width: 5%;
+}
+
+.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;
+}
+
+textarea {
+    resize: none;
+    width: 20rem;
+    height: 5rem;
+}
+</style>

components/server/Issue.vue

@@ -106,6 +106,23 @@ const newState = ref('');
 const newAmount = ref('');
 const newProperties = ref('');
 
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
 //get all issue
 const getIssues = async () => {
     try {
@@ -211,23 +228,6 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
 watch(deleteBool, confirmDeleteIssue);
 watch(modeChanged, getSession)
 
-const getSession = async () => {
-    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
-    if (loggedInUserDarkModeBool == 1) {
-        darkMode.value = true;
-    } else {
-        darkMode.value = false;
-    }
-}
-
-function getItem(item) {
-    if (process.client) {
-        return localStorage.getItem(item)
-    } else {
-        return undefined
-    }
-}
-
 onMounted(async () => {
     await getSession();
     await getIssueById();

components/server/IssueSlip.vue

@@ -19,8 +19,12 @@
                 <div class="ticketNo-user">
                     <div class="data-field" id="ticketNo">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Ticket No.:</pre>
-                        <pre
-                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issueSlip.ticketNo }}</pre>
+                        <nuxt-link to="/productionOrders" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenPOI(issueSlip.ticketNo)">
+                            <pre
+                                :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ issueSlip.ticketNo }}</pre>
+                        </nuxt-link>
                     </div>
                     <div class="data-field" id="user">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
@@ -67,14 +71,15 @@
             <div class="info">
                 <div class="ticketNo-user">
                     <div class="data-field" id="ticketNo">
-                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Ticket No.:</pre>
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Production order:</pre>
                         <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"></pre>
-                        <!-- <select id="ticketNoDropDownChosenCI" v-model="newTicketNo" @change="updateIS()"
+                        <select id="ticketNoDropDownChosenCI" v-model="chosenTemplate"
+                            @change="updateIS(chosenTemplate)"
                             :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
-                            <option v-for="po in productionOrders" :key="po.ticketNumber">
-                                {{ po.ticketNumber }}
+                            <option v-for="template in productionOrders" :key="template.templateID">
+                                {{ template.name }}
                             </option>
-                        </select> -->
+                        </select>
                     </div>
                     <div class="data-field" id="user">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
@@ -131,6 +136,7 @@ const newCustomer = ref('');
 const newUser = ref('');
 const newNotes = ref('');
 const newDeliveryAddress = ref('');
+const chosenTemplate = ref('');
 
 // get issue slip from id
 const getIssueSlipById = async () => {
@@ -146,13 +152,24 @@ const getIssueSlipById = async () => {
     }
 }
 
+const goToChosenPOI = (id) => {
+    store.commit('setChosenPOI', id);
+    store.commit('changeToInstance');
+};
+
 // update issue slip fields in the store
-const updateIS = () => {
-    const is = {
+const updateIS = async (newPoiId = -1) => {
+    let is = {};
+    if (!(newPoiId == '-1')) {
+        // Find the object with the selected Name
+        const selectedObject = productionOrders.value.find(obj => obj.name === newPoiId);
+        // Get the ticketNumber
+        newTicketNo.value = selectedObject ? selectedObject.ticketNumber : null;
+    }
+    is = {
         customerId: newCustomerID.value,
         customer: newCustomer.value,
-        // ticketNo: newTicketNo.value,
-        ticketNo: 1,
+        ticketNo: newTicketNo.value,
         notes: newNotes.value,
         user: newUser.value,
         deliveryAddress: newDeliveryAddress.value,
@@ -218,15 +235,14 @@ const getCustomers = async () => {
     }
 }
 
-//get all production orders
+//get all productionOrder instances
 const getProductionOrders = 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);
-    // }
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderInstances`);
+        productionOrders.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
 }
 
 const confirmDeleteIssueSlip = async () => {
@@ -498,4 +514,16 @@ export default {
     padding: 0.4rem;
     border-radius: 0.3125rem;
 }
+
+#nuxt-link {
+    text-decoration: none;
+}
+
+.nuxt-link-darkmode {
+    color: white;
+}
+
+.nuxt-link-lightmode {
+    color: #000;
+}
 </style>

components/server/IssueTable.vue

@@ -67,6 +67,23 @@ const issueSearchFilter = ref('');
 const darkMode = ref('');
 const issues = ref([]);
 
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
 // update search term
 const updateSearchTerm = async () => {
     issueSearchFilter.value = '';
@@ -114,24 +131,6 @@ const searchIssue = async () => {
 
 watch(stateFilter, getIssues);
 watch(searchable, updateSearchTerm);
-
-const getSession = async () => {
-    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
-    if (loggedInUserDarkModeBool == 1) {
-        darkMode.value = true;
-    } else {
-        darkMode.value = false;
-    }
-}
-
-function getItem(item) {
-    if (process.client) {
-        return localStorage.getItem(item)
-    } else {
-        return undefined
-    }
-}
-
 watch(modeChanged, getSession)
 
 onMounted(async () => {

components/server/MaintenanceVisitsInstance.vue

@@ -1,29 +1,38 @@
 <template>
-    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['maintenance-visits-instance-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Instance ID</h2>
+    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 v-if="!editable" :class="['maintenance-visits-instance-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
+        mvi.name }}</h2>
+        <input v-if="editable" v-model="mvi.name" @change="updateMVI()"
+            :class="['data', 'mvi-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
         <div class="maintenance-visits-instance-data">
             <div class="instanceInfo">
                 <div class="data-field" id="info">
                     <div class="templateId-customer-type" id="templateID">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template ID:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.templateID }}</pre>
                     </div>
                     <div class="templateId-customer-type" id="customer">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.customer }}</pre>
                     </div>
                     <div class="templateId-customer-type" id="type">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.type }}</pre>
+                        <input v-if="editable" v-model="mvi.type" @change="updateMVI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                 </div>
             </div>
         </div>
         <div class="maintenance-visits-instance-data">
-            <div class="additional">
+            <div class="additionaFl">
                 <div class="templateNotes">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template notes:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateNotes">...</pre>
+                    <pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="templateNotes">{{ mvi.templateNotes }}</pre>
+                    <input v-if="editable" v-model="mvi.templateNotes" @change="updateMVI()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
         </div>
@@ -32,15 +41,126 @@
                 <div class="data-field" id="info">
                     <div class="maintenanceType-state-user" id="maintenanceType">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Maintenance type:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.maintenanceType }}</pre>
+                        <input v-if="editable" v-model="mvi.maintenanceType" @change="updateMVI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                     <div class="maintenanceType-state-user" id="state">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.state }}</pre>
+                        <input v-if="editable" v-model="mvi.state" @change="updateMVI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                     <div class="maintenanceType-state-user" id="user">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.user }}</pre>
+                        <select v-if="editable" id="assetsDropDownChosenCI" v-model="mvi.user" @change="updateMVI()"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="user in userList" :key="user.id">
+                                {{ user.username }}
+                            </option>
+                        </select>
+                    </div>
+                </div>
+                <div class="data-field" id="info">
+                    <div class="creationDate-completionDate-timeSpent" id="creationDate">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Creation date:</pre>
+                        <pre
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.creationDate }}</pre>
+                    </div>
+                    <div class="creationDate-completionDate-timeSpent" id="completionDate">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Completion date:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.completionDate }}</pre>
+                        <input v-if="editable" v-model="mvi.completionDate" @change="updateMVI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="creationDate-completionDate-timeSpent" id="timeSpent">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Time spent:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.timeSpent }}</pre>
+                        <input v-if="editable" v-model="mvi.timeSpent" @change="updateMVI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="maintenance-visits-instance-data">
+            <div class="additional">
+                <div class="notes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <input v-model="mvi.notes" :readonly="!editable" @change="updateMVI()"
+                        :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="updateMaintenanceVisitInstance()"
+            :class="['data', 'mvi-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
+        <div class="maintenance-visits-instance-data">
+            <div class="instanceInfo">
+                <div class="data-field" id="info">
+                    <div class="templateId-customer-type" id="templateID">
+                        <pre v-if="mvtSelected"
+                            :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template ID:</pre>
+                        <pre v-if="!mvtSelected"
+                            :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name:</pre>
+                        <pre v-if="mvtSelected"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ chosenMVTId }}</pre>
+                        <select v-if="!mvtSelected" id="assetsDropDownChosenCI" v-model="chosenTemplate"
+                            @change="updateMaintenanceVisitInstance(chosenTemplate)"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="template in maintenanceVisitTemplates" :key="template.checklistID">
+                                {{ template.name }}
+                            </option>
+                        </select>
+                    </div>
+                    <div class="templateId-customer-type" id="customer">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.customer }}</pre>
+                    </div>
+                    <div class="templateId-customer-type" id="type">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
+                        <input v-model="newType" @change="updateMaintenanceVisitInstance()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="maintenance-visits-instance-data">
+            <div class="additionaFl">
+                <div class="templateNotes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template notes:</h3>
+                    <input v-model="newTemplateNotes" @change="updateMaintenanceVisitInstance()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+        </div>
+        <div class="maintenance-visits-instance-data">
+            <div class="instanceInfo">
+                <div class="data-field" id="info">
+                    <div class="maintenanceType-state-user" id="maintenanceType">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Maintenance type:</pre>
+                        <input v-model="newMaintenanceType" @change="updateMaintenanceVisitInstance()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="maintenanceType-state-user" id="state">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
+                        <input v-model="newState" @change="updateMaintenanceVisitInstance()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="maintenanceType-state-user" id="user">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
+                        <select id="assetsDropDownChosenCI" v-model="newUser" @change="updateMaintenanceVisitInstance()"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="user in userList" :key="user.id">
+                                {{ user.username }}
+                            </option>
+                        </select>
                     </div>
                 </div>
                 <div class="data-field" id="info">
@@ -63,7 +183,8 @@
             <div class="additional">
                 <div class="notes">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+                    <input v-model="newNotes" @change="updateMaintenanceVisitInstance()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
                 </div>
             </div>
         </div>
@@ -75,11 +196,258 @@
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
+const editable = computed(() => store.state.editable);
+const chosenMVIId = computed(() => store.state.chosenMITId);
+const chosenMVTId = computed(() => store.state.chosenMVTId);
+const deleteBool = computed(() => store.state.deleteBool);
+const addBool = computed(() => store.state.new);
+
 const darkMode = ref('');
+const mvtSelected = ref('');
+
+const mvi = ref({});
+const mvt = ref({});
+const customers = ref([]);
+
+const newName = ref('');
+const newTemplateID = ref('');
+const chosenTemplate = ref('');
+const newCustomerID = ref('');
+const newCustomer = ref('');
+const newMaintenanceType = ref('');
+const newUser = ref('');
+const newState = ref('');
+const newNotes = ref('');
+const newTemplateNotes = ref('');
+const newType = ref('');
+const newCreationDate = ref('');
+const newCompletionDate = ref('');
+const newTimeSpent = ref('');
+const maintenanceVisitInstances = ref([]);
+const maintenanceVisitTemplates = ref([]);
+const userList = 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);
+    }
+}
+
+//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);
+    }
+}
+
+// get maintenance visit template from id
+const getMVTById = async () => {
+    if (chosenMVTId.value == '-1') {
+        mvtSelected.value = false;
+        await getMaintenanceVisitTemplates();
+    } else {
+        mvtSelected.value = true;
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${chosenMVTId.value}`
+            );
+            mvt.value = response.data;
+            mvi.value.customer = mvt.value.customer;
+            mvi.value.customerID = mvt.value.customerID;
+            newCustomer.value = mvt.value.customer;
+            newCustomerID.value = mvt.value.customerID;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    await getMaintenanceVisitInstances();
+}
+
+// get maintenance visit template from id
+const getChosenMVTById = async (newMvtId) => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${newMvtId}`
+        );
+        mvt.value = response.data;
+        mvi.value.customer = mvt.value.customer;
+        mvi.value.customerID = mvt.value.customerID;
+        newCustomer.value = mvt.value.customer;
+        newCustomerID.value = mvt.value.customerID;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+const confirmDeleteMVI = async () => {
+    if (deleteBool.value === true) {
+        if (confirm("Do you really want to delete this maintenance visit instance? It cannot be undone!")) {
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteMaintenanceVisitInstance/${chosenMVIId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteTodosMVI/${chosenMVIId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            store.commit('undoDelete');
+            store.commit('resetStore');
+            store.commit('deactivateSearch');
+            store.commit('changeToInstancelist');
+            store.commit('seeAllIcon');
+        } else {
+            store.commit('undoDelete');
+        }
+    }
+}
+
+//get all users
+const getUsers = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllEmployees`);
+        userList.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//update data
+const updateMVI = async () => {
+    if (mvi.value.name.trim() === "") {
+        alert("Please add a maintenance visit instance name!");
+        return;
+    } else {
+        var counter = 0;
+        // check if maintenance visit instance name already exists
+        maintenanceVisitInstances.value.forEach(m => {
+            if (m.name === mvi.value.name) {
+                counter += 1;
+            }
+        });
+        if (counter == 2) {
+            alert("This maintenance visit instance name already exists. Please choose an unique maintenance visit instance name or modify respectively delete the old one!");
+            mvi.value.name = '';
+            return;
+        }
+        try {
+            await Axios.put(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateMaintenanceVisitInstance`,
+                {
+                    primaryID: mvi.value.primaryID,
+                    name: mvi.value.name,
+                    templateID: mvi.value.templateID,
+                    maintenanceType: mvi.value.maintenanceType,
+                    state: mvi.value.state,
+                    creationDate: mvi.value.creationDate,
+                    completionDate: mvi.value.completionDate,
+                    user: mvi.value.user,
+                    customerID: mvi.value.customerID,
+                    customer: mvi.value.customer,
+                    type: mvi.value.type,
+                    templateNotes: mvi.value.templateNotes,
+                    timeSpent: mvi.value.timeSpent,
+                    notes: mvi.value.notes,
+                }
+            )
+            await getMVIById();
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all maintenance visit instances
+const getMaintenanceVisitInstances = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitInstances`);
+        maintenanceVisitInstances.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// update maintenance visit instance fields in the store
+const updateMaintenanceVisitInstance = async (newMvtId = -1) => {
+    let maintenanceVisitInstance = {};
+    if (mvtSelected.value) {
+        maintenanceVisitInstance = {
+            name: newName.value,
+            templateID: chosenMVTId.value,
+            maintenanceType: newMaintenanceType.value,
+            state: newState.value,
+            creationDate: newCreationDate.value,
+            completionDate: newCompletionDate.value,
+            user: newUser.value,
+            customerID: newCustomerID.value,
+            customer: newCustomer.value,
+            templateNotes: newTemplateNotes.value,
+            type: newType.value,
+            timeSpent: newTimeSpent.value,
+            notes: newNotes.value,
+        };
+    } else {
+        if (!(newMvtId == '-1')) {
+            // Find the object with the selected Name
+            const selectedObject = maintenanceVisitTemplates.value.find(obj => obj.name === newMvtId);
+            // Get the templateID
+            newTemplateID.value = selectedObject ? selectedObject.checklistID : null;
+            await getChosenMVTById(newTemplateID.value);
+        }
+        maintenanceVisitInstance = {
+            name: newName.value,
+            templateID: newTemplateID.value,
+            maintenanceType: newMaintenanceType.value,
+            state: newState.value,
+            creationDate: newCreationDate.value,
+            completionDate: newCompletionDate.value,
+            user: newUser.value,
+            customerID: newCustomerID.value,
+            customer: newCustomer.value,
+            templateNotes: newTemplateNotes.value,
+            type: newType.value,
+            timeSpent: newTimeSpent.value,
+            notes: newNotes.value,
+        };
+    }
+    store.commit('updateMaintenanceVisitInstanceComponent', maintenanceVisitInstance);
+}
+
+// get maintenance visit instance from id
+const getMVIById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitInstance/${chosenMVIId.value}`
+            );
+            mvi.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
 
 const getSession = async () => {
     const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -99,9 +467,14 @@ function getItem(item) {
 }
 
 watch(modeChanged, getSession)
+watch(deleteBool, confirmDeleteMVI);
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getMVIById();
+    await getMVTById();
+    triggerBackendCallsWithDelay(getUsers);
+    triggerBackendCallsWithDelay(getCustomers);
 });
 </script>
 
@@ -143,6 +516,22 @@ export default {
         sans-serif;
 }
 
+.select-lightmode {
+    border: none;
+    color: black;
+    background: #EBEBEB;
+    padding: 0.4rem;
+    border-radius: 0.3125rem;
+}
+
+.select-darkmode {
+    border: none;
+    color: white;
+    background: #212121;
+    padding: 0.4rem;
+    border-radius: 0.3125rem;
+}
+
 .h2-darkmode {
     color: #fff;
 }
@@ -199,6 +588,36 @@ export default {
     font: 400 0.75rem/250% Overpass, sans-serif;
 }
 
+.h2-darkmode {
+    color: #fff;
+}
+
+.h2-lightmode {
+    color: #000;
+}
+
+.h2-input-darkmode {
+    background-color: #212121;
+}
+
+.h2-input-lightmode {
+    background-color: #EBEBEB;
+}
+
+.input {
+    border: none;
+}
+
+.mvi-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;
+}
+
 .data-darkmode {
     background-color: #212121;
     color: #fff;
@@ -268,4 +687,8 @@ export default {
     padding: 0.625rem 1.875rem 0.625rem 1.25rem;
     padding-top: 0rem;
 }
+
+.templateNotes {
+    padding-left: 1.8rem;
+}
 </style>

components/server/MaintenanceVisitsInstanceTable.vue

@@ -1,4 +1,14 @@
 <template>
+    <section v-if="searchable" :class="['mvi-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Name</div>
+        <input v-model="nameSearchFilter" @change="filterMVIByName()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
+    <section v-if="filtered" :class="['mvi-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">User</div>
+        <input v-model="userSearchFilter" @change="filterInstancesByUser()"
+            :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']">Instances:</div>
         <table class="data-table" name="maintenance-visits-instance-table">
@@ -8,8 +18,8 @@
                         :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
                         ID</th>
                     <th
-                        :class="['MaintenanceType', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
-                        Maintenance type</th>
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
                     <th
                         :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
                         State</th>
@@ -21,39 +31,158 @@
                         Completion date</th>
                     <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
                 </tr>
-                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <tr v-for="instance in maintenanceVisitInstances" :key="instance.primaryID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                        ...</td>
+                        <nuxt-link to="/maintenanceVisits" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenMVI(instance.primaryID)">
+                            {{ instance.primaryID }}
+                        </nuxt-link>
+                    </td>
                     <td
-                        :class="['MaintenanceType', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
-                        ...</td>
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        <nuxt-link to="/maintenanceVisits" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenMVI(instance.primaryID)">
+                            {{ instance.name }}
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                        ...</td>
+                        {{ instance.state }}</td>
                     <td
                         :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
-                        ...</td>
+                        {{ instance.creationDate }}</td>
                     <td
                         :class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
-                        ...</td>
-                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        {{ instance.completionDate }}</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ instance.user }}</td>
                 </tr>
             </tbody>
         </table>
     </div>
 </template>
 
-
 <script setup>
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
+const chosenMVTId = computed(() => store.state.chosenMVTId);
+const searchable = computed(() => store.state.searchable);
+const filtered = computed(() => store.state.filtered);
+const notAllInstancesIcon = computed(() => store.state.notAllInstancesIcon);
+const filteredUserTerm = computed(() => store.state.filteredUserTerm);
+const userSearchFilter = ref('');
+const nameSearchFilter = ref('');
+const maintenanceVisitInstances = ref([]);
+
 const darkMode = ref('');
+const mvt = ref({});
+const MVIByUser = ref([]);
+const MVIByName = ref([]);
+
+const goToChosenMVI = (id) => {
+    store.commit('setChosenMIT', id);
+    store.commit('changeToInstance');
+};
+
+//get all maintenance visit instances
+const getMaintenanceVisitInstances = async () => {
+    if (notAllInstancesIcon.value) {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVIByMVT/${mvt.value.checklistID}`);
+            maintenanceVisitInstances.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitInstances`);
+            maintenanceVisitInstances.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// update search term
+const updateSearchTerm = async () => {
+    nameSearchFilter.value = '';
+    await getMaintenanceVisitInstances();
+}
+
+// update filter term
+const updateFilterTerm = async () => {
+    if (filteredUserTerm.value) {
+        store.commit('activateFiltered');
+        userSearchFilter.value = getItem('logged-in-user-username');
+    } else {
+        userSearchFilter.value = '';
+    }
+    await getMaintenanceVisitInstances();
+    if (filteredUserTerm.value) {
+        await filterInstancesByUser();
+    }
+}
+
+// get maintenance visit template from id
+const getMVTById = async () => {
+    if (notAllInstancesIcon.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 getMaintenanceVisitInstances();
+}
+
+//get all instances based on the searched state
+const filterMVIByName = async () => {
+    if (nameSearchFilter.value === '') {
+        await getMaintenanceVisitInstances();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVIByName/${nameSearchFilter.value}`);
+            MVIByName.value = response.data;
+            maintenanceVisitInstances.value = filterObjectsWithMatchingIds(maintenanceVisitInstances.value, MVIByName.value);
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all instances based on the searched user
+const filterInstancesByUser = async () => {
+    if (userSearchFilter.value === '') {
+        await getMaintenanceVisitInstances();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVIByUser/${userSearchFilter.value}`);
+            MVIByUser.value = response.data;
+            maintenanceVisitInstances.value = filterObjectsWithMatchingIds(maintenanceVisitInstances.value, MVIByUser.value);
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+const filterObjectsWithMatchingIds = (arr1, arr2) => {
+    return arr1.filter(obj1 => {
+        return arr2.some(obj2 => obj2.primaryID === obj1.primaryID);
+    });
+};
 
 const getSession = async () => {
     const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -64,6 +193,11 @@ const getSession = async () => {
     }
 }
 
+const getAll = async () => {
+    store.commit('resetFilterSearch');
+    await getMaintenanceVisitInstances();
+}
+
 function getItem(item) {
     if (process.client) {
         return localStorage.getItem(item)
@@ -73,9 +207,13 @@ function getItem(item) {
 }
 
 watch(modeChanged, getSession)
+watch(searchable, updateSearchTerm);
+watch(filtered, updateFilterTerm);
+watch(notAllInstancesIcon, getAll);
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getMVTById();
 });
 </script>
 
@@ -162,6 +300,28 @@ td {
     color: #000;
 }
 
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.mvi-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 {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
@@ -178,15 +338,15 @@ th {
     border-right: 0.0625rem solid #8e8e8e;
 }
 
-.MaintenanceType {
+.Name {
     width: 15%;
 }
 
-.MaintenanceType-darkmode {
+.Name-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
-.MaintenanceType-lightmode {
+.Name-lightmode {
     border-right: 0.0625rem solid #8e8e8e;
 }
 
@@ -249,4 +409,50 @@ th {
 .label-lightmode {
     color: #000;
 }
+
+.input {
+    border: none;
+}
+
+#nuxt-link {
+    text-decoration: none;
+}
+
+.nuxt-link-darkmode {
+    color: white;
+}
+
+.nuxt-link-lightmode {
+    color: #000;
+}
+
+.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;
+}
+
+.instanceLabel {
+    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;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
 </style>

components/server/ProductionOrdersInstance.vue

@@ -1,16 +1,19 @@
 <template>
-    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['production-orders-instance-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Instance ID</h2>
+    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 v-if="!editable" :class="['production-orders-instance-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
+        poi.name }}</h2>
+        <input v-if="editable" v-model="poi.name" @change="updatePOI()"
+            :class="['data', 'poi-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
         <div class="production-orders-instance-data">
             <div class="instanceInfo">
                 <div class="data-field" id="info">
                     <div class="templateId-customer" id="templateID">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template ID:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ poi.templateID }}</pre>
                     </div>
                     <div class="templateId-customer" id="customer">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ poi.customer }}</pre>
                     </div>
                 </div>
             </div>
@@ -19,14 +22,132 @@
             <div class="additional">
                 <div class="templateDescription">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template description:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
-                        id="templateDescription">...</pre>
+                    <input v-model="poi.templateDescription" :readonly="!editable" @change="updatePOI()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="templateDescription">
                 </div>
             </div>
             <div class="additional">
                 <div class="templateNotes">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template notes:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateNotes">...</pre>
+                    <input v-model="poi.templateNotes" :readonly="!editable" @change="updatePOI()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateNotes">
+                </div>
+            </div>
+        </div>
+        <div class="production-orders-instance-data">
+            <div class="instanceInfo">
+                <div class="data-field-four" id="infoFour">
+                    <div class="ticketNo-asset-state-user" id="ticketNo">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Ticket No.:</pre>
+                        <pre
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ poi.ticketNumber }}</pre>
+                    </div>
+                    <div class="ticketNo-asset-state-user" id="asset">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ poi.asset }}</pre>
+                        <select v-if="editable" id="assetsDropDownChosenCI" v-model="poi.asset" @change="updatePOI()"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="asset in assets" :key="asset.primaryID">
+                                {{ asset.assetName }}
+                            </option>
+                        </select>
+                    </div>
+                    <div class="ticketNo-asset-state-user" id="state">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ poi.state }}</pre>
+                        <input v-if="editable" v-model="poi.state" @change="updatePOI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="ticketNo-asset-state-user" id="user">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ poi.user }}</pre>
+                        <select v-if="editable" id="assetsDropDownChosenCI" v-model="poi.user" @change="updatePOI()"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="user in userList" :key="user.id">
+                                {{ user.username }}
+                            </option>
+                        </select>
+                    </div>
+                </div>
+                <div class="data-field" id="info">
+                    <div class="creationDate-completionDate-timeSpent" id="creationDate">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Creation date:</pre>
+                        <pre
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ poi.creationDate }}</pre>
+                    </div>
+                    <div class="creationDate-completionDate-timeSpent" id="completionDate">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Completion date:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ poi.completionDate }}</pre>
+                        <input v-if="editable" v-model="poi.completionDate" @change="updatePOI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="creationDate-completionDate-timeSpent" id="timeSpent">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Time spent:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ poi.timeSpent }}</pre>
+                        <input v-if="editable" v-model="poi.timeSpent" @change="updatePOI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="production-orders-instance-data">
+            <div class="additional">
+                <div class="notes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <input v-model="poi.notes" :readonly="!editable" @change="updatePOI()"
+                        :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="updateProductionOrderInstance()"
+            :class="['data', 'poi-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
+        <div class="production-orders-instance-data">
+            <div class="instanceInfo">
+                <div class="data-field" id="info">
+                    <div class="templateId-customer" id="templateID">
+                        <pre v-if="potSelected"
+                            :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template ID:</pre>
+                        <pre v-if="!potSelected"
+                            :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name:</pre>
+                        <pre v-if="potSelected"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ chosenPOTId }}</pre>
+                        <select v-if="!potSelected" id="assetsDropDownChosenCI" v-model="chosenTemplate"
+                            @change="updateProductionOrderInstance(chosenTemplate)"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="template in productionOrderTemplates" :key="template.templateID">
+                                {{ template.name }}
+                            </option>
+                        </select>
+                    </div>
+                    <div class="templateId-customer" id="customer">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ poi.customer }}</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="production-orders-instance-data">
+            <div class="additional">
+                <div class="templateDescription">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template description:</h3>
+                    <input v-model="newTemplateDescription" @change="updateProductionOrderInstance()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="templateDescription">
+                </div>
+            </div>
+            <div class="additional">
+                <div class="templateNotes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template notes:</h3>
+                    <input v-model="newTemplateNotes" @change="updateProductionOrderInstance()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateNotes">
                 </div>
             </div>
         </div>
@@ -39,15 +160,26 @@
                     </div>
                     <div class="ticketNo-asset-state-user" id="asset">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <select id="assetsDropDownChosenCI" v-model="newAsset" @change="updateProductionOrderInstance()"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="asset in assets" :key="asset.primaryID">
+                                {{ asset.assetName }}
+                            </option>
+                        </select>
                     </div>
                     <div class="ticketNo-asset-state-user" id="state">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <input v-model="newState" @change="updateProductionOrderInstance()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                     <div class="ticketNo-asset-state-user" id="user">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <select id="assetsDropDownChosenCI" v-model="newUser" @change="updateProductionOrderInstance()"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="user in userList" :key="user.id">
+                                {{ user.username }}
+                            </option>
+                        </select>
                     </div>
                 </div>
                 <div class="data-field" id="info">
@@ -70,7 +202,8 @@
             <div class="additional">
                 <div class="notes">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+                    <input v-model="newNotes" @change="updateProductionOrderInstance()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
                 </div>
             </div>
         </div>
@@ -82,11 +215,261 @@
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
+const editable = computed(() => store.state.editable);
+const chosenPOIId = computed(() => store.state.chosenPOIId);
+const chosenPOTId = computed(() => store.state.chosenPOTId);
+const deleteBool = computed(() => store.state.deleteBool);
+const addBool = computed(() => store.state.new);
+
 const darkMode = ref('');
+const potSelected = ref('');
+
+const poi = ref({});
+const pot = ref({});
+const customers = ref([]);
+const assets = ref([]);
+
+const newName = ref('');
+const newTemplateID = ref('');
+const chosenTemplate = ref('');
+const newCustomerID = ref('');
+const newCustomer = ref('');
+const newUser = ref('');
+const newState = ref('');
+const newNotes = ref('');
+const newTemplateDescription = ref('');
+const newTemplateNotes = ref('');
+const newAsset = ref('');
+const newCreationDate = ref('');
+const newCompletionDate = ref('');
+const newTimeSpent = ref('');
+const productionOrderInstances = ref([]);
+const productionOrderTemplates = ref([]);
+const userList = 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);
+    }
+}
+
+//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);
+    }
+}
+
+// get production order template from id
+const getPOTById = async () => {
+    if (chosenPOTId.value == '-1') {
+        potSelected.value = false;
+        await getProductionOrderTemplates();
+    } else {
+        potSelected.value = true;
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
+            );
+            pot.value = response.data;
+            poi.value.customer = pot.value.customer;
+            poi.value.customerID = pot.value.customerID;
+            newCustomer.value = pot.value.customer;
+            newCustomerID.value = pot.value.customerID;
+            await getConfigItemsFromCustomer();
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    await getProductionOrderInstances();
+}
+
+// get production order template from id
+const getChosenPOTById = async (newPotId) => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${newPotId}`
+        );
+        pot.value = response.data;
+        poi.value.customer = pot.value.customer;
+        poi.value.customerID = pot.value.customerID;
+        newCustomer.value = pot.value.customer;
+        newCustomerID.value = pot.value.customerID;
+        await getConfigItemsFromCustomer();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+const confirmDeletePOI = async () => {
+    if (deleteBool.value === true) {
+        if (confirm("Do you really want to delete this production order instance? It cannot be undone!")) {
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteProductionOrderInstance/${chosenPOIId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteTodosPOI/${chosenPOIId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            store.commit('undoDelete');
+            store.commit('resetStore');
+            store.commit('deactivateSearch');
+            store.commit('changeToInstancelist');
+            store.commit('seeAllIcon');
+        } else {
+            store.commit('undoDelete');
+        }
+    }
+}
+
+//get all users
+const getUsers = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllEmployees`);
+        userList.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//update data
+const updatePOI = async () => {
+    if (poi.value.name.trim() === "") {
+        alert("Please add a production order instance name!");
+        return;
+    } else {
+        var counter = 0;
+        // check if production order instance name already exists
+        productionOrderInstances.value.forEach(p => {
+            if (p.name === poi.value.name) {
+                counter += 1;
+            }
+        });
+        if (counter == 2) {
+            alert("This production order instance name already exists. Please choose an unique production order instance name or modify respectively delete the old one!");
+            poi.value.name = '';
+            return;
+        }
+        try {
+            await Axios.put(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateProductionOrderInstance`,
+                {
+                    ticketNumber: poi.value.ticketNumber,
+                    name: poi.value.name,
+                    templateID: poi.value.templateID,
+                    customerID: poi.value.customerID,
+                    customer: poi.value.customer,
+                    asset: poi.value.asset,
+                    state: poi.value.state,
+                    creationDate: poi.value.creationDate,
+                    completionDate: poi.value.completionDate,
+                    user: poi.value.user,
+                    templateDescription: poi.value.templateDescription,
+                    templateNotes: poi.value.templateNotes,
+                    timeSpent: poi.value.timeSpent,
+                    notes: poi.value.notes,
+                }
+            )
+            await getPOIById();
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all productionOrder instances
+const getProductionOrderInstances = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderInstances`);
+        productionOrderInstances.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// update production order instance fields in the store
+const updateProductionOrderInstance = async (newPotId = -1) => {
+    let productionOrderInstance = {};
+    if (potSelected.value) {
+        productionOrderInstance = {
+            name: newName.value,
+            templateID: chosenPOTId.value,
+            customerID: newCustomerID.value,
+            customer: newCustomer.value,
+            asset: newAsset.value,
+            state: newState.value,
+            creationDate: newCreationDate.value,
+            completionDate: newCompletionDate.value,
+            user: newUser.value,
+            templateDescription: newTemplateDescription.value,
+            templateNotes: newTemplateNotes.value,
+            timeSpent: newTimeSpent.value,
+            notes: newNotes.value,
+        };
+    } else {
+        if (!(newPotId == '-1')) {
+            // Find the object with the selected Name
+            const selectedObject = productionOrderTemplates.value.find(obj => obj.name === newPotId);
+            // Get the templateID
+            newTemplateID.value = selectedObject ? selectedObject.templateID : null;
+            await getChosenPOTById(newTemplateID.value);
+        }
+        productionOrderInstance = {
+            name: newName.value,
+            templateID: newTemplateID.value,
+            customerID: newCustomerID.value,
+            customer: newCustomer.value,
+            asset: newAsset.value,
+            state: newState.value,
+            creationDate: newCreationDate.value,
+            completionDate: newCompletionDate.value,
+            user: newUser.value,
+            templateDescription: newTemplateDescription.value,
+            templateNotes: newTemplateNotes.value,
+            timeSpent: newTimeSpent.value,
+            notes: newNotes.value,
+        };
+    }
+    store.commit('updateProductionOrderInstanceComponent', productionOrderInstance);
+}
+
+// get production order instance from id
+const getPOIById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderInstance/${chosenPOIId.value}`
+            );
+            poi.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
 
 const getSession = async () => {
     const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -97,6 +480,25 @@ const getSession = async () => {
     }
 }
 
+//get all config items from the selected customer
+const getConfigItemsFromCustomer = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromCustomer/${poi.value.customerID}`);
+            assets.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else if (!(newCustomerID.value == '')) {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromCustomer/${newCustomerID.value}`);
+            assets.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
 function getItem(item) {
     if (process.client) {
         return localStorage.getItem(item)
@@ -105,10 +507,16 @@ function getItem(item) {
     }
 }
 
-watch(modeChanged, getSession)
+watch(modeChanged, getSession);
+watch(deleteBool, confirmDeletePOI);
+watch(editable, getConfigItemsFromCustomer);
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getPOIById();
+    await getPOTById();
+    triggerBackendCallsWithDelay(getCustomers);
+    triggerBackendCallsWithDelay(getUsers);
 });
 </script>
 
@@ -131,6 +539,17 @@ export default {
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
 }
 
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
 .section-darkmode {
     background-color: #2c2c2c;
 }
@@ -139,7 +558,13 @@ export default {
     background-color: #fff;
 }
 
+.h2-input-darkmode {
+    background-color: #212121;
+}
 
+.h2-input-lightmode {
+    background-color: #EBEBEB;
+}
 
 .production-orders-instance-name {
     align-self: stretch;
@@ -158,6 +583,16 @@ export default {
     color: #000;
 }
 
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
 .data-field {
     display: flex;
     flex-direction: row;
@@ -216,17 +651,6 @@ export default {
     color: #000;
 }
 
-.data {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    padding: 0 0.625rem;
-    border-radius: 0.3125rem;
-    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
-    letter-spacing: 5%;
-    font: 400 0.75rem/250% Overpass, sans-serif;
-}
-
 .data-darkmode {
     background-color: #212121;
     color: #fff;
@@ -268,6 +692,28 @@ export default {
     border-radius: 0.3125rem;
 }
 
+.h2-darkmode {
+    color: #fff;
+}
+
+.h2-lightmode {
+    color: #000;
+}
+
+.input {
+    border: none;
+}
+
+.poi-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;
+}
+
 .additional {
     display: flex;
     flex-direction: column;
@@ -280,7 +726,7 @@ export default {
 }
 
 div#customer {
-    padding-left: 2.9em;
+    padding-left: 4.4em;
 }
 
 .area-title {
@@ -314,4 +760,20 @@ div#customer {
     padding: 0.625rem 1.875rem 0.625rem 1.25rem;
     padding-top: 0rem;
 }
+
+.select-lightmode {
+    border: none;
+    color: black;
+    background: #EBEBEB;
+    padding: 0.4rem;
+    border-radius: 0.3125rem;
+}
+
+.select-darkmode {
+    border: none;
+    color: white;
+    background: #212121;
+    padding: 0.4rem;
+    border-radius: 0.3125rem;
+}
 </style>

components/server/ProductionOrdersInstanceTable.vue

@@ -1,15 +1,25 @@
 <template>
+    <section v-if="searchable" :class="['poi-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Name</div>
+        <input v-model="nameSearchFilter" @change="filterPOIByName()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
+    <section v-if="filtered" :class="['poi-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">User</div>
+        <input v-model="userSearchFilter" @change="filterInstancesByUser()"
+            :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']">Instances:</div>
         <table class="data-table" name="production-orders-instance-table">
             <tbody>
                 <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                    <th
-                        :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                        ID</th>
                     <th
                         :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
                         Ticket No.</th>
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
                     <th
                         :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
                         Asset</th>
@@ -24,26 +34,42 @@
                         Completion date</th>
                     <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
                 </tr>
-                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                    <td
-                        :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                        ...</td>
+                <tr v-for="instance in productionOrderInstances" :key="instance.ticketNumber"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
-                        ...</td>
+                        <nuxt-link to="/productionOrders" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenPOI(instance.ticketNumber)">
+                            {{ instance.ticketNumber }}
+                        </nuxt-link>
+                    </td>
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        <nuxt-link to="/productionOrders" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenPOI(instance.ticketNumber)">
+                            {{ instance.name }}
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                        ...</td>
+                        <nuxt-link to="/assets" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenAsset(instance.asset)">
+                            {{ instance.asset }}
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                        ...</td>
+                        {{ instance.state }}</td>
                     <td
                         :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
-                        ...</td>
+                        {{ instance.creationDate }}</td>
                     <td
                         :class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
-                        ...</td>
-                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        {{ instance.completionDate }}</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ instance.user }}</td>
                 </tr>
             </tbody>
         </table>
@@ -55,11 +81,136 @@
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
+const chosenPOTId = computed(() => store.state.chosenPOTId);
+const searchable = computed(() => store.state.searchable);
+const filtered = computed(() => store.state.filtered);
+const notAllInstancesIcon = computed(() => store.state.notAllInstancesIcon);
+const filteredUserTerm = computed(() => store.state.filteredUserTerm);
+const userSearchFilter = ref('');
+const nameSearchFilter = ref('');
+const productionOrderInstances = ref([]);
+
 const darkMode = ref('');
+const pot = ref({});
+const POIByUser = ref([]);
+const POIByName = ref([]);
+
+const goToChosenPOI = (id) => {
+    store.commit('setChosenPOI', id);
+    store.commit('changeToInstance');
+};
+
+//get all production order instances
+const getProductionOrderInstances = async () => {
+    if (notAllInstancesIcon.value) {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOIsByPOT/${pot.value.templateID}`);
+            productionOrderInstances.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderInstances`);
+            productionOrderInstances.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// update search term
+const updateSearchTerm = async () => {
+    nameSearchFilter.value = '';
+    await getProductionOrderInstances();
+}
+
+// update filter term
+const updateFilterTerm = async () => {
+    if (filteredUserTerm.value) {
+        store.commit('activateFiltered');
+        userSearchFilter.value = getItem('logged-in-user-username');
+    } else {
+        userSearchFilter.value = '';
+    }
+    await getProductionOrderInstances();
+    if (filteredUserTerm.value) {
+        await filterInstancesByUser();
+    }
+}
+
+// get production order template from id
+const getPOTById = async () => {
+    if (notAllInstancesIcon.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 getProductionOrderInstances();
+}
+
+const goToChosenAsset = async (name) => {
+    let ci = {}
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedConfigItemsByAsset/${name}`
+        );
+        ci = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+    store.commit('setChosenAsset', ci[0].primaryID);
+    setTimeout(() => {
+    }, 1000);
+    store.commit('changeToAsset');
+};
+
+//get all instances based on the searched state
+const filterPOIByName = async () => {
+    if (nameSearchFilter.value === '') {
+        await getProductionOrderInstances();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOIsByName/${nameSearchFilter.value}`);
+            POIByName.value = response.data;
+            productionOrderInstances.value = filterObjectsWithMatchingIds(productionOrderInstances.value, POIByName.value);
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all instances based on the searched user
+const filterInstancesByUser = async () => {
+    if (userSearchFilter.value === '') {
+        await getProductionOrderInstances();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOIsByUser/${userSearchFilter.value}`);
+            POIByUser.value = response.data;
+            productionOrderInstances.value = filterObjectsWithMatchingIds(productionOrderInstances.value, POIByUser.value);
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+const filterObjectsWithMatchingIds = (arr1, arr2) => {
+    return arr1.filter(obj1 => {
+        return arr2.some(obj2 => obj2.ticketNumber === obj1.ticketNumber);
+    });
+};
 
 const getSession = async () => {
     const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -70,6 +221,11 @@ const getSession = async () => {
     }
 }
 
+const getAll = async () => {
+    store.commit('resetFilterSearch');
+    await getProductionOrderInstances();
+}
+
 function getItem(item) {
     if (process.client) {
         return localStorage.getItem(item)
@@ -79,9 +235,13 @@ function getItem(item) {
 }
 
 watch(modeChanged, getSession)
+watch(searchable, updateSearchTerm);
+watch(filtered, updateFilterTerm);
+watch(notAllInstancesIcon, getAll);
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getPOTById();
 });
 </script>
 
@@ -171,20 +331,8 @@ th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-.ID {
-    width: 15.83%;
-}
-
-.ID-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.ID-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
 .TicketNo {
-    width: 15.83%;
+    width: 12.83%;
 }
 
 .TicketNo-darkmode {
@@ -195,6 +343,17 @@ th {
     border-right: 0.0625rem solid #8e8e8e;
 }
 
+.Name {
+    width: 18.83%;
+}
+
+.Name-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
 
 .Asset {
     width: 15.83%;
@@ -266,4 +425,73 @@ th {
 .label-lightmode {
     color: #000;
 }
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.poi-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;
+}
+
+
+.input {
+    border: none;
+}
+
+#nuxt-link {
+    text-decoration: none;
+}
+
+.nuxt-link-darkmode {
+    color: white;
+}
+
+.nuxt-link-lightmode {
+    color: #000;
+}
+
+.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;
+}
+
+.instanceLabel {
+    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;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
 </style>

components/server/ProductionOrdersTemplate.vue

@@ -429,14 +429,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;
@@ -453,14 +445,6 @@ export default {
     border-radius: 0.3125rem;
 }
 
-.select-lightmode {
-    border: none;
-    color: black;
-    background: #EBEBEB;
-    padding: 0.4rem;
-    border-radius: 0.3125rem;
-}
-
 .customer-ID,
 .user {
     display: flex;

components/server/TemplateChecklist.vue

@@ -17,7 +17,7 @@
                     <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
                 </tr>
                 <tr v-for="todo in potTodos" :key="todo.primaryID"
-                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
                         {{ todo.rowID }}
@@ -42,17 +42,15 @@
                         <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']"
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                        <textarea type="text" v-model="todo.comments" :readonly="!editable"
+                            @change="updatePOTTodo(todo)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>                    
+                        <button v-if="editable" :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']"
+                <tr v-if="editable && addRow" :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
                     id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
@@ -72,10 +70,10 @@
                         <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 ? 'savePOTTodos-darkmode' : 'savePOTTodos-lightmode']"
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                        <textarea type="text" v-model="newCommentsTodo"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
+                        <button :class="[darkMode ? 'savePOTTodos-darkmode' : 'savePOTTodos-lightmode']"
                             @click="addPOTTodo()">Save</button> <button
                             :class="[darkMode ? 'deleteLastPOTTodos-darkmode' : 'deleteLastPOTTodos-lightmode']"
                             @click="deleteNewRow()">-</button>
@@ -106,7 +104,7 @@
                     <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">
+                    :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
                         {{ newT.rowID }}
@@ -125,10 +123,10 @@
                         <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"
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <textarea type="text"
                             v-model="newT.comments"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
-                            :class="[darkMode ? 'deleteLastPOTTodos-darkmode' : 'deleteLastPOTTodos-lightmode']"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
+                        <button :class="[darkMode ? 'deletePOTTodos-darkmode' : 'deletePOTTodos-lightmode']"
                             @click="deletePOTTodoFromNewTodos(index)">-</button>
                     </td>
                 </tr>
@@ -436,6 +434,43 @@ function getItem(item) {
     }
 }
 
+// const inputValue = ref('');
+// const widthMachine = computed(() => inputValue.value);
+
+// function handleInput(event) {
+//     inputValue.value = event.target.value;
+// }
+
+// // Textarea height handling
+// const textareaValue = ref('');
+// const textareaHeight = computed(() => calcHeight(textareaValue.value));
+
+// function handleTextareaInput(event) {
+//     textareaValue.value = event.target.value;
+// }
+
+// function calcHeight(value) {
+//     const numberOfLineBreaks = (value.match(/\n/g) || []).length;
+//     // min-height + lines x line-height + padding + border
+//     const newHeight = 20 + numberOfLineBreaks * 20 + 12 + 2;
+//     return newHeight;
+// }
+
+// const spanElement = ref(null);
+// const computedHeight = ref('auto'); // Default height is 'auto'
+
+// // Compute the height of the span element
+// const computeSpanHeight = () => {
+//     if (spanElement.value) {
+//         computedHeight.value = spanElement.value.offsetHeight + 'px';
+//     }
+// };
+
+// // Watch for changes in the content of the span element
+// watch(() => textareaValue.value, () => {
+//     computeSpanHeight();
+// });
+
 watch(customerChanged, getPOTById);
 watch(modeChanged, getSession)
 
@@ -466,6 +501,17 @@ export default {
     font: 400 0.75rem/250% Overpass, sans-serif;
 }
 
+/* .data-span {
+    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;
 }
@@ -520,6 +566,14 @@ export default {
     gap: 0.625rem;
 }
 
+.table-row-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
 .tr-head-darkmode {
     border-top: none;
     border-bottom: 0.0625rem solid #000000;
@@ -547,6 +601,10 @@ td {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+td {
+    height: 5rem;
+}
+
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
@@ -648,9 +706,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 10rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .saveNewPOT-darkmode {
@@ -670,9 +730,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 15.8rem;
+    margin-left: 6rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .deleteLastPOTTodos-darkmode {
@@ -681,9 +743,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 15.8rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 
@@ -704,9 +768,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 10rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .deletePOTTodos-lightmode {
@@ -715,9 +781,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 15.8rem;
+    margin-left: 6rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .deleteLastPOTTodos-lightmode {
@@ -726,9 +794,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 2rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .saveNewPOT-lightmode {
@@ -769,4 +839,10 @@ th {
 #editPOTTodos {
     text-align: right;
 }
+
+textarea {
+    resize: none;
+    width: 20rem;
+    height: 5rem;
+}
 </style>

components/server/TemplateChecklistMVT.vue

@@ -17,7 +17,7 @@
                     <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">
+                    :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
                         {{ todo.rowID }}
@@ -42,17 +42,15 @@
                         <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
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                        <textarea type="text" v-model="todo.commets" :readonly="!editable" @change="updateMVTTodo(todo)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
+                        <button v-if="editable"
                             :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']"
+                <tr v-if="editable && addRow" :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
                     id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
@@ -72,10 +70,10 @@
                         <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']"
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                        <textarea type="text" v-model="newCommentsTodo"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
+                        <button :class="[darkMode ? 'saveMvtTodos-darkmode' : 'saveMvtTodos-lightmode']"
                             @click="addMVTTodo()">Save</button> <button
                             :class="[darkMode ? 'deleteLastMvtTodos-darkmode' : 'deleteLastMvtTodos-lightmode']"
                             @click="deleteNewRow()">-</button>
@@ -106,7 +104,7 @@
                     <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">
+                    :class="['table-row-data', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
                         {{ newT.rowID }}
@@ -125,10 +123,10 @@
                         <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']"
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                        <textarea type="text" v-model="newT.comments"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> </textarea>
+                        <button :class="[darkMode ? 'deleteMvtTodos-darkmode' : 'deleteMvtTodos-lightmode']"
                             @click="deleteMVTTodoFromNewTodos(index)">-</button>
                     </td>
                 </tr>
@@ -522,6 +520,14 @@ export default {
     gap: 0.625rem;
 }
 
+.table-row-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
 .tr-head-darkmode {
     border-top: none;
     border-bottom: 0.0625rem solid #000000;
@@ -549,6 +555,10 @@ td {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+td {
+    height: 5rem;
+}
+
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
@@ -651,9 +661,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 10rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .saveNewMVT-darkmode {
@@ -673,9 +685,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 15.8rem;
+    margin-left: 6rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .deleteLastMvtTodos-darkmode {
@@ -684,9 +698,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 2rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 
@@ -707,9 +723,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 10rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .deleteMvtTodos-lightmode {
@@ -718,9 +736,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 15.8rem;
+    margin-left: 6rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .deleteLastMvtTodos-lightmode {
@@ -729,9 +749,11 @@ th {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
     border: none;
     border-radius: 0.625rem;
-    margin-left: 2rem;
+    margin-left: 1rem;
     padding-left: 0.9rem;
     padding-right: 0.9rem;
+    height: 2.1rem;
+    margin-top: 1.5rem;
 }
 
 .saveNewMVT-lightmode {
@@ -772,4 +794,10 @@ th {
 #editMvtTodos {
     text-align: right;
 }
+
+textarea {
+    resize: none;
+    width: 20rem;
+    height: 5rem;
+}
 </style>

components/server/UserAccount.vue

@@ -54,7 +54,7 @@ import clientsideConfig from '../../clientsideConfig.js';
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
-const editable = computed(() => store.state.editable);
+const editable = computed(() => store.state.editableUser);
 const changePasswordBool = ref(false);
 
 const loggedInUserId = ref('');

components/server/UserProfile.vue

@@ -81,7 +81,7 @@ import clientsideConfig from '../../clientsideConfig.js';
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
-const editable = computed(() => store.state.editable);
+const editable = computed(() => store.state.editableUser);
 const loggedInUserId = ref('');
 const loggedInUserUsername = ref('');
 const loggedInUserRegistered = ref('');

components/server/UserRightsList.vue

@@ -1,215 +0,0 @@
-<!-- <template>
-    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
-        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Rights:</div>
-        <table class="data-table" id="user-rights-list">
-            <tbody>
-                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                    <th
-                        :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']">
-                        User</th>
-                    <th
-                        :class="['Admin', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']">
-                        Admin</th>
-                    <th
-                        :class="['Edit-Delete', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']">
-                        Edit/Delete</th>
-                    <th
-                        :class="['Create', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
-                        Create</th>
-                    <th :class="['View', darkMode ? 'th-darkmode' : 'th-lightmode']">View</th>
-                </tr>
-                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                    <td
-                        :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']">
-                        ...</td>
-                    <td
-                        :class="['Admin', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']">
-                        <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
-                    </td>
-                    <td
-                        :class="['Edit-Delete', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']">
-                        <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
-                    </td>
-                    <td
-                        :class="['Create', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
-                        <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
-                    </td>
-                    <td :class="['View', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
-                            :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</template>
-  
-<script setup>
-import { ref } from 'vue';
-
-const darkMode = ref(true)
-</script>
-
-<script>
-export default {
-    name: "UserRightsList",
-};
-</script>  
-        
-<style scoped>
-.data {
-    display: flex;
-    flex-direction: column;
-    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);
-}
-
-.div-darkmode {
-    background-color: #2c2c2c;
-}
-
-.div-lightmode {
-    background-color: #fff;
-}
-
-.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;
-}
-
-.checkbox-darkmode {
-    filter: invert(100%);
-}
-
-
-.checkbox-lightmode {
-    filter: invert(0%);
-}
-
-.User {
-    width: 50%;
-}
-
-.User-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.User-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.Admin {
-    width: 12.5%;
-}
-
-.Admin-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.Admin-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.Edit-Delete {
-    width: 12.5%;
-}
-
-.Edit-Delete-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.Edit-Delete-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.Create {
-    width: 12.5%;
-}
-
-.Create-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.Create-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.View {
-    width: 12.5%;
-}
-
-.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;
-}
-</style> -->

layouts/Actionbar.vue

@@ -30,7 +30,7 @@
         </Transition>
       </button>
       <button v-if="instancesIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
-        id="instances">
+        id="instances" @click="changeToInstancelist">
         <div class="icon" id="instances-icon">
           <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Instances-Icon.svg" />
@@ -95,7 +95,8 @@
         </Transition>
       </button>
       <button v-if="addInstanceIcon && !loggedInUserReaderBool"
-        :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-instance">
+        :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-instance"
+        @click="addInstance">
         <div class="icon" id="new-icon">
           <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Add-New-Icon.svg" />
@@ -119,6 +120,17 @@
           </Transition>
         </button>
       </router-link>
+      <button v-if="notAllInstancesIcon && !addIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
+        id="allInstances" @click="changeToAllInstances">
+        <div class="icon" id="instances-icon">
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Instances-Icon.svg" />
+        </div>
+        <Transition name="fade">
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">See all</pre>
+        </Transition>
+      </button>
       <button v-if="editIcon && !loggedInUserReaderBool"
         :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="edit"
         @click="toggleEditable">
@@ -131,6 +143,17 @@
             :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
         </Transition>
       </button>
+      <button v-if="editUserIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
+        id="editUser" @click="toggleEditableUser">
+        <div class="icon" id="edit-icon">
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Edit-Icon.svg" />
+        </div>
+        <Transition name="fade">
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
+        </Transition>
+      </button>
       <button v-if="deleteIcon && !loggedInUserReaderBool"
         :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteFunc">
         <div class="icon" id="delete-icon">
@@ -163,7 +186,9 @@ const attachmentsIcon = computed(() => store.state.attachmentsIcon);
 const sellIcon = computed(() => store.state.sellIcon);
 const archiveIcon = computed(() => store.state.archiveIcon);
 const editIcon = computed(() => store.state.editIcon);
+const editUserIcon = computed(() => store.state.editUserIcon);
 const deleteIcon = computed(() => store.state.deleteIcon);
+const notAllInstancesIcon = computed(() => store.state.notAllInstancesIcon);
 
 const loggedInUserDarkModeBoolean = ref('');
 const isExpanded = ref(true);
@@ -175,6 +200,9 @@ const store = useStore()
 const toggleEditable = () => {
   store.commit('toggleEditable');
 };
+const toggleEditableUser = () => {
+  store.commit('toggleEditableUser');
+};
 const deleteFunc = () => {
   store.commit('doDelete');
 };
@@ -183,9 +211,11 @@ const toggleActionbar = () => {
   isExpanded.value = !isExpanded.value;
 };
 const toggleFiltered = () => {
+  store.commit('deactivateSearch');
   store.commit('toggleFiltered');
 };
 const toggleSearched = () => {
+  store.commit('deactivateSearch');
   store.commit('toggleSearchable');
 };
 const add = () => {
@@ -196,10 +226,25 @@ const addSolution = () => {
   store.commit('add');
 };
 
+const addInstance = () => {
+  store.commit('addInstance');
+};
+
 const changeToSolutions = () => {
   store.commit('changeToSolutionlistAsset');
 }
 
+const changeToInstancelist = () => {
+  store.commit('deactivateSearch');
+  store.commit('changeToInstancelist');
+}
+
+const changeToAllInstances = () => {
+  store.commit('deactivateSearch');
+  store.commit('changeToInstancelist');
+  store.commit('seeAllIcon');
+}
+
 // const changeToSettingsPage = () => {
 //   store.commit('changeToSettings');
 //   if (changeToSet.value) {

layouts/Navigationbar.vue

@@ -2,11 +2,11 @@
   <aside
     :class="['navbar', loggedInUserDarkModeBoolean ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
     <div class="toggleNavbar">
-      <div v-if="isExpanded" :class="['icon', loggedInUserDarkModeBoolean ? 'back-darkmode' : 'back-lightmode']"
+      <!-- <div v-if="isExpanded" :class="['icon', loggedInUserDarkModeBoolean ? 'back-darkmode' : 'back-lightmode']"
         id="back-icon">
         <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
           src="/icons/Back-Icon.svg" />
-      </div>
+      </div> -->
       <div :class="['icon', loggedInUserDarkModeBoolean ? 'indicator-darkmode' : 'indicator-lightmode']"
         id="indicator-icon" @click="ToggleSidebar">
         <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"

pages/maintenanceVisits.vue

@@ -51,7 +51,7 @@ import TemplateChecklistMVT from "../components/server/TemplateChecklistMVT.vue"
 import TemplateSearch from "../components/TemplateSearch.vue";
 import MaintenanceVisitsInstanceTable from "../components/server/MaintenanceVisitsInstanceTable.vue";
 import MaintenanceVisitsInstance from "../components/server/MaintenanceVisitsInstance.vue";
-import InstanceChecklist from "../components/server/InstanceChecklist.vue";
+import InstanceChecklist from "../components/server/InstanceChecklistMVI.vue";
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 

plugins/vuex.js

@@ -4,6 +4,7 @@ const store = createStore({
     state() {
         return {
             editable: false,
+            editableUser: false,
             filtered: false,
             searchable: false,
             deleteBool: false,
@@ -11,6 +12,7 @@ const store = createStore({
             customerChanged: false,
             changedCustomerId: -1,
             filteredByCustomer: '',
+            filteredUserTerm: false,
 
             addIcon: false,
             addSolutionIcon: false,
@@ -23,7 +25,9 @@ const store = createStore({
             sellIcon: false,
             archiveIcon: false,
             editIcon: false,
+            editUserIcon: false,
             deleteIcon: false,
+            notAllInstancesIcon: false,
 
             onAssetlist: true,
             onAsset: false,
@@ -76,6 +80,9 @@ const store = createStore({
             newNotesMVT: '',
             chosenMVTId: -1,
 
+            chosenMITId: -1,
+            chosenPOIId: -1,
+
             onSolutionlist: true,
             onSolution: false,
             chosenSolutionId: -1,
@@ -164,6 +171,34 @@ const store = createStore({
 
             changeToSet: false,
             updateDarkMode: false,
+
+            newNamePOI: '',
+            newTemplateIDPOI: '',
+            newCustomerIDPOI: '',
+            newCustomerPOI: '',
+            newAssetPOI: '',
+            newStatePOI: '',
+            newCreationDatePOI: '',
+            newCompletionDatePOI: '',
+            newUserPOI: '',
+            newTemplateDescriptionPOI: '',
+            newTemplateNotesPOI: '',
+            newTimeSpentPOI: '',
+            newNotesPOI: '',
+
+            newNameMVI: '',
+            newTemplateIDMVI: '',
+            newMaintenanceTypeMVI: '',
+            newStateMVI: '',
+            newCreationDateMVI: '',
+            newCompletionDateMVI: '',
+            newUserMVI: '',
+            newCustomerIDMVI: '',
+            newCustomerMVI: '',
+            newTemplateNotesMVI: '',
+            newTypeMVI: '',
+            newTimeSpentMVI: '',
+            newNotesMVI: '',
         };
     },
     mutations: {
@@ -171,6 +206,9 @@ const store = createStore({
         toggleEditable(state) {
             state.editable = !state.editable
         },
+        toggleEditableUser(state) {
+            state.editableUser = !state.editableUser
+        },
         toggleChangeToSet(state) {
             state.changeToSet = !state.changeToSet
         },
@@ -224,7 +262,9 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToCustomerAssetlist(state) {
             state.onAssetlist = false
@@ -242,7 +282,9 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToAsset(state) {
             state.onAssetlist = false
@@ -260,7 +302,9 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = true
+            state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
         changeToSolutionlistAsset(state) {
             state.onAssetlist = false
@@ -278,7 +322,9 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
 
         // functions to change the production order and maintenance visit pages
@@ -299,7 +345,9 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToCustomerTemplatelist(state) {
             state.onTemplatelist = false
@@ -318,7 +366,9 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToTemplate(state) {
             state.onTemplatelist = false
@@ -337,7 +387,9 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = true
+            state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
         changeToInstancelist(state) {
             state.onTemplatelist = false
@@ -356,11 +408,40 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = true
+        },
+        changeToInstance(state) {
+            state.onTemplatelist = false
+            state.onTemplate = false
+            state.onInstancelist = false
+            state.onInstance = true
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = false
+            state.searchIcon = false
+            state.instancesIcon = false
+            state.attachmentsIcon = true
+            state.sellIcon = false
+            state.archiveIcon = true
+            state.editIcon = true
+            state.editUserIcon = false
+            state.deleteIcon = true
+            state.notAllInstancesIcon = true
+        },
+        seeAllIcon(state) {
+            state.notAllInstancesIcon = false
+            state.chosenPOTId = -1
+            state.chosenMVTId = -1
         },
         addNewAsset(state) {
             state.newAsset = true
             state.editable = false
+            state.editableUser = false
             state.filtered = false
             state.searchable = false
             state.onAssetlist = false
@@ -384,7 +465,9 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToCustomerSolutionlist(state) {
             state.onSolutionlist = false
@@ -401,7 +484,9 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToSolution(state) {
             state.onSolutionlist = false
@@ -418,7 +503,9 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = true
+            state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
 
         // functions to change the issue slip pages
@@ -437,7 +524,9 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToCustomerIssueSliplist(state) {
             state.onIssueSliplist = false
@@ -454,7 +543,9 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToIssueSlip(state) {
             state.onIssueSliplist = false
@@ -471,7 +562,9 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = true
+            state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
 
         // functions to change the issue pages
@@ -491,7 +584,9 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToIssueItem(state) {
             state.onIssueItemList = false
@@ -509,7 +604,9 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = true
             state.editIcon = true
+            state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
         changeToIssueItemVariant(state) {
             state.onIssueItemList = false
@@ -527,7 +624,9 @@ const store = createStore({
             state.sellIcon = true
             state.archiveIcon = true
             state.editIcon = true
+            state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
 
         // functions to change the user pages
@@ -546,7 +645,9 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToEmployee(state) {
             state.onEmployeelist = false
@@ -563,7 +664,9 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = true
+            state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
 
         changeToSettings(state) {
@@ -577,8 +680,10 @@ const store = createStore({
             state.attachmentsIcon = false
             state.sellIcon = false
             state.archiveIcon = false
-            state.editIcon = true
+            state.editIcon = false
+            state.editUserIcon = true
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
 
         // functions to update the asset
@@ -701,6 +806,47 @@ const store = createStore({
             state.newPostcodeEmp = employee.postcode
         },
 
+        // function to update production order instance component
+        updateProductionOrderInstanceComponent(state, productionOrderInstance) {
+            state.newNamePOI = productionOrderInstance.name
+            state.newTemplateIDPOI = productionOrderInstance.templateID
+            state.newCustomerIDPOI = productionOrderInstance.customerID
+            state.newCustomerPOI = productionOrderInstance.customer
+            state.newAssetPOI = productionOrderInstance.asset
+            state.newStatePOI = productionOrderInstance.state
+            state.newCreationDatePOI = productionOrderInstance.creationDate
+            state.newCompletionDatePOI = productionOrderInstance.completionDate
+            state.newUserPOI = productionOrderInstance.user
+            state.newTemplateDescriptionPOI = productionOrderInstance.templateDescription
+            state.newTemplateNotesPOI = productionOrderInstance.templateNotes
+            state.newTimeSpentPOI = productionOrderInstance.timeSpent
+            state.newNotesPOI = productionOrderInstance.notes
+        },
+        updateProductionOrderInstanceTemplateID(state, id) {
+            state.newTemplateIDPOI = id
+        },
+
+        // function to update maintenance visit instance component
+        updateMaintenanceVisitInstanceComponent(state, maintenanceVisitInstance) {
+            state.newNameMVI = maintenanceVisitInstance.name
+            state.newTemplateIDMVI = maintenanceVisitInstance.templateID
+            state.newMaintenanceTypeMVI = maintenanceVisitInstance.maintenanceType
+            state.newStateMVI = maintenanceVisitInstance.state
+            state.newCreationDateMVI = maintenanceVisitInstance.creationDate
+            state.newCompletionDateMVI = maintenanceVisitInstance.completionDate
+            state.newUserMVI = maintenanceVisitInstance.user
+            state.newCustomerIDMVI = maintenanceVisitInstance.customerID
+            state.newCustomerMVI = maintenanceVisitInstance.customer
+            state.newTemplateNotesMVI = maintenanceVisitInstance.templateNotes
+            state.newTypeMVI = maintenanceVisitInstance.type
+            state.newTimeSpentMVI = maintenanceVisitInstance.timeSpent
+            state.newNotesMVI = maintenanceVisitInstance.notes
+        },
+        updateMaintenanceVisitInstanceTemplateID(state, id) {
+            state.newTemplateIDMVI = id
+        },
+
+
         setLocalStorageChanged(state) {
             state.localStorageChanged = !state.localStorageChanged
         },
@@ -737,6 +883,19 @@ const store = createStore({
         resetModeLayoutChanged(state) {
             state.modeLayout = false
         },
+        resetFilterSearch(state) {
+            state.filtered = false
+            state.searchable = false
+        },
+        activateFilteredUserTerm(state) {
+            state.filteredUserTerm = true
+        },
+        activateFiltered(state) {
+            state.filtered = true
+        },
+        deactivateSearch(state) {
+            state.filteredUserTerm = false
+        },
 
         // function to set the logged in user
         setLoggedInUser(state, user) {
@@ -782,6 +941,16 @@ const store = createStore({
             state.chosenMVTId = id
         },
 
+        // function to set the chosen maintenance visit instance
+        setChosenMIT(state, id) {
+            state.chosenMITId = id
+        },
+
+        // function to set the chosen production order instance
+        setChosenPOI(state, id) {
+            state.chosenPOIId = id
+        },
+
         // function to set the chosen solution
         setChosenSolution(state, id) {
             state.chosenSolutionId = id
@@ -810,11 +979,13 @@ const store = createStore({
         // function to reset the pages
         resetStore(state) {
             state.editable = false
+            state.editableUser = false
             state.filtered = false
             state.searchable = false
             state.deleteBool = false
             state.chosenAssetId = -1
             state.filteredByCustomer = ''
+            state.filteredUserTerm = false
             state.new = false
             state.customerChanged = false
             state.changedCustomerId = -1
@@ -863,6 +1034,10 @@ const store = createStore({
             state.newLastViewMVT = ''
             state.chosenMVTId = -1
 
+            // reset the maintenance visit and production order instance page variables
+            state.chosenMITId = -1
+            state.chosenPOIId = -1
+
             // reset the solution page variables
             state.newSolutionNameSol = ''
             state.newCustomerIDSol = ''
@@ -923,6 +1098,36 @@ const store = createStore({
             state.newAddressEmp = ''
             state.newCityEmp = ''
             state.newPostcodeEmp = ''
+
+            // reset the poi page variables
+            state.newNamePOI = ''
+            state.newTemplateIDPOI = ''
+            state.newCustomerIDPOI = ''
+            state.newCustomerPOI = ''
+            state.newAssetPOI = ''
+            state.newStatePOI = ''
+            state.newCreationDatePOI = ''
+            state.newCompletionDatePOI = ''
+            state.newUserPOI = ''
+            state.newTemplateDescriptionPOI = ''
+            state.newTemplateNotesPOI = ''
+            state.newTimeSpentPOI = ''
+            state.newNotesPOI = ''
+
+            // reset the mvi page variables
+            state.newNameMVI = ''
+            state.newTemplateIDMVI = ''
+            state.newMaintenanceTypeMVI = ''
+            state.newStateMVI = ''
+            state.newCreationDateMVI = '' 
+            state.newCompletionDateMVI = ''
+            state.newUserMVI = ''
+            state.newCustomerIDMVI = '' 
+            state.newCustomerMVI = ''
+            state.newTemplateNotesMVI = ''
+            state.newTypeMVI = ''
+            state.newTimeSpentMVI = ''
+            state.newNotesMVI = ''
         },
 
         // function to logout 
@@ -959,6 +1164,7 @@ const store = createStore({
         add(state) {
             state.new = true
             state.editable = false
+            state.editableUser = false
             state.filtered = false
             state.searchable = false
 
@@ -990,6 +1196,21 @@ const store = createStore({
             state.onEmployeelist = false
             state.onEmployee = true
         },
+
+        // function to get to the add page of instances
+        addInstance(state) {
+            state.new = true
+            state.editable = false
+            state.editableUser = false
+            state.filtered = false
+            state.searchable = false
+
+            // set the production order and maintenance visit variables
+            state.onTemplatelist = false
+            state.onTemplate = false
+            state.onInstancelist = false
+            state.onInstance = true
+        },
     },
 });
 

server/api/addMVI.ts

@@ -0,0 +1,23 @@
+import { insertId, errorMsg } from "../middleware/maintenanceVisitInstances";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return insertId
+})

server/api/addPOI.ts

@@ -0,0 +1,23 @@
+import { insertId, errorMsg } from "../middleware/productionOrders";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return insertId
+})

server/api/addTodoMVI.ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../middleware/maintenanceVisitInstances";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+})

server/api/addTodoPOI.ts

@@ -0,0 +1,22 @@
+import { errorMsg } from "../middleware/productionOrders";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+})

server/api/deleteMaintenanceVisitInstance/[id].ts

@@ -0,0 +1,23 @@
+import { errorMsg } from "../../middleware/maintenanceVisitInstances";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/deleteProductionOrderInstance/[id].ts

@@ -0,0 +1,23 @@
+import { errorMsg } from "../../middleware/productionOrders";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/deleteTodosMVI/[id].ts

@@ -0,0 +1,23 @@
+import { errorMsg } from "../../middleware/maintenanceVisitInstances";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/deleteTodosPOI/[id].ts

@@ -0,0 +1,23 @@
+import { errorMsg } from "../../middleware/productionOrders";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})

server/api/getAllMaintenanceVisitInstances.ts

@@ -0,0 +1,23 @@
+import { maintenanceVisitInstances, errorMsg } from "../middleware/maintenanceVisitInstances";
+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': 'GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return maintenanceVisitInstances
+})

server/api/getAllProductionOrderInstances.ts

@@ -0,0 +1,23 @@
+import { productionOrderInstances, errorMsg } from "../middleware/productionOrders";
+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': 'GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return productionOrderInstances
+})

server/api/getMaintenanceVisitInstance/[id].ts

@@ -0,0 +1,23 @@
+import { mvi, errorMsg } from "../../middleware/maintenanceVisitInstances";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return mvi
+})

server/api/getProductionOrderInstance/[id].ts

@@ -0,0 +1,23 @@
+import { poi, errorMsg } from "../../middleware/productionOrders";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return poi
+})

server/api/getSelectedMITsByCustomer/[id].ts

@@ -0,0 +1,23 @@
+import { selectedMITsByCustomer, errorMsg } from "../../middleware/maintenanceVisitInstances";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedMITsByCustomer
+})

server/api/getSelectedMITsByMIT/[id].ts

@@ -0,0 +1,23 @@
+import { selectedMITsByMIT, errorMsg } from "../../middleware/maintenanceVisitInstances";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedMITsByMIT
+})

server/api/getSelectedMVIByMVT/[id].ts

@@ -0,0 +1,23 @@
+import { selectedMITsByMVT, errorMsg } from "../../middleware/maintenanceVisitInstances";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedMITsByMVT
+})

server/api/getSelectedMVIByName/[id].ts

@@ -0,0 +1,23 @@
+import { selectedMITsByName, errorMsg } from "../../middleware/maintenanceVisitInstances";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedMITsByName
+})

server/api/getSelectedMVIByState/[id].ts

@@ -0,0 +1,23 @@
+import { selectedMITsByState, errorMsg } from "../../middleware/maintenanceVisitInstances";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedMITsByState
+})

server/api/getSelectedMVIByUser/[id].ts

@@ -0,0 +1,23 @@
+import { selectedMITsByUser, errorMsg } from "../../middleware/maintenanceVisitInstances";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedMITsByUser
+})

server/api/getSelectedPOIsByName/[id].ts

@@ -0,0 +1,23 @@
+import { selectedPOIsByName, errorMsg } from "../../middleware/productionOrders";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedPOIsByName
+})

server/api/getSelectedPOIsByPOI/[id].ts

@@ -0,0 +1,23 @@
+import { selectedPOIsByPOT, errorMsg } from "../../middleware/productionOrders";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedPOIsByPOT
+})

server/api/getSelectedPOIsByPOT/[id].ts

@@ -0,0 +1,23 @@
+import { selectedPOIsByPOT, errorMsg } from "../../middleware/productionOrders";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedPOIsByPOT
+})

server/api/getSelectedPOIsByState/[id].ts

@@ -0,0 +1,23 @@
+import { selectedPOIsByState, errorMsg } from "../../middleware/productionOrders";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedPOIsByState
+})

server/api/getSelectedPOIsByUser/[id].ts

@@ -0,0 +1,23 @@
+import { selectedPOIsByUser, errorMsg } from "../../middleware/productionOrders";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedPOIsByUser
+})

server/api/getTodosMaintenanceVisitInstance/[id].ts

@@ -0,0 +1,23 @@
+import { mviTodosByTemplateId, errorMsg } from "../../middleware/maintenanceVisitInstances";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return mviTodosByTemplateId
+})

server/api/getTodosProductionOrderInstance/[id].ts

@@ -0,0 +1,23 @@
+import { poiTodosByTemplateId, errorMsg } from "../../middleware/productionOrders";
+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',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return poiTodosByTemplateId
+})

server/api/updateMVITodo.ts

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

server/api/updateMaintenanceVisitInstance.ts

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

server/api/updatePOITodo.ts

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

server/api/updateProductionOrderInstance.ts

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

server/middleware/maintenanceVisitInstances.ts

@@ -0,0 +1,558 @@
+import axios, { AxiosError } from 'axios';
+import serversideConfig from '../../serversideConfig';
+import https from 'https';
+
+let maintenanceVisitInstances = [];
+let selectedMITsByMIT = [];
+let selectedMITsByMVT = [];
+let selectedMITsByState = [];
+let selectedMITsByUser = [];
+let selectedMITsByCustomer = [];
+let selectedMITsByName = [];
+let mviTodosByTemplateId = [];
+let mvi = [];
+let insertId = -1;
+let errorMsg = '';
+
+export default defineEventHandler(async (event) => {
+
+    const agent = new https.Agent({
+        rejectUnauthorized: false,
+    });
+
+    const axiosInstance = axios.create({
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: "*",
+        },
+        httpsAgent: agent
+    });
+
+    if (event.path.startsWith("/api/getAllMaintenanceVisitInstances")) {
+
+        // get all maintenance visit instances object from backend
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/maintenanceVisits`);
+            maintenanceVisitInstances = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/addMVI")) {
+        const body = await readBody(event)
+        // add the mvi in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/maintenanceVisit`, body);
+            insertId = res.data.insertId
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/addTodoMVI")) {
+        const body = await readBody(event)
+        // add the mvi todo in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/maintenanceVisitTodos`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedMITsByMIT")) {
+        // get selected maintenance visit instances object by mit from backend
+        let filteredMIT = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredMIT = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedMaintenanceVisitsByChecklistname/${filteredMIT}`);
+            selectedMITsByMIT = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedMVIByState")) {
+        // get selected maintenance visit instances object by state from backend
+        let filteredMIT = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredMIT = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedMaintenanceVisitsByState/${filteredMIT}`);
+            selectedMITsByState = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedMVIByMVT")) {
+        // get selected maintenance visit instances object by mvt from backend
+        let filteredMVT = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredMVT = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedMaintenanceVisitsByTemplate/${filteredMVT}`);
+            selectedMITsByMVT = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+
+    if (event.path.startsWith("/api/getSelectedMITsByCustomer")) {
+        // get selected maintenance visit instances object by customer from backend
+        let filteredCustomer = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredCustomer = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedMaintenanceVisitsByCustomer/${filteredCustomer}`);
+            selectedMITsByCustomer = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedMVIByUser")) {
+        // get selected maintenance visit instances object by user from backend
+        let filteredUser = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredUser = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedMaintenanceVisitsByUser/${filteredUser}`);
+            selectedMITsByUser = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedMVIByName")) {
+        // get selected maintenance visit instances object by name from backend
+        let filteredName = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredName = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedMaintenanceVisitsByChecklistname/${filteredName}`);
+            selectedMITsByName = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedMITsByState")) {
+        // get selected maintenance visit instances object by state from backend
+        let filteredState = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredState = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedMaintenanceVisitsByState/${filteredState}`);
+            selectedMITsByState = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/deleteMaintenanceVisitInstance")) {
+        let mviId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        mviId = pathSegments[pathSegments.length - 1];
+
+        // delete the mvt in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/maintenanceVisit/${mviId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getTodosMaintenanceVisitInstance")) {
+        // get maintenance visit instance todos object from backend
+        let itemId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        itemId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/maintenanceVisitTodosByTemplateId/${itemId}`);
+            mviTodosByTemplateId = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/deleteTodosMVI")) {
+        let mviId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        mviId = pathSegments[pathSegments.length - 1];
+
+        // delete the mv todos in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/maintenanceVisitTodosByTemplateID/${mviId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/updateMaintenanceVisitInstance")) {
+        const body = await readBody(event)
+        // update the maintenance visit instance in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/maintenanceVisit`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getMaintenanceVisitInstance")) {
+        // get maintenance visit instance object from backend
+        let mviId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        mviId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/maintenanceVisit/${mviId}`);
+            mvi = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/updateMVITodo")) {
+        const body = await readBody(event)
+        // update the maintenance visit instance todo in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/maintenanceVisitTodos`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/deleteMVTTodoasd")) {
+        let mviId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        mviId = pathSegments[pathSegments.length - 1];
+
+        // delete the mvt in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos/${mviId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+})
+
+export { maintenanceVisitInstances, selectedMITsByState, selectedMITsByUser, selectedMITsByName, selectedMITsByMVT, selectedMITsByMIT, selectedMITsByCustomer, mviTodosByTemplateId, mvi, insertId, errorMsg };

server/middleware/productionOrders.ts

@@ -0,0 +1,494 @@
+import axios, { AxiosError } from 'axios';
+import serversideConfig from '../../serversideConfig';
+import https from 'https';
+
+let productionOrderInstances = [];
+let selectedPOIsByPOI = [];
+let selectedPOIsByPOT = [];
+let selectedPOIsByState = [];
+let selectedPOIsByUser = [];
+let selectedPOIsByCustomer = [];
+let selectedPOIsByName = [];
+let poiTodosByTemplateId = [];
+let poi = [];
+let insertId = -1;
+let errorMsg = '';
+
+export default defineEventHandler(async (event) => {
+
+    const agent = new https.Agent({
+        rejectUnauthorized: false,
+    });
+
+    const axiosInstance = axios.create({
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: "*",
+        },
+        httpsAgent: agent
+    });
+
+    if (event.path.startsWith("/api/getAllProductionOrderInstances")) {
+
+        // get all maintenance visit instances object from backend
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/productionOrders`);
+            productionOrderInstances = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/addTodoPOI")) {
+        const body = await readBody(event)
+        // add the poi in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/productionOrderTodos`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/addPOI")) {
+        const body = await readBody(event)
+        // add the poi todo in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/productionOrder`, body);
+            insertId = res.data.insertId
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedPOIsByPOI")) {
+        // get selected production order instances object by poi from backend
+        let filteredPOI = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredPOI = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedProductionOrdersByChecklistname/${filteredPOI}`);
+            selectedPOIsByPOI = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedPOIsByState")) {
+        // get selected production order instances object by state from backend
+        let filteredPOI = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredPOI = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedProductionOrdersByState/${filteredPOI}`);
+            selectedPOIsByState = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedPOIsByPOT")) {
+        // get selected maintenance visit instances object by mvt from backend
+        let filteredMVT = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredMVT = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedProductionOrdersByTemplate/${filteredMVT}`);
+            selectedPOIsByPOT = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+
+    if (event.path.startsWith("/api/getSelectedPOIsByUser")) {
+        // get selected production order instances object by user from backend
+        let filteredUser = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredUser = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedProductionOrdersByUser/${filteredUser}`);
+            selectedPOIsByUser = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedPOIsByName")) {
+        // get selected production order instances object by name from backend
+        let filteredName = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredName = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedProductionOrdersByChecklistname/${filteredName}`);
+            selectedPOIsByName = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedPOIsByState")) {
+        // get selected production order instances object by state from backend
+        let filteredState = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredState = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedProductionOrdersByState/${filteredState}`);
+            selectedPOIsByState = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/deleteProductionOrderInstance")) {
+        let poiId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        poiId = pathSegments[pathSegments.length - 1];
+
+        // delete the mvt in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/productionOrder/${poiId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getTodosProductionOrderInstance")) {
+        // get maintenance visit instance todos object from backend
+        let itemId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        itemId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/productionOrderTodosByTemplateID/${itemId}`);
+            poiTodosByTemplateId = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/deleteTodosPOI")) {
+        let poiId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        poiId = pathSegments[pathSegments.length - 1];
+
+        // delete the poi todos in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/productionOrderTodos/${poiId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/updateProductionOrderInstance")) {
+        const body = await readBody(event)
+        // update the maintenance visit instance in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/productionOrder`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getProductionOrderInstance")) {
+        // get maintenance visit instance object from backend
+        let poiId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        poiId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/productionOrder/${poiId}`);
+            poi = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/updatePOITodo")) {
+        const body = await readBody(event)
+        // update the production order instance todo in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/productionOrderTodos`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+})
+
+export { productionOrderInstances, selectedPOIsByState, selectedPOIsByUser, selectedPOIsByPOT, selectedPOIsByPOI, selectedPOIsByName, selectedPOIsByCustomer, poiTodosByTemplateId, poi, insertId, errorMsg };