Major feature enhancement: Windows PowerShell network scanning integration
- Added Windows PowerShell network scanner with auto-detection and interactive mode - Implemented dual scanning system (Windows + Linux fallback) - Added computer management features (rename, delete, duplicate checking) - Enhanced UI with modern responsive design and Romanian localization - Added comprehensive Windows-Linux integration with WSL interop - Improved error handling and user feedback throughout - Added hot reload for development and comprehensive documentation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
349
app/app.py
349
app/app.py
@@ -95,58 +95,256 @@ class WOLManager:
|
||||
if not re.match(mac_pattern, mac):
|
||||
return {'success': False, 'message': 'MAC address invalid!'}
|
||||
|
||||
# Verifică duplicate - încarcă toate calculatoarele existente
|
||||
computers = self.load_computers()
|
||||
|
||||
# Verifică dacă există deja un calculator cu același MAC
|
||||
for computer in computers:
|
||||
if computer['mac'].lower() == mac.lower():
|
||||
return {'success': False, 'message': f'Un calculator cu MAC {mac} există deja: {computer["name"]}'}
|
||||
|
||||
# Verifică dacă există deja un calculator cu același nume
|
||||
for computer in computers:
|
||||
if computer['name'].lower() == name.lower():
|
||||
return {'success': False, 'message': f'Un calculator cu numele "{name}" există deja'}
|
||||
|
||||
# Verifică dacă există deja un calculator cu același IP (dacă IP-ul este furnizat)
|
||||
if ip and ip.strip():
|
||||
for computer in computers:
|
||||
if computer.get('ip') and computer['ip'].lower() == ip.lower():
|
||||
return {'success': False, 'message': f'Un calculator cu IP {ip} există deja: {computer["name"]}'}
|
||||
|
||||
# Adaugă în fișier
|
||||
with open(CONFIG_FILE, 'a') as f:
|
||||
f.write(f"{name}|{mac}|{ip}\n")
|
||||
|
||||
return {'success': True, 'message': f'Calculator {name} adăugat!'}
|
||||
|
||||
def scan_network(self):
|
||||
def rename_computer(self, old_name, new_name):
|
||||
if not new_name.strip():
|
||||
return {'success': False, 'message': 'Numele nou nu poate fi gol!'}
|
||||
|
||||
computers = []
|
||||
found = False
|
||||
|
||||
# Citește toate computerele
|
||||
if os.path.exists(CONFIG_FILE):
|
||||
with open(CONFIG_FILE, 'r') as f:
|
||||
for line in f:
|
||||
line = line.strip()
|
||||
if line and not line.startswith('#'):
|
||||
parts = line.split('|')
|
||||
if len(parts) >= 2:
|
||||
if parts[0] == old_name:
|
||||
# Redenumește computerul găsit
|
||||
computers.append(f"{new_name}|{parts[1]}|{parts[2] if len(parts) > 2 else ''}")
|
||||
found = True
|
||||
else:
|
||||
computers.append(line)
|
||||
else:
|
||||
computers.append(line)
|
||||
|
||||
if not found:
|
||||
return {'success': False, 'message': f'Computerul {old_name} nu a fost găsit!'}
|
||||
|
||||
# Verifică dacă noul nume există deja
|
||||
for computer_line in computers:
|
||||
if not computer_line.startswith('#') and computer_line.strip():
|
||||
parts = computer_line.split('|')
|
||||
if len(parts) >= 2 and parts[0] == new_name and computer_line != f"{new_name}|{parts[1]}|{parts[2] if len(parts) > 2 else ''}":
|
||||
return {'success': False, 'message': f'Numele {new_name} este deja folosit!'}
|
||||
|
||||
# Rescrie fișierul
|
||||
with open(CONFIG_FILE, 'w') as f:
|
||||
for computer_line in computers:
|
||||
f.write(computer_line + '\n')
|
||||
|
||||
return {'success': True, 'message': f'Computerul a fost redenumit din {old_name} în {new_name}!'}
|
||||
|
||||
def delete_computer(self, name=None, mac=None):
|
||||
if not name and not mac:
|
||||
return {'success': False, 'message': 'Trebuie specificat numele sau MAC-ul computerului!'}
|
||||
|
||||
computers = []
|
||||
found = False
|
||||
deleted_name = None
|
||||
|
||||
# Citește toate computerele
|
||||
if os.path.exists(CONFIG_FILE):
|
||||
with open(CONFIG_FILE, 'r') as f:
|
||||
for line in f:
|
||||
line = line.strip()
|
||||
if line and not line.startswith('#'):
|
||||
parts = line.split('|')
|
||||
if len(parts) >= 2:
|
||||
# Verifică dacă este computerul de șters (prin nume sau MAC)
|
||||
if (name and parts[0] == name) or (mac and parts[1].lower() == mac.lower()):
|
||||
found = True
|
||||
deleted_name = parts[0] if parts[0] else f"Calculator cu MAC {parts[1]}"
|
||||
# Nu adaugă linia în lista, efectiv ștergând computerul
|
||||
else:
|
||||
computers.append(line)
|
||||
else:
|
||||
computers.append(line)
|
||||
|
||||
if not found:
|
||||
identifier = name if name else f"MAC {mac}"
|
||||
return {'success': False, 'message': f'Computerul cu {identifier} nu a fost găsit!'}
|
||||
|
||||
# Rescrie fișierul fără computerul șters
|
||||
with open(CONFIG_FILE, 'w') as f:
|
||||
for computer_line in computers:
|
||||
f.write(computer_line + '\n')
|
||||
|
||||
return {'success': True, 'message': f'Computerul {deleted_name} a fost șters!'}
|
||||
|
||||
def scan_network(self, custom_network=None):
|
||||
try:
|
||||
# Detectează rețeaua locală
|
||||
result = subprocess.run(['ip', 'route'], capture_output=True, text=True)
|
||||
# Încearcă să citească rezultatele scanului Windows mai întâi
|
||||
windows_scan_result = self.try_read_windows_scan_results(custom_network)
|
||||
if windows_scan_result:
|
||||
return windows_scan_result
|
||||
|
||||
# Fallback la scanarea Linux tradițională
|
||||
return self.scan_network_linux(custom_network)
|
||||
except Exception as e:
|
||||
return {'success': False, 'message': f'Eroare la scanare: {str(e)}'}
|
||||
|
||||
def try_read_windows_scan_results(self, custom_network=None):
|
||||
"""Încearcă să citească rezultatele din scanul Windows"""
|
||||
try:
|
||||
import json
|
||||
from datetime import datetime, timedelta
|
||||
|
||||
results_file = '/data/network-scan-results.json'
|
||||
|
||||
# Verifică dacă există fișierul cu rezultate
|
||||
if not os.path.exists(results_file):
|
||||
return None
|
||||
|
||||
# Citește rezultatele (cu suport pentru UTF-8 BOM din PowerShell)
|
||||
with open(results_file, 'r', encoding='utf-8-sig') as f:
|
||||
data = json.load(f)
|
||||
|
||||
# Verifică vârsta rezultatelor (nu mai vechi de 30 minute)
|
||||
try:
|
||||
timestamp = datetime.fromisoformat(data.get('timestamp', '').replace('Z', '+00:00'))
|
||||
if datetime.now().replace(tzinfo=timestamp.tzinfo) - timestamp > timedelta(minutes=30):
|
||||
return None # Rezultatele sunt prea vechi
|
||||
except:
|
||||
return None # Timestamp invalid
|
||||
|
||||
# Filtrează rezultatele pe baza rețelei specificate
|
||||
computers = data.get('computers', [])
|
||||
if custom_network and computers:
|
||||
import ipaddress
|
||||
try:
|
||||
net = ipaddress.ip_network(custom_network, strict=False)
|
||||
filtered_computers = []
|
||||
for computer in computers:
|
||||
if ipaddress.ip_address(computer.get('ip', '')) in net:
|
||||
filtered_computers.append(computer)
|
||||
computers = filtered_computers
|
||||
except:
|
||||
pass # Rămân toate computerele dacă validarea eșuează
|
||||
|
||||
# Returnează rezultatul adaptat
|
||||
if not computers and custom_network:
|
||||
return {
|
||||
'success': True,
|
||||
'computers': [],
|
||||
'message': f'Nu s-au găsit dispozitive în rețeaua {custom_network}. Rulează scanul Windows pentru rezultate actualizate.'
|
||||
}
|
||||
|
||||
message = data.get('message', f'Scanare Windows: găsite {len(computers)} dispozitive')
|
||||
if custom_network:
|
||||
message += f' în rețeaua {custom_network}'
|
||||
|
||||
return {
|
||||
'success': True,
|
||||
'computers': computers,
|
||||
'message': message
|
||||
}
|
||||
|
||||
except Exception as e:
|
||||
# Nu afișa eroarea, încearcă scanarea Linux
|
||||
return None
|
||||
|
||||
def scan_network_linux(self, custom_network=None):
|
||||
"""Scanarea tradițională Linux pentru compatibilitate"""
|
||||
if custom_network:
|
||||
# Validează formatul rețelei CIDR
|
||||
import ipaddress
|
||||
try:
|
||||
ipaddress.ip_network(custom_network, strict=False)
|
||||
network = custom_network
|
||||
except ValueError:
|
||||
return {'success': False, 'message': f'Format rețea invalid: {custom_network}. Folosește format CIDR (ex: 192.168.1.0/24)'}
|
||||
else:
|
||||
# Detectează rețeaua locală folosind route (net-tools)
|
||||
result = subprocess.run(['route', '-n'], capture_output=True, text=True)
|
||||
network = '192.168.1.0/24' # default
|
||||
|
||||
for line in result.stdout.split('\n'):
|
||||
if 'default' in line:
|
||||
if '0.0.0.0' in line and 'UG' in line: # default gateway
|
||||
parts = line.split()
|
||||
if len(parts) >= 3:
|
||||
gateway = parts[2]
|
||||
if len(parts) >= 2:
|
||||
gateway = parts[1]
|
||||
# Construiește rețeaua bazată pe gateway
|
||||
network_parts = gateway.split('.')
|
||||
network = f"{network_parts[0]}.{network_parts[1]}.{network_parts[2]}.0/24"
|
||||
break
|
||||
|
||||
# Scanează rețeaua
|
||||
subprocess.run(['nmap', '-sn', network], capture_output=True, timeout=30)
|
||||
|
||||
# Citește ARP table
|
||||
result = subprocess.run(['arp', '-a'], capture_output=True, text=True)
|
||||
|
||||
scanned = []
|
||||
for line in result.stdout.split('\n'):
|
||||
# Regex pentru parsarea ARP
|
||||
match = re.search(r'\((\d+\.\d+\.\d+\.\d+)\).*([0-9a-fA-F]{2}:[0-9a-fA-F]{2}:[0-9a-fA-F]{2}:[0-9a-fA-F]{2}:[0-9a-fA-F]{2}:[0-9a-fA-F]{2})', line)
|
||||
if match:
|
||||
ip = match.group(1)
|
||||
mac = match.group(2)
|
||||
hostname = line.split()[0] if line.split() else 'unknown'
|
||||
|
||||
|
||||
# Încearcă să obțină MAC addresses din tabela ARP pentru dispozitive cunoscute
|
||||
arp_result = subprocess.run(['arp', '-a'], capture_output=True, text=True)
|
||||
scanned = []
|
||||
|
||||
for line in arp_result.stdout.split('\n'):
|
||||
# Regex pentru parsarea ARP
|
||||
match = re.search(r'\((\d+\.\d+\.\d+\.\d+)\).*([0-9a-fA-F]{2}:[0-9a-fA-F]{2}:[0-9a-fA-F]{2}:[0-9a-fA-F]{2}:[0-9a-fA-F]{2}:[0-9a-fA-F]{2})', line)
|
||||
if match:
|
||||
ip = match.group(1)
|
||||
mac = match.group(2)
|
||||
hostname = line.split()[0] if line.split() else '?'
|
||||
|
||||
# Verifică dacă IP-ul este în rețeaua specificată
|
||||
if custom_network:
|
||||
import ipaddress
|
||||
try:
|
||||
net = ipaddress.ip_network(custom_network, strict=False)
|
||||
if ipaddress.ip_address(ip) in net:
|
||||
scanned.append({
|
||||
'ip': ip,
|
||||
'mac': mac,
|
||||
'hostname': hostname,
|
||||
'status': self.ping_computer(ip)
|
||||
})
|
||||
except:
|
||||
pass
|
||||
else:
|
||||
# Autodetectare - adaugă toate intrările ARP
|
||||
scanned.append({
|
||||
'ip': ip,
|
||||
'mac': mac,
|
||||
'hostname': hostname,
|
||||
'status': self.ping_computer(ip)
|
||||
})
|
||||
|
||||
return {'success': True, 'computers': scanned}
|
||||
except Exception as e:
|
||||
return {'success': False, 'message': f'Eroare la scanare: {str(e)}'}
|
||||
|
||||
# Dacă nu s-au găsit dispozitive și este o rețea specificată custom, returnează mesaj informativ
|
||||
if custom_network and not scanned:
|
||||
return {
|
||||
'success': True,
|
||||
'computers': [],
|
||||
'message': f'Nu s-au găsit dispozitive cu MAC addresses în rețeaua {custom_network}. În Docker Desktop Windows, scanarea automată este limitată. Rulează scanul Windows sau folosește butonul "➕ Adaugă Calculator" pentru a adăuga manual dispozitivele cu IP și MAC cunoscute.'
|
||||
}
|
||||
|
||||
return {'success': True, 'computers': scanned}
|
||||
|
||||
wol_manager = WOLManager()
|
||||
|
||||
@app.route('/')
|
||||
def index():
|
||||
# Hot reload is working!
|
||||
return render_template('index.html')
|
||||
|
||||
@app.route('/api/computers')
|
||||
@@ -191,10 +389,101 @@ def add_computer():
|
||||
)
|
||||
return jsonify(result)
|
||||
|
||||
@app.route('/api/scan')
|
||||
def scan_network():
|
||||
result = wol_manager.scan_network()
|
||||
@app.route('/api/rename', methods=['POST'])
|
||||
def rename_computer():
|
||||
data = request.get_json()
|
||||
result = wol_manager.rename_computer(
|
||||
data.get('old_name'),
|
||||
data.get('new_name')
|
||||
)
|
||||
return jsonify(result)
|
||||
|
||||
@app.route('/api/delete', methods=['POST'])
|
||||
def delete_computer():
|
||||
data = request.get_json()
|
||||
result = wol_manager.delete_computer(
|
||||
name=data.get('name'),
|
||||
mac=data.get('mac')
|
||||
)
|
||||
return jsonify(result)
|
||||
|
||||
@app.route('/api/scan', methods=['GET', 'POST'])
|
||||
def scan_network():
|
||||
network = None
|
||||
if request.method == 'POST':
|
||||
data = request.get_json()
|
||||
network = data.get('network') if data else None
|
||||
elif request.method == 'GET':
|
||||
network = request.args.get('network')
|
||||
|
||||
result = wol_manager.scan_network(network)
|
||||
return jsonify(result)
|
||||
|
||||
@app.route('/api/scan/windows', methods=['POST'])
|
||||
def trigger_windows_scan():
|
||||
"""Declanșează un scan Windows prin apelarea script-ului PowerShell"""
|
||||
try:
|
||||
data = request.get_json()
|
||||
network = data.get('network') if data else None
|
||||
|
||||
# Încearcă să execute PowerShell prin WSL interop
|
||||
script_path = '/scripts/windows-network-scan.ps1'
|
||||
output_path = '/data/network-scan-results.json'
|
||||
|
||||
# Construiește comanda PowerShell prin WSL interop
|
||||
cmd = ['/mnt/c/Windows/System32/WindowsPowerShell/v1.0/powershell.exe',
|
||||
'-ExecutionPolicy', 'Bypass',
|
||||
'-File', script_path,
|
||||
'-OutputPath', output_path,
|
||||
'-Verbose']
|
||||
|
||||
if network:
|
||||
cmd.extend(['-Network', network])
|
||||
|
||||
# Încearcă să execute script-ul prin WSL interop
|
||||
try:
|
||||
result = subprocess.run(cmd, capture_output=True, text=True, timeout=120)
|
||||
|
||||
if result.returncode == 0:
|
||||
# Scanul a fost executat cu succes, citește rezultatele
|
||||
scan_result = wol_manager.scan_network(network)
|
||||
scan_result['message'] = 'Scan Windows executat automat cu succes!'
|
||||
return jsonify(scan_result)
|
||||
else:
|
||||
# Dacă execuția automată eșuează, oferă instrucțiuni manuale
|
||||
return jsonify({
|
||||
'success': False,
|
||||
'message': f'Execuția automată a eșuat: {result.stderr[:200]}...',
|
||||
'auto_execution_failed': True,
|
||||
'instructions': 'Rulează manual din Windows unul dintre comenzile:',
|
||||
'commands': [
|
||||
f'scripts\\scan-network.bat{" -network " + network if network else ""}',
|
||||
f'scripts\\run-scan.ps1{" -Network " + network if network else ""}',
|
||||
f'powershell.exe -ExecutionPolicy Bypass -File scripts\\windows-network-scan.ps1 -OutputPath data\\network-scan-results.json{" -Network " + network if network else ""}'
|
||||
]
|
||||
})
|
||||
|
||||
except (subprocess.TimeoutExpired, FileNotFoundError, PermissionError) as e:
|
||||
# Execuția automată nu este posibilă, oferă instrucțiuni manuale
|
||||
return jsonify({
|
||||
'success': False,
|
||||
'message': f'Execuția automată nu este disponibilă: {str(e)[:100]}',
|
||||
'auto_execution_failed': True,
|
||||
'instructions': 'Rulează manual din Windows unul dintre comenzile:',
|
||||
'commands': [
|
||||
f'scripts\\scan-network.bat{" -network " + network if network else ""}',
|
||||
f'scripts\\run-scan.ps1{" -Network " + network if network else ""}',
|
||||
f'powershell.exe -ExecutionPolicy Bypass -File scripts\\windows-network-scan.ps1 -OutputPath data\\network-scan-results.json{" -Network " + network if network else ""}'
|
||||
]
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
return jsonify({
|
||||
'success': False,
|
||||
'message': f'Eroare: {str(e)}',
|
||||
'instructions': 'Rulează manual: scripts\\scan-network.bat'
|
||||
})
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(host='0.0.0.0', port=5000, debug=False)
|
||||
# Enable debug mode for development with hot reload
|
||||
app.run(host='0.0.0.0', port=5000, debug=True, use_reloader=True)
|
||||
651
app/static/css/style.css
Normal file
651
app/static/css/style.css
Normal file
@@ -0,0 +1,651 @@
|
||||
/* Classic Windows-style CSS */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
background-color: #F5F5F5;
|
||||
color: #000000;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #808080;
|
||||
margin: 10px;
|
||||
height: calc(100vh - 20px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
background: linear-gradient(to bottom, #0A246A 0%, #A6CAF0 100%);
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-bottom: 1px solid #808080;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.title-bar h1 {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
/* Live reload test comment */
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
background-color: #F0F0F0;
|
||||
border-bottom: 1px solid #808080;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.toolbar button {
|
||||
background-color: #F0F0F0;
|
||||
border: 1px outset #D4D0C8;
|
||||
padding: 6px 12px;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.toolbar button:hover {
|
||||
background-color: #E8E5E2;
|
||||
}
|
||||
|
||||
.toolbar button:active {
|
||||
border: 1px inset #D4D0C8;
|
||||
}
|
||||
|
||||
.network-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.network-selector label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.network-selector select,
|
||||
.network-selector input {
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
border: 1px inset #D4D0C8;
|
||||
padding: 4px;
|
||||
background-color: white;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 4px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.computers-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #808080;
|
||||
background-color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.computers-table th {
|
||||
background-color: #F0F0F0;
|
||||
border: 1px solid #808080;
|
||||
padding: 8px 12px;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.computers-table td {
|
||||
border: 1px solid #D4D0C8;
|
||||
padding: 8px 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.computers-table td:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.computers-table tr:nth-child(even) {
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
|
||||
.computers-table tr:hover {
|
||||
background-color: #E0E0E0;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 14px;
|
||||
padding: 2px 6px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status.online {
|
||||
color: #008000;
|
||||
}
|
||||
|
||||
.status.offline {
|
||||
color: #800000;
|
||||
}
|
||||
|
||||
.status.unknown {
|
||||
color: #808000;
|
||||
}
|
||||
|
||||
.wake-btn {
|
||||
background-color: #F0F0F0;
|
||||
border: 1px outset #D4D0C8;
|
||||
padding: 6px 8px;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
min-height: 32px;
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
.wake-btn:hover {
|
||||
background-color: #E8E5E2;
|
||||
}
|
||||
|
||||
.wake-btn:active {
|
||||
border: 1px inset #D4D0C8;
|
||||
}
|
||||
|
||||
.rename-btn {
|
||||
background-color: #F0F0F0;
|
||||
border: 1px outset #D4D0C8;
|
||||
padding: 6px 8px;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
min-height: 32px;
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
.rename-btn:hover {
|
||||
background-color: #E8E5E2;
|
||||
}
|
||||
|
||||
.rename-btn:active {
|
||||
border: 1px inset #D4D0C8;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
background-color: #F0F0F0;
|
||||
border: 1px outset #D4D0C8;
|
||||
padding: 6px 8px;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
min-height: 32px;
|
||||
min-width: 32px;
|
||||
color: #800000;
|
||||
}
|
||||
|
||||
.delete-btn:hover {
|
||||
background-color: #F2DEDE;
|
||||
color: #A94442;
|
||||
}
|
||||
|
||||
.delete-btn:active {
|
||||
border: 1px inset #D4D0C8;
|
||||
}
|
||||
|
||||
.no-computers {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #F0F0F0;
|
||||
border: 2px outset #D4D0C8;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 450px;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: linear-gradient(to bottom, #0A246A 0%, #A6CAF0 100%);
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
border: 1px inset #D4D0C8;
|
||||
padding: 6px;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
background-color: white;
|
||||
min-height: 28px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
background-color: #F0F0F0;
|
||||
border-top: 1px solid #808080;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-actions button {
|
||||
background-color: #F0F0F0;
|
||||
border: 1px outset #D4D0C8;
|
||||
padding: 6px 20px;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
min-height: 32px;
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
.form-actions button:hover {
|
||||
background-color: #E8E5E2;
|
||||
}
|
||||
|
||||
.form-actions button:active {
|
||||
border: 1px inset #D4D0C8;
|
||||
}
|
||||
|
||||
/* Message styles */
|
||||
.message {
|
||||
padding: 8px 12px;
|
||||
margin: 6px;
|
||||
border: 1px solid;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.message.success {
|
||||
background-color: #DFF0D8;
|
||||
border-color: #D6E9C6;
|
||||
color: #3C763D;
|
||||
}
|
||||
|
||||
.message.error {
|
||||
background-color: #F2DEDE;
|
||||
border-color: #EBCCD1;
|
||||
color: #A94442;
|
||||
}
|
||||
|
||||
.message.warning {
|
||||
background-color: #FCF8E3;
|
||||
border-color: #FAEBCC;
|
||||
color: #8A6D3B;
|
||||
}
|
||||
|
||||
/* Scan table */
|
||||
.scan-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #808080;
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.scan-table th {
|
||||
background-color: #F0F0F0;
|
||||
border: 1px solid #808080;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.scan-table td {
|
||||
border: 1px solid #D4D0C8;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.scan-table tr:nth-child(even) {
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
|
||||
.scan-table tr:hover {
|
||||
background-color: #E0E0E0;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
background-color: #F0F0F0;
|
||||
border: 1px outset #D4D0C8;
|
||||
padding: 4px 8px;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
min-height: 28px;
|
||||
min-width: 28px;
|
||||
}
|
||||
|
||||
.add-btn:hover {
|
||||
background-color: #E8E5E2;
|
||||
}
|
||||
|
||||
.add-btn:active {
|
||||
border: 1px inset #D4D0C8;
|
||||
}
|
||||
|
||||
/* Loading animation */
|
||||
.loading {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid #f3f3f3;
|
||||
border-top: 2px solid #3498db;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
#scan-loading {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#scan-loading p {
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Scan controls */
|
||||
.scan-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 4px;
|
||||
border: 1px solid #D4D0C8;
|
||||
background-color: #F9F9F9;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.select-all-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select-all-container input[type="checkbox"] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.add-selected-btn {
|
||||
background-color: #F0F0F0;
|
||||
border: 1px outset #D4D0C8;
|
||||
padding: 6px 16px;
|
||||
font-family: Tahoma, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.add-selected-btn:enabled:hover {
|
||||
background-color: #E8E5E2;
|
||||
}
|
||||
|
||||
.add-selected-btn:active {
|
||||
border: 1px inset #D4D0C8;
|
||||
}
|
||||
|
||||
.add-selected-btn:disabled {
|
||||
background-color: #E8E8E8;
|
||||
color: #808080;
|
||||
cursor: not-allowed;
|
||||
border: 1px solid #D4D0C8;
|
||||
}
|
||||
|
||||
.device-checkbox {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Wider scan modal for the additional column */
|
||||
#scanModal .modal-content {
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 5px;
|
||||
height: calc(100vh - 10px);
|
||||
}
|
||||
|
||||
.title-bar h1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
padding: 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar button {
|
||||
font-size: 16px;
|
||||
padding: 8px 12px;
|
||||
min-height: 40px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.network-selector {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 4px;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.network-selector label {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.network-selector select,
|
||||
.network-selector input {
|
||||
font-size: 16px;
|
||||
padding: 8px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.computers-table {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.computers-table th {
|
||||
font-size: 16px;
|
||||
padding: 10px 8px;
|
||||
}
|
||||
|
||||
.computers-table td {
|
||||
padding: 10px 8px;
|
||||
}
|
||||
|
||||
.computers-table td:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 6px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 16px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.wake-btn {
|
||||
font-size: 20px;
|
||||
padding: 8px 10px;
|
||||
min-height: 40px;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.rename-btn,
|
||||
.delete-btn {
|
||||
font-size: 16px;
|
||||
padding: 8px 10px;
|
||||
min-height: 40px;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: calc(100vw - 20px);
|
||||
max-width: 500px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 16px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
font-size: 16px;
|
||||
padding: 10px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.form-actions button {
|
||||
font-size: 16px;
|
||||
padding: 10px 20px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.message {
|
||||
font-size: 16px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.scan-table {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.scan-table th,
|
||||
.scan-table td {
|
||||
padding: 10px 6px;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
font-size: 16px;
|
||||
padding: 6px 10px;
|
||||
min-height: 36px;
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
.select-all-container {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.add-selected-btn {
|
||||
font-size: 16px;
|
||||
padding: 8px 16px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
#scanModal .modal-content {
|
||||
width: calc(100vw - 20px);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.no-computers {
|
||||
font-size: 16px;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
/* Make table horizontally scrollable on small screens */
|
||||
.main-content {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.computers-table {
|
||||
min-width: 600px;
|
||||
}
|
||||
}
|
||||
608
app/static/js/app.js
Normal file
608
app/static/js/app.js
Normal file
@@ -0,0 +1,608 @@
|
||||
// WOL Manager JavaScript
|
||||
let scanModal, addModal, renameModal;
|
||||
|
||||
// Initialize on page load
|
||||
window.onload = function() {
|
||||
scanModal = document.getElementById('scanModal');
|
||||
addModal = document.getElementById('addModal');
|
||||
renameModal = document.getElementById('renameModal');
|
||||
refreshComputers();
|
||||
};
|
||||
|
||||
function showMessage(message, type) {
|
||||
const messageArea = document.getElementById('message-area');
|
||||
messageArea.innerHTML = `<div class="message ${type}">${message}</div>`;
|
||||
setTimeout(() => {
|
||||
messageArea.innerHTML = '';
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
function refreshComputers() {
|
||||
fetch('/api/computers')
|
||||
.then(response => response.json())
|
||||
.then(computers => {
|
||||
displayComputers(computers);
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Eroare la încărcarea calculatoarelor: ' + error.message, 'error');
|
||||
});
|
||||
}
|
||||
|
||||
function displayComputers(computers) {
|
||||
const tbody = document.getElementById('computers-tbody');
|
||||
const noComputersDiv = document.getElementById('no-computers');
|
||||
|
||||
if (computers.length === 0) {
|
||||
tbody.innerHTML = '';
|
||||
noComputersDiv.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
noComputersDiv.style.display = 'none';
|
||||
|
||||
tbody.innerHTML = computers.map(computer => `
|
||||
<tr>
|
||||
<td>
|
||||
<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>
|
||||
<button class="delete-btn" onclick="deleteComputer('${computer.name}', '${computer.mac}')" title="Șterge calculatorul">
|
||||
🗑️
|
||||
</button>
|
||||
</td>
|
||||
<td>${computer.name}</td>
|
||||
<td style="font-family: monospace;">${computer.mac}</td>
|
||||
<td>${computer.ip || '-'}</td>
|
||||
<td><span class="status ${computer.status}">${computer.status}</span></td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function wakeComputer(mac, name, ip) {
|
||||
showMessage(`Se trimite magic packet pentru ${name}...`, 'success');
|
||||
|
||||
fetch('/api/wake', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({mac: mac, name: name, ip: ip})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.success) {
|
||||
showMessage(result.message, 'success');
|
||||
setTimeout(refreshComputers, 2000);
|
||||
} else {
|
||||
showMessage(result.message, 'error');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Eroare la trezirea calculatorului: ' + error.message, 'error');
|
||||
});
|
||||
}
|
||||
|
||||
function wakeAllComputers() {
|
||||
showMessage('Se trezesc toate calculatoarele...', 'success');
|
||||
|
||||
fetch('/api/wake-all', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
let message = 'Comenzi trimise:<br>';
|
||||
data.results.forEach(result => {
|
||||
message += `• ${result.name}: ${result.result.message}<br>`;
|
||||
});
|
||||
showMessage(message, 'success');
|
||||
setTimeout(refreshComputers, 3000);
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Eroare la trezirea calculatoarelor: ' + error.message, 'error');
|
||||
});
|
||||
}
|
||||
|
||||
function openAddModal() {
|
||||
addModal.style.display = 'block';
|
||||
}
|
||||
|
||||
function closeAddModal() {
|
||||
addModal.style.display = 'none';
|
||||
document.getElementById('computerName').value = '';
|
||||
document.getElementById('computerMac').value = '';
|
||||
document.getElementById('computerIp').value = '';
|
||||
}
|
||||
|
||||
function addComputer() {
|
||||
const name = document.getElementById('computerName').value;
|
||||
const mac = document.getElementById('computerMac').value;
|
||||
const ip = document.getElementById('computerIp').value;
|
||||
|
||||
if (!name || !mac) {
|
||||
showMessage('Numele și MAC-ul sunt obligatorii!', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
fetch('/api/add', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({name: name, mac: mac, ip: ip})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.success) {
|
||||
showMessage(result.message, 'success');
|
||||
closeAddModal();
|
||||
refreshComputers();
|
||||
} else {
|
||||
showMessage(result.message, 'error');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Eroare la adăugarea calculatorului: ' + error.message, 'error');
|
||||
});
|
||||
}
|
||||
|
||||
function toggleCustomNetwork() {
|
||||
const select = document.getElementById('networkSelect');
|
||||
const customInput = document.getElementById('customNetwork');
|
||||
|
||||
if (select.value === 'custom') {
|
||||
customInput.style.display = 'inline';
|
||||
customInput.focus();
|
||||
} else {
|
||||
customInput.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function getSelectedNetwork() {
|
||||
const select = document.getElementById('networkSelect');
|
||||
const customInput = document.getElementById('customNetwork');
|
||||
|
||||
if (select.value === 'custom') {
|
||||
return customInput.value.trim();
|
||||
} else {
|
||||
return select.value;
|
||||
}
|
||||
}
|
||||
|
||||
function scanNetwork() {
|
||||
scanModal.style.display = 'block';
|
||||
document.getElementById('scan-loading').style.display = 'block';
|
||||
document.getElementById('scan-results').innerHTML = '';
|
||||
|
||||
const network = getSelectedNetwork();
|
||||
const requestData = network ? { network: network } : {};
|
||||
|
||||
fetch('/api/scan', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(requestData)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
document.getElementById('scan-loading').style.display = 'none';
|
||||
|
||||
if (result.success) {
|
||||
if (result.computers && result.computers.length > 0) {
|
||||
displayScanResults(result.computers);
|
||||
if (result.message) {
|
||||
// Afișează mesajul deasupra tabelului
|
||||
document.getElementById('scan-results').innerHTML =
|
||||
`<div class="message" style="background: #fef3c7; color: #92400e; border-color: #fbbf24;">${result.message}</div>` +
|
||||
document.getElementById('scan-results').innerHTML;
|
||||
}
|
||||
} else if (result.message) {
|
||||
document.getElementById('scan-results').innerHTML =
|
||||
`<div class="message" style="background: #fef3c7; color: #92400e; border-color: #fbbf24;">${result.message}</div>`;
|
||||
}
|
||||
} else {
|
||||
document.getElementById('scan-results').innerHTML =
|
||||
`<div class="message error">${result.message}</div>`;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
document.getElementById('scan-loading').style.display = 'none';
|
||||
document.getElementById('scan-results').innerHTML =
|
||||
`<div class="message error">Eroare la scanare: ${error.message}</div>`;
|
||||
});
|
||||
}
|
||||
|
||||
function triggerWindowsScan() {
|
||||
scanModal.style.display = 'block';
|
||||
document.getElementById('scan-loading').style.display = 'block';
|
||||
document.getElementById('scan-results').innerHTML = '';
|
||||
|
||||
const network = getSelectedNetwork();
|
||||
const requestData = network ? { network: network } : {};
|
||||
|
||||
showMessage('Declanșând scanul Windows...', 'success');
|
||||
|
||||
fetch('/api/scan/windows', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(requestData)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('scan-loading').style.display = 'none';
|
||||
|
||||
if (data.success && data.computers) {
|
||||
showMessage(data.message || 'Scan Windows completat cu succes!', 'success');
|
||||
displayScanResults(data.computers);
|
||||
} else {
|
||||
let message = data.message || 'Scanul Windows a eșuat';
|
||||
|
||||
if (data.instructions) {
|
||||
message += '<br><br><strong>Instrucțiuni:</strong><br>' + data.instructions;
|
||||
|
||||
if (data.commands) {
|
||||
message += '<br><strong>Comenzi disponibile:</strong>';
|
||||
data.commands.forEach(cmd => {
|
||||
message += `<br>• <code>${cmd}</code>`;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
showMessage(message, 'error');
|
||||
document.getElementById('scan-results').innerHTML =
|
||||
'<div style="padding: 20px; text-align: center; color: #666;">' +
|
||||
'<h3>Scanul Windows nu poate fi executat din container</h3>' +
|
||||
'<p>Pentru a scana rețeaua Windows și obține MAC addresses:</p>' +
|
||||
'<ol style="text-align: left; margin: 20px 0;">' +
|
||||
'<li>Deschide Command Prompt sau PowerShell ca Administrator pe Windows</li>' +
|
||||
'<li>Navighează la directorul proiectului WOL Manager</li>' +
|
||||
'<li>Rulează una din comenzile de mai jos:</li>' +
|
||||
'</ol>' +
|
||||
'<div style="background: #f5f5f5; padding: 15px; border-radius: 5px; margin: 10px 0; font-family: monospace;">' +
|
||||
(data.commands ? data.commands.map(cmd => `<div style="margin: 5px 0;">${cmd}</div>`).join('') :
|
||||
'scripts\\scan-network.bat') +
|
||||
'</div>' +
|
||||
'<p><small>După rularea comenzii, apasă "Scanează Rețeaua" pentru a vedea rezultatele.</small></p>' +
|
||||
'</div>';
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
document.getElementById('scan-loading').style.display = 'none';
|
||||
showMessage('Eroare la declanșarea scanului Windows: ' + error.message, 'error');
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function displayScanResults(computers) {
|
||||
if (computers.length === 0) {
|
||||
document.getElementById('scan-results').innerHTML =
|
||||
'<div class="message error">Nu s-au găsit calculatoare în rețea</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = `
|
||||
<div class="scan-controls">
|
||||
<label class="select-all-container">
|
||||
<input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
|
||||
<span>Selectează toate</span>
|
||||
</label>
|
||||
<button class="add-selected-btn" onclick="addSelectedFromScan()" disabled title="Adaugă calculatoarele selectate">
|
||||
➕ Adaugă Selectate
|
||||
</button>
|
||||
</div>
|
||||
<table class="scan-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Selectează</th>
|
||||
<th>IP</th>
|
||||
<th>MAC</th>
|
||||
<th>Hostname</th>
|
||||
<th>Status</th>
|
||||
<th>Acțiune</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
computers.forEach((computer, index) => {
|
||||
html += `
|
||||
<tr>
|
||||
<td>
|
||||
<input type="checkbox" class="device-checkbox"
|
||||
data-hostname="${computer.hostname}"
|
||||
data-mac="${computer.mac}"
|
||||
data-ip="${computer.ip}"
|
||||
onchange="updateAddButton()">
|
||||
</td>
|
||||
<td>${computer.ip}</td>
|
||||
<td style="font-family: monospace;">${computer.mac}</td>
|
||||
<td>${computer.hostname}</td>
|
||||
<td><span class="status ${computer.status}">${computer.status}</span></td>
|
||||
<td>
|
||||
<button class="add-btn" onclick="addFromScan('${computer.hostname}', '${computer.mac}', '${computer.ip}')" title="Adaugă calculatorul">
|
||||
➕
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
|
||||
html += '</tbody></table>';
|
||||
document.getElementById('scan-results').innerHTML = html;
|
||||
}
|
||||
|
||||
function toggleSelectAll() {
|
||||
const selectAllCheckbox = document.getElementById('selectAll');
|
||||
const deviceCheckboxes = document.querySelectorAll('.device-checkbox');
|
||||
|
||||
deviceCheckboxes.forEach(checkbox => {
|
||||
checkbox.checked = selectAllCheckbox.checked;
|
||||
});
|
||||
|
||||
updateAddButton();
|
||||
}
|
||||
|
||||
function updateAddButton() {
|
||||
const deviceCheckboxes = document.querySelectorAll('.device-checkbox');
|
||||
const checkedBoxes = document.querySelectorAll('.device-checkbox:checked');
|
||||
const addButton = document.querySelector('.add-selected-btn');
|
||||
const selectAllCheckbox = document.getElementById('selectAll');
|
||||
|
||||
// Enable/disable the "Add Selected" button
|
||||
if (addButton) {
|
||||
addButton.disabled = checkedBoxes.length === 0;
|
||||
addButton.textContent = checkedBoxes.length > 0 ?
|
||||
`➕ Adaugă Selectate (${checkedBoxes.length})` : '➕ Adaugă Selectate';
|
||||
}
|
||||
|
||||
// Update "Select All" checkbox state
|
||||
if (selectAllCheckbox) {
|
||||
if (checkedBoxes.length === 0) {
|
||||
selectAllCheckbox.indeterminate = false;
|
||||
selectAllCheckbox.checked = false;
|
||||
} else if (checkedBoxes.length === deviceCheckboxes.length) {
|
||||
selectAllCheckbox.indeterminate = false;
|
||||
selectAllCheckbox.checked = true;
|
||||
} else {
|
||||
selectAllCheckbox.indeterminate = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addSelectedFromScan() {
|
||||
const checkedBoxes = document.querySelectorAll('.device-checkbox:checked');
|
||||
|
||||
if (checkedBoxes.length === 0) {
|
||||
showMessage('Nu ai selectat niciun dispozitiv!', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const devices = Array.from(checkedBoxes).map(checkbox => ({
|
||||
name: checkbox.dataset.hostname,
|
||||
mac: checkbox.dataset.mac,
|
||||
ip: checkbox.dataset.ip
|
||||
}));
|
||||
|
||||
// Show progress message
|
||||
showMessage(`Se adaugă ${devices.length} dispozitive...`, 'success');
|
||||
|
||||
// Add devices one by one
|
||||
let addedCount = 0;
|
||||
let failedCount = 0;
|
||||
let duplicateCount = 0;
|
||||
let failedDevices = [];
|
||||
let duplicateDevices = [];
|
||||
|
||||
const addDevice = (device, index) => {
|
||||
return fetch('/api/add', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(device)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.success) {
|
||||
addedCount++;
|
||||
} else {
|
||||
// Verifică dacă este o eroare de duplicat
|
||||
if (result.message.includes('există deja')) {
|
||||
duplicateCount++;
|
||||
duplicateDevices.push(`${device.name} (${result.message})`);
|
||||
} else {
|
||||
failedCount++;
|
||||
failedDevices.push(`${device.name}: ${result.message}`);
|
||||
}
|
||||
console.warn(`Failed to add ${device.name}:`, result.message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
failedCount++;
|
||||
failedDevices.push(`${device.name}: ${error.message}`);
|
||||
console.error(`Error adding ${device.name}:`, error);
|
||||
});
|
||||
};
|
||||
|
||||
// Add all devices in parallel
|
||||
Promise.all(devices.map(addDevice))
|
||||
.then(() => {
|
||||
let message = '';
|
||||
let messageType = 'success';
|
||||
|
||||
if (addedCount > 0 && failedCount === 0 && duplicateCount === 0) {
|
||||
message = `${addedCount} dispozitive adăugate cu succes!`;
|
||||
} else if (addedCount > 0) {
|
||||
message = `${addedCount} dispozitive adăugate cu succes`;
|
||||
if (duplicateCount > 0) {
|
||||
message += `, ${duplicateCount} duplicate ignorate`;
|
||||
}
|
||||
if (failedCount > 0) {
|
||||
message += `, ${failedCount} eșuate`;
|
||||
}
|
||||
message += '.';
|
||||
|
||||
if (duplicateCount > 0 || failedCount > 0) {
|
||||
messageType = 'warning';
|
||||
}
|
||||
} else {
|
||||
if (duplicateCount > 0 && failedCount === 0) {
|
||||
message = `Toate ${duplicateCount} dispozitivele selectate există deja în sistem.`;
|
||||
messageType = 'warning';
|
||||
} else if (duplicateCount > 0) {
|
||||
message = `${duplicateCount} dispozitive duplicate, ${failedCount} eșuate.`;
|
||||
messageType = 'error';
|
||||
} else {
|
||||
message = `Toate ${failedCount} dispozitivele au eșuat să fie adăugate.`;
|
||||
messageType = 'error';
|
||||
}
|
||||
}
|
||||
|
||||
// Dacă există duplicate sau erori, afișează detalii suplimentare în consolă
|
||||
if (duplicateDevices.length > 0) {
|
||||
console.info('Dispozitive duplicate:', duplicateDevices);
|
||||
}
|
||||
if (failedDevices.length > 0) {
|
||||
console.warn('Dispozitive eșuate:', failedDevices);
|
||||
}
|
||||
|
||||
showMessage(message, messageType);
|
||||
|
||||
if (addedCount > 0) {
|
||||
closeScanModal();
|
||||
refreshComputers();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addFromScan(hostname, mac, ip) {
|
||||
fetch('/api/add', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({name: hostname, mac: mac, ip: ip})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.success) {
|
||||
showMessage(result.message, 'success');
|
||||
closeScanModal();
|
||||
refreshComputers();
|
||||
} else {
|
||||
showMessage(result.message, 'error');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Eroare la adăugarea calculatorului: ' + error.message, 'error');
|
||||
});
|
||||
}
|
||||
|
||||
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 closeRenameModal() {
|
||||
renameModal.style.display = 'none';
|
||||
document.getElementById('currentName').value = '';
|
||||
document.getElementById('newName').value = '';
|
||||
}
|
||||
|
||||
function performRename() {
|
||||
const oldName = document.getElementById('currentName').value;
|
||||
const newName = document.getElementById('newName').value.trim();
|
||||
|
||||
if (!newName) {
|
||||
showMessage('Numele nou nu poate fi gol!', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (oldName === newName) {
|
||||
showMessage('Numele nou trebuie să fie diferit de cel actual!', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
fetch('/api/rename', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({old_name: oldName, new_name: newName})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.success) {
|
||||
showMessage(result.message, 'success');
|
||||
closeRenameModal();
|
||||
refreshComputers();
|
||||
} else {
|
||||
showMessage(result.message, 'error');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Eroare la redenumirea calculatorului: ' + error.message, 'error');
|
||||
});
|
||||
}
|
||||
|
||||
function deleteComputer(name, mac) {
|
||||
const displayName = name && name.trim() ? name : `Calculator cu MAC ${mac}`;
|
||||
|
||||
if (!confirm(`Sigur vrei să ștergi calculatorul "${displayName}"?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
fetch('/api/delete', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({name: name, mac: mac})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.success) {
|
||||
showMessage(result.message, 'success');
|
||||
refreshComputers();
|
||||
} else {
|
||||
showMessage(result.message, 'error');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Eroare la ștergerea calculatorului: ' + error.message, 'error');
|
||||
});
|
||||
}
|
||||
|
||||
// Close modals when clicking outside
|
||||
window.onclick = function(event) {
|
||||
if (event.target == addModal) {
|
||||
closeAddModal();
|
||||
}
|
||||
if (event.target == scanModal) {
|
||||
closeScanModal();
|
||||
}
|
||||
if (event.target == renameModal) {
|
||||
closeRenameModal();
|
||||
}
|
||||
}
|
||||
|
||||
// Allow Enter key to perform rename
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Enter' && renameModal.style.display === 'block') {
|
||||
performRename();
|
||||
}
|
||||
});
|
||||
@@ -4,369 +4,80 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Wake-on-LAN Manager</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #2d3748;
|
||||
margin-bottom: 30px;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(45deg, #667eea, #764ba2);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-bottom: 30px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button {
|
||||
background: linear-gradient(45deg, #4f46e5, #7c3aed);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4);
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
button.wake-all {
|
||||
background: linear-gradient(45deg, #10b981, #059669);
|
||||
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
button.wake-all:hover {
|
||||
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
|
||||
button.scan {
|
||||
background: linear-gradient(45deg, #f59e0b, #d97706);
|
||||
box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
|
||||
}
|
||||
|
||||
button.scan:hover {
|
||||
box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
|
||||
}
|
||||
|
||||
.computer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.computer-card {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.computer-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.computer-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.computer-name {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: #2d3748;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status.online {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status.offline {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.status.unknown {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.computer-info {
|
||||
margin-bottom: 15px;
|
||||
color: #4a5568;
|
||||
}
|
||||
|
||||
.computer-info div {
|
||||
margin-bottom: 5px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.wake-btn {
|
||||
width: 100%;
|
||||
background: linear-gradient(45deg, #10b981, #059669);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: white;
|
||||
margin: 10% auto;
|
||||
padding: 30px;
|
||||
border-radius: 20px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.modal h2 {
|
||||
color: #2d3748;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 2px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.message.success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
}
|
||||
|
||||
.message.error {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fca5a5;
|
||||
}
|
||||
|
||||
.scan-results {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.scan-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.scan-table th,
|
||||
.scan-table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.scan-table th {
|
||||
background: #f9fafb;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.scan-table tr:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
background: linear-gradient(45deg, #10b981, #059669);
|
||||
font-size: 12px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #667eea;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.computer-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.controls {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🚀 Wake-on-LAN Manager</h1>
|
||||
<div class="title-bar">
|
||||
<h1>Wake-on-LAN Manager</h1>
|
||||
</div>
|
||||
|
||||
<div id="message-area"></div>
|
||||
|
||||
<div class="controls">
|
||||
<button onclick="refreshComputers()">🔄 Refresh</button>
|
||||
<button onclick="openAddModal()" class="scan">➕ Adaugă Calculator</button>
|
||||
<button onclick="scanNetwork()" class="scan">🔍 Scanează Rețeaua</button>
|
||||
<button onclick="wakeAllComputers()" class="wake-all">⚡ Trezește Toate</button>
|
||||
<div class="toolbar">
|
||||
<button onclick="refreshComputers()">Refresh</button>
|
||||
<button onclick="openAddModal()" title="Adaugă Calculator">➕ Adaugă Calculator</button>
|
||||
<div class="network-selector">
|
||||
<label>Rețea:</label>
|
||||
<select id="networkSelect" onchange="toggleCustomNetwork()">
|
||||
<option value="">Autodetectare</option>
|
||||
<option value="192.168.1.0/24">192.168.1.0/24</option>
|
||||
<option value="192.168.0.0/24">192.168.0.0/24</option>
|
||||
<option value="10.0.0.0/24">10.0.0.0/24</option>
|
||||
<option value="10.0.20.0/24">10.0.20.0/24</option>
|
||||
<option value="custom">Personalizat...</option>
|
||||
</select>
|
||||
<input type="text" id="customNetwork" placeholder="ex: 192.168.100.0/24" style="display: none;">
|
||||
</div>
|
||||
<button onclick="scanNetwork()">Scanează Rețeaua</button>
|
||||
<button onclick="triggerWindowsScan()" title="Scan Windows pentru MAC addresses">Scan Windows</button>
|
||||
<button onclick="wakeAllComputers()">Trezește Toate</button>
|
||||
</div>
|
||||
|
||||
<div id="computers-grid" class="computer-grid">
|
||||
<!-- Calculatoarele vor fi încărcate aici -->
|
||||
<div class="main-content">
|
||||
<table id="computers-table" class="computers-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Acțiuni</th>
|
||||
<th>Nume Calculator</th>
|
||||
<th>Adresa MAC</th>
|
||||
<th>Adresa IP</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="computers-tbody">
|
||||
<!-- Calculatoarele vor fi încărcate aici -->
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="no-computers" class="no-computers" style="display: none;">
|
||||
<p>Nu există calculatoare configurate. Adaugă calculatoare sau scanează rețeaua pentru a începe.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal pentru adăugarea calculatoarelor -->
|
||||
<div id="addModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeAddModal()">×</span>
|
||||
<h2>Adaugă Calculator Nou</h2>
|
||||
<div class="form-group">
|
||||
<label for="computerName">Nume Calculator:</label>
|
||||
<input type="text" id="computerName" placeholder="ex: PC Birou">
|
||||
<div class="modal-header">
|
||||
<h2>Adaugă Calculator Nou</h2>
|
||||
<span class="close" onclick="closeAddModal()">×</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="computerMac">Adresa MAC:</label>
|
||||
<input type="text" id="computerMac" placeholder="ex: 00:11:22:33:44:55">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="computerIp">IP (opțional):</label>
|
||||
<input type="text" id="computerIp" placeholder="ex: 192.168.1.100">
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="computerName">Nume Calculator:</label>
|
||||
<input type="text" id="computerName" placeholder="ex: PC Birou">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="computerMac">Adresa MAC:</label>
|
||||
<input type="text" id="computerMac" placeholder="ex: 00:11:22:33:44:55">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="computerIp">IP (opțional):</label>
|
||||
<input type="text" id="computerIp" placeholder="ex: 192.168.1.100">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" onclick="closeAddModal()" class="btn-secondary">Anulează</button>
|
||||
<button type="button" onclick="closeAddModal()">Anulează</button>
|
||||
<button type="button" onclick="addComputer()">Adaugă</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -375,265 +86,44 @@
|
||||
<!-- Modal pentru scanarea rețelei -->
|
||||
<div id="scanModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="closeScanModal()">×</span>
|
||||
<h2>Calculatoare din Rețea</h2>
|
||||
<div id="scan-loading" style="display: none; text-align: center;">
|
||||
<div class="loading"></div>
|
||||
<p>Scanez rețeaua...</p>
|
||||
<div class="modal-header">
|
||||
<h2>Calculatoare din Rețea</h2>
|
||||
<span class="close" onclick="closeScanModal()">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="scan-loading" style="display: none;">
|
||||
<div class="loading"></div>
|
||||
<p>Scanez rețeaua...</p>
|
||||
</div>
|
||||
<div id="scan-results"></div>
|
||||
</div>
|
||||
<div id="scan-results"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let scanModal = document.getElementById('scanModal');
|
||||
let addModal = document.getElementById('addModal');
|
||||
|
||||
// Încarcă calculatoarele la start
|
||||
window.onload = function() {
|
||||
refreshComputers();
|
||||
};
|
||||
|
||||
function showMessage(message, type) {
|
||||
const messageArea = document.getElementById('message-area');
|
||||
messageArea.innerHTML = `<div class="message ${type}">${message}</div>`;
|
||||
setTimeout(() => {
|
||||
messageArea.innerHTML = '';
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
function refreshComputers() {
|
||||
fetch('/api/computers')
|
||||
.then(response => response.json())
|
||||
.then(computers => {
|
||||
displayComputers(computers);
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Eroare la încărcarea calculatoarelor: ' + error.message, 'error');
|
||||
});
|
||||
}
|
||||
|
||||
function displayComputers(computers) {
|
||||
const grid = document.getElementById('computers-grid');
|
||||
|
||||
if (computers.length === 0) {
|
||||
grid.innerHTML = `
|
||||
<div style="grid-column: 1/-1; text-align: center; padding: 40px; color: #6b7280;">
|
||||
<p style="font-size: 1.2rem; margin-bottom: 10px;">📱 Nu există calculatoare configurate</p>
|
||||
<p>Adaugă calculatoare sau scanează rețeaua pentru a începe</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
grid.innerHTML = computers.map(computer => `
|
||||
<div class="computer-card">
|
||||
<div class="computer-header">
|
||||
<div class="computer-name">${computer.name}</div>
|
||||
<div class="status ${computer.status}">${computer.status}</div>
|
||||
</div>
|
||||
<div class="computer-info">
|
||||
<div>🔧 MAC: ${computer.mac}</div>
|
||||
${computer.ip ? `<div>🌐 IP: ${computer.ip}</div>` : ''}
|
||||
</div>
|
||||
<button class="wake-btn" onclick="wakeComputer('${computer.mac}', '${computer.name}', '${computer.ip || ''}')">
|
||||
⚡ Trezește ${computer.name}
|
||||
</button>
|
||||
<!-- Modal pentru redenumirea calculatoarelor -->
|
||||
<div id="renameModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Redenumește Calculator</h2>
|
||||
<span class="close" onclick="closeRenameModal()">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="currentName">Nume Actual:</label>
|
||||
<input type="text" id="currentName" readonly>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function wakeComputer(mac, name, ip) {
|
||||
showMessage(`Se trimite magic packet pentru ${name}...`, 'success');
|
||||
|
||||
fetch('/api/wake', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({mac: mac, name: name, ip: ip})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.success) {
|
||||
showMessage(result.message, 'success');
|
||||
setTimeout(refreshComputers, 2000);
|
||||
} else {
|
||||
showMessage(result.message, 'error');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Eroare la trezirea calculatorului: ' + error.message, 'error');
|
||||
});
|
||||
}
|
||||
|
||||
function wakeAllComputers() {
|
||||
showMessage('Se trezesc toate calculatoarele...', 'success');
|
||||
|
||||
fetch('/api/wake-all', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
let message = 'Comenzi trimise:\n';
|
||||
data.results.forEach(result => {
|
||||
message += `• ${result.name}: ${result.result.message}\n`;
|
||||
});
|
||||
showMessage(message.replace(/\n/g, '<br>'), 'success');
|
||||
setTimeout(refreshComputers, 3000);
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Eroare la trezirea calculatoarelor: ' + error.message, 'error');
|
||||
});
|
||||
}
|
||||
|
||||
function openAddModal() {
|
||||
addModal.style.display = 'block';
|
||||
}
|
||||
|
||||
function closeAddModal() {
|
||||
addModal.style.display = 'none';
|
||||
document.getElementById('computerName').value = '';
|
||||
document.getElementById('computerMac').value = '';
|
||||
document.getElementById('computerIp').value = '';
|
||||
}
|
||||
|
||||
function addComputer() {
|
||||
const name = document.getElementById('computerName').value;
|
||||
const mac = document.getElementById('computerMac').value;
|
||||
const ip = document.getElementById('computerIp').value;
|
||||
|
||||
if (!name || !mac) {
|
||||
showMessage('Numele și MAC-ul sunt obligatorii!', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
fetch('/api/add', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({name: name, mac: mac, ip: ip})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.success) {
|
||||
showMessage(result.message, 'success');
|
||||
closeAddModal();
|
||||
refreshComputers();
|
||||
} else {
|
||||
showMessage(result.message, 'error');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Eroare la adăugarea calculatorului: ' + error.message, 'error');
|
||||
});
|
||||
}
|
||||
|
||||
function scanNetwork() {
|
||||
scanModal.style.display = 'block';
|
||||
document.getElementById('scan-loading').style.display = 'block';
|
||||
document.getElementById('scan-results').innerHTML = '';
|
||||
|
||||
fetch('/api/scan')
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
document.getElementById('scan-loading').style.display = 'none';
|
||||
|
||||
if (result.success) {
|
||||
displayScanResults(result.computers);
|
||||
} else {
|
||||
document.getElementById('scan-results').innerHTML =
|
||||
`<div class="message error">${result.message}</div>`;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
document.getElementById('scan-loading').style.display = 'none';
|
||||
document.getElementById('scan-results').innerHTML =
|
||||
`<div class="message error">Eroare la scanare: ${error.message}</div>`;
|
||||
});
|
||||
}
|
||||
|
||||
function displayScanResults(computers) {
|
||||
if (computers.length === 0) {
|
||||
document.getElementById('scan-results').innerHTML =
|
||||
'<div class="message error">Nu s-au găsit calculatoare în rețea</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = `
|
||||
<table class="scan-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>IP</th>
|
||||
<th>MAC</th>
|
||||
<th>Hostname</th>
|
||||
<th>Status</th>
|
||||
<th>Acțiune</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
computers.forEach(computer => {
|
||||
html += `
|
||||
<tr>
|
||||
<td>${computer.ip}</td>
|
||||
<td style="font-family: monospace;">${computer.mac}</td>
|
||||
<td>${computer.hostname}</td>
|
||||
<td><span class="status ${computer.status}">${computer.status}</span></td>
|
||||
<td>
|
||||
<button class="add-btn" onclick="addFromScan('${computer.hostname}', '${computer.mac}', '${computer.ip}')">
|
||||
➕ Adaugă
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
|
||||
html += '</tbody></table>';
|
||||
document.getElementById('scan-results').innerHTML = html;
|
||||
}
|
||||
|
||||
function addFromScan(hostname, mac, ip) {
|
||||
fetch('/api/add', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({name: hostname, mac: mac, ip: ip})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.success) {
|
||||
showMessage(result.message, 'success');
|
||||
closeScanModal();
|
||||
refreshComputers();
|
||||
} else {
|
||||
showMessage(result.message, 'error');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showMessage('Eroare la adăugarea calculatorului: ' + error.message, 'error');
|
||||
});
|
||||
}
|
||||
|
||||
function closeScanModal() {
|
||||
scanModal.style.display = 'none';
|
||||
}
|
||||
|
||||
// Închide modalurile când se dă click în afara lor
|
||||
window.onclick = function(event) {
|
||||
if (event.target == addModal) {
|
||||
closeAddModal();
|
||||
}
|
||||
if (event.target == scanModal) {
|
||||
closeScanModal();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<div class="form-group">
|
||||
<label for="newName">Nume Nou:</label>
|
||||
<input type="text" id="newName" placeholder="Introdu noul nume">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" onclick="closeRenameModal()">Anulează</button>
|
||||
<button type="button" onclick="performRename()">Redenumește</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user