|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>WiFi Attendance Tracker - Advanced</title> |
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
|
|
|
<header class="header"> |
|
|
<div class="header-content"> |
|
|
<h1><i class="fas fa-wifi"></i> WiFi Attendance Tracker</h1> |
|
|
<p class="subtitle">Advanced Employee Management & Time Tracking</p> |
|
|
</div> |
|
|
<div class="header-actions"> |
|
|
<button id="settingsBtn" class="btn btn-secondary"> |
|
|
<i class="fas fa-cog"></i> Settings |
|
|
</button> |
|
|
<button id="addEmployeeBtn" class="btn btn-primary"> |
|
|
<i class="fas fa-user-plus"></i> Add Employee |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="status-bar"> |
|
|
<div class="status-item"> |
|
|
<span class="status-label">System Status:</span> |
|
|
<span id="systemStatus" class="status-value">Loading...</span> |
|
|
</div> |
|
|
<div class="status-item"> |
|
|
<span class="status-label">Last Update:</span> |
|
|
<span id="lastUpdate" class="status-value">Never</span> |
|
|
</div> |
|
|
<div class="status-item"> |
|
|
<span class="status-label">Employees:</span> |
|
|
<span id="employeeCount" class="status-value">0</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="control-panel"> |
|
|
<div class="control-group"> |
|
|
<button id="startBtn" class="btn btn-success"> |
|
|
<i class="fas fa-play"></i> Start Monitoring |
|
|
</button> |
|
|
<button id="stopBtn" class="btn btn-danger" disabled> |
|
|
<i class="fas fa-stop"></i> Stop Monitoring |
|
|
</button> |
|
|
<button id="refreshBtn" class="btn btn-info"> |
|
|
<i class="fas fa-sync-alt"></i> Refresh Data |
|
|
</button> |
|
|
</div> |
|
|
<div class="control-group"> |
|
|
<div class="search-container"> |
|
|
<input type="text" id="searchInput" placeholder="Search employees..." class="search-input"> |
|
|
<button id="searchBtn" class="btn btn-outline"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
<button id="clearSearchBtn" class="btn btn-outline"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="stats-grid"> |
|
|
<div class="stat-card present"> |
|
|
<div class="stat-icon"> |
|
|
<i class="fas fa-user-check"></i> |
|
|
</div> |
|
|
<div class="stat-content"> |
|
|
<h3 id="presentCount">0</h3> |
|
|
<p>Present</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="stat-card absent"> |
|
|
<div class="stat-icon"> |
|
|
<i class="fas fa-user-times"></i> |
|
|
</div> |
|
|
<div class="stat-content"> |
|
|
<h3 id="absentCount">0</h3> |
|
|
<p>Absent</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="stat-card break"> |
|
|
<div class="stat-icon"> |
|
|
<i class="fas fa-coffee"></i> |
|
|
</div> |
|
|
<div class="stat-content"> |
|
|
<h3 id="breakCount">0</h3> |
|
|
<p>On Break</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="stat-card timeout"> |
|
|
<div class="stat-icon"> |
|
|
<i class="fas fa-clock"></i> |
|
|
</div> |
|
|
<div class="stat-content"> |
|
|
<h3 id="timeoutCount">0</h3> |
|
|
<p>Timed Out</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="main-grid"> |
|
|
|
|
|
<div class="panel"> |
|
|
<div class="panel-header"> |
|
|
<h2><i class="fas fa-users"></i> Employee Status</h2> |
|
|
<div class="panel-actions"> |
|
|
<button id="exportBtn" class="btn btn-outline"> |
|
|
<i class="fas fa-download"></i> Export CSV |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="panel-content"> |
|
|
<div id="employeeList" class="employee-list"> |
|
|
<div class="loading">Loading employees...</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="panel"> |
|
|
<div class="panel-header"> |
|
|
<h2><i class="fas fa-history"></i> Recent Events</h2> |
|
|
<div class="panel-actions"> |
|
|
<select id="eventDateFilter" class="date-filter"> |
|
|
<option value="">All Events</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="panel-content"> |
|
|
<div id="eventsList" class="events-list"> |
|
|
<div class="loading">Loading events...</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="panel"> |
|
|
<div class="panel-header"> |
|
|
<h2><i class="fas fa-calendar-day"></i> Daily Summary</h2> |
|
|
<div class="panel-actions"> |
|
|
<input type="date" id="summaryDate" class="date-input"> |
|
|
<button id="summaryRefreshBtn" class="btn btn-outline"> |
|
|
<i class="fas fa-sync-alt"></i> Refresh |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="panel-content"> |
|
|
<div id="summaryTable" class="summary-table"> |
|
|
<div class="loading">Loading daily summary...</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="addEmployeeModal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-header"> |
|
|
<h3><i class="fas fa-user-plus"></i> Add New Employee</h3> |
|
|
<button class="modal-close">×</button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<form id="addEmployeeForm"> |
|
|
<div class="form-group"> |
|
|
<label for="employeeName">Employee Name</label> |
|
|
<input type="text" id="employeeName" name="name" required placeholder="Enter employee name"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="employeeMac">MAC Address</label> |
|
|
<input type="text" id="employeeMac" name="mac" required placeholder="aa-bb-cc-dd-ee-ff" pattern="[a-fA-F0-9]{2}-[a-fA-F0-9]{2}-[a-fA-F0-9]{2}-[a-fA-F0-9]{2}-[a-fA-F0-9]{2}-[a-fA-F0-9]{2}"> |
|
|
<small>Format: aa-bb-cc-dd-ee-ff (lowercase with dashes)</small> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="employeePicture">Picture Path (Optional)</label> |
|
|
<input type="text" id="employeePicture" name="picture" placeholder="static/img/employee.jpg"> |
|
|
<small>Path to employee picture file</small> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="adminPassword">Admin Password</label> |
|
|
<input type="password" id="adminPassword" name="password" required placeholder="Enter admin password"> |
|
|
<small>Default password: 1122</small> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button type="button" class="btn btn-secondary" onclick="closeModal('addEmployeeModal')">Cancel</button> |
|
|
<button type="submit" form="addEmployeeForm" class="btn btn-primary">Add Employee</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="settingsModal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-header"> |
|
|
<h3><i class="fas fa-cog"></i> Settings</h3> |
|
|
<button class="modal-close">×</button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<div class="settings-section"> |
|
|
<h4>Change Admin Password</h4> |
|
|
<form id="changePasswordForm"> |
|
|
<div class="form-group"> |
|
|
<label for="currentPassword">Current Password</label> |
|
|
<input type="password" id="currentPassword" name="currentPassword" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="newPassword">New Password</label> |
|
|
<input type="password" id="newPassword" name="newPassword" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="confirmPassword">Confirm New Password</label> |
|
|
<input type="password" id="confirmPassword" name="confirmPassword" required> |
|
|
</div> |
|
|
<button type="submit" class="btn btn-primary">Change Password</button> |
|
|
</form> |
|
|
</div> |
|
|
<div class="settings-section"> |
|
|
<h4>System Information</h4> |
|
|
<div class="info-grid"> |
|
|
<div class="info-item"> |
|
|
<span class="info-label">Scan Interval:</span> |
|
|
<span id="scanInterval" class="info-value">60 seconds</span> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<span class="info-label">Office Timeout:</span> |
|
|
<span id="officeTimeout" class="info-value">17:00</span> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<span class="info-label">Current Time:</span> |
|
|
<span id="currentTime" class="info-value">--:--:--</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button type="button" class="btn btn-secondary" onclick="closeModal('settingsModal')">Close</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="employeeDetailsModal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-header"> |
|
|
<h3><i class="fas fa-user"></i> Employee Details</h3> |
|
|
<button class="modal-close">×</button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<div id="employeeDetailsContent"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button type="button" class="btn btn-danger" id="deleteEmployeeBtn"> |
|
|
<i class="fas fa-trash"></i> Delete Employee |
|
|
</button> |
|
|
<button type="button" class="btn btn-warning" id="modifyEmployeeBtn"> |
|
|
<i class="fas fa-edit"></i> Modify Employee |
|
|
</button> |
|
|
<button type="button" class="btn btn-secondary" onclick="closeModal('employeeDetailsModal')">Close</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="deleteEmployeeModal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-header"> |
|
|
<h3><i class="fas fa-trash"></i> Delete Employee</h3> |
|
|
<button class="modal-close">×</button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<div class="warning-message"> |
|
|
<i class="fas fa-exclamation-triangle"></i> |
|
|
<p>Are you sure you want to delete this employee? This action cannot be undone.</p> |
|
|
<div id="deleteEmployeeInfo" class="employee-info"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<form id="deleteEmployeeForm"> |
|
|
<div class="form-group"> |
|
|
<label for="deleteAdminPassword">Admin Password</label> |
|
|
<input type="password" id="deleteAdminPassword" name="password" required placeholder="Enter admin password"> |
|
|
<small>Default password: 1122</small> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button type="button" class="btn btn-secondary" onclick="closeModal('deleteEmployeeModal')">Cancel</button> |
|
|
<button type="submit" form="deleteEmployeeForm" class="btn btn-danger"> |
|
|
<i class="fas fa-trash"></i> Delete Employee |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="modifyEmployeeModal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-header"> |
|
|
<h3><i class="fas fa-edit"></i> Modify Employee Information</h3> |
|
|
<button class="modal-close">×</button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<div class="info-message" style="background: #e3f2fd; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid #2196f3;"> |
|
|
<i class="fas fa-info-circle" style="color: #2196f3; margin-right: 8px;"></i> |
|
|
<strong>You can modify:</strong> Employee name, MAC address, or picture path. All fields are editable. |
|
|
</div> |
|
|
<form id="modifyEmployeeForm"> |
|
|
<div class="form-group"> |
|
|
<label for="modifyEmployeeName"> |
|
|
<i class="fas fa-user"></i> Employee Name |
|
|
<small style="font-weight: normal; color: #666;">(Change the employee's display name)</small> |
|
|
</label> |
|
|
<input type="text" id="modifyEmployeeName" name="name" required placeholder="Enter new employee name"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="modifyEmployeeMac"> |
|
|
<i class="fas fa-network-wired"></i> MAC Address |
|
|
<small style="font-weight: normal; color: #666;">(Update the device MAC address for tracking)</small> |
|
|
</label> |
|
|
<input type="text" id="modifyEmployeeMac" name="mac_address" required placeholder="aa-bb-cc-dd-ee-ff" pattern="[a-fA-F0-9]{2}-[a-fA-F0-9]{2}-[a-fA-F0-9]{2}-[a-fA-F0-9]{2}-[a-fA-F0-9]{2}-[a-fA-F0-9]{2}"> |
|
|
<small>Format: aa-bb-cc-dd-ee-ff (lowercase with dashes)</small> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="modifyEmployeePicture"> |
|
|
<i class="fas fa-image"></i> Picture Path (Optional) |
|
|
<small style="font-weight: normal; color: #666;">(Update employee photo path)</small> |
|
|
</label> |
|
|
<input type="text" id="modifyEmployeePicture" name="picture_path" placeholder="static/img/employee.jpg"> |
|
|
<small>Path to employee picture file</small> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="modifyAdminPassword"> |
|
|
<i class="fas fa-lock"></i> Admin Password |
|
|
<small style="font-weight: normal; color: #666;">(Required for security verification)</small> |
|
|
</label> |
|
|
<input type="password" id="modifyAdminPassword" name="password" required placeholder="Enter admin password"> |
|
|
<small>Default password: 1122</small> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button type="button" class="btn btn-secondary" onclick="closeModal('modifyEmployeeModal')">Cancel</button> |
|
|
<button type="submit" form="modifyEmployeeForm" class="btn btn-primary"> |
|
|
<i class="fas fa-save"></i> Save Changes |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="notifications" class="notifications"></div> |
|
|
|
|
|
<script src="{{ url_for('static', filename='js/script.js') }}"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
|
|
|
