Marius Mutu
43e997ba47
- Fix modal scroll issues on mobile devices with proper viewport constraints - Remove status column and apply status colors directly to device names - Reorder columns: IP before MAC for better logical flow - Optimize table layout for mobile with reduced padding and text ellipsis - Implement visual disabled state for existing devices in scan modal - Add intelligent device comparison to prevent duplicate additions - Exclude Docker bridge networks from Linux scanning fallback - Improve scan result handling with better error messaging 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
132 lines
5.7 KiB
HTML
132 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ro">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Wake-on-LAN Manager</title>
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="title-bar">
|
||
<h1>Wake-on-LAN Manager</h1>
|
||
</div>
|
||
|
||
<div id="message-area"></div>
|
||
|
||
<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 class="main-content">
|
||
<table id="computers-table" class="computers-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Acțiuni</th>
|
||
<th>Nume Calculator</th>
|
||
<th>Adresa IP</th>
|
||
<th>Adresa MAC</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">
|
||
<div class="modal-header">
|
||
<h2>Adaugă Calculator Nou</h2>
|
||
<span class="close" onclick="closeAddModal()">×</span>
|
||
</div>
|
||
<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()">Anulează</button>
|
||
<button type="button" onclick="addComputer()">Adaugă</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal pentru scanarea rețelei -->
|
||
<div id="scanModal" class="modal">
|
||
<div class="modal-content">
|
||
<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>
|
||
</div>
|
||
|
||
<!-- Modal pentru editarea calculatoarelor -->
|
||
<div id="editModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Editează Calculator</h2>
|
||
<span class="close" onclick="closeEditModal()">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-group">
|
||
<label for="editName">Nume Calculator:</label>
|
||
<input type="text" id="editName" placeholder="ex: PC Birou">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editMac">Adresa MAC:</label>
|
||
<input type="text" id="editMac" placeholder="ex: 00:11:22:33:44:55">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="editIp">IP (opțional):</label>
|
||
<input type="text" id="editIp" placeholder="ex: 192.168.1.100">
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" onclick="closeEditModal()">Anulează</button>
|
||
<button type="button" onclick="performEdit()">Salvează</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
||
</body>
|
||
</html> |