added update config items functionality
This commit is contained in:
@ -1,7 +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>
|
||||
<input v-if="editable" v-model="item.assetName"
|
||||
<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">
|
||||
<div class="client-location">
|
||||
@ -9,14 +9,14 @@
|
||||
<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"
|
||||
<input v-if="editable" v-model="item.customer" @change="updateConfigItem()"
|
||||
: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 v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.location }}</pre>
|
||||
<input v-if="editable" v-model="item.location"
|
||||
<input v-if="editable" v-model="item.location" @change="updateConfigItem()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
@ -24,25 +24,31 @@
|
||||
<div class="id-type">
|
||||
<div class="data-field" id="id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</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']">
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.primaryID }}</pre>
|
||||
</div>
|
||||
<div class="data-field" id="type">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.type }}</pre>
|
||||
<input v-if="editable" v-model="item.type"
|
||||
<input v-if="editable" v-model="item.type" @change="updateConfigItem()"
|
||||
: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 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 class="remoteLocation-state">
|
||||
<div class="data-field" id="remote-location">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Remote location:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.remoteLocation }}</pre>
|
||||
<input v-if="editable" v-model="item.remoteLocation" @change="updateConfigItem()"
|
||||
: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>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.state }}</pre>
|
||||
<input v-if="editable" v-model="item.state" @change="updateConfigItem()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rectangle-container">
|
||||
@ -53,14 +59,14 @@
|
||||
<div class="additional">
|
||||
<div class="description">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
|
||||
<input v-model="item.description" :readonly="!editable"
|
||||
<input v-model="item.description" :readonly="!editable" @change="updateConfigItem()"
|
||||
: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="item.notes" :readonly="!editable"
|
||||
<input v-model="item.notes" :readonly="!editable" @change="updateConfigItem()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
|
||||
</div>
|
||||
</div>
|
||||
@ -98,7 +104,7 @@ const getItemById = async () => {
|
||||
|
||||
//update data
|
||||
const updateConfigItem = async () => {
|
||||
if (item.assetName.trim() === "") {
|
||||
if (item.value.assetName.trim() === "") {
|
||||
alert("Please add a config item name!");
|
||||
return;
|
||||
} else {
|
||||
@ -115,38 +121,39 @@ const updateConfigItem = async () => {
|
||||
}
|
||||
try {
|
||||
await Axios.put(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateConfigItem/${itemIndex}`,
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateConfigItem`,
|
||||
{
|
||||
primaryID: item.primaryID,
|
||||
assetName: item.assetName,
|
||||
customerID: item.customerID,
|
||||
customer: item.customer,
|
||||
location: item.location,
|
||||
remoteLocation: item.remoteLocation,
|
||||
type: item.type,
|
||||
description: item.description,
|
||||
notes: item.notes,
|
||||
state: item.state,
|
||||
lastView: item.lastView,
|
||||
user: item.user,
|
||||
hardwareBool: item.hardwareBool,
|
||||
model: item.model,
|
||||
serialnumber: item.serialnumber,
|
||||
CPU: item.CPU,
|
||||
RAM: item.RAM,
|
||||
storageConfiguration: item.storageConfiguration,
|
||||
miscellaneous: item.miscellaneous,
|
||||
softwareBool: item.softwareBool,
|
||||
software: item.software,
|
||||
version: item.version,
|
||||
licence: item.licence,
|
||||
networkBool: item.networkBool,
|
||||
IPv4: item.IPv4,
|
||||
IPv6: item.IPv6,
|
||||
MAC: item.MAC,
|
||||
subnetmask: item.subnetmask,
|
||||
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);
|
||||
}
|
||||
@ -331,7 +338,8 @@ export default {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.id-type {
|
||||
.id-type,
|
||||
.remoteLocation-state {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user