implemented instance lists and pot, todos still missing

backend/controller/maintenanceVisits.js

@@ -10,6 +10,8 @@ import {
   getMaintenanceVisitByName,
   getMaintenanceVisitById,
   updateMaintenanceVisitStateById,
+  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) => {

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, [id])
+    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 {

backend/models/productionOrdersModel.js

@@ -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 {
@@ -141,11 +169,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 = ?`;
+        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.state, id])
+        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/routes/routes.js

@@ -19,6 +19,8 @@ import {
     showSelectedMaintenanceVisitsByCustomer,
     showSelectedMaintenanceVisitsByState,
     showSelectedMaintenanceVisitsByDate,
+    showSelectedMaintenanceVisitsByTemplate,
+    showSelectedMaintenanceVisitsByUser,
     deleteMaintenanceVisit,
     createMaintenanceVisit,
     showMaintenanceVisitByName,
@@ -60,11 +62,13 @@ import {
     showSelectedProductionOrdersByTicketnumber,
     showSelectedProductionOrdersByDate,
     showSelectedProductionOrdersByState,
+    showSelectedProductionOrdersByTemplate,
+    showSelectedProductionOrdersByUser,
     deleteProductionOrder,
     createProductionOrder,
     showProductionOrderByName,
     showProductionOrderById,
-    updateProductionOrderState,
+    updateProductionOrder,
 } from "../controller/productionOrders.js";
 
 import {
@@ -409,6 +413,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 +434,8 @@ router.get("/productionOrderByName/:id", showProductionOrderByName);
 //get single production order by ticketNumber
 router.get("/productionOrder/:id", showProductionOrderById);
 
-// Update production order state
+// Update production order
-router.put("/productionOrderState", updateProductionOrderState);
+router.put("/productionOrder", updateProductionOrder);
-
 
 
 // routes with production order todos:
@@ -442,7 +451,7 @@ router.get("/productionOrderTodosByAsset/:id", showProductionOrderTodosByAsset);
 // Update production order todo
 router.put("/productionOrderTodos", updateProductionOrderTodo);
 
-// Delete production order todos
+// Delete production order todo
 router.delete("/productionOrderTodos/:id", deleteProductionOrderTodos);
 
 
@@ -460,6 +469,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)
 

components/TemplateSearch.vue

@@ -1,7 +1,7 @@
 <template>
   <section :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,18 @@
 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 darkMode = ref('');
 
 const getSession = async () => {
@@ -25,6 +33,29 @@ const getSession = async () => {
   }
 }
 
+// get maintenance visit template from id
+const getMVTById = async () => {
+  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 +67,8 @@ function getItem(item) {
 watch(modeChanged, getSession)
 
 onMounted(async () => {
-  await getSession();
+  getSession();
+  await getMVTById();
 });
 </script>
 

components/server/AssetSolutionList.vue

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

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']">State</div>
+        <input v-model="stateSearchFilter" @change="filterMVIByState()"
+            :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">
@@ -21,39 +31,132 @@
                         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>
+                        {{ instance.maintenanceType }}</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>
+                        {{ instance.completionDate }}</td>
-                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</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 userSearchFilter = ref('');
+const stateSearchFilter = ref('');
+const maintenanceVisitInstances = ref([]);
+
 const darkMode = ref('');
+const mvt = ref({});
+const MVIByUser = ref([]);
+const MVIByState = ref([]);
+
+const goToChosenMVI = (id) => {
+    store.commit('setChosenMIT', id);
+    store.commit('changeToInstance');
+};
+
+//get all maintenance visit instances
+const getMaintenanceVisitInstances = async () => {
+    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);
+    }
+}
+
+// update search term
+const updateSearchTerm = async () => {
+    stateSearchFilter.value = '';
+    await getMaintenanceVisitInstances();
+}
+
+// update filter term
+const updateFilterTerm = async () => {
+    userSearchFilter.value = '';
+    await getMaintenanceVisitInstances();
+}
+
+// get maintenance visit template from id
+const getMVTById = async () => {
+  try {
+    const response = await Axios.get(
+      `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${chosenMVTId.value}`
+    );
+    mvt.value = response.data;
+    await getMaintenanceVisitInstances();
+  } catch (err) {
+    console.log(err.response.statusText);
+  }
+}
+
+//get all instances based on the searched state
+const filterMVIByState = async () => {
+    if (stateSearchFilter.value === '') {
+        await getMaintenanceVisitInstances();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVIByState/${stateSearchFilter.value}`);
+            MVIByState.value = response.data;
+            maintenanceVisitInstances.value = filterObjectsWithMatchingIds(maintenanceVisitInstances.value, MVIByState.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');
@@ -73,9 +176,12 @@ function getItem(item) {
 }
 
 watch(modeChanged, getSession)
+watch(searchable, updateSearchTerm);
+watch(filtered, updateFilterTerm);
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getMVTById();
 });
 </script>
 
@@ -162,6 +268,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;
 }
@@ -249,4 +377,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,26 @@
 <template>
-    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['production-orders-instance-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Instance ID</h2>
+        <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 v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ poi.customer }}</pre>
+                        <select v-if="editable" id="customersDropDownChosenCI" v-model="poi.customer"
+                            @change="updateCustomerID()" :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="cust in customers" :key="cust.primaryID">
+                                {{ cust.customername }}
+                            </option>
+                        </select>
                     </div>
                 </div>
             </div>
@@ -19,14 +29,122 @@
             <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']"
+                    <input v-model="poi.templateDescription" :readonly="!editable" @change="updatePOI()"
-                        id="templateDescription">...</pre>
+                        :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>
+                        <input v-if="editable" v-model="poi.user" @change="updatePOI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </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"
+            :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']">{{ chosenPOTId }}</pre>
+                    </div>
+                    <div class="templateId-customer" id="customer">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
+                        <select id="customersDropDownChosenCI" v-model="newCustomer" @change="updateNewCustomerID()"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="cust in customers" :key="cust.primaryID">
+                                {{ cust.customername }}
+                            </option>
+                        </select>
+                    </div>
+                </div>
+            </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"
+                        :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"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateNotes">
                 </div>
             </div>
         </div>
@@ -39,25 +157,34 @@
                     </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"
+                            :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"
+                            :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>
+                        <input v-model="newUser"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </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']">...</pre>
+                        <pre
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                     </div>
                     <div class="creationDate-completionDate-timeSpent" id="completionDate">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Completion date:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                     </div>
                     <div class="creationDate-completionDate-timeSpent" id="timeSpent">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Time spent:</pre>
@@ -70,11 +197,15 @@
             <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" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="notes">
                 </div>
             </div>
         </div>
     </section>
+    <section v-if="addBool" id="saveNewPOI">
+        <button :class="[darkMode ? 'saveNewPOI-darkmode' : 'saveNewPOI-lightmode']" @click="addPOI()">Save</button>
+    </section>
 </template>
 
 
@@ -82,12 +213,253 @@
 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 poi = ref({});
+const customers = ref([]);
+const customer = ref({});
+const productionOrderInstances = ref([]);
+const assets = ref([]);
+
+const newName = 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 newCompletionDate = ref('');
+const newTimeSpent = ref('');
+
+//get all customers
+const getCustomers = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllCustomers`
+        );
+        customers.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+const 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('changeToTemplatelist');
+        } else {
+            store.commit('undoDelete');
+        }
+    }
+}
+
+//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 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);
+        }
+    }
+}
+
+// add new production order instance
+const addPOI = async () => {
+    // check if all input data is valid
+    if (newName.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 === newName.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 (newCustomer.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;
+    // add todos
+    // let allFine = true;
+    // newTodos.forEach(todo => {
+    //     if (todo.asset.length === 0) {
+    //         alert(`Please choose a config item for all todos.`);
+    //         allFine = false
+    //     }
+    // })
+    // if (!allFine) {
+    //     return
+    // }
+    try {
+        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addPOI`,
+            {
+                name: newName.value,
+                templateID: chosenPOTId.value,
+                customerID: newCustomerID.value,
+                customer: newCustomer.value,
+                asset: newAsset.value,
+                state: newState.value,
+                creationDate: dateTime,
+                completionDate: newCompletionDate.value,
+                user: newUser.value,
+                templateDescription: newTemplateDescription.value,
+                templateNotes: newTemplateNotes.value,
+                timeSpent: newTimeSpent.value,
+                notes: newNotes.value,
+            });
+        store.commit('resetStore');
+        store.commit('changeToTemplatelist');
+        // newTodos.forEach(async todo => {
+        //     try {
+        //         const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoPOT`,
+        //             {
+        //                 templateID: response.data,
+        //                 rowID: todo.rowID,
+        //                 asset: todo.asset,
+        //                 task: todo.task,
+        //                 comment: todo.comments,
+        //             });
+        //     } catch (err) {
+        //         console.log(err.response.statusText);
+        //     }
+        // })
+    } catch (err) {
+        // console.log(err.response.statusText);
+        console.log(err);
+    }
+}
+
+// update customerid if customer was changed
+const updateCustomerID = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${poi.value.customer}`);
+        customer.value = response.data;
+        poi.value.customerID = customer.value.customerID;
+        store.commit('toggleCustomerChanged');
+        store.commit('toggleCustomerId', poi.value.customerID);
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+    await updatePOI();
+}
+
+// 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);
+        }
+    }
+    await getConfigItemsFromCustomer();
+}
+
+// update customerid if customer was changed
+const updateNewCustomerID = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${newCustomer.value}`);
+        newCustomerID.value = response.data.customerID;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+    await getConfigItemsFromCustomer();
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
+
 const getSession = async () => {
     const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
     if (loggedInUserDarkModeBool == 1) {
@@ -97,6 +469,27 @@ 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.length != 0) {
+            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 +498,14 @@ function getItem(item) {
     }
 }
 
-watch(modeChanged, getSession)
+watch(modeChanged, getSession);
+watch(deleteBool, confirmDeletePOI);
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getPOIById();
+    await getProductionOrderInstances();
+    triggerBackendCallsWithDelay(getCustomers);
 });
 </script>
 
@@ -131,6 +528,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 +547,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;
@@ -150,6 +564,42 @@ export default {
         sans-serif;
 }
 
+.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;
+}
+
 .h2-darkmode {
     color: #fff;
 }
@@ -158,6 +608,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 +676,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 +717,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 +751,7 @@ export default {
 }
 
 div#customer {
-    padding-left: 2.9em;
+    padding-left: 4.4em;
 }
 
 .area-title {
@@ -314,4 +785,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,12 +1,19 @@
 <template>
+    <section v-if="searchable" :class="['poi-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['instanceLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">State</div>
+        <input v-model="stateSearchFilter" @change="filterPOIByState()"
+            :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>
@@ -24,26 +31,29 @@
                         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 productionOrderInstances" :key="instance.ticketNumber"
-                    <td
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                        ...</td>
                     <td
                         :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
-                        ...</td>
+                        <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="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                        ...</td>
+                        {{ instance.asset }}</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>
+                        {{ instance.completionDate }}</td>
-                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ instance.user }}</td>
                 </tr>
             </tbody>
         </table>
@@ -55,11 +65,99 @@
 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 userSearchFilter = ref('');
+const stateSearchFilter = ref('');
+const productionOrderInstances = ref([]);
+
 const darkMode = ref('');
+const pot = ref({});
+const POIByUser = ref([]);
+const POIByState = ref([]);
+
+const goToChosenPOI = (id) => {
+    store.commit('setChosenPOI', id);
+    store.commit('changeToInstance');
+};
+
+//get all production order instances
+const getProductionOrderInstances = async () => {
+    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);
+    }
+}
+
+// update search term
+const updateSearchTerm = async () => {
+    stateSearchFilter.value = '';
+    await getProductionOrderInstances();
+}
+
+// update filter term
+const updateFilterTerm = async () => {
+    userSearchFilter.value = '';
+    await getProductionOrderInstances();
+}
+
+// get production order template from id
+const getPOTById = async () => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
+        );
+        pot.value = response.data;
+        await getProductionOrderInstances();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//get all instances based on the searched state
+const filterPOIByState = async () => {
+    if (stateSearchFilter.value === '') {
+        await getProductionOrderInstances();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOIsByState/${stateSearchFilter.value}`);
+            POIByState.value = response.data;
+            productionOrderInstances.value = filterObjectsWithMatchingIds(productionOrderInstances.value, POIByState.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');
@@ -79,9 +177,12 @@ function getItem(item) {
 }
 
 watch(modeChanged, getSession)
+watch(searchable, updateSearchTerm);
+watch(filtered, updateFilterTerm);
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getPOTById();
 });
 </script>
 
@@ -171,18 +272,6 @@ 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%;
 }
@@ -197,7 +286,7 @@ th {
 
 
 .Asset {
-    width: 15.83%;
+    width: 31.66%;
 }
 
 .Asset-darkmode {
@@ -266,4 +355,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

@@ -45,10 +45,15 @@
                     <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
+                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text" v-model="todo.comments"
-                            type="text" v-model="todo.comments" @change="updatePOTTodo(todo)"
+                            @change="updatePOTTodo(todo)"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
-                            :class="[darkMode ? 'deletePOTTodos-darkmode' : 'deletePOTTodos-lightmode']"
+
+                        <!-- <p><span id="spanElement"
+                                :class="['data-span', 'textarea', 'input-span', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                                role="textbox" contenteditable></span></p> -->
+
+                        <button :class="[darkMode ? 'deletePOTTodos-darkmode' : 'deletePOTTodos-lightmode']"
                             @click="deletePOTTodo(todo.primaryID)">-</button>
                     </td>
                 </tr>
@@ -127,8 +132,8 @@
                     </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="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
-                            :class="[darkMode ? 'deleteLastPOTTodos-darkmode' : 'deleteLastPOTTodos-lightmode']"
+                        <button :class="[darkMode ? 'deleteLastPOTTodos-darkmode' : 'deleteLastPOTTodos-lightmode']"
                             @click="deletePOTTodoFromNewTodos(index)">-</button>
                     </td>
                 </tr>
@@ -436,6 +441,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 +508,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;
 }
@@ -541,6 +594,7 @@ export default {
 th,
 td {
     height: 1.875rem;
+    /* height: 1px; */
     text-align: left;
     padding: 0;
     letter-spacing: 5%;
@@ -769,4 +823,45 @@ th {
 #editPOTTodos {
     text-align: right;
 }
+
+
+/* .input-span {
+    border: none;
+} */
+
+/* .input,
+.textarea {
+    border: 1px solid #ccc;
+    font-family: inherit;
+    font-size: inherit;
+    padding: 1px 6px;
+} */
+
+/* .input-wrap {
+    position: relative;
+}
+
+.input-wrap .input {
+    position: absolute;
+    width: 100%;
+    left: 0;
+}
+
+.width-machine {
+    padding: 0 1rem;
+}
+
+.textarea {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    resize: both;
+    min-height: 40px;
+    line-height: 20px;
+}
+
+.textarea[contenteditable]:empty::before {
+    content: "Placeholder still possible";
+    color: gray;
+} */
 </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('');

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" />
@@ -131,6 +132,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,6 +175,7 @@ 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 loggedInUserDarkModeBoolean = ref('');
@@ -175,6 +188,9 @@ const store = useStore()
 const toggleEditable = () => {
   store.commit('toggleEditable');
 };
+const toggleEditableUser = () => {
+  store.commit('toggleEditableUser');
+};
 const deleteFunc = () => {
   store.commit('doDelete');
 };
@@ -196,10 +212,19 @@ const addSolution = () => {
   store.commit('add');
 };
 
+const addInstance = () => {
+  store.commit('addInstance');
+};
+
 const changeToSolutions = () => {
   store.commit('changeToSolutionlistAsset');
 }
 
+const changeToInstancelist = () => {
+  store.commit('changeToInstancelist');
+}
+
+
 // const changeToSettingsPage = () => {
 //   store.commit('changeToSettings');
 //   if (changeToSet.value) {

plugins/vuex.js

@@ -4,6 +4,7 @@ const store = createStore({
     state() {
         return {
             editable: false,
+            editableUser: false,
             filtered: false,
             searchable: false,
             deleteBool: false,
@@ -23,6 +24,7 @@ const store = createStore({
             sellIcon: false,
             archiveIcon: false,
             editIcon: false,
+            editUserIcon: false,
             deleteIcon: false,
 
             onAssetlist: true,
@@ -76,6 +78,9 @@ const store = createStore({
             newNotesMVT: '',
             chosenMVTId: -1,
 
+            chosenMITId: -1,
+            chosenPOIId: -1,
+
             onSolutionlist: true,
             onSolution: false,
             chosenSolutionId: -1,
@@ -171,6 +176,9 @@ const store = createStore({
         toggleEditable(state) {
             state.editable = !state.editable
         },
+        toggleEditableUser(state) {
+            state.editableUser = !state.editableUser
+        },
         toggleChangeToSet(state) {
             state.changeToSet = !state.changeToSet
         },
@@ -224,6 +232,7 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
         },
         changeToCustomerAssetlist(state) {
@@ -242,6 +251,7 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
         },
         changeToAsset(state) {
@@ -260,6 +270,7 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = true
+            state.editUserIcon = false
             state.deleteIcon = true
         },
         changeToSolutionlistAsset(state) {
@@ -278,6 +289,7 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
         },
 
@@ -299,6 +311,7 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
         },
         changeToCustomerTemplatelist(state) {
@@ -318,6 +331,7 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
         },
         changeToTemplate(state) {
@@ -337,6 +351,7 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = true
+            state.editUserIcon = false
             state.deleteIcon = true
         },
         changeToInstancelist(state) {
@@ -356,11 +371,33 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
         },
+        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
+        },
         addNewAsset(state) {
             state.newAsset = true
             state.editable = false
+            state.editableUser = false
             state.filtered = false
             state.searchable = false
             state.onAssetlist = false
@@ -384,6 +421,7 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
         },
         changeToCustomerSolutionlist(state) {
@@ -401,6 +439,7 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
         },
         changeToSolution(state) {
@@ -418,6 +457,7 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = true
+            state.editUserIcon = false
             state.deleteIcon = true
         },
 
@@ -437,6 +477,7 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
         },
         changeToCustomerIssueSliplist(state) {
@@ -454,6 +495,7 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
         },
         changeToIssueSlip(state) {
@@ -471,6 +513,7 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = true
+            state.editUserIcon = false
             state.deleteIcon = true
         },
 
@@ -491,6 +534,7 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
         },
         changeToIssueItem(state) {
@@ -509,6 +553,7 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = true
             state.editIcon = true
+            state.editUserIcon = false
             state.deleteIcon = true
         },
         changeToIssueItemVariant(state) {
@@ -527,6 +572,7 @@ const store = createStore({
             state.sellIcon = true
             state.archiveIcon = true
             state.editIcon = true
+            state.editUserIcon = false
             state.deleteIcon = true
         },
 
@@ -546,6 +592,7 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = false
+            state.editUserIcon = false
             state.deleteIcon = false
         },
         changeToEmployee(state) {
@@ -563,6 +610,7 @@ const store = createStore({
             state.sellIcon = false
             state.archiveIcon = false
             state.editIcon = true
+            state.editUserIcon = false
             state.deleteIcon = true
         },
 
@@ -577,7 +625,8 @@ const store = createStore({
             state.attachmentsIcon = false
             state.sellIcon = false
             state.archiveIcon = false
-            state.editIcon = true
+            state.editIcon = false
+            state.editUserIcon = true
             state.deleteIcon = false
         },
 
@@ -782,6 +831,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,6 +869,7 @@ 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
@@ -863,6 +923,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 = ''
@@ -959,6 +1023,7 @@ const store = createStore({
         add(state) {
             state.new = true
             state.editable = false
+            state.editableUser = false
             state.filtered = false
             state.searchable = false
 
@@ -990,6 +1055,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/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/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/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/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/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/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/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,525 @@
+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 mitTodosByTemplateId = [];
+let mit = [];
+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/addMVTasd")) {
+        const body = await readBody(event)
+        // add the mvt in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisits`, body);
+            insertId = res.data.insertId
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/addTodoMVTasd")) {
+        const body = await readBody(event)
+        // add the mvt todo in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/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/getSelectedMITsByMVT")) {
+        // 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/getSelectedMITsByUser")) {
+        // 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/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/deleteMaintenanceVisitTemplateasd")) {
+        let mvtId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        mvtId = pathSegments[pathSegments.length - 1];
+
+        // delete the mvt in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisits/${mvtId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getTodosMaintenanceVisitTemplateasd")) {
+        // get maintenance visit template todos object from backend
+        let itemId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        itemId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos/${itemId}`);
+            mitTodosByTemplateId = 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/deleteTodosMVTasd")) {
+        let mvtId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        mvtId = pathSegments[pathSegments.length - 1];
+
+        // delete the mvt todos in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodosByTemplateid/${mvtId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/updateMaintenanceVisitTemplateasd")) {
+        const body = await readBody(event)
+        // update the maintenance visit template in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisits`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getMaintenanceVisitTemplateasd")) {
+        // get maintenance visit template object from backend
+        let mvtId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        mvtId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisit/${mvtId}`);
+            mit = 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/updateMVTTodoasd")) {
+        const body = await readBody(event)
+        // update the maintenance visit template todo in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/deleteMVTTodoasd")) {
+        let mvtId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        mvtId = pathSegments[pathSegments.length - 1];
+
+        // delete the mvt in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos/${mvtId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+})
+
+export { maintenanceVisitInstances, selectedMITsByState, selectedMITsByUser, selectedMITsByMVT, selectedMITsByMIT, selectedMITsByCustomer, mitTodosByTemplateId, mit, insertId, errorMsg };

server/middleware/productionOrders.ts

@@ -0,0 +1,525 @@
+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 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/addMVTasd")) {
+    //     const body = await readBody(event)
+    //     // add the mvt in the backend
+    //     try {
+    //         let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisits`, body);
+    //         insertId = res.data.insertId
+    //     } catch (err) {
+    //         if (axios.isAxiosError(err)) {
+    //             const axiosError = err as AxiosError;
+
+    //             if (axiosError.response) {
+    //                 // Axios error
+    //                 console.error(axiosError.response.data.message);
+    //                 errorMsg = axiosError.response.data.message;
+    //             } else if (axiosError.request) {
+    //                 console.log(err)
+    //                 // If error was caused by the request
+    //                 console.error(axiosError.request);
+    //             } else {
+    //                 // Other errors
+    //                 console.error('Error', axiosError.message);
+    //             }
+    //         } else {
+    //             // No AxiosError
+    //             console.error('Error', err);
+    //         }
+    //     }
+    // }
+
+    if (event.path.startsWith("/api/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);
+        } 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/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/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/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/getTodosMaintenanceVisitTemplateasd")) {
+    //     // get maintenance visit template todos object from backend
+    //     let itemId = null;
+    //     const path = event._path;
+    //     const pathSegments = path.split('/');
+    //     itemId = pathSegments[pathSegments.length - 1];
+
+    //     try {
+    //         let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos/${itemId}`);
+    //         mitTodosByTemplateId = 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 mvt 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/updateMVTTodoasd")) {
+    //     const body = await readBody(event)
+    //     // update the maintenance visit template todo in the backend
+    //     try {
+    //         let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos`, body);
+    //     } catch (err) {
+    //         if (axios.isAxiosError(err)) {
+    //             const axiosError = err as AxiosError;
+
+    //             if (axiosError.response) {
+    //                 // Axios error
+    //                 console.error(axiosError.response.data.message);
+    //                 errorMsg = axiosError.response.data.message;
+    //             } else if (axiosError.request) {
+    //                 console.log(err)
+    //                 // If error was caused by the request
+    //                 console.error(axiosError.request);
+    //             } else {
+    //                 // Other errors
+    //                 console.error('Error', axiosError.message);
+    //             }
+    //         } else {
+    //             // No AxiosError
+    //             console.error('Error', err);
+    //         }
+    //     }
+    // }
+
+    // if (event.path.startsWith("/api/deleteMVTTodoasd")) {
+    //     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}/masterMaintenanceVisitTodos/${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);
+    //         }
+    //     }
+    // }
+})
+
+export { productionOrderInstances, selectedPOIsByState, selectedPOIsByUser, selectedPOIsByPOT, selectedPOIsByPOI, selectedPOIsByCustomer, poiTodosByTemplateId, poi, insertId, errorMsg };