add config item

This commit is contained in:
2024-02-26 12:31:58 +01:00
parent 13096ce679
commit 49fb1ef397
15 changed files with 940 additions and 69 deletions

View File

@ -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);