adm_tueit/TueIT_App
2
0
Fork 0
Code Issues 3 Pull Requests 3 Packages Projects Releases Wiki Activity

add config item

Browse Source
This commit is contained in:
selina.mail
2024-02-26 12:31:58 +01:00
parent 13096ce679
commit 49fb1ef397
15 changed files with 940 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
components/server/NetworkSpecifications.vue
View File

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