Clean up the UI
This commit is contained in:
@@ -379,17 +379,6 @@ function createTableRow(record, displayIndex) {
|
||||
</td>
|
||||
<td>
|
||||
<div class="record-actions">
|
||||
<button onclick="viewRecordDetails('${record.id}')"
|
||||
class="action-btn btn-view"
|
||||
title="View Details">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
<button onclick="showLocationMap('${record.id}')"
|
||||
class="action-btn btn-map"
|
||||
title="Show on Map"
|
||||
${!record.has_location_data ? "disabled" : ""}>
|
||||
<i class="fas fa-map"></i>
|
||||
</button>
|
||||
<button onclick="editRecord('${record.id}')"
|
||||
class="action-btn btn-edit"
|
||||
title="Edit Record">
|
||||
@@ -709,17 +698,6 @@ function createTableRow(record, displayIndex) {
|
||||
</td>
|
||||
<td>
|
||||
<div class="record-actions">
|
||||
<button onclick="viewRecordDetails('${record.id}')"
|
||||
class="action-btn btn-view"
|
||||
title="View Details">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
<button onclick="showLocationMap('${record.id}')"
|
||||
class="action-btn btn-map"
|
||||
title="Show on Map"
|
||||
${!record.has_location_data ? "disabled" : ""}>
|
||||
<i class="fas fa-map"></i>
|
||||
</button>
|
||||
<button onclick="editRecord('${record.id}')"
|
||||
class="action-btn btn-edit"
|
||||
title="Edit Record">
|
||||
@@ -748,123 +726,6 @@ function getSortKey(columnIndex) {
|
||||
return sortKeys[columnIndex] || "index";
|
||||
}
|
||||
|
||||
// Enhanced record details view with location accuracy
|
||||
function viewRecordDetails(recordId) {
|
||||
const record = attendanceData.find((r) => r.id == recordId);
|
||||
if (!record) return;
|
||||
|
||||
const modal = document.getElementById("recordModal");
|
||||
const modalTitle = document.getElementById("modalTitle");
|
||||
const modalBody = document.getElementById("modalBody");
|
||||
|
||||
if (!modal || !modalTitle || !modalBody) return;
|
||||
|
||||
modalTitle.textContent = `Attendance Record - ${record.employeeId}`;
|
||||
|
||||
// Build location accuracy details
|
||||
const locationAccuracySection =
|
||||
record.location_accuracy !== null
|
||||
? `
|
||||
<div class="location-accuracy-details">
|
||||
<h5><i class="fas fa-ruler"></i> Location Accuracy Analysis</h5>
|
||||
<div class="accuracy-comparison">
|
||||
<div class="location-point qr-point">
|
||||
<i class="fas fa-qrcode"></i>
|
||||
<h6>QR Code Location</h6>
|
||||
<p>${record.qr_address}</p>
|
||||
</div>
|
||||
<div class="location-point checkin-point">
|
||||
<i class="fas fa-location-arrow"></i>
|
||||
<h6>Check-in Location</h6>
|
||||
<p>${record.checked_in_address}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="distance-display">
|
||||
<div class="distance-value">${record.location_accuracy.toFixed(
|
||||
3
|
||||
)} miles</div>
|
||||
<div class="distance-label">Distance between locations</div>
|
||||
<div class="accuracy-level-display">
|
||||
<span class="location-accuracy-badge accuracy-${
|
||||
record.accuracy_level
|
||||
}">
|
||||
<i class="fas fa-ruler"></i>
|
||||
${record.accuracy_level.toUpperCase()} ACCURACY
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: `
|
||||
<div class="location-accuracy-details">
|
||||
<h5><i class="fas fa-ruler"></i> Location Accuracy Analysis</h5>
|
||||
<div class="distance-display">
|
||||
<div class="distance-value">Unable to Calculate</div>
|
||||
<div class="distance-label">Location accuracy could not be determined</div>
|
||||
<p style="color: var(--gray-600); margin-top: var(--spacing-2);">
|
||||
This may be due to missing address information or geocoding limitations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
modalBody.innerHTML = `
|
||||
<div class="record-details-grid">
|
||||
<div class="detail-section">
|
||||
<h4><i class="fas fa-user"></i> Employee Information</h4>
|
||||
<div class="detail-item">
|
||||
<strong>Employee ID:</strong>
|
||||
<span>${record.employeeId}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<strong>Check-in Date:</strong>
|
||||
<span>${record.date}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<strong>Check-in Time:</strong>
|
||||
<span>${record.time}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4><i class="fas fa-map-marker-alt"></i> Location Information</h4>
|
||||
<div class="detail-item">
|
||||
<strong>Location Name:</strong>
|
||||
<span>${record.location}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<strong>Event:</strong>
|
||||
<span>${record.event}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<strong>QR Code Address:</strong>
|
||||
<span>${record.qr_address}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<strong>Check-in Address:</strong>
|
||||
<span>${record.checked_in_address}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4><i class="fas fa-mobile-alt"></i> Device Information</h4>
|
||||
<div class="detail-item">
|
||||
<strong>Device:</strong>
|
||||
<span>${record.device}</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<strong>GPS Coordinates:</strong>
|
||||
<span>${record.coordinates}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${locationAccuracySection}
|
||||
`;
|
||||
|
||||
modal.style.display = "block";
|
||||
}
|
||||
|
||||
// Enhanced sorting for location accuracy (numeric sorting)
|
||||
function sortTable(columnIndex) {
|
||||
if (sortColumn === columnIndex) {
|
||||
|
||||
@@ -34,90 +34,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Statistics Cards -->
|
||||
<div class="stats-section">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card primary">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-user-check"></i>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<h3>{{ stats.total_checkins or 0 }}</h3>
|
||||
<p>Total Check-ins</p>
|
||||
<span class="stat-trend">All time</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card success">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-users"></i>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<h3>{{ stats.unique_employees or 0 }}</h3>
|
||||
<p>Unique Employees</p>
|
||||
<span class="stat-trend">Have checked in</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card info">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<h3>{{ stats.active_locations or 0 }}</h3>
|
||||
<p>Active Locations</p>
|
||||
<span class="stat-trend">QR codes deployed</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card warning">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-calendar-day"></i>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<h3>{{ stats.today_checkins or 0 }}</h3>
|
||||
<p>Today's Check-ins</p>
|
||||
<span class="stat-trend">{{ current_date_formatted }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- GPS tracking stats -->
|
||||
<div class="stat-card info">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-satellite"></i>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<h3>{{ stats.records_with_gps or 0 }}</h3>
|
||||
<p>GPS Records</p>
|
||||
<span class="stat-trend">Location captured</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location accuracy stats (conditional) -->
|
||||
{% if has_location_accuracy_feature %}
|
||||
<div class="stat-card success">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-ruler"></i>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<h3>{{ "%.2f"|format(stats.avg_location_accuracy or 0) }}mi</h3>
|
||||
<p>Avg. Location Accuracy</p>
|
||||
<span class="stat-trend">Distance precision</span>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="stat-card success">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-crosshairs"></i>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<h3>GPS</h3>
|
||||
<p>Tracking Mode</p>
|
||||
<span class="stat-trend">Current system</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Filters Section with Date Range -->
|
||||
<div class="filters-section">
|
||||
@@ -331,24 +248,6 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="record-actions">
|
||||
<button onclick="viewRecordDetails('{{ record.id }}')"
|
||||
class="action-btn btn-view"
|
||||
title="View Details">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
{% if record.has_location_data %}
|
||||
<button onclick="showLocationMap('{{ record.id }}')"
|
||||
class="action-btn btn-map"
|
||||
title="Show on Map">
|
||||
<i class="fas fa-map"></i>
|
||||
</button>
|
||||
{% else %}
|
||||
<button class="action-btn btn-map"
|
||||
title="No GPS data available"
|
||||
disabled>
|
||||
<i class="fas fa-map"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
<button onclick="editRecord('{{ record.id }}')"
|
||||
class="action-btn btn-edit"
|
||||
title="Edit Record">
|
||||
|
||||
@@ -67,15 +67,7 @@ endblock %} {% block extra_head %}
|
||||
<p>Active QR Codes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card warning">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-users"></i>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<h3>{{ total_users or 0 }}</h3>
|
||||
<p>Total Users</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card danger">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-pause-circle"></i>
|
||||
|
||||
Reference in New Issue
Block a user