| 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/task.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>Task</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<link href="/style.css" rel="stylesheet" />
<style>
body {
font-family: Arial, sans-serif;
}
#calendar {
display: inline-block;
}
#month {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 35px);
gap: 5px;
justify-content: center;
}
.day:hover {
background-color: #d1e7dd;
transition: 0.3s;
}
.day-label,
.day {
width: 35px;
height: 35px;
line-height: 35px;
border-radius: 5px;
}
.day-label {
font-weight: bold;
background-color: transparent;
}
.day {
background-color: #f0f0f0;
cursor: pointer;
}
.past-day {
background-color: #e0e0e0;
color: #999;
}
.today {
background-color: #689820;
color: white;
cursor: pointer;
}
.today:hover {
background-color: #557c1c;
}
</style>
</head>
<body>
<div class="row m-0">
<?= aside('Task List'); ?>
<div class="col vh-100 px-4 overflow-x-auto">
<div class="row justify-content-center">
<div class="col-12 row m-0">
<div class="mb-3 col-12 col-md-4 px-0">
</div>
</div>
<!-- Calendar Column -->
<div class="col-auto text-center">
<div class="mb-3 text-start">
<select class="form-select form-select-sm" id="userSelect">
<option value="">Select a user</option>
</select>
</div>
<div id="calendar">
<div id="month" class="d-flex justify-content-between"></div>
<div class="calendar-grid" id="days"></div>
<div class="calendar-grid" id="dates"></div>
</div>
</div>
<!-- Task Display Column -->
<div class="col text-start mt-5 mt-md-0">
<div class="fs-7 mb-3">Selected Date: <span id="selectedDateLabel" class="h6">None</span></div>
<ol class="list-group list-group-numbered mb-3 fs-7" id="taskDisplayList">
<li class="list-group-item">Select a date to view tasks</li>
</ol>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="taskModal" tabindex="-1" aria-labelledby="taskModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="taskModalLabel">Today's Tasks</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<textarea class="form-control" id="taskInput" rows="4" placeholder="Enter your tasks for today... seprated by (,)"></textarea>
<ol class="list-group list-group-numbered mb-3 text-start" id="taskList"></ol>
</div>
<div class="modal-footer">
<button type="button" id="addTask" class="btn btn-success">Save Task</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function () {
let current = new Date();
let selectedUser = null;
const monthNames = [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
function renderCalendar(year, month) {
const today = new Date();
const isCurrentMonth = today.getFullYear() === year && today.getMonth() === month;
$('#month').html(`
<button class="btn btn-sm btn-outline-secondary d-flex justify-content-center align-items-center me-2" id="prevMonth"><span class="material-symbols-outlined">
chevron_left
</span></button>
${monthNames[month]} ${year}
<button class="btn btn-sm btn-outline-secondary d-flex justify-content-center align-items-center ms-2" id="nextMonth"><span class="material-symbols-outlined">
chevron_right
</span></button>
`);
$('#days').empty();
$('#dates').empty();
// Add day labels
dayNames.forEach(day => {
$('#days').append(`<div class="day-label">${day}</div>`);
});
const firstDay = new Date(year, month, 1).getDay();
const daysInMonth = new Date(year, month + 1, 0).getDate();
// Add blanks
for (let i = 0; i < firstDay; i++) {
$('#dates').append('<div class="day"></div>');
}
// Add actual days
for (let d = 1; d <= daysInMonth; d++) {
let className = 'day';
const dateObj = new Date(year, month, d);
const isPast = dateObj < new Date(today.getFullYear(), today.getMonth(), today.getDate());
if (isPast) className += ' past-day';
if (isCurrentMonth && d === today.getDate()) className += ' today';
$('#dates').append(`<div class="${className}" data-date="${d}">${d}</div>`);
}
if (selectedUser) highlightTaskDates(selectedUser, year, month);
}
function highlightTaskDates(userId, year, month) {
$.get('/dashboard/get_task_dates.php', {
user_id: userId,
month: month + 1,
year: year
}, function (response) {
const taskDates = JSON.parse(response);
taskDates.forEach(d => {
$(`[data-date="${d}"]`).addClass('today');
});
});
}
// Initial render
renderCalendar(current.getFullYear(), current.getMonth());
// Month navigation
$(document).on('click', '#prevMonth', function () {
current.setMonth(current.getMonth() - 1);
renderCalendar(current.getFullYear(), current.getMonth());
});
$(document).on('click', '#nextMonth', function () {
current.setMonth(current.getMonth() + 1);
renderCalendar(current.getFullYear(), current.getMonth());
});
// Populate user dropdown
$.get('/dashboard/get_users.php', function (response) {
const users = JSON.parse(response);
users.forEach(user => {
$('#userSelect').append(`<option value="${user.id}">${user.user_name || user.email}</option>`);
});
});
// On user change
$('#userSelect').on('change', function () {
selectedUser = $(this).val();
$('#taskDisplayList').html('<li class="list-group-item">Select a date to view tasks</li>');
renderCalendar(current.getFullYear(), current.getMonth());
});
// Date click
$(document).on('click', '.day', function () {
const selectedDate = $(this).data('date');
const year = current.getFullYear();
const month = current.getMonth();
if (!selectedUser) {
alert("Please select a user first.");
return;
}
$('#selectedDateLabel').text(`${monthNames[month]} ${selectedDate}, ${year}`);
$('#taskDisplayList').empty();
$.get('/dashboard/fetch_task.php', {
date: selectedDate,
user_id: selectedUser,
month: month + 1,
year: year
}, function (response) {
const tasks = JSON.parse(response);
if (tasks && tasks.length) {
tasks.forEach(task => {
const taskItems = task.split(',').map(item => item.trim()).filter(item => item !== '');
taskItems.forEach(item => {
$('#taskDisplayList').append(`<li class="list-group-item">${item}</li>`);
});
});
} else {
$('#taskDisplayList').append('<li class="list-group-item">No tasks found.</li>');
}
});
});
});
// $(document).ready(function () {
// const now = new Date();
// const year = now.getFullYear();
// const month = now.getMonth();
// const todayDate = now.getDate();
// const todayDay = now.getDay();
// const monthNames = [
// "January", "February", "March", "April", "May", "June",
// "July", "August", "September", "October", "November", "December"
// ];
// const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
// $('#month').text(`${monthNames[month]} ${year}`);
// // Add day labels
// dayNames.forEach((day, i) => {
// let labelClass = i === todayDay ? 'text-success fw-bold' : '';
// $('#days').append(`<div class="day-label ${labelClass}">${day}</div>`);
// });
// const firstDay = new Date(year, month, 1).getDay();
// const daysInMonth = new Date(year, month + 1, 0).getDate();
// // Add blank spaces
// for (let i = 0; i < firstDay; i++) {
// $('#dates').append('<div class="day"></div>');
// }
// // Add day numbers
// for (let d = 1; d <= daysInMonth; d++) {
// const dateObj = new Date(year, month, d);
// let className = 'day';
// if (dateObj < now.setHours(0, 0, 0, 0)) {
// className += ' past-day';
// } else if (d === todayDate) {
// className += ' today';
// }
// $('#dates').append(`<div class="${className}" data-date="${d}">${d}</div>`);
// }
// let selectedUser = null;
// function highlightTaskDates(userId) {
// $('#dates').children().each(function () {
// $(this).removeClass('today');
// });
// $.get('/dashboard/get_task_dates.php', {
// user_id: userId,
// month: month + 1,
// year: year
// }, function (response) {
// const taskDates = JSON.parse(response);
// taskDates.forEach(d => {
// $(`[data-date="${d}"]`).addClass('today');
// });
// });
// }
// // Populate user dropdown
// $.get('/dashboard/get_users.php', function (response) {
// const users = JSON.parse(response);
// users.forEach(user => {
// $('#userSelect').append(`<option value="${user.id}">${user.user_name || user.email}</option>`);
// });
// });
// // On user change
// $('#userSelect').on('change', function () {
// selectedUser = $(this).val();
// $('#taskDisplayList').html('<li class="list-group-item">Select a date to view tasks</li>');
// highlightTaskDates(selectedUser);
// });
// // Update existing calendar day click logic
// $(document).on('click', '.day', function () {
// const selectedDate = $(this).data('date');
// if (!selectedUser) {
// alert("Please select a user first.");
// return;
// }
// $('#selectedDateLabel').text(`${monthNames[month]} ${selectedDate}, ${year}`);
// $('#taskDisplayList').empty();
// $.get('/dashboard/fetch_task.php', {
// date: selectedDate,
// user_id: selectedUser
// }, function (response) {
// const tasks = JSON.parse(response);
// if (tasks && tasks.length) {
// tasks.forEach(task => {
// const taskItems = task.split(',').map(item => item.trim()).filter(item => item !== '');
// taskItems.forEach(item => {
// $('#taskDisplayList').append(`<li class="list-group-item">${item}</li>`);
// });
// });
// } else {
// $('#taskDisplayList').append('<li class="list-group-item">No tasks found.</li>');
// }
// });
// });
// });
</script>
</body>
</html>