fixed cors headers

components/server/Asset.vue

@@ -1,31 +1,48 @@
 <template>
     <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ item.assetName }}</h2>
+        <h2 v-if="!editable" :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ item.assetName }}</h2>
+        <input v-if="editable" v-model="item.assetName"
+            :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']"> {{ item.customer }}</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.customer }}</pre>
+                    <input v-if="editable" v-model="item.customer"
+                        :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 :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.location }}</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.location }}</pre>
+                    <input v-if="editable" v-model="item.location"
+                        :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']">{{ item.primaryID }}</pre>
+                        <pre v-if="!editable"
+                            :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 :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.type }}</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.type }}</pre>
+                        <input v-if="editable" v-model="item.type"
+                            :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']">{{ item.remoteLocation }}</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.remoteLocation }}</pre>
+                    <input v-if="editable" v-model="item.remoteLocation"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
             <div class="rectangle-container">
@@ -36,13 +53,19 @@
             <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">{{ item.description }}</pre>
+                    <pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="description">{{ item.description }}</pre>
+                    <input v-if="editable" v-model="item.description"
+                        :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">{{ item.notes }}</pre>
+                    <pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="notes">{{ item.notes }}</pre>
+                    <input v-if="editable" v-model="item.notes"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
                 </div>
             </div>
         </div>
@@ -56,6 +79,7 @@ import Axios from '../axios.config.js';
 import serversideConfig from '../serversideConfig.js';
 
 const darkMode = ref(true)
+// const editable = ref(false)
 const item = ref({});
 
 // get config item from id
@@ -74,13 +98,20 @@ const getItemById = async () => {
 
 onMounted(() => {
     getItemById();
+    // console.log(editable.value)
 });
+
 </script>
 
 <script>
 export default {
     name: "Asset",
-};
+    computed: {
+        editable() {
+            return this.$store.state.assetEditable
+        }
+    },
+}
 </script>
       
       
@@ -114,6 +145,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;
 }
@@ -133,6 +174,14 @@ export default {
     border-radius: 0.625rem;
 }
 
+.h2-input-darkmode {
+    background-color: #212121;
+}
+
+.h2-input-lightmode {
+    background-color: #EBEBEB;
+}
+
 .data-field#street-name {
     width: 70%;
 }
@@ -154,6 +203,10 @@ export default {
     color: #000;
 }
 
+.input {
+    border: none;
+}
+
 .data {
     display: flex;
     flex-direction: row;

components/server/HardwareSpecifications.vue

@@ -5,21 +5,33 @@
             <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']">{{ item.model }}</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.model }}</pre>
+                    <input v-if="editable" v-model="item.model"
+                        :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']">{{ item.CPU }}</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.CPU }}</pre>
+                    <input v-if="editable" v-model="item.CPU"
+                        :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']">{{ item.serialnumber }}</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.serialnumber }}</pre>
+                    <input v-if="editable" v-model="item.serialnumber"
+                        :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']">{{ item.RAM }}</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.RAM }}</pre>
+                    <input v-if="editable" v-model="item.RAM"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
         </div>
@@ -27,14 +39,20 @@
             <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']"
+                    <pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
                         id="storage-configuration">{{ item.storageConfiguration }}</pre>
+                    <input v-if="editable" v-model="item.storageConfiguration"
+                        :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">{{ item.miscellaneous }}</pre>
+                    <pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="miscellaneous">{{ item.miscellaneous }}</pre>
+                    <input v-if="editable" v-model="item.miscellaneous"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">
                 </div>
             </div>
         </div>
@@ -80,6 +98,11 @@ onMounted(() => {
 <script>
 export default {
     name: "HardwareSpecifications",
+    computed: {
+        editable() {
+            return this.$store.state.assetEditable
+        }
+    },
 };
 </script>   
 
@@ -147,6 +170,10 @@ export default {
     font: 400 0.75rem/250% Overpass, sans-serif;
 }
 
+.input {
+    border: none;
+}
+
 .data-darkmode {
     background-color: #212121;
     color: #fff;

components/server/NetworkSpecifications.vue

@@ -47,7 +47,6 @@ const getItemById = async () => {
             `https://${serversideConfig.url}:3000/api/getConfigItem/${itemIndex}`
         );
         item.value = response.data;
-        console.log(item.value)
         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;