romfast/wol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Transform rename button to full edit functionality

Browse Source 
- Replace rename modal with comprehensive edit modal supporting name, MAC, and IP changes
- Add edit_computer() method with full validation (MAC format, duplicates)
- Create new /api/edit endpoint accepting all computer attributes
- Update frontend JavaScript for multi-field editing with client-side validation
- Rename functions from openRenameModal/performRename to openEditModal/performEdit
- Pre-populate edit form with current values and validate MAC address format

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Marius Mutu
2025-09-07 00:10:21 +03:00
parent 86931a091e
commit 072553953e
3 changed files with 139 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
app/static/js/app.js
View File

@@ -1,11 +1,11 @@
// WOL Manager JavaScript
let scanModal, addModal, renameModal;
let scanModal, addModal, editModal;
// Initialize on page load
window.onload = function() {
scanModal = document.getElementById('scanModal');
addModal = document.getElementById('addModal');
renameModal = document.getElementById('renameModal');
editModal = document.getElementById('editModal');
refreshComputers();
};
@@ -46,7 +46,7 @@ function displayComputers(computers) {
<button class="wake-btn" onclick="wakeComputer('${computer.mac}', '${computer.name}', '${computer.ip || ''}')" title="Trezește calculatorul">
⚡
</button>
<button class="rename-btn" onclick="openRenameModal('${computer.name}')" title="Redenumește calculatorul">
<button class="edit-btn" onclick="openEditModal('${computer.name}', '${computer.mac}', '${computer.ip || ''}')" title="Editează calculatorul">
📝
</button>
<button class="delete-btn" onclick="deleteComputer('${computer.name}', '${computer.mac}')" title="Șterge calculatorul">
@@ -510,52 +510,69 @@ function closeScanModal() {
scanModal.style.display = 'none';
}
function openRenameModal(currentName) {
document.getElementById('currentName').value = currentName;
document.getElementById('newName').value = '';
renameModal.style.display = 'block';
document.getElementById('newName').focus();
function openEditModal(currentName, currentMac, currentIp) {
document.getElementById('editName').value = currentName;
document.getElementById('editName').dataset.originalName = currentName;
document.getElementById('editMac').value = currentMac;
document.getElementById('editIp').value = currentIp || '';
editModal.style.display = 'block';
document.getElementById('editName').focus();
}
function closeRenameModal() {
renameModal.style.display = 'none';
document.getElementById('currentName').value = '';
document.getElementById('newName').value = '';
function closeEditModal() {
editModal.style.display = 'none';
document.getElementById('editName').value = '';
document.getElementById('editMac').value = '';
document.getElementById('editIp').value = '';
}
function performRename() {
const oldName = document.getElementById('currentName').value;
const newName = document.getElementById('newName').value.trim();
function performEdit() {
const oldName = document.getElementById('editName').dataset.originalName || document.getElementById('editName').value;
const newName = document.getElementById('editName').value.trim();
const newMac = document.getElementById('editMac').value.trim();
const newIp = document.getElementById('editIp').value.trim();
if (!newName) {
showMessage('Numele nou nu poate fi gol!', 'error');
showMessage('Numele nu poate fi gol!', 'error');
return;
}
if (oldName === newName) {
showMessage('Numele nou trebuie să fie diferit de cel actual!', 'error');
if (!newMac) {
showMessage('Adresa MAC nu poate fi goală!', 'error');
return;
}
fetch('/api/rename', {
// Validare simplă pentru formatul MAC-ului
const macPattern = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/;
if (!macPattern.test(newMac)) {
showMessage('Formatul MAC-ului este invalid! Folosește formatul XX:XX:XX:XX:XX:XX', 'error');
return;
}
fetch('/api/edit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({old_name: oldName, new_name: newName})
body: JSON.stringify({
old_name: oldName,
new_name: newName,
new_mac: newMac,
new_ip: newIp
})
})
.then(response => response.json())
.then(result => {
if (result.success) {
showMessage(result.message, 'success');
closeRenameModal();
closeEditModal();
refreshComputers();
} else {
showMessage(result.message, 'error');
}
})
.catch(error => {
showMessage('Eroare la redenumirea calculatorului: ' + error.message, 'error');
showMessage('Eroare la editarea calculatorului: ' + error.message, 'error');
});
}
@@ -595,14 +612,14 @@ window.onclick = function(event) {
if (event.target == scanModal) {
closeScanModal();
}
if (event.target == renameModal) {
closeRenameModal();
if (event.target == editModal) {
closeEditModal();
}
}
// Allow Enter key to perform rename
// Allow Enter key to perform edit
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter' && renameModal.style.display === 'block') {
performRename();
if (event.key === 'Enter' && editModal.style.display === 'block') {
performEdit();
}
});