added update config items functionality

This commit is contained in:
2024-02-18 12:04:14 +01:00
parent 5242d4a3af
commit 2e1d3f7026
7 changed files with 363 additions and 61 deletions

View File

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