fixed backend imports

2024-02-16 19:00:30 +01:00
parent 5ca56d36cf
commit 5242d4a3af
26 changed files with 195 additions and 279 deletions
--- a/components/server/Asset.vue
+++ b/components/server/Asset.vue
@ -53,18 +53,14 @@
            <div class="additional">
                <div class="description">
                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
-                    <input v-if="!editable" v-model="item.description"
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
-                    <input v-if="editable" v-model="item.description"
+                    <input v-model="item.description" :readonly="!editable"
                        :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-if="!editable" v-model="item.notes"
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
-                    <input v-if="editable" v-model="item.notes"
+                    <input v-model="item.notes" :readonly="!editable"
                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
                </div>
            </div>
@ -77,6 +73,12 @@
 import { ref, onMounted } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const editable = computed(() => store.state.assetEditable);
+const chosenAssetId = computed(() => store.state.chosenAssetId);

 const darkMode = ref(true)
 // const editable = ref(false)
@ -84,10 +86,9 @@ const item = ref({});

 // get config item from id
 const getItemById = async () => {
-    console.log(this.chosenAssetId)
    try {
        const response = await Axios.get(
-            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId}`
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
        );
        item.value = response.data;
    } catch (err) {
@ -154,7 +155,6 @@ const updateConfigItem = async () => {

 onMounted(() => {
    getItemById();
-    // console.log(editable.value)
 });

 </script>
@ -162,14 +162,6 @@ onMounted(() => {
 <script>
 export default {
    name: "Asset",
-    computed: {
-        editable() {
-            return this.$store.state.assetEditable
-        },
-        chosenAssetId() {
-            return this.$store.state.chosenAssetId
-        }
-    },
 }
 </script>
      
--- a/components/server/AssetTable.vue
+++ b/components/server/AssetTable.vue
@ -29,7 +29,8 @@
                        <!-- <router-link to="/assets" class="button"
                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" > {{
                                item.assetName }} </router-link> -->
-                        <nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                        <nuxt-link to="/assets" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
                            @click="goToChosenAsset(item.primaryID)">
                            {{ item.assetName }}
                        </nuxt-link>
@ -51,6 +52,14 @@
 import { ref, onMounted } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+
+// get accesss to the store
+const store = useStore()
+const goToChosenAsset = (id) => {
+    store.commit('setChosenAsset', id);
+    store.commit('changeToAsset');
+};

 const darkMode = ref(true)
 const configItemList = ref([]);
@ -73,13 +82,6 @@ onMounted(async () => {
 <script>
 export default {
    name: "AssetTable",
-    methods: {
-        // switch to chosen Asset page 
-        goToChosenAsset(id) {
-            this.$store.commit('toggleEditableAsset', id)
-            this.$store.commit('changeToAsset')
-        }
-    }
 };
 </script>    
    
@ -233,4 +235,9 @@ th {
 .label-lightmode {
    color: #000;
 }
+
+#nuxt-link {
+    text-decoration: none;
+    color: white;
+}
 </style>
--- a/components/server/HardwareSpecifications.vue
+++ b/components/server/HardwareSpecifications.vue
@ -39,10 +39,7 @@
            <div class="additional">
                <div class="storage-configuration">
                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Storage configuration:</h3>
-                    <input v-if="!editable" v-model="item.storageConfiguration"
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"
-                        id="storage-configuration">
-                    <input v-if="editable" v-model="item.storageConfiguration"
+                    <input v-model="item.storageConfiguration" :readonly="!editable"
                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"
                        id="storage-configuration">
                </div>
@ -50,9 +47,7 @@
            <div class="additional">
                <div class="miscellaneous">
                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Miscellaneous:</h3>
-                    <input v-if="!editable" v-model="item.miscellaneous"
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">
-                    <input v-if="editable" v-model="item.miscellaneous"
+                    <input v-model="item.miscellaneous" :readonly="!editable"
                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">
                </div>
            </div>
@ -65,6 +60,12 @@
 import { ref, onMounted } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const editable = computed(() => store.state.assetEditable);
+const chosenAssetId = computed(() => store.state.chosenAssetId);

 const darkMode = ref(true)
 const item = ref({});
@ -72,11 +73,9 @@ const hardwareBoolean = ref(false)

 // get config item from id
 const getItemById = async () => {
-    // later itemIndex from route params
-    let itemIndex = 9;
    try {
        const response = await Axios.get(
-            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${itemIndex}`
+            `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() === "")) {
@ -99,11 +98,6 @@ onMounted(() => {
 <script>
 export default {
    name: "HardwareSpecifications",
-    computed: {
-        editable() {
-            return this.$store.state.assetEditable
-        }
-    },
 };
 </script>   

--- a/components/server/NetworkSpecifications.vue
+++ b/components/server/NetworkSpecifications.vue
@ -5,21 +5,33 @@
            <div class="IPv4-MAC">
                <div class="data-field" id="IPv4">
                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv4:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ inputIPv4 }}</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ inputIPv4 }}</pre>
+                    <input v-if="editable" v-model="inputIPv4"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                </div>
                <div class="data-field" id="MAC">
                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">MAC:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.MAC }}</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.MAC }}</pre>
+                    <input v-if="editable" v-model="item.MAC"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                </div>
            </div>
            <div class="IPv6-subnetmask">
                <div class="data-field" id="IPv6">
                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv6:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ inputIPv6 }}</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ inputIPv6 }}</pre>
+                    <input v-if="editable" v-model="inputIPv6"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                </div>
                <div class="data-field" id="subnetmask">
                    <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Subnetmask:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.subnetmask }}</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.subnetmask }}</pre>
+                    <input v-if="editable" v-model="item.subnetmask"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                </div>
            </div>
        </div>
@ -31,6 +43,12 @@
 import { ref, onMounted } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const editable = computed(() => store.state.assetEditable);
+const chosenAssetId = computed(() => store.state.chosenAssetId);

 const darkMode = ref(true)
 const item = ref({});
@ -40,11 +58,9 @@ const inputIPv6 = ref('');

 // get config item from id
 const getItemById = async () => {
-    // later itemIndex from route params
-    let itemIndex = 9;
    try {
        const response = await Axios.get(
-            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${itemIndex}`
+            `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 | ""))) {
@ -171,4 +187,8 @@ export default {
    padding: 0 0;
    border-radius: 0.3125rem;
 }
+
+.input {
+    border: none;
+}
 </style>
--- a/components/server/SoftwareSpecifications.vue
+++ b/components/server/SoftwareSpecifications.vue
@ -33,6 +33,12 @@
 import { ref, onMounted } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const editable = computed(() => store.state.assetEditable);
+const chosenAssetId = computed(() => store.state.chosenAssetId);

 const darkMode = ref(true)
 const item = ref({});
@ -40,11 +46,9 @@ const softwareBoolean = ref(false)

 // get config item from id
 const getItemById = async () => {
-    // later itemIndex from route params
-    let itemIndex = 9;
    try {
        const response = await Axios.get(
-            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${itemIndex}`
+            `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() === "")) {