itsdave/msp
2
0
Fork 0
mirror of https://github.com/itsdave-de/msp.git synced 2025-05-06 15:35:12 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Filter IPs by IT Object status and add loader to improve UI/UX

Browse Source
This commit is contained in:
Jordi Albert 2022-08-19 12:38:46 +02:00
parent 571e644afb
commit eaffaf1191
2 changed files with 75 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
msp/msp/doctype/ip_network/ip_network.js
View File

@ -19,6 +19,8 @@ frappe.ui.form.on('IP Network', {
});
function getUsedIpsInNetwork(frm) {
displayLoader();
frm.call('get_used_ips', {})
.then((response) => {
const container = document.getElementById("usage-overview-table");
@ -32,16 +34,16 @@ function getUsedIpsInNetwork(frm) {
data-doctype-name="${element?.ip_address_name ?? ''}"
data-doctype-type="IP Address"
>
${element?.ip_address ?? "-"}
${(element?.ip_address === '') ? "-" : element?.ip_address}
</td>
<td
style="border: 1px solid #000; padding: 0.5rem 1rem; text-align: left; ${element?.ip_address_name ? 'cursor: pointer;' : ''}"
data-doctype-name="${element?.it_object_name ?? ''}"
data-doctype-type="IT Object"
>
${element?.title ?? "-"}
${(element?.title === '') ? "-" : element?.title}
</td>
<td style="border: 1px solid #000; padding: 0.5rem 1rem; text-align: left;">${element?.type ?? "-"}</td>
<td style="border: 1px solid #000; padding: 0.5rem 1rem; text-align: left;">${(element?.type === '') ? "-" : element?.type}</td>
</tr>
`;
});
@ -75,3 +77,71 @@ function getUsedIpsInNetwork(frm) {
});
})
}
function displayLoader() {
const container = document.getElementById("usage-overview-table");
const loader = `
<div class="line-wobble"></div>
<style>
.line-wobble {
--uib-size: 80px;
--uib-speed: 1.75s;
--uib-color: black;
--uib-line-weight: 5px;
position: relative;
margin: 0 auto;
top: 45%;
display: flex;
align-items: center;
justify-content: center;
height: var(--uib-line-weight);
width: var(--uib-size);
border-radius: calc(var(--uib-line-weight) / 2);
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.line-wobble::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: var(--uib-color);
opacity: 0.1;
}
.line-wobble::after {
content: '';
height: 100%;
width: 100%;
border-radius: calc(var(--uib-line-weight) / 2);
animation: wobble var(--uib-speed) ease-in-out infinite;
transform: translateX(-95%);
background-color: var(--uib-color);
}
@keyframes wobble {
0%,
100% {
transform: translateX(-95%);
}
50% {
transform: translateX(95%);
}
}
</style>
`;
// Set width and height to <div> parent element and to <form> grandparent element so relative width and height with % works greate
container.parentElement.parentElement.style.width = '100%';
container.parentElement.parentElement.style.height = '100%';
container.parentElement.style.width = '100%';
// Set this styles to showcase where the information will appear
container.style.width = '100%';
container.style.height = '100%';
container.innerHTML = loader;
}

3
msp/msp/doctype/ip_network/ip_network.py
View File

@ -10,7 +10,7 @@ from frappe.model.document import Document
class IPNetwork(Document):
@frappe.whitelist()
def get_used_ips(self):
values = {'ip_network': self.name}
values = {'ip_network': self.name, 'status': 'Decommissioned'}
result = []
result = frappe.db.sql("""
SELECT
@ -23,6 +23,7 @@ class IPNetwork(Document):
JOIN `tabIT Object` ito
ON ipa.it_object = ito.name
WHERE ipa.ip_network = %(ip_network)s
AND ito.status != %(status)s
""", values=values, as_dict=1)
for ip_network_reserved_range in self.ip_network_reserved_ranges_table: