Merge branch 'addConfigitem'

2024-02-26 12:36:30 +01:00
parent e4aa11b902 49fb1ef397
commit 84c17ad855
15 changed files with 940 additions and 69 deletions
--- a/backend/models/configItemsModel.js
+++ b/backend/models/configItemsModel.js
@ -76,6 +76,7 @@ export const updateConfigItemById = async (data, result) => {
 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, 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) {
--- a/components/ClientSearch.vue
+++ b/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>
--- a/components/server/Asset.vue
+++ b/components/server/Asset.vue
@ -1,6 +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>
+    <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">
@ -9,8 +10,6 @@
                    <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" @change="updateCustomerID()"
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> -->
                    <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">
@ -77,7 +76,72 @@
                </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>
    
@ -91,26 +155,55 @@ 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 deleteAssetBool = computed(() => store.state.deleteAsset);
+const addAssetBool = computed(() => store.state.newAsset);

-const darkMode = ref(true)
+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 () => {
-    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);
+    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() === "") {
@ -124,8 +217,9 @@ const updateConfigItem = async () => {
                counter += 1;
            }
        });
-        if (counter == 2) {
+        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 {
@ -218,12 +312,30 @@ const updateCustomerID = async () => {
    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();
-    getCustomers();
+    triggerBackendCallsWithDelay(getCustomers);
 });

 </script>
@ -241,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);
--- a/components/server/AssetTable.vue
+++ b/components/server/AssetTable.vue
@ -1,4 +1,9 @@
 <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">
@ -49,10 +54,11 @@
 </template>
  
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
+import { computed } from 'vue';

 // get accesss to the store
 const store = useStore()
@ -60,20 +66,60 @@ 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/getAllConfigItems`);
+        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();
 });
@ -93,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;
 }
@ -228,6 +319,17 @@ 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;
 }
--- a/components/server/HardwareSpecifications.vue
+++ b/components/server/HardwareSpecifications.vue
@ -1,5 +1,6 @@
 <template>
-    <section v-if="hardwareBoolean" :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">
@ -53,6 +54,52 @@
            </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>
+    </section>
 </template>
    

@ -66,6 +113,15 @@ 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({});
@ -78,10 +134,6 @@ const getItemById = async () => {
            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
        );
        item.value = response.data;
-        if ((item.value.hardwareBool == 1) && (item.value.model === (null | "")) && (item.value.serialnumber.trim() === "") && (item.value.CPU.trim() === "") && (item.value.RAM.trim() === "") && (item.value.storageConfiguration.trim() === "") && (item.value.miscellaneous.trim() === "")) {
-            item.value.hardwareBool = 0;
-            hardwareBoolean.value = false;
-        };
        if (item.value.hardwareBool == 1) {
            hardwareBoolean.value = true;
        };
@ -90,8 +142,28 @@ const getItemById = async () => {
    }
 }

+// 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`,
@ -150,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);
--- a/components/server/NetworkSpecifications.vue
+++ b/components/server/NetworkSpecifications.vue
@ -1,5 +1,6 @@
 <template>
-    <section v-if="networkBoolean" :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">
@ -36,6 +37,38 @@
            </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>
    

@ -49,40 +82,66 @@ 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 () => {
-    try {
-        const response = await Axios.get(
-            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
-        );
-        item.value = response.data;
-        if ((item.value.networkBool == 1) && (item.value.IPv4 === (null | "")) && (item.value.IPv6 === (null | "")) && (item.value.subnetmask === (null | "")) && (item.value.MAC === (null | ""))) {
-            item.value.networkBool = 0;
-            networkBoolean.value = false;
-        };
-        if (item.value.networkBool == 1) {
-            networkBoolean.value = true;
-        };
-
-        if (item.value.IPv4 == null) {
-            inputIPv4.value = "";
-        } else {
-            inputIPv4.value = item.value.IPv4;
+    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);
        }
-        if (item.value.IPv6 == null) {
-            inputIPv6.value = "";
-        } else {
-            inputIPv6.value = item.value.IPv6;
-        }
-    } catch (err) {
-        console.log(err.response.statusText);
    }
 }

@ -108,6 +167,9 @@ const validateIPv6address = (ipaddress) => {

 //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 {
@ -202,10 +264,101 @@ const updateConfigItem = async () => {
        }
        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(() => {
-    getItemById();
+    triggerBackendCallsWithDelay(getItemById);
+    triggerBackendCallsWithDelay(getConfigItems);
 });
 </script>

@ -222,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);
@ -306,6 +458,42 @@ export default {
    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;
 }
--- a/components/server/SoftwareSpecifications.vue
+++ b/components/server/SoftwareSpecifications.vue
@ -1,5 +1,6 @@
 <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">
@ -43,6 +44,41 @@
            </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>
+    </section>
 </template>
    
 <script setup>
@ -55,6 +91,12 @@ 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({});
@ -67,10 +109,6 @@ const getItemById = async () => {
            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
        );
        item.value = response.data;
-        if ((item.value.softwareBool == 1) && (item.value.version.trim() === "") && (item.value.software.trim() === "")) {
-            item.value.softwareBool = 0;
-            softwareBoolean.value = false;
-        };
        if (item.value.softwareBool == 1) {
            softwareBoolean.value = true;
        };
@ -79,8 +117,25 @@ const getItemById = async () => {
    }
 }

+// 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`,
@ -139,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);
--- a/layouts/Actionbar.vue
+++ b/layouts/Actionbar.vue
@ -4,7 +4,7 @@
      <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">
+      <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" />
        </div>
@ -12,7 +12,7 @@
          <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" />
        </div>
@ -52,7 +52,7 @@
          <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" />
        </div>
@ -99,6 +99,15 @@ const deleteAsset = () => {
 const toggleActionbar = () => {
  isExpanded.value = !isExpanded.value;
 };
+const toggleFiltered = () => {
+  store.commit('toggleFilteredAsset');
+};
+const toggleSearched = () => {
+  store.commit('toggleAssetSearchable');
+};
+const addAsset = () => {
+  store.commit('addNewAsset');
+};
 </script>


--- a/middleware/auth.js
+++ b/middleware/auth.js
@ -0,0 +1,12 @@
+// export default function ({ route, redirect }) {
+//     // Check if user is not authenticated and trying to access a page other than /login
+//     if (!isAuthenticated() && route.path !== '/login') {
+//       return redirect('/login');
+//     }
+//   }
+  
+//   function isAuthenticated() {
+//     // Implement authentication logic 
+//     return false
+//     // Return true if authenticated, false otherwise
+//   }
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -1,4 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import type {
+  NuxtPage
+} from 'nuxt/schema'

 export default defineNuxtConfig({
  devtools: { enabled: true },
@ -10,10 +13,27 @@ export default defineNuxtConfig({
  },
  vite: {
    server: {
-      cors: { 
+      cors: {
        origin: true,
        optionsSuccessStatus: 204,
      },
    }
-  }
+  },
+  // 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)
+  //   }
+  // }
 })
--- a/plugins/vuex.js
+++ b/plugins/vuex.js
@ -4,18 +4,52 @@ const store = createStore({
    state() {
        return {
            assetEditable: false,
+            assetFiltered: false,
+            assetSearchable: false,
            deleteAsset: false,
            onAssetlist: true,
            onCustomerAssetlist: false,
            onAsset: false,
            onSolutionlistAsset: false,
-            chosenAssetId: -1
+            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
@ -44,14 +78,89 @@ const store = createStore({
            state.chosenAssetId = id
        },
        resetAssetStore(state) {
-            state.chosenAssetId = -1
            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 = ''
        },
        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
        }
    },
 });
--- a/server/api/addConfigItem.ts
+++ b/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)
+})
--- a/server/api/getSelectedConfigItemsByAsset/[id].ts
+++ b/server/api/getSelectedConfigItemsByAsset/[id].ts
@ -0,0 +1,22 @@
+import { selectedConfigItemsByAsset, 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 selectedConfigItemsByAsset
+})
--- a/server/api/getSelectedConfigItemsByClient/[id].ts
+++ b/server/api/getSelectedConfigItemsByClient/[id].ts
@ -0,0 +1,22 @@
+import { selectedConfigItemsByClient, 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 selectedConfigItemsByClient
+})
--- a/server/middleware/configItems.ts
+++ b/server/middleware/configItems.ts
@ -5,6 +5,8 @@ import https from 'https';
 let configItems = [];
 let configItem = {};
 let errorMsg = '';
+let selectedConfigItemsByClient = [];
+let selectedConfigItemsByAsset = [];

 export default defineEventHandler(async (event) => {

@ -108,6 +110,34 @@ export default defineEventHandler(async (event) => {
        }
    }

+    if (event.path.startsWith("/api/addConfigItem")) {
+        const body = await readBody(event)
+        // add the config item in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/configItems`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
    if (event.path.startsWith("/api/deleteConfigItem")) {
        let itemId = null;
        const path = event._path;
@ -139,6 +169,70 @@ export default defineEventHandler(async (event) => {
            }
        }
    }
+
+    if (event.path.startsWith("/api/getSelectedConfigItemsByClient")) {
+        // get selected config items object by client from backend
+        let filteredClient = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredClient = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedConfigItemsByCustomer/${filteredClient}`);
+            selectedConfigItemsByClient = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedConfigItemsByAsset")) {
+        // get selected config items object by asset from backend
+        let filteredAsset = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredAsset = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedConfigItemsByAssetName/${filteredAsset}`);
+            selectedConfigItemsByAsset = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
 })

-export { configItems, configItem, errorMsg };
+export { configItems, configItem, selectedConfigItemsByClient, selectedConfigItemsByAsset, errorMsg };