Files
RFID_detectionGUI/templates/index.html
T

252 lines
11 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RFID Detektivni Sistem</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<div class="container">
<!-- Left Panel -->
<div class="left-panel">
<div class="result-section">
<img src="{{ url_for('static', filename='assets/logo.png') }}" alt="Logo" class="result-logo" onerror="this.style.display='none'">
<h3>Zadnji rezultat skeniranja</h3>
<div class="result-card" id="resultCard">
<div id="scan-result-uid-container" class="result-uid-box">
<div class="result-uid">-</div>
<button class="copy-btn" onclick="copyUID(event)" title="Kopiraj UID">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
</svg>
</button>
</div>
<div class="result-name">-</div>
<div class="result-status">-</div>
</div>
</div>
<div class="stats-section">
<h3>Statistika</h3>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-label">Registrirani</div>
<div class="stat-value" id="statRegistered">0</div>
</div>
<div class="stat-card">
<div class="stat-label">Neregistrirani</div>
<div class="stat-value" id="statUnregistered">0</div>
</div>
</div>
</div>
<div class="admin-section">
<h3>Dostop Administrator</h3>
<button id="adminToggleBtn" class="admin-btn" onclick="openLoginModal()">Prijava Admin</button>
</div>
</div>
<!-- Right Panel -->
<div class="right-panel">
<!-- Tab Navigation -->
<div class="tab-nav">
<button class="tab-nav-btn active" onclick="switchTab('logs', event)">Dnevnik skeniranja</button>
<button class="tab-nav-btn" onclick="switchTab('participants', event)">Člani</button>
<button class="tab-nav-btn" onclick="switchTab('documents', event)">Dokumenti</button>
</div>
<!-- Participants Tab -->
<div id="participants-tab" class="tab-panel">
<div class="panel-header">
<h2>Člani</h2>
<button class="btn btn-primary" onclick="openAddParticipantModal()">Dodaj udeleženca</button>
</div>
<div class="panel-content">
<div class="table-container">
<table>
<thead>
<tr>
<th>ID</th>
<th>Ime</th>
<th id="card-uid-header">UID kartice</th>
<th id="key-uid-header">UID ključa</th>
<th>Datum veljavnosti</th>
<th>Datum dodajanja</th>
<th>Dejanja</th>
</tr>
</thead>
<tbody id="participantsTable">
</tbody>
</table>
</div>
</div>
</div>
<!-- Scan Logs Tab -->
<div id="logs-tab" class="tab-panel active">
<div class="panel-header">
<h2>Zgodovina skeniranja</h2>
<div class="header-actions">
<button class="btn btn-primary" onclick="exportLogs()">Izvozi v Excel</button>
<button class="btn btn-primary" onclick="printLogs()">Natisni</button>
<button id="addUnregisteredBtn" class="btn btn-primary" onclick="openAddUnregisteredModal()">Dodaj neregistriranega</button>
</div>
</div>
<div class="panel-filters">
<div class="filters-row">
<div class="filter-group">
<label>Rezultat:</label>
<select id="filterSelect" onchange="refreshLogs()">
<option value="All">Vse</option>
<option value="PASS">Samo PASS</option>
<option value="FAIL">Samo FAIL</option>
</select>
</div>
<div class="filter-group">
<label>Udeleženec:</label>
<select id="participantFilter" onchange="refreshLogs()">
<option value="">Vsi udeleženci</option>
</select>
</div>
<div class="filter-group">
<label>Od:</label>
<input type="date" id="startDateFilter" onchange="refreshLogs()">
</div>
<div class="filter-group">
<label>Do:</label>
<input type="date" id="endDateFilter" onchange="refreshLogs()">
</div>
</div>
<div class="filters-quick">
<button class="btn-quick-filter" onclick="filterByToday()">Danes</button>
<button class="btn-quick-filter" onclick="filterByLastWeek()">Teden</button>
<button class="btn-quick-filter" onclick="filterByLastMonth()">Mesec</button>
<button class="btn-quick-filter" onclick="filterByLastYear()">Leto</button>
<button class="btn-filter" onclick="resetFilters()">Resetiraj</button>
</div>
</div>
<div class="panel-content">
<div class="table-container">
<table>
<thead>
<tr>
<th>ID</th>
<th>Ime</th>
<th id="logs-card-uid-header">UID kartice</th>
<th id="logs-key-uid-header">UID ključa</th>
<th>Rezultat</th>
<th>Datum</th>
<th>Čas</th>
<th id="logs-actions-header">Dejanja</th>
</tr>
</thead>
<tbody id="logsTable">
</tbody>
</table>
</div>
</div>
</div>
<!-- Documents Tab -->
<div id="documents-tab" class="tab-panel">
<div class="panel-header">
<h2>Dokumenti</h2>
</div>
<div class="panel-content">
<div id="documentsGrid" class="documents-grid">
<p style="color: var(--text-secondary);">Nalaganje dokumentov...</p>
</div>
</div>
</div>
</div>
</div>
<!-- Add Participant Modal -->
<div id="addParticipantModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeAddParticipantModal()">&times;</span>
<h2>Dodaj novega udeleženca</h2>
<div class="form-group">
<label>Ime:</label>
<input type="text" id="inputName" placeholder="Ime udeleženca">
</div>
<div class="form-group">
<label>UID kartice:</label>
<input type="text" id="inputCardUID" placeholder="UID kartice">
</div>
<div class="form-group">
<label>UID ključa (neobvezno):</label>
<input type="text" id="inputKeyUID" placeholder="UID ključa">
</div>
<div class="form-group">
<label>Datum veljavnosti (neobvezno):</label>
<input type="date" id="inputExpiration">
</div>
<button class="btn btn-primary" onclick="addParticipant()">Dodaj udeleženca</button>
</div>
</div>
<!-- Edit Modal -->
<div id="editModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">&times;</span>
<h2>Uredi udeleženca</h2>
<div class="form-group">
<label>Ime:</label>
<input type="text" id="editName">
</div>
<div class="form-group">
<label>UID kartice:</label>
<input type="text" id="editCardUID">
</div>
<div class="form-group">
<label>UID ključa (neobvezno):</label>
<input type="text" id="editKeyUID">
</div>
<div class="form-group">
<label>Datum veljavnosti (neobvezno):</label>
<input type="date" id="editExpiration">
</div>
<button class="btn btn-primary" onclick="saveChanges()">Shrani</button>
</div>
</div>
<!-- Login Modal -->
<div id="loginModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeLoginModal()">&times;</span>
<h2>Administratorski Dostop</h2>
<div class="form-group">
<label>Zaupno Geslo:</label>
<input type="password" id="loginPassword" placeholder="Vnesite geslo administratorja" onkeypress="handleLoginKeypress(event)" autocomplete="off">
</div>
<button class="btn btn-primary" onclick="adminLogin()">Prijava v Admin Način</button>
</div>
</div>
<!-- Add Unregistered User Modal -->
<div id="addUnregisteredModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeAddUnregisteredModal()">&times;</span>
<h2>Dodaj neregistriranega udeleženca</h2>
<div class="form-group">
<label>Ime:</label>
<input type="text" id="inputUnregisteredName" placeholder="Ime udeleženca">
</div>
<button class="btn btn-primary" onclick="addUnregisteredUser()">Dodaj v dnevnik</button>
</div>
</div>
<div id="print-header" style="visibility:hidden;position:fixed;">
<img src="{{ url_for('static', filename='assets/logo.png') }}" alt="Logo">
<p id="print-date-range" style="font-size:13px;color:#444;margin-top:4px;"></p>
</div>
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
</body>
</html>