diff --git a/app/static/css/style.css b/app/static/css/style.css index 658184c..63a8cbe 100644 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -183,7 +183,7 @@ body { border: 1px inset #D4D0C8; } -.rename-btn { +.edit-btn { background-color: #F0F0F0; border: 1px outset #D4D0C8; padding: 6px 8px; @@ -194,11 +194,11 @@ body { min-width: 32px; } -.rename-btn:hover { +.edit-btn:hover { background-color: #E8E5E2; } -.rename-btn:active { +.edit-btn:active { border: 1px inset #D4D0C8; } @@ -617,7 +617,7 @@ body { min-width: 40px; } - .rename-btn, + .edit-btn, .delete-btn { font-size: 16px; padding: 8px 10px; diff --git a/app/static/js/app.js b/app/static/js/app.js index cf6f409..b1cf3d7 100644 --- a/app/static/js/app.js +++ b/app/static/js/app.js @@ -40,7 +40,23 @@ function displayComputers(computers) { noComputersDiv.style.display = 'none'; - tbody.innerHTML = computers.map(computer => ` + // Sort computers by IP address + const sortedComputers = computers.slice().sort((a, b) => { + const ipA = a.ip || ''; + const ipB = b.ip || ''; + + if (!ipA && !ipB) return 0; + if (!ipA) return 1; + if (!ipB) return -1; + + const parseIP = (ip) => { + return ip.split('.').map(num => parseInt(num, 10).toString().padStart(3, '0')).join('.'); + }; + + return parseIP(ipA).localeCompare(parseIP(ipB)); + }); + + tbody.innerHTML = sortedComputers.map(computer => `