implemented authentication with sidebase/nuxt-auth

Reviewed-on: jo.kuehner/TueIT_App#16

es funktioniert jetzt wie folgt:
- vom entsprechenden component wird eine axios Anfrage an den api Server Endpunkt geschickt
- parallel greift die passende server middleware ein und diese macht den call ins backend
- daraufhin übermittelt die server middleware die Antwort an den api Endpunkt. Dieser schickt dann eine Antwort zurück an den Component, wo dann die Antwort dem client übermittelt wird

was ich schon alles gemacht habe:
- cors Fehler behoben mit entsprechender Konfig und headern
- login (noch nicht initial dorthin geroutet)
- signup aber nur hardgecoded mit einem Beispieluser, da ich einen brauchte fürs Login
- get all Funktionen für die Tabellen aller Seiten (customer existiert schon aber ist noch nicht in die customer Seite eingebunden)
- bin gerade bei CI. hier funktioniert schon ein einziges Item getten, updaten und löschen. Als nächstes mache ich noch die Erstellung eines neuen CI. Du kannst dich daran orientieren.

README.md

@@ -22,11 +22,11 @@ bun install
 
 ## Development Server
 
-Start the development server on `http://localhost:3000`:
+Start the development server on `https://localhost:3000`:
 
 ```bash
 # npm
-npm run dev
+npm run dev -- --host 0.0.0.0
 
 # pnpm
 pnpm run dev

app.vue

@@ -7,24 +7,41 @@
 
 
 <script setup>
+//import { createPinia } from "pinia";
+//import piniaPluginPersistedState from "pinia-plugin-persistedstate"
 
-  //const layout = "empty";
 
+//const layout = "empty";
+//const route = useRoute();
+//const pinia = createPinia();
+//pinia.use(piniaPluginPersistedState);
+
+
+useHead({
+  //title: `Tüit ERP - ${route.meta.title}`,
+  title: `Tüit ERP`,
+  link: [{ rel: "icon", type: "image/png", href: "/favicon-gelb-rot-32x32.png" }]
+})
 </script>
 
 
 
 <style>
 
-  html, template, body, #__nuxt, #__layout {
-    height: 100vh;
-    width: 100vw;
-    height: 100%;
-    width: 100%;
-    margin: 0;
-    background-color: #212121;
-    font-size: 1rem;
-  }
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, template, body, #__nuxt, #__layout {
+  min-height: 100vh;
+  width: 100vw;
+  min-height: 100%;
+  width: 100%;
+  background-color: #212121;
+  font-size: 1rem;
+}
 
 
 </style>

axios.config.js

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

backend/controller/issueVariants.js

@@ -8,7 +8,7 @@ import {
     deleteIssueVariantById,
     deleteIssueVariantByIssueSlipId,
     insertIssueVariant,
-} from "../models/issuesModel.js";
+} from "../models/issueVariantsModel.js";
 
 //get all issue variants
 export const showIssueVariants = (req, res) => {

backend/controller/users.js

@@ -15,8 +15,9 @@ import {
 //insert user to databased
 export const signUp = async (req, res, next) => {
     try {
-        let sql = `SELECT id FROM users  WHERE LOWER(username) = LOWER(?)`;
+        let sql = `SELECT id FROM users WHERE LOWER(username) = LOWER(?)`;
         const result = await ownConn.execute(sql, [req.body.username])
+
         if (result.length > 0) { //username already exists
             return res.status(409).send({
                 message: 'This username is already in use!'
@@ -92,7 +93,15 @@ export const login = async (req, res, next) => {
                 }
                 if (bResult) {
                     // password match
-                    const token = jwt.sign(
+                    const authtoken = jwt.sign(
+                        {
+                            username: result[0].username,
+                            userId: result[0].id,
+                        },
+                        'SECRETTUEITKEY',
+                        { expiresIn: '300s' } // 5min
+                    );
+                    const refreshtoken = jwt.sign(
                         {
                             username: result[0].username,
                             userId: result[0].id,
@@ -114,7 +123,7 @@ export const login = async (req, res, next) => {
                     const results = await ownConn.query(sql1, [dateTimeString, result[0].id]);
                     return res.status(200).send({
                         message: 'Logged in!',
-                        token,
+                        token: { authToken: authtoken, refreshToken: refreshtoken },
                         user: result[0],
                     });
                 }

backend/index.js

@@ -15,12 +15,14 @@ import fs from "fs";
 //import routes
 import Router from "./routes/routes.js";
 
+import clientsideConfig from '../clientsideConfig.js';
+
 //init express
 const app = express();
 
 //setup cors
 const corsOptions = {
-  origin: 'https://localhost:4173',
+  origin: `https://${clientsideConfig.url}:${clientsideConfig.port}`,
   headers: 'authorization, content-type',
   methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
   credentials: true,
@@ -37,18 +39,18 @@ app.use(express.json());
 app.use(Router);
 
 //setup https
-var privateKey = fs.readFileSync('../certs/localhost.key');
-var certificate = fs.readFileSync('../certs/localhost.crt');
+var privateKey = fs.readFileSync('../certs/privkey.pem');
+var certificate = fs.readFileSync('../certs/fullchain.pem');
 
 var server = https.createServer({
   key: privateKey,
-  cert: certificate
+  cert: certificate,
 }, app);
 
-// const PORT = process.env.PORT || 5172;
-const PORT = process.env.PORT || config.port;
+// const PORT = process.env.PORT || 4172;
+const PORT = process.env.PORT || serversideConfig.port;
 
 //PORT
 server.listen(PORT, () => {
   console.log(`Server running successfully (port ${PORT})`);
-});
+});

backend/models/checklistSolutionsModel.js

@@ -3,7 +3,7 @@ import ownConn from "../dbConfig.js";
 //insert checklist solution todo to databased
 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]);
+        const results = await ownConn.query(`INSERT INTO checklistsolutions(solutionID, step, asset, task, comments) VALUES(?, ?, ?, ?, ?)`, [data.solutionID, data.step, data.asset, data.task, data.comments]);
         result(null, results);
     }
     catch (err) {
@@ -16,7 +16,7 @@ export const insertChecklistSolutionTodo = async (data, result) => {
 //get single checklist solution todo by id
 export const getChecklistSolutionTodosById = async (id, result) => {
     try {
-        let sql = `SELECT * FROM checklistSolutions WHERE solutionID = ? ORDER BY primaryID ASC`;
+        let sql = `SELECT * FROM checklistsolutions WHERE solutionID = ? ORDER BY primaryID ASC`;
         const results = await ownConn.execute(sql, [id])
         result(null, results);
     }
@@ -30,7 +30,7 @@ export const getChecklistSolutionTodosById = async (id, result) => {
 //get single checklist solution todo by asset
 export const getChecklistSolutionTodosByAsset = async (id, result) => {
     try {
-        let sql = `SELECT * FROM checklistSolutions WHERE asset = ? ORDER BY primaryID ASC`;
+        let sql = `SELECT * FROM checklistsolutions WHERE asset = ? ORDER BY primaryID ASC`;
         const results = await ownConn.execute(sql, [id])
         result(null, results);
     }
@@ -45,7 +45,7 @@ export const getChecklistSolutionTodosByAsset = async (id, result) => {
 export const updateChecklistSolutionTodoById = async (data, result) => {
     try {
         const id = data.primaryID;
-        let sql = `UPDATE checklistSolutions SET step = ?, asset = ?, task = ?, comments = ? WHERE 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])
         result(null, results);
     }
@@ -59,7 +59,7 @@ export const updateChecklistSolutionTodoById = async (data, result) => {
 // Delete all checklist solution todos by template ID to Database
 export const deleteAllChecklistSolutionTodosSolutionID = async (id, result) => {
     try {
-        let sql = `DELETE FROM checklistSolutions WHERE solutionID = ?`;
+        let sql = `DELETE FROM checklistsolutions WHERE solutionID = ?`;
         const results = await ownConn.query(sql, [id])
         result(null, results);
     }
@@ -73,7 +73,7 @@ export const deleteAllChecklistSolutionTodosSolutionID = async (id, result) => {
 // Delete single checklist solution todo by primary ID to Database
 export const deleteChecklistSolutionTodo = async (id, result) => {
     try {
-        let sql = `DELETE FROM checklistSolutions WHERE primaryID = ?`;
+        let sql = `DELETE FROM checklistsolutions WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [id])
         result(null, results);
     }

backend/models/configItemsModel.js

@@ -3,7 +3,7 @@ import ownConn from "../dbConfig.js";
 //get all master checklists
 export const getConfigItems = async (result) => {
   try {
-    let sql = `SELECT * FROM changeDB ORDER BY assetName ASC`;
+    let sql = `SELECT * FROM changedb ORDER BY assetName ASC`;
     const results = await ownConn.query(sql)
     result(null, results);
   }
@@ -17,7 +17,7 @@ export const getConfigItems = async (result) => {
 //get single config item by id
 export const getConfigItemById = async (id, result) => {
   try {
-    let sql = `SELECT * FROM changeDB WHERE primaryID = ?`;
+    let sql = `SELECT * FROM changedb WHERE primaryID = ?`;
     const results = await ownConn.execute(sql, [id])
     result(null, results[0]);
   }
@@ -31,7 +31,7 @@ export const getConfigItemById = async (id, result) => {
 //get single config item by name
 export const getConfigItemByName = async (name, result) => {
   try {
-    let sql = `SELECT * FROM changeDB WHERE assetName = ?`;
+    let sql = `SELECT * FROM changedb WHERE assetName = ?`;
     const results = await ownConn.query(sql, [name])
     result(null, results[0]);
   }
@@ -45,7 +45,7 @@ export const getConfigItemByName = async (name, result) => {
 //get config items by customer id
 export const getConfigItemByCustomerId = async (customerId, result) => {
   try {
-    let sql = `SELECT * FROM changeDB WHERE customerID = ? ORDER BY assetName ASC`;
+    let sql = `SELECT * FROM changedb WHERE customerID = ? ORDER BY assetName ASC`;
     const results = await ownConn.query(sql, [customerId])
     result(null, results);
   }
@@ -60,8 +60,9 @@ export const getConfigItemByCustomerId = async (customerId, result) => {
 export const updateConfigItemById = async (data, result) => {
   const id = data.primaryID;
   try {
-    let sql = `UPDATE changeDB SET assetName = ?, customerID = ?, customer = ?, location = ?, remoteLocation = ?, type = ?, description = ?, notes = ?, state = ?, lastView = ?, user = ?, hardwareBool = ?, model = ?, serialnumber = ?, CPU = ?, RAM = ?, storageConfiguration = ?, miscellaneous = ?, softwareBool = ?, software = ?, version = ?, networkBool = ?, IPv4 = ?, IPv6 = ?, MAC = ?, subnetmask = ? WHERE primaryID = ?`;
-    const results = await ownConn.query(sql, [data.assetName, data.customerID, data.customer, data.location, data.remoteLocation, data.type, data.description, data.notes, data.state, data.lastView, data.user, data.hardwareBool, data.model, data.serialnumber, data.CPU, data.RAM, data.storageConfiguration, data.miscellaneous, data.softwareBool, data.software, data.version, data.networkBool, data.IPv4, data.IPv6, data.MAC, data.subnetmask, id]);
+    let sql = `UPDATE changedb SET assetName = ?, customerID = ?, customer = ?, location = ?, remoteLocation = ?, type = ?, description = ?, notes = ?, state = ?, lastView = ?, user = ?, hardwareBool = ?, model = ?, serialnumber = ?, CPU = ?, RAM = ?, storageConfiguration = ?, miscellaneous = ?, softwareBool = ?, software = ?, version = ?, license = ?, networkBool = ?, IPv4 = ?, IPv6 = ?, MAC = ?, subnetmask = ? WHERE primaryID = ?`;
+    const results = await ownConn.query(sql, [data.assetName, data.customerID, data.customer, data.location, data.remoteLocation, data.type, data.description, data.notes, data.state, data.lastView, data.user, data.hardwareBool, data.model, data.serialnumber, data.CPU, data.RAM, data.storageConfiguration, data.miscellaneous, data.softwareBool, data.software, data.version, data.license, data.networkBool, data.IPv4, data.IPv6, data.MAC, data.subnetmask, id]);
+    results.insertId = results.insertId.toString();
     result(null, results);
   }
   catch (err) {
@@ -74,7 +75,8 @@ export const updateConfigItemById = async (data, result) => {
 //insert config item to databased
 export const insertConfigItem = async (data, result) => {
   try {
-    const results = await ownConn.query(`INSERT INTO changeDB(assetName, customerID, customer, location, remoteLocation, type, description, notes, state, lastView, user, hardwareBool, model, serialnumber, CPU, RAM, storageConfiguration, miscellaneous, softwareBool, software, version, networkBool, IPv4, IPv6, MAC, subnetmask) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.assetName, data.customerID, data.customer, data.location, data.remoteLocation, data.type, data.description, data.notes, data.state, data.lastView, data.user, data.hardwareBool, data.model, data.serialnumber, data.CPU, data.RAM, data.storageConfiguration, data.miscellaneous, data.softwareBool, data.software, data.version, data.networkBool, data.IPv4, data.IPv6, data.MAC, data.subnetmask])
+    const results = await ownConn.query(`INSERT INTO changedb(assetName, customerID, customer, location, remoteLocation, type, description, notes, state, lastView, user, hardwareBool, model, serialnumber, CPU, RAM, storageConfiguration, miscellaneous, softwareBool, software, version, license, networkBool, IPv4, IPv6, MAC, subnetmask) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.assetName, data.customerID, data.customer, data.location, data.remoteLocation, data.type, data.description, data.notes, data.state, data.lastView, data.user, data.hardwareBool, data.model, data.serialnumber, data.CPU, data.RAM, data.storageConfiguration, data.miscellaneous, data.softwareBool, data.software, data.version, data.license, data.networkBool, data.IPv4, data.IPv6, data.MAC, data.subnetmask])
+    results.insertId = results.insertId.toString();
     result(null, results);
   }
   catch (err) {
@@ -87,7 +89,7 @@ export const insertConfigItem = async (data, result) => {
 //get all selected config items by customer
 export const getSelectedConfigItemsByCustomer = async (selected, result) => {
   try {
-    let sql = `SELECT * FROM changeDB WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+    let sql = `SELECT * FROM changedb WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
     const results = await ownConn.execute(sql)
     result(null, results);
   }
@@ -101,7 +103,7 @@ export const getSelectedConfigItemsByCustomer = async (selected, result) => {
 //get all selected config items by asset name
 export const getSelectedConfigItemsByAssetName = async (selected, result) => {
   try {
-    let sql = `SELECT * FROM changeDB WHERE assetName LIKE '%${selected}%' ORDER BY assetName ASC`;
+    let sql = `SELECT * FROM changedb WHERE assetName LIKE '%${selected}%' ORDER BY assetName ASC`;
     const results = await ownConn.execute(sql)
     result(null, results);
   }
@@ -115,8 +117,9 @@ export const getSelectedConfigItemsByAssetName = async (selected, result) => {
 // Delete config item to Database
 export const deleteConfigItemById = async (id, result) => {
   try {
-    let sql = `DELETE FROM changeDB WHERE primaryID = ?`;
+    let sql = `DELETE FROM changedb WHERE primaryID = ?`;
     const results = await ownConn.query(sql, [id])
+    results.insertId = results.insertId.toString();
     result(null, results);
   }
   catch (err) {
@@ -124,4 +127,4 @@ export const deleteConfigItemById = async (id, result) => {
     console.log("SQL error : ", err);
     result(err, null);
   }
-};
+};

backend/models/issueSlipsModel.js

@@ -3,7 +3,7 @@ import ownConn from "../dbConfig.js";
 //get all issue slips
 export const getIssueSlips = async (result) => {
     try {
-        let sql = `SELECT * FROM issueSlips ORDER BY customer ASC`;
+        let sql = `SELECT * FROM issueslips ORDER BY customer ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -17,7 +17,7 @@ export const getIssueSlips = async (result) => {
 //get all selected issue slips by ticketnumber
 export const getSelectedIssueSlipsByTicketnumber = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM issueSlips WHERE ticketNo LIKE '%${selected}%' ORDER BY ticketNo ASC`;
+        let sql = `SELECT * FROM issueslips WHERE ticketNo LIKE '%${selected}%' ORDER BY ticketNo ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -31,7 +31,7 @@ export const getSelectedIssueSlipsByTicketnumber = async (selected, result) => {
 //get all selected issue slips by customer
 export const getSelectedIssueSlipsByCustomer = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM issueSlips WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM issueslips WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -45,7 +45,7 @@ export const getSelectedIssueSlipsByCustomer = async (selected, result) => {
 //get all selected issue slips by date of creation
 export const getSelectedIssueSlipsByDate = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM issueSlips WHERE creationDate LIKE '%${selected}%' ORDER BY creationDate ASC`;
+        let sql = `SELECT * FROM issueslips WHERE creationDate LIKE '%${selected}%' ORDER BY creationDate ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -59,7 +59,7 @@ export const getSelectedIssueSlipsByDate = async (selected, result) => {
 // Delete issue slip to Database
 export const deleteIssueSlipById = async (id, result) => {
     try {
-        let sql = `DELETE FROM issueSlips WHERE primaryID = ?`;
+        let sql = `DELETE FROM issueslips WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [id])
         result(null, results);
     }
@@ -73,7 +73,7 @@ export const deleteIssueSlipById = async (id, result) => {
 // Delete issue slip by ticketnumber to Database
 export const deleteIssueSlipByTicketNo = async (id, result) => {
     try {
-        let sql = `DELETE FROM issueSlips WHERE ticketNo = ?`;
+        let sql = `DELETE FROM issueslips WHERE ticketNo = ?`;
         const results = await ownConn.query(sql, [id])
         result(null, results);
     }
@@ -87,7 +87,7 @@ export const deleteIssueSlipByTicketNo = async (id, result) => {
 //insert issue slip to database
 export const insertIssueSlip = async (data, result) => {
     try {
-        const results = await ownConn.query(`INSERT INTO issueSlips(customerID, customer, ticketNo, creationDate, lastView, user, notes, supplierRequest, supplierOffer, clientOffer, clientOrder, supplierOrder, ingress, egress, ingressBill, egressBill) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.customerID, data.customer, data.ticketNo, data.creationDate, data.lastView, data.user, data.notes, data.supplierRequest, data.supplierOffer, data.clientOffer, data.clientOrder, data.supplierOrder, data.ingress, data.egress, data.ingressBill, data.egressBill])
+        const results = await ownConn.query(`INSERT INTO issueslips(customerID, customer, ticketNo, creationDate, lastView, user, notes, supplierRequest, supplierOffer, clientOffer, clientOrder, supplierOrder, ingress, egress, ingressBill, egressBill) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.customerID, data.customer, data.ticketNo, data.creationDate, data.lastView, data.user, data.notes, data.supplierRequest, data.supplierOffer, data.clientOffer, data.clientOrder, data.supplierOrder, data.ingress, data.egress, data.ingressBill, data.egressBill])
         result(null, results);
     }
     catch (err) {
@@ -100,7 +100,7 @@ export const insertIssueSlip = async (data, result) => {
 //get single issue slip by ticketNo
 export const getIssueSlipByTicketNo = async (id, result) => {
     try {
-        let sql = `SELECT * FROM issueSlips WHERE ticketNo = ?`;
+        let sql = `SELECT * FROM issueslips WHERE ticketNo = ?`;
         const results = await ownConn.execute(sql, [id])
         result(null, results[0]);
     }
@@ -114,7 +114,7 @@ export const getIssueSlipByTicketNo = async (id, result) => {
 //get single issue slip by id
 export const getIssueSlipById = async (id, result) => {
     try {
-        let sql = `SELECT * FROM issueSlips WHERE primaryID = ?`;
+        let sql = `SELECT * FROM issueslips WHERE primaryID = ?`;
         const results = await ownConn.execute(sql, [id])
         result(null, results[0]);
     }
@@ -129,7 +129,7 @@ export const getIssueSlipById = async (id, result) => {
 export const updateIssueSlipById = async (data, result) => {
     const id = data.primaryID;
     try {
-        let sql = `UPDATE issueSlips SET customerID = ?, customer = ?, ticketNo = ?, creationDate = ?, lastView = ?, user = ?, notes = ?, supplierRequest = ?, supplierOffer = ?, clientOffer = ?, clientOrder = ?, supplierOrder = ?, ingress = ?, egress = ?, ingressBill = ?, egressBill = ? WHERE primaryID = ?`;
+        let sql = `UPDATE issueslips SET customerID = ?, customer = ?, ticketNo = ?, creationDate = ?, lastView = ?, user = ?, notes = ?, supplierRequest = ?, supplierOffer = ?, clientOffer = ?, clientOrder = ?, supplierOrder = ?, ingress = ?, egress = ?, ingressBill = ?, egressBill = ? WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [data.customerID, data.customer, data.ticketNo, data.creationDate, data.lastView, data.user, data.notes, data.supplierRequest, data.supplierOffer, data.clientOffer, data.clientOrder, data.supplierOrder, data.ingress, data.egress, data.ingressBill, data.egressBill, id])
         result(null, results);
     }

backend/models/issueVariantsModel.js

@@ -3,7 +3,7 @@ import ownConn from "../dbConfig.js";
 //get all issue variants
 export const getAllIssueVariants = async (result) => {
     try {
-        let sql = `SELECT * FROM issueVariants ORDER BY primaryID ASC`;
+        let sql = `SELECT * FROM issuevariants ORDER BY primaryID ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -17,7 +17,7 @@ export const getAllIssueVariants = async (result) => {
 //get issue variant
 export const getIssueVariantById = async (id, result) => {
     try {
-        let sql = `SELECT * FROM issueVariants WHERE primaryID = ? ORDER BY primaryID ASC`;
+        let sql = `SELECT * FROM issuevariants WHERE primaryID = ? ORDER BY primaryID ASC`;
         const results = await ownConn.execute(sql, [id])
         result(null, results);
     }
@@ -31,7 +31,7 @@ export const getIssueVariantById = async (id, result) => {
 //get all selected issue variants by issueID
 export const getSelectedIssueVariantsByIssueId = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM issueVariants WHERE issueID LIKE '%${selected}%' ORDER BY issueID ASC`;
+        let sql = `SELECT * FROM issuevariants WHERE issueID LIKE '%${selected}%' ORDER BY issueID ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -45,7 +45,7 @@ export const getSelectedIssueVariantsByIssueId = async (selected, result) => {
 //get all selected issue variants by name
 export const getSelectedIssueVariantsByName = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM issueVariants WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
+        let sql = `SELECT * FROM issuevariants WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -60,7 +60,7 @@ export const getSelectedIssueVariantsByName = async (selected, result) => {
 export const updateIssueVariantById = async (data, result) => {
     try {
         const id = data.primaryID;
-        let sql = `UPDATE issueVariants SET issueID = ?, name = ? , properties = ?, state = ?, amount = ?, price = ? WHERE primaryID = ?`;
+        let sql = `UPDATE issuevariants SET issueID = ?, name = ? , properties = ?, state = ?, amount = ?, price = ? WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [data.issueID, data.name, data.properties, data.state, data.amount, data.price, id])
         result(null, results);
     }
@@ -75,7 +75,7 @@ export const updateIssueVariantById = async (data, result) => {
 // Delete issue variant to Database
 export const deleteIssueVariantById = async (id, result) => {
     try {
-        let sql = `DELETE FROM issueVariants WHERE primaryID = ?`;
+        let sql = `DELETE FROM issuevariants WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [id])
         result(null, results);
     }
@@ -89,7 +89,7 @@ export const deleteIssueVariantById = async (id, result) => {
 // Delete issue variants by issueID to Database
 export const deleteIssueVariantByIssueSlipId = async (id, result) => {
     try {
-        let sql = `DELETE FROM issueVariants WHERE issueID = ?`;
+        let sql = `DELETE FROM issuevariants WHERE issueID = ?`;
         const results = await ownConn.query(sql, [id])
         result(null, results);
     }
@@ -103,7 +103,7 @@ export const deleteIssueVariantByIssueSlipId = async (id, result) => {
 //insert issue to databased
 export const insertIssueVariant = async (data, result) => {
     try {
-        const results = await ownConn.query(`INSERT INTO issueVariants(issueID, name, properties, state, amount, price) VALUES(?, ?, ?, ?, ?, ?)`, [data.issueID, data.name, data.properties, data.state, data.amount, data.price])
+        const results = await ownConn.query(`INSERT INTO issuevariants(issueID, name, properties, state, amount, price) VALUES(?, ?, ?, ?, ?, ?)`, [data.issueID, data.name, data.properties, data.state, data.amount, data.price])
         result(null, results);
     }
     catch (err) {

backend/models/maintenanceVisitsModel.js

@@ -3,7 +3,7 @@ import ownConn from "../dbConfig.js";
 //get all maintenance visits
 export const getMaintenanceVisits = async (result) => {
   try {
-    let sql = `SELECT * FROM maintenanceVisits ORDER BY name ASC`;
+    let sql = `SELECT * FROM maintenancevisits ORDER BY name ASC`;
     const results = await ownConn.execute(sql)
     result(null, results);
   }
@@ -17,7 +17,7 @@ export const getMaintenanceVisits = async (result) => {
 //get all selected maintenance visits by checklistname
 export const getSelectedMaintenanceVisitsByChecklistname = async (selected, result) => {
   try {
-    let sql = `SELECT * FROM maintenanceVisits WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
+    let sql = `SELECT * FROM maintenancevisits WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
     const results = await ownConn.execute(sql)
     result(null, results);
   }
@@ -31,7 +31,7 @@ export const getSelectedMaintenanceVisitsByChecklistname = async (selected, resu
 //get all selected maintenance visits by customer
 export const getSelectedMaintenanceVisitsByCustomer = async (selected, result) => {
   try {
-    let sql = `SELECT * FROM maintenanceVisits WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+    let sql = `SELECT * FROM maintenancevisits WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
     const results = await ownConn.execute(sql)
     result(null, results);
   }
@@ -45,7 +45,7 @@ export const getSelectedMaintenanceVisitsByCustomer = async (selected, result) =
 //get all selected maintenance visits by date
 export const getSelectedMaintenanceVisitsByDate = async (selected, result) => {
   try {
-    let sql = `SELECT * FROM maintenanceVisits WHERE creationDate LIKE '%${selected}%' ORDER BY creationDate ASC`;
+    let sql = `SELECT * FROM maintenancevisits WHERE creationDate LIKE '%${selected}%' ORDER BY creationDate ASC`;
     const results = await ownConn.execute(sql);
     result(null, results);
   }
@@ -59,7 +59,7 @@ export const getSelectedMaintenanceVisitsByDate = async (selected, result) => {
 //get all selected maintenance visits by state
 export const getSelectedMaintenanceVisitsByState = async (selected, result) => {
   try {
-    let sql = `SELECT * FROM maintenanceVisits WHERE state LIKE '%${selected}%' ORDER BY state ASC`;
+    let sql = `SELECT * FROM maintenancevisits WHERE state LIKE '%${selected}%' ORDER BY state ASC`;
     const results = await ownConn.execute(sql)
     result(null, results);
   }
@@ -73,7 +73,7 @@ export const getSelectedMaintenanceVisitsByState = async (selected, result) => {
 // Delete maintenance visit to Database
 export const deleteMaintenanceVisitById = async (id, result) => {
   try {
-    let sql = `DELETE FROM maintenanceVisits WHERE primaryID = ?`;
+    let sql = `DELETE FROM maintenancevisits WHERE primaryID = ?`;
     const results = await ownConn.query(sql, [id])
     result(null, results);
   }
@@ -87,7 +87,7 @@ export const deleteMaintenanceVisitById = async (id, result) => {
 //insert maintenance visit to databased
 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])
+    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])
     result(null, results);
   }
   catch (err) {
@@ -100,7 +100,7 @@ export const insertMaintenanceVisit = async (data, result) => {
 //get single maintenance visit by name
 export const getMaintenanceVisitByName = async (id, result) => {
   try {
-    let sql = `SELECT * FROM maintenanceVisits  WHERE name = ?`;
+    let sql = `SELECT * FROM maintenancevisits  WHERE name = ?`;
     const results = await ownConn.execute(sql, [id])
     result(null, results[0]);
   }
@@ -114,7 +114,7 @@ export const getMaintenanceVisitByName = async (id, result) => {
 //get single maintenance visit by id
 export const getMaintenanceVisitById = async (id, result) => {
   try {
-    let sql = `SELECT * FROM maintenanceVisits  WHERE primaryID = ?`;
+    let sql = `SELECT * FROM maintenancevisits  WHERE primaryID = ?`;
     const results = await ownConn.execute(sql, [id])
     result(null, results[0]);
   }
@@ -129,7 +129,7 @@ export const getMaintenanceVisitById = async (id, result) => {
 export const updateMaintenanceVisitStateById = async (data, result) => {
   try {
     const id = data.primaryID;
-    let sql = `UPDATE maintenanceVisits SET state = ? WHERE primaryID = ?`;
+    let sql = `UPDATE maintenancevisits SET state = ? WHERE primaryID = ?`;
     const results = await ownConn.query(sql, [data.state, id])
     result(null, results);
   }

backend/models/maintenanceVisitsTodosModel.js

@@ -3,7 +3,7 @@ import ownConn from "../dbConfig.js";
 //insert maintenance visit todo to databased
 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])
+    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])
     result(null, results);
   }
   catch (err) {
@@ -16,7 +16,7 @@ export const insertMaintenanceVisitTodo = async (data, result) => {
 //get single maintenance visit todo by id
 export const getMaintenanceVisitTodosById = async (id, result) => {
   try {
-    let sql = `SELECT * FROM maintenanceVisitTodos WHERE templateID = ? ORDER BY primaryID ASC`;
+    let sql = `SELECT * FROM maintenancevisittodos WHERE templateID = ? ORDER BY primaryID ASC`;
     const results = await ownConn.execute(sql, [id])
     result(null, results);
   }
@@ -30,7 +30,7 @@ export const getMaintenanceVisitTodosById = async (id, result) => {
 //get single maintenance visit todo by asset
 export const getMaintenanceVisitTodosByAsset = async (id, result) => {
   try {
-    let sql = `SELECT * FROM maintenanceVisitTodos WHERE asset = ? ORDER BY primaryID ASC`;
+    let sql = `SELECT * FROM maintenancevisittodos WHERE asset = ? ORDER BY primaryID ASC`;
     const results = await ownConn.execute(sql, [id])
     result(null, results);
   }
@@ -45,7 +45,7 @@ export const getMaintenanceVisitTodosByAsset = async (id, result) => {
 export const updateMaintenanceVisitTodoById = async (data, result) => {
   try {
     const id = data.primaryID;
-    let sql = `UPDATE maintenanceVisitTodos SET step = ?, asset = ?, task = ?, comment = ?, done = ? WHERE 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])
     result(null, results);
   }
@@ -59,7 +59,7 @@ export const updateMaintenanceVisitTodoById = async (data, result) => {
 // Delete maintenance visit todo to Database
 export const deleteMaintenanceVisitTodosByPrimaryID = async (id, result) => {
   try {
-    let sql = `DELETE FROM maintenanceVisitTodos WHERE primaryID = ?`;
+    let sql = `DELETE FROM maintenancevisittodos WHERE primaryID = ?`;
     const results = await ownConn.query(sql, [id])
     result(null, results);
   }

backend/models/masterMaintenanceTodosModel.js

@@ -3,7 +3,7 @@ import ownConn from "../dbConfig.js";
 //get single master maintenance visit todo
 export const getMasterMaintenanceVisitTodoById = async (id, result) => {
     try {
-        let sql = `SELECT * FROM masterMaintenanceVisitTodos WHERE templateID = ? ORDER BY rowID ASC`;
+        let sql = `SELECT * FROM mastermaintenancetodos WHERE templateID = ? ORDER BY rowID ASC`;
         const results = await ownConn.execute(sql, [id])
         result(null, results);
     }
@@ -18,7 +18,7 @@ export const getMasterMaintenanceVisitTodoById = async (id, result) => {
 export const updateMasterMaintenanceVisitTodoById = async (data, result) => {
     try {
         const id = data.primaryID;
-        let sql = `UPDATE masterMaintenanceVisitTodos SET templateID = ?, asset = ? , task = ?, comments = ? WHERE primaryID = ?`;
+        let sql = `UPDATE mastermaintenancetodos SET templateID = ?, asset = ? , task = ?, comments = ? WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [data.templateID, data.asset, data.task, data.comments, id])
         result(null, results);
     }
@@ -33,7 +33,7 @@ export const updateMasterMaintenanceVisitTodoById = async (data, result) => {
 // Delete master maintenance visit todo to Database
 export const deleteMasterMaintenanceVisitTodoById = async (id, result) => {
     try {
-        let sql = `DELETE FROM masterMaintenanceVisitTodos WHERE primaryID = ?`;
+        let sql = `DELETE FROM mastermaintenancetodos WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [id])
         result(null, results);
     }
@@ -47,7 +47,7 @@ export const deleteMasterMaintenanceVisitTodoById = async (id, result) => {
 // Delete master maintenance visit todo by templateID to Database
 export const deleteMasterMaintenanceVisitTodoByTemplateId = async (id, result) => {
     try {
-        let sql = `DELETE FROM masterMaintenanceVisitTodos WHERE templateID = ?`;
+        let sql = `DELETE FROM mastermaintenancetodos WHERE templateID = ?`;
         const results = await ownConn.query(sql, [id])
         result(null, results);
     }
@@ -61,7 +61,7 @@ export const deleteMasterMaintenanceVisitTodoByTemplateId = async (id, result) =
 // Update all master maintenance visit todos to Database
 export const updateMasterMaintenanceVisitTodos = async (data, result) => {
     try {
-        let sql = `UPDATE masterMaintenanceVisitTodos SET rowID = ? WHERE primaryID = ?`;
+        let sql = `UPDATE mastermaintenancetodos SET rowID = ? WHERE primaryID = ?`;
         data.data.forEach(async i => {
             let id = i.primaryID;
             let rowId = i.rowID;
@@ -79,7 +79,7 @@ export const updateMasterMaintenanceVisitTodos = async (data, result) => {
 //insert master maintenance visit todo to databased
 export const insertMasterMaintenanceVisitTodo = async (data, result) => {
     try {
-        const results = await ownConn.query(`INSERT INTO masterMaintenanceVisitTodos(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, comments) VALUES(?, ?, ?, ?, ?)`, [data.templateID, data.rowID, data.asset, data.task, asset.comments])
         result(null, results);
     }
     catch (err) {

backend/models/masterMaintenanceVisitsModel.js

@@ -3,7 +3,7 @@ import ownConn from "../dbConfig.js";
 //get all master maintenance visits
 export const getMasterMaintenanceVisits = async (result) => {
     try {
-        let sql = `SELECT * FROM masterMaintenanceVisits ORDER BY name ASC`;
+        let sql = `SELECT * FROM mastermaintenancevisits ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -17,7 +17,7 @@ export const getMasterMaintenanceVisits = async (result) => {
 //get all selected master maintenance visits by customer
 export const getSelectedMasterMaintenanceVisitsByCustomer = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM masterMaintenanceVisits WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM mastermaintenancevisits WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -31,7 +31,7 @@ export const getSelectedMasterMaintenanceVisitsByCustomer = async (selected, res
 //get all selected master maintenance visits by checklistname
 export const getSelectedMasterMaintenanceVisitsByChecklistname = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM masterMaintenanceVisits WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
+        let sql = `SELECT * FROM mastermaintenancevisits WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -45,7 +45,7 @@ export const getSelectedMasterMaintenanceVisitsByChecklistname = async (selected
 //get single master maintenance visit
 export const getMasterMaintenanceVisitById = async (id, result) => {
     try {
-        let sql = `SELECT * FROM masterMaintenanceVisits WHERE checklistID = ?`;
+        let sql = `SELECT * FROM mastermaintenancevisits WHERE checklistID = ?`;
         const results = await ownConn.execute(sql, [id])
         result(null, results[0]);
     }
@@ -60,7 +60,7 @@ export const getMasterMaintenanceVisitById = async (id, result) => {
 export const updateMasterMaintenanceVisitById = async (data, result) => {
     try {
         const id = data.checklistID;
-        let sql = `UPDATE masterMaintenanceVisits SET name = ?, customerID = ? , customer = ?, type = ?, lastView = ?, user = ?, notes = ? WHERE 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])
         result(null, results);
     }
@@ -74,7 +74,7 @@ export const updateMasterMaintenanceVisitById = async (data, result) => {
 //insert master maintenance visit to databased
 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])
+        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])
         result(null, results);
     }
     catch (err) {
@@ -87,7 +87,7 @@ export const insertMasterMaintenanceVisit = async (data, result) => {
 // Delete master maintenance visit to Database
 export const deleteMasterMaintenanceVisitById = async (id, result) => {
     try {
-        let sql = `DELETE FROM masterMaintenanceVisits WHERE checklistID = ?`;
+        let sql = `DELETE FROM mastermaintenancevisits WHERE checklistID = ?`;
         const results = await ownConn.query(sql, [id])
         result(null, results);
     }

backend/models/masterProductionOrderTodosModel.js

@@ -3,7 +3,7 @@ import ownConn from "../dbConfig.js";
 //get single master production order todo
 export const getMasterProductionOrderTodoById = async (id, result) => {
     try {
-        let sql = `SELECT * FROM masterOrderTodos WHERE templateID = ? ORDER BY rowID ASC`;
+        let sql = `SELECT * FROM masterordertodos WHERE templateID = ? ORDER BY rowID ASC`;
         const results = await ownConn.execute(sql, [id])
         result(null, results);
     }
@@ -18,7 +18,7 @@ export const getMasterProductionOrderTodoById = async (id, result) => {
 export const updateMasterProductionOrderTodoById = async (data, result) => {
     try {
         const id = data.primaryID;
-        let sql = `UPDATE masterOrderTodos SET templateID = ?, asset = ? , task = ?, comment = ? WHERE primaryID = ?`;
+        let sql = `UPDATE masterordertodos SET templateID = ?, asset = ? , task = ?, comment = ? WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [data.templateID, data.asset, data.task, data.comment, id])
         result(null, results);
     }
@@ -33,7 +33,7 @@ export const updateMasterProductionOrderTodoById = async (data, result) => {
 // Delete master production order todo to Database
 export const deleteMasterProductionOrderTodoById = async (id, result) => {
     try {
-        let sql = `DELETE FROM masterOrderTodos WHERE primaryID = ?`;
+        let sql = `DELETE FROM masterordertodos WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [id])
         result(null, results);
     }
@@ -47,7 +47,7 @@ export const deleteMasterProductionOrderTodoById = async (id, result) => {
 // Delete master production order todo by templateID to Database
 export const deleteMasterProductionOrderTodoByTemplateId = async (id, result) => {
     try {
-        let sql = `DELETE FROM masterOrderTodos WHERE templateID = ?`;
+        let sql = `DELETE FROM masterordertodos WHERE templateID = ?`;
         const results = await ownConn.query(sql, [id])
         result(null, results);
     }
@@ -61,7 +61,7 @@ export const deleteMasterProductionOrderTodoByTemplateId = async (id, result) =>
 // Update all master production order todos to Database
 export const updateMasterProductionOrderTodos = async (data, result) => {
     try {
-        let sql = `UPDATE masterOrderTodos SET rowID = ? WHERE primaryID = ?`;
+        let sql = `UPDATE masterordertodos SET rowID = ? WHERE primaryID = ?`;
         data.data.forEach(async i => {
             let id = i.primaryID;
             let rowId = i.rowID;
@@ -79,7 +79,7 @@ export const updateMasterProductionOrderTodos = async (data, result) => {
 //insert master production order todo to databased
 export const insertMasterProductionOrderTodo = async (data, result) => {
     try {
-        const results = await ownConn.query(`INSERT INTO masterOrderTodos(templateID, rowID, asset, task, comment) VALUES(?, ?, ?, ?, ?)`, [data.templateID, data.rowID, data.asset, data.task, data.comment])
+        const results = await ownConn.query(`INSERT INTO masterordertodos(templateID, rowID, asset, task, comment) VALUES(?, ?, ?, ?, ?)`, [data.templateID, data.rowID, data.asset, data.task, data.comment])
         result(null, results);
     }
     catch (err) {

backend/models/masterProductionOrdersModel.js

@@ -3,7 +3,7 @@ import ownConn from "../dbConfig.js";
 //get all master production orders
 export const getMasterProductionOrders = async (result) => {
     try {
-        let sql = `SELECT * FROM masterProductionOrders ORDER BY name ASC`;
+        let sql = `SELECT * FROM masterproductionorders ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -17,7 +17,7 @@ export const getMasterProductionOrders = async (result) => {
 //get all selected master production orders by customer
 export const getSelectedMasterProductionOrdersByCustomer = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM masterProductionOrders WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM masterproductionorders WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -31,7 +31,7 @@ export const getSelectedMasterProductionOrdersByCustomer = async (selected, resu
 //get all selected master production orders by checklistname
 export const getSelectedMasterProductionOrdersByChecklistname = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM masterProductionOrders WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
+        let sql = `SELECT * FROM masterproductionorders WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -45,7 +45,7 @@ export const getSelectedMasterProductionOrdersByChecklistname = async (selected,
 //get single master production order
 export const getMasterProductionOrderById = async (id, result) => {
     try {
-        let sql = `SELECT * FROM masterProductionOrders WHERE templateID = ?`;
+        let sql = `SELECT * FROM masterproductionorders WHERE templateID = ?`;
         const results = await ownConn.execute(sql, [id])
         result(null, results[0]);
     }
@@ -60,7 +60,7 @@ export const getMasterProductionOrderById = async (id, result) => {
 export const updateMasterProductionOrderById = async (data, result) => {
     try {
         const id = data.templateID;
-        let sql = `UPDATE masterProductionOrders SET name = ?, customerID = ? , customer = ?, lastView = ?, user = ?, description = ?, notes = ? WHERE templateID = ?`;
+        let sql = `UPDATE masterproductionorders SET name = ?, customerID = ? , customer = ?, lastView = ?, user = ?, description = ?, notes = ? WHERE templateID = ?`;
         const results = await ownConn.query(sql, [data.name, data.customerID, data.customer, data.lastView, data.user, data.description, data.notes, id])
         result(null, results);
     }
@@ -74,7 +74,7 @@ export const updateMasterProductionOrderById = async (data, result) => {
 //insert master production order to databased
 export const insertMasterProductionOrder = async (data, result) => {
     try {
-        const results = await ownConn.query(`INSERT INTO masterProductionOrders(name, customerID, customer, lastView, user, description, notes) VALUES(?, ?, ?, ?, ?, ?, ?)`, [data.name, data.customerID, data.customer, data.lastView, data.user, data.description, data.notes])
+        const results = await ownConn.query(`INSERT INTO masterproductionorders(name, customerID, customer, lastView, user, description, notes) VALUES(?, ?, ?, ?, ?, ?, ?)`, [data.name, data.customerID, data.customer, data.lastView, data.user, data.description, data.notes])
         result(null, results);
     }
     catch (err) {
@@ -87,7 +87,7 @@ export const insertMasterProductionOrder = async (data, result) => {
 // Delete master production order to Database
 export const deleteMasterProductionOrderById = async (id, result) => {
     try {
-        let sql = `DELETE FROM masterProductionOrders WHERE templateID = ?`;
+        let sql = `DELETE FROM masterproductionorders WHERE templateID = ?`;
         const results = await ownConn.query(sql, [id])
         result(null, results);
     }

backend/models/orderingInfoIssueSlipsModel.js

@@ -3,7 +3,7 @@ import ownConn from "../dbConfig.js";
 //get single ordering info issue slip
 export const getOrderingInfoIssueSlipById = async (id, result) => {
     try {
-        let sql = `SELECT * FROM orderingInfoIssueSlips WHERE issueSlipID = ? ORDER BY primaryID ASC`;
+        let sql = `SELECT * FROM orderinginfoissueslips WHERE issueSlipID = ? ORDER BY primaryID ASC`;
         const results = await ownConn.execute(sql, [id])
         result(null, results);
     }
@@ -18,7 +18,7 @@ export const getOrderingInfoIssueSlipById = async (id, result) => {
 export const updateOrderingInfoIssueSlipById = async (data, result) => {
     try {
         const id = data.primaryID;
-        let sql = `UPDATE orderingInfoIssueSlips SET issueSlipID = ?, article = ? , amount = ?, price = ?, comment = ? WHERE primaryID = ?`;
+        let sql = `UPDATE orderinginfoissueslips SET issueSlipID = ?, article = ? , amount = ?, price = ?, comment = ? WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [data.issueSlipID, data.article, data.amount, data.price, data.comment, id])
         result(null, results);
     }
@@ -33,7 +33,7 @@ export const updateOrderingInfoIssueSlipById = async (data, result) => {
 // Delete ordering info issue slip to Database
 export const deleteOrderingInfoIssueSlipById = async (id, result) => {
     try {
-        let sql = `DELETE FROM orderingInfoIssueSlips WHERE primaryID = ?`;
+        let sql = `DELETE FROM orderinginfoissueslips WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [id])
         result(null, results);
     }
@@ -47,7 +47,7 @@ export const deleteOrderingInfoIssueSlipById = async (id, result) => {
 // Delete ordering info issue slip by issueSlipID to Database
 export const deleteOrderingInfoIssueSlipByIssueSlipId = async (id, result) => {
     try {
-        let sql = `DELETE FROM orderingInfoIssueSlips WHERE issueSlipID = ?`;
+        let sql = `DELETE FROM orderinginfoissueslips WHERE issueSlipID = ?`;
         const results = await ownConn.query(sql, [id])
         result(null, results);
     }
@@ -61,7 +61,7 @@ export const deleteOrderingInfoIssueSlipByIssueSlipId = async (id, result) => {
 //insert ordering info issue slip to databased
 export const insertOrderingInfoIssueSlip = async (data, result) => {
     try {
-        const results = await ownConn.query(`INSERT INTO orderingInfoIssueSlips(issueSlipID, article, amount, price, comment) VALUES(?, ?, ?, ?, ?)`, [data.issueSlipID, data.article, data.amount, data.price, data.comment])
+        const results = await ownConn.query(`INSERT INTO orderinginfoissueslips(issueSlipID, article, amount, price, comment) VALUES(?, ?, ?, ?, ?)`, [data.issueSlipID, data.article, data.amount, data.price, data.comment])
         result(null, results);
     }
     catch (err) {

backend/models/productionOrdersModel.js

@@ -3,7 +3,7 @@ import ownConn from "../dbConfig.js";
 //get all production orders
 export const getProductionOrders = async (result) => {
     try {
-        let sql = `SELECT * FROM productionOrders ORDER BY name ASC`;
+        let sql = `SELECT * FROM productionorders ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -17,7 +17,7 @@ export const getProductionOrders = async (result) => {
 //get all selected production orders by ticketnumber
 export const getSelectedProductionOrdersByTicketnumber = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM productionOrders WHERE ticketNumber LIKE '%${selected}%' ORDER BY ticketNumber ASC`;
+        let sql = `SELECT * FROM productionorders WHERE ticketNumber LIKE '%${selected}%' ORDER BY ticketNumber ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -31,7 +31,7 @@ export const getSelectedProductionOrdersByTicketnumber = async (selected, result
 //get all selected production orders by customer
 export const getSelectedProductionOrdersByCustomer = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM productionOrders WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
+        let sql = `SELECT * FROM productionorders WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -45,7 +45,7 @@ export const getSelectedProductionOrdersByCustomer = async (selected, result) =>
 //get all selected production orders by state
 export const getSelectedProductionOrdersByState = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM productionOrders WHERE state LIKE '%${selected}%' ORDER BY state ASC`;
+        let sql = `SELECT * FROM productionorders WHERE state LIKE '%${selected}%' ORDER BY state ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -59,7 +59,7 @@ export const getSelectedProductionOrdersByState = async (selected, result) => {
 //get all selected production orders by checklistname
 export const getSelectedProductionOrdersByChecklistname = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM productionOrders WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
+        let sql = `SELECT * FROM productionorders WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -73,7 +73,7 @@ export const getSelectedProductionOrdersByChecklistname = async (selected, resul
 //get all selected production orders by date of creation
 export const getSelectedProductionOrdersByDate = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM productionOrders WHERE creationDate LIKE '%${selected}%' ORDER BY creationDate ASC`;
+        let sql = `SELECT * FROM productionorders WHERE creationDate LIKE '%${selected}%' ORDER BY creationDate ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -87,7 +87,7 @@ export const getSelectedProductionOrdersByDate = async (selected, result) => {
 // Delete production order to Database
 export const deleteProductionOrderById = async (id, result) => {
     try {
-        let sql = `DELETE FROM productionOrders WHERE ticketNumber = ?`;
+        let sql = `DELETE FROM productionorders WHERE ticketNumber = ?`;
         const results = await ownConn.query(sql, [id])
         result(null, results);
     }
@@ -101,7 +101,7 @@ export const deleteProductionOrderById = async (id, result) => {
 //insert production order to database
 export const insertProductionOrder = async (data, result) => {
     try {
-        const results = await ownConn.query(`INSERT INTO productionOrders(name, templateID, customer, customerID, asset, state, creationDate, completionDate, user, templateDescription, templateNotes, timeSpent, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.name, data.templateID, data.customer, data.customerID, data.asset, data.state, data.creationDate, data.completionDate, data.user, data.templateDescription, data.templateNotes, data.timeSpent, data.notes])
+        const results = await ownConn.query(`INSERT INTO productionorders(name, templateID, customer, customerID, asset, state, creationDate, completionDate, user, templateDescription, templateNotes, timeSpent, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.name, data.templateID, data.customer, data.customerID, data.asset, data.state, data.creationDate, data.completionDate, data.user, data.templateDescription, data.templateNotes, data.timeSpent, data.notes])
         result(null, results);
     }
     catch (err) {
@@ -114,7 +114,7 @@ export const insertProductionOrder = async (data, result) => {
 //get single production order by name
 export const getProductionOrderByName = async (id, result) => {
     try {
-        let sql = `SELECT * FROM productionOrders  WHERE name = ?`;
+        let sql = `SELECT * FROM productionorders  WHERE name = ?`;
         const results = await ownConn.execute(sql, [id])
         result(null, results[0]);
     }
@@ -128,7 +128,7 @@ export const getProductionOrderByName = async (id, result) => {
 //get single production order by id
 export const getProductionOrderById = async (id, result) => {
     try {
-        let sql = `SELECT * FROM productionOrders  WHERE ticketNumber = ?`;
+        let sql = `SELECT * FROM productionorders  WHERE ticketNumber = ?`;
         const results = await ownConn.execute(sql, [id])
         result(null, results[0]);
     }
@@ -143,7 +143,7 @@ export const getProductionOrderById = async (id, result) => {
 export const updateProductionOrderStateById = async (data, result) => {
     const id = data.ticketNumber;
     try {
-        let sql = `UPDATE productionOrders SET state = ? WHERE ticketNumber = ?`;
+        let sql = `UPDATE productionorders SET state = ? WHERE ticketNumber = ?`;
         const results = await ownConn.query(sql, [data.state, id])
         result(null, results);
     }

backend/models/productionOrdersTodosModel.js

@@ -3,7 +3,7 @@ import ownConn from "../dbConfig.js";
 //insert production order todo to databased
 export const insertProductionOrderTodo = async (data, result) => {
     try {
-        const results = await ownConn.query(`INSERT INTO productionOrderTodos(templateID, step, asset, task, comment, done) VALUES(?, ?, ?, ?, ?, ?)`, [data.templateID, data.step, data.asset, data.task, data.comment, data.done]);
+        const results = await ownConn.query(`INSERT INTO productionordertodos(templateID, step, asset, task, comment, done) VALUES(?, ?, ?, ?, ?, ?)`, [data.templateID, data.step, data.asset, data.task, data.comment, data.done]);
         result(null, results);
     }
     catch (err) {
@@ -16,7 +16,7 @@ export const insertProductionOrderTodo = async (data, result) => {
 //get single production order todo by id
 export const getProductionOrderTodosById = async (id, result) => {
     try {
-        let sql = `SELECT * FROM productionOrderTodos WHERE templateID = ? ORDER BY primaryID ASC`;
+        let sql = `SELECT * FROM productionordertodos WHERE templateID = ? ORDER BY primaryID ASC`;
         const results = await ownConn.execute(sql, [id])
         result(null, results);
     }
@@ -30,7 +30,7 @@ export const getProductionOrderTodosById = async (id, result) => {
 //get single production order todo by asset
 export const getProductionOrderTodosByAsset = async (id, result) => {
     try {
-        let sql = `SELECT * FROM productionOrderTodos WHERE asset = ? ORDER BY primaryID ASC`;
+        let sql = `SELECT * FROM productionordertodos WHERE asset = ? ORDER BY primaryID ASC`;
         const results = await ownConn.execute(sql, [id])
         result(null, results);
     }
@@ -45,7 +45,7 @@ export const getProductionOrderTodosByAsset = async (id, result) => {
 export const updateProductionOrderTodoById = async (data, result) => {
     try {
         const id = data.primaryID;
-        let sql = `UPDATE productionOrderTodos SET step = ?, asset = ?, task = ?, comment = ?, done = ? WHERE primaryID = ?`;
+        let sql = `UPDATE productionordertodos SET step = ?, asset = ?, task = ?, comment = ?, done = ? WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [data.step, data.asset, data.task, data.comment, data.done, id])
         result(null, results);
     }
@@ -59,7 +59,7 @@ export const updateProductionOrderTodoById = async (data, result) => {
 // Delete production order todos to Database
 export const deleteProductionOrderTodosChecklistID = async (id, result) => {
     try {
-        let sql = `DELETE FROM productionOrderTodos WHERE templateID = ?`;
+        let sql = `DELETE FROM productionordertodos WHERE templateID = ?`;
         const results = await ownConn.query(sql, [id])
         result(null, results);
     }

certs/fullchain.pem

@@ -0,0 +1,86 @@
+-----BEGIN CERTIFICATE-----
+MIIEJjCCAw6gAwIBAgISBH1fpnN5tMAmG9rSrKXMtWHmMA0GCSqGSIb3DQEBCwUA
+MDIxCzAJBgNVBAYTAlVTMRYwFAYDVQQKEw1MZXQncyBFbmNyeXB0MQswCQYDVQQD
+EwJSMzAeFw0yNDAyMDcxMTI4MzFaFw0yNDA1MDcxMTI4MzBaMBwxGjAYBgNVBAMT
+EXR1ZWl0YXBwLnR1ZWl0LmRlMFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEp/Sf
+OcRDk6oMEUZnRMyOpMdVWJB6Q0Hs3Ly9QHoEjCwJaPXo5dRLilcb9cgU7omZYoyN
+Tf6ilHAvxGkr/k/saaOCAhUwggIRMA4GA1UdDwEB/wQEAwIHgDAdBgNVHSUEFjAU
+BggrBgEFBQcDAQYIKwYBBQUHAwIwDAYDVR0TAQH/BAIwADAdBgNVHQ4EFgQU9GpF
+/YlVXjNNI8WDy9HBmmx6JMEwHwYDVR0jBBgwFoAUFC6zF7dYVsuuUAlA5h+vnYsU
+wsYwVQYIKwYBBQUHAQEESTBHMCEGCCsGAQUFBzABhhVodHRwOi8vcjMuby5sZW5j
+ci5vcmcwIgYIKwYBBQUHMAKGFmh0dHA6Ly9yMy5pLmxlbmNyLm9yZy8wHAYDVR0R
+BBUwE4IRdHVlaXRhcHAudHVlaXQuZGUwEwYDVR0gBAwwCjAIBgZngQwBAgEwggEG
+BgorBgEEAdZ5AgQCBIH3BIH0APIAdwA7U3d1Pi25gE6LMFsG/kA7Z9hPw/THvQAN
+LXJv4frUFwAAAY2DiovMAAAEAwBIMEYCIQDUiw7jGx4k8y49+QeuGNUX6WciOA0s
+Jipwvi+tjOumGgIhAN2jCoI3iQmpAYN3SvfieUPrAgd2X3RfZa0OzW91XYHWAHcA
+ouK/1h7eLy8HoNZObTen3GVDsMa1LqLat4r4mm31F9gAAAGNg4qMPQAABAMASDBG
+AiEAoA4lggVcXpGHlGLqJwVaKdcTsMEM9hsRaPnwtLeRNnMCIQCMUElVlogieFjP
+hroL/raJrPrakqu9qOm0U3OW8aGPGzANBgkqhkiG9w0BAQsFAAOCAQEAFbGv7Omn
+OWIW6/9zpasBhxOXNNxz5G1YDKnktgK9qrCius39oexbaxyRCgQj7Y2aVirjHEct
+pFkpqdT8oRxOwym3UnTe6en/KqSzahuTLxKsWzvt+zYScEAbdv+ShAycojvuCbcN
+NTzZzVbk5iT2GjPyzB+wBEbEILy1NFzf5sHBTsWOnbClidKpUvYgK6wuEoHb6DPP
+cfI5OHRU/cOB6rljYZYzz4znhNYuwviBUXEf1qIOfPDxZnM0zrh6eJ4wRXZDdGkn
+FQdmweAZn/dUpBEjRNuqSF4tGRKRtKZ3PQBNK35yAI4rFROJquhoQXxJK8XrAYyz
+KJl4MTF4Rk5VMQ==
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIFFjCCAv6gAwIBAgIRAJErCErPDBinU/bWLiWnX1owDQYJKoZIhvcNAQELBQAw
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwHhcNMjAwOTA0MDAwMDAw
+WhcNMjUwOTE1MTYwMDAwWjAyMQswCQYDVQQGEwJVUzEWMBQGA1UEChMNTGV0J3Mg
+RW5jcnlwdDELMAkGA1UEAxMCUjMwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK
+AoIBAQC7AhUozPaglNMPEuyNVZLD+ILxmaZ6QoinXSaqtSu5xUyxr45r+XXIo9cP
+R5QUVTVXjJ6oojkZ9YI8QqlObvU7wy7bjcCwXPNZOOftz2nwWgsbvsCUJCWH+jdx
+sxPnHKzhm+/b5DtFUkWWqcFTzjTIUu61ru2P3mBw4qVUq7ZtDpelQDRrK9O8Zutm
+NHz6a4uPVymZ+DAXXbpyb/uBxa3Shlg9F8fnCbvxK/eG3MHacV3URuPMrSXBiLxg
+Z3Vms/EY96Jc5lP/Ooi2R6X/ExjqmAl3P51T+c8B5fWmcBcUr2Ok/5mzk53cU6cG
+/kiFHaFpriV1uxPMUgP17VGhi9sVAgMBAAGjggEIMIIBBDAOBgNVHQ8BAf8EBAMC
+AYYwHQYDVR0lBBYwFAYIKwYBBQUHAwIGCCsGAQUFBwMBMBIGA1UdEwEB/wQIMAYB
+Af8CAQAwHQYDVR0OBBYEFBQusxe3WFbLrlAJQOYfr52LFMLGMB8GA1UdIwQYMBaA
+FHm0WeZ7tuXkAXOACIjIGlj26ZtuMDIGCCsGAQUFBwEBBCYwJDAiBggrBgEFBQcw
+AoYWaHR0cDovL3gxLmkubGVuY3Iub3JnLzAnBgNVHR8EIDAeMBygGqAYhhZodHRw
+Oi8veDEuYy5sZW5jci5vcmcvMCIGA1UdIAQbMBkwCAYGZ4EMAQIBMA0GCysGAQQB
+gt8TAQEBMA0GCSqGSIb3DQEBCwUAA4ICAQCFyk5HPqP3hUSFvNVneLKYY611TR6W
+PTNlclQtgaDqw+34IL9fzLdwALduO/ZelN7kIJ+m74uyA+eitRY8kc607TkC53wl
+ikfmZW4/RvTZ8M6UK+5UzhK8jCdLuMGYL6KvzXGRSgi3yLgjewQtCPkIVz6D2QQz
+CkcheAmCJ8MqyJu5zlzyZMjAvnnAT45tRAxekrsu94sQ4egdRCnbWSDtY7kh+BIm
+lJNXoB1lBMEKIq4QDUOXoRgffuDghje1WrG9ML+Hbisq/yFOGwXD9RiX8F6sw6W4
+avAuvDszue5L3sz85K+EC4Y/wFVDNvZo4TYXao6Z0f+lQKc0t8DQYzk1OXVu8rp2
+yJMC6alLbBfODALZvYH7n7do1AZls4I9d1P4jnkDrQoxB3UqQ9hVl3LEKQ73xF1O
+yK5GhDDX8oVfGKF5u+decIsH4YaTw7mP3GFxJSqv3+0lUFJoi5Lc5da149p90Ids
+hCExroL1+7mryIkXPeFM5TgO9r0rvZaBFOvV2z0gp35Z0+L4WPlbuEjN/lxPFin+
+HlUjr8gRsI3qfJOQFy/9rKIJR0Y/8Omwt/8oTWgy1mdeHmmjk7j1nYsvC9JSQ6Zv
+MldlTTKB3zhThV1+XWYp6rjd5JW1zbVWEkLNxE7GJThEUG3szgBVGP7pSWTUTsqX
+nLRbwHOoq7hHwg==
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIFYDCCBEigAwIBAgIQQAF3ITfU6UK47naqPGQKtzANBgkqhkiG9w0BAQsFADA/
+MSQwIgYDVQQKExtEaWdpdGFsIFNpZ25hdHVyZSBUcnVzdCBDby4xFzAVBgNVBAMT
+DkRTVCBSb290IENBIFgzMB4XDTIxMDEyMDE5MTQwM1oXDTI0MDkzMDE4MTQwM1ow
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwggIiMA0GCSqGSIb3DQEB
+AQUAA4ICDwAwggIKAoICAQCt6CRz9BQ385ueK1coHIe+3LffOJCMbjzmV6B493XC
+ov71am72AE8o295ohmxEk7axY/0UEmu/H9LqMZshftEzPLpI9d1537O4/xLxIZpL
+wYqGcWlKZmZsj348cL+tKSIG8+TA5oCu4kuPt5l+lAOf00eXfJlII1PoOK5PCm+D
+LtFJV4yAdLbaL9A4jXsDcCEbdfIwPPqPrt3aY6vrFk/CjhFLfs8L6P+1dy70sntK
+4EwSJQxwjQMpoOFTJOwT2e4ZvxCzSow/iaNhUd6shweU9GNx7C7ib1uYgeGJXDR5
+bHbvO5BieebbpJovJsXQEOEO3tkQjhb7t/eo98flAgeYjzYIlefiN5YNNnWe+w5y
+sR2bvAP5SQXYgd0FtCrWQemsAXaVCg/Y39W9Eh81LygXbNKYwagJZHduRze6zqxZ
+Xmidf3LWicUGQSk+WT7dJvUkyRGnWqNMQB9GoZm1pzpRboY7nn1ypxIFeFntPlF4
+FQsDj43QLwWyPntKHEtzBRL8xurgUBN8Q5N0s8p0544fAQjQMNRbcTa0B7rBMDBc
+SLeCO5imfWCKoqMpgsy6vYMEG6KDA0Gh1gXxG8K28Kh8hjtGqEgqiNx2mna/H2ql
+PRmP6zjzZN7IKw0KKP/32+IVQtQi0Cdd4Xn+GOdwiK1O5tmLOsbdJ1Fu/7xk9TND
+TwIDAQABo4IBRjCCAUIwDwYDVR0TAQH/BAUwAwEB/zAOBgNVHQ8BAf8EBAMCAQYw
+SwYIKwYBBQUHAQEEPzA9MDsGCCsGAQUFBzAChi9odHRwOi8vYXBwcy5pZGVudHJ1
+c3QuY29tL3Jvb3RzL2RzdHJvb3RjYXgzLnA3YzAfBgNVHSMEGDAWgBTEp7Gkeyxx
++tvhS5B1/8QVYIWJEDBUBgNVHSAETTBLMAgGBmeBDAECATA/BgsrBgEEAYLfEwEB
+ATAwMC4GCCsGAQUFBwIBFiJodHRwOi8vY3BzLnJvb3QteDEubGV0c2VuY3J5cHQu
+b3JnMDwGA1UdHwQ1MDMwMaAvoC2GK2h0dHA6Ly9jcmwuaWRlbnRydXN0LmNvbS9E
+U1RST09UQ0FYM0NSTC5jcmwwHQYDVR0OBBYEFHm0WeZ7tuXkAXOACIjIGlj26Ztu
+MA0GCSqGSIb3DQEBCwUAA4IBAQAKcwBslm7/DlLQrt2M51oGrS+o44+/yQoDFVDC
+5WxCu2+b9LRPwkSICHXM6webFGJueN7sJ7o5XPWioW5WlHAQU7G75K/QosMrAdSW
+9MUgNTP52GE24HGNtLi1qoJFlcDyqSMo59ahy2cI2qBDLKobkx/J3vWraV0T9VuG
+WCLKTVXkcGdtwlfFRjlBz4pYg1htmf5X6DYO8A4jqv2Il9DjXA6USbW1FzXSLr9O
+he8Y4IWS6wY7bCkjCWDcRQJMEhg76fsO3txE+FiYruq9RUWhiF1myv4Q6W+CyBFC
+Dfvp7OOGAN6dEOM4+qR9sdjoSYKEBpsr6GtPAQw4dy753ec5
+-----END CERTIFICATE-----

certs/localhost.crt

@@ -1,24 +0,0 @@
------BEGIN CERTIFICATE-----
-MIIEAzCCAuugAwIBAgIUVwDWxw7XeYOG6Y0uziRnZq2qri8wDQYJKoZIhvcNAQEL
-BQAwKTELMAkGA1UEBhMCREUxGjAYBgNVBAMMEUxvY2FsaG9zdC1Sb290LUNBMB4X
-DTIzMTAxNjA5MDMxMFoXDTI2MDgwNTA5MDMxMFowdzELMAkGA1UEBhMCREUxGzAZ
-BgNVBAgMEkJhZGVuLVd1ZXJ0dGVtYmVyZzESMBAGA1UEBwwJVHVlYmluZ2VuMR0w
-GwYDVQQKDBRFeGFtcGxlLUNlcnRpZmljYXRlczEYMBYGA1UEAwwPbG9jYWxob3N0
-LmxvY2FsMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAm9bmONlkhJ0s
-ZT+OQR7di5Ypu1BoSIDd53Lwj4V9ws02ThYZUfFfYnuUmQBoGe1SAbvfTZ3dpLjM
-slBqAxz2gxwTWZt5GteTxtmflvKqmAepybOBqAcFKPwMcjreJyuBxYwInwGfEFgG
-YyRMH6VmDbC3vdxSz1NHpCkNL5ctfLQ4tkUShJCHPApqRp1F+BSBQVrpUwzIjn33
-0whHOE346mK1TRI7Qqriyv482BfNCWdG6e8FhbGF6oIEcs7Y0YTcdxxmYHv/CkWI
-/rtqETRpWOn3YVNGD5hKLchplD2ZaYLvFswij9dSbJUR6j0w5OqgmLO4fyyLZNgN
-zARg4mQF7wIDAQABo4HUMIHRMB8GA1UdIwQYMBaAFAzjy/XAlhtTipXj30seDdNO
-97OVMAkGA1UdEwQCMAAwCwYDVR0PBAQDAgTwMHcGA1UdEQRwMG6CCWxvY2FsaG9z
-dIIRdHVlaXRhcHAudHVlaXQuZGWCDmxvY2FsaG9zdDo1MTcyghZ0dWVpdGFwcC50
-dWVpdC5kZTo1MTcygg5sb2NhbGhvc3Q6NTE3M4IWdHVlaXRhcHAudHVlaXQuZGU6
-NTE3MzAdBgNVHQ4EFgQU7JiUZESlRqvV9kqKqR+I+EdpA7QwDQYJKoZIhvcNAQEL
-BQADggEBACvvYNLtaBoyM7Cy5WuaDaZtxbZvBqzORaNbHUqsGr5YLMlPwAoOj2cC
-NmeyVX/I8lqZC0vma1UuyXp6v2ykkuAHL+PJrzhJiUb1KDhC8qBtnviaqB4ZNwQ5
-m84BAiZGCS62q2vpFU4Ux/deDSiP8/P/cnRMCeN3DRtDumGq7/UBODbJuDw3Dt4U
-CT/cLF2gDm40CkCLFyI6mRSxck3LUvsHV05yf31ikuPQ/M5WIcVHtbQ/qavgDMUT
-SZmqKTg4NFVJGDhFQV/A0DBqC0qIVkszbrJSCwNTPyVID+jl9ukYoMQ4zjDwrwp5
-ScOInLpNHHsAJd2b7V9jEptt7gSE1dk=
------END CERTIFICATE-----

certs/localhost.key

@@ -1,28 +0,0 @@
------BEGIN PRIVATE KEY-----
-MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCb1uY42WSEnSxl
-P45BHt2Llim7UGhIgN3ncvCPhX3CzTZOFhlR8V9ie5SZAGgZ7VIBu99Nnd2kuMyy
-UGoDHPaDHBNZm3ka15PG2Z+W8qqYB6nJs4GoBwUo/AxyOt4nK4HFjAifAZ8QWAZj
-JEwfpWYNsLe93FLPU0ekKQ0vly18tDi2RRKEkIc8CmpGnUX4FIFBWulTDMiOfffT
-CEc4TfjqYrVNEjtCquLK/jzYF80JZ0bp7wWFsYXqggRyztjRhNx3HGZge/8KRYj+
-u2oRNGlY6fdhU0YPmEotyGmUPZlpgu8WzCKP11JslRHqPTDk6qCYs7h/LItk2A3M
-BGDiZAXvAgMBAAECggEAOatumfYVBSBW6Ab7gSzHZpsEyX0pgj8yHy8BR9NqJTck
-1APIjfLpTfwWkwI8A/A3a03XhpUXixgaJBivCoTi0sUGgiAPUngZhzpMnSMjL0yS
-sAI+RmyGo9KWVoVjZZJrnSvDmvgSIY25m2G4y/M8z28op9mLSY7zkZPhfc2Ptzg0
-HO+SvyfxjZF7hwbblo41GzXuk0L2xxJN4xVfLti2R1yc+R9bdbEmzmgeECeZaHyQ
-Y6XacbpafPZpC1bwNTv/0W8BVmXLG1FQo56zSTWOf8yt6gDBA970a++IPWNJzVBs
-qbVjaDCHAh+sjgeT0+2tUhInVHUrNTgCXxmjWmYf/QKBgQDWOca4y6tEy5r2bl2F
-OVdYYn44QUjccpV9WQ/UGzMfcrPcBxEWOYsddDkIdhK+ES9pU+dg0xjNVUGLkEKF
-IuWuUZAtU9048r+xYVTUT1BepTKD9CfZ72dpenfQqUWctT6Pm/fj55NtcowlqXu1
-IbbVcKv6sXmEj+FG7nb6olVcLQKBgQC6OnYBHFk4phQf1R7Zj+6khRYQTiy3z5Rh
-3gIzQq8YseHsfiQZRVkVI4YM+y9tlCKuiDyD9AnJAm37j5C9FrFTJmuigu5xNok5
-zG7Vz08Cm31Vrx/lO/flPDi8CYbjEvWHLu8F64gTiotneMSLy+Jex36A8Ez2dL9N
-A/w3z3dQCwKBgEHti/vJKk9Evc8DTiK27+uSfDfB17OIS/tEknt7V3NhMHsRba/C
-S87nurmg5Mm7rjSjDr0cmjBvAXn7Do28nKTWEyHwAlAJXPcw9hNUyW4nNvGnDTCj
-3dZ3SzJbNcIxgSxfGp334cY4D2tzyk+HLaZoQ3UmczhZs0HKF7GwjcaNAoGBAIej
-yQtqEHo4TPQakIu6UAE4hid+KQgAg3z87PFVIp+EAJ/2CGj3n7jL1Pljgtn3SYOB
-60HY37+uq1jM6okvHB0KIN+PKgj/xdd5VUkZ49xsUE+2bC7VDOvEfzZGYh7GUlsS
-DjproQNKp9rHlbCU4d5Sw4s6e3QO+L8ppe0oiSidAoGBAJCe7594SwX5JUwhdRuC
-c42pzlqgzeDFCxVafNG5Qi3myPZjum2RbvJVP7Abc+1OqMnRlHrejJZl/eFOxkiD
-baGMW+GneARmuwUGv8GWK4dsG+JNNtGKRh8D14ZzKokXKjcczh2xdnEbaK+6aQVt
-HvwvS3sXX44fuJaDd7rTtKkU
------END PRIVATE KEY-----

certs/privkey.pem

@@ -0,0 +1,5 @@
+-----BEGIN PRIVATE KEY-----
+MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQgAYAjn8GuqhyMWJyf
+Bxt8nTpBWm3S06NgzF1sjJqFijmhRANCAASn9J85xEOTqgwRRmdEzI6kx1VYkHpD
+QezcvL1AegSMLAlo9ejl1EuKVxv1yBTuiZlijI1N/qKUcC/EaSv+T+xp
+-----END PRIVATE KEY-----

clientsideConfig.js

@@ -1,8 +1,8 @@
 const clientsideConfig = {
-    // url: 'tueitapp.tueit.de',
-    // port: 8000,
+    // later for the server
+    //url: 'tueitapp.tueit.de',
     url: 'localhost',
     port: 3000,
 };
 
-export default clientsideConfig;
+export default clientsideConfig;

components/ClientSearch.vue

@@ -1,14 +1,35 @@
 <template>
   <section :class="['client-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
     <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Client</div>
-    <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">...</pre>
+    <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']">
   </section>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const filtered = computed(() => store.state.assetFiltered);
+const filteredTerm = computed(() => store.state.filteredAssetbyClient);
+const clientFilter = ref(store.state.filteredAssetbyClient);
 
 const darkMode = ref(true)
+
+// update filtered term
+const updateFilterTerm = () => {
+  clientFilter.value = filteredTerm.value
+}
+
+// update the filtered term in the store
+const filterConfigItemList = () => {
+  store.commit('updateAssetFilterbyClient', clientFilter.value);
+}
+
+watch(filteredTerm, updateFilterTerm)
 </script>
 
 <script>
@@ -76,4 +97,18 @@ export default {
   background-color: #EBEBEB;
   color: #000;
 }
+
+.input {
+  border: none;
+}
+
+.data-darkmode {
+  background-color: #212121;
+  color: #fff;
+}
+
+.data-lightmode {
+  background-color: #EBEBEB;
+  color: #000;
+}
 </style>

components/LoginForm.vue

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

components/server/Accounting.vue

@@ -3,96 +3,98 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="accounting">Accounting:
             <div class="asset-data">
                 <table class="data-table" id="asset-table-no-client">
-                    <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                        <th
-                            :class="['Action', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
-                            Action</th>
-                        <th
-                            :class="['Date', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                            Date</th>
-                        <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
-                    </tr>
-                    <tr :class="['table-row', darkMode ? 'first-tr-darkmode' : 'first-tr-lightmode']" id="row-1">
-                        <td
-                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
-                            Supplier request</td>
-                        <td
-                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                            ...</td>
-                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-                    </tr>
-                    <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']">
-                            Supplier offer</td>
-                        <td
-                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                            ...</td>
-                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-                    </tr>
-                    <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>
-                        <td
-                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                            ...</td>
-                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-                    </tr>
-                    <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>
-                        <td
-                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                            ...</td>
-                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-                    </tr>
-                    <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']">
-                            Supplier order</td>
-                        <td
-                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                            ...</td>
-                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-                    </tr>
-                    <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']">
-                            Ingress</td>
-                        <td
-                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                            ...</td>
-                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-                    </tr>
-                    <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']">
-                            Egress</td>
-                        <td
-                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                            ...</td>
-                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-                    </tr>
-                    <tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-2">
-                        <td
-                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
-                            Ingress bill</td>
-                        <td
-                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                            ...</td>
-                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-                    </tr>
-                    <tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-1">
-                        <td
-                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
-                            Egress bill</td>
-                        <td
-                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
-                            ...</td>
-                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-                    </tr>
+                    <tbody>
+                        <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                            <th
+                                :class="['Action', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Action</th>
+                            <th
+                                :class="['Date', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                Date</th>
+                            <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'first-tr-darkmode' : 'first-tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Supplier request</td>
+                            <td
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                        <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']">
+                                Supplier offer</td>
+                            <td
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                        <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>
+                            <td
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                        <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>
+                            <td
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                        <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']">
+                                Supplier order</td>
+                            <td
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                        <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']">
+                                Ingress</td>
+                            <td
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                        <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']">
+                                Egress</td>
+                            <td
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-2">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Ingress bill</td>
+                            <td
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                                Egress bill</td>
+                            <td
+                                :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                    </tbody>
                 </table>
             </div>
         </div>
@@ -257,4 +259,5 @@ tr#row-2 {
 
 .Comments {
     width: 40%;
-}</style>
+}
+</style>

components/server/Asset.vue

@@ -1,31 +1,59 @@
 <template>
-    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Asset name</h2>
+    <section v-if="!addAssetBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 v-if="!editable" :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
+            item.assetName }}</h2>
+        <input v-if="editable" v-model="item.assetName" @change="updateConfigItem()"
+            :class="['data', 'asset-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
         <div class="asset-data">
             <div class="client-location">
                 <div class="data-field" id="client">
                     <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</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"
+                        @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="location">
                     <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Location:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.location }}</pre>
+                    <input v-if="editable" v-model="item.location" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
             <div class="info">
                 <div class="id-type">
                     <div class="data-field" 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']">{{ item.primaryID }}</pre>
                     </div>
                     <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>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.type }}</pre>
+                        <input v-if="editable" v-model="item.type" @change="updateConfigItem()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                 </div>
-                <div class="data-field" id="remote-location">
-                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Remote location:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                <div class="remoteLocation-state">
+                    <div class="data-field" id="remote-location">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Remote location:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.remoteLocation }}</pre>
+                        <input v-if="editable" v-model="item.remoteLocation" @change="updateConfigItem()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="data-field" id="state">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.state }}</pre>
+                        <input v-if="editable" v-model="item.state" @change="updateConfigItem()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
                 </div>
             </div>
             <div class="rectangle-container">
@@ -36,30 +64,286 @@
             <div class="additional">
                 <div class="description">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
+                    <input v-model="item.description" :readonly="!editable" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
                 </div>
             </div>
             <div class="additional">
                 <div class="notes">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+                    <input v-model="item.notes" :readonly="!editable" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
+                </div>
+            </div>
+        </div>
+    </section>
+    <section v-if="addAssetBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <input v-model="newAssetName" @change="updateAsset()"
+            :class="['data', 'asset-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
+        <div class="asset-data">
+            <div class="client-location">
+                <div class="data-field" id="client">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
+                    <select id="customersDropDownChosenCI" v-model="newCustomer" @change="updateNewCustomerID()"
+                        :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                        <option v-for="cust in customers" :key="cust.primaryID">
+                            {{ cust.customername }}
+                        </option>
+                    </select>
+                </div>
+                <div class="data-field" id="location">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Location:</pre>
+                    <input v-model="newLocation" @change="updateAsset()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+            <div class="info">
+                <div class="id-type">
+                    <div class="data-field" id="id">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> ... </pre>
+                    </div>
+                    <div class="data-field" id="type">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
+                        <input v-model="newType" @change="updateAsset()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+                <div class="remoteLocation-state">
+                    <div class="data-field" id="remote-location">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Remote location:</pre>
+                        <input v-model="newRemoteLocation" @change="updateAsset()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="data-field" id="state">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
+                        <input v-model="newState" @change="updateAsset()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+            </div>
+            <div class="rectangle-container">
+                <div :class="['rectangle', darkMode ? 'rectangle-darkmode' : 'rectangle-lightmode']"></div>
+            </div>
+        </div>
+        <div class="asset-data">
+            <div class="additional">
+                <div class="description">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
+                    <input v-model="newDescription" @change="updateAsset()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
+                </div>
+            </div>
+            <div class="additional">
+                <div class="notes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <input v-model="newNotes" @change="updateAsset()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
                 </div>
             </div>
         </div>
-
     </section>
 </template>
     
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const editable = computed(() => store.state.assetEditable);
+const chosenAssetId = computed(() => store.state.chosenAssetId);
+const deleteAssetBool = computed(() => store.state.deleteAsset);
+const addAssetBool = computed(() => store.state.newAsset);
+
+const darkMode = ref(true);
+const item = ref({});
+const customer = ref({});
+const configItems = ref([]);
+const customers = ref([]);
+
+const newAssetName = ref('');
+const newCustomerID = ref('');
+const newCustomer = ref('');
+const newLocation = ref('');
+const newRemoteLocation = ref('');
+const newType = ref('');
+const newDescription = ref('');
+const newNotes = ref('');
+const newState = ref('');
+
+// get config item from id
+const getItemById = async () => {
+    if (!addAssetBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
+            );
+            item.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// update asset fields in the store
+const updateAsset = () => {
+    const asset = {
+        assetName: newAssetName.value,
+        customerId: newCustomerID.value,
+        customer: newCustomer.value,
+        location: newLocation.value,
+        remoteLocation: newRemoteLocation.value,
+        type: newType.value,
+        description: newDescription.value,
+        notes: newNotes.value,
+        state: newState.value
+    }; 
+    store.commit('updateAssetComponent', asset);
+}
+
+//update data
+const updateConfigItem = async () => {
+    if (item.value.assetName.trim() === "") {
+        alert("Please add a config item name!");
+        return;
+    } else {
+        var counter = 0;
+        // check if config item name already exists
+        configItems.value.forEach(ci => {
+            if (ci.assetName === item.value.assetName) {
+                counter += 1;
+            }
+        });
+        if (counter == 1) {
+            alert("This asset name already exists. Please choose an unique asset name or modify respectively delete the old one!");
+            item.value.assetName = '';
+            return;
+        }
+        try {
+            await Axios.put(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateConfigItem`,
+                {
+                    primaryID: item.value.primaryID,
+                    assetName: item.value.assetName,
+                    customerID: item.value.customerID,
+                    customer: item.value.customer,
+                    location: item.value.location,
+                    remoteLocation: item.value.remoteLocation,
+                    type: item.value.type,
+                    description: item.value.description,
+                    notes: item.value.notes,
+                    state: item.value.state,
+                    lastView: item.value.lastView,
+                    user: item.value.user,
+                    hardwareBool: item.value.hardwareBool,
+                    model: item.value.model,
+                    serialnumber: item.value.serialnumber,
+                    CPU: item.value.CPU,
+                    RAM: item.value.RAM,
+                    storageConfiguration: item.value.storageConfiguration,
+                    miscellaneous: item.value.miscellaneous,
+                    softwareBool: item.value.softwareBool,
+                    software: item.value.software,
+                    version: item.value.version,
+                    license: item.value.license,
+                    networkBool: item.value.networkBool,
+                    IPv4: item.value.IPv4,
+                    IPv6: item.value.IPv6,
+                    MAC: item.value.MAC,
+                    subnetmask: item.value.subnetmask,
+                }
+            )
+            await getItemById();
+        } 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 confirmDeleteAsset = async () => {
+    if (deleteAssetBool.value === true) {
+        if (confirm("Do you really want to delete this config item? It cannot be undone!")) {
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteConfigItem/${chosenAssetId.value}`);
+                store.commit('undoDeleteAsset');
+                store.commit('changeToAssetlist');
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        } else {
+            store.commit('undoDeleteAsset');
+        }
+    }
+}
+
+//get all config items
+const getConfigItems = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllConfigItems`);
+        configItems.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/${item.value.customer}`);
+        customer.value = response.data;
+        item.value.customerID = customer.value.customerID;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+    await updateConfigItem();
+}
+
+// update customerid if customer was changed
+const updateNewCustomerID = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${newCustomer.value}`);
+        newCustomerID.value = response.data.customerID;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+    updateAsset();
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
+
+watch(deleteAssetBool, confirmDeleteAsset);
+
+onMounted(() => {
+    getItemById();
+    getConfigItems();
+    triggerBackendCallsWithDelay(getCustomers);
+});
 
-const darkMode = ref(true)
 </script>
 
 <script>
 export default {
     name: "Asset",
-};
+}
 </script>
       
       
@@ -69,7 +353,6 @@ export default {
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
-    width: 100%;
     padding: 1.25rem 1.875rem;
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
@@ -93,6 +376,16 @@ export default {
         sans-serif;
 }
 
+.asset-name-input {
+    padding: 1rem 0;
+    margin: 1rem;
+    font-size: initial;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
+
 .h2-darkmode {
     color: #fff;
 }
@@ -107,11 +400,19 @@ export default {
     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;
 }
 
+.h2-input-darkmode {
+    background-color: #212121;
+}
+
+.h2-input-lightmode {
+    background-color: #EBEBEB;
+}
+
 .data-field#street-name {
     width: 70%;
 }
@@ -133,9 +434,13 @@ export default {
     color: #000;
 }
 
+.input {
+    border: none;
+}
+
 .data {
     display: flex;
-    flex-direction: row;
+    overflow-x: auto;
     align-items: flex-start;
     padding: 0 0.625rem;
     border-radius: 0.3125rem;
@@ -157,6 +462,9 @@ export default {
 .data#notes,
 .data#description {
     align-self: stretch;
+    /* width: 45%; */
+    scrollbar-width: none;
+    overflow-x: auto;
 }
 
 .asset-data {
@@ -203,7 +511,8 @@ export default {
     color: #000;
 }
 
-.id-type {
+.id-type,
+.remoteLocation-state {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -243,4 +552,20 @@ export default {
 .rectangle-lightmode {
     background-color: #EBEBEB;
 }
-</style>
+
+.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;
+}
+</style>

components/server/AssetSolutionList.vue

@@ -2,18 +2,21 @@
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
         <table class="data-table" id="solution-checkklist">
-            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th
-                    :class="['Solution', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']">
-                    Solution</th>
-                <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode']">Type</th>
-            </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td
-                    :class="['Solution', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']">
-                    ...</td>
-                <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-            </tr>
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Solution', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']">
+                        Solution</th>
+                    <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode']">Type</th>
+                </tr>
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Solution', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']">
+                        ...</td>
+                    <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
+
         </table>
     </div>
 </template>
@@ -168,4 +171,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
+}
+</style>

components/server/AssetTable.vue

@@ -1,45 +1,128 @@
 <template>
+    <section v-if="assetSearchable" :class="['asset-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Config item</div>
+        <input v-model="assetSearchFilter" @change="searchConfigItem()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </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="asset-table">
-            <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>
-                <th
-                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    Name</th>
-                <th
-                    :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                    Type</th>
-                <th
-                    :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                    State</th>
-                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
-            </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td
-                    :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                    ...</td>
-                <td
-                    :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                    ...</td>
-                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-            </tr>
+            <tbody>
+                <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>
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
+                    <th
+                        :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        Type</th>
+                    <th
+                        :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        State</th>
+                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+                </tr>
+                <tr v-for="item in configItemList" :key="item.primaryID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']">
+                    <td
+                        :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                        {{ item.customer }}
+                    </td>
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        <!-- <router-link to="/assets" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" > {{
+                                item.assetName }} </router-link> -->
+                        <nuxt-link to="/assets" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            @click="goToChosenAsset(item.primaryID)">
+                            {{ item.assetName }}
+                        </nuxt-link>
+                    </td>
+                    <td
+                        :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        {{ item.type }}</td>
+                    <td
+                        :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        {{ item.state }}</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ item.user }}</td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </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';
 
+// get accesss to the store
+const store = useStore()
+const goToChosenAsset = (id) => {
+    store.commit('setChosenAsset', id);
+    store.commit('changeToAsset');
+};
+const clientFilter = computed(() => store.state.filteredAssetbyClient);
+const assetSearchable = computed(() => store.state.assetSearchable);
+
+const assetSearchFilter = ref('');
 const darkMode = ref(true)
+const configItemList = ref([]);
+
+// update search term
+const updateSearchTerm = async () => {
+    assetSearchFilter.value = '';
+    await getConfigItems();
+}
+
+//get all config items
+const getConfigItems = async () => {
+    if (!(clientFilter.value === '')) {
+        await getFilteredConfigItemsByClient();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllConfigItems`);
+            configItemList.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all config items based on the searched client
+const getFilteredConfigItemsByClient = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedConfigItemsByClient/${clientFilter.value}`);
+        configItemList.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//get all config items based on the searched asset name
+const searchConfigItem = async () => {
+    if (assetSearchFilter.value === '') {
+        await getConfigItems();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedConfigItemsByAsset/${assetSearchFilter.value}`);
+            configItemList.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+watch(clientFilter, getConfigItems);
+watch(assetSearchable, updateSearchTerm);
+
+onMounted(async () => {
+    await getConfigItems();
+});
 </script>
 
 <script>
@@ -56,13 +139,58 @@ export default {
     align-items: flex-start;
     justify-content: center;
     align-self: stretch;
-    width: 100%;
+    /* 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);
 }
 
+.asset-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;
+}
+
+.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;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.input {
+    border: none;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
 .div-darkmode {
     background-color: #2c2c2c;
 }
@@ -191,10 +319,27 @@ th {
     letter-spacing: 0.05em;
 }
 
+.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;
+}
+
 .label-darkmode {
     color: #FFFFFF;
 }
 
 .label-lightmode {
     color: #000;
-}</style>
+}
+
+#nuxt-link {
+    text-decoration: none;
+    color: white;
+}
+</style>

components/server/AssetTableNoClient.vue

@@ -2,30 +2,32 @@
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets:</div>
         <table class="data-table" id="asset-table-no-client">
-            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th
-                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    Name</th>
-                <th
-                    :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                    Type</th>
-                <th
-                    :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                    State</th>
-                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
-            </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td
-                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                    ...</td>
-                <td
-                    :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                    ...</td>
-                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-            </tr>
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
+                    <th
+                        :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        Type</th>
+                    <th
+                        :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        State</th>
+                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+                </tr>
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        ...</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </template>

components/server/Client.vue

@@ -1,13 +1,13 @@
 <template>
-  <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-    <h2 :class="['client-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Client name</h2>
+  <section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Client name</pre>
     <div class="data-field" id="client-id">
       <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
       <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
     </div>
     <div class="client-data">
       <div class="contact">
-        <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contact:</h3>
+        <pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contact:</pre>
         <div class="data-field" id="contact-person">
           <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Contact person:</pre>
           <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
@@ -22,7 +22,7 @@
         </div>
       </div>
       <div class="address">
-        <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Address:</h3>
+        <pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Address:</pre>
         <div class="street-address">
           <div class="data-field" id="street-name">
             <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Street:</pre>
@@ -44,7 +44,7 @@
       </div>
     </div>
     <div class="notes">
-      <h3  :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+      <pre  :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</pre>
       <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
     </div>
   </section>
@@ -65,138 +65,102 @@ export default {
     
     
 <style scoped>
-.information {
+
+
+section {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  width: 100%;
   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;
-}
+  align-items: stretch;
+  justify-content: center;
+} 
+.section-darkmode { background-color: #2c2c2c; }
+.section-lightmode { background-color: #ffffff; }
 
 
-.client-name {
-  align-self: stretch;
+.title {
   padding: 1.25rem 0;
-  letter-spacing: 5%;
+  letter-spacing: 0.05rem;
   text-decoration-line: underline;
-  font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
-    sans-serif;
-}
+  font: italic 400 1rem/1.875rem Overpass, sans-serif;
+} 
+.title-darkmode { color: #ffffff; } 
+.title-lightmode { color: #000000; }
 
-.h2-darkmode {
-    color: #fff;
-}
-
-.h2-lightmode {
-    color: #000;
-}
 
 .data-field {
   display: flex;
+  flex: auto;
   flex-direction: row;
+  padding: 0 1.875rem;
   align-items: center;
   justify-content: flex-start;
-  width: 100%;
-  padding: 0 1.875rem;
   gap: 1.25rem;
-  border-radius: 0.625rem;
-}
-
-.data-field#client-id {
-  padding: 0.625rem 1.875rem;
-}
-
-.data-field#street-name {
-  width: 70%;
-}
-
-.data-field#street-no {
-  width: 30%;
-}
+} 
+.data-field#client-id { padding: 0.625rem 1.875rem; }
+.data-field#street-name { flex: 3; } 
 
 .label {
-  letter-spacing: 5%;
+  letter-spacing: 0.03rem;
   font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-.pre-darkmode {
-    color: #fff;
-}
-
-.pre-lightmode {
-    color: #000;
+pre {
+  margin: 0;
 }
+.pre-darkmode { color: #ffffff; } 
+.pre-lightmode { color: #000000; }
 
 .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;
   background-color: #212121;
+  align-items: center;
+  justify-content: flex-start;
   letter-spacing: 5%;
   font: 400 0.75rem/250% Overpass, sans-serif;
-}
-
+} 
 .data-darkmode {
-    background-color: #212121;
-    color: #fff;
-}
-
+  background-color: #212121;
+  color: #ffffff;
+} 
 .data-lightmode {
-    background-color: #EBEBEB;
-    color: #000;
-}
+  background-color: #ebebeb;
+  color: #000000;
+} 
 
-.data#notes {
-  align-self: stretch;
-}
 
 .client-data {
   display: flex;
+  flex: auto;
   flex-direction: row;
+  padding: 1.25rem 1.875rem;
   align-items: center;
-  justify-content: flex-start;
-  align-self: stretch;
-  padding: 0 0.625rem;
+  justify-content: stretch;
+  gap: 0.625rem
 }
 
-.contact,
-.address {
+.contact, .address {
   display: flex;
+  flex: auto;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  line-height: normal;
-  width: 50%;
-  padding: 1.25rem 0.625rem;
-  border-radius: 0.3125rem;
+  gap: 0.625rem;
 }
 
 .area-title {
-  letter-spacing: 5%;
+  letter-spacing: 0.03rem;
   font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-.h3-darkmode {
-    color: #fff;
-}
-
-.h3-lightmode {
-    color: #000;
-}
+.h3-darkmode { color: #ffffff; } 
+.h3-lightmode { color: #000000; }
 
 
 .street-address {
@@ -205,15 +169,17 @@ export default {
   align-items: center;
   justify-content: space-between;
   align-self: stretch;
-  padding: 0 1.875rem 0 0;
   gap: 0.625rem;
 }
 
 .notes {
   display: flex;
   flex-direction: column;
+  padding: 0.625rem 1.875rem;
   align-items: flex-start;
   justify-content: center;
-  align-self: stretch;
-  padding: 0.625rem 1.875rem 0.625rem 1.25rem;
-}</style>
+  gap: 0.625rem;
+}
+#notes { align-self: stretch; }
+
+</style>

components/server/ClientDepartment.vue

@@ -0,0 +1,143 @@
+<template>
+    <section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
+      <pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Department name</pre>
+      <div class="data-group">
+        <div class="data-field" id="id">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+            <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="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+        <div class="data-field" id="head">
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Head:</pre>
+            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+      </div>
+      <div class="notes">
+            <pre  :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
+            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+      </div>
+    </section>
+</template>
+  
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+name: "ClientDepartment",
+};
+</script>   
+
+
+
+<style scoped>
+
+* { 
+box-sizing: border-box;
+margin: 0; 
+}
+
+
+section {
+display: flex;
+flex-direction: column;
+padding: 1.25rem 1.875rem;
+border-radius: 0.625rem;
+box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+align-items: stretch;
+justify-content: center;
+} 
+.section-darkmode { background-color: #2c2c2c; }
+.section-lightmode { background-color: #ffffff; }
+
+
+.title {
+padding: 1.25rem 0;
+letter-spacing: 0.04rem;
+text-decoration-line: underline;
+font: italic 400 1rem/1.875rem Overpass, sans-serif;
+} 
+.title-darkmode { color: #ffffff; } 
+.title-lightmode { color: #000000; }
+
+
+
+.data-group {
+display: flex;
+flex: auto;
+width: 100%;
+flex-direction: row;
+padding: 0.625rem 0;
+align-items: center;
+justify-content: stretch;
+}
+
+
+.data-field {
+display: flex;
+flex: auto;
+width: 30%;
+flex-direction: row;
+padding: 0.625rem 1.875rem;
+align-items: center;
+justify-content: flex-start;
+gap: 1.25rem;
+} 
+#head { width: 40%; }
+
+.label {
+letter-spacing: 0.02rem;
+font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode { color: #ffffff; } 
+.pre-lightmode { color: #000000; }
+
+.data {
+display: flex;
+flex-direction: row;
+padding: 0 0.625rem;
+border-radius: 0.3125rem;
+box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+background-color: #212121;
+align-items: center;
+justify-content: flex-start;
+letter-spacing: 0.02rem;
+font: 400 0.75rem/1.875rem Overpass, sans-serif;
+} 
+.data-darkmode {
+background-color: #212121;
+color: #ffffff;
+} 
+.data-lightmode {
+background-color: #ebebeb;
+color: #000000;
+} 
+
+
+.notes {
+display: flex;
+flex: auto;
+flex-direction: column;
+padding: 1.25rem 1.875rem 0.625rem;
+align-items: flex-start;
+justify-content: center;
+gap: 0.625rem;
+}
+
+.area-title {
+letter-spacing: 0.03rem;
+font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+#notes { align-self: stretch; }
+
+</style>

components/server/ClientDepartmentEmployeeList.vue

@@ -0,0 +1,117 @@
+
+<template>
+    <section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employees:</div>
+        <table class="data-table" id="client-employee-table">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
+                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                <th :class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">Job Title</th>
+                <th :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">Pronouns</th>
+            </tr>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
+                <td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                <td :class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">...</td>
+                <td :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">...</td>
+            </tr>
+        </table>
+    </section>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+  name: "ClientDepartmentEmployeeList",
+};
+</script>   
+
+  
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    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: #ffffff; }
+
+
+
+.label {
+    padding: 1.25rem 0;
+    letter-spacing: 0.04rem;
+    text-decoration-line: underline;
+    font: 400 1rem/1.875rem Overpass, sans-serif;
+}
+.label-darkmode { color: #ffffff; }
+.label-lightmode { color: #000000; }
+
+
+
+.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;
+    width: 35%;
+    padding: 0;
+    text-align: left;
+    border-left: none;
+    letter-spacing: 0.02rem;
+    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;
+    border-right: 0.0625rem solid #000000;
+}
+.th-lightmode, .td-lightmode { 
+    color: #000000;
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.ID { width: 20%; }
+.Pronouns { width: 10%; }
+
+.Pronouns-darkmode { border-right: none; }
+.Pronouns-lightmode { border-right: none; }
+
+
+</style>

components/server/ClientDepartmentList.vue

@@ -0,0 +1,112 @@
+<template>
+    <section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Departments:</div>
+        <table class="data-table" id="client-employee-table">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
+                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                <th :class="['DHead', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'DHead-darkmode' : 'DHead-lightmode']">Head</th>
+            </tr>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
+                <td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                <td :class="['DHead', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'DHead-darkmode' : 'DHead-lightmode']">...</td>
+            </tr>
+        </table>
+    </section>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+  name: "ClientDepartmentList",
+};
+</script>   
+
+  
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    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: #ffffff; }
+
+
+
+.label {
+    padding: 1.25rem 0;
+    letter-spacing: 0.04rem;
+    text-decoration-line: underline;
+    font: 400 1rem/1.875rem Overpass, sans-serif;
+}
+.label-darkmode { color: #ffffff; }
+.label-lightmode { color: #000000; }
+
+
+
+.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;
+    width: 40%;
+    padding: 0;
+    text-align: left;
+    border-left: none;
+    letter-spacing: 0.02rem;
+    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;
+    border-right: 0.0625rem solid #000000;
+}
+.th-lightmode, .td-lightmode { 
+    color: #000000;
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.ID { width: 20%; }
+
+.DHead { border-right: none; }
+
+
+</style>

components/server/ClientEmployee.vue

@@ -0,0 +1,191 @@
+<template>
+  <section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Employee name</pre>
+    <div class="data-group" id="personal-data">
+      <div class="data-group" id="full-name">
+        <div class="data-field" id="ntitle">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Title/-s:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+        <div class="data-field" id="first-name">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">First Name/-s:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+        <div class="data-field" id="last-name">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Last Name/-s:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+      </div>
+      <div class="data-group" id="other">
+        <div class="data-field" id="id">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+        <div class="data-field" id="pronouns">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Pronouns:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+        <div class="data-field" id="preferred-name">
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Preferred Name:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        </div>
+      </div>
+    </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="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+      </div>
+      <div class="data-field" id="department">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Department:</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+      </div>
+      <div class="data-field" id="job-title">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Job Title:</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+      </div>
+    </div>
+    <div class="data-group" id="contact-data">
+      <div class="data-field" id="phone">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phone No.:</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+      </div>
+      <div class="data-field" id="mail">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">E-Mail:</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+      </div>
+    </div>
+    <div class="notes">
+      <pre  :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
+      <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+    </div>
+  </section>
+</template>
+
+
+
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+  name: "ClientEmployee",
+};
+</script>   
+  
+  
+  
+<style scoped>
+
+* { 
+  box-sizing: border-box;
+  margin: 0; 
+}
+
+
+section {
+  display: flex;
+  flex-direction: column;
+  padding: 1.25rem 1.875rem;
+  border-radius: 0.625rem;
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+  align-items: stretch;
+  justify-content: center;
+} 
+.section-darkmode { background-color: #2c2c2c; }
+.section-lightmode { background-color: #ffffff; }
+
+
+.title {
+  padding: 1.25rem 0;
+  letter-spacing: 0.04rem;
+  text-decoration-line: underline;
+  font: italic 400 1rem/1.875rem Overpass, sans-serif;
+} 
+.title-darkmode { color: #ffffff; } 
+.title-lightmode { color: #000000; }
+
+
+
+.data-group {
+  display: flex;
+  flex: auto;
+  width: 100%;
+  flex-direction: row;
+  padding: 1.25rem 0;
+  align-items: center;
+  justify-content: stretch;
+}
+#personal-data {
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: 0.625rem;
+}
+#full-name, #other { padding: 0; }
+
+
+.data-field {
+  display: flex;
+  flex: auto;
+  width: 20%;
+  flex-direction: row;
+  padding: 0 1.875rem;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 1.25rem;
+} 
+#first-name, #last-name, #department, #job-title, #phone { width: 40%; }
+#preferred-name, #mail { width: 60%; }
+
+.label {
+  letter-spacing: 0.02rem;
+  font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode { color: #ffffff; } 
+.pre-lightmode { color: #000000; }
+
+.data {
+  display: flex;
+  flex-direction: row;
+  padding: 0 0.625rem;
+  border-radius: 0.3125rem;
+  box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+  background-color: #212121;
+  align-items: center;
+  justify-content: flex-start;
+  letter-spacing: 0.02rem;
+  font: 400 0.75rem/1.875rem Overpass, sans-serif;
+} 
+.data-darkmode {
+  background-color: #212121;
+  color: #ffffff;
+} 
+.data-lightmode {
+  background-color: #ebebeb;
+  color: #000000;
+} 
+
+
+.notes {
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  padding: 1.25rem 1.875rem 0.625rem;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 0.625rem;
+}
+
+.area-title {
+  letter-spacing: 0.03rem;
+  font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+#notes { align-self: stretch; }
+
+</style>

components/server/ClientEmployeeList.vue

@@ -0,0 +1,116 @@
+<template>
+    <section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employees:</div>
+        <table class="data-table" id="client-employee-table">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
+                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                <th :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">Department / Job Title</th>
+                <th :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">Pronouns</th>
+            </tr>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
+                <td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                <td :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">...</td>
+                <td :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">...</td>
+            </tr>
+        </table>
+    </section>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+  name: "ClientEmployeeList",
+};
+</script>   
+
+  
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    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: #ffffff; }
+
+
+
+.label {
+    padding: 1.25rem 0;
+    letter-spacing: 0.04rem;
+    text-decoration-line: underline;
+    font: 400 1rem/1.875rem Overpass, sans-serif;
+}
+.label-darkmode { color: #ffffff; }
+.label-lightmode { color: #000000; }
+
+
+
+.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;
+    width: 35%;
+    padding: 0;
+    text-align: left;
+    border-left: none;
+    letter-spacing: 0.02rem;
+    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;
+    border-right: 0.0625rem solid #000000;
+}
+.th-lightmode, .td-lightmode { 
+    color: #000000;
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.ID { width: 20%; }
+.Pronouns { width: 10%; }
+
+.Pronouns-darkmode { border-right: none; }
+.Pronouns-lightmode { border-right: none; }
+
+
+</style>

components/server/ClientTable.vue

@@ -1,22 +1,27 @@
 <template>
-    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+    <section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <table class="data-table" id="client-table">
-            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
-                </th>
-                <th
-                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    Name</th>
-            </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    ...</td>
-            </tr>
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        ID
+                    </th>
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
+                </tr>
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        ...</td>
+                </tr>
+            </tbody>
         </table>
-    </div>
+    </section>
 </template>
   
   
@@ -47,12 +52,12 @@ export default {
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
 }
 
-.div-darkmode {
+.section-darkmode {
     background-color: #2c2c2c;
 }
 
-.div-lightmode {
-    background-color: #fff;
+.section-lightmode {
+    background-color: #ffffff;
 }
 
 .data-table {
@@ -89,8 +94,7 @@ export default {
     border-top: 0.0625rem solid #8e8e8e;
 }
 
-th,
-td {
+th, td {
     height: 1.875rem;
     text-align: left;
     padding: 0;
@@ -98,14 +102,12 @@ td {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-.th-darkmode,
-.td-darkmode {
+.th-darkmode, .td-darkmode {
     color: #ffffff;
 }
 
-.th-lightmode,
-.td-lightmode {
-    color: #000;
+.th-lightmode, .td-lightmode {
+    color: #000000;
 }
 
 th {
@@ -126,5 +128,4 @@ th {
 
 .Name {
     width: 60%;
-}
-</style>
+}</style>

components/server/HardwareSpecifications.vue

@@ -1,25 +1,38 @@
 <template>
-    <section :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="hardwareBoolean && !addAssetBool"
+        :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:</div>
         <div class="asset-data">
             <div class="model-CPU">
                 <div class="data-field" id="model">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Model:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.model }}</pre>
+                    <input v-if="editable" v-model="item.model" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
                 <div class="data-field" id="CPU">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">CPU:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.CPU }}</pre>
+                    <input v-if="editable" v-model="item.CPU" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
             <div class="serial-number-RAM">
                 <div class="data-field" id="serial-number">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Serial number:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.serialnumber }}</pre>
+                    <input v-if="editable" v-model="item.serialnumber" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
                 <div class="data-field" id="RAM">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">RAM:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.RAM }}</pre>
+                    <input v-if="editable" v-model="item.RAM" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
         </div>
@@ -27,14 +40,62 @@
             <div class="additional">
                 <div class="storage-configuration">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Storage configuration:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
-                        id="storage-configuration">...</pre>
+                    <input v-model="item.storageConfiguration" :readonly="!editable" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="storage-configuration">
                 </div>
             </div>
             <div class="additional">
                 <div class="miscellaneous">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Miscellaneous:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">...</pre>
+                    <input v-model="item.miscellaneous" :readonly="!editable" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">
+                </div>
+            </div>
+        </div>
+    </section>
+    <section v-if="addAssetBool" :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:</div>
+        <div class="asset-data">
+            <div class="model-CPU">
+                <div class="data-field" id="model">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Model:</pre>
+                    <input v-model="newModel" @change="updateAsset()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <div class="data-field" id="CPU">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">CPU:</pre>
+                    <input v-model="newCPU" @change="updateAsset()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+            <div class="serial-number-RAM">
+                <div class="data-field" id="serial-number">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Serial number:</pre>
+                    <input v-model="newSerialnumber" @change="updateAsset()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <div class="data-field" id="RAM">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">RAM:</pre>
+                    <input v-model="newRAM" @change="updateAsset()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+        </div>
+        <div class="asset-data">
+            <div class="additional">
+                <div class="storage-configuration">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Storage configuration:</h3>
+                    <input v-model="newStorageConfiguration" @change="updateAsset()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="storage-configuration">
+                </div>
+            </div>
+            <div class="additional">
+                <div class="miscellaneous">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Miscellaneous:</h3>
+                    <input v-model="newMiscellaneous" @change="updateAsset()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">
                 </div>
             </div>
         </div>
@@ -43,9 +104,109 @@
     
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const editable = computed(() => store.state.assetEditable);
+const chosenAssetId = computed(() => store.state.chosenAssetId);
+const addAssetBool = computed(() => store.state.newAsset);
+
+const newHardwareBool = ref(true);
+const newModel = ref('');
+const newSerialnumber = ref('');
+const newCPU = ref('');
+const newRAM = ref('');
+const newStorageConfiguration = ref('');
+const newMiscellaneous = ref('');
 
 const darkMode = ref(true)
+const item = ref({});
+const hardwareBoolean = ref(false)
+
+// get config item from id
+const getItemById = async () => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
+        );
+        item.value = response.data;
+        if (item.value.hardwareBool == 1) {
+            hardwareBoolean.value = true;
+        };
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// update hardware fields in the store
+const updateAsset = () => {
+    if (newModel.value.length === 0 && newSerialnumber.value.length === 0 && newCPU.value.length === 0 && newRAM.value.length === 0 && newStorageConfiguration.value.length === 0 && newMiscellaneous.value.length === 0) {
+        newHardwareBool.value = false
+    }
+    const asset = {
+        hardwareBool: newHardwareBool.value,
+        model: newModel.value,
+        serialnumber: newSerialnumber.value,
+        CPU: newCPU.value,
+        RAM: newRAM.value,
+        storageConfig: newStorageConfiguration.value,
+        miscellaneous: newMiscellaneous.value,
+    }; 
+    store.commit('updateHardwareComponent', asset);
+}
+
+//update data
+const updateConfigItem = async () => {
+    if (item.value.model.length === 0 && item.value.serialnumber.length === 0 && item.value.CPU.length === 0 && item.value.RAM.length === 0 && item.value.storageConfiguration.length === 0 && item.value.miscellaneous.length === 0) {
+        item.value.hardwareBool = 0;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateConfigItem`,
+            {
+                primaryID: item.value.primaryID,
+                assetName: item.value.assetName,
+                customerID: item.value.customerID,
+                customer: item.value.customer,
+                location: item.value.location,
+                remoteLocation: item.value.remoteLocation,
+                type: item.value.type,
+                description: item.value.description,
+                notes: item.value.notes,
+                state: item.value.state,
+                lastView: item.value.lastView,
+                user: item.value.user,
+                hardwareBool: item.value.hardwareBool,
+                model: item.value.model,
+                serialnumber: item.value.serialnumber,
+                CPU: item.value.CPU,
+                RAM: item.value.RAM,
+                storageConfiguration: item.value.storageConfiguration,
+                miscellaneous: item.value.miscellaneous,
+                softwareBool: item.value.softwareBool,
+                software: item.value.software,
+                version: item.value.version,
+                license: item.value.license,
+                networkBool: item.value.networkBool,
+                IPv4: item.value.IPv4,
+                IPv6: item.value.IPv6,
+                MAC: item.value.MAC,
+                subnetmask: item.value.subnetmask,
+            }
+        );
+        await getItemById();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+onMounted(() => {
+    getItemById();
+});
 </script>
 
 <script>
@@ -61,7 +222,6 @@ export default {
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
-    width: 100%;
     padding: 1.25rem 1.875rem;
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
@@ -82,7 +242,7 @@ export default {
     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;
 }
@@ -118,6 +278,10 @@ export default {
     font: 400 0.75rem/250% Overpass, sans-serif;
 }
 
+.input {
+    border: none;
+}
+
 .data-darkmode {
     background-color: #212121;
     color: #fff;

components/server/InstanceChecklist.vue

@@ -2,37 +2,39 @@
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
         <table class="data-table" id="instance-checklist">
-            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th
-                    :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
-                    Step</th>
-                <th
-                    :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                    Asset</th>
-                <th
-                    :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
-                    Task</th>
-                <th
-                    :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
-                    Comments</th>
-                <th :class="['Done', darkMode ? 'th-darkmode' : 'th-lightmode']">Done</th>
-            </tr>
-            <tr :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>
-                <td
-                    :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
-                    ...</td>
-                <td :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
-                        :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
-            </tr>
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                        Step</th>
+                    <th
+                        :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        Asset</th>
+                    <th
+                        :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        Task</th>
+                    <th
+                        :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
+                        Comments</th>
+                    <th :class="['Done', darkMode ? 'th-darkmode' : 'th-lightmode']">Done</th>
+                </tr>
+                <tr :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>
+                    <td
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
+                        ...</td>
+                    <td :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
+                            :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </template>

components/server/IssueSlipTable.vue

@@ -2,43 +2,66 @@
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
         <table class="data-table" id="asset-table">
-            <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>
-                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
-                </th>
-                <th
-                    :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
-                    Ticket No.</th>
-                <th
-                    :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
-                    Creation Date</th>
-                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
-            </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td
-                    :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                    ...</td>
-                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                    ...</td>
-                <td
-                    :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
-                    ...</td>
-                <td
-                    :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
-                    ...</td>
-                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-            </tr>
+            <tbody>
+                <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>
+                    <th
+                        :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        ID
+                    </th>
+                    <th
+                        :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
+                        Ticket No.</th>
+                    <th
+                        :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                        Creation Date</th>
+                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+                </tr>
+                <tr v-for="issueSlip in issueSlips" :key="issueSlip.primaryID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                        {{ issueSlip.customer }}</td>
+                    <td
+                        :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        {{ issueSlip.primaryID }}</td>
+                    <td
+                        :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
+                        {{ issueSlip.ticketNo }}</td>
+                    <td
+                        :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                        {{ issueSlip.creationDate }}</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ issueSlip.user }}</td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </template>
   
   
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const darkMode = ref(true)
+const issueSlips = ref([]);
+
+//get all issueSlips
+const getIssueSlips = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllIssueSlips`);
+        issueSlips.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+onMounted(() => {
+    getIssueSlips();
+});
 </script>
 
 <script>
@@ -47,8 +70,6 @@ export default {
 };
 </script>
     
-    
-    
 <style scoped>
 .data {
     display: flex;

components/server/IssueSlipTableNoClient.vue

@@ -2,28 +2,33 @@
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issue slip:</div>
         <table class="data-table" id="asset-table">
-            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
-                </th>
-                <th
-                    :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
-                    Ticket No.</th>
-                <th
-                    :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
-                    Creation Date</th>
-                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
-            </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                    ...</td>
-                <td
-                    :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
-                    ...</td>
-                <td
-                    :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
-                    ...</td>
-                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-            </tr>
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        ID
+                    </th>
+                    <th
+                        :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
+                        Ticket No.</th>
+                    <th
+                        :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                        Creation Date</th>
+                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+                </tr>
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                        ...</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </template>

components/server/IssueTable.vue

@@ -2,39 +2,59 @@
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issues:</div>
         <table class="data-table" id="asset-table">
-            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th
-                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    Name</th>
-                <th
-                    :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                    Type</th>
-                <th
-                    :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                    State</th>
-                <th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode']">Amount</th>
-            </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td
-                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                    ...</td>
-                <td
-                    :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                    ...</td>
-                <td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-            </tr>
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
+                    <th
+                        :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        Type</th>
+                    <th
+                        :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        State</th>
+                    <th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode']">Amount</th>
+                </tr>
+                <tr v-for="issue in issues" :key="issue.primaryID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        {{ issue.name }}</td>
+                    <td
+                        :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        {{ issue.type }}</td>
+                    <td
+                        :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        {{ issue.state }}</td>
+                    <td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ issue.amount }}</td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </template>
   
   
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const darkMode = ref(true)
+const issues = ref([]);
+
+//get all issue
+const getIssues = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllIssues`);
+        issues.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+onMounted(() => {
+    getIssues();
+});
 </script>
 
 <script>
@@ -181,4 +201,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
+}
+</style>

components/server/IssueVariants.vue

@@ -2,36 +2,38 @@
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Variants:</div>
         <table class="data-table" id="issue-variants-table">
-            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th
-                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    Name</th>
-                <th
-                    :class="['Properties', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
-                    Properties</th>
-                <th
-                    :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                    State</th>
-                <th
-                    :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
-                    Amount</th>
-                <th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode']">Price</th>
-            </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td
-                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
-                    ...</td>
-                <td
-                    :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
-                    ...</td>
-                <td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-            </tr>
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
+                    <th
+                        :class="['Properties', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
+                        Properties</th>
+                    <th
+                        :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        State</th>
+                    <th
+                        :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                        Amount</th>
+                    <th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode']">Price</th>
+                </tr>
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                        ...</td>
+                    <td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </template>
@@ -198,4 +200,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
+}
+</style>

components/server/MaintenanceVisitsInstanceTable.vue

@@ -2,40 +2,44 @@
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances:</div>
         <table class="data-table" name="maintenance-visits-instance-table">
-            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                    ID</th>
-                <th
-                    :class="['MaintenanceType', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
-                    Maintenance type</th>
-                <th
-                    :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                    State</th>
-                <th
-                    :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
-                    Creation date</th>
-                <th
-                    :class="['CompletionDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
-                    Completion date</th>
-                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
-            </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                    ...</td>
-                <td
-                    :class="['MaintenanceType', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
-                    ...</td>
-                <td
-                    :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                    ...</td>
-                <td
-                    :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
-                    ...</td>
-                <td
-                    :class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
-                    ...</td>
-                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-            </tr>
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        ID</th>
+                    <th
+                        :class="['MaintenanceType', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
+                        Maintenance type</th>
+                    <th
+                        :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        State</th>
+                    <th
+                        :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                        Creation date</th>
+                    <th
+                        :class="['CompletionDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
+                        Completion date</th>
+                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+                </tr>
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['MaintenanceType', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'MaintenanceType-darkmode' : 'MaintenanceType-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
+                        ...</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </template>

components/server/MaintenanceVisitsTemplateTable.vue

@@ -2,43 +2,66 @@
     <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">
-            <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>
-                <th
-                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    Name</th>
-                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
-                </th>
-                <th
-                    :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                    Type</th>
-                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
-            </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td
-                    :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    ...</td>
-                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                    ...</td>
-                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-            </tr>
+            <tbody>
+                <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>
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
+                    <th
+                        :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        ID
+                    </th>
+                    <th
+                        :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        Type</th>
+                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+                </tr>
+                <tr v-for="template in maintenanceVisitTemplates" :key="template.checklistID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                        {{ template.customer }}</td>
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        {{ template.name }}</td>
+                    <td
+                        :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        {{ template.checklistID }}</td>
+                    <td
+                        :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        {{ template.type }}</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ template.user }}</td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </template>
   
   
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const darkMode = ref(true)
+const maintenanceVisitTemplates = ref([]);
+
+//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);
+    }
+}
+
+onMounted(() => {
+    getMaintenanceVisitTemplates();
+});
 </script>
 
 <script>
@@ -197,5 +220,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
-</style>
+}</style>

components/server/MaintenanceVisitsTemplateTableNoClient.vue

@@ -2,28 +2,33 @@
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
         <table class="data-table" id="maintenance-visits-templat-table-no-client">
-            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th
-                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    Name</th>
-                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
-                </th>
-                <th
-                    :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                    Type</th>
-                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
-            </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td
-                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    ...</td>
-                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                    ...</td>
-                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-            </tr>
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
+                    <th
+                        :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        ID
+                    </th>
+                    <th
+                        :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        Type</th>
+                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+                </tr>
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        ...</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </template>
@@ -179,5 +184,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
-</style>
+}</style>

components/server/NetworkSpecifications.vue

@@ -1,36 +1,365 @@
 <template>
-    <section :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="networkBoolean && !addAssetBool"
+        :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="network">Network specifications:</div>
         <div class="asset-data">
             <div class="IPv4-MAC">
                 <div class="data-field" id="IPv4">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv4:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ inputIPv4 }}</pre>
+                    <input v-if="editable" v-model="inputIPv4" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
                 <div class="data-field" id="MAC">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">MAC:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.MAC }}</pre>
+                    <input v-if="editable" v-model="item.MAC" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
             <div class="IPv6-subnetmask">
                 <div class="data-field" id="IPv6">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv6:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ inputIPv6 }}</pre>
+                    <input v-if="editable" v-model="inputIPv6" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
                 <div class="data-field" id="subnetmask">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Subnetmask:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.subnetmask }}</pre>
+                    <input v-if="editable" v-model="item.subnetmask" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
         </div>
     </section>
+    <section v-if="addAssetBool" :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="network">Network specifications:</div>
+        <div class="asset-data">
+            <div class="IPv4-MAC">
+                <div class="data-field" id="IPv4">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv4:</pre>
+                    <input v-model="newIPv4" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <div class="data-field" id="MAC">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">MAC:</pre>
+                    <input v-model="newMAC" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+            <div class="IPv6-subnetmask">
+                <div class="data-field" id="IPv6">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv6:</pre>
+                    <input v-model="newIPv6" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <div class="data-field" id="subnetmask">
+                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Subnetmask:</pre>
+                    <input v-model="newSubnetmask" @change="updateConfigItem()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+        </div>
+    </section>
+    <section v-if="addAssetBool" id="saveNewItem">
+        <button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addItem()">Safe</button>
+    </section>
 </template>
     
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const editable = computed(() => store.state.assetEditable);
+const chosenAssetId = computed(() => store.state.chosenAssetId);
+const addAssetBool = computed(() => store.state.newAsset);
+const newAssetName = computed(() => store.state.newAssetName);
+const newCustomerID = computed(() => store.state.newCustomerID);
+const newCustomer = computed(() => store.state.newCustomer);
+const newLocation = computed(() => store.state.newLocation);
+const newRemoteLocation = computed(() => store.state.newRemoteLocation);
+const newType = computed(() => store.state.newType);
+const newDescription = computed(() => store.state.newDescription);
+const newNotes = computed(() => store.state.newNotes);
+const newState = computed(() => store.state.newState);
+const newLastView = computed(() => store.state.newLastView);
+const newUser = computed(() => store.state.newUser);
+const hardwareBool = computed(() => store.state.hardwareBool);
+const newModel = computed(() => store.state.newModel);
+const newSerialnumber = computed(() => store.state.newSerialnumber);
+const newCPU = computed(() => store.state.newCPU);
+const newRAM = computed(() => store.state.newRAM);
+const newStorageConfiguration = computed(() => store.state.newStorageConfiguration);
+const newMiscellaneous = computed(() => store.state.newMiscellaneous);
+const softwareBool = computed(() => store.state.softwareBool);
+const newSoftware = computed(() => store.state.newSoftware);
+const newVersion = computed(() => store.state.newVersion);
+const newLicense = computed(() => store.state.newLicense);
 
 const darkMode = ref(true)
+const item = ref({});
+const networkBoolean = ref(false);
+const inputIPv4 = ref('');
+const inputIPv6 = ref('');
+const newNetworkBool = ref(true);
+const newIPv4 = ref('');
+const newIPv6 = ref('');
+const newMAC = ref('');
+const newSubnetmask = ref('');
+const configItems = ref([]);
+
+// get config item from id
+const getItemById = async () => {
+    if (!addAssetBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
+            );
+            item.value = response.data;
+            if (item.value.networkBool == 1) {
+                networkBoolean.value = true;
+            };
+            if (item.value.IPv4 == null) {
+                inputIPv4.value = "";
+            } else {
+                inputIPv4.value = item.value.IPv4;
+            }
+            if (item.value.IPv6 == null) {
+                inputIPv6.value = "";
+            } else {
+                inputIPv6.value = item.value.IPv6;
+            }
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// helper function to validate an IPv4 address
+const validateIPv4address = (ipaddress) => {
+    const ipv4format = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+    if (ipv4format.test(ipaddress) || ipaddress === "") {
+        return true;
+    } else {
+        return false;
+    }
+}
+
+// helper function to validate an IPv4 address
+const validateIPv6address = (ipaddress) => {
+    const ipv6format = /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/gi;
+    if (ipv6format.test(ipaddress) || ipaddress === "") {
+        return true;
+    } else {
+        return false;
+    }
+}
+
+//update data
+const updateConfigItem = async () => {
+    if (inputIPv4.value.length === 0 && inputIPv6.value.length === 0 && item.value.MAC.length === 0 && item.value.subnetmask.length === 0) {
+        item.value.networkBool = 0;
+    }
+    if (validateIPv4address(inputIPv4.value)) {
+        item.value.IPv4 = inputIPv4.value;
+        try {
+            await Axios.put(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateConfigItem`,
+                {
+                    primaryID: item.value.primaryID,
+                    assetName: item.value.assetName,
+                    customerID: item.value.customerID,
+                    customer: item.value.customer,
+                    location: item.value.location,
+                    remoteLocation: item.value.remoteLocation,
+                    type: item.value.type,
+                    description: item.value.description,
+                    notes: item.value.notes,
+                    state: item.value.state,
+                    lastView: item.value.lastView,
+                    user: item.value.user,
+                    hardwareBool: item.value.hardwareBool,
+                    model: item.value.model,
+                    serialnumber: item.value.serialnumber,
+                    CPU: item.value.CPU,
+                    RAM: item.value.RAM,
+                    storageConfiguration: item.value.storageConfiguration,
+                    miscellaneous: item.value.miscellaneous,
+                    softwareBool: item.value.softwareBool,
+                    software: item.value.software,
+                    version: item.value.version,
+                    license: item.value.license,
+                    networkBool: item.value.networkBool,
+                    IPv4: item.value.IPv4,
+                    IPv6: item.value.IPv6,
+                    MAC: item.value.MAC,
+                    subnetmask: item.value.subnetmask,
+                }
+            );
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else {
+        if (item.value.IPv4 == null) {
+            inputIPv4.value = "";
+        } else {
+            inputIPv4.value = item.value.IPv4;
+        }
+        alert("You have entered an invalid IPv4 address, please choose a valid one!");
+    }
+    if (validateIPv6address(inputIPv6.value)) {
+        item.value.IPv6 = inputIPv6.value;
+        try {
+            await Axios.put(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateConfigItem`,
+                {
+                    primaryID: item.value.primaryID,
+                    assetName: item.value.assetName,
+                    customerID: item.value.customerID,
+                    customer: item.value.customer,
+                    location: item.value.location,
+                    remoteLocation: item.value.remoteLocation,
+                    type: item.value.type,
+                    description: item.value.description,
+                    notes: item.value.notes,
+                    state: item.value.state,
+                    lastView: item.value.lastView,
+                    user: item.value.user,
+                    hardwareBool: item.value.hardwareBool,
+                    model: item.value.model,
+                    serialnumber: item.value.serialnumber,
+                    CPU: item.value.CPU,
+                    RAM: item.value.RAM,
+                    storageConfiguration: item.value.storageConfiguration,
+                    miscellaneous: item.value.miscellaneous,
+                    softwareBool: item.value.softwareBool,
+                    software: item.value.software,
+                    version: item.value.version,
+                    license: item.value.license,
+                    networkBool: item.value.networkBool,
+                    IPv4: item.value.IPv4,
+                    IPv6: item.value.IPv6,
+                    MAC: item.value.MAC,
+                    subnetmask: item.value.subnetmask,
+                }
+            );
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else {
+        if (item.value.IPv6 == null) {
+            inputIPv6.value = "";
+        } else {
+            inputIPv6.value = item.value.IPv6;
+        }
+        alert("You have entered an invalid IPv6 address, please choose a valid one!");
+    }
+    await getItemById();
+}
+
+// add new config item
+const addItem = async () => {
+    if (newIPv4.value.length === 0 && newIPv6.value.length === 0 && newMAC.value.length === 0 && newSubnetmask.value.length === 0) {
+        newNetworkBool.value = false;
+    }
+    // check if all input data is valid
+    if (newAssetName.value.trim() === "") {
+        alert("Please add a config item name!");
+        return;
+    } else {
+        var counter = 0;
+        // check if config item name already exists
+        configItems.value.forEach(ci => {
+            if (ci.assetName === newAssetName.value) {
+                counter += 1;
+            }
+        });
+        if (counter == 1) {
+            alert("This asset name already exists. Please choose an unique asset name or modify respectively delete the old one!");
+            return;
+        }
+    }
+    if (newCustomer.value.length === 0) {
+        alert("Please choose a client!");
+        return;
+    }
+    if (!validateIPv4address(newIPv4.value)) {
+        alert("Please enter a valid IPv4 address or leave this field empty!");
+        return;
+    }
+    if (!validateIPv6address(newIPv6.value)) {
+        alert("Please enter a valid IPv6 address or leave this field empty!");
+        return;
+    }
+    try {
+        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addConfigItem`,
+            {
+                assetName: newAssetName.value,
+                customerID: newCustomerID.value,
+                customer: newCustomer.value,
+                location: newLocation.value,
+                remoteLocation: newRemoteLocation.value,
+                type: newType.value,
+                description: newDescription.value,
+                notes: newNotes.value,
+                state: newState.value,
+                lastView: newLastView.value,
+                user: newUser.value,
+                hardwareBool: hardwareBool.value,
+                model: newModel.value,
+                serialnumber: newSerialnumber.value,
+                CPU: newCPU.value,
+                RAM: newRAM.value,
+                storageConfiguration: newStorageConfiguration.value,
+                miscellaneous: newMiscellaneous.value,
+                softwareBool: softwareBool.value,
+                software: newSoftware.value,
+                version: newVersion.value,
+                license: newLicense.value,
+                networkBool: newNetworkBool.value,
+                IPv4: newIPv4.value,
+                IPv6: newIPv6.value,
+                MAC: newMAC.value,
+                subnetmask: newSubnetmask.value,
+            });
+        store.commit('resetAssetStore');
+        store.commit('changeToAssetlist');
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//get all config items
+const getConfigItems = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllConfigItems`);
+        configItems.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1000);
+}
+
+onMounted(() => {
+    triggerBackendCallsWithDelay(getItemById);
+    triggerBackendCallsWithDelay(getConfigItems);
+});
 </script>
 
 <script>
@@ -46,7 +375,6 @@ export default {
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
-    width: 100%;
     padding: 1.25rem 1.875rem;
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
@@ -66,7 +394,7 @@ export default {
     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;
 }
@@ -129,4 +457,44 @@ export default {
     padding: 0 0;
     border-radius: 0.3125rem;
 }
+
+.saveNewItem-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);
+}
+
+.saveNewItem-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);
+}
+
+.saveNewItem-darkmode:hover {
+    background-color: #444444;
+    cursor: pointer;
+}
+
+.saveNewItem-lightmode:hover {
+    background-color: #ACACAC;
+    cursor: pointer;
+}
+
+#saveNewItem {
+    text-align: center;
+}
+
+.input {
+    border: none;
+}
 </style>

components/server/OrderingInformation.vue

@@ -3,30 +3,32 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="ordering">Ordering information:
             <div class="asset-data">
                 <table class="data-table" id="asset-table-no-client">
-                    <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                        <th
-                            :class="['Article', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
-                            Article</th>
-                        <th
-                            :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
-                            Amount</th>
-                        <th
-                            :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
-                            Price</th>
-                        <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
-                    </tr>
-                    <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td
-                            :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
-                            ...</td>
-                        <td
-                            :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
-                            ...</td>
-                        <td
-                            :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
-                            ...</td>
-                        <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-                    </tr>
+                    <tbody>
+                        <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                            <th
+                                :class="['Article', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
+                                Article</th>
+                            <th
+                                :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                                Amount</th>
+                            <th
+                                :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
+                                Price</th>
+                            <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
+                                ...</td>
+                            <td
+                                :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                                ...</td>
+                            <td
+                                :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
+                                ...</td>
+                            <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        </tr>
+                    </tbody>
                 </table>
             </div>
         </div>

components/server/ProductionOrdersInstanceTable.vue

@@ -2,46 +2,50 @@
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances:</div>
         <table class="data-table" name="production-orders-instance-table">
-            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                    ID</th>
-                <th
-                    :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
-                    Ticket No.</th>
-                <th
-                    :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                    Asset</th>
-                <th
-                    :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                    State</th>
-                <th
-                    :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
-                    Creation date</th>
-                <th
-                    :class="['CompletionDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
-                    Completion date</th>
-                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
-            </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                    ...</td>
-                <td
-                    :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                    ...</td>
-                <td
-                    :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                    ...</td>
-                <td
-                    :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
-                    ...</td>
-                <td
-                    :class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
-                    ...</td>
-                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-            </tr>
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        ID</th>
+                    <th
+                        :class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
+                        Ticket No.</th>
+                    <th
+                        :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        Asset</th>
+                    <th
+                        :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        State</th>
+                    <th
+                        :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                        Creation date</th>
+                    <th
+                        :class="['CompletionDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
+                        Completion date</th>
+                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+                </tr>
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['CompletionDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CompletionDate-darkmode' : 'CompletionDate-lightmode']">
+                        ...</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </template>

components/server/ProductionOrdersTemplateTable.vue

@@ -2,37 +2,60 @@
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
         <table class="data-table" name="production-orders-template-table">
-            <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>
-                <th
-                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    Name</th>
-                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
-                </th>
-                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
-            </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td
-                    :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    ...</td>
-                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                    ...</td>
-                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-            </tr>
+            <tbody>
+                <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>
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
+                    <th
+                        :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        ID
+                    </th>
+                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+                </tr>
+                <tr v-for="template in productionOrderTemplates" :key="template.templateID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                        {{ template.customer }}</td>
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        {{ template.name }}</td>
+                    <td
+                        :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        {{ template.templateID }}</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ template.user }}</td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </template>
   
   
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const darkMode = ref(true)
+const productionOrderTemplates = ref([]);
+
+//get all productionOrder templates
+const getProductionOrderTemplates = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
+        productionOrderTemplates.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+onMounted(() => {
+    getProductionOrderTemplates();
+});
 </script>
 
 <script>
@@ -178,5 +201,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
-</style>
+}</style>

components/server/ProductionOrdersTemplateTableNoClient.vue

@@ -2,22 +2,27 @@
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
         <table class="data-table" id="production-orders-template-table-no-client">
-            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th
-                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    Name</th>
-                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
-                </th>
-                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
-            </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td
-                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    ...</td>
-                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                    ...</td>
-                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-            </tr>
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
+                    <th
+                        :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        ID
+                    </th>
+                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+                </tr>
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                        ...</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </template>
@@ -160,5 +165,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
-</style>
+}</style>

components/server/SoftwareSpecifications.vue

@@ -1,26 +1,80 @@
 <template>
-    <section :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="softwareBoolean && !addAssetBool"
+        :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications:
             <div class="asset-data">
                 <table class="data-table" id="asset-table-no-client">
-                    <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                        <th
-                            :class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
-                            Software</th>
-                        <th
-                            :class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
-                            Version</th>
-                        <th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th>
-                    </tr>
-                    <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td
-                            :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
-                            ...</td>
-                        <td
-                            :class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
-                            ...</td>
-                        <td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-                    </tr>
+                    <tbody>
+                        <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                            <th
+                                :class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
+                                Software</th>
+                            <th
+                                :class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
+                                Version</th>
+                            <th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th>
+                        </tr>
+                        <tr v-if="editable" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
+                                <input type="text" v-model="item.software" @change="updateConfigItem()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td
+                                :class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
+                                <input type="text" v-model="item.version" @change="updateConfigItem()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="item.license" @change="updateConfigItem()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                        </tr>
+                        <tr v-if="!editable" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
+                                {{ item.software }}</td>
+                            <td
+                                :class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
+                                {{ item.version }}</td>
+                            <td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ item.license }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </section>
+    <section v-if="addAssetBool" :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications:
+            <div class="asset-data">
+                <table class="data-table" id="asset-table-no-client">
+                    <tbody>
+                        <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                            <th
+                                :class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
+                                Software</th>
+                            <th
+                                :class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
+                                Version</th>
+                            <th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th>
+                        </tr>
+                        <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                            <td
+                                :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
+                                <input type="text" v-model="newSoftware" @change="updateAsset()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td
+                                :class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
+                                <input type="text" v-model="newVersion" @change="updateAsset()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                            <td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">
+                                <input type="text" v-model="newLicense" @change="updateAsset()"
+                                    :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            </td>
+                        </tr>
+                    </tbody>
                 </table>
             </div>
         </div>
@@ -28,9 +82,103 @@
 </template>
     
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const editable = computed(() => store.state.assetEditable);
+const chosenAssetId = computed(() => store.state.chosenAssetId);
+const addAssetBool = computed(() => store.state.newAsset);
+
+const newSoftwareBool = ref(true);
+const newSoftware = ref('');
+const newVersion = ref('');
+const newLicense = ref('');
 
 const darkMode = ref(true)
+const item = ref({});
+const softwareBoolean = ref(false)
+
+// get config item from id
+const getItemById = async () => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
+        );
+        item.value = response.data;
+        if (item.value.softwareBool == 1) {
+            softwareBoolean.value = true;
+        };
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// update software fields in the store
+const updateAsset = () => {
+    if (newSoftware.value.length == 0 && newLicense.value.length == 0 && newVersion.value.length == 0) {
+        newSoftwareBool.value = false
+    }
+    const asset = {
+        softwareBool: newSoftwareBool.value,
+        software: newSoftware.value,
+        version: newVersion.value,
+        license: newLicense.value,
+    };
+    store.commit('updateSoftwareComponent', asset);
+}
+
+//update data
+const updateConfigItem = async () => {
+    if (item.value.license.length === 0 && item.value.version.length === 0 && item.value.software.length === 0) {
+        item.value.softwareBool = 0;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateConfigItem`,
+            {
+                primaryID: item.value.primaryID,
+                assetName: item.value.assetName,
+                customerID: item.value.customerID,
+                customer: item.value.customer,
+                location: item.value.location,
+                remoteLocation: item.value.remoteLocation,
+                type: item.value.type,
+                description: item.value.description,
+                notes: item.value.notes,
+                state: item.value.state,
+                lastView: item.value.lastView,
+                user: item.value.user,
+                hardwareBool: item.value.hardwareBool,
+                model: item.value.model,
+                serialnumber: item.value.serialnumber,
+                CPU: item.value.CPU,
+                RAM: item.value.RAM,
+                storageConfiguration: item.value.storageConfiguration,
+                miscellaneous: item.value.miscellaneous,
+                softwareBool: item.value.softwareBool,
+                software: item.value.software,
+                version: item.value.version,
+                license: item.value.license,
+                networkBool: item.value.networkBool,
+                IPv4: item.value.IPv4,
+                IPv6: item.value.IPv6,
+                MAC: item.value.MAC,
+                subnetmask: item.value.subnetmask,
+            }
+        );
+        await getItemById();
+    } catch (err) {
+        console.log(err);
+    }
+}
+
+onMounted(() => {
+    getItemById();
+});
 </script>
 
 <script>
@@ -46,7 +194,6 @@ export default {
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
-    width: 100%;
     padding: 1.25rem 1.875rem;
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
@@ -172,4 +319,30 @@ th {
 
 .License {
     width: 25%;
-}</style>
+}
+
+.input {
+    border: none;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    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;
+}
+</style>

components/server/SolutionChecklist.vue

@@ -2,30 +2,32 @@
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
         <table class="data-table" id="solution-checkklist">
-            <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 :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>
-                <td
-                    :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
-                    ...</td>
-                <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-            </tr>
+            <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 :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>
+                    <td
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        ...</td>
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </template>
@@ -180,4 +182,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
+}
+</style>

components/server/SolutionTable.vue

@@ -2,45 +2,65 @@
     <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">
-            <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>
-                <th
-                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    Name</th>
-                <th
-                    :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                    Asset</th>
-                <th
-                    :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                    Type</th>
-                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
-            </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td
-                    :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                    ...</td>
-                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-            </tr>
+            <tbody>
+                <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>
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
+                    <th
+                        :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        Asset</th>
+                    <th
+                        :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        Type</th>
+                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+                </tr>
+                <tr v-for="sol in solutions" :key="sol.primaryID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                        {{ sol.customer }}</td>
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        {{ sol.solutionName }}</td>
+                    <td
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        {{ sol.assetName }}</td>
+                    <td
+                        :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        {{ sol.type }}</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ sol.user }}</td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </template>
   
   
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const darkMode = ref(true)
+const solutions = ref([]);
+
+//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);
+    }
+}
+
+onMounted(() => {
+    getSolutions();
+});
 </script>
 
 <script>

components/server/SolutionTableNoClient.vue

@@ -2,30 +2,32 @@
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
         <table class="data-table" id="solution-table">
-            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th
-                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    Name</th>
-                <th
-                    :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                    Asset</th>
-                <th
-                    :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                    Type</th>
-                <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
-            </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td
-                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                    ...</td>
-                <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-            </tr>
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
+                    <th
+                        :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        Asset</th>
+                    <th
+                        :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        Type</th>
+                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
+                </tr>
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
+                        ...</td>
+                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </template>
@@ -180,4 +182,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
+}
+</style>

components/server/TemplateChecklist.vue

@@ -2,30 +2,32 @@
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
         <table class="data-table" id="template-checkklist">
-            <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 :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>
-                <td
-                    :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
-                    ...</td>
-                <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-            </tr>
+            <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 :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>
+                    <td
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        ...</td>
+                    <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </template>
@@ -180,4 +182,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
+}
+</style>

components/server/UserRightsList.vue

@@ -2,40 +2,42 @@
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Rights:</div>
         <table class="data-table" id="user-rights-list">
-            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th
-                    :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']">
-                    User</th>
-                <th
-                    :class="['Admin', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']">
-                    Admin</th>
-                <th
-                    :class="['Edit-Delete', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']">
-                    Edit/Delete</th>
-                <th
-                    :class="['Create', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
-                    Create</th>
-                <th :class="['View', darkMode ? 'th-darkmode' : 'th-lightmode']">View</th>
-            </tr>
-            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td
-                    :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']">
-                    ...</td>
-                <td
-                    :class="['Admin', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']">
-                    <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
-                </td>
-                <td
-                    :class="['Edit-Delete', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']">
-                    <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
-                </td>
-                <td
-                    :class="['Create', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
-                    <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
-                </td>
-                <td :class="['View', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
-                        :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
-            </tr>
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']">
+                        User</th>
+                    <th
+                        :class="['Admin', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']">
+                        Admin</th>
+                    <th
+                        :class="['Edit-Delete', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']">
+                        Edit/Delete</th>
+                    <th
+                        :class="['Create', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
+                        Create</th>
+                    <th :class="['View', darkMode ? 'th-darkmode' : 'th-lightmode']">View</th>
+                </tr>
+                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']">
+                        ...</td>
+                    <td
+                        :class="['Admin', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']">
+                        <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
+                    </td>
+                    <td
+                        :class="['Edit-Delete', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']">
+                        <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
+                    </td>
+                    <td
+                        :class="['Create', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
+                        <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
+                    </td>
+                    <td :class="['View', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
+                            :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
+                </tr>
+            </tbody>
         </table>
     </div>
 </template>

composables/UserObject.ts

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

documentation/Datenbankmodell.drawio

@@ -1,6 +1,6 @@
-<mxfile host="Electron" modified="2024-02-01T15:29:10.628Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="R4sGFqNy6FSLZX5LoMO_" version="22.0.3" type="device" pages="2">
+<mxfile host="Electron" modified="2024-02-14T10:28:35.536Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="_zOGEdVgp7g5JHBy-mYE" version="22.0.3" type="device" pages="2">
   <diagram name="Seite-1" id="VLuSDTVFFHJCdRpH-1WC">
-    <mxGraphModel dx="246" dy="2876" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+    <mxGraphModel dx="393" dy="2849" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
       <root>
         <mxCell id="0" />
         <mxCell id="1" parent="0" />
@@ -62,7 +62,7 @@
           <mxGeometry y="240" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="DauqCNUrC7Z9yIe88X-r-29" value="changeDB" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
-          <mxGeometry x="75" y="-560" width="140" height="840" as="geometry" />
+          <mxGeometry x="75" y="-560" width="140" height="870" as="geometry" />
         </mxCell>
         <mxCell id="DauqCNUrC7Z9yIe88X-r-67" value="primaryID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="30" width="140" height="30" as="geometry" />
@@ -130,21 +130,24 @@
         <mxCell id="DauqCNUrC7Z9yIe88X-r-63" value="version" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="660" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="qbUp6gtjYndA0fy5zK6_-1" value="networkBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="-qW6OXXOOqjT1X6LnSAE-1" value="license" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="690" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-53" value="IPv4" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="qbUp6gtjYndA0fy5zK6_-1" value="networkBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="720" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-56" value="IPv6" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-53" value="IPv4" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="750" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-54" value="MAC" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-56" value="IPv6" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="780" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-55" value="subnetmask" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-54" value="MAC" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
           <mxGeometry y="810" width="140" height="30" as="geometry" />
         </mxCell>
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-55" value="subnetmask" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
+          <mxGeometry y="840" width="140" height="30" as="geometry" />
+        </mxCell>
         <mxCell id="DauqCNUrC7Z9yIe88X-r-33" value="productionOrders" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#009900;" parent="1" vertex="1">
           <mxGeometry x="920" y="-85" width="140" height="450" as="geometry" />
         </mxCell>

layouts/Actionbar.vue

@@ -1,311 +1,314 @@
 <template>
-  <aside :class="[ 'actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
-    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode' ]" id="indicator-icon" @click="toggleActionbar">
-      <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg"/>
+  <aside :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
+    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="toggleActionbar">
+      <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" >
+    <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>
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
         </Transition>
       </button>
-      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="filter" >
+      <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>
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
         </Transition>
       </button>
-      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="instances" >
+      <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>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
         </Transition>
       </button>
-      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="attachments" >
+      <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>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
         </Transition>
       </button>
-      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="sell" >
+      <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>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
         </Transition>
       </button>
-      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="archive" >
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
         <div class="icon" id="archive-icon">
-          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Archive-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Archive-Icon.svg" />
         </div>
-        <Transition name="fade" >
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Archive</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
         </Transition>
       </button>
-      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="new" >
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="addAsset">
         <div class="icon" id="new-icon">
-          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" 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>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
         </Transition>
       </button>
-      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="edit" >
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
         <div class="icon" id="edit-icon">
-          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Edit-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Edit-Icon.svg" />
         </div>
-        <Transition name="fade" >
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Edit</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
         </Transition>
       </button>
-      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="delete" >
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteAsset">
         <div class="icon" id="delete-icon">
-          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" 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>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
         </Transition>
       </button>
     </nav>
   </aside>
 </template>
 
+<script setup>
+import { ref } from 'vue';
+import { useStore } from 'vuex';
+
+const darkMode = ref(true)
+const isExpanded = ref(true)
+
+// get accesss to the store
+const store = useStore()
+const toggleEditable = () => {
+  store.commit('toggleEditableAsset');
+};
+const deleteAsset = () => {
+  store.commit('doDeleteAsset');
+};
+
+const toggleActionbar = () => {
+  isExpanded.value = !isExpanded.value;
+};
+const toggleFiltered = () => {
+  store.commit('toggleFilteredAsset');
+};
+const toggleSearched = () => {
+  store.commit('toggleAssetSearchable');
+};
+const addAsset = () => {
+  store.commit('addNewAsset');
+};
+</script>
 
 
 <script>
-
-  export default {
-    name: "Actionbar",
-    data() {
-      return {
-        darkMode: true,
-        isExpanded: true,
-      };
-    },                                            
-    methods: {
-      toggleActionbar() {
-        console.log('Actionbar toggled');
-        this.isExpanded = !this.isExpanded;
-      },
-    },
-  }
-
+export default {
+  name: "Actionbar",
+}
 </script>
 
 
 
 <style scoped>
-
-  * {
-    box-sizing: border-box;
-  }
+* {
+  box-sizing: border-box;
+}
 
 
-  aside.actionbar {
-    display: flex;
-    flex-direction: column;
-    position: sticky;
-    top: 5rem;
-    height: fit-content;
-    width: fit-content;
-    inline-size: fit-content;
-    border-radius: 0.625rem;
-    flex: 0 0 0;
-    align-items: stretch;
-    justify-content: center;
-    padding: 1.875rem 0.625rem;
-    gap: 1.25rem;
-    transition: all 10s ease-in-out 0s;
-    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;
-    width: stretch;
-    inline-size: stretch;
-  }
+aside.actionbar {
+  display: flex;
+  flex-direction: column;
+  position: sticky;
+  top: 3.75rem;
+  height: fit-content;
+  width: fit-content;
+  inline-size: fit-content;
+  border-radius: 0.625rem;
+  flex: 0 0 0;
+  align-items: stretch;
+  justify-content: center;
+  padding: 1.875rem 0.625rem;
+  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;
+}
 
 
-  .actions {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    padding: 1.25rem 0;
-    gap: 1.25rem;
-    overflow: clip;
-  }
+.actions {
+  display: flex;
+  flex-direction: column;
+  padding: 1.25rem 0;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 1.25rem;
+  overflow: clip;
+}
 
 
-  button {
-    display: flex;
-    flex-direction: row;
-    align-self: stretch;
-    height: 1.875rem;
-    border-radius: 0.625rem;
-    align-items: center;
-    justify-content: flex-start;
-    border: none;
-    transition: 0.2s ease-in-out;
-    overflow: clip;
-    gap: 0.125rem
-  }
-  .button-darkmode {
-    background-color: #2C2C2C;
-  }
-  .button-lightmode {
-    background-color: #FFFFFF;
-  }
-  .button-darkmode:hover, .indicator-darkmode:hover {
-    background-color: #444444;
-  }
-  .button-lightmode:hover, .indicator-lightmode:hover {
-    background-color: #ACACAC;
-  }
-  .is-not-expanded > button {
-    align-self: center;
-    gap: 0.5rem;
-  }
+button {
+  display: flex;
+  flex-direction: row;
+  align-self: stretch;
+  height: 1.875rem;
+  border-radius: 0.625rem;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.125rem;
+  border: none;
+  transition: 0.2s ease-in-out;
+  overflow: clip;
+}
+.button-darkmode { background-color: #2C2C2C; } 
+.button-lightmode { background-color: #FFFFFF; } 
+
+.button-darkmode:hover, 
+.indicator-darkmode:hover { background-color: #444444; } 
+
+.button-lightmode:hover, 
+.indicator-lightmode:hover {  background-color: #ACACAC; } 
+
+.is-not-expanded>button { align-self: center; }
 
 
-  .icon {
-    display: flex;
-    flex-direction: row;
-    /*width: 0.875rem;*/
-    height: 1.875rem;
-    align-items: center;
-    justify-content: center;
-    padding: 0 0.5rem;
-    transition: padding 0.5s linear
-  }
-  #indicator-icon {
-    width: 1.875rem;
-    height: 1.875rem;
-    border-radius: 0.3125rem;
-    transition: 0.2s ease-in-out;
-  }
-  .is-not-expanded .icon {
-    align-self: center;
-    padding: 0 0.375rem;
-  }
-  .is-not-expanded #indicator-icon {
-    transform: rotate(180deg);
-  }
+.icon {
+  display: flex;
+  flex-direction: row;
+  /*width: 0.875rem;*/
+  height: 1.875rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.5rem;
+}
+.is-not-expanded .icon {
+  align-self: center;
+}
 
-  img {
-    width: 0.875rem;
-    height: 0.875rem;
-    object-fit: contain;
-    object-position: center;
-    overflow: hidden;
-  }
-  #indicator-icon > img {
-    height: 1.25rem;
-  }
-  .img-darkmode {
-    filter: invert(100%);
-  }
+#indicator-icon {
+  width: 1.875rem;
+  height: 1.875rem;
+  border-radius: 0.3125rem;
+  transition: 0.2s ease-in-out;
+} 
+.is-not-expanded #indicator-icon { transform: rotate(180deg); }
 
 
-  .label {
-    display: inline-flex;
-    min-width: 0;
-    padding: 0rem 0.3125rem 0rem 0rem;
-    letter-spacing: 5%;
-    align-self: center;
-    white-space: nowrap;
-    font: 400 0.875rem/1.25rem Overpass, sans-serif;
-  }
-  .label-darkmode {
-    color: #FFFFFF;
-  }
-  .label-lightmode {
-    color: #000000;
-  }
+img {
+  width: 0.875rem;
+  height: 0.875rem;
+  object-fit: contain;
+  object-position: center;
+  overflow: hidden;
+}
+.img-darkmode { filter: invert(100%); } 
+#indicator-icon>img { height: 1.25rem; }
 
 
-  .fade-enter-from, .fade-leave-to {
-    opacity: 0;
+.label {
+  display: inline-flex;
+  min-width: 0;
+  padding: 0rem 0.625rem 0rem 0rem;
+  align-self: center;
+  letter-spacing: 0.02rem;
+  white-space: nowrap;
+  font: 400 0.875rem/1.25rem Overpass, sans-serif;
+} 
+.label-darkmode { color: #FFFFFF; } 
+.label-lightmode { color: #000000; }
+
+
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.fade-enter-active {
+  transition: all 0.75s;
+  overflow: clip;
+  animation: fade-in 0.5s linear forwards;
+}
+
+.fade-leave-active {
+  transition: all 0.75s;
+  animation: fade-out 0.5s linear forwards;
+}
+
+.fade-move {
+  transition: transform 5s
+}
+
+@keyframes expand {
+  from {
+    max-inline-size: 3.125rem;
+    max-width: 3.125rem;
   }
-  .fade-enter-to, .fade-leave-from {
-    opacity: 1;
+
+  to {
+    max-inline-size: 9.0625rem;
+    max-width: 9.0625rem;
+  }
+}
+
+@keyframes contract {
+  from {
+    max-inline-size: 9.0625rem;
+    max-width: 9.0625rem;
+  }
+
+  to {
+    max-inline-size: 3.125rem;
+    max-width: 3.125rem;
+  }
+}
+
+@keyframes fade-in {
+  from {
     max-width: 0;
-  }
-  .fade-enter-active {
-    transition: all 0.75s;
-    overflow: clip;
-    animation: fade-in 0.5s linear forwards;
-  }
-  .fade-leave-active {
-    transition: all 0.75s;
-    animation: fade-out 0.5s linear forwards;
-  }
-  .fade-move {
-    transition: transform 5s
+    max-inline-size: 0;
   }
 
-  @keyframes expand {
-    from {
-      max-inline-size: 3.25rem;
-      max-width: 3.25rem;
-    }
-    to {
-      max-inline-size: 9.0625rem;
-      max-width: 9.0625rem;
-    }
+  to {
+    max-width: 7.5rem;
+    width: fit-content;
   }
-  @keyframes contract {
-    from {
-      max-inline-size: 9.0625rem;
-      max-width: 9.0625rem;
-    }
-    to {
-      max-inline-size: 3.25rem;
-      max-width: 3.25rem;
-    }
+}
+
+@keyframes fade-out {
+  from {
+    max-width: 7.5rem;
+    width: fit-content;
   }
 
-  @keyframes fade-in {
-    from {
-      max-width: 0;
-      max-inline-size: 0;
-    }
-    to {
-      max-width: 7.5rem;
-      width: fit-content;
-    }
+  to {
+    max-width: 0;
+    max-inline-size: 0;
   }
-  @keyframes fade-out {
-    from {
-      max-width: 7.5rem;
-      width: fit-content;
-    }
-    to {
-      max-width: 0;
-      max-inline-size: 0;
-    }
-  }
-
-
-
+}
 </style>

layouts/Navigationbar.vue

@@ -1,67 +1,64 @@
 <template>
-  <aside
-    :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
+  <aside :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
     <div class="toggleNavbar">
       <div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
-        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
+        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/Back-Icon.svg" />
       </div>
-      <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
-        @click="ToggleSidebar">
-        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-          src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
+      <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="ToggleSidebar">
+        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
       </div>
     </div>
     <div class="menus">
       <nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
-        <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
-          id="home-button">
+        <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
           <div class="icon" id="home-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-              src="../icons/navbar-icons/Home-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Home-Icon.svg" />
           </div>
-          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</span>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</pre>
+          </Transition>
         </router-link>
       </nav>
       <nav id="site-menu">
-        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
-          id="checklists-button">
+        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="checklists-button">
           <div class="icon" id="checklists-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-              src="../icons/navbar-icons/Checklists-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Checklists-Icon.svg" />
           </div>
-          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</pre>
+          </Transition>
         </router-link>
-        <router-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
-          id="assets-button">
+        <nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"  @click="defaultAssetPage()" id="assets-button">
           <div class="icon" id="assets-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-              src="../icons/navbar-icons/Assets-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Assets-Icon.svg" />
           </div>
-          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
-        </router-link>
-        <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
-          id="solutions-button">
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets</pre>
+          </Transition>
+        </nuxt-link>
+        <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
           <div class="icon" id="solutions-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-              src="../icons/navbar-icons/Solutions-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Solutions-Icon.svg" />
           </div>
-          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
+          </Transition>
         </router-link>
-        <router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
-          id="accounting-button">
+        <router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
           <div class="icon" id="accounting-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-              src="../icons/navbar-icons/Accounting-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Accounting-Icon.svg" />
           </div>
-          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</span>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</pre>
+          </Transition>
         </router-link>
-        <router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
-          id="clients-button">
+        <router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="clients-button">
           <div class="icon" id="clients-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
-              src="../icons/navbar-icons/Clients-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Clients-Icon.svg" />
           </div>
-          <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</span>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</pre>
+          </Transition>
         </router-link>
       </nav>
     </div>
@@ -72,14 +69,21 @@
 
 <script setup>
 import { ref } from 'vue';
+import { useStore } from 'vuex';
 
 const darkMode = ref(true)
 const isExpanded = ref(true)
 
+// get accesss to the store
+const store = useStore()
+const defaultAssetPage = () => {
+  store.commit('resetAssetStore');
+  store.commit('changeToAssetlist');
+};
+
 const ToggleSidebar = () => {
   isExpanded.value = !isExpanded.value;
 };
-
 </script>
 
 <script>
@@ -95,47 +99,37 @@ export default {
   box-sizing: border-box;
 }
 
-aside {
+aside.navbar {
   display: flex;
   flex-direction: column;
   position: sticky;
-  top: 5rem;
-  width: 3.125rem;
-  transition: 0.5s ease-in-out;
-}
-
+  top: 3.75rem;
+  height: fit-content;
+  width: fit-content;
+  inline-size: fit-content;
+  border-radius: 0.625rem;
+  flex: 0 0 0;
+  align-items: stretch;
+  justify-content: center;
+  padding: 0.9375rem;
+  gap: 0.625rem;
+  overflow: clip;
+  overflow-clip-margin: 0.625rem;
+} 
 aside.is-expanded {
-  width: 12.5rem;
-}
-
-.is-expanded .label {
-  opacity: 1;
-  transition: 0.5s ease-in-out;
-}
-
+  animation: expand 0.5s linear both;
+} 
+aside.is-not-expanded {
+  animation: contract 0.5s linear both;
+} 
 .is-not-expanded #indicator-icon {
   transform: rotate(180deg);
   transition: 0.5s ease-in-out;
-}
-
-
-.navbar {
-  display: flex;
-  flex-direction: column;
-  height: fit-content;
-  border-radius: 0.625rem;
-  align-items: stretch;
-  justify-content: center;
-  gap: 0.625rem;
-  padding: 0.9375rem;
-  margin: 0;
-}
-
+} 
 .navbar-darkmode {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #2C2C2C;
-}
-
+} 
 .navbar-lightmode {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #FFFFFF;
@@ -148,75 +142,67 @@ aside.is-expanded {
   height: 2.5rem;
   align-items: center;
   justify-content: space-between;
+  overflow: clip;
+  overflow-clip-margin: 0.625rem;
 }
 
 
 .menus {
   display: flex;
   flex-direction: column;
-  position: relative;
-  justify-content: flex;
   padding: 1.25rem 0;
+  align-items: flex-start;
+  justify-content: center;
   gap: 1.875rem;
-  transition: 0.5s ease-in-out;
-  align-items: center;
+  overflow: clip;
+  overflow-clip-margin: 0.625rem;
 }
 
 
 nav {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  align-self: stretch;
   padding: 0.9375rem 0;
+  align-items: flex-start;
+  justify-content: center;
   gap: 1.875rem;
-  width: 92%;
-}
+  overflow: clip;
+  overflow-clip-margin: 0.625rem;
+} 
 
-.menu-darkmode {
-  border-bottom: 0.0625rem solid #8E8E8E;
-}
-
-.menu-lightmode {
-  border-bottom: 0.0625rem solid #BABABA;
-}
+.menu-darkmode { border-bottom: 0.0625rem solid #8E8E8E; } 
+.menu-lightmode { border-bottom: 0.0625rem solid #BABABA; }
 
 
-
-button,
+.button,
 a {
   display: flex;
   flex-direction: row;
   align-self: stretch;
   height: 2.1875rem;
-  border-radius: 0.3125rem;
+  border-radius: 0.625rem;
   align-items: center;
   justify-content: flex-start;
-  gap: 0.3125rem;
   border: none;
-  transition: 0.5s ease-in-out;
   text-decoration: none;
-  width: 100%;
-}
-
-.button-darkmode {
-  background-color: #2C2C2C;
-}
-
-.button-lightmode {
-  background-color: #FFFFFF;
-}
+  transition: 0.2s ease-in-out;
+  overflow: clip;
+  overflow-clip-margin: 0.625rem;
+} 
+.button-darkmode { background-color: #2C2C2C; } 
+.button-lightmode { background-color: #FFFFFF; } 
 
 .button-darkmode:hover,
 .indicator-darkmode:hover,
-.back-darkmode:hover {
-  background-color: #444444;
-}
+.back-darkmode:hover {  background-color: #444444; } 
 
 .button-lightmode:hover,
 .indicator-lightmode:hover,
-.back-lightmode:hover {
-  background-color: #ACACAC;
-}
+.back-lightmode:hover { background-color: #ACACAC; }
+
+.is-not-expanded>button { align-self: center; }
+
 
 .icon {
   display: flex;
@@ -225,24 +211,18 @@ a {
   height: 2.1875rem;
   align-items: center;
   justify-content: center;
-  transition: 0.2s ease-in-out;
-}
-
+} 
 #back-icon,
 #indicator-icon {
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0.3125rem;
-  transition-duration: 0.5s;
-  transition: 0.2s ease-out;
-}
-
+  transition: 0.2s ease-in-out;
+} 
 .back-darkmode:hover,
 .back-lightmode:hover,
 .indicator-darkmode:hover,
-.indicator-lightmode:hover {
-  cursor: pointer;
-}
+.indicator-lightmode:hover { cursor: pointer; }
 
 
 img {
@@ -251,28 +231,95 @@ img {
   object-fit: contain;
   object-position: center;
   overflow: hidden;
-  transition: 0.2s ease-out;
-}
+} 
+.img-darkmode { filter: invert(100%); }
 
-.img-darkmode {
-  filter: invert(100%);
-}
 
 .label {
-  letter-spacing: 5%;
+  display: inline-flex;
+  min-width: 0;
+  padding: 0rem 0.625rem 0rem 0.3125rem;
   align-self: center;
+  letter-spacing: 0.03rem;
   white-space: nowrap;
-  margin: auto 0;
   font: 600 0.875rem/1.25rem Overpass, sans-serif;
+} 
+.label-darkmode { color: #FFFFFF; } 
+.label-lightmode { color: #000000; }
+
+
+
+.fade-enter-from,
+.fade-leave-to {
   opacity: 0;
-  transition: opacity 0.5s ease-out;
+  padding: 0;
 }
 
-.label-darkmode {
-  color: #FFFFFF;
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+  padding: 0rem 0.625rem 0rem 0.3125rem;
 }
 
-.label-lightmode {
-  color: #000000;
+.fade-enter-active {
+  transition: all 0.75s linear;
+  animation: fade-in 0.5s linear forwards;
+}
+
+.fade-leave-active {
+  transition: all 0.75s linear;
+  animation: fade-out 0.5s linear forwards;
+}
+
+.fade-move {
+  transition: transform 5s
+}
+
+@keyframes expand {
+  from {
+    max-inline-size: 4.0625rem;
+    max-width: 4.0625rem;
+  }
+
+  to {
+    max-inline-size: 15rem;
+    max-width: 15rem;
+  }
+}
+
+@keyframes contract {
+  from {
+    max-inline-size: 15rem;
+    max-width: 15rem;
+  }
+
+  to {
+    max-inline-size: 4.0625rem;
+    max-width: 4.0625rem;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    max-width: 0;
+    max-inline-size: 0;
+  }
+
+  to {
+    max-width: 10rem;
+    width: fit-content;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    max-width: 10rem;
+    width: fit-content;
+  }
+
+  to {
+    max-width: 0;
+    max-inline-size: 0;
+  }
 }
 </style>

layouts/PageHeader.vue

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

nuxt-app/.gitignore

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

nuxt-app/README.md

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

nuxt-app/app.vue

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

nuxt-app/nuxt.config.ts

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

nuxt-app/package.json

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

nuxt-app/server/tsconfig.json

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

nuxt-app/tsconfig.json

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

nuxt.config.ts

@@ -1,4 +1,96 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import type { NuxtPage } from 'nuxt/schema'
+import clientsideConfig from './clientsideConfig'
+import { UserObjectDefinition } from './composables/UserObject'
+
 export default defineNuxtConfig({
-  devtools: { enabled: true }
+  devtools: { enabled: true },
+  modules: [
+    '@pinia/nuxt',
+    '@sidebase/nuxt-auth',
+  ],
+  auth: {
+    //baseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/.output/server/chunks/routes/api/auth`,
+    computed: {
+      origin: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
+      //pathname: '/server/chunks/routes/api/auth/',
+      //fullBaseUrl: `https://${clientsideConfig.url}:${clientsideConfig.port}/server/chunks/routes/api/auth/`,
+    },
+    //baseUrl: `https://${clientsideConfig.url}:${clientsideConfig.port}/server/chunks/routes/api/auth/`,
+    provider: {
+      type: 'refresh',
+      endpoints: { 
+        signIn: { path: '/login', method: 'post' },
+        signout: false,
+        signUp: { path: '/signup', method: 'post' },
+        getSession: { path: '/session', method: 'get' },
+        refresh: { path: '/refresh', method: 'post' } 
+      },
+      token: { 
+        signInResponseTokenPointer: '/token/authToken', 
+        maxAgeInSeconds: 300, // 5 min
+        sameSiteAttribute: 'lax'
+      },
+      refreshToken: { 
+        signInResponseRefreshTokenPointer: '/token/refreshToken',
+        maxAgeInSeconds: 604800, // 7 days
+        sameSiteAttribute: 'lax' 
+      },
+      // TODO: define UserObject
+      //sessionDataType:  UserObjectDefinition,
+    },
+    session: {
+      enableRefreshPeriodically: false,
+      enableRefreshOnWindowFocus: true,
+    },
+    globalAppMiddleware: true,
+  },
+  /*buildModules: [
+    //'@nuxtjs/composition-api/module',
+    ['@pinia/nuxt', { disableVuex: false }],
+  ],*/
+  devServer: {
+    https: {
+      key: './certs/privkey.pem',
+      cert: './certs/fullchain.pem'
+    }
+  },
+  vite: {
+    server: {
+      cors: {
+        origin: true,
+        optionsSuccessStatus: 204,
+      },
+    }
+  },
+  runtimeConfig: {
+    public: {
+      apiBase: `https://${clientsideConfig.url}:${clientsideConfig.port}/server/chunks/routes/api`,
+      axios: {
+        browserBaseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
+      },
+    },
+    private: {
+      axios: {
+        baseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
+      }
+    }
+  },
+  // hooks: {
+  //   'pages:extend'(pages) {
+  //     function setMiddleware(pages: NuxtPage[]) {
+  //       for (const page of pages) {
+  //         if (/* some condition */ true) {
+  //           page.meta ||= {}
+  //           // Note that this will override any middleware set in `definePageMeta` in the page
+  //           page.meta.middleware = ['auth']
+  //         }
+  //         if (page.children) {
+  //           setMiddleware(page.children)
+  //         }
+  //       }
+  //     }
+  //     setMiddleware(pages)
+  //   }
+  // }
 })

package.json

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

pages/assets.vue

@@ -4,15 +4,15 @@
       <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
     </div>
     <div id="content-body">
-      <ClientSearch v-if="onAssetlist || onCustomerAssetlist"/>
-      <AssetTable v-if="onAssetlist"/>
-      <AssetTableNoClient v-if="onCustomerAssetlist"/>
-      <Asset v-if="onAsset"/>
-      <HardwareSpecifications v-if="onAsset"/>
-      <SoftwareSpecifications v-if="onAsset"/>
-      <NetworkSpecifications v-if="onAsset"/>
-      <AssetSearch v-if="onSolutionlistAsset"/>
-      <AssetSolutionList v-if="onSolutionlistAsset"/>
+      <ClientSearch v-if="onAssetlist || onCustomerAssetlist" />
+      <AssetTable v-if="onAssetlist" />
+      <AssetTableNoClient v-if="onCustomerAssetlist" />
+      <Asset v-if="onAsset" />
+      <HardwareSpecifications v-if="onAsset" />
+      <SoftwareSpecifications v-if="onAsset" />
+      <NetworkSpecifications v-if="onAsset" />
+      <AssetSearch v-if="onSolutionlistAsset" />
+      <AssetSolutionList v-if="onSolutionlistAsset" />
     </div>
   </section>
 </template>
@@ -30,26 +30,28 @@ import SoftwareSpecifications from "../components/server/SoftwareSpecifications.
 import NetworkSpecifications from "../components/server/NetworkSpecifications.vue";
 import AssetSearch from "../components/AssetSearch.vue";
 import AssetSolutionList from "../components/server/AssetSolutionList.vue";
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const onAssetlist = computed(() => store.state.onAssetlist);
+const onCustomerAssetlist = computed(() => store.state.onCustomerAssetlist);
+const onAsset = computed(() => store.state.onAsset);
+const onSolutionlistAsset = computed(() => store.state.onSolutionlistAsset);
 
 definePageMeta({
-  layout: 'default'
+  layout: 'default',
+  title: 'Assets'
 })
 
 const darkMode = ref(true)
-
-// to render the right components
-const onAssetlist = ref(true)
-const onCustomerAssetlist = ref(false)
-const onAsset = ref(false)
-const onSolutionlistAsset = ref(false)
 </script>
 
 <script>
 export default {
   name: "AssetPage",
 }
-</script>   
-    
+</script>
     
 <style scoped>
 * {

pages/clients.vue

@@ -7,6 +7,11 @@
       <ClientTable v-if="onCustomerlist"/>
       <Client v-if="onCustomer"/>
       <ClientQuickAccess v-if="onCustomer"/>
+      <ClientEmployeeList v-if="onEmployeelist"/>
+      <ClientEmployee v-if="onEmployee"/>
+      <ClientDepartmentList v-if="onDepartmentlist"/>
+      <ClientDepartment v-if="onDepartment"/>
+      <ClientDepartmentEmployeeList v-if="onDepartment"/>
     </div>
   </section>
 </template>
@@ -18,18 +23,26 @@ import { ref } from 'vue';
 import ClientTable from "../components/server/ClientTable.vue";
 import Client from "../components/server/Client.vue";
 import ClientQuickAccess from "../components/server/ClientQuickAccess.vue";
-//import ClientEmployees from "../components/server/ClientEmployees.vue";
-//import ClientEmployee from "../components/server/ClientEmployee.vue";
+import ClientEmployeeList from "../components/server/ClientEmployeeList.vue";
+import ClientEmployee from "../components/server/ClientEmployee.vue";
+import ClientDepartmentList from '~/components/server/ClientDepartmentList.vue';
+import ClientDepartment from '~/components/server/ClientDepartment.vue';
+import ClientDepartmentEmployeeList from '~/components/server/ClientDepartmentEmployeeList.vue';
 
 definePageMeta({
-  layout: 'default'
+  layout: 'default',
+  title: 'Clients'
 })
 
 const darkMode = ref(true)
 
 // to render the right components
 const onCustomerlist = ref(true)
-const onCustomer = ref(true)
+const onCustomer = ref(false)
+const onEmployeelist = ref(false)
+const onEmployee = ref(false)
+const onDepartmentlist = ref(false)
+const onDepartment = ref(false)
 </script>
 
 <script>

pages/home.vue

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

pages/index.vue

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

pages/issueItems.vue

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

pages/issueSlips.vue

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

pages/login.vue

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

pages/maintenanceVisits.vue

@@ -53,7 +53,8 @@ import MaintenanceVisitsInstance from "../components/server/MaintenanceVisitsIns
 import InstanceChecklist from "../components/server/InstanceChecklist.vue";
 
 definePageMeta({
-  layout: 'default'
+  layout: 'default',
+  title: 'Maintenance Visits'
 })
 
 const darkMode = ref(true)

pages/productionOrders.vue

@@ -53,7 +53,8 @@ import ProductionOrdersInstance from "../components/server/ProductionOrdersInsta
 import InstanceChecklist from "../components/server/InstanceChecklist.vue";
 
 definePageMeta({
-    layout: 'default'
+    layout: 'default',
+    title: 'Production Orders'
 })
 
 const darkMode = ref(true)

pages/settings.vue

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

pages/solutions.vue

@@ -24,7 +24,8 @@ import Solution from "../components/server/Solution.vue";
 import SolutionChecklist from "../components/server/SolutionChecklist.vue";
 
 definePageMeta({
-  layout: 'default'
+  layout: 'default',
+  title: 'Solutions'
 })
 
 const darkMode = ref(true)

plugins/vuex.js

@@ -0,0 +1,201 @@
+import { createStore } from "vuex";
+
+const store = createStore({
+    state() {
+        return {
+            assetEditable: false,
+            assetFiltered: false,
+            assetSearchable: false,
+            deleteAsset: false,
+            onAssetlist: true,
+            onCustomerAssetlist: false,
+            onAsset: false,
+            onSolutionlistAsset: false,
+            chosenAssetId: -1,
+            filteredAssetbyClient: '',
+            newAsset: false,
+            newAssetName: '',
+            newCustomerID: '',
+            newCustomer: '',
+            newLocation: '',
+            newRemoteLocation: '',
+            newType: '',
+            newDescription: '',
+            newNotes: '',
+            newState: '',
+            newLastView: '',
+            newUser: '',
+            hardwareBool: false,
+            newModel: '',
+            newSerialnumber: '',
+            newCPU: '',
+            newRAM: '',
+            newStorageConfiguration: '',
+            newMiscellaneous: '',
+            softwareBool: false,
+            newSoftware: '',
+            newVersion: '',
+            newLicense: '',
+        };
+    },
+    mutations: {
+        toggleEditableAsset(state) {
+            state.assetEditable = !state.assetEditable
+        },
+        toggleFilteredAsset(state) {
+            if (state.assetFiltered == false) {
+                state.assetFiltered = true
+                state.assetSearchable = false
+            } else {
+                state.assetFiltered = false
+            }
+        },
+        changeToAssetlist(state) {
+            state.onAssetlist = true
+            state.onCustomerAssetlist = false
+            state.onAsset = false
+            state.onSolutionlistAsset = false
+        },
+        changeToCustomerAssetlist(state) {
+            state.onAssetlist = false
+            state.onCustomerAssetlist = true
+            state.onAsset = false
+            state.onSolutionlistAsset = false
+        },
+        changeToAsset(state) {
+            state.onAssetlist = false
+            state.onCustomerAssetlist = false
+            state.onAsset = true
+            state.onSolutionlistAsset = false
+        },
+        changeToSolutionlistAsset(state) {
+            state.onAssetlist = false
+            state.onCustomerAssetlist = false
+            state.onAsset = false
+            state.onSolutionlistAsset = true
+        },
+        setChosenAsset(state, id) {
+            state.chosenAssetId = id
+        },
+        resetAssetStore(state) {
+            state.assetEditable = false
+            state.assetFiltered = false
+            state.assetSearchable = false
+            state.deleteAsset = false
+            state.chosenAssetId = -1
+            state.filteredAssetbyClient = ''
+            state.newAsset = false
+            state.newAssetName = ''
+            state.newCustomerID = ''
+            state.newCustomer = ''
+            state.newLocation = ''
+            state.newRemoteLocation = ''
+            state.newType = ''
+            state.newDescription = ''
+            state.newNotes = ''
+            state.newState = ''
+            state.newLastView = ''
+            state.newUser = ''
+            state.hardwareBool = false
+            state.newModel = ''
+            state.newSerialnumber = ''
+            state.newCPU = ''
+            state.newRAM = ''
+            state.newStorageConfiguration = ''
+            state.newMiscellaneous = ''
+            state.softwareBool = false
+            state.newSoftware = ''
+            state.newVersion = ''
+            state.newLicense = ''
+        },
+
+        // functions to change the production order and maintenance visit pages
+        changeToTemplatelist(state) {
+            state.onTemplatelist = true
+            state.onCustomerTemplatelist = false
+            state.onTemplate = false
+            state.onInstancelist = false
+            state.onInstance = false
+        },
+        changeToCustomerTemplatelist(state) {
+            state.onTemplatelist = false
+            state.onCustomerTemplatelist = true
+            state.onTemplate = false
+            state.onInstancelist = false
+            state.onInstance = false
+        },
+        changeToTemplate(state) {
+            state.onTemplatelist = false
+            state.onCustomerTemplatelist = false
+            state.onTemplate = true
+            state.onInstancelist = false
+            state.onInstance = false
+        },
+        changeToInstancelist(state) {
+            state.onTemplatelist = false
+            state.onCustomerTemplatelist = false
+            state.onTemplate = false
+            state.onInstancelist = true
+            state.onInstance = false
+        },
+        doDeleteAsset(state) {
+            state.deleteAsset = true
+        },
+        undoDeleteAsset(state) {
+            state.deleteAsset = false
+        },
+        updateAssetFilterbyClient(state, client) {
+            state.filteredAssetbyClient = client
+        },
+        toggleAssetSearchable(state) {
+            if (state.assetSearchable == false) {
+                state.assetSearchable = true
+                state.assetFiltered = false
+            } else {
+                state.assetSearchable = false
+            }
+            state.filteredAssetbyClient = ''
+        },
+        addNewAsset(state) {
+            state.newAsset = true
+            state.assetEditable = false
+            state.assetFiltered = false
+            state.assetSearchable = false
+            state.onAssetlist = false
+            state.onCustomerAssetlist = false
+            state.onAsset = true
+            state.onSolutionlistAsset = false
+        },
+        updateAssetComponent(state, asset) {
+            state.newAssetName = asset.assetName
+            state.newCustomerID = asset.customerId
+            state.newCustomer = asset.customer
+            state.newLocation = asset.location
+            state.newRemoteLocation = asset.remoteLocation
+            state.newType = asset.type
+            state.newDescription = asset.description
+            state.newNotes = asset.notes
+            state.newState = asset.state
+        },
+        updateHardwareComponent(state, asset) {
+            state.hardwareBool = asset.hardwareBool
+            state.newModel = asset.model
+            state.newSerialnumber = asset.serialnumber
+            state.newCPU = asset.CPU
+            state.newRAM = asset.RAM
+            state.newStorageConfiguration = asset.storageConfig
+            state.newMiscellaneous = asset.miscellaneous
+        },
+        updateSoftwareComponent(state, asset) {
+            state.softwareBool = asset.softwareBool
+            state.newSoftware = asset.software
+            state.newVersion = asset.version
+            state.newLicense = asset.license
+        }
+    },
+});
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.use(store);
+    // Install the store instance as a plugin
+});

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

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

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

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

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

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

router/index.js

@@ -0,0 +1,65 @@
+// import { createRouter, createWebHistory } from 'vue-router';
+// import HomePage from '../pages/home.vue';
+// import ClientsPage from '../pages/clients.vue';
+// import LoginPage from '../pages/login.vue';
+// import AssetPage from '../pages/assets.vue';
+// import SolutionPage from '../pages/solutions.vue';
+// import IssueSlipPage from '../pages/issueSlips.vue';
+// import IssuesPages from '../pages/issues.vue';
+// import MaintenanceVisitsPage from '../pages/maintenanceVisits.vue';
+// import ProductionOrdersPage from '../pages/productionOrders.vue';
+// import SettingsPage from '../pages/settings.vue';
+
+// const router = createRouter({
+//     mode: 'history',
+//     history: createWebHistory(),
+//     routes: [
+//         {
+//             name: "Asset",
+//             path: "/asset/:id",
+//             component: async () => await import('../pages/assets.vue'),
+//         },
+//         {
+//             path: '/login',
+//             component: LoginPage
+//         },
+//         {
+//             path: '/home',
+//             component: HomePage
+//         },
+//         {
+//             path: '/productionOrders',
+//             component: ProductionOrdersPage
+//         },
+//         {
+//             path: '/maintenanceVisits',
+//             component: MaintenanceVisitsPage
+//         },
+//         {
+//             path: '/assets',
+//             component: AssetPage
+//         },
+//         {
+//             path: '/solutions',
+//             component: AssetPage
+//         },
+//         {
+//             path: '/issueSlips',
+//             component: IssueSlipPage
+//         },
+//         {
+//             path: '/issues',
+//             component: IssuesPages
+//         },
+//         {
+//             path: '/clients',
+//             component: ClientsPage
+//         },
+//         {
+//             path: '/settings',
+//             component: SettingsPage
+//         },
+//     ]
+// })
+
+// export default router

routerFrontend/index.js

@@ -1,59 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router';
-import HomePage from '../pages/home.vue';
-import ClientsPage from '../pages/clients.vue';
-import LoginPage from '../pages/login.vue';
-import AssetPage from '../pages/assets.vue';
-import SolutionPage from '../pages/solutions.vue';
-import IssueSlipPage from '../pages/issueSlips.vue';
-import IssuesPages from '../pages/issues.vue';
-import MaintenanceVisitsPage from '../pages/maintenanceVisits.vue';
-import ProductionOrdersPage from '../pages/productionOrders.vue';
-import SettingsPage from '../pages/settings.vue';
-
-const router = createRouter({
-    history: createWebHistory(),
-    routes: [
-        {
-            path: '/login',
-            component: LoginPage
-        },
-        {
-            path: '/home',
-            component: HomePage
-        }, 
-        {
-            path: '/productionOrders',
-            component: ProductionOrdersPage
-        },  
-        {
-            path: '/maintenanceVisits',
-            component: MaintenanceVisitsPage
-        },
-        {
-            path: '/assets',
-            component: AssetPage
-        },  
-        {
-            path: '/solutions',
-            component: SolutionPage
-        },  
-        {
-            path: '/issueSlips',
-            component: IssueSlipPage
-        },  
-        {
-            path: '/issues',
-            component: IssuesPages
-        },  
-        {
-            path: '/clients',
-            component: ClientsPage
-        },  
-        {
-            path: '/settings',
-            component: SettingsPage
-        },         
-    ]
-})
-
-export default router

server/api/addConfigItem.ts

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

server/api/auth/login.ts

@@ -0,0 +1,95 @@
+import axios, { AxiosError } from 'axios';
+import serversideConfig from '../../../serversideConfig';
+import https from 'https';
+
+let errorMsg = 'error';
+//const { data } = useAuthState()
+
+
+export default eventHandler(async (event) => {
+
+    const agent = new https.Agent({
+        rejectUnauthorized: false,
+    });
+    const axiosInstance = axios.create({
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: "*",
+        },
+        httpsAgent: agent
+    });
+
+
+    const body = await readBody(event)
+
+    // get user object from backend
+    try {
+        let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/login`, {
+            username: body.username,
+            password: body.password,
+        });
+        const sessionToken = res.data.token;
+        const user = res.data.user;
+
+        console.log('sessionToken: ', sessionToken);
+        console.log('user: ', user);
+
+        setResponseStatus(event, 200);
+        const resBody = {
+            token: sessionToken,
+            message: 'Login successful'
+        };
+        console.log('resBody: ', resBody);
+
+        return resBody;
+    } 
+    catch (err) {
+        if (axios.isAxiosError(err)) {
+            const axiosError = err as AxiosError;
+
+            if (axiosError.response) {
+                // Axios error
+                //console.error(axiosError.response.data.message);
+                //errorMsg = axiosError.response.data.message;
+            } else if (axiosError.request) {
+                // If error was caused by the request
+                console.error(axiosError.request);
+            } else {
+                // Other errors
+                console.error('Error', axiosError.message);
+            }
+        } else {
+            // No AxiosError
+            console.error('Error', err);
+        }
+    }
+    throw createError({
+        statusCode: 400,
+        statusMessage: errorMsg,
+    })
+
+
+})
+
+
+
+/*import { loginSuccessful, sessionToken, errorMsg } from "../../middleware/login";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    if (!loginSuccessful) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200);
+    //setResponseHeader(event, "Set-Cookie", sessionToken);
+    const resBody = {
+        token: sessionToken,
+        message: 'Login successful'
+    };
+    return resBody;
+})*/

server/api/auth/refresh.ts

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

server/api/auth/session.ts

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

server/api/auth/signup.ts

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

server/api/deleteConfigItem/[id].ts

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