// edit Bonding
function editBonding(data) {
let modalContent = '<div class="mt-3 mb-10"><div class="dataTables_processing" role="status"><div><div></div><div></div><div></div><div></div></div></div></div>';
Swal.fire({
title: 'Edit Bonding',
html: modalContent,
showCancelButton: true,
showLoaderOnConfirm: true,
confirmButtonText: 'Save',
cancelButtonText: 'Cancel',
didOpen: () => {
$.ajax({
url: '/api/interfaces_list',
type: 'POST',
dataType: 'json',
success: function(responseData) {
jsonData = responseData;
ethernetInterfaces = Object.keys(jsonData.data.interfaces.ethernet);
modalContent = createEditForm(data, ethernetInterfaces);
Swal.update({ html: modalContent });
},
error: function(error) {
Swal.update({ html: '<div>Error loading data.</div>', icon: 'error' });
console.log('Error fetching data:', error);
}
});
},
// preConfirm: () => {
// function getFormData() {
// const bondMode = document.getElementById("bondMode").value;
// const hashPolicy = document.getElementById("hashPolicy").value;
// const slaveSelects = document.querySelectorAll(".slaveRow select");
// let memberInterface;
// if (slaveSelects.length === 0) {
// memberInterface = [null]; // Jika tidak ada select option, berikan nilai [null]
// } else {
// memberInterface = Array.from(slaveSelects).map(select => select.value);
// }
// return {
// bondMode: bondMode,
// hashPolicy: hashPolicy,
// memberInterface: memberInterface
// };
// }
// const formData = getFormData();
// const isBondModeChanged = formData.bondMode !== data.mode;
// const isHashPolicyChanged = formData.hashPolicy !== data.hashPolicy;
// const originalMemberInterfaces = data.memberInterfaces.split(',').map(s => s.trim());
// let isMembersChanged = !(originalMemberInterfaces.every((val, index) => val === formData.memberInterface[index])
// && originalMemberInterfaces.length === formData.memberInterface.length);
// const isMembersInitiallyEmpty = originalMemberInterfaces.length === 0 || (originalMemberInterfaces.length === 1 && originalMemberInterfaces[0] === "");
// const isFormDataMembersEmpty = formData.memberInterface[0] === null;
// if (isMembersInitiallyEmpty && isFormDataMembersEmpty) {
// isMembersChanged = false;
// }
// if (!isBondModeChanged && !isHashPolicyChanged && !isMembersChanged) {
// Swal.fire('No Changes', 'There are no changes to save.', 'info');
// return false;
// }
// // Mengganti nilai null menjadi "delete all"
// if (formData.memberInterface[0] === null) {
// formData.memberInterface = ["deleteInterface"];
// }
// // Mendefinisikan postData
// let postData = {
// bondName: data.bondName,
// bondMode: isBondModeChanged ? formData.bondMode : "",
// hashPolicy: isHashPolicyChanged ? formData.hashPolicy : "",
// bondMember: isMembersChanged ? formData.memberInterface : []
// };
// console.log(postData);
// return fetch('/api/bonding_edit', {
// method: "POST",
// headers: {
// "Content-Type": "application/json",
// },
// body: JSON.stringify({
// bondName: data.bondName,
// bondMode: isBondModeChanged ? formData.bondMode : "",
// hashPolicy: isHashPolicyChanged ? formData.hashPolicy : "",
// bondMember: isMembersChanged ? formData.memberInterface : []
// })
// })
// .then((response) => {
// if (!response.ok) {
// throw new Error("Network response was not ok");
// }
// return response.json();
// })
// .then((data) => {
// if (!data.success) {
// throw new Error(data.message);
// }
// Swal.fire("Success!", data.message, "success");
// $('#interfaces-bonding').DataTable().ajax.reload();
// console.info(data);
// })
// .catch((error) => {
// Swal.fire("Error!", error.message , "error");
// console.error(error);
// });
// }
preConfirm: () => {
function getFormData() {
const bondMode = document.getElementById("bondMode").value;
const hashPolicy = document.getElementById("hashPolicy").value;
const slaveSelects = document.querySelectorAll(".slaveRow select");
let memberInterface;
if (slaveSelects.length === 0) {
memberInterface = [null]; // Jika tidak ada select option, berikan nilai [null]
} else {
memberInterface = Array.from(slaveSelects).map(select => select.value);
}
return {
bondMode: bondMode,
hashPolicy: hashPolicy,
memberInterface: memberInterface
};
}
const formData = getFormData();
const isBondModeChanged = formData.bondMode !== data.mode;
const isHashPolicyChanged = formData.hashPolicy !== data.hashPolicy;
const originalMemberInterfaces = data.memberInterfaces.split(',').map(s => s.trim());
const formDataInterfaces = formData.memberInterface;
let addedInterfaces = formDataInterfaces.filter(interface => !originalMemberInterfaces.includes(interface));
let removedInterfaces = originalMemberInterfaces.filter(interface => !formDataInterfaces.includes(interface));
const isMembersChanged = addedInterfaces.length > 0 || removedInterfaces.length > 0;
// // Mengganti nilai null menjadi "delete all"
// let formDataInterfacesCopy = [...formDataInterfaces]; // Buat salinan dari array formDataInterfaces
// if (formDataInterfacesCopy[0] === null) {
// formDataInterfacesCopy = ["deleteInterface"];
// }
// Hapus null dari addedInterfaces jika semua antarmuka dihapus
addedInterfaces = addedInterfaces.filter(interface => interface !== null);
// Mendefinisikan postData
let postData = {
bondName: data.bondName,
bondMode: isBondModeChanged ? formData.bondMode : "",
hashPolicy: isHashPolicyChanged ? formData.hashPolicy : "",
bondMember: {
add: addedInterfaces,
delete: removedInterfaces
} // Objek dengan turunan add dan delete
};
console.log(postData);
// Jika tidak ada perubahan, tampilkan pesan dan kembalikan false
if (!isMembersChanged) {
Swal.fire('No Changes', 'There are no changes to save.', 'info');
return false;
}
return fetch('/api/bonding_edit', {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(postData) // Kirim postData ke backend
})
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
if (!data.success) {
throw new Error(data.message);
}
Swal.fire("Success!", data.message, "success");
$('#interfaces-bonding').DataTable().ajax.reload();
console.info(data);
})
.catch((error) => {
Swal.fire("Error!", error.message, "error");
console.error(error);
});
}
})
}
function createEditForm(data, ethernetInterfaces) {
let modalContent = `
<div id="modalFormContainer">
<input type="text" id="bondName" class="mt-3 form-control" placeholder="${data.bondName}" disabled>
`;
modalContent += `
<select id="bondMode" class="mt-3 form-select">
`;
const bondModes = [
'802.3ad', 'active-backup', 'broadcast', 'round-robin', 'transmit-load-balance',
'adaptive-load-balance', 'xor-hash'
];
bondModes.forEach(mode => {
modalContent += `
<option value="${mode}" ${data.mode === mode ? 'selected' : ''}>${mode}</option>
`;
});
modalContent += '</select>';
modalContent += `
<select id="hashPolicy" class="mt-3 form-select">
`;
const hashPolicies = ['layer2', 'layer2+3', 'layer3+4', 'encap2+3', 'encap3+4'];
hashPolicies.forEach(policy => {
modalContent += `
<option value="${policy}" ${data.hashPolicy === policy ? 'selected' : ''}>${policy}</option>
`;
});
modalContent += '</select>';
modalContent += `
<div class="input-group mt-3">
<button class="mt-3 btn btn-sm btn-outline-primary" type="button" onclick="tambahSlave(document.getElementById('modalFormContainer'))">+ Add Member Interface</button>
</div>
`;
const slaveInterfaces = data.memberInterfaces.split(',').map(s => s.trim());
if (slaveInterfaces.length > 0 && slaveInterfaces[0] !== "") {
slaveInterfaces.forEach(item => {
modalContent += '<div class="slaveRow input-group mt-3"><select class="form-select">';
ethernetInterfaces.forEach(interface => {
modalContent += `
<option value="${interface}" ${item === interface ? 'selected' : ''}>${interface}</option>
`;
});
modalContent += `
</select>
<button class="btn btn-outline-danger" onclick="hapusBaris(this)">-</button>
</div>
`;
});
}
modalContent += '</div>';
return modalContent;
}
function tambahSlave(container) {
const newSelect = document.createElement('select');
newSelect.className = 'form-select';
const defaultOption = document.createElement('option');
defaultOption.value = "";
defaultOption.textContent = "-- Choose Interface --";
newSelect.appendChild(defaultOption);
ethernetInterfaces.forEach(interface => {
const option = document.createElement('option');
option.value = interface;
option.textContent = interface;
newSelect.appendChild(option);
});
const removeBtn = document.createElement('button');
removeBtn.className = 'btn btn-outline-danger';
removeBtn.textContent = '-';
removeBtn.onclick = function () {
hapusBaris(removeBtn);
};
const newRow = document.createElement('div');
newRow.className = 'slaveRow input-group mt-3';
newRow.appendChild(newSelect);
newRow.appendChild(removeBtn);
container.appendChild(newRow);
}
function hapusBaris(button) {
const row = button.parentNode;
row.parentNode.removeChild(row);
}
Comments