| Linux in-mum-web1499.main-hosting.eu 5.14.0-503.40.1.el9_5.x86_64 #1 SMP PREEMPT_DYNAMIC Mon May 5 06:06:04 EDT 2025 x86_64 Path : /home/u901718425/domains/task.urbanpillar.in/public_html/dashboard/ |
| Current File : /home/u901718425/domains/task.urbanpillar.in/public_html/dashboard/attendance.php |
<?php
require_once "../db.php";
include('aside.php');
if (!isset($_SESSION['user_id']) && !isset($_SESSION['role'])) {
header('location: /');
exit;
} else if (isset($_SESSION['role']) && $_SESSION['role'] === 'user') {
header('location: /');
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User Attendance Calendar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet" />
<link href="/style.css" rel="stylesheet" />
<style>
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 40px);
gap: 10px;
}
.day-label, .day {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
}
.day-label {
font-weight: bold;
background-color: #f8f9fa;
}
.day {
background-color: #e9ecef;
cursor: pointer;
transition: 0.3s;
}
.day:hover {
background-color: #d4edda;
}
.highlight {
background-color: #689820 !important;
color: white;
}
#map {
height: 300px;
width: 100%;
}
</style>
</head>
<body>
<div class="row m-0">
<?= aside('Attendance'); ?>
<div class="col vh-100 p-4 overflow-x-auto">
<div class="">
<h3 class="mb-4 text-center">User Attendance Calendar</h3>
<div class="mb-3">
<label for="userSelect" class="form-label">Select User</label>
<select class="form-select" id="userSelect">
<option value="">Select a user</option>
</select>
</div>
<div class="d-flex justify-content-between align-items-center mb-3">
<button class="btn btn-outline-dark" id="prevMonth">← Prev</button>
<h5 id="monthYear" class="mb-0"></h5>
<button class="btn btn-outline-dark" id="nextMonth">Next →</button>
</div>
<div class="calendar-grid mb-2" id="days"></div>
<div class="calendar-grid" id="dates"></div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="attendanceModal" tabindex="-1" aria-labelledby="attendanceModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content shadow-lg">
<div class="modal-header bg-success text-white">
<h5 class="modal-title" id="attendanceModalLabel">Attendance Details</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p><strong>Date:</strong> <span id="attendanceDate"></span></p>
<p><strong>Login:</strong> <span id="loginTime"></span></p>
<p><strong>Logout:</strong> <span id="logoutTime"></span></p>
<div id="map"></div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoia2F5Y29tbSIsImEiOiJja3Bqam5hZjgwMHZzMnhzM2ljNnR6bHV1In0.hLGIUvUOytwLgVgoAxx2IA';
const monthNames = [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
let currentYear = new Date().getFullYear();
let currentMonth = new Date().getMonth();
$(document).ready(function () {
loadUsers();
renderCalendar();
$('#prevMonth').click(() => {
currentMonth--;
if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
}
renderCalendar();
});
$('#nextMonth').click(() => {
currentMonth++;
if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
renderCalendar();
});
$('#userSelect').change(renderCalendar);
});
function loadUsers() {
$.get('/dashboard/get_users.php', function (res) {
const users = JSON.parse(res);
users.forEach(user => {
$('#userSelect').append(`<option value="${user.id}">${user.user_name || user.email}</option>`);
});
});
}
function renderCalendar() {
const selectedUser = $('#userSelect').val();
const daysContainer = $('#days').empty();
const datesContainer = $('#dates').empty();
$('#monthYear').text(`${monthNames[currentMonth]} ${currentYear}`);
dayNames.forEach(day => {
daysContainer.append(`<div class="day-label">${day}</div>`);
});
const firstDay = new Date(currentYear, currentMonth, 1).getDay();
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
for (let i = 0; i < firstDay; i++) {
datesContainer.append('<div></div>');
}
for (let d = 1; d <= daysInMonth; d++) {
const dateDiv = $(`<div class="day" data-date="${d}">${d}</div>`);
datesContainer.append(dateDiv);
dateDiv.click(() => {
if (!selectedUser) return;
const date = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
$.get('/dashboard/get_attendance_detail.php', {
user_id: selectedUser,
date: date
}, function (res) {
const {status, data} = JSON.parse(res);
$('#attendanceDate').text(date);
$('#loginTime').text(data.login_time || 'N/A');
$('#logoutTime').text(data.logout_time || 'N/A');
const lat = parseFloat(data.login_latitude) || 19.076;
const lng = parseFloat(data.login_longitude) || 72.8777;
const latLogout = parseFloat(data.logout_latitude) || 19.076;
const lngLogout = parseFloat(data.logout_longitude) || 72.8777;
const modal = new bootstrap.Modal(document.getElementById('attendanceModal'));
modal.show();
// Initialize Map
setTimeout(() => {
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [lng, lat],
zoom: 12
});
// Add Login Marker
new mapboxgl.Marker({ color: 'green' })
.setLngLat([lng, lat])
.setPopup(new mapboxgl.Popup().setHTML(`<b>Login Location</b>`))
.addTo(map);
// Add Logout Marker
new mapboxgl.Marker({ color: 'red' })
.setLngLat([lngLogout, latLogout])
.setPopup(new mapboxgl.Popup().setHTML(`<b>Logout Location</b>`))
.addTo(map);
// Fit map bounds to both markers
const bounds = new mapboxgl.LngLatBounds();
bounds.extend([lng, lat]);
bounds.extend([lngLogout, latLogout]);
map.fitBounds(bounds, { padding: 50 });
}, 500);
});
});
}
if (selectedUser) {
$.get('/dashboard/get_attendance_dates.php', {
user_id: selectedUser,
month: currentMonth + 1,
year: currentYear
}, function (response) {
const attendanceDays = JSON.parse(response);
attendanceDays.forEach(day => {
$(`#dates .day[data-date="${day}"]`).addClass('highlight');
});
});
}
}
</script>
</body>
</html>