backend/models/checklistSolutionsModel.js

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

backend/models/maintenanceVisitsModel.js

@@ -88,6 +88,7 @@ export const deleteMaintenanceVisitById = async (id, result) => {
 export const insertMaintenanceVisit = async (data, result) => {
   try {
     const results = await ownConn.query(`INSERT INTO maintenancevisits(name, templateID, maintenanceType, state, creationDate, completionDate, user, customer, customerID, templateNotes, type, timeSpent, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.name, data.templateID, data.maintenanceType, data.state, data.creationDate, data.completionDate, data.user, data.customer, data.customerID, data.templateNotes, data.type, data.timeSpent, data.notes])
+    results.insertId = results.insertId.toString();
     result(null, results);
   }
   catch (err) {
@@ -131,6 +132,7 @@ export const updateMaintenanceVisitStateById = async (data, result) => {
     const id = data.primaryID;
     let sql = `UPDATE maintenancevisits SET state = ? WHERE primaryID = ?`;
     const results = await ownConn.query(sql, [data.state, id])
+    results.insertId = results.insertId.toString();
     result(null, results);
   }
   catch (err) {

backend/models/maintenanceVisitsTodosModel.js

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

backend/models/masterMaintenanceTodosModel.js

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

backend/models/masterMaintenanceVisitsModel.js

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

backend/models/solutionsModel.js

@@ -46,6 +46,7 @@ export const getSolutionByName = async (id, result) => {
 export const insertSolution = async (data, result) => {
     try {
         const results = await ownConn.query(`INSERT INTO solutions(solutionName, assetName, customer, customerID, type, lastView, user, description, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.solutionName, data.assetName, data.customer, data.customerID, data.type, data.lastView, data.user, data.description, data.notes])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -61,6 +62,7 @@ export const updateSolutionById = async (data, result) => {
         const id = data.primaryID;
         let sql = `UPDATE solutions SET solutionName = ?, assetName = ?, customer = ?, customerID = ?, type = ?, lastView = ?, user = ?, description = ?, notes = ? WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [data.solutionName, data.assetName, data.customer, data.customerID, data.type, data.lastView, data.user, data.description, data.notes, id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -131,6 +133,7 @@ export const deleteSolutionById = async (id, result) => {
     try {
         let sql = `DELETE FROM solutions WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {

backend/routes/routes.js

@@ -219,8 +219,8 @@ router.put("/masterMaintenanceVisitTodos", updateMasterMaintenanceVisitTodo);
 // Delete master maintenance visit todo
 router.delete("/masterMaintenanceVisitTodos/:id", deleteMasterMaintenanceVisitTodo);
 
-// Delete master maintenance visit todo by customer id
+// Delete master maintenance visit todo by template id
-router.delete("/masterMaintenanceVisitTodosByCustomerid/:id", deleteMasterMaintenanceVisitTodoByTemplateIds);
+router.delete("/masterMaintenanceVisitTodosByTemplateid/:id", deleteMasterMaintenanceVisitTodoByTemplateIds);
 
 // Update all master maintenance visit todos
 router.put("/allMasterMaintenanceVisitTodos", updateAllMasterMaintenanceVisitTodos)

components/ClientSearch.vue

@@ -1,9 +1,9 @@
 <template>
   <section :class="['client-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
-    <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Client</div>
+    <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Customer</div>
     <pre v-if="!filtered" :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ clientFilter }}</pre>
     <input v-if="filtered" v-model="clientFilter" @change="filterConfigItemList()"
-      :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+      :class="['data', 'input-customer', darkMode ? 'data-darkmode' : 'data-lightmode']">
   </section>
 </template>
 
@@ -98,8 +98,9 @@ export default {
   color: #000;
 }
 
-.input {
+.input-customer {
   border: none;
+  margin-left: 1rem;
 }
 
 .data-darkmode {

components/server/Accounting.vue

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

components/server/Asset.vue

@@ -7,7 +7,7 @@
         <div class="asset-data">
             <div class="client-location">
                 <div class="data-field" id="client">
-                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
                     <pre v-if="!editable"
                         :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.customer }}</pre>
                     <select v-if="editable" id="customersDropDownChosenCI" v-model="item.customer"
@@ -83,7 +83,7 @@
         <div class="asset-data">
             <div class="client-location">
                 <div class="data-field" id="client">
-                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
+                    <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">
@@ -337,7 +337,6 @@ onMounted(() => {
     getConfigItems();
     triggerBackendCallsWithDelay(getCustomers);
 });
-
 </script>
 
 <script>

components/server/AssetTable.vue

@@ -11,7 +11,7 @@
                 <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
                     <th
                         :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                        Client</th>
+                        Customer</th>
                     <th
                         :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         Name</th>
@@ -136,7 +136,6 @@ export default {
     align-items: flex-start;
     justify-content: center;
     align-self: stretch;
-    /* width: 100%; */
     padding: 1.25rem 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;

components/server/Client.vue

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

components/server/ClientDepartment.vue

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

components/server/ClientEmployee.vue

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

components/server/IssueSlip.vue

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

components/server/IssueSlipTable.vue

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

components/server/MaintenanceVisitsInstance.vue

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

components/server/MaintenanceVisitsTemplate.vue

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

components/server/MaintenanceVisitsTemplateTable.vue

@@ -1,4 +1,9 @@
 <template>
+    <section v-if="searchable" :class="['mvt-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Template:</div>
+        <input v-model="mvtSearchFilter" @change="searchMVT()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
         <table class="data-table" name="maintenance-visits-template-table">
@@ -6,7 +11,7 @@
                 <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
                     <th
                         :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                        Client</th>
+                        Customer</th>
                     <th
                         :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         Name</th>
@@ -26,7 +31,11 @@
                         {{ template.customer }}</td>
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        {{ template.name }}</td>
+                        <nuxt-link to="/maintenanceVisits" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            @click="goToChosenMVT(template.checklistID)">
+                            {{ template.name }}
+                        </nuxt-link></td>
                     <td
                         :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
                         {{ template.checklistID }}</td>
@@ -42,25 +51,75 @@
   
   
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+// get accesss to the store
+const store = useStore()
+const goToChosenMVT = (id) => {
+    store.commit('setChosenMVT', id);
+    store.commit('changeToTemplate');
+};
+
+const clientFilter = computed(() => store.state.filteredByClient);
+const searchable = computed(() => store.state.searchable);
+const mvtSearchFilter = ref('');
 
 const darkMode = ref(true)
 const maintenanceVisitTemplates = ref([]);
 
 //get all maintenance visit templates
 const getMaintenanceVisitTemplates = async () => {
+    if (!(clientFilter.value === '')) {
+        await getFilteredMVTByClient();
+    } else {
         try {
             const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitTemplates`);
             maintenanceVisitTemplates.value = response.data;
         } catch (err) {
             console.log(err.response.statusText);
         }
+    }
 }
 
-onMounted(() => {
+//get all maintenance visit templates based on the searched mvt name
-    getMaintenanceVisitTemplates();
+const searchMVT = async () => {
+    if (mvtSearchFilter.value === '') {
+        await getMaintenanceVisitTemplates();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVTsByMVT/${mvtSearchFilter.value}`);
+            maintenanceVisitTemplates.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// update search term
+const updateSearchTerm = async () => {
+    mvtSearchFilter.value = '';
+    await getMaintenanceVisitTemplates();
+}
+
+//get all maintenance visit templates based on the searched client
+const getFilteredMVTByClient = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVTsByClient/${clientFilter.value}`);
+        maintenanceVisitTemplates.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+watch(searchable, updateSearchTerm);
+watch(clientFilter, getMaintenanceVisitTemplates);
+
+onMounted(async () => {
+    await getMaintenanceVisitTemplates();
 });
 </script>
 
@@ -79,13 +138,30 @@ export default {
     align-items: flex-start;
     justify-content: center;
     align-self: stretch;
-    width: 100%;
     padding: 1.25rem 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
 }
 
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
 .div-darkmode {
     background-color: #2c2c2c;
 }
@@ -94,6 +170,37 @@ export default {
     background-color: #fff;
 }
 
+.input {
+    border: none;
+}
+
+#nuxt-link {
+    text-decoration: none;
+    color: white;
+}
+
+.dataInput {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.clientLabel {
+    width: 5.5625em;
+    height: 1.875em;
+    font-family: "Overpass";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 1.875;
+    letter-spacing: 0.05em;
+}
+
 .data-table {
     width: 100%;
     padding: 0 0.625rem;
@@ -101,6 +208,18 @@ export default {
     border-collapse: collapse;
 }
 
+.mvt-search {
+    display: flex;
+    align-items: center;
+    padding: 0.625em 1.875em;
+    gap: 1.25em;
+    width: 30.125em;
+    height: 3.125em;
+    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+    border-radius: 0.625em;
+    box-sizing: border-box;
+}
+
 .table-row {
     display: flex;
     flex-direction: row;
@@ -220,4 +339,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
+}
+</style>

components/server/ProductionOrdersInstance.vue

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

components/server/ProductionOrdersTemplate.vue

@@ -7,7 +7,7 @@
         <div class="production-orders-template-data">
             <div class="client-ID">
                 <div class="data-field" id="client">
-                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Client:</pre>
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Customer:</pre>
                     <pre v-if="!editable"
                         :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ pot.customer }}</pre>
                     <select v-if="editable" id="customersDropDownChosenCI" v-model="pot.customer"
@@ -58,7 +58,7 @@
         <div class="production-orders-template-data">
             <div class="client-ID">
                 <div class="data-field" id="client">
-                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
+                    <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">
@@ -159,7 +159,7 @@ const confirmDeletePOT = async () => {
     }
 }
 
-//get all productionOrder templates todos
+//get all productionOrder templates
 const getProductionOrderTemplates = async () => {
     try {
         const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);

components/server/ProductionOrdersTemplateTable.vue

@@ -1,6 +1,6 @@
 <template>
     <section v-if="searchable" :class="['pot-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Config item</div>
+        <div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Template:</div>
         <input v-model="potSearchFilter" @change="searchPOT()"
             :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
     </section>
@@ -11,7 +11,7 @@
                 <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
                     <th
                         :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                        Client</th>
+                        Customer</th>
                     <th
                         :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         Name</th>

components/server/Solution.vue

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

components/server/SolutionChecklist.vue

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

components/server/SolutionTable.vue

@@ -1,4 +1,9 @@
 <template>
+    <section v-if="searchable" :class="['solution-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Solution</div>
+        <input v-model="solutionSearchFilter" @change="searchSolution()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
         <table class="data-table" id="solution-table">
@@ -6,7 +11,7 @@
                 <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
                     <th
                         :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                        Client</th>
+                        Customer</th>
                     <th
                         :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         Name</th>
@@ -25,7 +30,12 @@
                         {{ sol.customer }}</td>
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        {{ sol.solutionName }}</td>
+                        <nuxt-link to="/solutions" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            @click="goToChosenSolution(sol.primaryID)">
+                            {{ sol.solutionName }}
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
                         {{ sol.assetName }}</td>
@@ -44,22 +54,73 @@
 import { ref, onMounted } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
+// get accesss to the store
+const store = useStore()
+const goToChosenSolution = (id) => {
+    store.commit('setChosenSolution', id);
+    store.commit('changeToSolution');
+};
+
+const clientFilter = computed(() => store.state.filteredByClient);
+const searchable = computed(() => store.state.searchable);
+
+const solutionSearchFilter = ref('');
 const darkMode = ref(true)
 const solutions = ref([]);
 
+// update search term
+const updateSearchTerm = async () => {
+    solutionSearchFilter.value = '';
+    await getSolutions();
+}
+
 //get all solutions
 const getSolutions = async () => {
+    if (!(clientFilter.value === '')) {
+        await getFilteredSolutionsByClient();
+    } else {
         try {
             const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllSolutions`);
             solutions.value = response.data;
         } catch (err) {
             console.log(err.response.statusText);
         }
+    }
 }
 
-onMounted(() => {
+//get all solutions based on the searched client
-    getSolutions();
+const getFilteredSolutionsByClient = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsByClient/${clientFilter.value}`);
+        solutions.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//get all solutions based on the searched solution name
+const searchSolution = async () => {
+    if (solutionSearchFilter.value === '') {
+        await getSolutions();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsBySolution/${solutionSearchFilter.value}`);
+            solutions.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+watch(clientFilter, getSolutions);
+watch(searchable, updateSearchTerm);
+
+
+onMounted(async () => {
+    await getSolutions();
 });
 </script>
 
@@ -77,7 +138,6 @@ export default {
     align-items: flex-start;
     justify-content: center;
     align-self: stretch;
-    width: 100%;
     padding: 1.25rem 1.875rem;
     gap: 1.25rem;
     border-radius: 0.625rem;
@@ -118,6 +178,32 @@ export default {
     border-bottom: 0.0625rem solid #8e8e8e;
 }
 
+.input {
+    border: none;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.solution-search {
+    display: flex;
+    align-items: center;
+    padding: 0.625em 1.875em;
+    gap: 1.25em;
+    width: 30.125em;
+    height: 3.125em;
+    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+    border-radius: 0.625em;
+    box-sizing: border-box;
+}
+
 .tr-darkmode {
     border-top: 0.0625rem solid #000000;
 }
@@ -126,6 +212,17 @@ export default {
     border-top: 0.0625rem solid #8e8e8e;
 }
 
+.dataInput {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
 th,
 td {
     height: 1.875rem;
@@ -135,6 +232,14 @@ td {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
 .th-darkmode,
 .td-darkmode {
     color: #ffffff;
@@ -149,6 +254,22 @@ th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+#nuxt-link {
+    text-decoration: none;
+    color: white;
+}
+
+.clientLabel {
+    width: 5.5625em;
+    height: 1.875em;
+    font-family: "Overpass";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 1.875;
+    letter-spacing: 0.05em;
+}
+
 .Client {
     width: 33.3%;
 }

components/server/TemplateChecklistMVT.vue

@@ -0,0 +1,750 @@
+<template>
+    <section v-if="!addBool"
+        :class="['template-checklist-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
+        <table class="data-table" id="template-checklist">
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                        Step</th>
+                    <th
+                        :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        Asset</th>
+                    <th
+                        :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        Task</th>
+                    <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
+                </tr>
+                <tr v-for="todo in mvtTodos" :key="todo.primaryID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                        {{ todo.rowID }}
+                    </td>
+                    <td v-if="!editable"
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        {{ todo.asset }}</td>
+                    <td v-if="editable"
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        <select id="customersDropDownChosenCI" v-model="todo.asset" @change="updateMVTTodo(todo)"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="ci in configItemList" :key="ci.primaryID">
+                                {{ ci.assetName }}
+                            </option>
+                        </select>
+                    </td>
+                    <td v-if="!editable"
+                        :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        {{ todo.task }}</td>
+                    <td v-if="editable"
+                        :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        <input type="text" v-model="todo.task" @change="updateMVTTodo(todo)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
+                    <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ todo.commets
+                    }}</td>
+                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
+                            v-model="todo.commets" @change="updateMVTTodo(todo)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
+                            :class="[darkMode ? 'deleteMvtTodos-darkmode' : 'deleteMvtTodos-lightmode']"
+                            @click="deleteMVTTodo(todo.primaryID)">-</button>
+                    </td>
+                </tr>
+                <tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                        {{ newStepTodo }}
+                    </td>
+                    <td
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        <select id="customersDropDownChosenCI" v-model="newAssetTodo"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="ci in configItemList" :key="ci.primaryID">
+                                {{ ci.assetName }}
+                            </option>
+                        </select>
+                    </td>
+                    <td
+                        :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        <input type="text" v-model="newTaskTodo"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="text"
+                            v-model="newCommentsTodo"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
+                            :class="[darkMode ? 'saveMvtTodos-darkmode' : 'saveMvtTodos-lightmode']"
+                            @click="addMVTTodo()">Save</button> <button
+                            :class="[darkMode ? 'deleteLastMvtTodos-darkmode' : 'deleteLastMvtTodos-lightmode']"
+                            @click="deleteNewRow()">-</button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+    <section v-if="editable && !addBool" id="editMvtTodos">
+        <button :class="[darkMode ? 'editMvtTodos-darkmode' : 'editMvtTodos-lightmode']"
+            @click="addChecklistRow()">+</button>
+    </section>
+    <section v-if="addBool"
+        :class="['template-checklist-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
+        <table class="data-table" id="template-checklist">
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                        Step</th>
+                    <th
+                        :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        Asset</th>
+                    <th
+                        :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        Task</th>
+                    <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
+                </tr>
+                <tr v-for="(newT, index) in newTodos" :key="index"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                        {{ newT.rowID }}
+                    </td>
+                    <td
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        <select id="customersDropDownChosenCI" v-model="newT.asset"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="ci in configItemList" :key="ci.primaryID">
+                                {{ ci.assetName }}
+                            </option>
+                        </select>
+                    </td>
+                    <td
+                        :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        <input type="text" v-model="newT.task"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
+                            v-model="newT.comments"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
+                            :class="[darkMode ? 'deleteMvtTodos-darkmode' : 'deleteLastMvtTodos-lightmode']"
+                            @click="deleteMVTTodoFromNewTodos(index)">-</button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+    <section v-if="addBool" id="editMvtTodos">
+        <button :class="[darkMode ? 'editMvtTodos-darkmode' : 'editMvtTodos-lightmode']"
+            @click="addRowForNewMVT()">+</button>
+    </section>
+    <section v-if="addBool" id="saveNewMVT">
+        <button :class="[darkMode ? 'saveNewMVT-darkmode' : 'saveNewMVT-lightmode']" @click="addMVT()">Safe</button>
+    </section>
+</template>
+  
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const addBool = computed(() => store.state.new);
+const editable = computed(() => store.state.editable);
+
+const newNameMVT = computed(() => store.state.newNameMVT);
+const newCustomerIDMVT = computed(() => store.state.newCustomerIDMVT);
+const newCustomerMVT = computed(() => store.state.newCustomerMVT);
+const newLastViewMVT = computed(() => store.state.newLastViewMVT);
+const newUserMVT = computed(() => store.state.newUserMVT);
+const newTypeMVT = computed(() => store.state.newTypeMVT);
+const newNotesMVT = computed(() => store.state.newNotesMVT);
+const newStepTodo = computed(() => mvtTodos.value.length);
+const chosenMVTId = computed(() => store.state.chosenMVTId);
+const clientChanged = computed(() => store.state.clientChanged);
+const changedClientId = computed(() => store.state.changedClientId);
+
+const darkMode = ref(true)
+const addRow = ref(false);
+const configItemList = ref([]);
+const maintenanceVisitTemplates = ref([]);
+const mvtTodos = ref([])
+const MVT = ref({})
+const newAssetTodo = ref('');
+const newTaskTodo = ref('');
+const newCommentsTodo = ref('');
+const newTodos = reactive([]);
+const newRowId = computed(() => newTodos.length)
+
+// delete new todo row
+const deleteNewRow = () => {
+    newAssetTodo.value = '';
+    newTaskTodo.value = '';
+    newCommentsTodo.value = '';
+    addRow.value = false;
+}
+
+const deleteMVTTodoFromNewTodos = (index) => {
+    newTodos.splice(index, 1);
+    newTodos.forEach((todo, i) => {
+        todo.rowID = i
+    })
+}
+
+// add new maintenance visit template
+const addMVT = async () => {
+    // check if all input data is valid
+    if (newNameMVT.value.trim() === "") {
+        alert("Please add a maintenance visit template name!");
+        return;
+    } else {
+        var counter = 0;
+        if (!(maintenanceVisitTemplates.value.length == null)) {
+            // check if maintenance visit template name already exists
+            maintenanceVisitTemplates.value.forEach(MVT => {
+                if (MVT.name === newNameMVT.value) {
+                    counter += 1;
+                }
+            });
+            if (counter == 1) {
+                alert("This maintenance visit template name already exists. Please choose an unique maintenance visit template name or modify respectively delete the old one!");
+                return;
+            }
+        }
+    }
+    if (newCustomerMVT.value.length === 0) {
+        alert("Please choose a client!");
+        return;
+    }
+    let allFine = true;
+    newTodos.forEach(todo => {
+        if (todo.asset.length === 0) {
+            alert(`Please choose a config item for all todos.`);
+            allFine = false
+        }
+    })
+    if (!allFine) {
+        return
+    }
+    try {
+        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addMVT`,
+            {
+                name: newNameMVT.value,
+                customerID: newCustomerIDMVT.value,
+                customer: newCustomerMVT.value,
+                lastView: newLastViewMVT.value,
+                user: newUserMVT.value,
+                type: newTypeMVT.value,
+                notes: newNotesMVT.value,
+            });
+        store.commit('resetStore');
+        store.commit('changeToTemplatelist');
+        newTodos.forEach(async todo => {
+            try {
+                const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoMVT`,
+                    {
+                        templateID: response.data,
+                        rowID: todo.rowID,
+                        asset: todo.asset,
+                        task: todo.task,
+                        comment: todo.comments,
+                    });
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        })
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new row of todo for the new MVT
+const addRowForNewMVT = async () => {
+    if (newCustomerMVT.value.length === 0) {
+        alert("Please choose a client first!");
+        return;
+    }
+    await getConfigItemsFromClient();
+    newTodos.push({
+        templateID: chosenMVTId.value,
+        rowID: newRowId.value,
+        asset: '',
+        task: '',
+        comments: ''
+    });
+}
+
+//update data
+const updateMVTTodo = async (todo) => {
+    if (todo.asset.length === 0) {
+        alert(`Please add the missing config item in row ${todo.rowID}!`);
+        return;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateMVTTodo`,
+            {
+                primaryID: todo.primaryID,
+                templateID: todo.templateID,
+                rowID: todo.rowID,
+                asset: todo.asset,
+                task: todo.task,
+                comments: todo.commets,
+            }
+        );
+        await getMVTById();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new maintenance visit template todo
+const addMVTTodo = async () => {
+    // check if all input data is valid
+    if (newAssetTodo.value.length === 0) {
+        alert("Please choose an asset for the new todo!");
+        return;
+    }
+    try {
+        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoMVT`,
+            {
+                templateID: chosenMVTId.value,
+                rowID: newStepTodo.value,
+                asset: newAssetTodo.value,
+                task: newTaskTodo.value,
+                comment: newCommentsTodo.value,
+            });
+        addRow.value = false;
+        await getMvtTodosById();
+        newAssetTodo.value = '';
+        newTaskTodo.value = '';
+        newCommentsTodo.value = '';
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new row for the template checklist
+const addChecklistRow = async () => {
+    await getConfigItemsFromClient();
+    if (addRow.value) {
+        alert('Please confirm the last added row first.')
+        return
+    }
+    addRow.value = true
+}
+
+//get all maintenance visit templates
+const getMaintenanceVisitTemplates = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitTemplates`);
+        maintenanceVisitTemplates.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1000);
+}
+
+// get maintenance visit template todos from id
+const getMvtTodosById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosMaintenanceVisitTemplate/${chosenMVTId.value}`
+            );
+            mvtTodos.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all config items from the selected client
+const getConfigItemsFromClient = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromClient/${MVT.value.customerID}`);
+            configItemList.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromClient/${changedClientId.value}`);
+            configItemList.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    if (clientChanged.value) {
+        store.commit('toggleClientChanged');
+    }
+}
+
+// get maintenance visit template from id
+const getMVTById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${chosenMVTId.value}`
+            );
+            MVT.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    await getConfigItemsFromClient();
+}
+
+const deleteMVTTodo = async (id) => {
+    if (confirm("Do you really want to delete this maintenance visit template todo? It cannot be undone!")) {
+        try {
+            await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteMVTTodo/${id}`);
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    await getMvtTodosById();
+}
+
+watch(clientChanged, getMVTById);
+
+onMounted(() => {
+    getMvtTodosById();
+    getMVTById();
+    triggerBackendCallsWithDelay(getMaintenanceVisitTemplates);
+});
+</script>
+
+<script>
+export default {
+    name: "TemplateChecklist",
+};
+</script> 
+  
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.select-darkmode {
+    border: none;
+    color: white;
+    background: #212121;
+    padding: 0.4rem;
+    border-radius: 0.3125rem;
+}
+
+.select-lightmode {
+    border: none;
+    color: black;
+    background: #EBEBEB;
+    padding: 0.4rem;
+    border-radius: 0.3125rem;
+}
+
+.input {
+    border: none;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+.template-checklist-information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.Step {
+    width: 8%;
+}
+
+.Step-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Step-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Asset {
+    width: 22%;
+}
+
+.Asset-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Task {
+    width: 35%;
+}
+
+.Task-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Task-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Comments {
+    width: 35%;
+    display: flex;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+
+.editMvtTodos-darkmode {
+    background: #2c2c2c;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 0.825rem 0.7rem;
+    width: 4%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+
+.saveMvtTodos-darkmode {
+    background: #212121;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 10rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.saveNewMVT-darkmode {
+    background: #2c2c2c;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 1rem 1.875rem;
+    width: 8%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.deleteMvtTodos-darkmode {
+    background: #212121;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 15.8rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.deleteLastMvtTodos-darkmode {
+    background: #212121;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 2rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+
+.editMvtTodos-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    margin-left: 15rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+    border-radius: 0.625rem;
+}
+
+.saveMvtTodos-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 10rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.deleteMvtTodos-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 15.8rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.deleteLastMvtTodos-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    border-radius: 0.625rem;
+    margin-left: 2rem;
+    padding-left: 0.9rem;
+    padding-right: 0.9rem;
+}
+
+.saveNewMVT-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 1rem 1.875rem;
+    width: 8%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.deleteMvtTodos-darkmode:hover,
+.deleteLastMvtTodos-darkmode:hover,
+
+.saveMvtTodos-darkmode:hover,
+.editMvtTodos-darkmode:hover,
+.saveNewMVT-darkmode:hover {
+    background-color: #444444;
+    cursor: pointer;
+}
+
+.deleteMvtTodos-lightmode:hover,
+.deleteLastMvtTodos-lightmode:hover,
+
+.saveMvtTodos-lightmode:hover,
+.editMvtTodos-lightmode:hover,
+.saveNewMVT-lightmode:hover {
+    background-color: #ACACAC;
+    cursor: pointer;
+}
+
+#saveNewMVT {
+    text-align: center;
+}
+
+#editMvtTodos {
+    text-align: right;
+}
+</style>

layouts/Actionbar.vue

@@ -1,12 +1,16 @@
 <template>
-  <aside :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
+  <aside
-    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="toggleActionbar">
+    :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
-      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
+    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
+      @click="toggleActionbar">
+      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+        src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
     </div>
     <nav class="actions">
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search" @click="toggleSearched">
         <div class="icon" id="search-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Search-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Search-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
@@ -14,7 +18,8 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter" @click="toggleFiltered">
         <div class="icon" id="filter-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Filter-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Filter-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
@@ -22,7 +27,8 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
         <div class="icon" id="instances-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Instances-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Instances-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
@@ -30,7 +36,8 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
         <div class="icon" id="attachments-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Attachments-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Attachments-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
@@ -38,7 +45,8 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
         <div class="icon" id="sell-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Sell-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Sell-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
@@ -46,7 +54,8 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
         <div class="icon" id="archive-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Archive-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Archive-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
@@ -54,7 +63,8 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
         <div class="icon" id="new-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Add-New-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Add-New-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
@@ -62,7 +72,8 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
         <div class="icon" id="edit-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Edit-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Edit-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
@@ -70,7 +81,8 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteFunc">
         <div class="icon" id="delete-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Delete-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Delete-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
@@ -141,17 +153,21 @@ aside.actionbar {
   gap: 1.25rem;
   overflow: clip;
 }
+
 .actionbar-darkmode {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #2C2C2C;
 }
+
 .actionbar-lightmode {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #FFFFFF;
 }
+
 aside.is-expanded {
   animation: expand 0.5s linear both;
 }
+
 aside.is-not-expanded {
   animation: contract 0.5s linear both;
 }
@@ -181,16 +197,30 @@ button {
   transition: 0.2s ease-in-out;
   overflow: clip;
 }
-.button-darkmode { background-color: #2C2C2C; } 
+
-.button-lightmode { background-color: #FFFFFF; } 
+.button-darkmode {
+  background-color: #2C2C2C;
+}
+
+.button-lightmode {
+  background-color: #FFFFFF;
+}
 
 .button-darkmode:hover,
-.indicator-darkmode:hover { background-color: #444444; } 
+.indicator-darkmode:hover {
+  background-color: #444444;
+  cursor: pointer;
+}
 
 .button-lightmode:hover,
-.indicator-lightmode:hover {  background-color: #ACACAC; } 
+.indicator-lightmode:hover {
+  background-color: #ACACAC;
+  cursor: pointer;
+}
 
-.is-not-expanded>button { align-self: center; }
+.is-not-expanded>button {
+  align-self: center;
+}
 
 
 .icon {
@@ -202,6 +232,7 @@ button {
   justify-content: center;
   padding: 0 0.5rem;
 }
+
 .is-not-expanded .icon {
   align-self: center;
 }
@@ -212,7 +243,10 @@ button {
   border-radius: 0.3125rem;
   transition: 0.2s ease-in-out;
 }
-.is-not-expanded #indicator-icon { transform: rotate(180deg); }
+
+.is-not-expanded #indicator-icon {
+  transform: rotate(180deg);
+}
 
 
 img {
@@ -222,8 +256,14 @@ img {
   object-position: center;
   overflow: hidden;
 }
-.img-darkmode { filter: invert(100%); } 
+
-#indicator-icon>img { height: 1.25rem; }
+.img-darkmode {
+  filter: invert(100%);
+}
+
+#indicator-icon>img {
+  height: 1.25rem;
+}
 
 
 .label {
@@ -235,12 +275,19 @@ img {
   white-space: nowrap;
   font: 400 0.875rem/1.25rem Overpass, sans-serif;
 }
-.label-darkmode { color: #FFFFFF; } 
+
-.label-lightmode { color: #000000; }
+.label-darkmode {
+  color: #FFFFFF;
+}
+
+.label-lightmode {
+  color: #000000;
+}
 
 
 
-.fade-enter-from, .fade-leave-to {
+.fade-enter-from,
+.fade-leave-to {
   opacity: 0;
 }
 
@@ -310,5 +357,4 @@ img {
     max-width: 0;
     max-inline-size: 0;
   }
-}
+}</style>
-</style>

layouts/Navigationbar.vue

@@ -20,7 +20,7 @@
         </router-link>
       </nav>
       <nav id="site-menu">
-        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultProductionOrderPage()" id="checklists-button">
+        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultMasterChecklistPage()" id="checklists-button">
           <div class="icon" id="checklists-icon">
             <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Checklists-Icon.svg" />
           </div>
@@ -36,7 +36,7 @@
             <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets</pre>
           </Transition>
         </nuxt-link>
-        <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
+        <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultSolutionPage()" id="solutions-button">
           <div class="icon" id="solutions-icon">
             <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Solutions-Icon.svg" />
           </div>
@@ -57,7 +57,7 @@
             <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Clients-Icon.svg" />
           </div>
           <Transition name="fade">
-            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</pre>
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Customers</pre>
           </Transition>
         </router-link>
       </nav>
@@ -81,11 +81,16 @@ const defaultAssetPage = () => {
   store.commit('changeToAssetlist');
 };
 
-const defaultProductionOrderPage = () => {
+const defaultMasterChecklistPage = () => {
   store.commit('resetStore');
   store.commit('changeToTemplatelist')
 }
 
+const defaultSolutionPage = () => {
+  store.commit('resetStore');
+  store.commit('changeToSolutionlist')
+}
+
 const ToggleSidebar = () => {
   isExpanded.value = !isExpanded.value;
 };

pages/assets.vue

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

pages/clients.vue

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

pages/maintenanceVisits.vue

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

pages/productionOrders.vue

@@ -1,7 +1,8 @@
 <template>
     <section id="content">
         <div id="content-header">
-            <router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button">
+            <router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button"
+                @click="defaultMasterChecklistPage">
                 <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Maintenance visits</h1>
             </router-link>
             &nbsp;
@@ -21,19 +22,20 @@
             &nbsp;
             &nbsp;
             <router-link to="/productionOrders" class="button" id="productionOrders-button">
-                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Production orders</h1>
+                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name"
+                    @click="defaultMasterChecklistPage()">Production orders</h1>
             </router-link>
         </div>
         <div id="content-body">
-            <ClientSearch v-if="onTemplatelist || onCustomerTemplatelist"/>
+            <ClientSearch v-if="onTemplatelist || onCustomerTemplatelist" />
-            <ProductionOrdersTemplateTable v-if="onTemplatelist"/>
+            <ProductionOrdersTemplateTable v-if="onTemplatelist" />
-            <ProductionOrdersTemplateTableNoClient v-if="onCustomerTemplatelist"/>
+            <ProductionOrdersTemplateTableNoClient v-if="onCustomerTemplatelist" />
-            <ProductionOrdersTemplate v-if="onTemplate"/>
+            <ProductionOrdersTemplate v-if="onTemplate" />
-            <TemplateChecklist v-if="onTemplate"/>
+            <TemplateChecklist v-if="onTemplate" />
-            <TemplateSearch v-if="onInstancelist"/>
+            <TemplateSearch v-if="onInstancelist" />
-            <ProductionOrdersInstanceTable v-if="onInstancelist"/>
+            <ProductionOrdersInstanceTable v-if="onInstancelist" />
-            <ProductionOrdersInstance v-if="onInstance"/>
+            <ProductionOrdersInstance v-if="onInstance" />
-            <InstanceChecklist v-if="onInstance"/>
+            <InstanceChecklist v-if="onInstance" />
         </div>
     </section>
 </template>
@@ -66,6 +68,11 @@ definePageMeta({
 })
 
 const darkMode = ref(true)
+
+const defaultMasterChecklistPage = () => {
+    store.commit('resetStore');
+    store.commit('changeToTemplatelist')
+}
 </script>
   
 <script>

pages/solutions.vue

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

plugins/vuex.js

@@ -45,6 +45,7 @@ const store = createStore({
             onTemplate: false,
             onInstancelist: false,
             onInstance: false,
+
             newNamePOT: '',
             newCustomerIDPOT: '',
             newCustomerPOT: '',
@@ -54,6 +55,28 @@ const store = createStore({
             newNotesPOT: '',
             chosenPOTId: -1,
 
+            newNameMVT: '',
+            newCustomerIDMVT: '',
+            newCustomerMVT: '',
+            newLastViewMVT: '',
+            newUserMVT: '',
+            newTypeMVT: '',
+            newNotesMVT: '',
+            chosenMVTId: -1,
+
+            onSolutionlist: true,
+            onCustomerSolutionlist: false,
+            onSolution: false,
+            chosenSolutionId: -1,
+            newSolutionNameSol: '',
+            newCustomerIDSol: '',
+            newCustomerSol: '',
+            newAssetNameSol: '',
+            newTypeSol: '',
+            newLastViewSol: '',
+            newUserSol: '',
+            newDescriptionSol: '',
+            newNotesSol: '',
         };
     },
     mutations: {
@@ -112,7 +135,7 @@ const store = createStore({
             state.onSolutionlistAsset = true
         },
 
-        // functions to change the production order pages
+        // functions to change the production order and maintenance visit pages
         changeToTemplatelist(state) {
             state.onTemplatelist = true
             state.onCustomerTemplatelist = false
@@ -149,6 +172,23 @@ const store = createStore({
             state.onInstance = true
         },
 
+        // functions to change the solution pages
+        changeToSolutionlist(state) {
+            state.onSolutionlist = true
+            state.onCustomerSolutionlist = false
+            state.onSolution = false
+        },
+        changeToCustomerSolutionlist(state) {
+            state.onSolutionlist = false
+            state.onCustomerSolutionlist = true
+            state.onSolution = false
+        },
+        changeToSolution(state) {
+            state.onSolutionlist = false
+            state.onCustomerSolutionlist = false
+            state.onSolution = true
+        },
+
         // functions to update the asset
         updateAssetComponent(state, asset) {
             state.newAssetName = asset.assetName
@@ -187,6 +227,29 @@ const store = createStore({
             state.newNotesPOT = pot.notes
         },
 
+        // functions to update the maintenance visit template
+        updateMaintenanceVisitTemplateComponent(state, mvt) {
+            state.newNameMVT = mvt.name
+            state.newCustomerIDMVT = mvt.customerId
+            state.newCustomerMVT = mvt.customer
+            state.newUserMVT = mvt.user
+            state.newTypeMVT = mvt.type
+            state.newNotesMVT = mvt.notes
+        },
+
+        // functions to update the solution
+        updateSolutionComponent(state, sol) {
+            state.newSolutionNameSol = sol.solutionName
+            state.newCustomerIDSol = sol.customerId
+            state.newCustomerSol = sol.customer
+            state.newAssetNameSol = sol.assetName
+            state.newLastViewSol = sol.lastView
+            state.newTypeSol = sol.type
+            state.newDescriptionSol = sol.description
+            state.newNotesSol = sol.notes
+            state.newUserSol = sol.user
+        },
+
         // function to set the chosen asset
         setChosenAsset(state, id) {
             state.chosenAssetId = id
@@ -197,6 +260,16 @@ const store = createStore({
             state.chosenPOTId = id
         },
 
+        // function to set the chosen maintenance visit template
+        setChosenMVT(state, id) {
+            state.chosenMVTId = id
+        },
+
+         // function to set the chosen solution
+         setChosenSolution(state, id) {
+            state.chosenSolutionId = id
+        },
+
         // function to reset the pages
         resetStore(state) {
             state.editable = false
@@ -237,10 +310,33 @@ const store = createStore({
             state.newNamePOT = ''
             state.newCustomerIDPOT = ''
             state.newCustomerPOT = ''
-            state.newUserPOT = false
+            state.newUserPOT = ''
             state.newDescriptionPOT = ''
             state.newNotesPOT = ''
             state.newLastViewPOT = ''
+            state.chosenPOTId = -1
+
+            // reset the maintenance visit template page variables
+            state.newNameMVT = ''
+            state.newCustomerIDMVT = ''
+            state.newCustomerMVT = ''
+            state.newUserMVT = ''
+            state.newTypeMVT = ''
+            state.newNotesMVT = ''
+            state.newLastViewMVT = ''
+            state.chosenMVTId = -1
+
+            // reset the solution page variables
+            state.newSolutionNameSol = ''
+            state.newCustomerIDSol = ''
+            state.newCustomerSol = ''
+            state.newAssetNameSol = ''
+            state.newLastViewSol = ''
+            state.newTypeSol = ''
+            state.newDescriptionSol = ''
+            state.newNotesSol = ''
+            state.newUserSol = ''
+            state.chosenSolutionId = -1
         },
 
         // functions to (undo) delete an asset
@@ -269,14 +365,18 @@ const store = createStore({
             state.onAsset = true
             state.onSolutionlistAsset = false
 
-            // set the production order variables
+            // set the production order and maintenance visit variables
             state.onTemplatelist = false
             state.onCustomerTemplatelist = false
             state.onTemplate = true
             state.onInstancelist = false
             state.onInstance = false
-        },
 
+            // set the solution variables
+            state.onSolutionlist = false
+            state.onCustomerSolutionlist = false
+            state.onSolution = true
+        },
     },
 });
 

server/api/addMVT.ts

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

server/api/addSol.ts

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

server/api/addTodoMVT.ts

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

server/api/addTodoSol.ts

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

server/api/deleteMVTTodo/[id].ts

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

server/api/deleteMaintenanceVisitTemplate/[id].ts

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

server/api/deleteSolTodo/[id].ts

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

server/api/deleteSolution/[id].ts

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

server/api/deleteTodosMVT/[id].ts

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

server/api/deleteTodosSol/[id].ts

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

server/api/deleteTodosSolution/[id].ts

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

server/api/getMaintenanceVisitTemplate/[id].ts

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

server/api/getSelectedMVTsByClient/[id].ts

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

server/api/getSelectedMVTsByMVT/[id].ts

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

server/api/getSelectedSolutionsByClient/[id].ts

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

server/api/getSelectedSolutionsBySolution/[id].ts

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

server/api/getSolution/[id].ts

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

server/api/getTodosMaintenanceVisitTemplate/[id].ts

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

server/api/getTodosSolution/[id].ts

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

server/api/updateMVTTodo.ts

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

server/api/updateMaintenanceVisitTemplate.ts

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

server/api/updateSolTodo.ts

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

server/api/updateSolution.ts

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

server/middleware/maintenanceVisitTemplates.ts

@@ -3,12 +3,15 @@ import serversideConfig from '../../serversideConfig';
 import https from 'https';
 
 let maintenanceVisitTemplates = [];
+let selectedMVTsByMVT = [];
+let selectedMVTsByClient = [];
+let mvtTodosByTemplateId = [];
+let mvt = [];
+let insertId = -1;
 let errorMsg = '';
 
 export default defineEventHandler(async (event) => {
 
-    if (event.path.startsWith("/api/getAllMaintenanceVisitTemplates")) {
-
     const agent = new https.Agent({
         rejectUnauthorized: false,
     });
@@ -21,6 +24,8 @@ export default defineEventHandler(async (event) => {
         httpsAgent: agent
     });
 
+    if (event.path.startsWith("/api/getAllMaintenanceVisitTemplates")) {
+
         // get all maintenance visit templates object from backend
         try {
             let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisits`);
@@ -46,6 +51,343 @@ export default defineEventHandler(async (event) => {
             }
         }
     }
+
+    if (event.path.startsWith("/api/addMVT")) {
+        const body = await readBody(event)
+        // add the mvt in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisits`, body);
+            insertId = res.data.insertId
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/addTodoMVT")) {
+        const body = await readBody(event)
+        // add the mvt todo in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedMVTsByMVT")) {
+        // get selected maintenance visit templates object by mvt from backend
+        let filteredMVt = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredMVt = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedMasterMaintenanceVisitsByChecklistname/${filteredMVt}`);
+            selectedMVTsByMVT = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedMVTsByClient")) {
+        // get selected maintenance visit templates object by client from backend
+        let filteredClient = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredClient = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedMasterMaintenanceVisitsByCustomer/${filteredClient}`);
+            selectedMVTsByClient = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/deleteMaintenanceVisitTemplate")) {
+        let mvtId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        mvtId = pathSegments[pathSegments.length - 1];
+
+        // delete the mvt in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisits/${mvtId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getTodosMaintenanceVisitTemplate")) {
+        // get maintenance visit template todos object from backend
+        let itemId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        itemId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos/${itemId}`);
+            mvtTodosByTemplateId = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/deleteTodosMVT")) {
+        let mvtId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        mvtId = pathSegments[pathSegments.length - 1];
+
+        // delete the mvt todos in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodosByTemplateid/${mvtId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/updateMaintenanceVisitTemplate")) {
+        const body = await readBody(event)
+        // update the maintenance visit template in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisits`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getMaintenanceVisitTemplate")) {
+        // get maintenance visit template object from backend
+        let mvtId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        mvtId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisit/${mvtId}`);
+            mvt = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/updateMVTTodo")) {
+        const body = await readBody(event)
+        // update the maintenance visit template todo in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/deleteMVTTodo")) {
+        let mvtId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        mvtId = pathSegments[pathSegments.length - 1];
+
+        // delete the mvt in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos/${mvtId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
 })
 
-export { maintenanceVisitTemplates, errorMsg };
+export { maintenanceVisitTemplates, selectedMVTsByMVT, selectedMVTsByClient, mvtTodosByTemplateId, mvt, insertId, errorMsg };

server/middleware/solutions.ts

@@ -3,12 +3,15 @@ import serversideConfig from '../../serversideConfig';
 import https from 'https';
 
 let solutions = [];
+let solution = {};
+let selectedSolutionsByClient = [];
+let selectedSolutionsBySolution = [];
+let solTodosBySolutionId = [];
+let insertId = -1;
 let errorMsg = '';
 
 export default defineEventHandler(async (event) => {
 
-    if (event.path.startsWith("/api/getAllSolutions")) {
-
     const agent = new https.Agent({
         rejectUnauthorized: false,
     });
@@ -21,6 +24,8 @@ export default defineEventHandler(async (event) => {
         httpsAgent: agent
     });
 
+    if (event.path.startsWith("/api/getAllSolutions")) {
+
         // get all solutions object from backend
         try {
             let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/solutions`);
@@ -46,6 +51,344 @@ export default defineEventHandler(async (event) => {
             }
         }
     }
+
+    if (event.path.startsWith("/api/getSelectedSolutionsByClient")) {
+        // get selected solutions object by client from backend
+        let filteredClient = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredClient = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedSolutionsByCustomer/${filteredClient}`);
+            selectedSolutionsByClient = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedSolutionsBySolution")) {
+        // get selected solutions object by asset from backend
+        let filteredSolution = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredSolution = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedSolutionsBySolutionName/${filteredSolution}`);
+            selectedSolutionsBySolution = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSolution")) {
+        // get solution object from backend
+        let solutionId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        solutionId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/solutions/${solutionId}`);
+            solution = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/updateSolution")) {
+        const body = await readBody(event)
+        // update the solution in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/solutions`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/addSol")) {
+        const body = await readBody(event)
+        // add the solution in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/solutions`, body);
+            insertId = res.data.insertId
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/deleteSolution")) {
+        let solId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        solId = pathSegments[pathSegments.length - 1];
+
+        // delete the solution in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/solutions/${solId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/addTodoSol")) {
+        const body = await readBody(event)
+        // add the solution todo in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/checklistSolutionsTodos`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/updateSolTodo")) {
+        const body = await readBody(event)
+        // update the solution todo in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/checklistSolutionsTodos`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getTodosSolution")) {
+        // get solution todos object from backend
+        let itemId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        itemId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/checklistSolutionsTodos/${itemId}`);
+            solTodosBySolutionId = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/deleteTodosSol")) {
+        let solId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        solId = pathSegments[pathSegments.length - 1];
+
+        // delete the mvt todos in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/checklistSolutionsTodosBySolutionID/${solId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/deleteSolTodo")) {
+        let solId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        solId = pathSegments[pathSegments.length - 1];
+
+        // delete the mvt in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/checklistSolutionsTodos/${solId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
 })
 
-export { solutions, errorMsg };
+export { solutions, solution, selectedSolutionsByClient, selectedSolutionsBySolution, solTodosBySolutionId, insertId, errorMsg };