Merge branch 'addConfigitem'
This commit is contained in:
@ -1,6 +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>
|
||||
<section v-if="!addAssetBool" :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" @change="updateConfigItem()"
|
||||
:class="['data', 'asset-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
<div class="asset-data">
|
||||
@ -9,8 +10,6 @@
|
||||
<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" @change="updateCustomerID()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> -->
|
||||
<select v-if="editable" id="customersDropDownChosenCI" v-model="item.customer"
|
||||
@change="updateCustomerID()" :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="cust in customers" :key="cust.primaryID">
|
||||
@ -77,7 +76,72 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section v-if="addAssetBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<input v-model="newAssetName" @change="updateAsset()"
|
||||
: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>
|
||||
<select id="customersDropDownChosenCI" v-model="newCustomer" @change="updateNewCustomerID()"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="cust in customers" :key="cust.primaryID">
|
||||
{{ cust.customername }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="data-field" id="location">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Location:</pre>
|
||||
<input v-model="newLocation" @change="updateAsset()"
|
||||
: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']"> ... </pre>
|
||||
</div>
|
||||
<div class="data-field" id="type">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
|
||||
<input v-model="newType" @change="updateAsset()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
<div class="remoteLocation-state">
|
||||
<div class="data-field" id="remote-location">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Remote location:</pre>
|
||||
<input v-model="newRemoteLocation" @change="updateAsset()"
|
||||
: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>
|
||||
<input v-model="newState" @change="updateAsset()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rectangle-container">
|
||||
<div :class="['rectangle', darkMode ? 'rectangle-darkmode' : 'rectangle-lightmode']"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="asset-data">
|
||||
<div class="additional">
|
||||
<div class="description">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
|
||||
<input v-model="newDescription" @change="updateAsset()"
|
||||
: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="newNotes" @change="updateAsset()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@ -91,26 +155,55 @@ import { computed } from 'vue';
|
||||
const store = useStore();
|
||||
const editable = computed(() => store.state.assetEditable);
|
||||
const chosenAssetId = computed(() => store.state.chosenAssetId);
|
||||
const deleteAssetBool = computed(() => store.state.deleteAsset)
|
||||
const deleteAssetBool = computed(() => store.state.deleteAsset);
|
||||
const addAssetBool = computed(() => store.state.newAsset);
|
||||
|
||||
const darkMode = ref(true)
|
||||
const darkMode = ref(true);
|
||||
const item = ref({});
|
||||
const customer = ref({});
|
||||
const configItems = ref([]);
|
||||
const customers = ref([]);
|
||||
|
||||
const newAssetName = ref('');
|
||||
const newCustomerID = ref('');
|
||||
const newCustomer = ref('');
|
||||
const newLocation = ref('');
|
||||
const newRemoteLocation = ref('');
|
||||
const newType = ref('');
|
||||
const newDescription = ref('');
|
||||
const newNotes = ref('');
|
||||
const newState = ref('');
|
||||
|
||||
// get config item from id
|
||||
const getItemById = async () => {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
|
||||
);
|
||||
item.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
if (!addAssetBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
|
||||
);
|
||||
item.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update asset fields in the store
|
||||
const updateAsset = () => {
|
||||
const asset = {
|
||||
assetName: newAssetName.value,
|
||||
customerId: newCustomerID.value,
|
||||
customer: newCustomer.value,
|
||||
location: newLocation.value,
|
||||
remoteLocation: newRemoteLocation.value,
|
||||
type: newType.value,
|
||||
description: newDescription.value,
|
||||
notes: newNotes.value,
|
||||
state: newState.value
|
||||
};
|
||||
store.commit('updateAssetComponent', asset);
|
||||
}
|
||||
|
||||
//update data
|
||||
const updateConfigItem = async () => {
|
||||
if (item.value.assetName.trim() === "") {
|
||||
@ -124,8 +217,9 @@ const updateConfigItem = async () => {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter == 2) {
|
||||
if (counter == 1) {
|
||||
alert("This asset name already exists. Please choose an unique asset name or modify respectively delete the old one!");
|
||||
item.value.assetName = '';
|
||||
return;
|
||||
}
|
||||
try {
|
||||
@ -218,12 +312,30 @@ const updateCustomerID = async () => {
|
||||
await updateConfigItem();
|
||||
}
|
||||
|
||||
// update customerid if customer was changed
|
||||
const updateNewCustomerID = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${newCustomer.value}`);
|
||||
newCustomerID.value = response.data.customerID;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
updateAsset();
|
||||
}
|
||||
|
||||
// include delay to avoid 503 error
|
||||
const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
setTimeout(() => {
|
||||
fetchDataFunc();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
watch(deleteAssetBool, confirmDeleteAsset);
|
||||
|
||||
onMounted(() => {
|
||||
getItemById();
|
||||
getConfigItems();
|
||||
getCustomers();
|
||||
triggerBackendCallsWithDelay(getCustomers);
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -241,7 +353,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);
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
<template>
|
||||
<section v-if="assetSearchable" :class="['asset-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Config item</div>
|
||||
<input v-model="assetSearchFilter" @change="searchConfigItem()"
|
||||
:class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</section>
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
|
||||
<table class="data-table" id="asset-table">
|
||||
@ -49,10 +54,11 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import Axios from '../axios.config.js';
|
||||
import clientsideConfig from '../../clientsideConfig.js';
|
||||
import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
// get accesss to the store
|
||||
const store = useStore()
|
||||
@ -60,20 +66,60 @@ const goToChosenAsset = (id) => {
|
||||
store.commit('setChosenAsset', id);
|
||||
store.commit('changeToAsset');
|
||||
};
|
||||
const clientFilter = computed(() => store.state.filteredAssetbyClient);
|
||||
const assetSearchable = computed(() => store.state.assetSearchable);
|
||||
|
||||
const assetSearchFilter = ref('');
|
||||
const darkMode = ref(true)
|
||||
const configItemList = ref([]);
|
||||
|
||||
// update search term
|
||||
const updateSearchTerm = async () => {
|
||||
assetSearchFilter.value = '';
|
||||
await getConfigItems();
|
||||
}
|
||||
|
||||
//get all config items
|
||||
const getConfigItems = async () => {
|
||||
if (!(clientFilter.value === '')) {
|
||||
await getFilteredConfigItemsByClient();
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllConfigItems`);
|
||||
configItemList.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//get all config items based on the searched client
|
||||
const getFilteredConfigItemsByClient = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllConfigItems`);
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedConfigItemsByClient/${clientFilter.value}`);
|
||||
configItemList.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
//get all config items based on the searched asset name
|
||||
const searchConfigItem = async () => {
|
||||
if (assetSearchFilter.value === '') {
|
||||
await getConfigItems();
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedConfigItemsByAsset/${assetSearchFilter.value}`);
|
||||
configItemList.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
watch(clientFilter, getConfigItems);
|
||||
watch(assetSearchable, updateSearchTerm);
|
||||
|
||||
onMounted(async () => {
|
||||
await getConfigItems();
|
||||
});
|
||||
@ -93,13 +139,58 @@ export default {
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
/* width: 100%; */
|
||||
padding: 1.25rem 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.asset-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.625em 1.875em;
|
||||
gap: 1.25em;
|
||||
width: 30.125em;
|
||||
height: 3.125em;
|
||||
box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0.625em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dataInput {
|
||||
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;
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.div-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
@ -228,6 +319,17 @@ th {
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.clientLabel {
|
||||
width: 5.5625em;
|
||||
height: 1.875em;
|
||||
font-family: "Overpass";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 0.875em;
|
||||
line-height: 1.875;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<section v-if="networkBoolean" :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<section v-if="networkBoolean && !addAssetBool"
|
||||
:class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="network">Network specifications:</div>
|
||||
<div class="asset-data">
|
||||
<div class="IPv4-MAC">
|
||||
@ -36,6 +37,38 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addAssetBool" :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="network">Network specifications:</div>
|
||||
<div class="asset-data">
|
||||
<div class="IPv4-MAC">
|
||||
<div class="data-field" id="IPv4">
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">IPv4:</pre>
|
||||
<input v-model="newIPv4" @change="updateConfigItem()"
|
||||
: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>
|
||||
<input v-model="newMAC" @change="updateConfigItem()"
|
||||
: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>
|
||||
<input v-model="newIPv6" @change="updateConfigItem()"
|
||||
: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>
|
||||
<input v-model="newSubnetmask" @change="updateConfigItem()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addAssetBool" id="saveNewItem">
|
||||
<button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addItem()">Safe</button>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
@ -49,40 +82,66 @@ 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 newAssetName = computed(() => store.state.newAssetName);
|
||||
const newCustomerID = computed(() => store.state.newCustomerID);
|
||||
const newCustomer = computed(() => store.state.newCustomer);
|
||||
const newLocation = computed(() => store.state.newLocation);
|
||||
const newRemoteLocation = computed(() => store.state.newRemoteLocation);
|
||||
const newType = computed(() => store.state.newType);
|
||||
const newDescription = computed(() => store.state.newDescription);
|
||||
const newNotes = computed(() => store.state.newNotes);
|
||||
const newState = computed(() => store.state.newState);
|
||||
const newLastView = computed(() => store.state.newLastView);
|
||||
const newUser = computed(() => store.state.newUser);
|
||||
const hardwareBool = computed(() => store.state.hardwareBool);
|
||||
const newModel = computed(() => store.state.newModel);
|
||||
const newSerialnumber = computed(() => store.state.newSerialnumber);
|
||||
const newCPU = computed(() => store.state.newCPU);
|
||||
const newRAM = computed(() => store.state.newRAM);
|
||||
const newStorageConfiguration = computed(() => store.state.newStorageConfiguration);
|
||||
const newMiscellaneous = computed(() => store.state.newMiscellaneous);
|
||||
const softwareBool = computed(() => store.state.softwareBool);
|
||||
const newSoftware = computed(() => store.state.newSoftware);
|
||||
const newVersion = computed(() => store.state.newVersion);
|
||||
const newLicense = computed(() => store.state.newLicense);
|
||||
|
||||
const darkMode = ref(true)
|
||||
const item = ref({});
|
||||
const networkBoolean = ref(false);
|
||||
const inputIPv4 = ref('');
|
||||
const inputIPv6 = ref('');
|
||||
const newNetworkBool = ref(true);
|
||||
const newIPv4 = ref('');
|
||||
const newIPv6 = ref('');
|
||||
const newMAC = ref('');
|
||||
const newSubnetmask = ref('');
|
||||
const configItems = ref([]);
|
||||
|
||||
// get config item from id
|
||||
const getItemById = async () => {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`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 | ""))) {
|
||||
item.value.networkBool = 0;
|
||||
networkBoolean.value = false;
|
||||
};
|
||||
if (item.value.networkBool == 1) {
|
||||
networkBoolean.value = true;
|
||||
};
|
||||
|
||||
if (item.value.IPv4 == null) {
|
||||
inputIPv4.value = "";
|
||||
} else {
|
||||
inputIPv4.value = item.value.IPv4;
|
||||
if (!addAssetBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
|
||||
);
|
||||
item.value = response.data;
|
||||
if (item.value.networkBool == 1) {
|
||||
networkBoolean.value = true;
|
||||
};
|
||||
if (item.value.IPv4 == null) {
|
||||
inputIPv4.value = "";
|
||||
} else {
|
||||
inputIPv4.value = item.value.IPv4;
|
||||
}
|
||||
if (item.value.IPv6 == null) {
|
||||
inputIPv6.value = "";
|
||||
} else {
|
||||
inputIPv6.value = item.value.IPv6;
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
if (item.value.IPv6 == null) {
|
||||
inputIPv6.value = "";
|
||||
} else {
|
||||
inputIPv6.value = item.value.IPv6;
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
@ -108,6 +167,9 @@ const validateIPv6address = (ipaddress) => {
|
||||
|
||||
//update data
|
||||
const updateConfigItem = async () => {
|
||||
if (inputIPv4.value.length === 0 && inputIPv6.value.length === 0 && item.value.MAC.length === 0 && item.value.subnetmask.length === 0) {
|
||||
item.value.networkBool = 0;
|
||||
}
|
||||
if (validateIPv4address(inputIPv4.value)) {
|
||||
item.value.IPv4 = inputIPv4.value;
|
||||
try {
|
||||
@ -202,10 +264,101 @@ const updateConfigItem = async () => {
|
||||
}
|
||||
alert("You have entered an invalid IPv6 address, please choose a valid one!");
|
||||
}
|
||||
await getItemById();
|
||||
}
|
||||
|
||||
// add new config item
|
||||
const addItem = async () => {
|
||||
if (newIPv4.value.length === 0 && newIPv6.value.length === 0 && newMAC.value.length === 0 && newSubnetmask.value.length === 0) {
|
||||
newNetworkBool.value = false;
|
||||
}
|
||||
// check if all input data is valid
|
||||
if (newAssetName.value.trim() === "") {
|
||||
alert("Please add a config item name!");
|
||||
return;
|
||||
} else {
|
||||
var counter = 0;
|
||||
// check if config item name already exists
|
||||
configItems.value.forEach(ci => {
|
||||
if (ci.assetName === newAssetName.value) {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter == 1) {
|
||||
alert("This asset name already exists. Please choose an unique asset name or modify respectively delete the old one!");
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (newCustomer.value.length === 0) {
|
||||
alert("Please choose a client!");
|
||||
return;
|
||||
}
|
||||
if (!validateIPv4address(newIPv4.value)) {
|
||||
alert("Please enter a valid IPv4 address or leave this field empty!");
|
||||
return;
|
||||
}
|
||||
if (!validateIPv6address(newIPv6.value)) {
|
||||
alert("Please enter a valid IPv6 address or leave this field empty!");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addConfigItem`,
|
||||
{
|
||||
assetName: newAssetName.value,
|
||||
customerID: newCustomerID.value,
|
||||
customer: newCustomer.value,
|
||||
location: newLocation.value,
|
||||
remoteLocation: newRemoteLocation.value,
|
||||
type: newType.value,
|
||||
description: newDescription.value,
|
||||
notes: newNotes.value,
|
||||
state: newState.value,
|
||||
lastView: newLastView.value,
|
||||
user: newUser.value,
|
||||
hardwareBool: hardwareBool.value,
|
||||
model: newModel.value,
|
||||
serialnumber: newSerialnumber.value,
|
||||
CPU: newCPU.value,
|
||||
RAM: newRAM.value,
|
||||
storageConfiguration: newStorageConfiguration.value,
|
||||
miscellaneous: newMiscellaneous.value,
|
||||
softwareBool: softwareBool.value,
|
||||
software: newSoftware.value,
|
||||
version: newVersion.value,
|
||||
license: newLicense.value,
|
||||
networkBool: newNetworkBool.value,
|
||||
IPv4: newIPv4.value,
|
||||
IPv6: newIPv6.value,
|
||||
MAC: newMAC.value,
|
||||
subnetmask: newSubnetmask.value,
|
||||
});
|
||||
store.commit('resetAssetStore');
|
||||
store.commit('changeToAssetlist');
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
//get all config items
|
||||
const getConfigItems = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllConfigItems`);
|
||||
configItems.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// include delay to avoid 503 error
|
||||
const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
setTimeout(() => {
|
||||
fetchDataFunc();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getItemById();
|
||||
triggerBackendCallsWithDelay(getItemById);
|
||||
triggerBackendCallsWithDelay(getConfigItems);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -222,7 +375,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);
|
||||
@ -306,6 +458,42 @@ export default {
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.saveNewItem-darkmode {
|
||||
background: #2c2c2c;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 1rem 1.875rem;
|
||||
width: 8%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.saveNewItem-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 1rem 1.875rem;
|
||||
width: 8%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.saveNewItem-darkmode:hover {
|
||||
background-color: #444444;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.saveNewItem-lightmode:hover {
|
||||
background-color: #ACACAC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#saveNewItem {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<section :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<section v-if="softwareBoolean && !addAssetBool"
|
||||
:class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications:
|
||||
<div class="asset-data">
|
||||
<table class="data-table" id="asset-table-no-client">
|
||||
@ -43,6 +44,41 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addAssetBool" :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications:
|
||||
<div class="asset-data">
|
||||
<table class="data-table" id="asset-table-no-client">
|
||||
<tbody>
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th
|
||||
:class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
|
||||
Software</th>
|
||||
<th
|
||||
:class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
|
||||
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">
|
||||
<td
|
||||
:class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
|
||||
<input type="text" v-model="newSoftware" @change="updateAsset()"
|
||||
: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="newVersion" @change="updateAsset()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="newLicense" @change="updateAsset()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -55,6 +91,12 @@ 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 newSoftwareBool = ref(true);
|
||||
const newSoftware = ref('');
|
||||
const newVersion = ref('');
|
||||
const newLicense = ref('');
|
||||
|
||||
const darkMode = ref(true)
|
||||
const item = ref({});
|
||||
@ -67,10 +109,6 @@ const getItemById = async () => {
|
||||
`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() === "")) {
|
||||
item.value.softwareBool = 0;
|
||||
softwareBoolean.value = false;
|
||||
};
|
||||
if (item.value.softwareBool == 1) {
|
||||
softwareBoolean.value = true;
|
||||
};
|
||||
@ -79,8 +117,25 @@ const getItemById = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// update software fields in the store
|
||||
const updateAsset = () => {
|
||||
if (newSoftware.value.length == 0 && newLicense.value.length == 0 && newVersion.value.length == 0) {
|
||||
newSoftwareBool.value = false
|
||||
}
|
||||
const asset = {
|
||||
softwareBool: newSoftwareBool.value,
|
||||
software: newSoftware.value,
|
||||
version: newVersion.value,
|
||||
license: newLicense.value,
|
||||
};
|
||||
store.commit('updateSoftwareComponent', asset);
|
||||
}
|
||||
|
||||
//update data
|
||||
const updateConfigItem = async () => {
|
||||
if (item.value.license.length === 0 && item.value.version.length === 0 && item.value.software.length === 0) {
|
||||
item.value.softwareBool = 0;
|
||||
}
|
||||
try {
|
||||
await Axios.put(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateConfigItem`,
|
||||
@ -139,7 +194,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);
|
||||
|
||||
Reference in New Issue
Block a user