diff --git a/msp/msp/doctype/ip_network/ip_network.js b/msp/msp/doctype/ip_network/ip_network.js
index cfa8bd8..b72534a 100644
--- a/msp/msp/doctype/ip_network/ip_network.js
+++ b/msp/msp/doctype/ip_network/ip_network.js
@@ -14,5 +14,134 @@ frappe.ui.form.on('IP Network', {
}
})
})
+ getUsedIpsInNetwork(frm);
}
});
+
+function getUsedIpsInNetwork(frm) {
+ displayLoader();
+
+ frm.call('get_used_ips', {})
+ .then((response) => {
+ const container = document.getElementById("usage-overview-table");
+ let tableBody = ``;
+
+ response?.message?.forEach((element) => {
+ tableBody += `
+
+
+ ${(element?.ip_address === '') ? "-" : element?.ip_address}
+ |
+
+ ${(element?.title === '') ? "-" : element?.title}
+ |
+ ${(element?.type === '') ? "-" : element?.type} |
+
+ `;
+ });
+
+ const table = tableBody ? `
+
+
+
+ IP |
+ Name |
+ Type |
+
+
+
+ ${tableBody}
+
+
+ ` : 'No IPs used for this network';
+
+ container.innerHTML = table;
+
+ document.querySelectorAll('[data-doctype-name]').forEach(element => {
+ element.addEventListener('click', (event) => {
+ event.preventDefault();
+ if (event.target.dataset?.doctypeName === '') {
+ return;
+ }
+
+ frappe.set_route('Form', event.target.dataset?.doctypeType, event.target.dataset?.doctypeName);
+ });
+ });
+ })
+}
+function displayLoader() {
+ const container = document.getElementById("usage-overview-table");
+ const loader = `
+
+
+ `;
+
+ // Set width and height to