bl3kunja-FW
408 lines
20 KiB
HTML
408 lines
20 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</button>
|
||
<button class="tab-nav-btn" onclick="switchTab('participants', event)">Člani</button>
|
||
<button class="tab-nav-btn" onclick="switchTab('documents', event)">Dokumenti</button>
|
||
<button class="tab-nav-btn" onclick="switchTab('store', event)">Trgovina</button>
|
||
</div>
|
||
|
||
<!-- Participants Tab -->
|
||
<div id="participants-tab" class="tab-panel">
|
||
<div id="participantsToolbar" class="toolbar">
|
||
<div class="toolbar-actions">
|
||
<button class="tb-btn tb-btn-primary" onclick="openAddParticipantModal()">+ Dodaj udeleženca</button>
|
||
</div>
|
||
</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="toolbar toolbar-stacked">
|
||
<div class="toolbar-row">
|
||
<div class="tf-group">
|
||
<label>Rezultat</label>
|
||
<select id="filterSelect" onchange="refreshLogs()">
|
||
<option value="All">Vse</option>
|
||
<option value="PASS">PASS</option>
|
||
<option value="FAIL">FAIL</option>
|
||
</select>
|
||
</div>
|
||
<div class="tf-group">
|
||
<label>Udeleženec</label>
|
||
<select id="participantFilter" onchange="refreshLogs()">
|
||
<option value="">Vsi</option>
|
||
</select>
|
||
</div>
|
||
<div class="tf-group">
|
||
<label>Od</label>
|
||
<input type="date" id="startDateFilter" onchange="refreshLogs()">
|
||
</div>
|
||
<div class="tf-group">
|
||
<label>Do</label>
|
||
<input type="date" id="endDateFilter" onchange="refreshLogs()">
|
||
</div>
|
||
</div>
|
||
<div class="toolbar-row">
|
||
<div class="tf-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()">×</button>
|
||
</div>
|
||
<div class="toolbar-actions">
|
||
<button class="tb-btn" onclick="printLogs()">Natisni</button>
|
||
<button id="addUnregisteredBtn" class="tb-btn tb-btn-primary" onclick="openAddUnregisteredModal()">+ Neregistriran</button>
|
||
</div>
|
||
</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-content">
|
||
<div id="documentsGrid" class="documents-grid">
|
||
<p style="color: var(--text-secondary);">Nalaganje dokumentov...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Store Tab -->
|
||
<div id="store-tab" class="tab-panel">
|
||
<!-- Single shared toolbar -->
|
||
<div class="toolbar">
|
||
<div class="toolbar-actions">
|
||
<div class="store-balance-chip">
|
||
<span class="store-balance-label">Stanje</span>
|
||
<span id="storeBalanceDisplay" class="store-balance-value">€ 0.00</span>
|
||
</div>
|
||
<button id="editBalanceBtn" class="tb-btn" onclick="openEditBalanceModal()" style="display:none;">Uredi stanje</button>
|
||
<button id="addItemBtn" class="tb-btn tb-btn-primary" onclick="openAddItemModal()" style="display:none;">+ Artikel</button>
|
||
<button id="storeViewToggleBtn" class="tb-btn" onclick="toggleStoreView()">Zgodovina plačil</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Shop view -->
|
||
<div id="storeShopView" class="store-tab-scroll panel-content">
|
||
<div class="store-layout">
|
||
<div class="store-inventory">
|
||
<div class="inventory-grid" id="inventoryGrid">
|
||
<p style="color: var(--text-secondary);">Nalaganje...</p>
|
||
</div>
|
||
</div>
|
||
<div class="store-cart">
|
||
<div class="store-cart-header">
|
||
<span class="store-cart-title">Košarica</span>
|
||
<button class="tb-btn" onclick="clearCart()">Počisti</button>
|
||
</div>
|
||
<div class="cart-items" id="cartItems">
|
||
<p style="color: var(--text-secondary); text-align: center; padding: 20px;">Košarica je prazna</p>
|
||
</div>
|
||
<div class="cart-total">
|
||
<div class="cart-total-row">
|
||
<span>Skupaj:</span>
|
||
<span id="cartTotal" class="cart-total-amount">€ 0.00</span>
|
||
</div>
|
||
<div class="cart-total-row cart-balance-row">
|
||
<span>Stanje po plačilu:</span>
|
||
<span id="cartBalanceAfter" class="cart-balance-after">€ 0.00</span>
|
||
</div>
|
||
<button class="btn btn-primary cart-pay-btn" onclick="processPayment()">Plačaj</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- History view -->
|
||
<div id="storeHistoryView" class="panel-content" style="display:none;">
|
||
<div class="history-toolbar">
|
||
<button class="tb-btn" onclick="openMonthlyOverview()">Mesečni pregled</button>
|
||
<button id="clearHistoryBtn" class="tb-btn" onclick="clearPaymentHistory()" style="display:none;color:var(--accent-red);border-color:#fca5a5;">Izbriši zgodovino</button>
|
||
</div>
|
||
<div class="table-container" style="height:calc(100% - 46px);">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>Prodajalec</th>
|
||
<th>Datum</th>
|
||
<th>Čas</th>
|
||
<th>Artikli</th>
|
||
<th>Skupaj</th>
|
||
<th>Stanje pred</th>
|
||
<th>Stanje po</th>
|
||
<th>Potrdilo</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="paymentHistoryTable"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Add Item Modal -->
|
||
<div id="addItemModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeAddItemModal()">×</span>
|
||
<h2 id="addItemModalTitle">Dodaj artikel</h2>
|
||
<div class="form-group">
|
||
<label>Slika (neobvezno):</label>
|
||
<div class="image-upload-area" id="imageUploadArea" onclick="document.getElementById('itemImageInput').click()">
|
||
<div id="imagePreviewWrapper">
|
||
<div class="image-upload-placeholder" id="imageUploadPlaceholder">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
|
||
<span>Kliknite za nalaganje slike</span>
|
||
</div>
|
||
<img id="imagePreview" src="" alt="" style="display:none; max-height:140px; border-radius:6px; object-fit:contain;">
|
||
</div>
|
||
<input type="file" id="itemImageInput" accept="image/*" style="display:none" onchange="handleImageUpload(event)">
|
||
</div>
|
||
<button type="button" class="btn-remove-image" id="removeImageBtn" onclick="removeItemImage()" style="display:none;">Odstrani sliko</button>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Ime artikla:</label>
|
||
<input type="text" id="itemName" placeholder="Ime artikla">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Cena (€):</label>
|
||
<input type="number" id="itemPrice" placeholder="0.00" min="0" step="0.01">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Zaloga (kos):</label>
|
||
<input type="number" id="itemStock" placeholder="0" min="0" step="1">
|
||
</div>
|
||
<button class="btn btn-primary" id="addItemSubmitBtn" onclick="submitItem()">Dodaj</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Edit Balance Modal -->
|
||
<div id="editBalanceModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeEditBalanceModal()">×</span>
|
||
<h2>Uredi stanje</h2>
|
||
<div class="form-group">
|
||
<label>Novo stanje (€):</label>
|
||
<input type="number" id="balanceInput" placeholder="0.00" step="0.01">
|
||
</div>
|
||
<button class="btn btn-primary" onclick="saveBalance()">Shrani</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Add Participant Modal -->
|
||
<div id="addParticipantModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeAddParticipantModal()">×</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()">×</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()">×</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()">×</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>
|
||
|
||
<!-- Checkout Modal -->
|
||
<div id="checkoutModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeCheckoutModal()">×</span>
|
||
<h2>Podatki prodajalca</h2>
|
||
<div class="form-group">
|
||
<label>Ime in priimek:</label>
|
||
<input type="text" id="checkoutBuyer" placeholder="Ime in priimek" onkeydown="if(event.key==='Enter')confirmCheckout()">
|
||
</div>
|
||
<div class="checkout-summary">
|
||
<div class="checkout-summary-row">
|
||
<span>Skupaj za plačilo:</span>
|
||
<span id="checkoutTotal" class="checkout-total-val"></span>
|
||
</div>
|
||
<div class="checkout-summary-row">
|
||
<span>Stanje po plačilu:</span>
|
||
<span id="checkoutBalanceAfter" class="checkout-balance-val"></span>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-primary" onclick="confirmCheckout()">Potrdi plačilo</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Monthly Overview Modal -->
|
||
<div id="monthlyModal" class="modal">
|
||
<div class="modal-content modal-content-wide">
|
||
<div class="monthly-modal-header">
|
||
<h2>Mesečni pregled</h2>
|
||
<span class="close" onclick="closeMonthlyOverview()">×</span>
|
||
</div>
|
||
<div class="monthly-modal-toolbar">
|
||
<div class="filter-group" style="flex:0 0 auto;min-width:180px;">
|
||
<label>Mesec:</label>
|
||
<input type="month" id="monthlyPickerInput" onchange="renderMonthlyOverview()">
|
||
</div>
|
||
<button class="btn btn-primary" onclick="printMonthlyOverview()" style="width:auto;padding:10px 18px;margin:0;font-size:12px;flex-shrink:0;">Natisni pregled</button>
|
||
</div>
|
||
<div id="monthlyOverviewContent" class="monthly-modal-body"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Hidden receipt for printing -->
|
||
<div id="receiptPrintArea" style="display:none;"></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>
|