added update config items functionality

backend/models/configItemsModel.js

@@ -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 = ?`;
+    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) {

components/server/Asset.vue

@@ -1,7 +1,7 @@
 <template>
     <section :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"
+        <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">
@@ -9,14 +9,14 @@
                     <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
                     <pre v-if="!editable"
                         :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.customer }}</pre>
-                    <input v-if="editable" v-model="item.customer"
+                    <input v-if="editable" v-model="item.customer" @change="updateConfigItem()"
                         :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
                 <div class="data-field" id="location">
                     <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Location:</pre>
                     <pre v-if="!editable"
                         :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.location }}</pre>
-                    <input v-if="editable" v-model="item.location"
+                    <input v-if="editable" v-model="item.location" @change="updateConfigItem()"
                         :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
@@ -24,25 +24,31 @@
                 <div class="id-type">
                     <div class="data-field" id="id">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
-                        <pre v-if="!editable"
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.primaryID }}</pre>
-                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.primaryID }}</pre>
-                        <input v-if="editable" v-model="item.primaryID"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                     <div class="data-field" id="type">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
                         <pre v-if="!editable"
                             :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.type }}</pre>
-                        <input v-if="editable" v-model="item.type"
+                        <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">
+                <div class="remoteLocation-state">
-                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Remote location:</pre>
+                    <div class="data-field" id="remote-location">
-                    <pre v-if="!editable"
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Remote location:</pre>
-                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.remoteLocation }}</pre>
+                        <pre v-if="!editable"
-                    <input v-if="editable" v-model="item.remoteLocation"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.remoteLocation }}</pre>
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                        <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">
@@ -53,14 +59,14 @@
             <div class="additional">
                 <div class="description">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
-                    <input v-model="item.description" :readonly="!editable"
+                    <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>
-                    <input v-model="item.notes" :readonly="!editable"
+                    <input v-model="item.notes" :readonly="!editable" @change="updateConfigItem()"
                         :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
                 </div>
             </div>
@@ -98,7 +104,7 @@ const getItemById = async () => {
 
 //update data
 const updateConfigItem = async () => {
-    if (item.assetName.trim() === "") {
+    if (item.value.assetName.trim() === "") {
         alert("Please add a config item name!");
         return;
     } else {
@@ -115,38 +121,39 @@ const updateConfigItem = async () => {
         }
         try {
             await Axios.put(
-                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateConfigItem/${itemIndex}`,
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateConfigItem`,
                 {
-                    primaryID: item.primaryID,
+                    primaryID: item.value.primaryID,
-                    assetName: item.assetName,
+                    assetName: item.value.assetName,
-                    customerID: item.customerID,
+                    customerID: item.value.customerID,
-                    customer: item.customer,
+                    customer: item.value.customer,
-                    location: item.location,
+                    location: item.value.location,
-                    remoteLocation: item.remoteLocation,
+                    remoteLocation: item.value.remoteLocation,
-                    type: item.type,
+                    type: item.value.type,
-                    description: item.description,
+                    description: item.value.description,
-                    notes: item.notes,
+                    notes: item.value.notes,
-                    state: item.state,
+                    state: item.value.state,
-                    lastView: item.lastView,
+                    lastView: item.value.lastView,
-                    user: item.user,
+                    user: item.value.user,
-                    hardwareBool: item.hardwareBool,
+                    hardwareBool: item.value.hardwareBool,
-                    model: item.model,
+                    model: item.value.model,
-                    serialnumber: item.serialnumber,
+                    serialnumber: item.value.serialnumber,
-                    CPU: item.CPU,
+                    CPU: item.value.CPU,
-                    RAM: item.RAM,
+                    RAM: item.value.RAM,
-                    storageConfiguration: item.storageConfiguration,
+                    storageConfiguration: item.value.storageConfiguration,
-                    miscellaneous: item.miscellaneous,
+                    miscellaneous: item.value.miscellaneous,
-                    softwareBool: item.softwareBool,
+                    softwareBool: item.value.softwareBool,
-                    software: item.software,
+                    software: item.value.software,
-                    version: item.version,
+                    version: item.value.version,
-                    licence: item.licence,
+                    license: item.value.license,
-                    networkBool: item.networkBool,
+                    networkBool: item.value.networkBool,
-                    IPv4: item.IPv4,
+                    IPv4: item.value.IPv4,
-                    IPv6: item.IPv6,
+                    IPv6: item.value.IPv6,
-                    MAC: item.MAC,
+                    MAC: item.value.MAC,
-                    subnetmask: item.subnetmask,
+                    subnetmask: item.value.subnetmask,
                 }
             );
+            await getItemById();
         } catch (err) {
             console.log(err);
         }
@@ -331,7 +338,8 @@ export default {
     color: #000;
 }
 
-.id-type {
+.id-type,
+.remoteLocation-state {
     display: flex;
     flex-direction: row;
     align-items: center;

components/server/HardwareSpecifications.vue

@@ -1,5 +1,5 @@
 <template>
-    <section :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="hardwareBoolean" :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">
@@ -7,14 +7,14 @@
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Model:</pre>
                     <pre v-if="!editable"
                         :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.model }}</pre>
-                    <input v-if="editable" v-model="item.model"
+                    <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 v-if="!editable"
                         :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.CPU }}</pre>
-                    <input v-if="editable" v-model="item.CPU"
+                    <input v-if="editable" v-model="item.CPU" @change="updateConfigItem()"
                         :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
@@ -23,14 +23,14 @@
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Serial number:</pre>
                     <pre v-if="!editable"
                         :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.serialnumber }}</pre>
-                    <input v-if="editable" v-model="item.serialnumber"
+                    <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 v-if="!editable"
                         :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.RAM }}</pre>
-                    <input v-if="editable" v-model="item.RAM"
+                    <input v-if="editable" v-model="item.RAM" @change="updateConfigItem()"
                         :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
@@ -39,7 +39,7 @@
             <div class="additional">
                 <div class="storage-configuration">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Storage configuration:</h3>
-                    <input v-model="item.storageConfiguration" :readonly="!editable"
+                    <input v-model="item.storageConfiguration" :readonly="!editable" @change="updateConfigItem()"
                         :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"
                         id="storage-configuration">
                 </div>
@@ -47,7 +47,7 @@
             <div class="additional">
                 <div class="miscellaneous">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Miscellaneous:</h3>
-                    <input v-model="item.miscellaneous" :readonly="!editable"
+                    <input v-model="item.miscellaneous" :readonly="!editable" @change="updateConfigItem()"
                         :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">
                 </div>
             </div>
@@ -90,6 +90,48 @@ const getItemById = async () => {
     }
 }
 
+//update data
+const updateConfigItem = async () => {
+    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();
 });

components/server/NetworkSpecifications.vue

@@ -1,5 +1,5 @@
 <template>
-    <section :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section v-if="networkBoolean" :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">
@@ -7,14 +7,14 @@
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv4:</pre>
                     <pre v-if="!editable"
                         :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ inputIPv4 }}</pre>
-                    <input v-if="editable" v-model="inputIPv4"
+                    <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 v-if="!editable"
                         :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.MAC }}</pre>
-                    <input v-if="editable" v-model="item.MAC"
+                    <input v-if="editable" v-model="item.MAC" @change="updateConfigItem()"
                         :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
@@ -23,14 +23,14 @@
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv6:</pre>
                     <pre v-if="!editable"
                         :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ inputIPv6 }}</pre>
-                    <input v-if="editable" v-model="inputIPv6"
+                    <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 v-if="!editable"
                         :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.subnetmask }}</pre>
-                    <input v-if="editable" v-model="item.subnetmask"
+                    <input v-if="editable" v-model="item.subnetmask" @change="updateConfigItem()"
                         :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
@@ -86,6 +86,125 @@ const getItemById = async () => {
     }
 }
 
+// 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 (validateIPv4address(inputIPv4.value)) {
+        console.log("not ere")
+        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);
+        }
+    } 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);
+        }
+    } 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!");
+    }
+}
+
 onMounted(() => {
     getItemById();
 });

components/server/SoftwareSpecifications.vue

@@ -13,7 +13,23 @@
                                 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">
+                        <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>
@@ -63,6 +79,48 @@ const getItemById = async () => {
     }
 }
 
+//update data
+const updateConfigItem = async () => {
+    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();
 });
@@ -208,4 +266,29 @@ th {
 .License {
     width: 25%;
 }
+
+.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>

server/api/updateConfigItem.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': 'GET,HEAD,PUT,PATCH,POST,DELETE',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+})

server/middleware/configItems.ts

@@ -79,6 +79,34 @@ export default defineEventHandler(async (event) => {
             }
         }
     }
+
+    if (event.path.startsWith("/api/updateConfigItem")) {
+        const body = await readBody(event)
+        // update the config item in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/configItem`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
 })
 
 export { configItems, configItem, errorMsg };